/*
Theme Name: Drive Right Academy
Theme URI: https://driverightacademyep.com/
Author: Drive Scout
Author URI: https://drivescout.com/
Description: Custom theme for Drive Right Academy, El Paso TX. Works with the DriveScout shop plugin for programs and checkout.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: driveright-academy
*/

/* =============================================================
   Palette and shared measurements
   Brand values are from the original design's README.txt.
   ============================================================= */
:root {
  --navy:        #0B2340;
  --navy-mid:    #123152;
  --navy-soft:   #3E5C7F;
  --red:         #C4202A;
  --red-dark:    #A81A22;

  --surface:     #F5F7FA;
  --border:      #E3E8EE;
  --border-soft: #EEF2F6;
  --field-border:#CFD8E3;

  --text:        #1F2933;
  --text-muted:  #4A5763;
  --text-label:  #5A6675;
  --on-navy:     #CBD8E6;
  --on-navy-dim: #8FA8C4;
  --on-navy-bar: #A9BCD1;
  --on-navy-foot:#7E93AB;

  --shell:       1180px;
  --gutter:      32px;
  --radius:      3px;

  --font-body:    'Barlow', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
}

/* =============================================================
   Base
   ============================================================= */
html, body { margin: 0; padding: 0; }

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

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

a:hover { color: var(--red); }

p { text-wrap: pretty; }

img { max-width: 100%; }

.site {
  background: #FFFFFF;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site__main { flex: 1; }

/* Screen-reader-only text, used for form error announcements. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================
   Layout primitives
   ============================================================= */

/* The centred content column shared by every section. */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}

