/* ============================================================================
 * navy-hero.css — the SHARED "Navy Hero" page language
 *
 * This is the look introduced by the District Archive template v2 and now used
 * by every rich page type (districts, committees, and — as they are converted —
 * events / officers / assemblies).
 *
 * ── Naming ──────────────────────────────────────────────────────────────────
 * `.seta67-nh-*` (navy hero) is CANONICAL. `.seta67-dh-*` (district hero) is
 * kept as a grouped alias on every rule so the committed District Archive
 * template and its markup DO NOT have to change. Both prefixes are styled
 * identically — never let them diverge. New templates use `nh`.
 *
 * ── Component grammar (three shapes, one job each) ──────────────────────────
 *   CARD    3px amber TOP border    a fact container that sits in a row;
 *                                   only cards overlap the hero
 *   PANEL   4px amber LEFT border   a full-width LIST container; never a card
 *   H2      1px hairline BOTTOM     full width, never inside a card
 * Mixing these (e.g. a left-border card) is what made the pre-redesign
 * committee page read as a different design system. Keep them distinct.
 *
 * ── Elementor wrappers ──────────────────────────────────────────────────────
 * Districts render from a Theme Builder template built with Elementor SECTIONS
 * (inner wrapper `.elementor-container`). Committee pages are built with
 * Elementor CONTAINERS (inner wrapper `.e-con-inner`, or the element itself
 * when full-width). Band padding/overlap rules therefore target BOTH.
 *
 * All colour/type values resolve to the design tokens (which alias the Elementor
 * Kit), so Site-Settings edits still flow through. Never hard-code a hex here.
 * ========================================================================== */

/* ---- shared scale used inside these templates ---- */
.seta67-nh-hero,.seta67-nh-quick,.seta67-nh-rostersec,.seta67-nh-recordsec,.seta67-nh-bodysec,
.seta67-dh-hero,.seta67-dh-quick,.seta67-dh-rostersec,.seta67-dh-recordsec,
.seta67-ah-hero,.seta67-ah-quick,.seta67-ah-listsec{
  --dh-gold:var(--seta-color-accent);
  --dh-gold-dk:var(--seta-color-accent-strong);
  --dh-gold-lt:var(--seta-color-accent-light);
  --dh-navy:var(--seta-color-primary);
  --dh-navy-deep:var(--seta-color-primary-dark);
  --dh-line:var(--seta-color-line);
  --dh-muted:var(--seta-color-muted);
}

/* Tame Elementor's default widget bottom-margin inside our templates so spacing
   is controlled here, not by the editor's global 20px. */
.seta67-nh-hero .elementor-widget:not(:last-child),
.seta67-nh-quick .elementor-widget:not(:last-child),
.seta67-nh-rostersec .elementor-widget:not(:last-child),
.seta67-nh-recordsec .elementor-widget:not(:last-child),
.seta67-dh-hero .elementor-widget:not(:last-child),
.seta67-dh-quick .elementor-widget:not(:last-child),
.seta67-dh-rostersec .elementor-widget:not(:last-child),
.seta67-dh-recordsec .elementor-widget:not(:last-child),
.seta67-ah-hero .elementor-widget:not(:last-child),
.seta67-ah-quick .elementor-widget:not(:last-child){margin-bottom:0}

/* ===================== HERO ===================== */
.seta67-nh-hero,.seta67-dh-hero,.seta67-ah-hero{position:relative;overflow:hidden;background:var(--dh-navy);}
/* Band PADDING: districts (sections) get it here; container-built pages set it in
   Elementor settings instead, so it stays editable in the UI. Never set both —
   settings apply padding to `.e-con` while this targets `.e-con-inner`, so the
   two would stack and double the band. */
.seta67-dh-hero > .elementor-container,
.seta67-ah-hero > .elementor-container{padding-top:46px;padding-bottom:96px}
/* Content must sit above the watermark in both builds. */
.seta67-nh-hero > .e-con-inner,
.seta67-dh-hero > .elementor-container,
.seta67-ah-hero > .elementor-container{position:relative;z-index:1}
/* Hero watermark monograms removed sitewide — the big faint CFC / district-number
   / NEWS glyphs added clutter and could collide with hero content. */
.seta67-nh-mono,.seta67-dh-mono,.seta67-ah-mono,.seta67-page-hero__mark{display:none}
/* Elementor gives every widget wrapper `position:relative`, and the monogram's
   wrapper collapses to zero height — so `top:48%` would resolve against a 0px box
   and pin the glyphs to the top of the band, where they get sheared off by
   `overflow:hidden`. Two-letter monograms ("IT") then read as vertical bars.
   Neutralising the wrapper makes the band's inner the containing block, so the
   monogram centres regardless of which letters it contains. */
