/*
Theme Name: FHS Nigeria Payments
Theme URI: https://nigeriapayments.favoredhealthcareservices.com
Description: Favored Healthcare Services payments for Nigeria and Africa. Child theme of Astra. Warm Care direction: soft blue wash gradient, rounded pill buttons, amber circles and a clinic teal identity band. Naira and African currencies, settling to the Lagos account. Governed by the NDPA 2023, not HIPAA.
Author: Favored Healthcare Services
Version: 1.0.0
Template: astra
Text Domain: fhs-nigeria
*/

/* =============================================================================
   FHS NIGERIA. Warm Care
   The sister of the United States payments theme, not a recolour of it. Same
   brand tokens, opposite temperature: that site is a bank, this one is the
   clinic. Light wash instead of deep navy, pills instead of rectangles, teal
   carrying the Lagos identity.

   Every fix learned on the United States build is applied here from the start.
   Each one is marked LESSON so the reason survives.
   ========================================================================== */

@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 {
  --blue:   #1F4FA3;
  --navy:   #15356E;
  --navy-d: #0E2549;
  --wash:   #EAF1FB;
  --wash-2: #DBE8FA;
  --wash-3: #CFE0F7;
  --amber:  #F4A81D;
  --amber-d:#C9870E;
  --amber-w:#FEF5E2;

  /* Teal is the Lagos identity on this site, used where the United States
     theme uses navy for its bands. */
  --teal:   #0F8A7E;
  --teal-d: #0A6157;
  --teal-w: #E2F5F2;

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

  /* Contrast checked against their own tints. */
  --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,.16);

  --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: 10px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --wrap: 1160px; --pad: 24px;
}

/* ---------- Base --------------------------------------------------------- */
/* LESSON: background on body ONLY.
   Astra's Header Footer Builder uses .ast-container for the header row too.
   Painting it here put a stray band across the middle of the header on the
   United States site and cost an afternoon to find. */
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);
}

a { color: var(--blue); }
a:hover, a:focus { color: var(--teal-d); }

/* Loud focus ring. This is a payment site; a keyboard user must never lose
   their place mid form. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* =============================================================================
   HEADER
   White, unlike the United States site. The hero below it is light, so a navy
   bar would float disconnected above it.
   ========================================================================== */
/* LESSON: name every wrapper Astra's Header Footer Builder nests. Assuming the
   background inherits is what broke the other site. */
.fhs-ng .site-header,
.fhs-ng .ast-main-header-wrap,
.fhs-ng .main-header-bar-wrap,
.fhs-ng .ast-primary-header-bar,
.fhs-ng .main-header-bar,
.fhs-ng .site-primary-header-wrap,
.fhs-ng #ast-desktop-header,
.fhs-ng .ast-mobile-header-wrap,
.fhs-ng .ast-primary-header-bar.ast-primary-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
}
.fhs-ng .site-header .site-title,
.fhs-ng .site-header .site-title a { color: var(--navy); }
.fhs-ng .site-title { margin: 0; }

/* LESSON: once a logo exists the words go, or the left section grows tall
   enough to push the whole menu onto a second row. Astra's builder ignores
   core's display_header_text, so the theme hides it. A body class rather than
   :has(), because the browser policy here is Baseline widely available with no
   polyfills and a silent revert would break the header invisibly. */
.fhs-has-logo .ast-site-title-wrap,
.fhs-has-logo .site-title,
.fhs-has-logo .site-header .site-description { display: none; }

/* No white plate needed: the header is white and the logo is drawn for it. */
.fhs-ng .custom-logo-link { display: inline-block; line-height: 0; }
.fhs-ng .custom-logo-link img,
.fhs-ng .custom-logo {
  display: block;
  height: auto;
  max-height: 56px;
  width: auto;
}
@media (max-width: 600px) {
  .fhs-ng .custom-logo-link img,
  .fhs-ng .custom-logo { max-height: 42px; }
}