.section { background: #FFFFFF; }
.section--navy    { background: var(--navy);     color: #FFFFFF; }
.section--navymid { background: var(--navy-mid); color: #FFFFFF; }
.section--surface { background: var(--surface); border-bottom: 1px solid var(--border); }

/* Short red rule that opens most headings. */
.rule {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--red);
  margin-bottom: 22px;
}

/* Red rule + tracked-out label, used above the home page h1. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.eyebrow__rule {
  display: block;
  width: 44px;
  height: 4px;
  background: var(--red);
  flex: none;
}

.eyebrow__label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--on-navy-dim);
}

/* Rotated square used as a list bullet throughout. */
.diamond {
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--red);
  transform: rotate(45deg);
  margin-top: 8px;
}

.diamond--navy { background: var(--navy-mid); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* =============================================================
   Buttons
   Replaces the .x1-.x10 and .x16 hover rules from the static pages.
   ============================================================= */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 15px 32px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.btn--sm { font-size: 18px; padding: 12px 24px; }

.btn--primary { background: var(--red); color: #FFFFFF; }
.btn--primary:hover,
.btn--primary:focus { background: var(--red-dark); color: #FFFFFF; }

.btn--dark { background: var(--navy); color: #FFFFFF; }
.btn--dark:hover,
.btn--dark:focus { background: var(--red); color: #FFFFFF; }

/*
 * The border sits outside the same padding the solid buttons use, so this button is
 * 4px larger in each axis. That is how the original design renders it.
 */
.btn--outline {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid var(--navy-soft);
}
.btn--outline:hover,
.btn--outline:focus { background: #FFFFFF; color: var(--navy); }

/* =============================================================
   Top bar
   ============================================================= */
.topbar {
  background: var(--navy);
  color: var(--on-navy-bar);
  font-size: 13px;
  letter-spacing: .06em;
}

.topbar__inner {
  padding-top: 9px;
  padding-bottom: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  justify-content: space-between;
}

.topbar__tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.topbar__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: center;
}

.topbar__phone { color: #FFFFFF; text-decoration: none; font-weight: 600; }
.topbar__email { color: var(--on-navy-bar); text-decoration: none; }
.topbar__divider { color: #3F5C7D; }
.topbar a:hover { color: var(--red); }

/* =============================================================
   Header and primary navigation
   ============================================================= */
.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
}

.site-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-header__logo img {
  height: 54px;
  width: auto;
  display: block;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 34px;
}

.site-nav__list {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-nav__list a {
  color: var(--navy);
  text-decoration: none;
  display: block;
}

.site-nav__list a:hover { color: var(--red); }

/*
 * The active-page underline. In the static pages this was a hand-placed <span> that
 * differed per file; WordPress adds the current-* classes for us.
 */
.site-nav__list .menu-item::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 5px;
  background: transparent;
}

.site-nav__list .current-menu-item::after,
.site-nav__list .current_page_item::after,
.site-nav__list .current-menu-ancestor::after,
.site-nav__list .current_page_parent::after {
  background: var(--red);
}

/* =============================================================
   Home: hero
   ============================================================= */
.hero { position: relative; overflow: hidden; }

.hero__inner {
  padding-top: 74px;
  padding-bottom: 78px;
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}

.hero__copy {
  flex: 1 1 460px;
  min-width: 320px;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(42px, 6.2vw, 66px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 26px;
}

.hero__lead {
  font-size: 19px;
  line-height: 1.72;
  color: var(--on-navy);
  margin: 0 0 34px;
  max-width: 36em;
}

.hero__media {
  flex: 0 1 520px;
  min-width: 300px;
  position: relative;
}

/* Red block peeking out behind the top-left corner of the photo. */
.hero__media::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -16px;
  width: 120px;
  height: 120px;
  background: var(--red);
  display: block;
}

.hero__media img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* =============================================================
   Home: supporting sections
   ============================================================= */
.statement__inner {
  max-width: 900px;
  padding-top: 52px;
  padding-bottom: 52px;
  text-align: center;
}

.statement__text {
  font-size: 23px;
  line-height: 1.6;
  color: var(--navy-mid);
  margin: 0;
  font-weight: 500;
}

.why__inner {
  padding-top: 82px;
  padding-bottom: 30px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 46px);
  line-height: 1.08;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 22px;
}

.why__inner .section-title { max-width: 16em; }

.section--navy .section-title,
.section--navymid .section-title { color: #FFFFFF; }

.lede {
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 12px;
  max-width: 46em;
}

.subheading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-mid);
  margin: 34px 0 20px;
}

/* Hairline grid: the 2px gap plus the container background makes the rules. */
.commitments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
}

.commitments__item {
  background: #FFFFFF;
  padding: 22px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.commitments__item .diamond { margin-top: 9px; }

.commitments__item span:last-child {
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--text);
}

.why__outro {
  padding-top: 0;
  padding-bottom: 82px;
}

.pull-quote {
  border-left: 5px solid var(--red);
  padding: 6px 0 6px 28px;
  margin-top: 38px;
}

.pull-quote p {
  font-family: var(--font-display);
  font-size: 29px;
  line-height: 1.32;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  max-width: 22em;
}

.journey__inner {
  padding-top: 78px;
  padding-bottom: 78px;
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
}

.journey__heading { flex: 1 1 420px; min-width: 300px; }

/* This heading is the last thing in its column, so it carries no trailing margin. */
.journey__heading .section-title { margin-bottom: 0; }

.journey__body {
  flex: 1 1 440px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.journey__body p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--on-navy);
  margin: 0;
}

/* Scoped under .journey__body so it outranks the paragraph rule above. */
.journey__body .journey__closing {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.35;
  font-weight: 600;
  color: #FFFFFF;
  margin: 8px 0 0;
}

/* Boxed call to action at the foot of the home page. */
.info-cta__inner {
  padding-top: 70px;
  padding-bottom: 86px;
}

.info-cta__box {
  border: 1px solid var(--border);
  border-top: 5px solid var(--red);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
}

.info-cta__title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 14px;
}

.info-cta__meta {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

.info-cta__meta a {
  color: var(--navy-mid);
  text-decoration: none;
  font-weight: 600;
}

.info-cta__meta a:hover { color: var(--red); }

/* =============================================================
   Interior page header band
   ============================================================= */
.page-hero__inner {
  padding-top: 66px;
  padding-bottom: 62px;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.8vw, 62px);
  line-height: 1.02;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.page-hero__subtitle {
  font-family: var(--font-display);
  font-size: clamp(23px, 3vw, 30px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--on-navy);
  margin: 0;
  max-width: 22em;
}

.page-hero__subtitle--narrow { max-width: 20em; }

/* =============================================================
   Services page
   ============================================================= */
.services-intro__inner {
  padding-top: 76px;
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
}

.services-intro__col {
  flex: 1 1 380px;
  min-width: 300px;
}

/* Right-hand "What You'll Learn" panel. */
.services-intro__col--panel {
  background: var(--surface);
  border-top: 5px solid var(--red);
  padding: 38px 36px;
}

.col-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 40px);
  line-height: 1.1;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 18px;
}

.services-intro__col > p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 26px;
}

