/*
Theme Name: Cure Stat Infusion Services
Theme URI: https://curestatinfusions.com/
Author: Cure Stat Rx
Description: A clinician-first marketing theme with a patient-friendly second door, built from the CureStatInfusions site map, v10.
Version: 2.1.2
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: curestatinfusions
Tags: one-column, custom-menu, editor-style, accessibility-ready
*/
/* ==========================================================================
   Cure Stat Infusion Services
   One stylesheet for the whole site. Tokens first, then base, then blocks.
   ========================================================================== */

/* --------------------------------------------------------------- Tokens -- */
:root {
  /* Palette per Cure Stat Rx Brand Manual 2019, 1.4 primary and 1.5 secondary.
     The four book colors are exact and are never redefined:
       dark blue  Pantone 7694 C  CMYK 100/78/34/20  #00416B
       light blue Pantone 7458 C  CMYK 53/3/8/9      #64B6D0
       orange     Pantone 715 C   CMYK 0/54/93/0     #F88D2B
       gray       Pantone 425 C   CMYK 66/56/53/29   #53575A
     Everything else here is a tone or a shade of one of those four, which 1.5
     permits: tones for the ramp, shades where contrast is needed. Ratios are
     measured against --bg. */
  --ink:        #00416B;  /* brand dark blue, headings. 10.3:1 */
  --ink-2:      #53575A;  /* brand gray, body copy. 7.0:1 */
  --ink-3:      #686B6E;  /* gray tone, muted copy. 5.2:1 */

  --navy-900:   #002E4B;  /* dark blue shade, dark bands and the footer */
  --navy-700:   #00416B;  /* brand dark blue, primary buttons and links */
  --navy-600:   #12567D;  /* dark blue toward light blue, hover */
  /* Brand light blue is only 2.2:1, so it is decoration. --sky-text carries
     small copy in the same family. */
  --sky-text:   #266D91;  /* light blue shade, small copy. 4.8:1 on the tint band */
  --sky-500:    #64B6D0;  /* brand light blue, icons and rules */
  --sky-200:    #CAE6EF;  /* light blue, 34% tone. icon chips, selection, borders */
  --sky-100:    #DDEFF5;  /* light blue, 22% tone. tint bands and lead cards */
  --sky-050:    #E8F4F8;  /* light blue, 15% tone. hover washes */

  --orange:     #F88D2B;  /* brand orange, decoration and large text only */
  --orange-text:#905219;  /* orange shade, small copy. clears 4.5:1 on every ground */
  --orange-050: #FEF6EE;  /* orange, 8% tone */
  --orange-100: #FEF1E6;  /* orange, 12% tone. the round tags of 1.5 */
  --orange-200: #FDDDBF;  /* orange, 30% tone */

  --bg:         #F3F9FB;  /* light blue, 8% tone */
  --white:      #FFFFFF;  /* 1.1: the logo mark always sits on white */
  --line:       #DDE7EE;  /* dark blue, 12% tone */
  --line-2:     #C2D2DD;  /* dark blue, 22% tone */

  --radius:     18px;
  --radius-sm:  12px;
  --radius-pill: 999px;
  --container:  1140px;
  --container-narrow: 760px;

  --shadow-sm:  0 1px 2px rgba(0,65,107,.05), 0 8px 24px rgba(0,65,107,.05);
  --shadow-md:  0 2px 6px rgba(0,65,107,.06), 0 20px 44px rgba(0,65,107,.10);

  /* Brand Manual 2.2: headlines are Trump Gothic Pro Bold, and the book names
     Anton as the web replacement. Licensed Trump Gothic wins where installed. */
  --ff-display: "Trump Gothic Pro", "Anton", "Arial Narrow", Impact,
                "Haettenschweiler", sans-serif;
  /* Brand Manual 2.3: body text is Comfortaa Regular. The book specimens only
     Regular and Bold, so those are the only two weights loaded or used. */
  --ff-sans:    "Comfortaa", -apple-system, BlinkMacSystemFont, "Segoe UI",
                "Trebuchet MS", Verdana, sans-serif;

  --ease:       cubic-bezier(.22,.61,.36,1);
  --header-h:   88px;
}

/* ----------------------------------------------------------------- Base -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--ff-sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .6em; }

h1, h2, .display {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.05;
  /* Anton is condensed, so headlines run long and strand a word on the last
     line more often than the face it replaced. */
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 4.9vw, 3.7rem); }
h2 { font-size: clamp(1.8rem, 3.3vw, 2.6rem); }

h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.4;
}

h4 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.008em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-600); }

strong, b { color: var(--ink); font-weight: 700; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3rem 0;
}

img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--sky-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sky-200); color: var(--navy-900); }

