/* Runtime-owned styles: the consent banner (consent.js) plus two small rules the runtime
   behaviour in site.js depends on. Tokens come from styles.css; the fallbacks keep this
   file readable on its own and correct if it ever loads first. */

/* ---------- consent banner ---------- */
.aperio-consent{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:80;
  display:none;
  font-family:'Instrument Sans',system-ui,sans-serif;
}
.aperio-consent[data-open="1"]{display:block}
.aperio-consent:focus{outline:none}

.aperio-consent .cc-sheet{
  max-width:var(--maxw,1280px);
  margin:0 auto;
  display:grid;
  gap:14px;
  align-items:center;
  background:var(--paper,#FBF8F1);
  color:var(--ink,#0B2B3C);
  border:1px solid var(--rule,rgba(11,43,60,.14));
  border-bottom:0;
  border-radius:10px 10px 0 0;
  box-shadow:0 -24px 60px -30px rgba(11,43,60,.45);
  padding:18px clamp(16px,4vw,28px);
  /* notch / home-indicator / fold hinge */
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
  padding-left:calc(clamp(16px,4vw,28px) + env(safe-area-inset-left,0px));
  padding-right:calc(clamp(16px,4vw,28px) + env(safe-area-inset-right,0px));
  /* never swallow the viewport: the address widget above stays usable and reachable */
  max-height:min(40vh,320px);
  max-height:min(40dvh,320px);   /* dvh where supported: excludes mobile browser chrome */
  overflow-y:auto;
  overscroll-behavior:contain;
  animation:cc-in .28s cubic-bezier(.2,.7,.2,1);
}

/* The banner is fixed over the bottom of the viewport, which on a phone is exactly where the
   address widget and its "Check my address" button sit. consent.js publishes the banner's
   measured height as --aperio-consent-h while it is open; reserving that much space at the
   end of the document means the widget can always be scrolled out from under it, and any
   focus/anchor scroll lands above it. */
html[data-consent-showing] body{padding-bottom:var(--aperio-consent-h,0px)}
html[data-consent-showing]{scroll-padding-bottom:calc(var(--aperio-consent-h,0px) + 16px)}
@keyframes cc-in{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.aperio-consent .cc-sheet{animation:none}}

.aperio-consent .cc-copy{min-width:0}
.aperio-consent .cc-title{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim,rgba(11,43,60,.68));margin-bottom:8px;
}
.aperio-consent .cc-body{
  font-size:14.5px;line-height:1.5;color:var(--ink,#0B2B3C);max-width:68ch;
}
.aperio-consent .cc-link{
  display:inline-block;margin-top:8px;font-size:13.5px;font-weight:600;
  color:var(--teal-deep,#0F7A88);text-decoration:underline;text-underline-offset:3px;
}

/* Equal prominence: both buttons are the same size, weight and colour — Law 25 requires a
   genuine opt-in, so "Decline" must not be quieter than "Accept". */
.aperio-consent .cc-actions{display:flex;gap:10px;flex-wrap:wrap}
.aperio-consent .cc-btn{
  flex:1 1 150px;
  min-height:48px;              /* 44px+ hit target */
  padding:0 22px;
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:15px;font-weight:600;
  background:var(--navy,#0B2B3C);
  color:var(--cream,#F5F0E5);
  border:1px solid var(--navy,#0B2B3C);
  border-radius:6px;
  cursor:pointer;
  transition:background .2s;
}
.aperio-consent .cc-btn:hover{background:#123A4E}
.aperio-consent .cc-btn:active{transform:translateY(1px)}
.aperio-consent .cc-btn:focus-visible{outline:2px solid var(--teal-deep,#0F7A88);outline-offset:2px}

/* Phones: keep the whole banner short. The two buttons sit side by side (still identical to
   each other — equal prominence is a Law 25 requirement, not a style choice), the sheet is
   tighter, and consent.js swaps in the shorter body copy below 560px. */
@media (max-width:560px){
  .aperio-consent .cc-sheet{gap:10px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .aperio-consent .cc-title{font-size:11px;letter-spacing:.12em;margin-bottom:5px}
  .aperio-consent .cc-body{font-size:13.5px;line-height:1.45}
  .aperio-consent .cc-link{margin-top:6px;font-size:13px}
  .aperio-consent .cc-actions{flex-wrap:nowrap;gap:8px}
  .aperio-consent .cc-btn{flex:1 1 0;min-width:0;padding:0 8px;min-height:44px;font-size:14.5px}
}

@media (min-width:760px){
  .aperio-consent .cc-sheet{grid-template-columns:minmax(0,1fr) auto;gap:28px}
  .aperio-consent .cc-actions{flex-wrap:nowrap}
  .aperio-consent .cc-btn{flex:0 0 auto;min-width:140px}
}

/* ---------- auto-on notice (consent.js, non-ask-first regions) ----------
   Collection has already started where no opt-in is legally required; this bar says so and
   points at the settings. It is NOT a dialog: it takes no focus, traps nothing and blocks
   nothing. Deliberately slimmer and quieter than the banner above — it asks for nothing. */
.aperio-notice{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:79;                 /* under the banner: the two are never open together anyway */
  display:none;
  font-family:'Instrument Sans',system-ui,sans-serif;
}
.aperio-notice[data-open="1"]{display:block}

.aperio-notice .cn-bar{
  max-width:var(--maxw,1280px);
  margin:0 auto;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 14px;
  background:var(--paper,#FBF8F1);
  color:var(--ink,#0B2B3C);
  border:1px solid var(--rule,rgba(11,43,60,.14));
  border-bottom:0;
  border-radius:10px 10px 0 0;
  box-shadow:0 -18px 44px -34px rgba(11,43,60,.4);
  padding:10px clamp(14px,3vw,24px);
  /* notch / home-indicator / fold hinge */
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  padding-left:calc(clamp(14px,3vw,24px) + env(safe-area-inset-left,0px));
  padding-right:calc(clamp(14px,3vw,24px) + env(safe-area-inset-right,0px));
  animation:cc-in .28s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion:reduce){.aperio-notice .cn-bar{animation:none}}

.aperio-notice .cn-body{
  flex:1 1 240px;min-width:0;margin:0;
  font-size:13px;line-height:1.45;color:var(--dim,rgba(11,43,60,.68));
}
.aperio-notice .cn-link{
  flex:0 0 auto;
  display:inline-flex;align-items:center;
  min-height:32px;
  margin:0;padding:0;border:0;background:none;
  font:inherit;font-size:13px;font-weight:600;
  color:var(--teal-deep,#0F7A88);
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;
}
.aperio-notice .cn-link:focus-visible{outline:2px solid var(--teal-deep,#0F7A88);outline-offset:2px}
.aperio-notice .cn-close{
  flex:0 0 auto;
  width:32px;height:32px;
  margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:20px;line-height:1;
  background:none;
  border:1px solid var(--rule,rgba(11,43,60,.14));
  border-radius:6px;
  color:var(--ink,#0B2B3C);
  cursor:pointer;
}
.aperio-notice .cn-close:hover{background:rgba(11,43,60,.06)}
.aperio-notice .cn-close:focus-visible{outline:2px solid var(--teal-deep,#0F7A88);outline-offset:2px}

/* Same reservation as the banner: the notice is fixed over the bottom of the viewport, which
   on a phone is where the address widget and its "Check my address" button sit. consent.js
   publishes the bar's measured height while it is open, so the widget can always be scrolled
   clear of it and any focus/anchor scroll lands above it. */
html[data-notice-showing] body{padding-bottom:var(--aperio-notice-h,0px)}
html[data-notice-showing]{scroll-padding-bottom:calc(var(--aperio-notice-h,0px) + 16px)}

/* Phones: two lines of copy, the controls on their own row, 44 px hit targets. */
@media (max-width:560px){
  .aperio-notice .cn-bar{gap:4px 12px;padding:8px 14px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .aperio-notice .cn-body{flex:1 1 100%;font-size:12.5px;line-height:1.4}
  .aperio-notice .cn-link{min-height:44px;font-size:13px}
  .aperio-notice .cn-close{width:44px;height:44px}
}

/* ---------- runtime behaviour helpers (site.js) ---------- */
/* Body scroll lock while the mobile menu is open. site.js adds .menu-lock alongside
   .menu-open. The panel itself already scrolls independently (responsive.css sets
   .nav-mobile max-height/overflow-y), so every link stays reachable on short screens.
   TODO(responsive owner): this rule would sit more naturally next to those. */
html.menu-lock,body.menu-lock{overflow:hidden}

/* Inline failure message on a lead form whose POST did not go through. */
.lead-error{
  font-size:13px;line-height:1.45;color:#8E5D14;
}
.lead-error:empty{display:none}

/* Screen-reader-only live regions created by the runtime JS (fleet calculator totals,
   address-widget mode announcements). Visually gone, still in the accessibility tree —
   never `display:none`/`visibility:hidden`, which would silence the announcement. */
.aperio-sr{
  position:absolute!important;
  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;
}