.services-intro__col > p:last-child { margin-bottom: 0; }

.checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  font-size: 17.5px;
  line-height: 1.55;
}

.programs__inner {
  padding-top: 76px;
  padding-bottom: 90px;
}

.programs__divider {
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
}

/* =============================================================
   DriveScout product grid
   Markup comes from drivescout-shop-page/views/products.php, wrapped by that plugin in
   an element with id="drivescout-app".

   Two plugin generations are supported, because the card class names were renamed:

     0.2.8  (web-templates)          .card  .card-header  .card-body  .card-footer
     0.2.26 (live on production)     .ds_card  .ds_card-header  .ds_card-body  .ds_card-footer

   .product-name, .product-description, .price and .add-to-cart are unchanged across both.
   Both names are listed rather than matched with :is() so they stay greppable — the point
   of this block is that someone can find it by searching for the class they saw in devtools.

   Every product rule in the plugin's compiled bundle is scoped to that ID (e.g.
   "#drivescout-app .drivescout-products .ds_card"), so the rules below carry the same
   #drivescout-app prefix to match its specificity and win on load order — the theme
   stylesheet is enqueued at priority 50, after the plugin's. Dropping the prefix loses the
   cascade, which is how a plain-class version of this block ended up rendering the
   plugin's blue buttons and square corners.

   The plugin's Tailwind utilities on this markup (ds-grid-cols-4, ds-bg-blue-300, ds-p-4)
   are inert here because the theme has no Tailwind build, so layout is defined outright.
   ============================================================= */
#drivescout-app .drivescout-products {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

#drivescout-app .drivescout-products .ds_card,
#drivescout-app .drivescout-products .card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(11, 35, 64, .07);
}

/*
 * !important is genuinely unavoidable on the height: the plugin's view writes
 * style="height: 15px" inline on this element — still true in 0.2.26 — and an inline
 * declaration outranks every selector. The design calls for a 6px red bar.
 */
#drivescout-app .drivescout-products .ds_card-header,
#drivescout-app .drivescout-products .card-header {
  height: 6px !important;
  background: var(--red);
  display: block;
}

#drivescout-app .drivescout-products .ds_card-body,
#drivescout-app .drivescout-products .card-body {
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
}

#drivescout-app .drivescout-products .product-name {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}

#drivescout-app .drivescout-products .product-description {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--text-muted);
}

/* 0.2.26 echoes the product description as stored, so it can arrive as full markup. */
#drivescout-app .drivescout-products .product-description p {
  margin: 0 0 .8em;
}

#drivescout-app .drivescout-products .product-description p:last-child {
  margin-bottom: 0;
}

#drivescout-app .drivescout-products .price {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin: 0;
}

#drivescout-app .drivescout-products .ds_card-footer,
#drivescout-app .drivescout-products .card-footer {
  margin-top: auto;
  padding: 0 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#drivescout-app .add-to-cart {
  background: var(--navy-mid);
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 13px 20px;
  border-radius: var(--radius);
  box-shadow: none;
  display: block;
  transition: background-color .15s ease;
}

#drivescout-app .add-to-cart:hover,
#drivescout-app .add-to-cart:focus {
  background: var(--red);
  color: #FFFFFF;
}