/* ----------------------------------------------------------- Utilities -- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(64px, 9vw, 120px); }
.section--tight { padding-block: clamp(48px, 6vw, 76px); }
.section--white { background: var(--white); }
.section--tint { background: var(--sky-100); }

.section-head { max-width: 46rem; margin-bottom: clamp(36px, 5vw, 56px); }
/* Plain paragraphs only: a styled paragraph (eyebrow, lead) keeps its own look. */
.section-head p:not([class*="is-style-"]) { color: var(--ink-2); font-size: 1.125rem; }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow,
.is-style-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
  color: var(--sky-text);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before,
.is-style-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--orange);
  flex: none;
}

.lede,
.is-style-lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--ink-2); }
.muted { color: var(--ink-3); }
.small { font-size: .9375rem; }
.is-style-small { font-size: .9375rem; color: var(--ink-3); }
.stack > * + * { margin-top: 1rem; }

/* Block-editor content on any page using the generic template. */
.entry-content > * + * { margin-top: 1.15rem; }
.entry-content h2 { margin-top: 2.5rem; }
.entry-content h3 { margin-top: 2rem; }
.entry-content ul,
.entry-content ol { padding-left: 1.35rem; }
.entry-content li + li { margin-top: .4rem; }
.entry-content img { border-radius: var(--radius-sm); height: auto; }
.entry-content blockquote {
  margin: 0;
  padding: .25rem 0 .25rem 1.35rem;
  border-left: 3px solid var(--sky-500);
  color: var(--ink);
  font-family: var(--ff-display);
  font-size: 1.3rem;
  letter-spacing: .005em;
  line-height: 1.28;
}
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th,
.entry-content td { padding: .65rem .75rem; border-bottom: 1px solid var(--line); text-align: left; }

[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ------------------------------------------------------------- Buttons --
   .btn is the theme's own markup. .wp-block-button__link is the same button
   built in the editor, and its block style picks the variant. */
.btn,
.wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--ff-sans);
  font-size: .9688rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease),
              box-shadow .2s var(--ease);
}
.btn:hover,
.wp-block-button__link:hover { transform: translateY(-2px); }
.btn:active,
.wp-block-button__link:active { transform: translateY(0); }

