/*
Theme Name: FHS Payments
Theme URI: https://payments.favoredhealthcareservices.com
Description: Favored Healthcare Services secure payment portal. Child theme of Astra. Statement Navy direction: deep navy hero, amber as the single action colour, floated payment card, and WooCommerce styling tuned for invoice and service checkout. United States, USD only.
Author: Favored Healthcare Services
Version: 1.5.0
Template: astra
Text Domain: fhs-payments
*/

/* =============================================================================
   FHS PAYMENTS. Statement Navy
   Reads as a bank, not a brochure. Navy is the surface, amber is the only
   thing that means "act". Nothing else in the theme is allowed to be amber,
   which is what makes the pay button impossible to miss.
   ========================================================================== */

/* ---------- Self-hosted fonts -------------------------------------------
   Not Google Fonts. The main docroot sets a CSP that blocks fonts.gstatic.com,
   and these folders inherit it. Self-hosting removes the dependency instead of
   fighting the header. Variable woff2, one file per family.                */
@font-face {
  font-family: 'Sora';
  src: url('assets/fonts/sora-var-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* Brand, matched to the main site */
  --blue:   #1F4FA3;
  --navy:   #15356E;
  --navy-d: #0E2549;
  --wash:   #EAF1FB;
  --amber:  #F4A81D;
  --amber-d:#C9870E;
  --amber-w:#FEF5E2;

  /* Neutrals */
  --ink:   #12203A;
  --slate: #37414E;
  --mute:  #5A6B86;
  --line:  #D8E2F2;
  --line-2:#E9EEF7;
  --bg:    #F4F6FA;
  --card:  #FFFFFF;

  /* Semantic. Green and red appear ONLY for payment state, never decoration. */
  --ok:    #166B4F;
  --ok-w:  #E4F4EE;
  --warn:  #B45309;
  --warn-w:#FEF3E2;
  --err:   #C02B23;
  --err-w: #FDECEA;

  --s1: 0 1px 3px rgba(21,53,110,.07);
  --s2: 0 14px 38px rgba(21,53,110,.13);
  --s3: 0 22px 56px rgba(10,30,70,.20);

  --fh: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fb: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t: .25s cubic-bezier(.4,0,.2,1);
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
  --wrap: 1160px; --pad: 24px;
}

/* ---------- Base --------------------------------------------------------- */
/* Background belongs on body ONLY.
   .ast-container is not a page wrapper. Astra's Header Footer Builder uses it
   for the header row too, so painting it here dropped a light grey band across
   the middle of the navy header, leaving navy visible only at the far left and
   right edges. The white site title and the pale menu links were then sitting
   on light grey and had all but disappeared. */
body {
  font-family: var(--fb);
  color: var(--ink);
  background: var(--bg);
}
.ast-container {
  font-family: var(--fb);
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--fh);
  letter-spacing: -.02em;
  color: var(--navy);
}

/* Astra ships its own link colour. Ours wins, and only ours. */
a { color: var(--blue); }
a:hover, a:focus { color: var(--navy); }

/* Visible focus everywhere. Payment forms are exactly where a keyboard user
   must never lose their place, so this is deliberately loud. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

.fhs-wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* =============================================================================
   HEADER
   ========================================================================== */
/* Every wrapper Astra's Header Footer Builder nests, taken from the live
   markup. The bar is .ast-primary-header-bar inside .ast-main-header-wrap, and
   the row inside that is an .ast-container, which is why the background has to
   be stated at each level rather than assumed to inherit. */
.fhs-pay .site-header,
.fhs-pay .ast-main-header-wrap,
.fhs-pay .main-header-bar-wrap,
.fhs-pay .ast-primary-header-bar,
.fhs-pay .main-header-bar,
.fhs-pay .site-primary-header-wrap,
.fhs-pay #ast-desktop-header,
.fhs-pay .ast-mobile-header-wrap,
.fhs-pay .ast-primary-header-bar.ast-primary-header {
  background: var(--navy);
  border-bottom: 0;
}
.fhs-pay .main-header-bar,
.fhs-pay .site-header .site-title,
.fhs-pay .site-header .site-title a,
.fhs-pay .site-header .site-description {
  color: #FFFFFF;
}
/* The text title is the fallback for before the logo is set, so it still has to
   be legible on navy. */
