/*
  EmployeaseAI brand tokens + brochure layout primitives.
  Referenced directly (not scoped) from each host's HTML shell:
    _content/EmployeaseAI.RazorLib/css/brochure-theme.css
  Values are ported directly from the approved mockup
  (docs/mockups/employease-homepage.html) - keep this file's colors in sync
  with that file's :root block rather than approximating them.
*/

:root {
    --ea-ink: #06111f;
    --ea-navy: #091a2f;
    --ea-navy-2: #102946;
    --ea-blue: #1d9bf0;
    --ea-blue-light: #64B5F6;
    --ea-cyan: #77d7ff;
    --ea-ice: #eaf8ff;
    --ea-muted: #a9bfd2;
    --ea-blue-pale: #E8F1FB;
    --ea-white: #FFFFFF;
    --ea-gray-100: #F3F7FC;
    --ea-gray-300: #DDE4ED;
    --ea-gray-600: #5B6B82;

    --ea-line-dark: rgba(141, 211, 255, .18);
    /* Deliberately near-opaque: the header sits in its own layout slot above
       the hero (not overlaid on it), so the mockup's lighter glass value
       would blend with the plain page background behind it, not the artwork. */
    --ea-surface-dark: rgba(6, 17, 31, .92);

    --ea-radius: 1rem;
    --ea-radius-large: 1.625rem;
    --ea-shadow: 0 2px 12px rgba(10, 26, 51, 0.08);
    --ea-shadow-large: 0 30px 80px rgba(0, 10, 25, .32);
    --ea-container-width: 1180px;
}

/* --- Layout primitives, shared by every Brochure page ------------------ */

html {
    scroll-behavior: smooth;
}

/* Keep anchor targets (e.g. "#how") from landing underneath the sticky header. */
:target {
    scroll-margin-top: 5.5rem;
}

/* Ported from the mockup's <body> background. The header (and the mobile
   menu panel) use a translucent glass surface; without this, that glass
   would blend with the plain white page background sitting behind it in
   normal document flow instead of a dark tone, on every page. */
.brochure-shell {
    background:
        radial-gradient(circle at 88% 8%, rgba(29, 155, 240, .12), transparent 27rem),
        var(--ea-ink);
}

.brochure-container {
    width: 100%;
    max-width: var(--ea-container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.brochure-content {
    flex: 1 0 auto;
}

/* --- Heading scale --------------------------------------------------------
   Editorial sizing site-wide instead of browser defaults. Scoped component
   CSS with a more specific selector (e.g. a dark-panel "h2 { color: ... }")
   still wins where a section needs a different treatment. */

.brochure-shell h1 {
    letter-spacing: -.02em;
}

.brochure-shell h2 {
    margin: 0 0 1rem;
    color: var(--ea-navy);
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -.02em;
}

.brochure-shell h3 {
    margin: 0 0 .5rem;
    letter-spacing: -.01em;
}

.brochure-page-header {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 8vw, 5.5rem) 0;
    background:
        radial-gradient(circle at 85% 0%, rgba(119, 215, 255, .12), transparent 60%),
        var(--ea-navy);
    color: var(--ea-white);
}

.brochure-page-header h1 {
    margin: 0;
    max-width: 16ch;
    color: var(--ea-white);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.05;
}

/* --- Shared "closing CTA" panel, used at the bottom of every brochure page -
   Colors ported directly from the mockup's .ea-cta__panel. */

.cta__panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 2rem;
    padding: clamp(2.25rem, 6vw, 5.5rem);
    border: 1px solid rgba(119, 215, 255, .25);
    border-radius: var(--ea-radius-large);
    background:
        radial-gradient(circle at 90% 15%, rgba(119, 215, 255, .18), transparent 20rem),
        linear-gradient(135deg, #102f4e, #08192b 64%);
    box-shadow: var(--ea-shadow-large);
    color: var(--ea-white);
}

.cta__panel::after {
    content: "AI";
    position: absolute;
    z-index: 0;
    right: 3%;
    top: -35%;
    color: rgba(119, 215, 255, .055);
    font-size: clamp(9rem, 20vw, 18rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
    pointer-events: none;
    user-select: none;
}

.cta__panel > * {
    position: relative;
    z-index: 1;
}

.cta__panel h2 {
    color: var(--ea-white);
}

.cta__copy {
    max-width: 34rem;
    margin: 0;
    color: var(--ea-muted);
}

@media (max-width: 760px) {
    .cta__panel {
        grid-template-columns: 1fr;
    }
}

.brochure-section {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.brochure-section + .brochure-section {
    border-top: 1px solid var(--ea-gray-300);
}

/* The mockup is a predominantly dark site with exactly one pale "breather"
   section (its .ea-section--light, used for "How it works"). Everything
   else - including the skills grid - stays on the dark ink background. */

.brochure-section--light {
    color: var(--ea-navy);
    background: linear-gradient(180deg, #f7fbfe, #eaf5fb);
}

.brochure-section.brochure-section--dark {
    border-top: 0;
    background-color: var(--ea-ink);
    color: var(--ea-white);
}

.brochure-section--dark .brochure-kicker {
    color: var(--ea-cyan);
}

.brochure-section--dark h2 {
    color: var(--ea-white);
}

.brochure-section--dark .brochure-lead {
    color: var(--ea-muted);
}

.brochure-section--dark .section-heading__badge {
    color: rgba(29, 155, 240, .7);
}

/* --- Skill card grid, shared by the homepage preview and the /jobs catalog - */

.skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 900px) {
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .skills-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Buttons ---------------------------------------------------------------
   Ported from the mockup's .ea-nav__cta / .ea-action. Pill-shaped throughout;
   primary is the one luminous surface reserved for the main call to action. */

.brochure-btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .72rem 1.3rem;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 750;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.brochure-btn--primary {
    color: #031525;
    background: linear-gradient(135deg, var(--ea-cyan), #2da8ff);
    box-shadow: 0 12px 34px rgba(29, 155, 240, .4);
}

.brochure-btn--primary:hover {
    transform: translateY(-2px);
}

.brochure-btn--ghost {
    color: var(--ea-white);
    border-color: rgba(255, 255, 255, .28);
    background: rgba(7, 24, 43, .46);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.brochure-btn--ghost:hover {
    transform: translateY(-2px);
    border-color: var(--ea-cyan);
}

.brochure-btn:disabled {
    cursor: not-allowed;
}

/* --- Typography utilities, shared across brochure sections ------------- */

.brochure-kicker {
    margin: 0 0 0.75rem;
    color: var(--ea-blue);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.brochure-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 1.1rem;
    color: var(--ea-cyan);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.brochure-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.brochure-lead {
    max-width: 42rem;
    margin: 0;
    color: var(--ea-gray-600);
    font-size: 1.05rem;
}

/* --- Accessibility -------------------------------------------------------
   Applies to the whole brochure area regardless of which host renders it. */

:focus-visible {
    outline: 3px solid var(--ea-cyan);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}