/*
Theme Name: Clog Busters
Theme URI: https://clogbusters.co/
Author: LMH Agency
Author URI: https://lmh.agency
Description: Custom child theme for Client Name
Version: 2.0.0
License: Proprietary
Template: lmh-parent
Text Domain: client-name
*/

/* ==========================================================================
   CLIENT-SPECIFIC STYLES — 2026 redesign
   ========================================================================== */

/* --------------------------------------------------------------------------
   Metric-matched font fallbacks (web-font layout shift, 2026-10-13)
   --------------------------------------------------------------------------
   Until Anton and Work Sans load (display=swap), text paints in a local
   fallback. These faces resize each fallback to the web font's average
   character width and vertical metrics, so headings wrap the same and the
   buttons below them do not move when the web font swaps in.

   Values come from the real font files with Capsize (@capsizecss/unpack +
   createFontStack: size-adjust = xWidthAvg ratio, ascent/descent from hhea).
   One family per local font, because a face whose local() font is missing is
   skipped and the browser moves on to the next family in the stack:
   Impact (Windows, Mac), Arial or its metric clone Liberation Sans (Windows,
   Mac, Linux), Roboto (Android). Keep the copy in WP Rocket > Fallback
   critical CSS in sync with this block. */

@font-face {
    font-family: "Anton Fallback";
    src: local("Impact");
    size-adjust: 99.1617%;
    ascent-override: 118.6214%;
    descent-override: 33.1884%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Anton Fallback Arial";
    src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
    size-adjust: 90.69%;
    ascent-override: 129.7022%;
    descent-override: 36.2886%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Anton Fallback Roboto";
    src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular");
    size-adjust: 90.8891%;
    ascent-override: 129.4181%;
    descent-override: 36.2091%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Work Sans Fallback";
    src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
    font-weight: 100 549;
    size-adjust: 111.9334%;
    ascent-override: 83.0851%;
    descent-override: 21.7093%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Work Sans Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
    font-weight: 550 900;
    size-adjust: 104.5876%;
    ascent-override: 88.9207%;
    descent-override: 23.2341%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Work Sans Fallback Roboto";
    src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular");
    font-weight: 100 549;
    size-adjust: 112.1791%;
    ascent-override: 82.9031%;
    descent-override: 21.6618%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Work Sans Fallback Roboto";
    src: local("Roboto Bold"), local("Roboto-Bold");
    font-weight: 550 900;
    size-adjust: 111.0255%;
    ascent-override: 83.7646%;
    descent-override: 21.8869%;
    line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   Design tokens (from ~/Downloads/ClogBusters Redesign/*.svg)
   -------------------------------------------------------------------------- */

:root {
    /* Core palette */
    --color-navy: #151747;         /* primary dark surface — header, dark sections, cards */
    --color-navy-deep: #04134B;    /* deeper navy — CTA / branch strip / emergency sections */
    --color-navy-raised: #1B2A6B;  /* raised card / button fill on dark */
    --color-navy-border: #3A4A8F;  /* card borders + dividers on dark */
    --color-ink: #0B1230;          /* text on lime, darkest text */
    --color-lime: #9BF921;         /* brand lime — CTAs, highlights, text on dark */
    --color-lime-dark: #3F7200;    /* kicker / icon green on light surfaces */
    --color-lime-pale: #F2FEE0;    /* pale lime — rating badge, quote panels */
    --color-lavender: #B4B9D2;     /* body copy on dark */
    --color-slate: #4A4F6E;        /* body copy on light */
    --color-slate-soft: #7D7D7D;   /* fine print on light */
    --color-slate-muted: #8A8FA8;
    --color-fine-print: #6B6B6B;   /* grey fine print — 5.3:1 on white (AA) */  /* counts / "or" separators on light */
    --color-placeholder: #7A7F9A;  /* input placeholder on light */
    --color-scrim: rgba(11, 18, 48, 0.6);           /* modal / sheet backdrop */
    --shadow-lift: 0 20px 48px -10px rgba(5, 18, 74, 0.2);  /* dropdown panels */
    --shadow-modal: 0 24px 64px -12px rgba(5, 18, 74, 0.35);
    --shadow-sheet: 0 -8px 32px 0 rgba(5, 18, 74, 0.25);
    --color-surface: #F9FBFF;      /* off-white section background */
    --color-surface-alt: #EEF1FA;  /* cool gray section background (FAQ) */
    --color-hairline: #E4E8F2;     /* borders + dividers on light */
    --color-red: #E54854;          /* emergency tag, rating stars, accent underline */
    --color-white: #ffffff;

    /* Legacy aliases — older templates still reference these names */
    --color-primary: var(--color-navy-deep);
    --color-primary-light: var(--color-navy-raised);
    --color-accent: var(--color-lime);
    --color-accent-dark: var(--color-lime-dark);
    --color-secondary: #005F85;
    --color-red-soft: #E64954;
    --color-text-muted: var(--color-lavender);
    --color-text-article: var(--color-slate);
    --color-text-dark: var(--color-ink);
    --color-text-subtle: var(--color-slate);
    --color-footer-bg: var(--color-navy);
    --color-footer-border: var(--color-navy-border);
    --color-surface-muted: var(--color-surface-alt);
    --color-border-light: var(--color-hairline);

    /* Typography */
    --font-display: 'Anton', "Anton Fallback", "Anton Fallback Arial", "Anton Fallback Roboto", 'Impact', 'Arial Narrow', sans-serif;
    --font-body: 'Work Sans', "Work Sans Fallback", "Work Sans Fallback Roboto", -apple-system, sans-serif;
    --font-ui: 'Inter', -apple-system, sans-serif;
    --font-heading: var(--font-display);

    /* Layout: the comps use a 1152px content rail inside 64px page margins */
    --rail: 1152px;
    --gutter: 64px;
    --section-y: 96px;
    --radius: 12px;
    --radius-sm: 8px;
}

@media (max-width: 991.98px) {
    :root { --gutter: 32px; --section-y: 72px; }
}

@media (max-width: 575.98px) {
    :root { --gutter: 20px; --section-y: 56px; }
}

.site-body,
body {
    font-family: var(--font-body);
    color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.rail {
    width: 100%;
    max-width: calc(var(--rail) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --------------------------------------------------------------------------
   Shared section typography — kicker / title / lead
   Blocks use these alongside their own BEM classes, e.g.
   <p class="kicker process__kicker">…</p>
   -------------------------------------------------------------------------- */

.kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-lime-dark);
}

.kicker--on-dark { color: var(--color-lime); }

.kicker__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-navy);
}

.section-title--on-dark { color: var(--color-white); }

.section-lead {
    margin: 16px 0 0;
    max-width: 720px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: var(--color-slate);
}

.section-lead--on-dark { color: var(--color-lavender); }

@media (max-width: 767.98px) {
    .section-title { font-size: 32px; }
    .section-lead { font-size: 16px; line-height: 26px; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    /* parent theme sets `.btn { border: none !important }` — must out-shout it */
    border: 1px solid transparent !important;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.2px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover,
.btn:focus { text-decoration: none; }

.btn:focus-visible {
    outline: 2px solid var(--color-lime) !important;
    outline-offset: 3px;
}

.btn__icon {
    flex: none;
    width: 18px;
    height: 18px;
}

/* Lime fill — primary CTA */
.btn--primary {
    background-color: var(--color-lime);
    border-color: #5C9E26 !important; /* 1px darker-green stroke for contrast against white/light */
    color: var(--color-ink);
}

.btn--primary:hover {
    background-color: var(--color-white);
    color: var(--color-ink);
}

/* Lime outline on navy — secondary CTA on dark ("Schedule Service →") */
.btn--ghost {
    background-color: var(--color-navy-raised);
    border-color: var(--color-lime) !important;
    color: var(--color-lime);
}

.btn--ghost:hover {
    background-color: var(--color-lime);
    color: var(--color-ink);
}

/* Navy fill — secondary CTA on light ("All service areas →"). Same
   #1B2A6B fill as .btn--ghost so every secondary button matches (Volley #60). */
.btn--navy {
    background-color: var(--color-navy-raised);
    color: var(--color-lime);
}

.btn--navy:hover {
    background-color: var(--color-lime);
    color: var(--color-ink);
}

/* White outline on dark ("OR REQUEST SERVICE ONLINE →") */
.btn--ghost-light {
    background-color: transparent;
    border: 2px solid var(--color-white) !important;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.btn--ghost-light:hover {
    background-color: var(--color-white);
    color: var(--color-ink);
}

/* Red — emergency */
.btn--emergency {
    background-color: var(--color-red);
    color: var(--color-white);
}

.btn--emergency:hover {
    background-color: var(--color-white);
    color: var(--color-red);
}

/* Phone numbers set in Anton, as in the comps */
.btn--phone {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Small shared pieces
   -------------------------------------------------------------------------- */

/* "ALL DRAIN SERVICES →" style text link */
.link-caps {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-lime);
}

.link-caps:hover {
    color: var(--color-white);
    text-decoration: none;
}

.link-caps--on-light { color: var(--color-navy); }
.link-caps--on-light:hover { color: var(--color-lime-dark); }

.link-caps__arrow {
    flex: none;
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.link-caps:hover .link-caps__arrow { transform: translateX(3px); }

/* Five lime stars */
.stars {
    display: inline-flex;
    gap: 4px;
    color: var(--color-lime);
}

.stars__star { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Accessibility utility
   --------------------------------------------------------------------------
   Neither this theme nor the parent defined .screen-reader-text, so WordPress
   core markup that relies on it rendered VISIBLY. Anything core or a plugin
   emits with this class now hides correctly by default. */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.screen-reader-text:focus {
    /* Keep skip-links reachable by keyboard. */
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

/* Legible inline links inside rich-text copy on location pages */
.single-location p a:not([class]),
.single-location li a:not([class]) {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.single-location p a:not([class]):hover,
.single-location p a:not([class]):focus,
.single-location li a:not([class]):hover,
.single-location li a:not([class]):focus {
    color: var(--color-lime-dark);
}

/* --------------------------------------------------------------------------
   Service category grid (inc/local-context.php clog_category_grid) — shared
   by the Services, Service Categories and Feature Cards blocks.
   Home comp y 1942: three 361×505 navy cards, 52px raised icon tile, 26px
   titles, 14px copy, hairline link rows with arrows, lime "ALL …" link.
   -------------------------------------------------------------------------- */

.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
    margin-top: 48px;
}

.cat-grid__card {
    display: flex;
    flex-direction: column;
    min-height: 505px;
    padding: 27px 28px 28px;
    border: 1px solid var(--color-navy-border);
    border-radius: var(--radius);
    background-color: var(--color-navy);
}

.cat-grid__top { display: flex; justify-content: space-between; align-items: flex-start; }

.cat-grid__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background-color: var(--color-navy-raised);
    color: var(--color-lime);
}

.cat-grid__num {
    font-family: var(--font-display);
    font-size: 36px;
    line-height: 1;
    color: var(--color-navy-border);
}

.cat-grid__title {
    margin: 36px 0 0;
    font-family: var(--font-body);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.cat-grid__title a { color: var(--color-white); text-decoration: none; }
.cat-grid__title a:hover { color: var(--color-lime); text-decoration: none; }

.cat-grid__text {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 22px;
    color: var(--color-lavender);
}

.cat-grid__list { margin: 22px 0 0; padding: 0; list-style: none; }

.cat-grid__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    border-bottom: 1px solid var(--color-navy-border);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-white);
    text-decoration: none;
}

.cat-grid__link:hover { color: var(--color-lime); text-decoration: none; }
.cat-grid__link-arrow { flex: none; width: 14px; height: 14px; color: var(--color-lime); }

.cat-grid__all { margin-top: auto; padding-top: 24px; }

@media (max-width: 991.98px) {
    .cat-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .cat-grid__card { min-height: 0; }
}

/* --------------------------------------------------------------------------
   Framed photos — rounded corners + a soft lime drop shadow, so content
   photos sit in the design instead of reading as flat pasted-in images.
   -------------------------------------------------------------------------- */
.about-hero__photo,
.story__photo,
.what-sets-apart__photo {
    border-radius: var(--radius);
    box-shadow: 14px 14px 0 -2px rgba(155, 249, 33, 0.9), 0 18px 40px rgba(4, 19, 75, 0.35);
}

/* Minimum 12px text for labels, pills and badges (QA M9, 2026-10-14). The `body` prefix
   outranks the component rules, including the ones inside header.css media queries. */
body .request-card__eyebrow,
body .services-hero__card-label,
body .branch-cards__pill,
body .branch-cards__state,
body .loc-badge,
body .loc-badge.loc-badge--row,
body .loc-card__state,
body .locator__count,
body .locator__state,
body .mega__branch-pill,
body .mega__eyebrow,
body .site-footer__emergency-text,
body .service-map__credit {
    font-size: 12px;
}

/* Related guides and city service links above the Footer CTA (inc/related-guides.php).
   Styled as the Service Area "Local coverage" chips; the chip rules are repeated here, scoped,
   for pages that have no Service Area block (service-area.css is only loaded with the block). */
.related-guides { background-color: var(--color-surface); }
.related-guides__inner { padding-top: 72px; padding-bottom: 72px; }
.service-area + .related-guides .related-guides__inner,
.related-guides + .related-guides .related-guides__inner { padding-top: 0; }
.related-guides__kicker { margin-bottom: 14px; }
.related-guides__title { font-size: 34px; line-height: 1.1; }
.related-guides .service-area__chips { display: flex; flex-wrap: wrap; gap: 11px; margin: 22px 0 0; padding: 0; list-style: none; }
.related-guides .service-area__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 22px 0 18px; border: 1px solid var(--color-hairline); border-radius: 19px; background-color: var(--color-white); font-family: var(--font-body); font-size: 14px; line-height: 1.2; color: var(--color-navy); text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; }
.related-guides a.service-area__chip:hover,
.related-guides a.service-area__chip:focus-visible { border-color: var(--color-lime-dark); color: var(--color-navy); text-decoration: none; }
.related-guides .service-area__chip-icon { flex: none; width: 16px; height: 16px; color: var(--color-lime-dark); }
@media (max-width: 991.98px) { .related-guides__inner { padding-top: var(--section-y); padding-bottom: var(--section-y); } }

/* SEO audit 2026-10-14 item 26: FAQ questions are h3 headings now (keep the old look), and
   44px minimum tap targets on phones for breadcrumbs, footer phones and the location selector. */
.faq__heading { margin: 0; font: inherit; }
@media (max-width: 991.98px) {
    .crumbs__link, .crumbs__current { display: inline-flex; align-items: center; min-height: 44px; }
    .site-footer__branch-phone { min-height: 44px; }
    .locator__chip { height: auto; min-height: 44px; }
    .locator__close { min-width: 44px; min-height: 44px; }
    .locator__reset, .locator__areas { display: inline-flex; align-items: center; min-height: 44px; }
}