/* ==========================================================================
   DMV Home Fix - 1. Design tokens, base type, and site chrome
   Single source of truth for colour, type, spacing. Components read these.
   Contrast notes (vs Off-White #F9F8F5):
     Deep Forest  11.58:1  - safe for all text and for filled buttons
     --dmv-copper  3.45:1  - DECORATIVE ONLY (rules, checked fill, focus ring)
     --dmv-copper-ink 5.90:1 on ivory / 4.52:1 on linen - use for copper TEXT
   ========================================================================== */

:root{
  --dmv-forest:#1B3B2B;
  --dmv-pine:#10241A;
  --dmv-copper:#C86D44;
  --dmv-copper-ink:#904F31;
  --dmv-linen:#E3DAC9;
  --dmv-ivory:#F9F8F5;
  --dmv-ink:#1C2520;
  --dmv-ink-2:#4A5850;
  --dmv-rule:#E2DDD5;
  --dmv-rule-inv:rgba(227,218,201,.24);

  --dmv-serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --dmv-sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --dmv-gutter:20px;
  --dmv-max:1160px;
  --dmv-radius:6px;
  --dmv-radius-lg:12px;
  --dmv-tap:44px;

  --dmv-s1:8px; --dmv-s2:12px; --dmv-s3:16px; --dmv-s4:22px;
  --dmv-s5:30px; --dmv-s6:40px; --dmv-s7:56px; --dmv-s8:76px;

  --dmv-bar-h:0px;
  --dmv-safe-b:env(safe-area-inset-bottom,0px);
}

/* --- 2. Base ------------------------------------------------------------ */

html{-webkit-text-size-adjust:100%}
body.dmv{margin:0;background:var(--dmv-ivory);color:var(--dmv-ink);
  font-family:var(--dmv-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.dmv.is-locked{overflow:hidden}
.dmv img{max-width:100%;height:auto;display:block}
.dmv h1,.dmv h2,.dmv h3{font-family:var(--dmv-serif);font-weight:400;
  color:var(--dmv-forest);letter-spacing:-.01em;line-height:1.14;margin:0}
.dmv h2{line-height:1.2}
.dmv h3{font-size:19px;font-family:var(--dmv-sans);font-weight:600;line-height:1.35}
.dmv p{margin:0}
.dmv a:not([class]){color:inherit}

:where(.dmv) :focus-visible{outline:3px solid var(--dmv-copper);
  outline-offset:2px;border-radius:3px}

.dmv-skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--dmv-forest);color:var(--dmv-ivory);
  padding:14px 18px;font-weight:600;text-decoration:none}
.dmv-skip:focus{left:0}

.dmv-wrap{max-width:var(--dmv-max);margin:0 auto;
  padding-left:var(--dmv-gutter);padding-right:var(--dmv-gutter)}

/* Completion line - the brand signature, taken from the logo mark. */
.dmv-cl{display:block;width:26px;height:2px;background:var(--dmv-copper);
  margin:0 0 var(--dmv-s2)}

.dmv-eyebrow{font-size:12px;letter-spacing:.09em;color:var(--dmv-ink-2);
  margin-bottom:var(--dmv-s3)}
.dmv-lede{font-size:16px;color:var(--dmv-ink-2)}
.dmv-note{font-size:13px;line-height:1.55;color:var(--dmv-ink-2)}

/* --- 3. Buttons --------------------------------------------------------- */

.dmv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:54px;padding:0 22px;border-radius:var(--dmv-radius);
  font-family:inherit;font-size:16px;font-weight:600;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;text-align:center;
  transition:background-color .15s ease,color .15s ease}
.dmv-btn--block{display:flex;width:100%}
/* Global anchor colour rules (theme reset, Elementor kit, WP global styles)
   all target a{} and load after this file, so button colour is pinned per
   state at a specificity those rules cannot reach. */