.seta67-nh-hero .elementor-widget.seta67-nh-monowrap,
.seta67-ah-hero .elementor-widget.seta67-ah-monowrap{position:static}
/* Scoped under the hero section on purpose. Elementor emits
   `.elementor-widget-heading .elementor-heading-title{color:var(--e-global-color-primary)}`
   in its per-template CSS, which ties this rule on specificity (0,2,0) and
   loads after the theme — so the unscoped version lost, and the eyebrow
   rendered in Primary Navy ON the navy hero: a 1:1 contrast ratio, present in
   the accessibility tree and invisible on screen. The extra ancestor takes it
   to 0,3,0 so it wins outright. */
.seta67-nh-hero .seta67-nh-eyebrow .elementor-heading-title,
.seta67-dh-hero .seta67-dh-eyebrow .elementor-heading-title,
.seta67-ah-hero .seta67-ah-eyebrow{
  font-family:var(--seta-font-mono);font-weight:600;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dh-gold-lt)}
.seta67-nh-title,.seta67-dh-title,.seta67-ah-title{font-family:var(--seta-font-serif);font-weight:700;color:#fff;line-height:1.04;letter-spacing:-.02em;
  font-size:clamp(2.5rem,5vw,3.7rem);margin:14px 0 0}
.seta67-nh-tag,.seta67-dh-tag,.seta67-ah-tag{font-family:var(--seta-font-sans);font-style:normal;color:#b9c6d8;font-size:1.12rem;line-height:1.5;
  margin:.7rem 0 0;max-width:52ch}
.seta67-nh-actions,.seta67-dh-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* Breadcrumb on the navy hero (committees sit under /committees/; districts
   have no parent index in the hero, so this is unused there but harmless). */
.seta67-nh-crumb{font-family:var(--seta-font-sans);font-size:.85rem;color:#b9c6d8;
  display:flex;gap:8px;align-items:center;margin:0 0 14px}
.seta67-nh-crumb a{color:var(--dh-gold-lt);font-weight:600;text-decoration:none}
.seta67-nh-crumb a:hover{color:#fff}

/* buttons (scoped; independent of components.css) */
.seta67-nh-btn,.seta67-dh-btn{display:inline-flex;align-items:center;gap:.5em;border-radius:0;padding:.78em 1.45em;
  font-family:var(--seta-font-sans);font-weight:600;font-size:.9rem;text-decoration:none;border:1.5px solid transparent;
  cursor:pointer;transition:background .16s ease,color .16s ease}
.seta67-nh-btn--gold,.seta67-dh-btn--gold{background:var(--dh-gold);color:var(--seta-color-primary-dark)}
.seta67-nh-btn--gold:hover,.seta67-dh-btn--gold:hover{background:var(--dh-gold-lt)}

/* ===================== QUICK (overlapping cards) ===================== */
/* The overlap is the depth device: the row rises INTO the navy band. */
.seta67-nh-quick,.seta67-dh-quick,.seta67-ah-quick{position:relative;z-index:2}
/* NOTE on the `.e-con` prefix: Elementor's frontend.min.css ships
   `.e-con > .e-con-inner{margin:0 auto}` — a SHORTHAND at the same specificity
   (0,2,0) as a bare `.seta67-nh-quick > .e-con-inner`, loaded AFTER this file.
   It would silently reset margin-top to 0 and kill the overlap. `.e-con.` lifts
   this to (0,3,0) so it wins regardless of load order. Keep the prefix. */
.e-con.seta67-nh-quick > .e-con-inner,
.seta67-nh-quick > .elementor-container,
.seta67-dh-quick > .elementor-container{margin-top:-66px;padding-bottom:0}
/* gutters between the three columns */
.seta67-nh-quick .elementor-column,.seta67-dh-quick .elementor-column{padding:0 12px}
.seta67-nh-quick .elementor-column:first-child,.seta67-dh-quick .elementor-column:first-child{padding-left:0}
.seta67-nh-quick .elementor-column:last-child,.seta67-dh-quick .elementor-column:last-child{padding-right:0}
/* container-built variant: gap instead of column padding */
.seta67-nh-quick > .e-con-inner{display:flex;gap:24px;align-items:stretch;flex-wrap:nowrap}
.seta67-nh-quick > .e-con-inner > .e-con{flex:1 1 0;min-width:0}

/* CARD — the amber TOP border. Applies to the Elementor column/container wrap. */
.seta67-nh-card > .elementor-widget-wrap,
.seta67-nh-card > .elementor-element-populated,
.seta67-dh-card > .elementor-widget-wrap,
.seta67-dh-card > .elementor-element-populated,
.seta67-ah-card > .elementor-widget-wrap,
.seta67-ah-card > .elementor-element-populated{
  background:var(--seta-color-bg);border:1px solid var(--dh-line);border-top:3px solid var(--dh-gold);
  border-radius:0;box-shadow:0 10px 34px rgba(20,30,50,.07);padding:22px 24px 18px;height:100%}
/* container-built card: the container itself carries the chrome */
.e-con.seta67-nh-card{
  background:var(--seta-color-bg);border:1px solid var(--dh-line);border-top:3px solid var(--dh-gold);
  border-radius:0;box-shadow:0 10px 34px rgba(20,30,50,.07);padding:22px 24px 18px;
  display:flex;flex-direction:column;align-content:flex-start}
.seta67-nh-cardlabel .elementor-heading-title,.seta67-dh-cardlabel .elementor-heading-title{
  font-family:var(--seta-font-sans);font-weight:600;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dh-gold-dk);margin-bottom:6px}