.fhs-ng .main-header-menu > .menu-item > .menu-link {
  color: var(--slate);
  font-weight: 600;
  font-size: 14px;
}
.fhs-ng .main-header-menu > .menu-item > .menu-link:hover,
.fhs-ng .main-header-menu > .current-menu-item > .menu-link { color: var(--teal-d); }

/* LESSON: keep the nav on one line and the call to action at the end of it.
   Astra wraps by default, which stranded Pay Now on its own row. */
.fhs-ng .main-header-menu { flex-wrap: nowrap; align-items: center; }
.fhs-ng .site-header-primary-section-right,
.fhs-ng .ast-grid-right-section { flex-wrap: nowrap; align-items: center; }
.fhs-ng .site-primary-header-wrap .ast-builder-grid-row { align-items: center; }

.fhs-ng .main-header-menu > .menu-item.fhs-cta { margin-left: 8px; order: 99; }
.fhs-ng .main-header-menu > .menu-item.fhs-cta > .menu-link {
  background: var(--amber);
  color: #1B1300;
  border-radius: var(--r-pill);
  padding-inline: 22px;
  font-weight: 700;
}
.fhs-ng .main-header-menu > .menu-item.fhs-cta > .menu-link:hover {
  background: var(--amber-d);
  color: #1B1300;
}

@media (max-width: 1180px) {
  .fhs-ng .main-header-menu > .menu-item > .menu-link { padding-inline: 10px; font-size: 13.5px; }
  .fhs-ng .main-header-menu > .menu-item.fhs-cta > .menu-link { padding-inline: 18px; }
}

/* =============================================================================
   BUTTONS
   Pills. Amber means pay, teal is secondary, ghost is tertiary.
   ========================================================================== */
.fhs-btn {
  display: inline-block;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 16px 30px;
  border-radius: var(--r-pill);
  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--teal      { background: var(--teal); color: #FFFFFF; }
.fhs-btn--teal:hover{ background: var(--teal-d); color: #FFFFFF; }

/* LESSON: ghost cannot inherit its colour. The base `a { color: var(--blue) }`
   beats an inherited value, which once put blue text on a dark hero and made
   the button all but invisible. Every surface states the colour outright. */
.fhs-btn--ghost { background: transparent; border-color: currentColor; padding: 14px 28px; }
.fhs-hero .fhs-btn--ghost,
.fhs-btn--ghost.on-light { color: var(--navy); }
.fhs-hero .fhs-btn--ghost:hover,
.fhs-btn--ghost.on-light:hover { background: rgba(21,53,110,.07); color: var(--navy); }
.fhs-btn--ghost.on-dark { color: #FFFFFF; }
.fhs-btn--ghost.on-dark:hover { color: #FFFFFF; background: rgba(255,255,255,.14); }

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

/* =============================================================================
   HERO
   ========================================================================== */
.fhs-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 130% at 12% 0%, var(--wash) 0%, var(--wash-2) 46%, var(--wash-3) 100%);
  color: var(--ink);
  padding: 62px 0 70px;
}
/* Ornamental only, so it is aria-hidden in markup and cannot be tabbed to. */
.fhs-hero::before {
  content: "";
  position: absolute;
  left: -70px;
  bottom: -140px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(244,168,29,.20);
  pointer-events: none;
}
.fhs-hero > .fhs-wrap { position: relative; z-index: 1; }

.fhs-hero__cols {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  align-items: center;
}
.fhs-hero__kick {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-d);
  margin-bottom: 14px;
}
.fhs-hero h1,
.fhs-hero__title {
  color: var(--navy);
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.1;
  margin: 0 0 18px;
}
.fhs-hero__lede {
  color: #41567A;
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 52ch;
}
.fhs-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* LESSON: Pay an Invoice gets its own centred layout so it cannot be mistaken
   for the front page. The two shared a hero on the other site and moving
   between them read as though nothing had happened. */
.fhs-hero--focus { padding: 54px 0 62px; }
.fhs-hero--focus::before { 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 stays left aligned. Centred labels are harder to scan down, and
   this is a form someone copies 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: #41567A; }
.fhs-focus__alt a { color: var(--teal-d); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fhs-focus__alt a:hover { color: var(--navy); }

/* =============================================================================
   PAYMENT CARD
   ========================================================================== */
.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; }
.fhs-field:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15,138,126,.16);
}
.fhs-field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fhs-field--split > .fhs-field { margin-bottom: 0; }

.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); }