.fhs-pay .site-title { margin: 0; }
.fhs-pay .site-title a:hover { color: var(--amber); }

/* Once the logo is in, the words go.
   "Favored Healthcare Services Payments" next to the logo wrapped onto two
   lines, which made the left section tall and wide enough to push the whole
   menu, Pay Now included, onto a second row. The logo already says the name;
   printing it again cost the header its layout. Astra's Header Footer Builder
   ignores core's display_header_text setting, so this is done here. */
.fhs-has-logo .ast-site-title-wrap,
.fhs-has-logo .site-title,
.fhs-has-logo .site-header .site-description { display: none; }

/* Keep the nav on one line and the call to action at the end of it.
   Astra lets the menu wrap by default, which is how Pay Now ended up stranded
   on a row of its own underneath everything else. */
.fhs-pay .main-header-menu {
  flex-wrap: nowrap;
  align-items: center;
}
.fhs-pay .main-header-menu > .menu-item.fhs-cta {
  margin-left: 8px;
  order: 99;
}
.fhs-pay .site-header-primary-section-right,
.fhs-pay .ast-grid-right-section {
  flex-wrap: nowrap;
  align-items: center;
}
.fhs-pay .site-primary-header-wrap .ast-builder-grid-row {
  align-items: center;
}

/* Tighten the menu before it is forced to wrap, rather than after. */
@media (max-width: 1180px) {
  .fhs-pay .main-header-menu > .menu-item > .menu-link { padding-inline: 10px; font-size: 13.5px; }
  .fhs-pay .main-header-menu > .menu-item.fhs-cta > .menu-link { padding-inline: 16px; }
}
/* Logo on a white plate.
   The wordmark is navy on transparency, so straight onto the navy header it
   would nearly vanish. The plate keeps the real brand colours instead of
   swapping in a recoloured logo. */
.fhs-pay .custom-logo-link,
.fhs-pay .site-logo-img .custom-logo-link {
  display: inline-block;
  background: #FFFFFF;
  border-radius: var(--r-md);
  padding: 7px 12px;
  line-height: 0;
}
.fhs-pay .custom-logo-link img,
.fhs-pay .custom-logo {
  display: block;
  height: auto;
  max-height: 54px;
  width: auto;
}
@media (max-width: 600px) {
  .fhs-pay .custom-logo-link { padding: 5px 9px; }
  .fhs-pay .custom-logo-link img,
  .fhs-pay .custom-logo { max-height: 40px; }
}

.fhs-pay .main-header-menu > .menu-item > .menu-link {
  color: #C5D6F0;
  font-weight: 600;
  font-size: 14px;
}
.fhs-pay .main-header-menu > .menu-item > .menu-link:hover,
.fhs-pay .main-header-menu > .current-menu-item > .menu-link {
  color: #FFFFFF;
}

/* The one amber thing in the header. */
.fhs-pay .main-header-menu > .menu-item.fhs-cta > .menu-link {
  background: var(--amber);
  color: #1B1300;
  border-radius: var(--r-sm);
  padding-inline: 20px;
  font-weight: 700;
}
.fhs-pay .main-header-menu > .menu-item.fhs-cta > .menu-link:hover {
  background: var(--amber-d);
  color: #1B1300;
}

/* =============================================================================
   BUTTONS
   Amber = pay or continue. Blue = secondary. Ghost = tertiary.
   ========================================================================== */