.btn--primary,
.wp-block-button__link,
.wp-element-button {
  background: var(--navy-900);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,65,107,.22);
}
.btn--primary:hover,
.wp-block-button__link:hover { background: var(--navy-700); color: #fff; box-shadow: 0 10px 26px rgba(0,65,107,.30); }

.btn--ghost,
.is-style-ghost > .wp-block-button__link,
.is-style-ghost-arrow > .wp-block-button__link {
  background: transparent;
  border-color: var(--sky-500);
  color: var(--ink);
  box-shadow: none;
}
.btn--ghost:hover,
.is-style-ghost > .wp-block-button__link:hover,
.is-style-ghost-arrow > .wp-block-button__link:hover { border-color: var(--navy-700); color: var(--navy-900); background: rgba(255,255,255,.6); box-shadow: none; }

.btn--light,
.is-style-light > .wp-block-button__link {
  background: #fff;
  color: var(--navy-900);
  border-color: var(--line);
  box-shadow: none;
}
.btn--light:hover,
.is-style-light > .wp-block-button__link:hover { background: #fff; color: var(--navy-900); border-color: var(--sky-500); box-shadow: none; }

.btn--onDark,
.is-style-on-dark > .wp-block-button__link {
  background: transparent;
  border-color: rgba(255,255,255,.28);
  color: #fff;
  box-shadow: none;
}
.btn--onDark:hover,
.is-style-on-dark > .wp-block-button__link:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: #fff; box-shadow: none; }

.btn--sm { padding: .6rem 1.1rem; font-size: .875rem; }
.btn--block { width: 100%; }
.btn svg { width: 17px; height: 17px; flex: none; }

/* The arrow styles draw the same arrow icon the theme's own buttons use. */
.is-style-primary-arrow > .wp-block-button__link::after,
.is-style-ghost-arrow > .wp-block-button__link::after {
  content: "";
  width: 17px;
  height: 17px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn-row,
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .75rem;
}
.btn-row--center,
.wp-block-buttons.is-content-justification-center { justify-content: center; }

/* -------------------------------------------------------------- Header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid white, not a tint or a blur: 1.1 has the logo mark always against a
     white background, and a see-through header puts page colour behind it. */
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

/* Logged in, WordPress fixes its admin bar to the top of the window, so the
   sticky header has to stick below it or it slides underneath. The bar is 32px
   tall, 46px at 782px and narrower, and below 600px it scrolls away with the
   page instead of staying fixed, so the header goes back to the top. */
.admin-bar .site-header { top: 32px; }
.admin-bar [id] { scroll-margin-top: calc(var(--header-h) + 24px + 32px); }

@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar [id] { scroll-margin-top: calc(var(--header-h) + 24px + 46px); }
}

@media (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
  .admin-bar [id] { scroll-margin-top: calc(var(--header-h) + 24px); }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
/* 1.1 sets a minimum logo width of 1.5in, which is 144 CSS px. The artwork is
   trimmed to the mark plus its clear space, so the image width is the logo
   width: 60px tall is 253px wide, 48px on phones is 203px. Never go under 34px
   tall. No hover fade either: fading the mark changes its colours, which 1.1
   does not allow. */
.logo img {
  display: block;
  width: auto;
  height: 60px;
}

@media (max-width: 900px) {
  .logo img { height: 48px; }
}

.nav { margin-left: auto; }

.nav-list {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .8rem;
  border: 0;
  background: none;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-family: var(--ff-sans);
  font-size: .9375rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav-link:hover { color: var(--navy-900); background: rgba(100,182,208,.18); }
.nav-link[aria-current="page"] { color: var(--navy-900); font-weight: 700; }
.nav-link svg { width: 12px; height: 12px; transition: transform .2s var(--ease); }

.has-sub { position: relative; }

.sub-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* The submenu is pure CSS: hover for pointers, focus-within for keyboards. */
.has-sub:hover > .sub-list,
.has-sub:focus-within > .sub-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.has-sub:hover > .nav-link svg,
.has-sub:focus-within > .nav-link svg { transform: rotate(180deg); }
/* A hover bridge so the pointer can travel from the link into the panel. */
.has-sub::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}
.sub-list a {
  display: block;
  padding: .55rem .75rem;
  border-radius: 9px;
  color: var(--ink-2);
  font-size: .9375rem;
  font-weight: 400;
  text-decoration: none;
}
.sub-list a:hover { background: var(--sky-050); color: var(--navy-900); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 19px; height: 19px; }
.nav-toggle .icon-open { display: flex; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: flex; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 900px) {
  /* No-JS baseline: the nav is a plain stacked list under the logo, and the
     toggle is hidden. A drawer that only JavaScript can open would leave
     someone without navigation at all if the script failed. */
  .header-inner { flex-wrap: wrap; }
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-bottom: .75rem;
  }
  .nav-toggle { display: none; }

  /* With JavaScript it becomes the collapsible drawer. */
  .js .header-inner { flex-wrap: nowrap; }
  .js .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    order: 0;
    width: auto;
    margin: 0;
    padding: .5rem clamp(20px, 5vw, 40px) 1.25rem;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .js .nav.is-open { display: block; }
  .js .nav-toggle { display: inline-flex; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link { justify-content: space-between; padding: .85rem .25rem; font-size: 1.0625rem; }
  .nav-link:hover { background: none; }
  .nav-link svg { display: none; }
  .has-sub::after { content: none; }
  /* In the drawer the sub-pages are simply always visible. No toggle needed. */
  .sub-list {
    position: static;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 0 0 .5rem .25rem;
    padding: 0 0 0 .75rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
  }
}

/* ---------------------------------------------------------------- Hero -- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 11vw, 148px) clamp(56px, 8vw, 104px);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--sky-200) 0%, rgba(202,230,239,0) 62%),
    radial-gradient(52% 48% at 6% 2%, rgba(248,141,43,.20) 0%, rgba(248,141,43,0) 62%),
    radial-gradient(85% 65% at 90% 6%, rgba(100,182,208,.46) 0%, rgba(100,182,208,0) 62%),
    var(--bg);
}
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.hero-inner { max-width: 60rem; margin-inline: auto; text-align: center; }

/* Home page photo, added by inc/hero-photo.php. The shot sits at a quarter
   strength over the hero's own gradients, and a soft pool of the page ground
   behind the copy keeps the headline at full contrast at every width. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: .25;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 50%, rgba(243,249,251,.85) 0%, rgba(243,249,251,0) 75%);
}
/* Narrow screens: frame the lower half of the shot (gowned arms, gloves and
   bench) so the pharmacist's head sits out of frame above the band. The
   scale gives phones, which otherwise show the full height, room to crop. */
@media (max-width: 1024px) {
  .hero-photo img {
    object-position: 100% 100%;
    transform: scale(1.35);
    transform-origin: 100% 100%;
    opacity: .38;
  }
  /* The copy covers most of a small screen, so the pool behind it is lighter
     here or the photo disappears under it entirely. */
  .hero-photo::after {
    background: radial-gradient(70% 60% at 50% 50%, rgba(243,249,251,.6) 0%, rgba(243,249,251,0) 80%);
  }
}
.hero--photo { padding-block: clamp(48px, 5vw, 64px); }
.hero--photo .hero-inner { position: relative; z-index: 1; }
.hero h1 { margin-bottom: .45em; }
.hero .lede,
.hero .is-style-lede { max-width: 38rem; margin-inline: auto; }
.hero .btn-row,
.hero .wp-block-buttons { margin-top: 2rem; }

/* A third tier under the lede, for pages whose hero carries a longer intro.
   Centred prose needs to step down in size, or it reads as a wall. */
.hero-intro,
.is-style-intro {
  max-width: 42rem;
  margin: 1.25rem auto 0;
  color: var(--ink-3);
  font-size: 1rem;
}

.hero--compact { padding-block: clamp(48px, 6vw, 76px) clamp(36px, 4.5vw, 56px); }
.hero--compact h1 { font-size: clamp(2.2rem, 4.2vw, 3.2rem); }
.hero--compact .lede,
.hero--compact .is-style-lede { max-width: 34rem; }

/* The lead card in a grid, for the fastest referral route. */
.card--lead {
  background: var(--sky-100);
  border-color: var(--sky-200);
}

.hero--split .hero-inner { max-width: none; text-align: left; }
.hero--split .lede,
.hero--split .is-style-lede { margin-inline: 0; }
.hero-grid {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
}

.hero-contact {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.75rem;
}
/* Jump links in a hero: a paragraph of links, each drawn as a chip. */
.jump-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.75rem;
}

.contact-chip,
.jump-links a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: .9375rem;
  font-weight: 400;
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.contact-chip:hover,
.jump-links a:hover { border-color: var(--sky-500); background: var(--sky-050); color: var(--navy-900); transform: translateY(-2px); }
.contact-chip svg { width: 15px; height: 15px; color: var(--sky-500); flex: none; }

/* ------------------------------------------------------ Referral forms -- */
/* A scannable list of PDF links, each naming the drugs on that form, so a
   clinician reaches the right form in one click. */
.form-links,
.is-style-form-links {
  display: grid;
  gap: clamp(12px, 1.6vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px)  { .form-links, .is-style-form-links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .form-links, .is-style-form-links { grid-template-columns: repeat(3, 1fr); } }
.form-links .is-lead,
.is-style-form-links > li:first-child { grid-column: 1 / -1; }

/* In the editor each item is a link whose bold first words are the form name;
   the rest of the link text is the drug list. */
.is-style-form-links a {
  font-size: .875rem;
  line-height: 1.5;
}

.form-links a,
.is-style-form-links a {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  height: 100%;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  text-decoration: none;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.form-links a:hover,
.is-style-form-links a:hover { border-color: var(--sky-500); background: var(--sky-050); color: var(--ink-2); transform: translateY(-2px); }
.form-links .is-lead a,
.is-style-form-links > li:first-child a { background: var(--sky-100); border-color: var(--sky-200); }
.form-links .is-lead a:hover,
.is-style-form-links > li:first-child a:hover { border-color: var(--sky-500); }

.form-link-title,
.is-style-form-links a > strong:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
}
.is-style-form-links a > strong:first-child { font-size: 1.0625rem; }
.is-style-form-links a > strong:first-child::after { content: "PDF"; }

.form-link-type,
.is-style-form-links a > strong:first-child::after {
  flex: none;
  padding: .15rem .55rem;
  background: var(--orange-100);
  border-radius: var(--radius-pill);
  color: var(--orange-text);
  font-size: .6875rem;
  letter-spacing: .12em;
}
.form-link-drugs { font-size: .875rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .form-links a:hover, .is-style-form-links a:hover { transform: none; } }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- Trust strip -- */
/* A hairline turns the badge row into a defined band. Without it the badges
   float in the white between the hero and the first section. */
.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem clamp(1rem, 3vw, 2.25rem);
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--line);
}
/* The same badge group, sitting inside a section rather than as its own band. */
.trust--inline {
  justify-content: flex-start;
  padding-block: 0;
  margin-top: 2.25rem;
  border-bottom: 0;
}
.trust-label {
  color: var(--ink-3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .95rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--navy-900);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.badge:hover { border-color: var(--orange); color: var(--navy-900); transform: translateY(-2px); }
.badge small { color: var(--ink-3); font-weight: 400; letter-spacing: 0; }

/* --------------------------------------------------------------- Grids -- */
.grid { display: grid; gap: clamp(16px, 2.2vw, 24px); }
@media (min-width: 700px) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------- Cards -- */
.card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--sky-500); box-shadow: var(--shadow-md); }
.card p:last-child { margin-bottom: 0; }
/* A linked card title is a tap target, so it gets at least 24px of height. */
.card h3 a { display: inline-block; min-height: 24px; padding-block: 2px; }
.card .btn { margin-top: auto; align-self: flex-start; }
.card > .wp-block-buttons { margin-top: 1.5rem; }
.card .wp-block-button__link { padding: .6rem 1.1rem; font-size: .875rem; }
.card--flat:hover { transform: none; box-shadow: none; border-color: var(--line); }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.25rem;
  background: var(--sky-500);
  border-radius: 13px;
  color: var(--navy-900);
}
.card-icon svg { width: 21px; height: 21px; }

