/* ════════════════════════════════════════════════════════════════════
   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. */
button:not([class*="bd-hero-"]):not([class*="hero-dot"]):not([class*="hero-nav"]),
input[type="submit"],input[type="button"]{min-height:var(--bd-touch-min)}

/* 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}