.fhs-btn {
  display: inline-block;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.fhs-btn:hover { transform: translateY(-1px); }
.fhs-btn:active { transform: translateY(0); }

.fhs-btn--pay      { background: var(--amber); color: #1B1300; }
.fhs-btn--pay:hover{ background: var(--amber-d); color: #1B1300; box-shadow: var(--s2); }

.fhs-btn--blue      { background: var(--blue); color: #FFFFFF; }
.fhs-btn--blue:hover{ background: var(--navy); color: #FFFFFF; }

/* Ghost takes its colour from the surface it sits on. It cannot rely on
   inheritance: the base `a { color: var(--blue) }` rule beats an inherited
   white, which put blue text on the navy hero and made the button nearly
   invisible. Each surface therefore states the colour outright. */
.fhs-btn--ghost      { background: transparent; border-color: currentColor; padding: 13px 24px; }
.fhs-btn--ghost:hover{ background: rgba(255,255,255,.12); }

.fhs-hero .fhs-btn--ghost,
.fhs-btn--ghost.on-dark { color: #FFFFFF; }
.fhs-hero .fhs-btn--ghost:hover,
.fhs-btn--ghost.on-dark:hover { color: #FFFFFF; background: rgba(255,255,255,.14); }

.fhs-btn--ghost.on-light { color: var(--blue); }
.fhs-btn--ghost.on-light:hover { background: var(--wash); color: var(--navy); }

.fhs-btn--block { display: block; width: 100%; text-align: center; }

/* =============================================================================
   HERO
   ========================================================================== */
.fhs-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 62%, #265CB8 100%);
  color: #FFFFFF;
  padding: 64px 0 72px;
}
/* Decorative ring. Purely ornamental, so it is aria-hidden in the markup and
   sits behind content via z-index rather than being removed on small screens. */
.fhs-hero::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -90px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 52px solid rgba(244,168,29,.16);
  pointer-events: none;
}
.fhs-hero > .fhs-wrap { position: relative; z-index: 1; }

.fhs-hero__cols {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: center;
}
.fhs-hero__kick {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}
.fhs-hero h1,
.fhs-hero .fhs-hero__title {
  color: #FFFFFF;
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1.08;
  margin: 0 0 18px;
}
.fhs-hero__lede {
  color: #C3D5F0;
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 52ch;
}
.fhs-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* =============================================================================
   FOCUS HERO
   Pay an Invoice only. One centred column instead of the split layout, so the
   page cannot be mistaken for the homepage at a glance: the homepage sells,
   this page has one job. The card is the only thing on screen, which is the
   right shape for "look up my invoice" the same way it is for a sign in.
   ========================================================================== */
.fhs-hero--focus { padding: 56px 0 64px; }
.fhs-hero--focus::after { display: none; }

.fhs-focus {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}
.fhs-focus .fhs-hero__title {
  font-size: clamp(26px, 3.8vw, 36px);
  margin-bottom: 14px;
}
.fhs-focus .fhs-hero__lede {
  margin-inline: auto;
  margin-bottom: 26px;
  max-width: 46ch;
}
/* The card itself stays left aligned. Centred form labels are harder to scan
   down, and this is a form someone is copying numbers into. */
.fhs-focus .fhs-paycard { text-align: left; }

.fhs-focus__alt {
  margin: 22px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #C3D5F0;
}
.fhs-focus__alt a {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fhs-focus__alt a:hover { color: var(--amber); }

/* =============================================================================
   PAYMENT CARD
   The floated white card. This is the object the whole page exists to serve,
   so it is the only element carrying the heaviest shadow.
   ========================================================================== */
.fhs-paycard {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--s3);
  color: var(--ink);
}
.fhs-paycard__title {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 18px;
}
.fhs-field {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #FBFCFE;
}
.fhs-field label,
.fhs-field > small {
  display: block;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
}
.fhs-field input,
.fhs-field select {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font: 600 15px/1.3 var(--fb);
  color: var(--ink);
}
.fhs-field input:focus,
.fhs-field select:focus { outline: none; }
/* Move the focus ring to the wrapper so the whole field lights up. */
.fhs-field:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31,79,163,.16);
}
.fhs-field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fhs-field--split > .fhs-field { margin-bottom: 0; }

/* Result of an invoice lookup. Announced with role="alert" in the markup, so a
   screen reader hears the outcome instead of a page that silently changed. */
.fhs-msg {
  border-radius: var(--r-md);
  padding: 13px 15px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
  border-left: 5px solid;
}
.fhs-msg a { font-weight: 700; color: inherit; }
.fhs-msg--error { background: var(--err-w); border-color: var(--err); color: #7A1912; }
.fhs-msg--ok    { background: var(--ok-w);  border-color: var(--ok);  color: #0E4F3A; }

.fhs-paycard__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mute);
  text-align: center;
}

.fhs-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 15px 0 17px;
  border-top: 1px dashed var(--line);
  margin-top: 8px;
}
.fhs-total__label { font-weight: 600; font-size: 13px; color: var(--mute); }
.fhs-total__value { font-family: var(--fh); font-size: 26px; font-weight: 700; color: var(--navy); }

/* =============================================================================
   TRUST STRIP
   ========================================================================== */
.fhs-strip {
  background: var(--amber);
  color: #1B1300;
}
.fhs-strip ul {
  list-style: none;
  margin: 0;
  padding: 15px var(--pad);
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 13px;
}
.fhs-strip li { display: flex; align-items: center; gap: 8px; }
.fhs-strip li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #1B1300;
  opacity: .55;
  flex: none;
}

/* =============================================================================
   PAGE HEADER
   For inner pages that need a title band but not the full hero. Same navy
   family, a third of the height, no payment card.
   ========================================================================== */
.fhs-pagehead {
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 100%);
  color: #FFFFFF;
  padding: 46px 0 48px;
}
.fhs-pagehead__kick {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 12px;
}
.fhs-pagehead h1 {
  color: #FFFFFF;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.12;
  margin: 0 0 14px;
}
.fhs-pagehead p {
  color: #C3D5F0;
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  max-width: 60ch;
}