.card-tag,
.is-style-tag {
  display: inline-block;
  margin-bottom: .85rem;
  color: var(--orange-text);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Two-door split */
.door {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(28px, 3.6vw, 44px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.door:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sky-500); }
.door h3 { font-family: var(--ff-display); font-size: clamp(1.35rem, 2.1vw, 1.7rem); font-weight: 400; letter-spacing: .005em; margin-bottom: 0; }
.door .btn { align-self: flex-start; margin-top: auto; }
.door > .wp-block-buttons { margin-top: auto; }

/* -------------------------------------------------------------- Tiles -- */
.tiles {
  display: grid;
  gap: 1px;
  background: var(--sky-200);
  border: 1px solid var(--sky-200);
  border-radius: var(--radius);
  overflow: hidden;
}
/* --3 is for exactly three tiles, so it never leaves a half-empty row.
   --auto is for larger sets that reflow cleanly at two or three across. */
@media (min-width: 860px)  { .tiles--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .tiles--auto { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiles--auto { grid-template-columns: repeat(3, 1fr); } }
/* A short last row stretches to fill it, so the grid never shows an empty
   cell in the gap colour. */
@media (min-width: 700px) and (max-width: 999px) {
  .tiles--auto > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .tiles--auto > .tile:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .tiles--auto > .tile:last-child:nth-child(3n+2) { grid-column: span 2; }
}

.tile {
  padding: clamp(22px, 2.6vw, 30px);
  background: #fff;
  transition: background-color .24s var(--ease);
}
.tile:hover { background: var(--sky-050); }
.tile h3 { margin-bottom: .35rem; }
.tile p { color: var(--ink-2); font-size: .9688rem; margin: 0; }
.tile-icon { color: var(--sky-500); margin-bottom: .9rem; display: block; }
.tile-icon svg { width: 20px; height: 20px; }

/* --------------------------------------------------------- Comparison -- */
.compare { display: grid; gap: clamp(16px, 2vw, 20px); }
@media (min-width: 900px) { .compare { grid-template-columns: repeat(3, 1fr); } }

.compare-col {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.compare-col:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.compare-head {
  display: flex;
  align-items: center;
  /* A floor so the three headings line up even when one title wraps. */
  min-height: clamp(76px, 7vw, 92px);
  padding: 1.25rem clamp(20px, 2.4vw, 28px);
  background: var(--navy-900);
  color: #fff;
}
.compare-head h3 { color: #fff; margin: 0; }
.compare-body { padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 1.25rem; }
.compare-row dt,
.is-style-label {
  color: var(--ink-3);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
  margin: 0 0 .3rem;
}
.compare-row dd,
.compare-row p:not(.is-style-label) { margin: 0; color: var(--ink-2); font-size: .9688rem; line-height: 1.55; }

/* --------------------------------------------------------------- Steps -- */
.steps,
.is-style-steps { counter-reset: step; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.steps li,
.is-style-steps > li {
  counter-increment: step;
  position: relative;
  padding: 1.6rem 0 1.6rem 4.25rem;
  border-bottom: 1px solid var(--line);
}
.steps li:first-child,
.is-style-steps > li:first-child { padding-top: 0; }
.steps li:first-child::before,
.is-style-steps > li:first-child::before { top: -.35rem; }
.steps li:last-child,
.is-style-steps > li:last-child { border-bottom: 0; padding-bottom: 0; }
/* In the editor a step is one list item: its bold first words are the title.
   On the live site the theme turns those words into an h3.step-title. */
.is-style-steps > li > strong:first-child,
.is-style-steps > li > .step-title {
  display: block;
  margin: 0 0 .3rem;
  color: var(--ink);
  font-size: 1.1875rem;
  letter-spacing: -.012em;
  line-height: 1.4;
}
.steps li::before,
.is-style-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--orange);
  border-radius: 50%;
  color: var(--navy-900);
  font-family: var(--ff-display);
  font-size: 1.25rem;
  line-height: 1;
}
.steps h3 { margin-bottom: .3rem; }
.steps p { margin: 0; }

/* --------------------------------------------------------- Check lists -- */
.checklist,
.is-style-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.checklist li,
.is-style-checklist > li { position: relative; padding-left: 2rem; }
.checklist li::before,
.is-style-checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sky-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300416B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.checklist strong,
.is-style-checklist strong { display: block; }

.arrow-list,
.is-style-arrows { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
.arrow-list li,
.is-style-arrows > li { position: relative; padding-left: 1.9rem; }
.arrow-list li::before,
.is-style-arrows > li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .62em;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--sky-500);
  border-right: 1.5px solid var(--sky-500);
  transform: rotate(45deg);
}

/* Two-column flowing list, used for Conditions We Treat */
.column-list,
.is-style-columns {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 1;
  column-gap: clamp(24px, 4vw, 56px);
}
@media (min-width: 620px) { .column-list, .is-style-columns { columns: 2; } }
@media (min-width: 980px) { .column-list, .is-style-columns { columns: 3; } }
/* The referral forms A to Z is 55 short drug names, which fit two to a row even
   on the narrowest phone. One column there ran to three screens. */
@media (max-width: 619px) {
  #refer .is-style-columns { columns: 2; column-gap: 16px; }
  #refer .is-style-columns > li { padding-left: .95rem; font-size: .9063rem; }
}
.column-list li,
.is-style-columns > li {
  break-inside: avoid;
  padding: .5rem 0 .5rem 1.35rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: var(--ink-2);
  font-size: .9688rem;
}
.column-list li::before,
.is-style-columns > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sky-500);
}

