/*-- -------------------------- -->
<---      2026 Facelift         -->
<--- -------------------------- -*/
/* Loaded after every other stylesheet: modernises the palette,
   typography, buttons and cards without touching template layout. */

/* Outfit (variable, 600–700) — headings + display text */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-v15-latin-600-700.woff2') format('woff2');
}

@media only screen and (min-width: 0rem) {
  :root {
    /* deep confident green replaces the pale mint */
    --primary: #15803d;
    --primaryShade: #dcfce7;
    --primaryDark: #14532d;
    --accent: #f59e0b;
    --bodyTextColor: #475569;
    --headerColor: #0f172a;
    --borderColor: #e2e8f0;
    --cardRadius: 0.75rem;
  }

  h1, h2, h3, h4,
  .cs-title {
    font-family: 'Outfit', 'Roboto', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .cs-topper {
    font-weight: 700;
    letter-spacing: 0.14em;
  }

  /* ---------- Buttons: solid green, white text, rounded ---------- */
  .button-solid,
  #hero .cs-button-solid,
  #cs-contact .cs-button-solid,
  #quote .cs-button-solid {
    color: #fff;
    background-color: var(--primary);
    border-radius: 0.5rem;
    overflow: hidden;
  }
  .button-solid:before,
  #hero .cs-button-solid:before,
  #cs-contact .cs-button-solid:before,
  #quote .cs-button-solid:before {
    background: var(--primaryDark);
    background-color: var(--primaryDark);
  }
  .button-solid:hover,
  #hero .cs-button-solid:hover,
  #cs-contact .cs-button-solid:hover {
    color: #fff;
  }
  #hero .cs-button-transparent {
    border-radius: 0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.85);
  }

  /* ---------- Hero ---------- */
  #hero .cs-topper {
    color: #86efac;
  }

  /* ---------- Floating services strip ---------- */
  .services {
    border-radius: var(--cardRadius);
    border-top: 0.375em solid var(--primary);
    /* the template's -10.4em margin overlapped the hero; the quote form now
       sits between them, so the pull-up would cover the form's button */
    margin-top: 0;
  }
  .services .card picture {
    background: var(--primaryShade);
    border-radius: 50%;
  }
  .services .card picture img {
    /* icons are white line-art SVGs — dark green via filter so they
       read on the new light circle */
    filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(747%) hue-rotate(112deg) brightness(92%) contrast(101%);
  }

  /* ---------- Suburb / area cards (classes replace old inline styles) ---------- */
  #suburbs {
    padding: var(--sectionPadding);
    background: #f8fafc;
  }
  #suburbs .cs-topper,
  #suburbs .cs-title {
    display: block;
    text-align: center;
  }
  #suburbs .cs-title {
    margin: 0 auto 1rem;
  }
  #suburbs .suburb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
    gap: 1rem;
    text-align: center;
  }
  .suburb-card {
    display: block;
    padding: 1.25rem 1rem;
    background: #fff;
    border: 1px solid var(--borderColor);
    border-radius: var(--cardRadius);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  }
  .suburb-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  }
  .suburb-card strong {
    font-family: 'Outfit', 'Roboto', Arial, sans-serif;
    color: var(--headerColor);
  }
  .suburb-card small {
    color: var(--bodyTextColor);
  }

  /* ---------- Reviews: drop grey placeholder avatars, card polish ---------- */
  #reviews .cs-item-img {
    display: none;
  }
  #reviews .cs-item {
    border: 1px solid var(--borderColor);
    border-radius: var(--cardRadius);
    padding-top: clamp(2rem, 5vw, 2.5rem);
  }

  /* ---------- Forms ---------- */
  #quote .quote-form,
  .form-success {
    border-radius: var(--cardRadius);
  }
  #quote .quote-form .cs-button-solid {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 3.5rem;
    min-height: 3.5rem;
    padding: 0 1.875rem;
    margin-top: 0.5rem;
    transition: background-color 0.3s;
  }
  #quote .quote-form .cs-button-solid:hover {
    background-color: var(--primaryDark);
  }
  #quote .quote-form input:focus-visible,
  #quote .quote-form select:focus-visible,
  #quote .quote-form textarea:focus-visible,
  #cs-contact #cs-form input:focus-visible,
  #cs-contact #cs-form select:focus-visible,
  #cs-contact #cs-form textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
  }

  /* ---------- Dark mode fixes for the new palette ---------- */
  body.dark-mode .cs-topper {
    /* !important: section rules like #reviews .cs-topper outspecify this */
    color: #6ee7b7 !important;
  }
  body.dark-mode #quote .cs-text a,
  body.dark-mode #quote .form-success a {
    color: #6ee7b7;
  }
  body.dark-mode .suburb-card,
  body.dark-mode #suburbs {
    background: rgba(255, 255, 255, 0.05);
  }
  body.dark-mode #suburbs {
    background: transparent;
  }
  body.dark-mode .suburb-card {
    border-color: rgba(255, 255, 255, 0.12);
  }
  body.dark-mode .suburb-card strong {
    color: #fafbfc;
  }
  body.dark-mode .suburb-card small {
    color: rgba(250, 251, 252, 0.75);
  }
  body.dark-mode #reviews .cs-item {
    border-color: rgba(255, 255, 255, 0.12);
  }
}