/* ============================================================================
   FERGUSON JERSEY SHORE — brand layer
   Loaded after styles.css. Retunes the design-system tokens to the logo:
   aqua (#2BC4DE) and navy (#22355F) on white, with pale-aqua bands.

   Plus Jakarta Sans over Nunito Sans — soft and casual, no serif.
   Generous radii, whispered dividers.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Nunito+Sans:opsz,wght@6..12,300..700&display=swap');

:root {
  --color-bg: #FFFFFF;
  --color-surface: #F0F8FA;
  --color-sand: #F3F6F7;
  --color-text: #22355F;
  --color-accent: #2BC4DE;
  --color-accent-2: #2BC4DE;
  --color-divider: color-mix(in srgb, #22355F 10%, transparent);

  --color-accent-100: #F4FCFD;
  --color-accent-200: #E2F6FA;
  --color-accent-300: #C3ECF3;
  --color-accent-400: #7CD8E8;
  --color-accent-500: #2BC4DE;
  --color-accent-600: #17A6C0;
  --color-accent-700: #0F7F94;
  --color-accent-800: #0B5F6E;
  --color-accent-900: #08454F;

  --color-accent-2-100: #F4FCFD;
  --color-accent-2-200: #E2F6FA;
  --color-accent-2-300: #C3ECF3;
  --color-accent-2-400: #7CD8E8;
  --color-accent-2-500: #2BC4DE;
  --color-accent-2-600: #17A6C0;
  --color-accent-2-700: #0F7F94;
  --color-accent-2-800: #0B5F6E;
  --color-accent-2-900: #08454F;

  --color-neutral-100: #FBFCFC;
  --color-neutral-200: #F2F5F6;
  --color-neutral-300: #E4E9EB;
  --color-neutral-400: #CBD3D7;
  --color-neutral-500: #A7B2B8;
  --color-neutral-600: #838E95;
  --color-neutral-700: #656E74;
  --color-neutral-800: #464D51;
  --color-neutral-900: #2C3134;

  --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Nunito Sans", system-ui, -apple-system, sans-serif;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;

  --shadow-sm: 0 1px 2px rgba(34, 53, 95, 0.05);
  --shadow-md: 0 8px 26px rgba(34, 53, 95, 0.07);
  --shadow-lg: 0 22px 56px rgba(34, 53, 95, 0.09);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }

/* Nothing hard-edged: pills for actions, generous radii on photographs. */
a, button { border-radius: 999px; }
img { border-radius: var(--radius-md); }
header img, footer img, section > img, [data-nav-shell] img { border-radius: 0; }
input, select, textarea { border-radius: var(--radius-sm) !important; }
select { appearance: none; -webkit-appearance: none; }

:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 3px; }
::selection { background: var(--color-accent-300); }

/* Header — one row: logo, the four houses, then the actions.
   The tap-to-call button is for phones only; on desktop the number lives in
   the footer and on every page's call-to-action. */
[data-brand-logo] { height: 58px; }
[data-phone-btn] { display: none; }

/* One line, always: the bar never wraps, and the house links scroll
   sideways instead of pushing the actions onto a second row. */
[data-nav-shell] > div { flex-wrap: nowrap !important; }
[data-nav-shell] nav {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-nav-shell] nav::-webkit-scrollbar { display: none; }

@media (max-width: 900px) {
  [data-brand-logo] { height: 46px; }
  [data-phone-btn] { display: flex; }
}