/* ============================================================
   Careway public site — header and footer chrome

   Component-scoped on purpose: this file styles the site navigation and
   footer only, and defines no element selectors or body rules, so it can be
   loaded alongside the Tailwind pages without restyling them. Requires
   fonts.css and tokens.css.
   ============================================================ */


/* The header and footer are embedded in pages whose own stylesheets set a
   different body font (the marketing home page inherits Arial from its
   exported CSS). Declaring the family on every descendant keeps the chrome in
   the brand face wherever it is used, instead of inheriting the host page's. */
.cw-site-header,
.cw-site-header *,
.cw-site-footer,
.cw-site-footer * {
  font-family: var(--font-sans);
}

.cw-site-header *,
.cw-site-header *::before,
.cw-site-header *::after,
.cw-site-footer *,
.cw-site-footer *::before,
.cw-site-footer *::after,
.cw-site-header,
.cw-site-footer { box-sizing: border-box; }

/* Container shared by the header, the footer, and every page section. It
   lives here rather than in site.css because the Tailwind templates load only
   this file for the navigation chrome. */
/* One committed content width. Every section aligns to these edges. */
.cw-site-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--space-5);
}

.cw-site-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cw-care-green);
  color: var(--cw-calm-green);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--r-md) 0;
  z-index: 200;
  font-weight: 600;
}
.cw-site-skip:focus { left: 0; }

/* ============================================================
   Header
   ============================================================ */

.cw-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cw-pure-white);
  border-bottom: 1px solid var(--line-1);
  box-shadow: 0 1px 0 rgba(51, 72, 44, 0.03), 0 8px 24px -18px rgba(19, 22, 18, 0.18);
}

.cw-site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 74px;
  padding-block: var(--space-3);
}

.cw-site-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.cw-site-header__brand img { height: 34px; width: auto; display: block; }

.cw-site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.cw-site-nav__item { position: relative; }

.cw-site-nav__link,
.cw-site-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 10px 14px;
  border: 0;
  background: none;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg-1);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.cw-site-nav__link:hover,
.cw-site-nav__trigger:hover,
.cw-site-nav__trigger[aria-expanded="true"] {
  background: var(--cw-calm-green);
  color: var(--cw-care-green);
}

.cw-site-nav__chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) var(--ease-soft);
}
.cw-site-nav__trigger[aria-expanded="true"] .cw-site-nav__chevron { transform: rotate(180deg); }

/* Dropdown panel */
.cw-site-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 320px;
  padding: var(--space-5);
  background: var(--cw-pure-white);
  border: 1px solid var(--line-1);
  border-radius: 18px;
  box-shadow: var(--shadow-3);
  display: none;
}
.cw-site-menu[data-open="true"] {
  display: block;
  animation: cwMenuIn var(--dur-fast) var(--ease-soft);
}
@keyframes cwMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cw-site-menu--wide {
  min-width: 620px;
  columns: 2;
  column-gap: var(--space-5);
}
.cw-site-menu--right { left: auto; right: 0; }

.cw-site-menu__link {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 16px;
  color: var(--fg-2);
  text-decoration: none;
  break-inside: avoid;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              padding-left var(--dur-fast) var(--ease-soft);
}
.cw-site-menu__link:hover {
  background: var(--cw-calm-green);
  color: var(--cw-care-green);
  padding-left: 18px;
}

.cw-site-menu__heading {
  padding: 9px 12px 4px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
  break-inside: avoid;
}

.cw-site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  margin-left: var(--space-4);
}

.cw-site-header__phone {
  font-size: 16px;
  font-weight: 600;
  color: var(--cw-care-green);
  text-decoration: none;
  white-space: nowrap;
}
.cw-site-header__phone:hover { text-decoration: underline; }

.cw-site-header__signin {
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
}
.cw-site-header__signin:hover { color: var(--fg-1); }

/* On the full-width bar, Sign in sits in its own zone behind a hairline
   divider instead of crowding the phone number. */