/* dynamic rows emitted by the shortcodes */
.seta67-nh-row,.seta67-dh-row{padding:8px 0;border-top:1px solid var(--dh-line)}
.seta67-nh-row:first-child,.seta67-dh-row:first-child{border-top:0}
.seta67-nh-row .r,.seta67-dh-row .r{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dh-muted)}
.seta67-nh-row .v,.seta67-dh-row .v{font-family:var(--seta-font-serif);font-size:1.1rem;color:var(--dh-navy);display:block;text-decoration:none}
.seta67-nh-row a.v:hover,.seta67-dh-row a.v:hover{color:var(--dh-gold-dk)}
.seta67-nh-row .sub,.seta67-dh-row .sub{font-size:.79rem;color:var(--dh-muted)}
/* an unfilled seat reads amber, not navy — it is an invitation, not a name */
.seta67-nh-when,.seta67-dh-when{font-family:var(--seta-font-serif);font-size:1.55rem;color:var(--dh-navy);line-height:1.05}
.seta67-nh-when em,.seta67-dh-when em{font-style:normal;color:var(--dh-gold-dk);font-size:1.12rem}
/* inline-flex + a min-height so the closing card link is a real touch target;
   it measured 16px tall, under even the 24px WCAG 2.5.8 floor. */
.seta67-nh-cardlink,.seta67-dh-cardlink{display:inline-flex;align-items:center;min-height:28px;
  margin-top:14px;color:var(--dh-gold-dk);font-weight:600;
  text-decoration:none;font-size:.85rem;font-family:var(--seta-font-sans)}
@media (max-width:900px){.seta67-nh-cardlink,.seta67-dh-cardlink{min-height:44px}}
.seta67-nh-cardlink:hover,.seta67-dh-cardlink:hover{text-decoration:underline}
/* push the card's closing link to the bottom so all three align in the row */
.e-con.seta67-nh-card .seta67-nh-cardlink{margin-top:auto;padding-top:14px}
/* meeting card: first line emphasized, rest muted detail */
.seta67-nh-meeting p,.seta67-dh-meeting p{margin:.35rem 0;font-size:.9rem;color:var(--dh-muted)}
.seta67-nh-meeting p:first-child,.seta67-dh-meeting p:first-child{font-family:var(--seta-font-serif);font-size:1.3rem;line-height:1.15;color:var(--dh-navy);margin-top:0}
/* links inside a card body (hybrid meeting URLs, etc.) take the amber accent */
.seta67-nh-meeting a{color:var(--dh-gold-dk);text-decoration:none;word-break:break-word}
.seta67-nh-meeting a:hover{text-decoration:underline}
/* graceful fallback when a card has no data — better than an empty box in the row */
.seta67-nh-empty{font-size:.9rem;color:var(--dh-muted);line-height:1.5;margin:.35rem 0 0}

/* ===================== generic section heads ===================== */
/* Section-built bands only — container-built bands carry their 70px in Elementor
   settings (see the hero note above). */
.seta67-dh-recordsec > .elementor-container{padding-top:70px;padding-bottom:70px}
.seta67-nh-h2 .elementor-heading-title,.seta67-dh-h2 .elementor-heading-title{
  font-family:var(--seta-font-serif);font-weight:600;color:var(--dh-navy);
  font-size:clamp(1.6rem,3.1vw,2.1rem);letter-spacing:-.018em;border-bottom:1px solid var(--dh-line);
  padding-bottom:16px;margin-bottom:8px}

