/* =============================================================================
   Aspect BBQ Cleaning — main site shared stylesheet
   Served at /css/site.css (shared/ is copied to the dist root by build.js).

   PROVENANCE. Every rule below was extracted from the approved design bundle in
   design-reference/. The <helmet><style> block is BYTE-IDENTICAL across all 14
   .dc.html files for everything above the @media(max-width:920px) line, so that
   part is reproduced verbatim. Inside the media query, only the rules that
   appear in ALL 14 files are here; per-page 920px rules stay in their page.

   DO NOT add page-specific rules to this file. If a selector does not appear in
   every design file, it belongs in the page's own <style> block.
   ========================================================================== */

/* ---- 1. Fonts -----------------------------------------------------------
   Bahnschrift, 3 weights. Paths are ROOT-ABSOLUTE (/fonts/...) because pages
   live at nested pretty URLs (/grill-cleaning/oakville/index.html) where the
   design files' relative "fonts/..." would resolve wrong.
   LICENSING: Bahnschrift is a Windows system font. Web-embedding rights are
   unconfirmed (design README flags this). See CONVENTIONS.md "Open flags". */
@font-face{font-family:"Bahnschrift";src:url("/fonts/Bahnschrift-SemiLight.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Bahnschrift";src:url("/fonts/Bahnschrift-SemiBoldSemiCondensed.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Bahnschrift";src:url("/fonts/Bahnschrift-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

/* ---- 2. Design tokens ---------------------------------------------------
   Reference values only. The design files hard-code hex literals in inline
   styles and those inline styles are reproduced verbatim during page ports, so
   DO NOT rewrite page markup to use var(). These exist for new UI (thankyou,
   404) and for anyone who needs the canonical palette. */
:root{
  /* brand greens */
  --c-brand:#225033;          /* headers, plaques, dark bands */
  --c-brand-deep:#17361f;     /* footer */
  --c-accent:#229033;         /* links, labels */
  --c-accent-hover:#22A033;   /* CTA hover */
  --c-accent-bright:#22C033;  /* CTAs, active pills, accent words on dark */
  /* surfaces */
  --c-paper:#f7faf7;          /* page background — never pure white */
  --c-card:#ffffff;
  --c-card-border:#e6ebe7;
  --c-tint:#eef3ef;           /* light green tint */
  --c-panel:#f6f8f6;          /* dropdown panels */
  --c-panel-hover:#e6ede7;
  /* text */
  --c-heading:#191919;
  --c-heading-alt:#233830;
  --c-body:#42544a;
  --c-secondary:#5e6e64;
  --c-caption:#75827a;
  /* on dark */
  --c-on-dark:#ffffff;
  --c-on-dark-dim:rgba(255,255,255,.88);
  --c-on-dark-dimmer:rgba(255,255,255,.75);
  --c-eyebrow:#8fd19b;
  /* type + shape */
  --font-stack:'Bahnschrift',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --r-card:12px;
  --r-pill:999px;
  --r-cta:5px;
  --shadow-soft:0 8px 22px rgba(14,26,19,.18);
  --shadow-header:0 2px 10px rgba(14,26,19,.25);
  --shadow-dropdown:0 16px 38px rgba(14,26,19,.3);
  /* the single breakpoint */
  --bp-mobile:920px;
}

/* ---- 3. Base + shared components ----------------------------------------
   VERBATIM from the design <helmet> block (identical in all 14 files). */
html{scroll-behavior:smooth}
body{margin:0;font-family:'Bahnschrift',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-weight:300;font-size:17px;color:#225033;background:#f7faf7;-webkit-font-smoothing:antialiased}
a{color:#229033}a:hover{color:#225033}
input,select,textarea{font-family:'Bahnschrift',sans-serif;font-weight:300}
input:focus,select:focus,textarea:focus{outline:none;border-color:#22A033!important;box-shadow:0 0 0 3px rgba(34,160,51,.15)}
details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}
details[open] .faq-x{transform:rotate(45deg)}
[data-dd]{position:relative}
[data-dd]>[data-ddm]{display:none;position:absolute;top:100%;padding-top:12px;z-index:60}
[data-dd]:hover>[data-ddm],[data-dd]:focus-within>[data-ddm]{display:block}

/* ---- 4. Hover utilities -------------------------------------------------
   The design files express hover with a `style-hover="…"` attribute, which is
   a support.js preview-runtime feature and does NOT work in a browser. There
   are exactly 10 distinct values in the whole bundle; each maps to one class
   below. Porting rule: delete the style-hover attribute, add the class.
   See CONVENTIONS.md §"style-hover → class map" for the full table. */
.hov-menu:hover{background:#e6ede7;color:#17361f}                       /* style-hover="background:#e6ede7;color:#17361f" */
.hov-menu-plain:hover{background:#e6ede7}                               /* style-hover="background:#e6ede7" */
.hov-bright:hover{color:#22C033}                                        /* style-hover="color:#22C033" and "color:#22c033" */
.hov-accent:hover{color:#229033}                                        /* style-hover="color:#229033" */
.hov-cta:hover{background:#22A033}                                      /* style-hover="background:#22A033" */
.hov-cta-lift:hover{background:#22A033;transform:translateY(-1px)}      /* style-hover="background:#22A033;transform:translateY(-1px)" */
.hov-card:hover{border-color:#225033;transform:translateY(-2px)}        /* style-hover="border-color:#225033;transform:translateY(-2px)" */
.hov-ghost:hover{background:rgba(255,255,255,.12)}                      /* style-hover="background:rgba(255,255,255,.12)" */
.hov-tint:hover{background:#eef3ef}                                     /* style-hover="background:#eef3ef" */
/* Some hover targets carry an inline transform (the glyph treatment). A hover
   rule that also sets transform must not clobber it — .hov-cta-lift and
   .hov-card are only ever applied to elements with no inline transform in the
   design bundle. If you hit an element that needs both, keep the inline
   transform and write a page-local rule instead of reaching for these. */

/* ---- 5. Glyph transform utilities --------------------------------------
   BRAND-CRITICAL. Body/UI text carries scaleX(1.12) scaleY(0.95) with a width
   compensation so the line box still measures correctly. The design applies
   this inline on almost every text node; those inline styles are preserved
   verbatim during ports. These classes exist ONLY for new markup (thankyou,
   404, anything with no design reference). Never "simplify" an inline glyph
   transform into a class during a port — the inline values vary (1.12/1.1,
   89.3%/90.9%/fit-content) and the difference is visible. */
.glyph{transform:scaleX(1.12) scaleY(0.95);transform-origin:left center;width:89.3%;display:inline-block}
.glyph-center{transform:scaleX(1.12) scaleY(0.95);transform-origin:center center;width:fit-content;display:inline-block}
.glyph-right{transform:scaleX(1.12) scaleY(0.95);transform-origin:right center;width:fit-content;display:inline-block}
.glyph-inline{transform:scaleX(1.12) scaleY(0.95);transform-origin:left center;width:fit-content;display:inline-block}
.glyph-menu{transform:scaleX(1.1) scaleY(0.95);transform-origin:left center;width:90.9%;box-sizing:border-box}

/* ---- 6. Mobile menu + sticky bar state ---------------------------------
   The design wraps these in <sc-if value="{{menuOpen}}"> / <sc-if
   value="{{showSticky}}">, another preview-runtime construct. In production the
   markup is always present and visibility is driven by attributes that
   shared/js/site.js stamps on. Display is still CSS-gated to <=920px by the
   [data-r="stickybar"] rule in §7 so the bar can never appear on desktop. */
/* !important is required: the design's panel carries an inline display:flex
   (it only ever rendered when its sc-if was true), and inline beats a class. */
[data-r="mobilemenu"]{display:none!important}
[data-r="mobilemenu"][data-open]{display:flex!important}
html[data-menu-open]{overflow:hidden}
[data-r="stickybar"]{transform:translateY(110%);transition:transform .22s ease}
[data-r="stickybar"][data-visible]{transform:translateY(0)}

/* Marquee keyframes: declared in several design files inside the media query
   (which is where they were authored) but keyframes are not media-scoped in
   effect. Hoisted here so every page that uses a brand marquee has them. */
@keyframes marq-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marq-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-r="stickybar"]{transition:none}
}

/* ---- 7. Shared 920px rules ---------------------------------------------
   INTERSECTION ONLY: every rule below appears in all 14 design files.
   Verbatim, in the order the design authored them, with one edit: the
   statsband background URL is root-absolute (/uploads/...) instead of
   relative. 920px is the site's single breakpoint. */
@media(max-width:920px){
[data-r="nav"],[data-r="hdrphone"]{display:none!important}
[data-r="burger"]{display:inline-flex!important}
header{padding:10px clamp(10px,3.5vw,16px)!important}
[data-r="hdrrow"]{gap:clamp(6px,2vw,12px)!important}
[data-r="hdrlogo"]{height:clamp(20px,7vw,26px)!important}
[data-r="hdrcall"]{display:inline-flex!important;width:clamp(32px,9.6vw,38px)!important;height:clamp(32px,9.6vw,38px)!important;margin-left:auto!important}
section[data-screen-label="Before and after"]{padding-top:60px!important}
section[data-screen-label="The story"] h2{font-size:31px!important}
section[data-screen-label="The story"] p{font-size:16.5px!important;line-height:1.5!important}
section[data-screen-label="The story"]{padding-top:20px!important;padding-bottom:20px!important}
section[data-screen-label="How it's going"]{padding-top:20px!important}
section[data-screen-label="The story"] img[src*="tree-farm"]{height:280px!important;object-position:center 22%!important}
section[data-screen-label="How it's going"] h2{font-size:31px!important}
section[data-screen-label="How it's going"] p{font-size:16.5px!important;line-height:1.5!important}
[data-r2="statsband"]{height:auto!important;padding:26px 20px!important;margin:0 20px!important;background:#225033 url('/uploads/YTRectanglePatternBG.svg') center/cover no-repeat!important}
[data-rm]{display:block!important}
[data-r="sec"]{padding:56px 20px!important}
[data-r2="revsec"]{padding:56px 0 28px!important}
[data-r2="whosec"]{padding-top:20px!important;padding-bottom:56px!important;margin-top:0!important}
[data-r2="revsec"] iframe{height:470px!important;min-height:0!important}
img[aria-hidden="true"][src*="rule-"]{max-width:200px!important}
section[data-screen-label="Final CTA"]{padding:34px 20px!important}
[data-r="stickybar"]{display:flex!important}
[data-r="page"]{padding-bottom:70px!important;overflow-x:clip!important;max-width:100vw!important}
[data-r="ftdesk"]{display:none!important}
[data-r="ftmob"]{display:flex!important}
/* Not from the intersection — the mobile menu is display:none by default in §6
   and must stay a flex column when opened at any width. */
[data-r="mobilemenu"][data-open]{display:flex!important}
}