/* =============================================================================
   TWO-COLUMN "YES / NO"
   Used on Billing Help to separate what can be paid online from what cannot.
   Colour is never the only cue: each list carries a glyph and a heading.
   ========================================================================== */
.fhs-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* The accent is a clipped bar, not a thick top border.
   A 5px border-top against 1px sides on an 18px radius mitres into a visible
   diagonal wedge at both corners. Worse, the shorthand `border-top: 5px solid`
   is more specific than the modifier setting border-top-color, so the green and
   amber never applied at all and both cards drew the same ink coloured bar,
   losing the only colour cue distinguishing them.
   An absolutely positioned bar under overflow:hidden follows the corner curve
   and takes its colour from the modifier without a specificity fight. */
.fhs-yesno > div {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  background: var(--card);
}
.fhs-yesno > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: currentColor;
}
.fhs-yesno h3 {
  font-family: var(--fh);
  font-size: 17px;
  margin: 0 0 4px;
}
.fhs-yesno p.sub { margin: 0 0 16px; font-size: 13.5px; color: var(--mute); line-height: 1.6; }
.fhs-yesno ul { list-style: none; margin: 0; padding: 0; }
.fhs-yesno li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 9px 0;
  font-size: 14.5px;
  line-height: 1.6;
  border-top: 1px solid var(--line-2);
}
.fhs-yesno li:first-child { border-top: 0; }
.fhs-yesno li::before { flex: none; font-weight: 700; font-size: 15px; line-height: 1.55; }

/* `color` rather than border-top-color: the accent bar reads it through
   currentColor, and the body text below sets its own colour anyway. */
.fhs-yesno__can { color: var(--ok); }
.fhs-yesno__can h3 { color: var(--ok); }
.fhs-yesno__can li { color: var(--ink); }
.fhs-yesno__can li::before { content: "\2713"; color: var(--ok); }

.fhs-yesno__cant { color: var(--warn); }
.fhs-yesno__cant h3 { color: var(--warn); }
.fhs-yesno__cant li { color: var(--ink); }
.fhs-yesno__cant li::before { content: "\2715"; color: var(--warn); }

/* =============================================================================
   FAQ
   Native <details>. No JavaScript, so it still opens if a script is blocked,
   which on this stack has happened more than once. White panel, black text,
   no blue fill on the open state.
   ========================================================================== */
