/* ==========================================================================
   ElderGrade — Modern theme (FlexJobs structural system)

   The shape is taken from flexjobs.com: a white brand bar over a solid deep
   nav bar, a two-column hero with the headline carrying one accent phrase, a
   five-column footer on light grey with a notes bar beneath it, and — the part
   that does most of the work — flat surfaces. 4px radius, hairline borders, no
   shadow except on card hover.

   Colour is deliberately confined to the token block below so the palette can
   be changed without touching a single rule. Roles, not names: --eg-deep is
   headlines and the nav bar, --eg-brand is links, --eg-accent is reserved for
   primary actions only. Using the accent anywhere else is what makes a page
   look cheap.

   Loaded after the Tailwind build and only when Theme::modern() is true. The
   Tailwind palette is CSS variables, so re-tokening the whole site is the first
   block and everything after it is shape.
   ========================================================================== */
html.theme-modern {
    /* ---- palette: ElderGrade's own, kept ---- */
    --eg-deep: #4a1838;
    --eg-deep-2: #351027;
    --eg-brand: #8c3068;
    --eg-brand-dark: #6b2350;
    --eg-tint: #fbf4f8;
    --eg-tint-2: #f3e9ef;
    --eg-accent: #e8622e;
    --eg-accent-hover: #f2764a;
    --eg-text: #2c2429;
    --eg-muted: #6b6167;
    --eg-border: #dfd9dc;
    --eg-section: #faf8f9;
    --eg-footer: #f5f3f4;
    --eg-footer-notes: #eceaeb;
    --eg-shadow: 0 6px 18px rgba(74, 24, 56, .10);

    /* ---- Tailwind tokens, re-pointed ---- */
    --color-paper: #ffffff;
    --color-paper-dark: var(--eg-section);
    --color-ink: var(--eg-text);
    --color-ink-soft: var(--eg-muted);
    --color-line: var(--eg-border);

    --color-brand-50: var(--eg-tint);
    --color-brand-100: #f6e7f0;
    --color-brand-200: #eccde0;
    --color-brand-300: #dda6c6;
    --color-brand-400: #c06f9f;
    --color-brand-500: #a84a80;
    --color-brand-600: var(--eg-brand);
    --color-brand-700: var(--eg-brand-dark);
    --color-brand-800: var(--eg-deep);
    --color-brand-900: var(--eg-deep-2);
}

/* ---------- Base ---------- */
html.theme-modern body { background: #fff; color: var(--eg-text); font-size: 16px; line-height: 1.5; }
html.theme-modern main a { font-weight: 500; }
html.theme-modern main img, html.theme-modern main svg, html.theme-modern main iframe { max-width: 100%; }
html.theme-modern main * { min-width: 0; }

html.theme-modern h1, html.theme-modern h2, html.theme-modern h3, html.theme-modern .font-display {
    letter-spacing: -.015em;
}
html.theme-modern h1 { font-weight: 600; color: var(--eg-deep); }
html.theme-modern h2 { font-weight: 600; color: var(--eg-text); }
html.theme-modern main a:not([class*="text-white"]):not(.card):not(.grade-chip):not([class*="bg-brand"]) { color: var(--eg-brand); }

/* ---------- Shape: flat, hairline, 4px ---------- */
html.theme-modern .card { border-radius: 4px; border-color: var(--eg-border); box-shadow: none; }
html.theme-modern .card:hover { border-color: var(--eg-brand); box-shadow: var(--eg-shadow); transform: none; }
html.theme-modern .grade-chip { border-radius: 4px; }
html.theme-modern .shadow-lg, html.theme-modern [class*="shadow-brand"] { box-shadow: none; }
html.theme-modern .rounded-2xl { border-radius: 6px; }
html.theme-modern .rounded-xl, html.theme-modern .rounded-lg { border-radius: 4px; }
html.theme-modern .bg-paper-dark { background: var(--eg-tint-2); }

/* ---------- Inputs ---------- */
html.theme-modern input[type="search"], html.theme-modern input[type="text"], html.theme-modern select {
    border: 1px solid var(--eg-border); border-radius: 4px; background: var(--eg-tint);
}
html.theme-modern input[type="search"]::-webkit-search-decoration,
html.theme-modern input[type="search"]::-webkit-search-cancel-button,
html.theme-modern input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; display: none; }
html.theme-modern input:focus, html.theme-modern select:focus {
    outline: none; border-color: var(--eg-brand); box-shadow: 0 0 0 3px rgba(140, 48, 104, .15);
}

/* ==========================================================================
   Header — white brand bar over a solid deep nav bar
   ========================================================================== */