/* ===================== BODY + CONTACTS RAIL (committee) ===================== */
/* Districts have no freeform body; committees do, and a long prose column alone
   in a 1180px wrap leaves a dead half-page. The rail carries real content.
   The 60/40 split and its mobile stacking come from the Elementor container's own
   flex settings (see seta67_committee_elementor_data), so they stay editable in
   the UI — only the rail's internal styling lives here. */
.seta67-nh-rail .seta67-nh-contact{padding:10px 0;border-top:1px solid var(--dh-line)}
.seta67-nh-rail .seta67-nh-contact:first-of-type{border-top:0}
.seta67-nh-rail .seta67-nh-contact .r{font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dh-muted)}
.seta67-nh-rail .seta67-nh-contact a{font-family:var(--seta-font-sans);font-size:.9rem;color:var(--dh-navy);
  font-weight:500;word-break:break-word;text-decoration:none}
.seta67-nh-rail .seta67-nh-contact a:hover{color:var(--dh-gold-dk)}
.seta67-nh-rail__note{font-size:.78rem;color:var(--dh-muted);line-height:1.55;margin:14px 0 0;
  padding-top:14px;border-top:1px solid var(--dh-line)}

/* Freeform body prose. Scoped to this band rather than styling `.seta67-prose`
   globally, so interior pages that already use that helper are untouched.
   Without this, imported editor links render as default browser blue. */
.seta67-nh-bodysec .seta67-prose{line-height:1.7;color:var(--seta-color-text)}
.seta67-nh-bodysec .seta67-prose a{color:var(--dh-gold-dk);font-weight:500;text-decoration:none;
  border-bottom:1px solid rgba(194,119,58,.35)}
.seta67-nh-bodysec .seta67-prose a:hover{color:var(--dh-navy);border-bottom-color:var(--dh-navy)}
.seta67-nh-bodysec .seta67-prose h2{font-family:var(--seta-font-serif);font-weight:600;color:var(--dh-navy);
  font-size:1.5rem;letter-spacing:-.018em;margin:2rem 0 .6rem}
.seta67-nh-bodysec .seta67-prose h3{font-family:var(--seta-font-serif);font-weight:600;color:var(--dh-navy);
  font-size:1.25rem;letter-spacing:-.012em;margin:1.6rem 0 .5rem}
.seta67-nh-bodysec .seta67-prose p{margin:0 0 1rem}
.seta67-nh-bodysec .seta67-prose ul{margin:0 0 1rem;padding-left:1.15rem}
.seta67-nh-bodysec .seta67-prose li{margin-bottom:.4rem}

/* ===================== RECORD (index) ===================== */
.seta67-nh-recordsec,.seta67-dh-recordsec{background:var(--seta-color-soft)}
/* Functional column labels ("District documents", "Minutes & reports"): upright
   serif reads more clearly than Baskerville's slanted italic at this small size. */
.seta67-nh-record h3,.seta67-nh-ixh .elementor-heading-title,
.seta67-dh-record h3,.seta67-dh-ixh .elementor-heading-title{font-family:var(--seta-font-serif);font-style:normal;
  color:var(--dh-navy);font-size:1.15rem;letter-spacing:.005em;margin:0 0 4px}
.seta67-nh-ix a.row,.seta67-dh-ix a.row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--dh-line);text-decoration:none}
.seta67-nh-ix a.row:hover .t,.seta67-dh-ix a.row:hover .t{color:var(--dh-gold-dk)}
.seta67-nh-ix .t,.seta67-dh-ix .t{font-family:var(--seta-font-sans);font-weight:600;color:var(--dh-navy);font-size:.96rem}
.seta67-nh-ix .s,.seta67-dh-ix .s{font-size:.81rem;color:var(--dh-muted)}
.seta67-nh-ix .arr,.seta67-dh-ix .arr{margin-left:auto;color:var(--dh-gold-dk);font-weight:600}