/* ------------------------------------------------------------- Callout -- */
.callout {
  padding: clamp(22px, 3vw, 32px);
  background: var(--sky-050);
  border: 1px solid var(--sky-200);
  border-left: 3px solid var(--sky-500);
  border-radius: var(--radius-sm);
}
.callout h3 { margin-bottom: .4rem; }
.callout--urgent { background: var(--orange-050); border-color: var(--orange-200); border-left-color: var(--orange); }
.callout--urgent h3 { color: var(--orange-text); }

.stack--wide { max-width: 62rem; }

.notice,
.is-style-notice {
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  font-size: .9375rem;
}

/* -------------------------------------------------------------- Forms -- */
.form-card {
  padding: clamp(24px, 3vw, 36px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.form-card h2, .form-card h3 { margin-bottom: .35rem; }
.form-card h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.form-error p { margin: 0; }
.form-card > p { color: var(--ink-3); font-size: .9375rem; }

.field-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 560px) { .field-grid--2 { grid-template-columns: 1fr 1fr; } }
.field-full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field label {
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.field .hint { color: var(--ink-3); font-size: .8125rem; font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .75rem .9rem;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: .9688rem;
  line-height: 1.4;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 108px; resize: vertical; }
.field select { appearance: none; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23686B6E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 15px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--sky-500);
  box-shadow: 0 0 0 3px rgba(100,182,208,.28);
}
.field input::placeholder, .field textarea::placeholder { color: #83868A; }

.form-actions { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .85rem; }
.form-note { color: var(--ink-3); font-size: .8125rem; line-height: 1.5; }

/* PHP decides whether the form or this panel renders, so no toggle class. */
.form-success {
  padding: clamp(26px, 3vw, 40px);
  text-align: center;
}
.form-success .tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  background: var(--sky-500);
  border-radius: 50%;
  color: var(--navy-700);
}
.form-success .tick svg { width: 24px; height: 24px; }
.form-success h3 {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: .005em;
  margin-bottom: .35rem;
}

/* Server-side validation feedback. */
.form-error {
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: var(--orange-050);
  border: 1px solid var(--orange-200);
  border-left: 3px solid var(--orange-text);
  border-radius: var(--radius-sm);
  color: var(--orange-text);
  font-size: .9375rem;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--orange-text); }
