/* ── Cream palette — STAGING ONLY ────────────────────────────────────────────
   Loaded only when IS_PRODUCTION is false (see templates/header.php), so
   production keeps its original colours. This is deliberately an override layer
   rather than edits to index.css/responsive.css: the base stylesheets are
   untouched, which makes "production is unchanged" verifiable instead of a
   promise, and dropping the preview is one deleted <link>.

   To ship this to production later: fold these declarations into index.css
   (and the media-query block into responsive.css), then delete this file and
   its include. */

:root {
  --bg-color: #fbf7ee;
}

/* Page background. Sections that set their own colour still win; everything
   else — and every gap between sections — sits on the cream. */
body {
  background-color: var(--bg-color);
}

/* Scrollbar track, so the gutter matches the page. Thumb stays grey to remain
   visible against the cream. */
html {
  scrollbar-color: gray var(--bg-color);
}

/* Navbar. The tree-pattern background image is unaffected — this is the colour
   underneath it. */
header {
  background-color: var(--bg-color);
}

/* "Schedule a Tour" in the intro section, in the cream. The base rule gives it a
   white fill with a teal border (`.welcome-tour`, the page's secondary action),
   and a white button on a cream page reads as the one thing that missed the
   repaint. The border and label stay exactly as they were; only the fill moves
   into the palette.
   Same four-class specificity as the base rule, which is written that deep to
   beat `.welcome-left-top a` — this file loads later, so equal weight wins. */
.welcome .welcome-left .welcome-left-top .welcome-tour {
  background: var(--bg-color);
}

.welcome .welcome-left .welcome-left-top .welcome-tour:hover {
  /* Was a pale mint (#f2fbfa), the one cool tone in the interaction. A shade
     below the page, the same step the form fields take. */
  background: #f3ece0;
}

/* Hero banners: the generic one plus the per-community variants. The colour
   only shows where the hero image doesn't cover. */
.banner,
.Cartersville,
.Rapha,
.Westside,
.ForestCity {
  background-color: var(--bg-color);
}

/* Services: `.service` is the home-page section (was pale mint), `.services` is
   the Services page section. `.team` is the Our Team grid, which shares the
   pale-mint band treatment. */
.service,
.services,
.team {
  background-color: var(--bg-color);
}

.team-card:hover,
.team-card:focus-visible {
  border-color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(61, 47, 22, 0.06),
    0 24px 44px -20px rgba(0, 138, 128, 0.38);
}

.contact {
  background-color: var(--bg-color);
}

/* ── Locations mega-dropdown ──
   The states rail and the card container both go cream; the cards sit on top. */
.mega-states,
.mega-panels {
  background-color: var(--bg-color);
}

/* Cards are cream too, so they can't rely on a fill to separate them from the
   container — the border does that work and needs to be a tone that actually
   reads against cream (the base #eceef0 is a cool grey that all but vanishes).
   A soft shadow lifts them off the surface. */
.mega-card {
  background-color: var(--bg-color);
  border-color: #ddd2ba;
  box-shadow: 0 1px 2px rgba(61, 47, 22, 0.05), 0 6px 14px -8px rgba(61, 47, 22, 0.22);
  transition: border-color 0.15s ease, background-color 0.15s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
}

/* Clear, tactile hover: the card lifts and the shadow deepens. The surface uses
   the menu's shared --mega-hover tint, the same one the state rail uses, rather
   than a cream-specific shade. */
.mega-card:hover {
  background-color: var(--mega-hover);
  border-color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(61, 47, 22, 0.06), 0 14px 26px -10px rgba(0, 138, 128, 0.35);
  transform: translateY(-2px);
}

/* The community you're currently viewing: brand-tinted and clearly ringed, held
   above the hover treatment. */
.mega-card.selected {
  background-color: rgba(0, 181, 161, 0.1);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color) inset,
    0 6px 14px -8px rgba(0, 138, 128, 0.3);
}

/* Placeholder behind a community photo while it loads. */
.locate-result-img {
  background-color: var(--bg-color);
}

