/* ============================================================
   Interior page shell — shared by every non-home page.
   Full-bleed container, active-nav treatment, dark PageHero with
   the wireframe globe motif, and the breadcrumb strip.
   Page-specific styles live in css/<page>.css and load after this.
   ============================================================ */

/* ---------- interior container: full bleed, no rail gutter ----------
   The container used to cap at a centred 1180px column. It no longer caps:
   interior and USMCA pages run edge to edge like the home page, and the only
   thing holding content off the viewport edge is the 40px band frame below.
   Line length is still governed, but per component (`ch`-based max-widths on
   .phero__lede, .sec-lede, .faq__list and friends) rather than by one column
   that also squeezed tables and card grids on a wide monitor. */
.page-wrap{width:100%}

/* Interior pages have no scroll rail, so the site's asymmetric --pad-l/--pad-r
   gutters don't apply. Every full-bleed band gets the same --frame gutter, or
   the left edge visibly jumps between sections. --frame (tokens/spacing.css)
   scales with the viewport: a flat 40px left the copy running edge to edge on
   a wide monitor. */
.nav,.phero,.join,.footer{padding-left:var(--frame);padding-right:var(--frame)}

/* ---------- nav: active section ---------- */
.nav__link--active{color:#FCFCFC;box-shadow:inset 0 -2px 0 var(--icpa-accent)}

/* ---------- page hero (PageHero, ink ground) ---------- */
.phero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--icpa-ink) 0%,var(--icpa-ink-2) 100%);
  border-bottom:1px solid var(--icpa-ink-hairline);
  /* The header floats over the page top -- clear it before the content
     starts. +52px on 2026-08-23 for the ink cap; see css/site.css. */
  padding:200px var(--frame) 56px;
  font-family:var(--font-sans);
}
.phero__content{position:relative;width:100%}
.phero__eyebrow{
  font-size:var(--size-eyebrow);font-weight:var(--weight-bold);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);margin-bottom:14px;color:var(--icpa-accent-bright);
}
.phero h1{
  margin:0;font-weight:800;font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;
  letter-spacing:-.02em;color:var(--off-white);max-width:16ch;
}
.phero h1 em{
  font-family:var(--font-serif-display);font-style:italic;font-weight:400;letter-spacing:-.01em;
  background-image:linear-gradient(135deg,#B8860B 0%,#E8B923 30%,#FBE38A 50%,#E8B923 70%,#B8860B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* background-clip:text paints only inside the inline box, so any part of
     a glyph that hangs outside it is simply not painted. Besley italic
     hangs in both directions: descenders below the baseline, and the left
     side of a round italic lowercase (g, o, c) to the left of its origin.
     Philanthropy showed it worst — when "gives back." wraps onto its own
     line the g met the start of the box and came out sliced flat, which
     reads as a box drawn through the letter. Padding grows the paint box;
     the matching negative horizontal margins give the space straight back,
     so nothing moves. Vertical margins are ignored on an inline element,
     which is why only the horizontal pair is cancelled. */
  padding:0 .06em .2em .12em;margin:0 -.06em 0 -.12em;
}
.phero__lede{margin:18px 0 0;max-width:58ch;font-size:1.125rem;line-height:1.55;font-weight:350;color:#B9C6D6}

/* factual dateline under the hero lede — ICPA's own numbers, set quietly.
   Not a stat template: no big figures, no labels, no accent chips.
   Shared: membership, RTC and Focused Trade Groups all carry one. */
.phero__facts{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 0;padding:0;
  list-style:none;font-size:.875rem;letter-spacing:.01em;color:#8FA3BC;
}
/* The separator dot is positioned, not a flex item: a flex `gap` on the <li>
   also lands between the <b> and the words after it, which pushed "5" and
   "active groups" 22px apart inside one fact. */
.phero__facts li{position:relative}
.phero__facts li+li::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--icpa-accent);
}
.phero__facts b{font-weight:var(--weight-semibold);color:#D8E2EE}

/* wireframe globe motif — cropped off the right edge, spins slowly */
.phero__motif{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.phero__motif svg{
  position:absolute;top:50%;right:-6%;width:620px;height:620px;
  transform:translateY(-50%);overflow:visible;
}
.motif-globe{animation:icpa-globe-spin 90s linear infinite;transform-origin:0 0}
.motif-orbit{animation:icpa-orbit-spin 38s linear infinite;transform-origin:0 0}
.motif-meridian{animation:icpa-meridian-sweep 44s ease-in-out infinite;transform-origin:0 0}
@keyframes icpa-globe-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes icpa-orbit-spin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes icpa-meridian-sweep{0%{transform:scaleX(1)}25%{transform:scaleX(.12)}50%{transform:scaleX(1)}75%{transform:scaleX(.12)}100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.phero__motif *{animation:none!important}}
@media (max-width:900px){.phero__motif{display:none}}

/* ---------- breadcrumb ---------- */
.crumbs{background:var(--icpa-zone-warm);border-bottom:1px solid var(--border-rule)}
.crumbs__inner{padding:14px var(--frame);font-size:.875rem;letter-spacing:.04em;color:var(--text-meta)}
.crumbs__inner a{color:var(--text-meta)}
.crumbs__inner a:hover{color:var(--icpa-dark-navy)}
.crumbs__sep{opacity:.5}
.crumbs__here{color:var(--icpa-dark-navy);font-weight:var(--weight-semibold)}

/* ---------- section tabs (sub-navigation under the breadcrumb) ---------- */
.subnav{background:var(--white);border-bottom:1px solid var(--border-rule)}
/* Never wrap: five tabs wrapping puts one orphan on a second row at tablet
   widths and builds a five-row stack on a phone. It fits on one line above
   ~900px and scrolls below that. */
/* 22px, not 28: the Membership rail runs to seven tabs once Testimonials and
   FAQ are in it, and at 28 the last tab is clipped at ~1500px wide — which is
   the tab marked current on those two pages. */
.subnav__inner{
  display:flex;gap:22px;padding:0 var(--frame);
  flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.subnav__inner::-webkit-scrollbar{display:none}
.subnav__inner a,.subnav__here{white-space:nowrap}
/* trailing breathing room so the last tab never touches the edge at scroll end */
.subnav__inner::after{content:"";flex:0 0 8px}
.subnav__inner a,.subnav__here{
  padding:16px 0;font-size:.9375rem;font-weight:var(--weight-semibold);color:var(--text-meta);
}
.subnav__inner a:hover{color:var(--icpa-dark-navy)}
.subnav__here{
  font-weight:var(--weight-bold);color:var(--icpa-dark-navy);
  box-shadow:inset 0 -2px 0 var(--icpa-navy);
}

/* ---------- shared section heading ----------
   Replaces the eyebrow+h2 stack: the heading carries the section on its own.
   Lives here rather than in membership.css because every interior page uses it. */
.sec-h2{
  margin:0;font-family:var(--font-serif-display);font-weight:var(--weight-semibold);
  font-size:clamp(1.75rem,3vw,2.375rem);line-height:1.1;letter-spacing:-.018em;
  color:var(--icpa-dark-navy);max-width:34ch;text-wrap:balance;
}
.sec-lede{
  margin:16px 0 0;max-width:62ch;font-size:1.125rem;line-height:1.6;
  font-weight:350;color:var(--ink-body);
}

/* ============================================================
   Shared hover + press feedback
   ------------------------------------------------------------
   Defined once here rather than page by page so a card behaves the
   same wherever it appears. It matches the treatment rtc.css and
   membership.css already use, so nothing on the site disagrees:

     border-color -> hairline, shadow-card, and a 1px lift.

   Only things you can actually click get a state. Cards that are
   plain reading matter — the testimonial quotes, the eligibility
   criteria cards, the CE fee table — are deliberately left out: a
   hover state on unclickable content promises a click that is not
   there.

   Page CSS loads after this file, so any page can still override.
   ============================================================ */
.evcard,.morecard,.pathcard,.askcard,.ttcard,.mem__item{
  transition:border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.evcard:hover,.evcard:focus-within,
.morecard:hover,.morecard:focus-within,
.pathcard:hover,.pathcard:focus-within,
.askcard:hover,.askcard:focus-within,
.ttcard:hover,.ttcard:focus-within{
  border-color:var(--border-hairline);
  box-shadow:var(--shadow-card);
  transform:translateY(-1px);
}
/* No lift on the tribute cards: an open tribute is a tall block of
   reading, and lifting it off the page while the eye is inside it is
   a distraction rather than an affordance. */
.mem__item:hover,.mem__item:focus-within{
  border-color:var(--border-hairline);
  box-shadow:var(--shadow-card);
}

/* Press. Chips and pills take a slight squeeze, the same one the
   Contact topic chips already use, so a tap reads as landing. */
.fchip,.rtc__chip,.ochip{
  transition:var(--transition-control),transform var(--duration-fast) var(--ease-standard);
}
.fchip:active,.rtc__chip:active,.ochip:active{
  transform:scale(.97);
}

@media (prefers-reduced-motion:reduce){
  .evcard,.morecard,.pathcard,.askcard,.ttcard,.mem__item,
  .fchip,.rtc__chip,.ochip{transition:none}
  .evcard:hover,.evcard:focus-within,
  .morecard:hover,.morecard:focus-within,
  .pathcard:hover,.pathcard:focus-within,
  .askcard:hover,.askcard:focus-within,
  .ttcard:hover,.ttcard:focus-within{transform:none}
  .fchip:active,.rtc__chip:active,.ochip:active{transform:none}
  .field__drop{transition:none}
}

/* ============================================================
   Shared form controls
   ------------------------------------------------------------
   Every interior form (Start a Submission, File Uploader, Contact
   Us) uses these, so the control shape is defined once. The file
   drop zone and the chosen-file list moved here from
   start-a-submission.css when File Uploader gained the same pair.
   Page CSS adds only the controls that page invents — the topic
   chips and the send button stay in contact.css.
   ============================================================ */
.field{margin-top:22px}
.field__label{
  display:block;font-size:.9375rem;font-weight:var(--weight-semibold);
  color:var(--icpa-dark-navy);
}
/* "Required" is spelled out rather than marked with an asterisk: an
   asterisk needs a legend elsewhere on the page to decode it. */
.field__req{
  margin-left:8px;font-size:.8125rem;font-weight:var(--weight-bold);
  text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);
  color:var(--icpa-accent-on-light);
}
.field__opt{
  margin-left:8px;font-size:.875rem;font-weight:400;color:var(--text-meta);
}
.field__hint{margin:6px 0 0;font-size:.875rem;line-height:1.6;color:var(--text-meta);max-width:62ch}

/* Same control shape as the RTC search input so every page agrees:
   48px minimum, hairline border, navy ring on focus. */
.field__input,.field__select,.field__textarea{
  display:block;width:100%;margin-top:8px;
  padding:12px 14px;min-height:48px;
  font-family:var(--font-sans);font-size:1rem;line-height:1.5;color:var(--ink-body);
  background:var(--white);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);
  transition:border-color 140ms ease-out, box-shadow 140ms ease-out;
  -webkit-appearance:none;appearance:none;
}
.field__input::placeholder,.field__textarea::placeholder{color:var(--ink-meta);opacity:1}
.field__textarea{min-height:260px;resize:vertical}
/* Native select arrow is suppressed by appearance:none above, so the caret is
   drawn back in as a background mark. Extra right padding keeps long option
   text off it. */
.field__select{
  padding-right:42px;cursor:pointer;
  background-image:url("../assets/vendor/icons/chevron-down.svg");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.field__input:focus,.field__select:focus,.field__textarea:focus{
  border-color:var(--icpa-navy);box-shadow:0 0 0 3px rgba(48,88,143,.16);
}
.field__input:focus:not(:focus-visible),
.field__select:focus:not(:focus-visible),
.field__textarea:focus:not(:focus-visible){outline:none}

/* invalid state — border plus a message, never color alone */
.field--bad .field__input,
.field--bad .field__select,
.field--bad .field__textarea{
  border-color:var(--status-immediate);
}
.field__err{
  display:none;margin:8px 0 0;font-size:.875rem;font-weight:var(--weight-semibold);
  color:#B4232B;
}
.field--bad .field__err{display:block}

/* ---------- file input ----------
   The native control is kept (it is the accessible one) and hidden behind a
   label styled as the drop zone, so keyboard focus still lands on the input.
   Shared by Start a Submission and File Uploader. */
.field__drop{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:8px;padding:26px 20px;text-align:center;cursor:pointer;
  background:var(--icpa-zone-warm);
  border:1px dashed var(--border-hairline);border-radius:var(--radius-md);
  transition:border-color 140ms ease-out, background-color 140ms ease-out;
}
.field__drop:hover{border-color:var(--icpa-navy);background:var(--zone-light)}
.field__file:focus-visible+.field__drop{
  border-color:var(--icpa-navy);box-shadow:0 0 0 3px rgba(48,88,143,.16);
}
.field__drop b{font-size:1rem;color:var(--icpa-dark-navy)}
.field__drop span{font-size:.875rem;color:var(--text-meta)}
.field--bad .field__drop{border-color:var(--status-immediate)}
/* The input is visually hidden rather than display:none, which would take it
   out of the focus order and strand the label. */
.field__file{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- chosen files ---------- */
.filelist{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.filelist:empty{margin:0}
.filelist li{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;font-size:.875rem;color:var(--ink-body);
  background:var(--white);border:1px solid var(--border-rule);border-radius:var(--radius-sm);
}
.filelist__name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filelist__size{flex:0 0 auto;color:var(--text-meta);font-variant-numeric:tabular-nums}

/* ---------- live character counter ---------- */
.field__count{
  margin:6px 0 0;font-size:.875rem;color:var(--text-meta);font-variant-numeric:tabular-nums;
}
.field__count--over{color:#B4232B;font-weight:var(--weight-semibold)}

/* ---------- spam check placeholder ----------
   Stands in for the widget the live form loads. Inert here; the real widget
   replaces this block when each form is wired to its endpoint. Shared by
   Start a Submission and Contact Us, both of which run reCAPTCHA v2 Checkbox.
   304px is the real widget's width, so the preview does not promise a
   different footprint from the one the live page gets. */
.captcha{
  display:flex;align-items:center;gap:12px;margin-top:8px;
  padding:14px 16px;width:304px;max-width:100%;
  background:var(--zone-light);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);font-size:.9375rem;color:var(--ink-body);
}
.captcha__box{
  width:22px;height:22px;flex:0 0 auto;
  background:var(--white);border:1px solid var(--border-hairline);border-radius:2px;
}
.captcha__mark{margin-left:auto;font-size:.8125rem;letter-spacing:.04em;color:var(--text-meta)}

/* ---------- form-level status note ----------
   Announced via aria-live, so it carries its own icon-free text. */
.status-note{
  padding:18px 20px;border-radius:var(--radius-md);font-size:.9375rem;line-height:1.65;
}
.status-note--bad{
  background:#FDF1F1;border:1px solid #F0C4C6;color:#7E1A20;
}
/* Success is the mirror of --bad: same padding, radius and construction,
   the #FDF1F1/#F0C4C6/#7E1A20 recipe rotated to green. Literals, not
   tokens — --status-none (#4CC763) is a signal dot, far too saturated to
   sit behind text. No shadow: a tinted panel that also floats reads as
   two components at once. Matches the WordPress confirmation boxes on
   Contact Us and Volunteer. */
.status-note--ok{
  background:#F1F8F3;border:1px solid #C3DFCD;color:#1E5B36;
}
.status-note--ok h3{color:#14532B}
.status-note--ok a{color:#14532B}
.status-note h3{
  margin:0 0 8px;font-size:1.125rem;font-weight:var(--weight-bold);color:var(--icpa-dark-navy);
}
.status-note--bad h3{color:#7E1A20}
.status-note p{margin:0}
.status-note p+p{margin-top:8px}
.status-note ul{margin:8px 0 0;padding-left:20px}
.status-note li+li{margin-top:4px}

@media (prefers-reduced-motion:reduce){
  .field__input,.field__select,.field__textarea{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .nav,.join,.footer{padding-left:20px;padding-right:20px}
  .phero{padding:176px 20px 44px}
  .crumbs__inner{padding:12px 20px}
  .subnav__inner{gap:22px;padding:0 20px}
  .subnav__inner::after{flex-basis:20px}
}