/* Fixes for issues the October 3, 2026 audits found in the earlier approved site
   (consent panel placement, tap targets, small text, focus under the sticky header). */

/* 1. Consent panel: a slim bar along the bottom edge instead of a box over the hero.
      Wording, buttons and behavior are unchanged (privacy-choices.js is untouched). */
@media (min-width:761px){
  .privacy-choice-panel{left:0;right:0;bottom:0;width:100%;max-width:none;max-height:none;padding:16px max(24px,calc((100vw - 1320px)/2 + 48px));border-width:1px 0 0;border-radius:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:center}
  .privacy-choice-panel{padding-block:12px}
  .privacy-choice-panel h2{font-size:17px}
  .privacy-choice-panel p{margin-top:2px;font-size:14px;line-height:1.45;max-width:72ch}
  .privacy-choice-panel .privacy-choice-detail{margin-top:2px}
  .privacy-choice-actions{grid-column:2;grid-row:1 / span 4;margin-top:0}
  .privacy-choice-actions button{flex:none;min-width:150px}
}
@media (max-width:760px){
  .privacy-choice-panel{left:0;right:0;bottom:0;width:100%;max-width:none;padding:14px 16px calc(12px + env(safe-area-inset-bottom,0px));border-width:1px 0 0;border-radius:14px 14px 0 0}
  .privacy-choice-panel h2{font-size:18px}
  .privacy-choice-panel p{margin-top:4px;font-size:14px;line-height:1.4}
  .privacy-choice-actions{margin-top:10px}
  .privacy-choice-actions button{min-height:44px;padding-block:9px}
  .privacy-choice-panel .privacy-choice-detail{margin-top:8px;line-height:1.45}
}
/* While the panel is open, the page reserves its height (set by simple.js from the panel's real size):
   the last footer row can scroll clear of it, and keyboard focus never lands underneath (WCAG 2.4.11). */
html{scroll-padding-bottom:calc(var(--consent-h,0px) + 16px)}
/* Keyboard focus and jump links stop below the sticky header (WCAG 2.4.11). This replaces the
   per-element scroll-margin-top offsets, which would otherwise double up with it. */
html{scroll-padding-top:var(--anchor-offset,96px)}
section,[id],.svc,.svc-first,.showcase{scroll-margin-top:0}
body{padding-bottom:var(--consent-h,0px)}

/* First view with the panel open: keep the hero's button above it.
   Phones: tighter hero spacing. Short laptop screens: the hero's centered block sits higher. */
@media (max-width:540px){
  .hero{padding-top:12px}
  .hero .tagline{margin-top:18px}
  .simple .hero .actions{margin-top:22px}
}
/* Short phones (toolbars showing): a slightly smaller hero so the button clears the consent sheet. */
@media (max-width:540px) and (max-height:760px){
  .hero .motto{font-size:44px}
  .hero .tagline{font-size:22px;margin-top:14px}
  .hero .lede{margin-top:10px;font-size:16px}
  .simple .hero .actions{margin-top:18px}
}
/* Short laptop screens: compress the hero itself, not just its minimum height. */
@media (min-width:981px) and (max-height:780px){
  .hero{padding-top:8px}
  .hybrid .hero .wrap{padding-block:12px}
  .hero .motto{font-size:clamp(44px,8.5vh,72px)}
  .hero .tagline{margin-top:16px}
  .hero .lede{margin-top:10px}
  .simple .hero .actions{margin-top:20px}
}
@media (min-width:981px) and (max-height:860px){.hybrid .hero .wrap{min-height:calc(100svh - 250px)}}

/* Reopened from "Privacy choices": Close sits beside the title, not adrift mid-bar. */
@media (min-width:761px){.privacy-choice-heading{justify-content:flex-start;align-items:baseline;gap:20px}}

/* 2. Footer: full-size tap targets for links, and the "Privacy choices" button lined up with its row. */
footer nav a,footer .legal a,footer .svc-links a{display:inline-flex;align-items:center;min-height:44px}
footer nav,footer .legal,footer .svc-links{row-gap:0}
footer .legal{align-items:center}

/* 3. Header: between 541 and 620 px the logo, Menu and booking button share one row;
      tighter spacing keeps the button from being clipped (the logo still gets its own row at 540 and below). */
@media (min-width:541px) and (max-width:620px){.nav .wrap{gap:10px}}

/* 4. Demo mock-ups: nothing below 12 px. */
.qb-note span,.inv li div span,.sb-day,.sb-name,.ms li span,.ms-foot,.app-meta,.mock-small,.mock-chip,
.mock-logged,.chat-log .mock-logged,.dash-metric,.dash-delta,.dash-flag,.drawer-top b,.drawer-rows,
.demo-prompt,.showcase .tags .tag,.dash-axis span,.dash-source{font-size:12px}

/* 5. Dashboard chart: animate bars with transform instead of height. */
.dash-chart span{height:100%;min-height:0;transform:scaleY(calc(var(--h,0) / 100));transform-origin:50% 100%;transition:transform .7s cubic-bezier(.2,.7,.2,1),background .3s}
@media (prefers-reduced-motion:reduce){.dash-chart span{transition:none}}

/* 7. Dashboard demo axis labels: readable contrast on the light mock-up (was 3.5:1). */
.dash-axis{color:#5b6872}

/* 8. Footer symbol link at ≤420 px: 44 px tap target around the unchanged 30 px symbol. */
@media (max-width:420px){footer .brand{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-7px}}