/* ════════════════════════════════════════════════════════════════════
   bdyna-layout.css — reset, typography scale, page shell, containers.
   Layer 2 of 5. Requires bdyna-tokens.css.

   THE CONTAINER PROBLEM THIS SOLVES
   The audit found shell, bd-shell, bdh-wrap, form-shell, wrap, sec-in and
   others, each with its own max-width and padding. `.bd-container` is the
   one. The aliases at the bottom of this file keep the old names working
   during migration — they are marked and dated for removal, not left to
   become permanent.
   ════════════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bd-ink);-webkit-text-size-adjust:100%}
body{
  background:var(--bd-bg);color:var(--bd-fg);
  font-family:var(--bd-font);font-size:var(--bd-fs-body);
  line-height:var(--bd-lh-normal);font-weight:var(--bd-w-normal);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
/* Images without intrinsic dimensions are the main cause of layout shift.
   Templates should set width/height; this keeps the ratio when they do. */
img[width][height]{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--bd-gold);text-decoration-thickness:1px;text-underline-offset:2px}
[data-bd-theme="light"] a{color:#7a5c00}
hr{border:0;border-top:1px solid var(--bd-border);margin:var(--bd-s-8) 0}

/* One focus ring for the entire system. */
:focus-visible{outline:var(--bd-focus-w) solid var(--bd-focus-color);
  outline-offset:var(--bd-focus-offset);border-radius:2px}
/* Removing the default ring without :focus-visible support would strip focus
   from keyboard users, so it is only suppressed where the modern selector is
   understood. */
@supports selector(:focus-visible){ :focus:not(:focus-visible){outline:none} }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── Typography scale ──────────────────────────────────────────── */
.bd-display,.bd-h1,.bd-h2,.bd-h3,.bd-h4{
  font-family:var(--bd-font);color:var(--bd-fg);margin:0;
  /* Long service names must not push a narrow screen sideways. */
  overflow-wrap:break-word;
}
.bd-display{font-size:var(--bd-fs-display);font-weight:var(--bd-w-black);
  line-height:var(--bd-lh-tight);letter-spacing:var(--bd-track-tight)}
.bd-h1{font-size:var(--bd-fs-h1);font-weight:var(--bd-w-black);
  line-height:var(--bd-lh-tight);letter-spacing:var(--bd-track-tight)}
.bd-h2{font-size:var(--bd-fs-h2);font-weight:var(--bd-w-heavy);
  line-height:var(--bd-lh-snug);letter-spacing:-.02em}
.bd-h3{font-size:var(--bd-fs-h3);font-weight:var(--bd-w-bold);line-height:var(--bd-lh-snug)}
.bd-h4{font-size:var(--bd-fs-h4);font-weight:var(--bd-w-semi);line-height:var(--bd-lh-snug)}

.bd-body-lg{font-size:var(--bd-fs-body-lg);line-height:var(--bd-lh-relaxed);max-width:var(--bd-measure)}
.bd-body{font-size:var(--bd-fs-body);line-height:var(--bd-lh-relaxed);max-width:var(--bd-measure)}
.bd-small{font-size:var(--bd-fs-small);line-height:var(--bd-lh-normal)}
.bd-muted{color:var(--bd-fg-muted)}
.bd-measure{max-width:var(--bd-measure)}
.bd-measure-narrow{max-width:var(--bd-measure-narrow)}

/* Eyebrow — one tracking value, used everywhere it appears. */
.bd-eyebrow{
  display:inline-block;font-size:var(--bd-fs-meta);font-weight:var(--bd-w-heavy);
  letter-spacing:var(--bd-track-wide);text-transform:uppercase;
  color:var(--bd-gold);margin:0 0 var(--bd-s-4);line-height:1.4;
}
[data-bd-theme="light"] .bd-eyebrow{color:#7a5c00}

/* Element defaults, so an unclassed <h2> in body copy is sane rather than
   inheriting whatever a page happened to declare. */
.bd-prose h2{font-size:var(--bd-fs-h2);font-weight:var(--bd-w-heavy);
  line-height:var(--bd-lh-snug);margin:var(--bd-s-10) 0 var(--bd-s-3)}
.bd-prose h3{font-size:var(--bd-fs-h3);font-weight:var(--bd-w-bold);
  margin:var(--bd-s-8) 0 var(--bd-s-2)}
.bd-prose h4{font-size:var(--bd-fs-h4);font-weight:var(--bd-w-semi);
  margin:var(--bd-s-6) 0 var(--bd-s-2)}
.bd-prose p,.bd-prose li{font-size:var(--bd-fs-body);line-height:var(--bd-lh-relaxed);
  color:var(--bd-fg-muted);max-width:var(--bd-measure)}
.bd-prose p{margin:0 0 var(--bd-s-4)}
.bd-prose ul,.bd-prose ol{margin:0 0 var(--bd-s-5);padding-left:var(--bd-s-6)}
.bd-prose li{margin-bottom:var(--bd-s-2)}
.bd-prose strong{color:var(--bd-fg);font-weight:var(--bd-w-semi)}
.bd-prose > :first-child{margin-top:0}

/* ── Skip link ─────────────────────────────────────────────────── */
.bd-skip{position:absolute;left:-9999px;top:0;z-index:var(--bd-z-skip);
  background:var(--bd-ink);color:var(--bd-gold);padding:12px 18px;
  font-weight:var(--bd-w-bold);text-decoration:none;border-radius:0 0 var(--bd-r-sm) 0}
.bd-skip:focus{left:0}

/* ── Page shell ────────────────────────────────────────────────── */
.bd-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.bd-main{flex:1;margin-top:0}
.bd-main > :first-child{margin-top:0}   /* stops a collapsing margin reopening
                                            the gap under the header */

.bd-container{width:100%;max-width:var(--bd-container);margin-inline:auto;
  padding-inline:var(--bd-page-x)}
.bd-container--narrow{max-width:var(--bd-container-narrow)}
.bd-container--wide{max-width:var(--bd-container-wide)}
.bd-container--flush{padding-inline:0}

.bd-section{padding-block:var(--bd-section-y);background:var(--bd-bg);color:var(--bd-fg)}
.bd-section--tight{padding-block:calc(var(--bd-section-y) * .6)}
.bd-section--flush{padding-block:0}
.bd-section--alt{background:var(--bd-surface)}
[data-bd-theme="light"] .bd-section--alt{background:var(--bd-paper-2)}
.bd-section-head{margin-bottom:var(--bd-s-8)}
.bd-section-head .bd-h2{margin-bottom:var(--bd-s-2)}
.bd-section-head p{color:var(--bd-fg-muted);max-width:var(--bd-measure);margin:0}

.bd-grid{display:grid;gap:var(--bd-gap);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.bd-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.bd-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.bd-stack{display:flex;flex-direction:column;gap:var(--bd-gap)}
.bd-row{display:flex;flex-wrap:wrap;gap:var(--bd-gap-sm);align-items:center}
.bd-row--between{justify-content:space-between}

.bd-bleed{width:100vw;margin-inline:calc(50% - 50vw)}

.bd-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── COMPATIBILITY ALIASES · remove once migration completes ─────
   These map the legacy container names onto the canonical one so a page
   can adopt the system without its old wrapper collapsing. They are
   deliberately listed together rather than scattered, so the list can be
   deleted in one edit and the remaining failures are obvious.
   Audited names: shell · bd-shell · bdh-wrap · form-shell · wrap · sec-in */
.shell,.bd-shell,.bdh-wrap,.form-shell,.sec-in{
  width:100%;max-width:var(--bd-container);margin-inline:auto;
  padding-inline:var(--bd-page-x);
}
.bd-copy{width:100%;max-width:var(--bd-measure);margin-inline:auto}

/* ════════════════════════════════════════════════════════════════════
   R98 — FRONTEND CONSISTENCY FLOOR.

   148 public templates carry their own <style> block, and between them they
   produce 12px body text, headings anywhere from 52px to 80px, and buttons
   at a dozen sizes. Removing 1.47 MB of inline CSS is per-template work and
   is not done.

   What IS done here: a floor that applies wherever a page has not explicitly
   set the property itself. These rules are scoped to the BARE ELEMENT, never
   to a class, so any page rule — which is always more specific — still wins.
   A page that has styled its own h1 keeps it; a page that never did stops
   inheriting whatever the browser felt like.

   This is a floor, not a takeover. It cannot make the site pixel-identical,
   and it is not pretending to.
   ════════════════════════════════════════════════════════════════════ */

body{font-size:var(--bd-fs-body)}          /* never below 16px */

/* Headings: element-level, so a page class beats them. The point is the CAP —
   nothing lands at 80px by accident any more. */
h1{font-size:var(--bd-fs-h1);line-height:var(--bd-lh-tight);
   letter-spacing:var(--bd-track-tight);overflow-wrap:break-word}
h2{font-size:var(--bd-fs-h2);line-height:var(--bd-lh-snug);overflow-wrap:break-word}
h3{font-size:var(--bd-fs-h3);line-height:var(--bd-lh-snug);overflow-wrap:break-word}
h4{font-size:var(--bd-fs-h4);line-height:var(--bd-lh-snug)}
h5,h6{font-size:var(--bd-fs-body);line-height:var(--bd-lh-snug)}

/* Controls. 16px stops iOS zooming on focus, which is the single most
   common mobile-form complaint and costs nothing to fix. */
input,select,textarea{font-size:var(--bd-fs-body)}

/* R106 — THE FLOOR WAS BREAKING THE SLIDER.
   `button{min-height:44px}` is right for a form control and wrong for a
   slider dot: it stretched every .bd-hero-dot from an 8px circle into a 44px
   bar, which is what the screenshots show. A dot is a POSITION INDICATOR, not
   a form control — its hit area comes from the padding around it, not from
   making the visible mark enormous.
   The hero's own controls are excluded; they set their own sizes and the
   arrows already exceed 44px. */
/* R193 — the exclusion list above did not hold, and could not.
   It names classes to exclude, "hero-dot" among them for exactly this case.
   But the Design Poise slider builds its dots with no class at all:

       var b=document.createElement('button'); if(i===0)b.className='on';

   so the class is "" or "on", no exclusion matches, and a 9px circle is
   stretched to 9x44 — the vertical ellipse in the report. An allowlist of
   names cannot cover markup that has no name, and 39 templates build dots
   this way.
   So :where() drops this rule to specificity (0,0,1), making the touch-target
   FLOOR the easiest thing in the file to override rather than among the
   hardest. min-height beats height whatever the specificity, so an override
   has to set min-height too — which is what the rule below does. */
button:where(:not([class*="bd-hero-"]):not([class*="hero-dot"]):not([class*="hero-nav"])),
input[type="submit"],input[type="button"]{min-height:var(--bd-touch-min)}

/* Slider dots, every brand, matched by STRUCTURE rather than by a list of
   names. Measured: every generated dot button sits in a container whose class
   contains "dots" -- dots, hero-dots, bd-hero-dots, bd-shero-dots, bdh-dots,
   bdy-hero-dots, bhx-dots, slider-dots, all eight of them and nothing else.
   Dot buttons that DO carry a class are only hero-dot and bd-hero-dot, which
   the exclusions above already cover. So this needs no upkeep as brands are
   added, which is the whole point -- the allowlist above is what failed.

   The 44px TAP TARGET is kept, and only the VISIBLE MARK shrinks: the ::after
   is transparent, is hit-tested as part of the button, and is taken out of
   flow so it cannot change the dot's size. It grows only DOWNWARD AND UPWARD.
   That is deliberate. Measured dot gaps are 7-9px (bd-shero-dots 7, bdh-dots
   and bhx-dots and hero-dots 8, dots 9), so a target widened to 44px would
   overlap its neighbours by ~35px and a tap near the edge would select the
   WRONG slide -- a worse defect than the one being fixed, and a silent one.
   Vertically there is nothing to collide with, so the full 44px fits there. */
[class*="dots"] button{min-height:0;position:relative}
[class*="dots"] button::after{content:"";position:absolute;left:0;right:0;
  top:50%;height:var(--bd-touch-min);transform:translateY(-50%)}

/* Any control a page forgot to give a focus style. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:var(--bd-focus-w) solid var(--bd-focus-color);
  outline-offset:var(--bd-focus-offset)}

/* Images without dimensions are the main cause of layout shift. This stops
   one overflowing; it cannot supply the ratio, which the template must. */
img,video{max-width:100%}

/* Legacy section and heading names found in the audit, mapped onto the scale
   so they stop drifting. Listed together, like the container aliases, so the
   block can be deleted in one edit when the templates are migrated. */
.sec-h,.section-title,.bd-h,.hero-h{font-size:var(--bd-fs-h2);
  font-weight:var(--bd-w-heavy);line-height:var(--bd-lh-snug);
  letter-spacing:-.02em;overflow-wrap:break-word}
.sec-lead,.section-lead,.lead{font-size:var(--bd-fs-body-lg);
  line-height:var(--bd-lh-relaxed);max-width:var(--bd-measure)}
.eyebrow,.hero-eyebrow,.kicker{font-size:var(--bd-fs-meta);
  font-weight:var(--bd-w-heavy);letter-spacing:var(--bd-track-wide);
  text-transform:uppercase}

/* ════════════════════════════════════════════════════════════════════
   R101 — LEGACY `.hero` MATCHED TO THE REFERENCE BAND.

   Pages under the B*DYNA tab must match shopYourTerm.php. Four of them
   (about, contact, privacy, terms) now render the shared hero directly.
   blog.php cannot: its hero carries the featured ARTICLE — title, excerpt,
   author, date, read time, a "Read article" link — and dropping that into a
   generic hero would lose the content the page exists to show.

   So its BAND is matched instead: the same height, the same gradient stack,
   the same eyebrow and title treatment as `.bd-hero`. The article fields stay.
   Same look, different payload — which is the correct answer when the content
   genuinely differs.

   Scoped to the bare `.hero` class and set at normal specificity, so any page
   that has deliberately styled its own hero still wins.
   ════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  background:var(--bd-ink);
  color:#fff;
  min-height:var(--bd-hero-h-min);
  max-height:var(--bd-hero-h-max);
  display:flex;
  align-items:center;
  overflow:hidden;
  margin-top:0;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255,215,0,.10) 0%, transparent 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(0,64,48,.45) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.78) 60%, rgba(10,10,12,.92) 100%);
}
.hero > *{position:relative;z-index:3}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:var(--bd-fs-meta);font-weight:var(--bd-w-heavy);
  letter-spacing:var(--bd-track-wide);text-transform:uppercase;
  color:var(--bd-gold);margin:0 0 var(--bd-s-4);
}
.hero-title{
  font-size:var(--bd-fs-h1);font-weight:var(--bd-w-black);
  letter-spacing:var(--bd-track-tight);line-height:var(--bd-lh-tight);
  color:#fff;margin:0 0 var(--bd-s-4);
  text-shadow:0 4px 20px rgba(0,0,0,.4);overflow-wrap:break-word;
}
.hero-excerpt,.hero-sub{
  font-size:var(--bd-fs-body-lg);line-height:var(--bd-lh-relaxed);
  color:rgba(255,255,255,.88);max-width:var(--bd-measure-narrow);
  margin:0 0 var(--bd-s-6);text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.hero-cta{
  display:inline-block;background:var(--bd-gold);color:var(--bd-gold-ink);
  font-weight:var(--bd-w-heavy);padding:14px 28px;border-radius:var(--bd-r-pill);
  text-decoration:none;font-size:var(--bd-fs-body);min-height:var(--bd-touch-min);
}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:var(--bd-s-4);
  font-size:var(--bd-fs-small);color:rgba(255,255,255,.84);margin:0 0 var(--bd-s-5);
}

@media(max-width:640px){
  .hero{min-height:0;padding-block:clamp(48px,12vw,84px)}
}

/* ════════════════════════════════════════════════════════════════════
   R103 — CENTRED BODY COPY, matching templates/vehicleusher.html.php.

   The owner named vehicleusher as the reference and asked for the paragraph
   and text centred across the page. The reference does it with:
       .caption{ text-align:center }
       .lead   { max-width:860px; margin:16px auto 0 }
   Those two rules are reproduced here so about, contact, blog, privacy and
   terms get the same treatment without each redeclaring it.

   `.caption` is centred; `.bodyblock` is NOT — the reference leaves running
   body content left-aligned, and centring long prose hurts readability. The
   distinction is the reference's, not mine.
   ════════════════════════════════════════════════════════════════════ */
.caption{text-align:center}
.caption .lead,
.caption p{max-width:860px;margin-left:auto;margin-right:auto;text-wrap:pretty}
.caption .eyebrow{justify-content:center}
.lead{max-width:860px;text-wrap:pretty}