/* ── Cards on the cream page ──
   Cream, not white. A white card on cream reads as a hole cut in the page
   rather than as a card sitting on it: the two are close enough in value that
   the difference looks like a mistake, and far enough apart to be obvious. Same
   answer as `.mega-card` above -- the card takes the page colour and the border
   does the separating, with a warm shadow to lift it.

   The border has to be a tone that actually reads against cream. The base
   stylesheets use `rgba(10, 22, 40, 0.08)`, a cool grey that all but vanishes
   here.

   Production is untouched: there the services band is pale mint and the cards
   are white against it, which is the contrast this palette doesn't have. */
/* One raised-surface recipe for every card on the cream: the services grid, the
   contact form and the Vital Connect stats.

   All three were flat before, in the same way and for the same reason. Taking
   the page colour exactly (`var(--bg-color)`) left them with no value of their
   own, and the only shadow was a 30px blur pulled back 22px, which puts almost
   nothing on the page. A card with no value difference and no visible shadow is
   an outline, and outlines read as 2D.

   What lifts them now: a surface one shade BELOW the page (#f7f1e5 against the
   page's #fbf7ee), a warm hairline deep enough to read against that surface,
   and three shadow layers doing three jobs -- a tight contact shadow to seat the
   card, a wide soft one for the lift, and a white inset along the top edge that
   catches the light. The inset is what most reads as "raised" rather than
   "drawn".

   Below the page, not above it. A shade above (#fffdf9) is the conventional
   direction for a raised surface, since light comes from above, but on a warm
   background it just reads as white -- and a white slab on cream is the thing
   this palette exists to avoid. A step down stays in the cream family and gives
   the card weight; the shadow and the top highlight do the lifting. */
