/* =========================================================
   WP-specific glue for the FON design system
   ========================================================= */

/* Admin-bar offset for the sticky navbar.
   .navbar is `position: sticky; top: 0`, so its offset must equal the admin
   bar's height alone. (The old value added --topbar-h — fixed-header math —
   which parked the bar 36px low, leaving a gap and covering the page's first
   row. The topbar itself was removed 2026-07-19.)
   Widths follow WP core: 32px, 46px under 783px, and 0 under 601px where
   #wpadminbar stops being fixed and scrolls away. */
body.admin-bar .navbar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .navbar { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .navbar { top: 0; }
}

/* ---------- Homepage hero: brighter, warmer treatment (2026-07-19) ----------
   The ported design system scrims the hero photo with 72–90% navy, which read
   heavy once the particle canvas was removed. These rules lighten the scrim,
   let the photograph carry the section, and keep the white type legible with a
   stronger wash on the left (where the copy sits) than on the right. */
body.fon-scope .anim-hero .kb-bg {
  filter: brightness(1.16) saturate(1.06);
}
body.fon-scope .anim-hero .kb-overlay {
  background:
    /* warm gold light source, upper left */
    radial-gradient(70% 65% at 12% 30%, rgba(201,169,97,.13), transparent 62%),
    /* legibility scrim: strong behind the copy, opening up to the right */
    linear-gradient(95deg, rgba(8,15,40,.74) 0%, rgba(8,15,40,.56) 38%, rgba(8,15,40,.24) 72%, rgba(8,15,40,.14) 100%),
    /* gentle vertical seat so the stats row keeps contrast */
    linear-gradient(180deg, rgba(8,15,40,.16) 0%, rgba(8,15,40,.10) 45%, rgba(8,15,40,.44) 100%);
}
/* The base element background sits behind the photo; lighten it too so any
   letterboxing during the Ken Burns pan doesn't flash near-black. */
body.fon-scope .anim-hero {
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(37,64,153,.30), transparent 70%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--royal-700, #1c3474) 100%);
}
/* Small shadow keeps white type crisp over the brighter photograph. */
body.fon-scope .anim-hero h1,
body.fon-scope .anim-hero .hero-lead,
body.fon-scope .anim-hero .hero-stats .num {
  text-shadow: 0 2px 20px rgba(8,15,40,.42);
}

/* ---------- Concierge ("Ask Mandy") on phones & tablets (2026-07-19) --------
   The plugin ships a fixed pill at right/bottom 20px with z-index 99998, which
   landed straight on top of the tab bar's Menu button. Below the tab-bar
   breakpoint it becomes a compact avatar button parked above the bar, plus a
   labelled row inside the slide-up menu — so the concierge is reachable from
   two places and covers nothing. */
@media (max-width: 1080px) {
  /* No floating launcher on touch layouts — the "Ask Mandy" row in the
     slide-up menu is the only entry point. The button element stays in the
     DOM (hidden) because that row opens the chat by clicking it, and a
     display:none element still dispatches a programmatic .click(). */
  .fon-ia-launch { display: none !important; }
  .fon-ia:not([data-open="true"]) {
    /* collapse the empty wrapper so it can never intercept taps */
    width: 0; height: 0; overflow: hidden; pointer-events: none;
  }

  /* Once open, the conversation owns the screen: full-height sheet, tab bar
     out of the way so the composer isn't crowded by the on-screen keyboard. */
  .fon-ia[data-open="true"] { inset: 0 0 0 0; right: 0; bottom: 0; }
  .fon-ia[data-open="true"] .fon-ia-panel {
    width: 100%; max-width: none;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0;
  }
  body:has(.fon-ia[data-open="true"]) .fon-tabbar { display: none; }

  /* Concierge row in the slide-up menu. */
  .fs-ask {
    display: flex; align-items: center; gap: 12px; width: 100%;
    margin-top: 10px; padding: 11px 12px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--ivory); color: var(--ink);
    text-align: left; cursor: pointer; font: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .fs-ask-face { border-radius: 50%; object-fit: cover; object-position: 50% 22%; flex: none; border: 1px solid rgba(201,169,97,.55); }
  .fs-ask-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .fs-ask .fs-kicker { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600); }
  .fs-ask strong { font-family: var(--font-sans); font-weight: 700; font-size: .95rem; }
  .fs-ask-sub { font-size: .76rem; color: var(--muted); line-height: 1.3; }
  .fs-ask-arrow { width: 18px; height: 18px; margin-left: auto; flex: none; color: var(--muted); }
}