html.theme-modern .fj-header { border-bottom: 1px solid var(--eg-border); background: #fff; }
html.theme-modern .fj-topbar-inner { gap: 20px; }
html.theme-modern .fj-tagline { display: none; font-size: 14px; color: var(--eg-muted); }
html.theme-modern .fj-tagline b { color: var(--eg-deep); font-weight: 600; }
@media (min-width: 1120px) { html.theme-modern .fj-tagline { display: block; } }

html.theme-modern .fj-search { display: none; flex: 1; max-width: 460px; margin-left: auto; }
@media (min-width: 1024px) { html.theme-modern .fj-search { display: flex; } }
html.theme-modern .fj-search input {
    flex: 1; height: 42px; padding: 0 14px; font-size: 14px;
    border: 1px solid var(--eg-border); border-right: 0; border-radius: 4px 0 0 4px; background: var(--eg-tint);
}
html.theme-modern .fj-search button {
    width: 52px; height: 42px; display: grid; place-items: center; border-radius: 0 4px 4px 0;
    background: var(--eg-accent); color: #fff; border: 0; cursor: pointer;
}
html.theme-modern .fj-search button:hover { background: var(--eg-accent-hover); }

html.theme-modern .fj-nav { background: var(--eg-deep); }
html.theme-modern .fj-nav-inner { display: flex; align-items: center; gap: 26px; height: 48px; }
html.theme-modern .fj-nav a { color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; opacity: .92; white-space: nowrap; }
html.theme-modern .fj-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
html.theme-modern .fj-nav a.is-active { opacity: 1; font-weight: 600; box-shadow: inset 0 -3px 0 var(--eg-accent); }
html.theme-modern .fj-nav .fj-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
html.theme-modern .fj-nav .fj-cta {
    background: var(--eg-accent); padding: 8px 16px; border-radius: 4px; font-weight: 600; opacity: 1;
}
html.theme-modern .fj-nav .fj-cta:hover { background: var(--eg-accent-hover); text-decoration: none; }

html.theme-modern .fj-mobile-search { background: var(--eg-deep); padding: 10px 0 12px; }
html.theme-modern .fj-mobile-search form { display: flex; }
html.theme-modern .fj-mobile-search input {
    flex: 1; height: 44px; padding: 0 14px; font-size: 16px; border: 0; border-radius: 4px 0 0 4px; background: #fff;
}
html.theme-modern .fj-mobile-search button {
    width: 56px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 0 4px 4px 0;
    background: var(--eg-accent); color: #fff;
}
html.theme-modern .fj-cta-mobile {
    margin-left: auto; background: var(--eg-accent); color: #fff; font-size: 14px; font-weight: 600;
    padding: 9px 14px; border-radius: 4px; text-decoration: none; white-space: nowrap;
}

/* ==========================================================================
   Hero — two columns on white
   ========================================================================== */
html.theme-modern .fj-hero { padding: 52px 0 44px; border-bottom: 1px solid var(--eg-border); }
html.theme-modern .fj-hero-inner { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { html.theme-modern .fj-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; } }
html.theme-modern .fj-hero h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.13; font-weight: 600; color: var(--eg-deep); margin: 0; }
html.theme-modern .fj-hero h1 em { font-style: normal; color: var(--eg-accent); }
html.theme-modern .fj-hero .lead { margin: 18px 0 26px; font-size: 17px; line-height: 1.6; color: var(--eg-muted); max-width: 54ch; }
html.theme-modern .fj-hero form { display: flex; max-width: 560px; }
html.theme-modern .fj-hero form input {
    flex: 1; height: 52px; padding: 0 16px; font-size: 16px;
    border: 1px solid var(--eg-border); border-right: 0; border-radius: 4px 0 0 4px; background: #fff;
}
html.theme-modern .fj-hero form button {
    height: 52px; padding: 0 24px; font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap;
    background: var(--eg-accent); border: 0; border-radius: 0 4px 4px 0; cursor: pointer;
}
html.theme-modern .fj-hero form button:hover { background: var(--eg-accent-hover); }
html.theme-modern .fj-hint { margin-top: 12px; font-size: 13.5px; color: var(--eg-muted); }

html.theme-modern .fj-record { position: relative; display: grid; gap: 12px; }
html.theme-modern .fj-record-card {
    background: #fff; border: 1px solid var(--eg-border); border-radius: 4px; padding: 16px 18px;
}
html.theme-modern .fj-record-card strong { display: block; font-size: 26px; font-weight: 600; color: var(--eg-deep); line-height: 1.1; }
html.theme-modern .fj-record-card span { font-size: 13.5px; color: var(--eg-muted); }
html.theme-modern .fj-record-grades { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
html.theme-modern .fj-record-grades small { font-size: 12.5px; color: var(--eg-muted); margin-left: 4px; }
html.theme-modern .fj-pill {
    display: inline-block; width: fit-content; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
}
html.theme-modern .fj-pill-1 { background: var(--eg-tint); color: var(--eg-deep); border: 1px solid var(--eg-tint-2); }
html.theme-modern .fj-pill-2 { background: var(--eg-deep); color: #fff; }

/* ==========================================================================
   Footer — five columns on light grey, notes bar beneath
   ========================================================================== */
html.theme-modern .fj-footer { margin-top: 64px; background: var(--eg-footer); color: var(--eg-text); }
html.theme-modern .fj-footer-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 44px 0 36px; }
@media (min-width: 720px) { html.theme-modern .fj-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { html.theme-modern .fj-footer-main { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; } }
html.theme-modern .fj-footer h3 { font-size: 15px; font-weight: 600; color: var(--eg-deep); margin: 0 0 14px; }
html.theme-modern .fj-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html.theme-modern .fj-footer li a { color: #221c1f; font-size: 14px; text-decoration: none; }
html.theme-modern .fj-footer li a:hover { color: var(--eg-brand); text-decoration: underline; }
html.theme-modern .fj-footer li a small { color: var(--eg-muted); font-size: 12.5px; margin-left: 4px; }
html.theme-modern .fj-footer-brand { display: flex; flex-direction: column; gap: 12px; }
html.theme-modern .fj-footer-brand p { font-size: 14px; line-height: 1.6; margin: 0; max-width: 34ch; }
html.theme-modern .fj-footer-notes { background: var(--eg-footer-notes); padding: 22px 0 26px; }
html.theme-modern .fj-footer-notes p { font-size: 13px; line-height: 1.6; color: #4a4247; margin: 0 0 8px; }
html.theme-modern .fj-footer-notes p:last-child { margin: 0; }
html.theme-modern .fj-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--eg-muted); }
html.theme-modern .fj-footer-legal a { color: var(--eg-muted); text-decoration: none; }
html.theme-modern .fj-footer-legal a:hover { color: var(--eg-brand); text-decoration: underline; }