.fhs-faq { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.fhs-faq details { border-top: 1px solid var(--line); }
.fhs-faq details:first-child { border-top: 0; }

.fhs-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 19px 56px 19px 24px;
  position: relative;
  font-family: var(--fh);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
}
.fhs-faq summary::-webkit-details-marker { display: none; }
.fhs-faq summary:hover { background: #FAFBFD; }
.fhs-faq summary:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }

/* The chevron is drawn, not typed, so it rotates rather than swapping glyphs. */
.fhs-faq summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg);
  transition: transform var(--t);
}
.fhs-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.fhs-faq details[open] summary { color: var(--navy); }

.fhs-faq .fhs-faq__a { padding: 0 24px 22px; }
.fhs-faq .fhs-faq__a p { margin: 0 0 11px; font-size: 15px; line-height: 1.72; color: var(--slate); }
.fhs-faq .fhs-faq__a p:last-child { margin-bottom: 0; }
.fhs-faq .fhs-faq__a a { font-weight: 600; }

/* =============================================================================
   CONTACT CARD
   ========================================================================== */
.fhs-contact {
  background: var(--navy);
  color: #FFFFFF;
  border-radius: var(--r-lg);
  padding: 32px 34px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 30px;
}
.fhs-contact h2 { color: #FFFFFF; font-size: 24px; margin: 0 0 12px; }
.fhs-contact p { color: #C3D5F0; line-height: 1.7; margin: 0 0 10px; font-size: 15px; }
.fhs-contact dl { margin: 0; display: grid; gap: 16px; }
.fhs-contact dt {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 3px;
}
.fhs-contact dd { margin: 0; font-family: var(--fh); font-size: 19px; font-weight: 700; }
.fhs-contact dd a { color: #FFFFFF; text-decoration: none; display: inline-block; min-height: 44px; line-height: 44px; }
.fhs-contact dd a:hover { color: var(--amber); text-decoration: underline; }
.fhs-contact dd small { display: block; font: 500 13px/1.6 var(--fb); color: #A9BEDD; }

@media (max-width: 880px) {
  .fhs-yesno, .fhs-contact { grid-template-columns: 1fr; }
}

/* =============================================================================
   NOTICE
   For the insurance, Medicaid and Medicare message. Deliberately NOT amber:
   amber means "pay" everywhere else on this site, and a warning that looks
   like the pay button is a warning nobody reads as a warning.
   ========================================================================== */
.fhs-notice {
  background: var(--warn-w);
  border: 1px solid #F0CE9A;
  border-left: 6px solid var(--warn);
  border-radius: var(--r-md);
  padding: 22px 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.fhs-notice__mark {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--warn);
  color: #FFFFFF;
  font: 700 19px/34px var(--fh);
  text-align: center;
}
.fhs-notice__body { min-width: 0; }
.fhs-notice h2,
.fhs-notice h3,
.fhs-notice__title {
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 700;
  color: #7A3A06;
  margin: 0 0 8px;
}
.fhs-notice p {
  margin: 0 0 10px;
  color: #6B3A0D;
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 74ch;
}
.fhs-notice p:last-child { margin-bottom: 0; }
.fhs-notice strong { color: #572E08; }
.fhs-notice a { color: #7A3A06; font-weight: 700; }
.fhs-notice a:hover { color: #3F2005; }

/* Phone numbers are the whole point of this block, so they are the biggest
   thing in it and are tap targets on a phone. */
.fhs-notice__calls { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 4px; }
.fhs-notice__calls a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
}
.fhs-notice__calls a:hover { text-decoration: underline; }
.fhs-notice__calls small {
  display: block;
  font: 600 11px/1.3 var(--fb);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A5518;
}

.fhs-section--notice { padding: 34px 0; background: var(--bg); }

@media (max-width: 600px) {
  .fhs-notice { flex-direction: column; gap: 12px; padding: 20px; }
}

/* =============================================================================
   SECTIONS AND CARDS
   ========================================================================== */
.fhs-section { padding: 56px 0; background: var(--card); }
.fhs-section--wash { background: var(--wash); }
.fhs-section--bg   { background: var(--bg); }

.fhs-section__name {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 12px;
}
.fhs-section__title {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.18;
  margin: 0 0 14px;
}
.fhs-section__lede {
  color: var(--mute);
  line-height: 1.7;
  max-width: 68ch;
  margin: 0 0 32px;
}

.fhs-grid { display: grid; gap: 18px; }
.fhs-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fhs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fhs-grid--4 { grid-template-columns: repeat(4, 1fr); }

.fhs-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  background: var(--card);
  box-shadow: var(--s1);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.fhs-card:hover {
  box-shadow: var(--s2);
  transform: translateY(-3px);
  border-color: #C3D3EC;
}
.fhs-card__ico {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--amber);
  font: 700 16px/1 var(--fh);
  margin-bottom: 15px;
}
.fhs-card h3,
.fhs-card__title {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--navy);
}
.fhs-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--mute); }

/* Numbered steps. The number is decorative repetition of the ordered list,
   so it is aria-hidden in markup and the list stays a real <ol>. */
.fhs-steps { counter-reset: fhsstep; list-style: none; margin: 0; padding: 0; }
.fhs-steps > li { counter-increment: fhsstep; position: relative; padding-left: 58px; margin-bottom: 26px; }
.fhs-steps > li::before {
  content: counter(fhsstep);
  position: absolute;
  left: 0; top: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--amber);
  color: #1B1300;
  font: 700 17px/40px var(--fh);
  text-align: center;
}

/* =============================================================================
   AMOUNT AND STATUS
   ========================================================================== */
.fhs-amount { font-family: var(--fh); font-weight: 700; font-variant-numeric: tabular-nums; }

.fhs-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
/* Never colour alone. Each state also carries a glyph, because roughly one in
   twelve men cannot separate the green from the red. */
.fhs-status::before { font-size: 13px; line-height: 1; }
.fhs-status--paid    { background: var(--ok-w);   color: var(--ok); }
.fhs-status--paid::before    { content: "\2713"; }
.fhs-status--due     { background: var(--warn-w); color: var(--warn); }
.fhs-status--due::before     { content: "\25CB"; }
.fhs-status--overdue { background: var(--err-w);  color: var(--err); }
.fhs-status--overdue::before { content: "\0021"; }

/* =============================================================================
   WOOCOMMERCE
   Astra styles Woo reasonably. These override only where the default fights
   the Statement Navy palette, rather than restyling Woo wholesale.
   ========================================================================== */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--blue);
  color: #FFFFFF;
  font-family: var(--fb);
  font-weight: 700;
  border-radius: var(--r-sm);
  padding: 14px 24px;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--navy);
  color: #FFFFFF;
}