@media (min-width: 1201px) {
  .cw-site-header__actions { gap: var(--space-4); }
  .cw-site-header--solid .cw-site-header__signin {
    border-left: 1px solid var(--line-2);
    padding: 4px 0 4px var(--space-5);
    margin-left: var(--space-2);
  }
}

/* Buttons */
.cw-site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--cw-care-green);
  color: var(--cw-calm-green);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: var(--tracking-button);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}
.cw-site-btn {
  box-shadow: var(--shadow-cta);
}
.cw-site-btn:hover {
  background: var(--cw-care-green-hover);
  transform: translateY(-1px);
}
.cw-site-btn:active { transform: translateY(0); }

.cw-site-btn--sm { padding: 11px 22px; font-size: 16px; }

.cw-site-btn--outline {
  background: transparent;
  color: var(--cw-care-green);
  border-color: rgba(51, 72, 44, 0.35);
  box-shadow: none;
}
.cw-site-btn--outline:hover {
  background: rgba(51, 72, 44, 0.06);
  border-color: var(--cw-care-green);
  box-shadow: none;
}

.cw-site-btn--ondark {
  background: var(--cw-calm-green);
  color: var(--cw-care-green);
}
.cw-site-btn--ondark:hover { background: var(--cw-accent-green); }

/* Mobile menu */
.cw-site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cw-care-green);
  cursor: pointer;
}
.cw-site-header__toggle:hover { background: var(--cw-calm-green); }

.cw-site-mobile {
  display: none;
  border-top: 1px solid var(--line-1);
  background: var(--cw-pure-white);
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  padding-block: var(--space-4) var(--space-6);
}
.cw-site-mobile[data-open="true"] { display: block; }

.cw-site-mobile__group + .cw-site-mobile__group {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-1);
}
.cw-site-mobile__heading {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
  margin-bottom: var(--space-2);
}
.cw-site-mobile__link {
  display: block;
  padding: 11px 0;
  font-size: 17px;
  color: var(--fg-1);
  text-decoration: none;
}
.cw-site-mobile__link:hover { color: var(--cw-care-green); }
.cw-site-mobile__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-1);
}
.cw-site-mobile__actions .cw-site-btn { width: 100%; }
.cw-site-mobile__group:first-of-type { margin-top: 0; }

@media (max-width: 1200px) {
  .cw-site-nav { display: none; }
  .cw-site-header__phone { display: none; }
  .cw-site-header__toggle { display: inline-flex; }
  .cw-site-header__inner { gap: var(--space-3); }
  .cw-site-header__actions { margin-left: auto; gap: var(--space-2); }
  .cw-site-header__signin {
    padding: 10px 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
  }
  .cw-site-header--overlay .cw-site-header__signin { border-color: var(--cw-accent-green); }
}
@media (max-width: 520px) {
  .cw-site-header__inner { gap: var(--space-2); }
  .cw-site-header__brand img { height: 26px; }
  .cw-site-btn--sm { padding: 9px 13px; font-size: 14px; }
  .cw-site-header__signin { padding: 9px 13px; font-size: 14px; }
  .cw-site-header__actions { gap: 6px; margin-left: auto; }
  .cw-site-header__toggle { width: 42px; height: 42px; flex-shrink: 0; }
  .cw-site-wrap { padding-inline: var(--space-4); }
}

/* ============================================================
   Footer
   ============================================================ */

.cw-site-footer {
  background: var(--cw-care-green);
  color: var(--fg-on-dark);
  padding-block: var(--space-8) var(--space-6);
  margin-top: var(--space-9);
}
.cw-site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
.cw-site-footer__brand img { height: 30px; width: auto; }
.cw-site-footer__blurb {
  margin-top: var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--fg-on-dark-2);
  max-width: 34ch;
}
.cw-site-footer__contact {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-2);
}
.cw-site-footer__contact a {
  color: var(--fg-on-dark);
  font-weight: 600;
  text-decoration: none;
}
.cw-site-footer__contact a:hover { text-decoration: underline; }