/* ---------- Fixed hero photographs (2026-07-19) ----------
   Replaces SmugMug branding slots on these pages. Slots are auto-assigned from
   event cover photos in list order, so they drift whenever events change — the
   News page had been handed a dinner plate, Newsletters a wine bar. Images ship
   with the theme, so they are stable.

   Each page sets --hero-photo; the scrim is shared and tunable per page via
   --scrim-*. It runs lighter than the slot scrim branding.js applies (74–90%
   navy), which is tuned for bright event photography and would bury these
   deliberately low-key images. */
body.fon-scope .page-hero.hero-photo {
  --scrim-top: .80;
  --scrim-mid: .52;
  --scrim-bot: .66;
  background-image:
    linear-gradient(180deg,
      rgba(8, 15, 40, var(--scrim-top)) 0%,
      rgba(8, 15, 40, var(--scrim-mid)) 46%,
      rgba(8, 15, 40, var(--scrim-bot)) 100%),
    var(--hero-photo);
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
}
/* ::after lays a gold radial wash over every hero; softened here so it doesn't
   flatten the photograph back out. */
body.fon-scope .page-hero.hero-photo::after { opacity: .5; }

body.fon-scope .page-hero.hero-photo-news        { --hero-photo: url('../img/hero-news.jpg'); }
body.fon-scope .page-hero.hero-photo-newsletters { --hero-photo: url('../img/hero-newsletters.jpg'); }
/* Both of these are dusk/night scenes — they need less scrim to stay readable
   as photographs rather than dark rectangles. */
body.fon-scope .page-hero.hero-photo-network {
  --hero-photo: url('../img/hero-network.jpg');
  --scrim-top: .72; --scrim-mid: .38; --scrim-bot: .58;
  background-position: center 55%;
}
body.fon-scope .page-hero.hero-photo-subscribe {
  --hero-photo: url('../img/hero-subscribe.jpg');
  --scrim-top: .74; --scrim-mid: .42; --scrim-bot: .60;
  background-position: center 50%;
}

/* WP menu <li> classes shouldn't add bullets/margins inside our nav */
.nav-links li, .nav-sub li { margin: 0; }

/* Full-width containers are true full-bleed: the static layout's side gutters
   come from .container / boxed content width, never from full-bleed wrappers.
   (Per-element padding set in the Elementor editor still overrides this —
   elementor-post CSS loads later at equal specificity.) */
body.fon-scope .e-con.e-con-full {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
}

/* The static site lifts `body > section` etc. above the fixed orb backdrop
   (body::before, z-index 0). In WP the page content lives inside Elementor's
   wrapper div — lift that wrapper the same way. */
body.fon-scope > [data-elementor-type],
body.fon-scope [data-elementor-type="wp-page"],
body.fon-scope [data-elementor-type="wp-post"] { position: relative; z-index: 1; }

/* Elementor sections adopt the static site's vertical rhythm via the
   `section` element rule already; make full-width containers behave */
.elementor-section.section { padding: 0; }

/* Gold styling for the last topbar link (was inline style in static HTML) */
.topbar-right a:last-child { color: var(--gold-300); }

/* =========================================================
   Dynamic news: taxonomy filter chips + loop grid + pagination
   ========================================================= */
/* Filter bar items styled as the design system's .chip pills */
.fon-filter-chips .e-filter { gap: .6rem; flex-wrap: wrap; justify-content: flex-start; }
.fon-filter-chips .e-filter-item {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: .5rem 1.05rem; cursor: pointer; transition: all .25s var(--ease);
}
.fon-filter-chips .e-filter-item:hover { border-color: var(--navy-900); color: var(--ink); }
.fon-filter-chips .e-filter-item[aria-pressed="true"] {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff;
}