/*
 * The add-to-cart confirmation is deliberately not styled here.
 *
 * 0.2.8 rendered it as .proceed-to-checkout-wrapper markup this theme used to restyle.
 * 0.2.26 replaced it with a Vue component (js/drivescout/AddedToCartModal.vue) built
 * entirely from ds- utility classes with no stable structural hooks, so there is nothing
 * to target that wouldn't mean pinning to compiled Vue scope attributes and breaking on
 * the plugin's next build. The plugin owns that component; the old rules were deleted
 * rather than left as dead code.
 */

[v-cloak] { display: none !important; }

/* =============================================================
   Contact page
   ============================================================= */
.contact__inner {
  padding-top: 74px;
  padding-bottom: 88px;
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  align-items: flex-start;
}

.contact__main {
  flex: 1 1 420px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact__intro {
  font-size: 18.5px;
  line-height: 1.78;
  color: var(--text-muted);
  margin: 0;
}

.contact__intro strong { color: var(--navy); }

.panel {
  border: 1px solid var(--border);
  border-top: 5px solid var(--red);
  border-radius: var(--radius);
  padding: 32px 34px 34px;
}

.panel__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 22px;
}

/* ---- Form ---- */
.form__fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.form__label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form__label-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-label);
}

.field {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: #FFFFFF;
  outline: none;
  width: 100%;
}

.field:focus { border: 1px solid var(--navy-mid); }

textarea.field {
  line-height: 1.6;
  resize: vertical;
}

.field--error { border-color: var(--red); }

.form__error {
  font-size: 15px;
  color: var(--red);
  margin: 0;
}

.form__submit { align-self: flex-start; }

/*
 * Spam honeypot: hidden from people, still present for bots. Clipped rather than pushed
 * to left:-9999px, so it contributes no geometry to the page at any viewport width.
 */
.form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Success panel shown after a successful submission. */
.form__notice {
  background: var(--surface);
  border-left: 5px solid var(--red);
  padding: 22px 24px;
}

.form__notice-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 6px;
}

.form__notice p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

.form__notice--error {
  border-left-color: var(--red);
  background: #FCF2F2;
}

/* ---- Contact person ---- */
.person {
  border-top: 1px solid var(--border);
  padding-top: 26px;
  margin-top: 6px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.person img {
  flex: none;
  width: 104px;
  height: auto;
  display: block;
  border-radius: 2px;
}

.label-eyebrow {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}

.person__name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 6px;
}

/* min-width:0 lets this flex child shrink; without it the email address forces overflow. */
.person > div { min-width: 0; }

.person a {
  font-size: 17px;
  color: var(--navy-mid);
  overflow-wrap: anywhere;
}

/* ---- Navy closing card ---- */
.contact-card {
  background: var(--navy);
  color: #FFFFFF;
  padding: 34px 34px 36px;
  border-radius: var(--radius);
  margin-top: 12px;
}

.contact-card p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--on-navy);
  margin: 0 0 20px;
}

.contact-card__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

.contact-card__tagline {
  font-size: 19px;
  font-style: italic;
  color: var(--on-navy-dim);
  margin-top: 4px;
}

/* ---- Sidebar ---- */
.contact-aside {
  flex: 1 1 400px;
  min-width: 300px;
  border: 1px solid var(--border);
  border-top: 5px solid var(--red);
  border-radius: var(--radius);
  overflow: hidden;
}

.contact-aside__head { padding: 30px 32px 26px; }

/* The wrapper supplies the spacing below this heading, so the heading itself has none. */
.contact-aside__head .panel__title { margin-bottom: 0; }

.contact-aside__block {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
}

.contact-aside__block--address {
  padding: 0 32px 24px;
  border-bottom: 1px solid var(--border);
}

.contact-aside__block--hours {
  padding: 24px 32px 32px;
  border-bottom: none;
}

.contact-aside__address {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 18px;
}

.contact-aside__map {
  display: block;
  text-decoration: none;
}