.dmv a.dmv-btn--primary,.dmv a.dmv-btn--primary:link,.dmv a.dmv-btn--primary:visited,
.dmv a.dmv-btn--primary:hover,.dmv a.dmv-btn--primary:focus,.dmv a.dmv-btn--primary:focus-visible,
.dmv a.dmv-btn--primary:active,.dmv button.dmv-btn--primary,.dmv .dmv-btn--primary{
  background:var(--dmv-forest,#1B3B2B);color:var(--dmv-ivory,#F9F8F5);border-color:var(--dmv-forest,#1B3B2B)}
.dmv a.dmv-btn--primary:hover,.dmv button.dmv-btn--primary:hover{
  background:var(--dmv-pine,#10241A);border-color:var(--dmv-pine,#10241A);color:var(--dmv-ivory,#F9F8F5)}
.dmv a.dmv-btn--ghost,.dmv a.dmv-btn--ghost:link,.dmv a.dmv-btn--ghost:visited,
.dmv a.dmv-btn--ghost:hover,.dmv a.dmv-btn--ghost:focus,.dmv a.dmv-btn--ghost:focus-visible,
.dmv a.dmv-btn--ghost:active,.dmv button.dmv-btn--ghost,.dmv .dmv-btn--ghost{
  background:transparent;color:var(--dmv-forest,#1B3B2B);border-color:var(--dmv-forest,#1B3B2B)}
.dmv a.dmv-btn--ghost:hover,.dmv button.dmv-btn--ghost:hover{background:rgba(27,59,43,.06)}
.dmv a.dmv-btn--onDark,.dmv a.dmv-btn--onDark:link,.dmv a.dmv-btn--onDark:visited,
.dmv a.dmv-btn--onDark:hover,.dmv a.dmv-btn--onDark:focus,.dmv a.dmv-btn--onDark:focus-visible,
.dmv a.dmv-btn--onDark:active,.dmv .dmv-btn--onDark{
  background:var(--dmv-ivory,#F9F8F5);color:var(--dmv-forest,#1B3B2B);border-color:var(--dmv-ivory,#F9F8F5)}
.dmv-btn--icon{min-width:54px;padding:0 14px;flex:none}
.dmv-btn svg{width:20px;height:20px;flex:none}

/* --- 4. Header + accessible navigation drawer --------------------------- */

.dmv-hd{position:sticky;top:0;z-index:60;background:var(--dmv-ivory);
  border-bottom:1px solid var(--dmv-rule)}
.dmv-hd__in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--dmv-s2);min-height:58px;
  max-width:var(--dmv-max);margin:0 auto;padding:0 6px 0 var(--dmv-gutter)}
.dmv-hd__logo{display:flex;align-items:center;text-decoration:none}
.dmv-hd__logo img{height:26px;width:auto}
.dmv-hd__act{display:flex;align-items:center}
.dmv-iconbtn{width:var(--dmv-tap);height:var(--dmv-tap);display:flex;
  align-items:center;justify-content:center;background:none;border:0;
  color:var(--dmv-forest);cursor:pointer;text-decoration:none;padding:0}
.dmv-iconbtn svg{width:22px;height:22px}

.dmv-nav--desktop{display:none}

.dmv-scrim{position:fixed;inset:0;background:rgba(16,36,26,.5);z-index:90}
.dmv-scrim[hidden]{display:none}

.dmv-drawer{position:fixed;top:0;right:0;bottom:0;width:min(88vw,340px);
  z-index:100;background:var(--dmv-ivory);
  border-left:1px solid var(--dmv-rule);
  display:flex;flex-direction:column;
  padding:0 var(--dmv-gutter) calc(var(--dmv-s5) + var(--dmv-safe-b));
  overflow-y:auto;overscroll-behavior:contain}
.dmv-drawer[hidden]{display:none}
.dmv-drawer__top{display:flex;align-items:center;justify-content:flex-end;
  min-height:58px;margin:0 -6px 0 0}
.dmv-drawer__list{list-style:none;margin:0;padding:0}
.dmv-drawer__list li{border-bottom:1px solid var(--dmv-rule)}
.dmv-drawer__list a{display:flex;align-items:center;min-height:54px;
  font-size:17px;font-weight:600;color:var(--dmv-forest);text-decoration:none}
.dmv-drawer__list a[aria-current="page"]{
  box-shadow:inset 3px 0 0 var(--dmv-copper);padding-left:12px}
.dmv-drawer__cta{margin-top:var(--dmv-s5)}
.dmv-drawer__meta{margin-top:var(--dmv-s4);font-size:13.5px;
  line-height:1.6;color:var(--dmv-ink-2)}

@media (prefers-reduced-motion:no-preference){
  .dmv-drawer{animation:dmvSlide .22s ease-out}
  @keyframes dmvSlide{from{transform:translateX(14px);opacity:.6}to{transform:none;opacity:1}}
}

/* --- 5. Mobile bottom action bar ---------------------------------------- */
/* Shown by JS only after the hero has scrolled past, and hidden again while
   a form, the to-do builder, or the footer CTA is on screen so it can never
   sit on top of a field or a duplicate call to action. */

.dmv-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;gap:10px;align-items:center;
  padding:10px var(--dmv-gutter) calc(10px + var(--dmv-safe-b));
  background:rgba(249,248,245,.96);
  -webkit-backdrop-filter:saturate(180%) blur(6px);
  backdrop-filter:saturate(180%) blur(6px);
  border-top:1px solid var(--dmv-rule);
  transform:translateY(110%);transition:transform .2s ease;
  visibility:hidden}
/* State class is added by JS after the hero. Pinned so no later sheet,
   and no CSS-purging pass, can leave it stuck off-screen. */
.dmv .dmv-bar{visibility:hidden;transform:translateY(115%);pointer-events:none}
.dmv .dmv-bar.is-on{visibility:visible!important;transform:translateY(0)!important;pointer-events:auto}
.dmv-bar .dmv-btn{min-height:50px;font-size:15px;flex:1}
.dmv-bar .dmv-btn--icon{flex:none;min-width:50px}
@media (prefers-reduced-motion:reduce){.dmv-bar{transition:none}}

/* Content clears the bar without any layout shift on first paint. */
.dmv-main{padding-bottom:var(--dmv-bar-h)}

/* --- 6. Footer ---------------------------------------------------------- */

.dmv-ft{background:var(--dmv-pine);color:var(--dmv-linen);
  padding:var(--dmv-s7) 0 var(--dmv-s5)}
.dmv-ft h2{color:var(--dmv-linen);font-size:23px}
.dmv-ft__nav{list-style:none;margin:var(--dmv-s5) 0 0;padding:0;
  border-top:1px solid var(--dmv-rule-inv)}
.dmv-ft__nav li{border-bottom:1px solid var(--dmv-rule-inv)}
.dmv-ft__nav a{display:flex;align-items:center;min-height:48px;
  font-size:15px;color:var(--dmv-linen);text-decoration:none}
.dmv-ft__meta{margin-top:var(--dmv-s4);font-size:14px;line-height:1.9;
  color:#B9C3B6}
.dmv-ft__meta a{color:var(--dmv-linen)}
.dmv-ft__legal{margin-top:var(--dmv-s4);font-size:12.5px;color:#8FA08F}

/* --- 7. Breakpoints ----------------------------------------------------- */

@media (min-width:768px){
  :root{--dmv-gutter:34px}
  .dmv-bar{display:none}
  .dmv-main{padding-bottom:0}
}
@media (min-width:1120px){
  .dmv-nav--desktop{display:flex;align-items:center;gap:26px}
  .dmv-nav--desktop a{font-size:15px;font-weight:600;
    color:var(--dmv-forest);text-decoration:none;padding:8px 0}
  .dmv-nav--desktop a[aria-current="page"]{
    box-shadow:inset 0 -2px 0 var(--dmv-copper)}
  .dmv-burger{display:none}
}