/* ============================================================================
 * district.css — "Navy Hero" district template (v2)
 *
 * Styles the District Archive Elementor template. Layout lives in Elementor
 * (sections/columns the editor can rearrange); dynamic data comes from small
 * [seta67_district_*] shortcodes; THIS file supplies the Navy-Hero visual
 * treatment via semantic classes. All colour/font values resolve to the design
 * tokens (which alias the Elementor Kit), so Site-Settings edits flow through.
 *
 * Class map:
 *   section .seta67-dh-hero        navy hero band (+ .seta67-dh-mono number)
 *   section .seta67-dh-quick       3 overlapping cards (columns .seta67-dh-card)
 *   section .seta67-dh-serve       gold-tint "step up to serve" band
 *   section .seta67-dh-rostersec   trusted-servants directory
 *   section .seta67-dh-recordsec   documents + archive index
 * Widget CSS-class helpers: .seta67-dh-eyebrow .seta67-dh-cardlabel .seta67-dh-h2 .seta67-dh-intro
 * ========================================================================== */

/* ---- shared scale used inside this template ---- */
.seta67-dh-hero,.seta67-dh-quick,.seta67-dh-serve,.seta67-dh-rostersec,.seta67-dh-recordsec{
  --dh-gold:var(--seta-color-accent);
  --dh-gold-dk:var(--seta-color-accent-dark);
  --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 template so spacing
   is controlled here, not by the editor's global 20px. */
.seta67-dh-hero .elementor-widget:not(:last-child),
.seta67-dh-quick .elementor-widget:not(:last-child),
.seta67-dh-serve .elementor-widget:not(:last-child),
.seta67-dh-rostersec .elementor-widget:not(:last-child),
.seta67-dh-recordsec .elementor-widget:not(:last-child){margin-bottom:0}

/* ===================== HERO ===================== */
.seta67-dh-hero{position:relative;overflow:hidden;background:var(--dh-navy);}
.seta67-dh-hero > .elementor-container{padding-top:46px;padding-bottom:96px;position:relative;z-index:1}
.seta67-dh-mono{position:absolute;right:-1%;top:48%;transform:translateY(-50%);z-index:0;
  font-family:var(--seta-font-serif);font-weight:500;font-size:22rem;line-height:.7;letter-spacing:-.04em;
  color:#fff;opacity:.06;pointer-events:none;user-select:none}
.seta67-dh-eyebrow .elementor-heading-title{font-family:var(--seta-font-sans);font-weight:600;font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dh-gold-lt)}
.seta67-dh-title{font-family:var(--seta-font-serif);font-weight:400;color:#fff;line-height:1.05;letter-spacing:-.012em;
  font-size:clamp(2.6rem,5.2vw,4rem);margin:14px 0 0}
.seta67-dh-tag{font-family:var(--seta-font-serif);font-style:italic;color:#b9c6d8;font-size:1.18rem;
  margin:.6rem 0 0;max-width:42ch}
.seta67-dh-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* buttons (scoped; independent of components.css) */
.seta67-dh-btn{display:inline-flex;align-items:center;gap:.5em;border-radius:2px;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-dh-btn--gold{background:var(--dh-gold);color:#fff}
.seta67-dh-btn--gold:hover{background:var(--dh-gold-dk)}
.seta67-dh-btn--ghostnavy{border-color:rgba(255,255,255,.45);color:#fff}
.seta67-dh-btn--ghostnavy:hover{background:#fff;color:var(--dh-navy)}

/* ===================== QUICK (overlapping cards) ===================== */
.seta67-dh-quick{position:relative;z-index:2}
.seta67-dh-quick > .elementor-container{margin-top:-66px;padding-bottom:0}
/* gutters between the three columns */
.seta67-dh-quick .elementor-column{padding:0 12px}
.seta67-dh-quick .elementor-column:first-child{padding-left:0}
.seta67-dh-quick .elementor-column:last-child{padding-right:0}
/* the card body (Elementor's populated column wrap) */
.seta67-dh-card > .elementor-widget-wrap,
.seta67-dh-card > .elementor-element-populated{
  background:var(--seta-color-bg);border:1px solid var(--dh-line);border-top:3px solid var(--dh-gold);
  border-radius:4px;box-shadow:0 10px 34px rgba(20,30,50,.07);padding:22px 24px 18px;height:100%}
.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-dh-row{padding:8px 0;border-top:1px solid var(--dh-line)}
.seta67-dh-row:first-child{border-top:0}
.seta67-dh-row .r{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dh-muted)}
.seta67-dh-row .v{font-family:var(--seta-font-serif);font-size:1.1rem;color:var(--dh-navy);display:block;text-decoration:none}
.seta67-dh-row a.v:hover{color:var(--dh-gold-dk)}
.seta67-dh-row .sub{font-size:.79rem;color:var(--dh-muted)}
.seta67-dh-when{font-family:var(--seta-font-serif);font-size:1.55rem;color:var(--dh-navy);line-height:1.05}
.seta67-dh-when em{font-style:italic;color:var(--dh-gold-dk);font-size:1.12rem}
.seta67-dh-cardlink{display:inline-block;margin-top:14px;color:var(--dh-gold-dk);font-weight:600;
  text-decoration:none;font-size:.85rem;font-family:var(--seta-font-sans)}
.seta67-dh-cardlink:hover{text-decoration:underline}
/* meeting card: first line emphasized, rest muted detail */
.seta67-dh-meeting p{margin:.35rem 0;font-size:.9rem;color:var(--dh-muted)}
.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}

/* ===================== generic section heads (serve/roster/record) ===================== */
.seta67-dh-serve > .elementor-container,
.seta67-dh-rostersec > .elementor-container,
.seta67-dh-recordsec > .elementor-container{padding-top:70px;padding-bottom:70px}
.seta67-dh-h2 .elementor-heading-title{font-family:var(--seta-font-serif);font-weight:400;color:var(--dh-navy);
  font-size:clamp(1.6rem,3.1vw,2.1rem);letter-spacing:-.012em;border-bottom:1px solid var(--dh-line);
  padding-bottom:16px;margin-bottom:8px}
.seta67-dh-serve .seta67-dh-h2 .elementor-heading-title{border-color:var(--dh-line)}
.seta67-dh-intro .elementor-text-editor,.seta67-dh-intro{color:var(--dh-muted);max-width:52ch;margin:6px 0 22px}

/* ===================== SERVE (gold-tint + panel) ===================== */
.seta67-dh-serve{background:var(--seta-color-soft)}
.seta67-dh-panel{background:var(--seta-color-bg);border:1px solid var(--dh-line);border-left:4px solid var(--dh-gold);
  border-radius:4px;padding:6px 26px}
.seta67-dh-open{display:flex;align-items:center;gap:24px;padding:18px 0;border-top:1px solid var(--dh-line)}
.seta67-dh-open:first-child{border-top:0}
.seta67-dh-open .o-r{font-family:var(--seta-font-serif);font-size:1.3rem;color:var(--dh-navy);flex:1}
.seta67-dh-open .o-d{color:var(--dh-muted);font-size:.88rem;flex:1.3}
.seta67-dh-open .o-a{flex:none}
@media(max-width:720px){.seta67-dh-open{flex-wrap:wrap;gap:6px}.seta67-dh-open .o-d{flex:1 0 100%;order:3}.seta67-dh-open .o-a{order:2;margin-left:auto}}
@media(max-width:600px){.seta67-dh-open{flex-direction:column;align-items:flex-start;gap:8px}.seta67-dh-open .o-r,.seta67-dh-open .o-d{flex:0 0 auto}.seta67-dh-open .o-a{margin-left:0}}

/* ===================== ROSTER (directory) ===================== */
.seta67-dh-grp{margin-bottom:8px}
.seta67-dh-grp .gl{font-family:var(--seta-font-serif);font-style:italic;color:var(--dh-navy);font-size:1.2rem;margin:24px 0 14px}
.seta67-dh-dir{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.seta67-dh-person{padding:13px 0;border-top:1px solid var(--dh-line)}
.seta67-dh-person .r{font-family:var(--seta-font-sans);font-weight:600;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dh-gold-dk)}
.seta67-dh-person .n{font-family:var(--seta-font-serif);font-size:1.22rem;color:var(--dh-navy);margin:.08rem 0 .1rem}
.seta67-dh-person a{font-size:.79rem;color:var(--dh-muted);text-decoration:none}
.seta67-dh-person a:hover{color:var(--dh-gold-dk)}
@media(max-width:820px){.seta67-dh-dir{grid-template-columns:repeat(2,1fr);gap:0 28px}}
@media(max-width:540px){.seta67-dh-dir{grid-template-columns:1fr}}

/* ===================== RECORD (index) ===================== */
.seta67-dh-recordsec{background:var(--seta-color-soft)}
.seta67-dh-record h3,.seta67-dh-ixh .elementor-heading-title{font-family:var(--seta-font-serif);font-style:italic;
  color:var(--dh-navy);font-size:1.15rem;margin:0 0 4px}
.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-dh-ix a.row:hover .t{color:var(--dh-gold-dk)}
.seta67-dh-ix .t{font-family:var(--seta-font-sans);font-weight:600;color:var(--dh-navy);font-size:.96rem}
.seta67-dh-ix .s{font-size:.81rem;color:var(--dh-muted)}
.seta67-dh-ix .arr{margin-left:auto;color:var(--dh-gold-dk);font-weight:600}

/* ===================== responsive ===================== */
@media(max-width:860px){
  .seta67-dh-mono{font-size:15rem}
  .seta67-dh-hero > .elementor-container{padding-bottom:70px}
  .seta67-dh-quick > .elementor-container{margin-top:-46px}
  .seta67-dh-quick .elementor-column{padding:0 0 18px!important}
}