/* The two buttons that take money are amber, matching the hero rule. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .checkout-button {
  background: var(--amber);
  color: #1B1300;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover {
  background: var(--amber-d);
  color: #1B1300;
}

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  border-top-color: var(--blue);
  background: var(--wash);
  color: var(--ink);
}
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before { color: var(--blue); }
.woocommerce .woocommerce-error {
  border-top-color: var(--err);
  background: var(--err-w);
  color: #7A1912;
}
.woocommerce .woocommerce-error::before { color: var(--err); }

.woocommerce table.shop_table {
  border-radius: var(--r-lg);
  border-color: var(--line);
  overflow: hidden;
}
.woocommerce table.shop_table th { background: #F6F8FC; color: var(--navy); font-family: var(--fh); }
.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-family: var(--fh); color: var(--navy); }

.woocommerce .price,
.woocommerce .amount {
  font-family: var(--fh);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

/* Checkout fields, matched to .fhs-field so the flow feels like one form. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 14px;
  background: #FBFCFE;
  font: 500 15px/1.3 var(--fb);
  color: var(--ink);
  height: auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31,79,163,.16);
  outline: none;
}
.woocommerce form .form-row label { font-weight: 600; font-size: 13px; color: var(--slate); }

/* Woo's required marker is a bare red asterisk with no text. Give it a label
   for screen readers via the theme, and keep the visual asterisk. */