.cw-site-footer__heading {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--cw-accent-green);
  margin-bottom: var(--space-4);
}
.cw-site-footer__link {
  display: block;
  padding-block: 6px;
  font-size: var(--fs-body-sm);
  color: var(--fg-on-dark-2);
  text-decoration: none;
}
.cw-site-footer__link:hover { color: var(--fg-on-dark); }

.cw-site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-caption);
  color: rgba(242, 244, 239, 0.6);
}
.cw-site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.cw-site-footer__legal a { color: rgba(242, 244, 239, 0.6); text-decoration: none; }
.cw-site-footer__legal a:hover { color: var(--fg-on-dark); }

.cw-site-footer__disclaimer {
  margin-top: var(--space-5);
  font-size: var(--fs-caption);
  color: rgba(242, 244, 239, 0.55);
  max-width: 90ch;
}

@media (max-width: 1000px) {
  .cw-site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cw-site-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

/* ============================================================
   Motion preferences
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Overlay header

   Sits transparently over a full-bleed hero image, in cream on dark, and the
   page content starts underneath it rather than below it. Used on the home
   page, whose hero is a photograph.
   ============================================================ */

.cw-site-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 0;
}

.cw-site-header--overlay .cw-site-wrap { max-width: 1320px; }

.cw-site-header--overlay .cw-site-header__inner { min-height: 92px; }

.cw-site-header--overlay .cw-site-nav__link,
.cw-site-header--overlay .cw-site-nav__trigger {
  color: var(--cw-calm-green);
  font-size: 17px;
}
.cw-site-header--overlay .cw-site-nav__link:hover,
.cw-site-header--overlay .cw-site-nav__trigger:hover,
.cw-site-header--overlay .cw-site-nav__trigger[aria-expanded="true"] {
  background: rgba(242, 244, 239, 0.14);
  color: var(--cw-pure-white);
}

.cw-site-header--overlay .cw-site-header__phone { color: var(--cw-calm-green); }
.cw-site-header--overlay .cw-site-header__signin { color: rgba(242, 244, 239, 0.86); }
.cw-site-header--overlay .cw-site-header__signin:hover { color: var(--cw-pure-white); }

/* The primary action reads as pale chartreuse on the photograph, matching the
   hero's own buttons. */
.cw-site-header--overlay .cw-site-btn {
  background: var(--cw-accent-green);
  color: var(--cw-care-green);
  box-shadow: none;
  font-weight: 700;
  border-radius: 10px;
  padding: 13px 26px;
}
.cw-site-header--overlay .cw-site-btn:hover {
  background: var(--cw-pure-white);
  color: var(--cw-care-green);
}

.cw-site-header--overlay .cw-site-header__toggle {
  border-color: rgba(242, 244, 239, 0.5);
  color: var(--cw-calm-green);
}
.cw-site-header--overlay .cw-site-header__toggle:hover {
  background: rgba(242, 244, 239, 0.14);
}

/* Menus and the mobile panel stay light so their contents remain legible. */
.cw-site-header--overlay .cw-site-mobile {
  background: var(--cw-pure-white);
  border-top: 1px solid var(--line-1);
}

/* A group heading in a two-column menu starts its own column, so its items
   stay with it instead of splitting across the fold. */
.cw-site-menu__heading--break { break-before: column; }

/* Sign-in reads as a bordered pill on the overlay header, matching the
   hero's own secondary button. */
.cw-site-header--overlay .cw-site-header__signin {
  padding: 13px 26px;
  border: 1px solid var(--cw-accent-green);
  border-radius: 10px;
  color: var(--cw-accent-green);
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.cw-site-header--overlay .cw-site-header__signin:hover {
  background: var(--cw-accent-green);
  color: var(--cw-care-green);
}