.fhs-amount { font-family: var(--fh); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Result of a lookup. role="alert" in markup so a screen reader hears the
   outcome rather than meeting 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; }

/* =============================================================================
   CURRENCY STRIP
   The thing this site exists for, so it sits directly under the hero.
   ========================================================================== */
/* --teal-d, not --teal: white on the brand teal measures 4.24:1, under the
   4.5 minimum. The brand colour is unchanged, it simply is not used as a
   background behind white text. */
.fhs-strip { background: var(--teal-d); color: #FFFFFF; }
.fhs-strip ul {
  list-style: none;
  margin: 0;
  padding: 15px var(--pad);
  display: flex;
  gap: 26px;
  justify-content: center;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 13.5px;
}
.fhs-strip li { display: flex; align-items: center; gap: 8px; }
.fhs-strip li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
  opacity: .7;
  flex: none;
}

/* =============================================================================
   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--notice { padding: 34px 0; background: var(--bg); }

.fhs-section__name {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal-d);
  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 #E3EBF7;
  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: #C7DCE0; }
.fhs-card__ico {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--amber), #FFCE6B);
  color: #1B1300;
  font: 700 17px/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); }

.fhs-steps { counter-reset: fhsstep; list-style: none; margin: 0; padding: 0; }
.fhs-steps > li { counter-increment: fhsstep; position: relative; padding-left: 60px; margin-bottom: 26px; }
.fhs-steps > li::before {
  content: counter(fhsstep);
  position: absolute;
  left: 0; top: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--amber), #FFCE6B);
  color: #1B1300;
  font: 700 18px/42px var(--fh);
  text-align: center;
}
.fhs-steps h3 { font-family: var(--fh); font-size: 17px; margin: 0 0 6px; color: var(--navy); }
.fhs-steps p { margin: 0; color: var(--slate); line-height: 1.7; }

/* =============================================================================
   TWO COLUMN YES / NO
   LESSON: the accent is a clipped bar, not a thick top border. A 5px border
   against 1px sides on a rounded card mitres into a wedge, and the shorthand
   `border-top: 5px solid` outranks a modifier setting border-top-color, so the
   accent colour never applied and both cards drew the same bar.
   ========================================================================== */
.fhs-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.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);
  color: var(--ink);
}
.fhs-yesno li:first-child { border-top: 0; }
.fhs-yesno li::before { flex: none; font-weight: 700; font-size: 15px; line-height: 1.55; }

.fhs-yesno__can  { color: var(--ok); }
.fhs-yesno__can h3 { color: var(--ok); }
.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::before { content: "\2715"; color: var(--warn); }

/* =============================================================================
   NOTICE
   Deliberately not amber. Amber means pay everywhere else here, and a warning
   dressed as the pay button is a warning nobody reads as one.
   ========================================================================== */
.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__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__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;
}

/* =============================================================================
   TEAL BAND
   The Lagos identity. Used for the clinic message and the currency note.
   ========================================================================== */
