/* ── 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 {
  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);
}

/* 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 {
  background-color: #ece2d2;
}

/* 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);
  }
}