/* Honeypot. Off-screen rather than display:none so bots still fill it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ Details -- */
.accordion { border-top: 1px solid var(--line); }
.accordion details {
  border-bottom: 1px solid var(--line);
}
.accordion summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  transition: color .18s var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--navy-700); }
.accordion summary::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: .2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300416B' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .answer { padding: 0 0 1.5rem; max-width: 58rem; }
.accordion .answer p:last-child { margin-bottom: 0; }
/* Details blocks from the editor put the answer straight after the summary. */
.accordion .wp-block-details > :not(summary) { max-width: 58rem; }
.accordion .wp-block-details > :not(summary):last-child { margin-bottom: 0; padding-bottom: 1.5rem; }

/* Program directory */
.programs { display: grid; gap: 1rem; }
.program-group,
.accordion .is-style-program,
.is-style-program {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.program-group summary,
.is-style-program > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  list-style: none;
}
.program-group summary::-webkit-details-marker,
.is-style-program > summary::-webkit-details-marker { display: none; }
.program-group summary:hover,
.is-style-program > summary:hover { background: var(--sky-050); }
.program-group summary::after,
.is-style-program > summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23686B6E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--ease);
}
.program-group[open] summary::after,
.is-style-program[open] > summary::after { transform: rotate(180deg); }
.program-group[open] summary,
.is-style-program[open] > summary { border-bottom: 1px solid var(--line); }
.program-list,
.is-style-programs {
  margin: 0;
  padding: 1.35rem 1.35rem 1.5rem;
  list-style: none;
  display: grid;
  gap: .95rem;
}
@media (min-width: 760px) { .program-list, .is-style-programs { grid-template-columns: 1fr 1fr; column-gap: 2.75rem; } }
.program-list li,
.is-style-programs > li { color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
.program-list li strong,
.is-style-programs > li strong { color: var(--ink); font-weight: 700; }

/* ----------------------------------------------------------- Contact -- */
.contact-grid { display: grid; gap: clamp(16px, 2vw, 20px); }
@media (min-width: 700px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: repeat(4, 1fr); } }