/* Loop-grid pagination in the same pill language */
.elementor-pagination { margin-top: 2.4rem; text-align: center; }
.elementor-pagination .page-numbers {
  display: inline-block; min-width: 2.4rem; padding: .5rem .8rem; margin: 0 .2rem;
  font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
  color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px;
  transition: all .25s var(--ease);
}
.elementor-pagination .page-numbers:hover { border-color: var(--navy-900); color: var(--ink); }
.elementor-pagination .page-numbers.current { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

/* Card internals: Elementor's global heading typography must not override the
   card's own type scale — replicate the design system's values at higher
   specificity instead of a blanket font reset. */
.article-card h3.elementor-heading-title {
  font-family: var(--font-sans); font-weight: 700; font-size: 1.25rem;
  line-height: 1.25; letter-spacing: -0.016em; color: var(--ink); margin: 0;
}
.article-card .article-meta .elementor-heading-title {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.article-card .elementor-widget-text-editor { font-size: .92rem; color: var(--ink-2); flex: 1; }
.article-card { display: flex; flex-direction: column; height: 100%; color: inherit; }

/* =========================================================
   Single post: sidebar layout + widgets
   ========================================================= */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3.2rem; align-items: start; }
.post-layout .article-page { min-width: 0; }
.post-sidebar { position: sticky; top: calc(var(--nav-h) + var(--topbar-h) + 1.5rem); display: flex; flex-direction: column; gap: 1.4rem; }
.ps-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.4rem; }
.ps-title {
  font-family: var(--font-sans); font-weight: 700; font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-600);
  margin-bottom: .9rem;
}
.ps-cats li { border-bottom: 1px solid var(--line); }
.ps-cats li:last-child { border-bottom: 0; }
.ps-cats a { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; font-size: .88rem; color: var(--ink-2); transition: color .2s var(--ease); }
.ps-cats a:hover { color: var(--royal-600); }
.ps-cats a span { font-size: .72rem; color: var(--muted); }
.ps-recent { display: block; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.ps-recent:last-child { border-bottom: 0; }
.ps-recent strong { display: block; font-size: .88rem; line-height: 1.35; color: var(--ink); font-weight: 600; transition: color .2s var(--ease); }
.ps-recent:hover strong { color: var(--royal-600); }
.ps-recent span { font-size: .74rem; color: var(--muted); }
.ps-cta { background: var(--navy-900); border-color: var(--navy-700); }
.ps-cta p { color: rgba(255,255,255,.78); font-size: .9rem; margin-bottom: 1rem; }
.ps-plus { display: block; margin-top: .8rem; text-align: center; font-size: .8rem; color: var(--gold-300); }
.ps-plus:hover { color: #fff; }
@media (max-width: 1080px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; }
}

/* The orb-lift rule (body > .navbar, 0,1,1) demotes the navbar to z-index 1,
   letting hero canvas/page content paint over the FON Media dropdown. Restore
   the nav's intended stacking (same specificity, later in cascade → wins). */
body.fon-scope > .navbar { z-index: 100; }
body.fon-scope > .topbar { z-index: 101; }

/* =========================================================
   Mobile app-style nav: bottom tab bar + slide-up sheet
   (mirrors the PWA pattern; FON navy/gold language)
   ========================================================= */
.fon-tabbar, .fon-sheet, .fon-sheet-backdrop { display: none; }

@media (max-width: 1080px) {
  /* the tab bar replaces the hamburger + drawer */
  .hamburger { display: none !important; }
  body.fon-scope { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  .fon-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: rgba(10, 21, 48, .96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,.08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .fon-tabbar a, .fon-tabbar button {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 0 8px; font-family: var(--font-sans); font-size: 10.5px;
    font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.55);
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .fon-tabbar svg { width: 22px; height: 22px; }
  .fon-tabbar a.active { color: var(--gold-300); }

  /* raised centre membership action */
  .fon-tabbar-cta { position: relative; color: var(--gold-300) !important; }
  .fon-tabbar-cta .cta-circle {
    position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color: var(--navy-900); box-shadow: 0 6px 18px rgba(201,169,97,.45);
    border: 4px solid rgba(10, 21, 48, 1);
  }
  .fon-tabbar-cta .cta-circle svg { width: 22px; height: 22px; }
  .fon-tabbar-cta .cta-label { margin-top: 26px; }

  /* backdrop */
  .fon-sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 130;
    background: rgba(10, 21, 48, .55); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease);
  }
  .fon-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
  .fon-sheet-backdrop[hidden] { display: none; }

  /* slide-up sheet */
  .fon-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
    transform: translateY(100%); transition: transform .3s var(--ease);
  }
  .fon-sheet.open { transform: translateY(0); }
  .fon-sheet[hidden] { display: none; }
  .fon-sheet-panel {
    background: var(--paper); border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 50px rgba(12,20,48,.25);
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .fon-sheet-handle { display: flex; justify-content: center; padding: 12px 0 4px; cursor: grab; touch-action: none; }
  .fon-sheet-handle span { width: 46px; height: 5px; border-radius: 999px; background: var(--line-2); }
  .fon-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 20px 10px; }
  .fon-sheet-title { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
  .fon-sheet-close {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--ivory); color: var(--ink);
  }
  .fon-sheet-close svg { width: 16px; height: 16px; }
  .fon-sheet-body { max-height: 70vh; overflow-y: auto; padding: 0 20px 10px; }

  .fon-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .fs-card { display: flex; flex-direction: column; gap: 2px; border-radius: 14px; padding: 13px 14px; }
  .fs-card .fs-kicker { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
  .fs-card strong { font-family: var(--font-sans); font-weight: 700; font-size: .95rem; }
  .fs-card-gold { background: linear-gradient(135deg, var(--gold-300), var(--gold-500)); color: var(--navy-900); box-shadow: 0 8px 20px rgba(201,169,97,.35); }
  .fs-card-navy { background: var(--navy-900); color: #fff; }
  .fs-card-navy .fs-kicker { color: var(--gold-300); opacity: 1; }

  .fon-sheet-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .fon-sheet-pages a {
    display: block; padding: 12px 14px; border-radius: 12px;
    background: var(--ivory); border: 1px solid var(--line);
    font-family: var(--font-sans); font-weight: 600; font-size: .9rem; color: var(--ink);
  }
  .fon-sheet-label {
    margin: 16px 0 8px; font-family: var(--font-sans); font-size: .64rem;
    font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-600);
  }
  .fon-sheet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .fon-sheet-chips a {
    padding: 8px 14px; border-radius: 999px; background: var(--paper);
    border: 1px solid var(--line-2); font-family: var(--font-sans);
    font-weight: 600; font-size: .8rem; color: var(--ink-2);
  }
  body.fon-sheet-locked { overflow: hidden; }
}

/* Newsletter form feedback (EmailOctopus signups) */
.fon-eo-form { position: relative; }
/* Newsletter forms now collect First + Last name alongside the email. Stack
   them: [First][Last] on a row, then the email and the button full-width. */
.footer-newsletter { flex-wrap: wrap; gap: 8px; }
.footer-newsletter .fn-name { flex: 1 1 calc(50% - 4px); border-radius: var(--radius); }
.footer-newsletter input[type="email"] { flex: 1 1 100%; border-radius: var(--radius); }
.footer-newsletter button { flex: 1 1 100%; border-radius: var(--radius); }
/* News-banner variant: names row, then email + button. */
.fon-eo-form.actions { flex-wrap: wrap; gap: 8px; align-items: stretch; }
.fon-eo-form.actions .fn-name { flex: 1 1 calc(50% - 4px); min-width: 140px; padding: .9rem 1rem; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font: inherit; }
.fon-eo-form.actions .fn-name::placeholder { color: rgba(255,255,255,.5); }
.fon-eo-form.actions input[type="email"] { flex: 1 1 60%; min-width: 200px; }
.fon-eo-msg { display: block; width: 100%; margin-top: .5rem; font-size: .8rem; color: var(--gold-300); }
.fon-eo-msg.err { color: #e08585; }
.site-footer .fon-eo-msg { color: var(--gold-300); }

/* Success state: the form is replaced with a confirmation card */
.fon-eo-success {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .95rem 1.1rem; border-radius: var(--radius-lg);
  background: rgba(201, 169, 97, .14); border: 1px solid rgba(201, 169, 97, .45);
  color: var(--gold-300); font-family: var(--font-sans); font-size: .9rem; line-height: 1.45;
  animation: fon-eo-pop .35s var(--ease);
}
.fon-eo-success svg { flex: none; margin-top: .1rem; }
.fon-eo-success strong { font-weight: 700; }
/* Light sections (if a form ever lives on paper/ivory) */
.bg-paper .fon-eo-success, .bg-ivory .fon-eo-success { color: var(--gold-600); border-color: var(--gold-500); background: rgba(201, 169, 97, .12); }
@keyframes fon-eo-pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Elementor Pro form success/error messages in the same visual language */
.elementor-message.elementor-message-success {
  display: block; padding: .95rem 1.1rem; margin-top: 1rem;
  border-radius: var(--radius-lg); border: 1px solid var(--gold-500);
  background: rgba(201, 169, 97, .12); color: var(--gold-600);
  font-family: var(--font-sans); font-weight: 600; font-size: .92rem;
  animation: fon-eo-pop .35s var(--ease);
}
.elementor-message.elementor-message-danger { font-family: var(--font-sans); font-size: .85rem; }

/* Design-system .split layouts built as Elementor containers: the e-con flex
   model overrides the .split grid, collapsing the image column. Restore the
   grid via Elementor's own --display variable (no !important needed) and let
   both children behave as grid cells. Fixes about (mission + leadership),
   homepage magazine split, and network track sections. */
/* (0,4,0) — must out-specify Elementor's per-element "--display:flex", which
   is emitted at (0,3,0) in the post CSS and loads after this file. */
body.fon-scope .elementor .e-con.split {
  --display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
body.fon-scope .elementor .e-con.split > .elementor-element { width: 100%; min-width: 0; }
@media (max-width: 960px) {
  body.fon-scope .elementor .e-con.split { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Same fix for the contact page's two-column grid: as a flex container its
   children refuse to shrink and the form overflows the viewport. */
body.fon-scope .elementor .e-con.contact-grid {
  --display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: start;
}
body.fon-scope .elementor .e-con.contact-grid > .elementor-element { width: 100%; min-width: 0; }
@media (max-width: 960px) {
  body.fon-scope .elementor .e-con.contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---------- Elementor Pro Form → FON design system ----------
   Pro emits .elementor-field-group / .elementor-field markup, which none of
   the ported .field styles reach, so forms rendered as raw browser controls.
   These rules mirror fon-styles.css .field / .btn-gold / .rsvp-checks. */
body.fon-scope .elementor-form .elementor-field-group > label {
  font-size: .82rem; letter-spacing: .04em; font-weight: 600;
  color: var(--ink); margin-bottom: .4rem;
}
body.fon-scope .elementor-form .elementor-field-textual {
  font: inherit; font-size: .95rem; width: 100%;
  padding: .85rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
body.fon-scope .elementor-form .elementor-field-textual:focus {
  outline: 0; border-color: var(--royal-600); box-shadow: 0 0 0 3px rgba(37,64,153,.15);
}
body.fon-scope .elementor-form textarea.elementor-field-textual { min-height: 140px; resize: vertical; }
body.fon-scope .elementor-form .elementor-field-type-select select { appearance: auto; }

/* Checkbox groups read as the RSVP form's bordered blocks. */
body.fon-scope .elementor-form .elementor-field-type-checkbox {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.1rem 1.3rem 1.2rem; margin-top: .2rem;
}
body.fon-scope .elementor-form .elementor-field-type-checkbox > label {
  display: block; font-family: var(--font-sans); font-size: .68rem;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: .5rem;
}
body.fon-scope .elementor-form .elementor-field-subgroup .elementor-field-option {
  display: flex; align-items: center; gap: .55rem; padding: .3rem 0;
  font-size: .9rem; color: var(--ink-2);
}
body.fon-scope .elementor-form .elementor-field-subgroup input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--royal-600); margin: 0;
}
body.fon-scope .elementor-form .elementor-field-subgroup label { cursor: pointer; }
@media (min-width: 761px) {
  body.fon-scope .elementor-form .elementor-field-subgroup {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem;
  }
}

/* Submit button = .btn .btn-gold (incl. the v-later uppercase treatment). */
body.fon-scope .elementor-form .elementor-button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--gold-500); color: var(--navy-900);
  border: 1px solid transparent; border-radius: 2px;
  font-family: var(--font-sans); font-weight: 600; font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 1rem 1.6rem; line-height: 1; width: auto;
  transition: all .25s var(--ease);
}
body.fon-scope .elementor-form .elementor-button[type="submit"]:hover {
  background: var(--gold-600); color: #fff;
  transform: translateY(-1px); box-shadow: var(--shadow-md);
}
body.fon-scope .elementor-form .e-form__buttons { justify-content: flex-start; }
body.fon-scope .elementor-message { font-size: .9rem; }

/* ============================================================
   FON BUTTON SYSTEM — unified, modern, with hover + focus.
   Fixes Elementor content buttons (were unstyled → grey #69727d)
   and aligns the theme .btn buttons to one consistent radius/feel.
   Scoped to body.fon-scope; higher specificity than Elementor's
   frontend.min.css .elementor-button, so it wins without !important
   (except the wrapper reset, which must beat inline-ish widget bg).
   ============================================================ */

/* Elementor button widgets: the CSS-Classes field lands on the WIDGET
   WRAPPER, not the inner <a>. Putting .btn/.btn-dark there produced a
   coloured BOX around a grey inner button. Strip the wrapper to a plain
   container so only the real button shows. */
body.fon-scope .elementor-widget-button,
body.fon-scope .elementor-widget-button.btn,
body.fon-scope .elementor-widget-button[class*="btn-"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Shared treatment for every FON button (theme + Elementor content). */
body.fon-scope .elementor-widget-button .elementor-button,
body.fon-scope .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-weight: 600; letter-spacing: .08em; line-height: 1;
  text-transform: uppercase; white-space: nowrap; text-align: center;
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
}

/* Elementor content buttons: sizing + default (primary) = gold. */
body.fon-scope .elementor-widget-button .elementor-button {
  padding: .85rem 1.75rem;
  font-size: .82rem;
  background: var(--gold-500); color: var(--navy-900);
  box-shadow: 0 1px 2px rgba(10, 21, 48, .14);
}
body.fon-scope .elementor-widget-button .elementor-button:hover,
body.fon-scope .elementor-widget-button .elementor-button:focus-visible {
  background: var(--gold-600); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10, 21, 48, .22);
}
body.fon-scope .elementor-widget-button .elementor-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(10, 21, 48, .20);
}

/* Dark variant — wrapper carries .btn-dark (e.g. "Read the News"). */
body.fon-scope .elementor-widget-button.btn-dark .elementor-button {
  background: var(--navy-900); color: #fff;
}
body.fon-scope .elementor-widget-button.btn-dark .elementor-button:hover,
body.fon-scope .elementor-widget-button.btn-dark .elementor-button:focus-visible {
  background: var(--royal-600); color: #fff;
}

/* Explicit gold variant. */
body.fon-scope .elementor-widget-button.btn-gold .elementor-button {
  background: var(--gold-500); color: var(--navy-900);
}
body.fon-scope .elementor-widget-button.btn-gold .elementor-button:hover {
  background: var(--gold-600); color: #fff;
}

/* Ghost / outline variant. */
body.fon-scope .elementor-widget-button.btn-ghost .elementor-button,
body.fon-scope .elementor-widget-button.btn-outline .elementor-button {
  background: transparent; color: var(--ink);
  border-color: var(--line-2); box-shadow: none;
}
body.fon-scope .elementor-widget-button.btn-ghost .elementor-button:hover,
body.fon-scope .elementor-widget-button.btn-outline .elementor-button:hover {
  background: transparent; color: var(--gold-600);
  border-color: var(--gold-600); transform: translateY(-2px);
}

/* Ghost-light — the outline secondary for DARK backgrounds (CTA banners,
   dark hero cards). Without this rule these buttons fell through to the gold
   default and read as a duplicate primary. Mirrors fon-styles .btn-ghost-light. */
body.fon-scope .elementor-widget-button.btn-ghost-light .elementor-button {
  background: transparent; color: #fff;
  border-color: rgba(255,255,255,.38); box-shadow: none;
}
body.fon-scope .elementor-widget-button.btn-ghost-light .elementor-button:hover,
body.fon-scope .elementor-widget-button.btn-ghost-light .elementor-button:focus-visible {
  background: transparent; color: var(--gold-300);
  border-color: var(--gold-300); transform: translateY(-2px);
}

/* Primary — royal blue (design-system .btn-primary), not the gold default. */
body.fon-scope .elementor-widget-button.btn-primary .elementor-button {
  background: var(--royal-600); color: #fff;
}
body.fon-scope .elementor-widget-button.btn-primary .elementor-button:hover,
body.fon-scope .elementor-widget-button.btn-primary .elementor-button:focus-visible {
  background: var(--royal-700); color: #fff;
}

/* Theme .btn: fix the stray 2px radius and give the same hover lift.
   Per-variant colours (.btn-primary/.btn-gold/.btn-dark…) are unchanged. */
body.fon-scope .btn { border-radius: 8px; }
body.fon-scope .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Keyboard focus ring for every button. */
body.fon-scope .elementor-widget-button .elementor-button:focus-visible,
body.fon-scope .btn:focus-visible {
  outline: 2px solid var(--gold-600); outline-offset: 2px;
}