.contact-aside__map img {
  width: 100%;
  max-width: 446px;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 2px;
}

.contact-aside__phone {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  line-height: 1.1;
}

.contact-aside__phone:hover { color: var(--red); }

.hours { display: flex; flex-direction: column; }

.hours__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 17px;
}

.hours__row:last-child { border-bottom: none; }

.hours__day  { color: var(--text-muted); }
.hours__time { font-weight: 600; color: var(--navy); }

/* "Closed" reads as the exception. */
.hours__time--closed { color: var(--red); }

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.site-footer__inner {
  padding-top: 54px;
  padding-bottom: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: space-between;
}

.site-footer__brand { flex: 0 1 380px; }

.site-footer__brand img {
  height: 104px;
  width: auto;
  display: block;
}

.site-footer__col { flex: 0 1 300px; }

.site-footer__heading {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 17px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__links a {
  color: var(--navy-mid);
  text-decoration: none;
}

.site-footer__links a:hover { color: var(--red); }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.6;
}

.site-footer__contact a { color: var(--navy-mid); }
.site-footer__phone { text-decoration: none; font-weight: 600; }

.site-footer__bar {
  background: var(--navy);
  color: var(--on-navy-foot);
}

.site-footer__bar-inner {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 14px;
}

.site-footer__bar-tagline {
  font-family: var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 14px;
}

/* =============================================================
   Editor content (page.php, and the second-pass the_content() blocks)
   ============================================================= */
.prose {
  padding-top: 60px;
  padding-bottom: 80px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-muted);
}

.prose h2 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.1;
}

.prose h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
}

/* =============================================================
   Narrow screens
   The layouts above are flex-wrap based and reflow on their own; these rules only
   relieve the fixed horizontal padding and the widest single-line elements.
   ============================================================= */
/*
 * The header is a single non-wrapping row of logo + nav + call to action. In the
 * original static pages that row simply overflowed and side-scrolled the whole document
 * on a phone; here it wraps onto a second line instead.
 */
@media (max-width: 900px) {
  .site-header__inner { flex-wrap: wrap; gap: 16px; }

  .site-header__right {
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; }

  .site-header__logo img { height: 44px; }

  .site-header__right {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .site-nav__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    font-size: 17px;
  }

  .site-header__cta { width: 100%; }

  .hero__inner { padding-top: 48px; padding-bottom: 52px; }
  .why__inner { padding-top: 52px; }
  .why__outro { padding-bottom: 52px; }
  .journey__inner { padding-top: 52px; padding-bottom: 52px; gap: 36px; }
  .info-cta__inner { padding-top: 44px; padding-bottom: 56px; }
  .info-cta__box { padding: 28px; }
  .page-hero__inner { padding-top: 44px; padding-bottom: 42px; }
  .services-intro__inner { padding-top: 48px; gap: 40px; }
  .programs__inner { padding-top: 48px; padding-bottom: 56px; }
  .contact__inner { padding-top: 48px; padding-bottom: 56px; gap: 40px; }

  .panel { padding: 24px 22px 26px; }
  .services-intro__col--panel { padding: 28px 24px; }
  .contact-aside__head { padding: 24px 22px 20px; }
  .contact-aside__block,
  .contact-aside__block--hours { padding-left: 22px; padding-right: 22px; }
  .contact-aside__block--address { padding: 0 22px 20px; }
  .contact-card { padding: 26px 24px 28px; }

  .pull-quote p { font-size: 24px; }
  .contact-aside__phone { font-size: 28px; }
  .info-cta__title { font-size: 28px; }

  /* Full-width buttons read better than a wrapped row on a phone. */
  .btn-row .btn,
  .form__submit { width: 100%; white-space: normal; }
}

/*
 * Below the sticky header's useful range the header eats too much of a short viewport,
 * so let it scroll away.
 */
@media (max-width: 782px), (max-height: 480px) {
  .site-header { position: static; }
}

/* The WordPress admin bar offsets the sticky header. */
body.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}