.woocommerce .required { color: var(--err); text-decoration: none; }

/* =============================================================================
   ASTRA FOOTER BAR
   Removed. It carried "Copyright 2026 ... | Powered by Astra WordPress Theme",
   which is a third-party credit on a page that takes people's money, and it
   left a white strip directly above the compliance bar.

   Selector taken from the live markup, not guessed: the below-footer builder
   row is .site-below-footer-wrap and the credit sits in .ast-footer-copyright
   inside it. Hiding the wrapper removes the strip as well as the text.

   Done in CSS rather than by unhooking Astra's builder, because the builder
   callback name changes between Astra versions and a wrong guess silently does
   nothing. The setup plugin also blanks the copyright text, so the two layers
   cover each other.
   ========================================================================== */
.fhs-pay .site-below-footer-wrap,
.fhs-pay .ast-footer-copyright {
  display: none;
}

/* =============================================================================
   LAYOUT SAFETY NET
   Astra's page-builder content layout is requested in functions.php, which is
   what actually drops the container and the duplicated page title. These rules
   only matter if that filter ever stops firing: without them the full-bleed
   navy hero would sit inside .ast-container with margins down each side, and
   the page name would print above a hero that already says it.
   ========================================================================== */
.fhs-full .site-content > .ast-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.fhs-full #primary,
.fhs-full .ast-article-single,
.fhs-full .entry-content {
  margin: 0;
  padding: 0;
}
.fhs-full .entry-header,
.fhs-full .ast-single-post-order,
.fhs-full .entry-content > .entry-title { display: none; }

/* =============================================================================
   COMPLIANCE FOOTER
   Required on every public page. Printed by functions.php, never by a page
   editor, so it cannot be deleted by accident.
   ========================================================================== */
.fhs-compliance {
  background: var(--navy-d);
  color: #A9BEDD;
  font-size: 13px;
  line-height: 1.7;
  padding: 22px 0;
  text-align: center;
}
.fhs-compliance p { margin: 0 auto; max-width: 76ch; }
.fhs-compliance strong { color: #FFFFFF; font-weight: 700; }
/* The clarifier sits under the "we accept" line, which on a payments site
   would otherwise read as "you can pay that way here". */
.fhs-compliance__note {
  display: inline-block;
  margin-top: 8px;
  color: #FFD79A;
  font-weight: 600;
}
.fhs-compliance__note a { color: #FFFFFF; text-decoration: underline; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .fhs-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .fhs-hero { padding: 48px 0 54px; }
  .fhs-hero__cols { grid-template-columns: 1fr; gap: 34px; }
  .fhs-hero::after { right: -160px; top: -140px; }
  .fhs-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .fhs-section { padding: 44px 0; }
}
@media (max-width: 600px) {
  .fhs-grid--2,
  .fhs-grid--3,
  .fhs-grid--4 { grid-template-columns: 1fr; }
  .fhs-field--split { grid-template-columns: 1fr; }
  .fhs-hero__actions .fhs-btn { width: 100%; text-align: center; }
  .fhs-strip ul { gap: 14px 20px; font-size: 12px; }
}

/* Touch targets. WCAG 2.5.5 asks for 44px; menu links in Astra come in under
   that on phones. */
@media (max-width: 880px) {
  .fhs-pay .main-header-menu .menu-link { min-height: 44px; display: flex; align-items: center; }
}

/* =============================================================================
   REDUCED MOTION
   The site-wide accessibility panel also sets data-a11y-reducemotion, so both
   signals are honoured.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fhs-btn:hover, .fhs-card:hover { transform: none; }
}
html[data-a11y-reducemotion="on"] .fhs-btn:hover,
html[data-a11y-reducemotion="on"] .fhs-card:hover { transform: none; }

/* =============================================================================
   PRINT
   People print receipts. Strip the navy, keep the numbers.
   ========================================================================== */
@media print {
  .fhs-hero, .fhs-strip, .site-header, .site-footer, .fhs-btn { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .fhs-paycard { box-shadow: none; border: 1px solid #999999; }
}