.contact-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(22px, 2.6vw, 30px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform .26s var(--ease), border-color .26s var(--ease), box-shadow .26s var(--ease);
}
.contact-card:hover { transform: translateY(-4px); border-color: var(--sky-500); box-shadow: var(--shadow-md); }
.contact-card .label {
  color: var(--ink-3);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.contact-card p { margin: 0; }
.contact-card a { color: var(--ink); text-decoration: none; }
.contact-card a:hover { color: var(--navy-600); }
/* The number's link covers the whole card, so the card that lifts on hover is
   also the thing you click, as it was before. */
.contact-card { position: relative; }
.contact-card .is-style-figure a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.contact-card .value,
.is-style-figure {
  color: var(--ink);
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 2vw, 1.5rem);
  letter-spacing: .01em;
  line-height: 1.25;
  word-break: break-word;
}
/* The email is 23 characters against about 188px of card, so at the old size it
   wrapped and split mid-word. Capped so it holds one line in the 4-up layout. */
.contact-card .value.is-email,
.is-style-figure:has(a[href^="mailto:"]) { font-size: clamp(.875rem, 1.5vw, 1rem); }
.contact-card .meta,
.contact-card .is-style-small { color: var(--ink-3); font-size: .875rem; }

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  line-height: 0;
}
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

.split { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .split--wide-left { grid-template-columns: 1.15fr .85fr; } }

/* ------------------------------------------------------------- CTA band -- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 88px);
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(100,182,208,.38) 0%, rgba(100,182,208,0) 55%),
    var(--navy-900);
  color: rgba(255,255,255,.78);
}
/* A band that ends the page runs straight into the footer, which is the same
   navy, so its bottom padding would only stack on the footer's own. */
