/*
Theme Name: Herndon McFarland Plumbing
Theme URI: https://hmcplumbing.com
Author: LMH Agency
Author URI: https://lmh.agency
Description: Custom child theme for Herndon McFarland Plumbing
Version: 1.0.0
License: Proprietary
Template: lmh-parent
Text Domain: hmc-plumbing
*/

/* ==========================================================================
   CLIENT-SPECIFIC STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens (source: _build/theme.css @theme block, v3-client-review-fixes)
   -------------------------------------------------------------------------- */

:root {
    /* Brand colors */
    --color-navy:   #09417C; /* primary navy — hero bg, headings on light, dark sections */
    --color-navy2:  #152D78; /* deep navy — logo mark, topbar, header CTA fills */
    --color-red:    #F81B26; /* primary CTA red */
    --color-blue:   #0851EB; /* BBB pill, links, Atmos vendor wordmark */
    --color-gold:   #F9A000; /* eyebrows, accents, gold CTAs */
    --color-ink:    #232323; /* body text */
    --color-white:  #FFFFFF;
    --color-cream:  #F5F7FA; /* section tint background */
    --color-line:   #E3E8F0; /* hairlines, card borders */

    /* Typography */
    --font-sans:    'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Onest', -apple-system, sans-serif;

    /* Effects / rhythm */
    --shadow-card:  0 18px 36px rgba(9, 65, 124, 0.12);
    --spacing-gap:  64px;
}

/* --------------------------------------------------------------------------
   Self-hosted Onest webfont (no CDN — DEV-HANDOFF.md CSS architecture note)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('assets/fonts/onest-latin-200-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/onest-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/onest-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/onest-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('assets/fonts/onest-latin-800-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Onest';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('assets/fonts/onest-latin-900-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

/* The deploy source resets `* { margin: 0; padding: 0 }` globally so every
   block's spacing math (flex/grid `gap` values) is exact. The parent theme's
   legacy stylesheet re-adds `margin: 1em 0` to p/ul/ol/dl/menu/pre — same
   specificity as a universal `*` reset, so it would still win by source
   order. Target the same tag list here to neutralize it for real. */
p, ul, ol, dl, menu, pre {
    margin: 0;
    padding: 0;
}

/* The parent theme's dropped primer-stylesheet had a blanket
   `:focus{outline:0!important}` the whole site silently relied on — without
   it, clicking/tapping any link or button (the red CALL buttons especially)
   shows the browser's default blue focus ring/tap-highlight. Restore the
   effect properly instead of just copying that reset back: suppress the
   ring for mouse/touch clicks, but keep a real (branded) one for keyboard
   navigation, since removing focus indication entirely is an accessibility
   regression the old blanket reset was already guilty of. */
a, button, input, select, textarea, [tabindex] {
    -webkit-tap-highlight-color: transparent;
}
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 2px;
}

body {
    font-family: var(--font-sans);
    color:var(--color-ink) !important;
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    overflow-x: clip;
}

a {
    color: inherit;
    text-decoration: none;
}
/* Keeps link state colors neutral (no Bootstrap/browser blue or purple).
   Wrapped in :where() so this stays at plain `a` specificity (0,0,1).
   The old bare `a:hover, a:visited` form was 0,1,1 — it out-ranked every
   single-class button color (`.btn-red { color:#fff }` is 0,1,0), so any
   visited/focused button link inherited dark body text (the "button text
   should be white" review comments). Bootstrap 5.3 only swaps a CSS var on
   a:hover, so plain `a { color: inherit }` above already neutralizes it. */
a:where(:hover, :focus, :active, :visited) {
    color: inherit;
}

/* Nav links to in-page anchors (e.g. /services/#svc-drain-cleaning) need
   this so the sticky topbar+nav+marquee stack doesn't cover the target. */
[id] { scroll-margin-top: 170px; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1.04;
}

.wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Gold accent for a highlighted word or phrase inside a heading, e.g.
   "Plumbing, Testing & <span class="text-gold">Leak Detection</span>".
   Breaks up all-white / all-navy headings (Volley comments 48, 52). */
.text-gold { color: var(--color-gold) !important; }

.eyebrow {
    letter-spacing: 0.28em;
    color: var(--color-gold);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   Shared buttons (global — block-scoped variants live with their block CSS)
   -------------------------------------------------------------------------- */

.btn {
    font-family: var(--font-display);
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    border: none !important; /* parent theme: .btn{border:none!important;box-shadow:none!important} */
    box-shadow: none !important;
    border-radius: 999px;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
    display: inline-flex;
}

.btn svg { flex-shrink: 0; width: 18px; height: 18px; }

/* The --bs-btn-* variables that used to live here fed Bootstrap's .btn:hover
   rules (review comment 36). Bootstrap CSS was removed 2026-09-30, so the
   variant rules below are now the only source of button colors. */

.btn-red {
    background: var(--color-red);
    color: #fff;
    letter-spacing: 0.12em;
    padding: 15px 28px 13px;
    font-size: 13px;
    box-shadow: 0 12px 26px rgba(248, 27, 38, 0.42) !important;
}
.btn-red:hover, .btn-red:focus, .btn-red:active { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px rgba(248, 27, 38, 0.55) !important; }

.btn-gold {
    background: var(--color-gold);
    color: var(--color-ink);
    letter-spacing: 0.12em;
    padding: 16px 24px 14px;
    font-size: 13px;
    box-shadow: 0 12px 24px rgba(249, 160, 0, 0.5) !important;
}
.btn-gold:hover, .btn-gold:focus, .btn-gold:active { color: var(--color-ink); transform: translateY(-2px); box-shadow: 0 18px 32px rgba(249, 160, 0, 0.6) !important; }

.btn-navy {
    background: var(--color-navy2);
    color:#fff !important;
    letter-spacing: 0.12em;
    padding: 15px 28px 13px;
    font-size: 13px;
}
.btn-navy:hover, .btn-navy:focus, .btn-navy:active { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(21, 45, 120, 0.4) !important; }

.btn-ghost {
    color: #fff;
    letter-spacing: 0.14em;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    padding: 17px 26px;
    font-size: 14px;
}
.btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active { color:#fff !important; background: rgba(255, 255, 255, 0.14); }

.btn-stack {
    text-align: left;
    flex-direction: column;
    gap: 4px;
    line-height: 1;
    display: flex;
}
.btn-stack small { letter-spacing: 0.2em; opacity: 0.85; font-size: 12px; font-weight: 800; }
.btn-stack strong { font-family: var(--font-display); letter-spacing: 0.02em; font-size: 22px; font-weight: 800; }

.btn-line {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-weight: 800;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Shared section rhythm + heading block (used across home page blocks)
   -------------------------------------------------------------------------- */

.section { padding: 96px 0; }

.sec-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.sec-head h2 { color: var(--color-navy); margin: 14px 0 18px; font-size: 46px; line-height: 1.02; }
.sec-head p { color: var(--color-ink); font-size: 16px; font-weight: 400; line-height: 1.65; }
.section.dark .sec-head h2 { color: #fff; }
/* Centered follow-up CTA under a section's grid (e.g. "All Services" under Our Work). */
.sec-cta { display: flex; justify-content: center; margin-top: 44px; }

.section.dark .sec-head p { color: rgba(255, 255, 255, 0.78); }

@media (max-width: 860px) {
    .wrap { padding: 0 22px; }
    .section { padding: var(--spacing-gap) 0; }
    .sec-head h2 { font-size: 34px; }
}

/* Mobile: long button labels ("Join the Herndon McFarland Protection Club")
   wrap inside the pill instead of running off-screen (review comments 33/40). */
@media (max-width: 768px) {
    .btn { white-space: normal; text-align: center; line-height: 1.3; max-width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}