/* ===================== responsive ===================== */
@media(max-width:900px){
  /* Three cards below ~900px squeeze to ~260px and the meeting text starts
     breaking mid-phrase, so wrap them to full width.
     The class is REPEATED deliberately: Elementor ships
     `.e-con.e-flex > .e-con-inner{flex-wrap:nowrap}` at (0,3,0) and loads after
     this file, so a single `.e-con.seta67-nh-quick > .e-con-inner` ties and
     loses. Doubling lifts this to (0,4,0) without depending on Elementor's
     internal `e-flex` class, which is not part of any public contract. */
  .e-con.seta67-nh-quick.seta67-nh-quick > .e-con-inner{flex-wrap:wrap}
  .e-con.seta67-nh-quick.seta67-nh-quick > .e-con-inner > .e-con{flex:1 1 100%}
}
@media(max-width:860px){
  .seta67-nh-mono,.seta67-dh-mono{font-size:15rem}
  .seta67-dh-hero > .elementor-container{padding-bottom:70px}
  .e-con.seta67-nh-quick > .e-con-inner,
  .seta67-nh-quick > .elementor-container,
  .seta67-dh-quick > .elementor-container{margin-top:-46px}
  .seta67-nh-quick .elementor-column,.seta67-dh-quick .elementor-column{padding:0 0 18px!important}
}

/* ===================== ARCHIVE HERO (record archives) =====================
   /events/, /minutes/, /newsletters/, /documents/ and /assemblies/ now use the
   district hero verbatim — the rules above carry `.seta67-ah-*` alongside
   `.seta67-dh-*`, so there is one band, one type scale and one card chrome for
   the whole site rather than two that drifted apart.

   What made the archives look different was structural, not cosmetic: the hero
   was a <section> emitted from INSIDE a boxed Elementor container, so the navy
   could never exceed the 1140px content column and read as an inset rectangle.
   It is now a top-level Elementor section (config/templates/import-templates.php),
   which spans the viewport while its inner container stays boxed — exactly how
   the district hero has always worked.

   Only the genuinely archive-specific bits live below. */

/* The hero pieces are <p>/<h1> straight into an Elementor column, so the UA's
   default paragraph margins have to go; spacing is set by the shared rules. */
.seta67-ah-eyebrow{margin:0}
/* The record count is the one piece the district hero has no equivalent for. */
.seta67-ah-count{font-family:var(--seta-font-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums;
  color:var(--dh-gold-lt);margin:22px 0 0}

/* The district watermark is a 2-digit numeral; these are 2-4 letter words, so
   they need a smaller size and must not wrap. */
.seta67-ah-mono{font-size:11rem;white-space:nowrap;right:-.5%}

/* Filter bar as ONE white card riding up into the band — the same depth device
   as the district quick-cards, replacing the flat grey strip that used to sit
   flush under the hero. */
.seta67-ah-quick > .elementor-container{margin-top:-40px;padding-bottom:0}
/* The form brings its own band chrome for standalone use; inside the card that
   would be a box in a box. */
.seta67-ah-card .seta67-filters{background:none;border:0;padding:0}
.seta67-ah-card .seta67-filters__inner{max-width:none;margin-inline:0;padding-inline:0}

/* Clear the overlapping card before the records start. */
.seta67-ah-listsec > .elementor-container{padding-top:8px}
/* The list shortcodes carry their own .seta67-section + .seta67-wrap so they
   still work dropped onto a plain page. Inside the archive template the
   Elementor container already supplies the gutter and the measure, so that
   nested pair only pushed the records 56px past the hero's left edge on desktop
   — and cost a third of the usable width on a phone (258px of 390). Zero the
   horizontal half; the vertical rhythm they set is kept. */
.seta67-ah-listsec .seta67-section{padding-inline:0}
.seta67-ah-listsec .seta67-wrap{max-width:none;padding-inline:0}

@media (max-width:900px){
  .seta67-ah-hero > .elementor-container{padding-bottom:70px}
  .seta67-ah-mono{font-size:6.5rem;opacity:.05}
  .seta67-ah-quick > .elementor-container{margin-top:-28px}
}

/* Container-built pages (committees) put content at the container's own edge —
   x=70 — while section-built pages (districts, archives) land at x=80 because
   Elementor's column adds 10px. Capping the inner at the same 1120px column
   puts every branded page on one left edge.

   The `.e-con.` prefix is required, not cosmetic: Elementor ships
   `.e-con-boxed > .e-con-inner{max-width:var(--content-width)}` at the same
   (0,2,0) specificity and loads after this file, so a bare
   `.seta67-nh-hero > .e-con-inner` silently loses — the same trap the quick-card
   overlap rule above documents. */
.e-con.seta67-nh-hero > .e-con-inner,
.e-con.seta67-nh-quick > .e-con-inner,
.e-con.seta67-nh-rostersec > .e-con-inner,
.e-con.seta67-nh-recordsec > .e-con-inner,
.e-con.seta67-nh-bodysec > .e-con-inner{max-width:1120px}