main > .cta-band:last-child { padding-bottom: clamp(24px, 3vw, 32px); }
main:has(> .cta-band:last-child) + .site-footer .footer-top {
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.cta-band h2 { color: #fff; }
.cta-band .lede,
.cta-band .is-style-lede,
.cta-band .is-style-small { color: rgba(255,255,255,.78); }
.cta-band a:not(.btn):not(.wp-block-button__link) { color: #fff; }
/* --sky-text is a shade tuned for light backgrounds and only reaches 2.8:1 here.
   On the dark band the eyebrow takes the 20% tone of the brand light blue, which
   holds up even over the lightest point of the gradient above. */
.cta-band .eyebrow,
.cta-band .is-style-eyebrow { color: var(--sky-100); }

/* The contact band: no heading, just the phone and email buttons with the
   fax, TTY, and hours beside them, in one row that wraps on narrow screens. */
.cta-band--contact { padding-top: clamp(32px, 4vw, 44px); }
.contact-strip {
  display: grid;
  gap: 1rem 2.5rem;
  align-items: center;
}
.footer-fax-emphasis {
	font-weight: 700;
}

.footer-fax-emphasis span {
	font-weight: 700;
}

.footer-fax-emphasis a {
	font-size: 1.15em;
	font-weight: 700;
}
.contact-strip .wp-block-buttons { margin: 0; }
.contact-strip p { margin: 0; }
/* The footer text, folded in by csi_contact_band_blurb(), in place of the
   footer's own top row. */
.contact-strip-blurb { order: -1; color: rgba(255,255,255,.7); font-size: .9375rem; }
/* Below 1100px there is no room for the text beside three buttons, so the
   footer text sits above a rule, then the buttons, then TTY and hours. */
@media (max-width: 1099px) {
  .contact-strip { gap: 1.1rem; }
  .contact-strip-blurb {
    max-width: 44rem;
    font-size: .875rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .contact-strip .is-style-small { font-size: .8125rem; line-height: 1.6; }
}
/* Phones: three equal full-width buttons. */
@media (max-width: 599px) {
  .contact-strip .wp-block-buttons { display: grid; gap: .6rem; }
  .contact-strip .wp-block-button,
  .contact-strip .wp-block-button__link { width: 100%; justify-content: center; text-align: center; }
}
/* Wide screens: the footer text first, then phone, email, and fax in one row
   (they carry equal weight: pharmacies get as many faxes as calls), with TTY
   and hours under them. */
@media (min-width: 1100px) {
  .contact-strip { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; }
  .contact-strip .wp-block-buttons,
  .contact-strip .is-style-small { grid-column: 2; }
  .contact-strip .is-style-small { max-width: 30rem; }
  .contact-strip-blurb {
    grid-column: 1;
    grid-row: 1 / span 2;
    max-width: 36rem;
    padding-right: 3rem;
    border-right: 1px solid rgba(255,255,255,.12);
  }
  .contact-strip .wp-block-buttons { flex-wrap: nowrap; gap: .6rem; }
  .contact-strip .wp-block-button__link { padding-inline: 1.15rem; white-space: nowrap; }
}

/* ------------------------------------------------- Editor block helpers --
   Section backgrounds staff can pick, and spacing utilities the default page
   content uses where the old templates had inline styles. */
.wp-block-group.is-style-white { background: var(--white); }
.wp-block-group.is-style-light { background: var(--bg); }
.wp-block-group.is-style-tint  { background: var(--sky-100); }

.u-mt-sm { margin-top: 1rem; }
.u-mt    { margin-top: 1.5rem; }
.u-mt-lg { margin-top: 2.5rem; }
.u-mt-xl { margin-top: 3rem; }

/* Images and embeds added to a page stay inside their column. */
.wp-block-image img { height: auto; border-radius: var(--radius-sm); }
.wp-block-image { margin: 0 0 1.15em; }

/* -------------------------------------------------------------- Footer -- */
.site-footer {
  background: var(--navy-900);
  color: rgba(255,255,255,.7);
  font-size: .9375rem;
}
.site-footer a { color: rgba(255,255,255,.7); text-decoration: none; }
.site-footer a:hover { color: #fff; }

.footer-top {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(28px, 3.5vw, 40px);
}
@media (min-width: 760px) { .footer-top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; } }

.footer-brand p { max-width: 68ch; margin: 0; }

.footer-contact { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.footer-contact li { display: flex; align-items: baseline; gap: .85rem; }
.footer-contact span {
  min-width: 3.25rem;
  color: rgba(255,255,255,.72);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-footer .footer-contact a { color: #fff; font-family: var(--ff-display); font-size: 1.25rem; letter-spacing: .01em; }
.site-footer .footer-contact a:hover { color: var(--sky-200); }

/* Footer column headings are h2 so the document never jumps h2 to h4.
   The global heading rule sets the Anton display face, so undo that here. */
.footer-col h2 {
  color: #fff;
  font-family: var(--ff-sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-block: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-badges .badge {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.footer-badges .badge:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); color: #fff; }
.footer-badges .badge small { color: rgba(255,255,255,.72); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55);
  font-size: .8125rem;
}
.social { display: flex; gap: .5rem; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.social a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); transform: translateY(-2px); }
.social svg { width: 16px; height: 16px; }

/* Phones: the icons lead and the copyright follows, rather than trailing
   under a two-line notice. */
@media (max-width: 599px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .75rem; padding-block: 1.1rem 1.4rem; }
  .footer-bottom .social { order: -1; }
  .footer-bottom p { margin: 0; line-height: 1.55; }
}

/* ------------------------------------------------------------- Reveal --
   Scoped to .js so that without JavaScript nothing is ever hidden. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .door:hover, .contact-card:hover,
  .contact-chip:hover, .badge:hover, .social a:hover,
  .wp-block-button__link:hover, .jump-links a:hover { transform: none; }
}

@media print {
  /* Keep the logo so a printed page (What to Expect, most often) still says who
     it is from. Everything else in the header is for screens. */
  .site-footer, .cta-band, .btn-row, .wp-block-buttons, .jump-links, .nav, .nav-toggle, .skip-link { display: none !important; }
  .site-header { position: static; border-bottom: 1px solid var(--line); }
  .header-inner { min-height: 0; padding-block: 12px; }
  .logo img { height: 52px; }
  body { background: #fff; }
}