.service-card,
.team-card,
.vc-stat,
.community-card {
  background-color: #f7f1e5;
  border-color: #e6dbc6;
  box-shadow: 0 1px 2px rgba(61, 47, 22, 0.05),
    0 18px 34px -22px rgba(61, 47, 22, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


/* The contact form is a large surface rather than a small card, and it needs the
   opposite treatment. At one shade below the page (#f7f1e5, what the cards use)
   the panel filled half the screen with beige and read as a slab; the fields,
   being the lightest thing on it, then read as white however warm their actual
   value was. Measured, they were #fbf7ee -- the page colour, not white at all --
   which is exactly the problem with putting a field above its own surface: at
   this little contrast the eye calls the lighter tone white.

   So it inverts. The panel takes the page colour and is defined by its shadow
   and hairline, which is all a form of this size needs, and the fields sit one
   shade BELOW it. Sunken fields on a warm panel: nothing in the form is white,
   and the wells are obvious as places to type. */
.contact form {
  background-color: var(--bg-color);
  border-color: #e6dbc6;
}

.contact form .inputs-wrapper .inputs .input input,
.contact form .inputs-wrapper .inputs .input select,
.contact form textarea {
  background-color: #f3ece0;
  border-color: #ded2bb;
}

/* The phone's panel takes the page colour and nothing else. It carries no
   border and no shadow in index.css now, so there is nothing here to warm up:
   the drawing sits on the cream directly and the panel is pure layout. This
   rule is what keeps it from falling back to the white the base rule sets,
   which on cream would read as a slab. (`.vc-results` needs no entry: the
   results row has no surface of its own at all.) */
.vc-panel {
  background-color: var(--bg-color);
}

.service-card:hover,
.service-card:focus-visible {
  border-color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(61, 47, 22, 0.06),
    0 24px 44px -20px rgba(0, 138, 128, 0.38);
}

/* The secondary action inside a community card, and the third attempt at it.
   index.css gives it a white fill and a cool grey border, which on a cream card
   is the lightest thing in the card and reads as the primary button rather than
   the quiet one beside it.

   The two obvious corrections both failed. The page colour, one shade ABOVE the
   card, still read as a white button, just a dimmer one. A fill one shade BELOW
   the card, the way the contact form recesses its fields, read as faded and
   flat: a field is meant to look recessed, a button is not.

   So it stops being defined by its fill at all and becomes an outline button,
   which is what the site's other secondary actions are (`.welcome-tour`, and
   the ghost button on the services page). A solid teal hairline and a teal label
   read as a button at a glance, and the faint teal wash inside keeps it from
   looking like a hole in the card. It pairs with the filled "Learn More" beside
   it by hue rather than by weight. */
.community-map-link {
  background: rgba(0, 181, 161, 0.12);
  border-color: var(--primary-color);
  color: #00736b;
}

.community-map-link:hover {
  border-color: #008a80;
  background-color: rgba(0, 181, 161, 0.22);
  color: #005f59;
}

/* The hairline above that pair of buttons, and the one under the card's badges:
   both are cool greys that vanish against the warm surface. */
.community-card-actions {
  border-top-color: #e6dbc6;
}

/* The community cards lift on hover with a shadow of their own in index.css
   (`0 18px 38px -16px rgba(0, 0, 0, 0.28)`), a neutral black that goes grey and
   flat over cream. Warmed, and given the same teal cast as the cards above, so
   a card being pointed at reads the same way on both pages. */
.community-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(61, 47, 22, 0.06),
    0 24px 44px -20px rgba(0, 138, 128, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ── Book An Appointment (templates/appointment-section.php) ──────────────
   The panel is a large surface rather than a small card, so it takes the same
   treatment as the contact form above rather than the card recipe: the surface
   is the page colour, defined by its hairline and shadow, and the fields sit
   one shade BELOW it. Nothing in the form is white, and the wells are obvious
   as places to type. The teal half needs nothing -- it is teal on both
   palettes. */
.appt__inner {
  border-color: #e6dbc6;
  background-color: var(--bg-color);
}

.appt-form input,
.appt-form select,
.appt-form textarea {
  background-color: #f3ece0;
  border-color: #ded2bb;
}

/* The service chips are the one control here that is not a field, so they read
   as raised rather than sunken: the page colour with a warm border, and the
   teal fill of a ticked one is unchanged. */
.appt-chip {
  background-color: var(--bg-color);
  border-color: #ded2bb;
}

/* Placeholder behind a service photo while it loads, and the strip that shows
   around one that doesn't fill its box. Cool mint against cream, so it goes
   warm too. */
.service-card__media,
.svc-detail__media {
  background-color: #ece2d2;
}


/* ── Services page (service.php) ───────────────────────────────────────────
   Three cool tones to warm up. The cards and the photo placeholders are handled
   by the shared rules above; what is left is the panel behind each community
   row, the hairlines between sections, and the icon plate on the photograph. */

/* The community pills and the who-offers-what table. Both take white in
   index.css, which is the slab this palette exists to avoid, so both drop to
   the cream: the pills to the page colour, the table to one shade below it so
   the panel reads as a surface and its sticky first column reads as part of it.
   The two teal washes in the table head go warm for the same reason the mint
   panel did. */
.svc-pill {
  background-color: var(--bg-color);
  border-color: #e6dbc6;
}

.svc-matrix__scroll {
  border-color: #e6dbc6;
  background-color: #f7f1e5;
}

.svc-table th[scope="row"] {
  background-color: #f7f1e5;
}

.svc-table thead th {
  background-color: #f1e7d5;
}

.svc-table thead th:first-child {
  background-color: #ede1cb;
}

/* Warm hairlines: the base `rgba(10, 22, 40, 0.09)` is a cool grey that all but
   vanishes against cream. This is the one custom property the page's rules all
   read for their borders, so setting it here covers the section dividers, the
   chips and the scope note. */
.svc-page {
  --svc-line: rgba(61, 47, 22, 0.14);
}

/* The plate under a service's icon. White on cream is the slab this palette
   exists to avoid, so it takes the page colour and keeps its shadow. */
.svc-detail__icon {
  background-color: rgba(251, 247, 238, 0.94);
}

/* "Schedule A Tour" in the closing teal band, and the white-on-teal buttons
   generally: the fill goes to the page cream rather than pure white, which is
   the same move the intro's tour button makes. */
.svc-btn--light {
  background-color: var(--bg-color);
}

/* The phone drawing inside `.vc-panel` is deliberately left white: it is a
   picture of a screen, and a screen is not cream. */

/* Mobile: the drop-down nav panel matches the navbar, so the open menu reads as
   an extension of it. Breakpoint mirrors the one in responsive.css. */
@media only screen and (max-width: 1200px) {
  header nav {
    background-color: var(--bg-color);
  }
}