.fhs-band {
  background: var(--teal-d);
  color: #FFFFFF;
  padding: 24px 30px;
  border-radius: var(--r-lg);
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.fhs-band p { margin: 0; font-size: 15px; line-height: 1.6; max-width: 68ch; }
.fhs-band strong { font-family: var(--fh); }

/* =============================================================================
   FAQ
   Native <details>. No JavaScript, so it still opens if a script is blocked,
   which on this stack has happened more than once.
   ========================================================================== */
.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: #FAFCFD; }
.fhs-faq summary:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.fhs-faq summary::after {
  content: "";
  position: absolute;
  right: 24px; top: 50%;
  width: 10px; height: 10px;
  margin-top: -7px;
  border-right: 2.5px solid var(--teal);
  border-bottom: 2.5px solid var(--teal);
  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; }

/* =============================================================================
   PAGE HEADER AND CONTACT
   ========================================================================== */
.fhs-pagehead {
  background: radial-gradient(120% 140% at 12% 0%, var(--wash) 0%, var(--wash-2) 60%, var(--wash-3) 100%);
  color: var(--ink);
  padding: 46px 0 48px;
}
.fhs-pagehead__kick {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-d);
  margin-bottom: 12px;
}
.fhs-pagehead h1 { color: var(--navy); font-size: clamp(26px, 3.6vw, 36px); line-height: 1.12; margin: 0 0 14px; }
.fhs-pagehead p { color: #41567A; font-size: 16px; line-height: 1.65; margin: 0; max-width: 62ch; }

.fhs-contact {
  background: var(--teal-d);
  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: #D3F0EC; 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;
  /* A light amber, not the brand amber. #F4A81D on the dark teal measures
     3.66:1, and these labels are 11px, so they need the full 4.5. */
  color: #FFD79A;
  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: #C4E9E4; }

/* =============================================================================
   WOOCOMMERCE
   ========================================================================== */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--teal);
  color: #FFFFFF;
  font-family: var(--fb);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 14px 26px;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--teal-d); 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(--teal);
  background: var(--teal-w);
  color: var(--ink);
}
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before { color: var(--teal); }
.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: #F4F9F8; 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);
}

.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(--teal);
  box-shadow: 0 0 0 3px rgba(15,138,126,.16);
  outline: none;
}
.woocommerce form .form-row label { font-weight: 600; font-size: 13px; color: var(--slate); }
.woocommerce .required { color: var(--err); text-decoration: none; }

/* =============================================================================
   COMPLIANCE FOOTER
   Printed by the plugin, never by a page editor, so it cannot be deleted while
   someone is editing a page. The wording is the Nigeria variant: the emergency
   number and the accepted payment methods are local, and nothing here mentions
   Medicaid, Medicare or 911.
   ========================================================================== */
.fhs-compliance {
  background: var(--teal-d);
  color: #BFE6E0;
  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; }
.fhs-compliance__note { display: inline-block; margin-top: 8px; color: #FFD79A; font-weight: 600; }
.fhs-compliance__note a { color: #FFFFFF; text-decoration: underline; }

/* =============================================================================
   ASTRA FOOTER BAR
   LESSON: removed. It carried a third party credit on a page that takes money,
   and left a white strip above the compliance bar. Selector taken from the live
   markup on the sister site, not guessed.
   ========================================================================== */
.fhs-ng .site-below-footer-wrap,
.fhs-ng .ast-footer-copyright { display: none; }

/* =============================================================================
   LAYOUT SAFETY NET
   LESSON: the theme asks Astra for its page-builder content layout, which drops
   the container and the duplicated page title. These rules only matter if that
   filter stops firing.
   ========================================================================== */
.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; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) { .fhs-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) {
  .fhs-hero { padding: 46px 0 52px; }
  .fhs-hero__cols { grid-template-columns: 1fr; gap: 34px; }
  .fhs-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .fhs-section { padding: 44px 0; }
  .fhs-yesno, .fhs-contact { grid-template-columns: 1fr; }
  .fhs-ng .main-header-menu .menu-link { min-height: 44px; display: flex; align-items: center; }
}
@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: 12px 18px; font-size: 12.5px; }
  .fhs-notice { flex-direction: column; gap: 12px; padding: 20px; }
}

/* =============================================================================
   REDUCED MOTION AND PRINT
   ========================================================================== */
@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; }

@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; }
}