/* ============================================================================
File: main.css
Project: Sam Statham Piano (public website)
Purpose: Cleaned & organized stylesheet. This pass standardizes headers, separators, and whitespace,
         but does NOT change behavior or selector specificity.
Date: 2025-09-04 01:47:21Z
Notes:
- Keep-first rules/blocks remain in original order.
- Sections follow page flow: Header → Hero → Platforms → Watch/Listen → BTV → Bookings → Footer → Utilities.
- Media queries are kept near related blocks when possible.
============================================================================ */

:root{
  --bg:#0b0b0e;--bg-soft:#111217;--bg-raised:#151723;--card:#0e1018;--text:#e9e9ee;--muted:#a9a9b6;--accent:#fff;--accent2:#dcd6c4;--brand:#ffffff;--line:#232435;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --tw:#9146FF;--yt:#FF0000;--dc:#5865F2;--ig:#E4405F;--tt:#25F4EE;
  --header-height:64px;

  --group-dark-1: #0b0c12;
  --group-dark-2: #09090c;
  --group-light-1: #0c0d13;
  --group-light-2: #101217;
}
/* ================= BASELINE & ACCESSIBILITY ================= */
/* baseline & accessibility improvements */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Raleway,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
/* ================= SMOOTH SCROLLING ================= */
html { scroll-behavior: auto !important; }
}

:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}

/* typography */
/* ================= TYPOGRAPHY & BASICS ================= */
h1,h2,h3,h4{font-family:Alata,system-ui,sans-serif}
a{color:var(--text);text-decoration:none}
.container{width:min(1200px,92vw);margin-inline:auto;box-sizing:border-box}

/* header */
/* ================= HEADER & NAV ================= */
header{
  position:fixed;
  top:0;left:0;right:0;
  min-height:var(--header-height);
  display:flex;align-items:center;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg,rgba(8,9,12,.8),rgba(8,9,12,.4));
  z-index:9999;border-bottom:1px solid var(--line);
  padding:6px 0;box-sizing:border-box;
  transition: transform .22s ease;
}
header.nav-hidden{ transform: translateY(-110%); }
main{padding-top:calc(var(--header-height) + 12px)}
nav{display:flex;align-items:center;justify-content:space-between;padding:0 8px;width:100%;flex-wrap:wrap;gap:8px}
.brand{display:flex;gap:12px;align-items:center;flex:0 0 auto}
.brand img{width:40px;height:40px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));display:block}
.brand .title{font-weight:800;letter-spacing:.4px;line-height:1}
.brand .subtitle{display:block;color:var(--muted);font-size:12px;font-weight:400}
.nav-links{display:flex;gap:12px;align-items:center;flex:1 1 auto;justify-content:flex-end}
/* reduced horizontal padding for tighter fit on narrow devices (requested) */
.nav-links a{padding:8px 10px;border-radius:12px;opacity:.95;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.nav-links a:hover{background:var(--bg-raised);opacity:1}

/* HERO + About (group 1: darker) */
/* ================= HERO ================= */
.hero{
  position:relative;isolation:isolate;
  background: linear-gradient(180deg, var(--group-dark-1) 0%, var(--group-dark-2) 100%);
  padding-bottom:28px;
}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:min(5vw,52px);align-items:center;padding:30px 0 8px}
.hero h1{font-size:clamp(34px,5.5vw,50px);line-height:1.05;margin:0 0 10px}
.hero p{color:var(--muted);font-size:clamp(15px,1.5vw,18px);margin:0}
.hero .cta{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid #2a2b3c;background:linear-gradient(180deg,#1a1c26,#12131a);padding:14px 18px;border-radius:14px;font-weight:700;letter-spacing:.3px;box-shadow:var(--shadow);transition:transform .06s ease,background .2s ease}
.btn:hover{transform:translateY(-1px);background:linear-gradient(180deg,#222433,#141623)}
.btn.primary{background:linear-gradient(180deg,#f6f6f8,#d9d9df);color:#0a0a0a;border-color:transparent}
.btn.primary:hover{background:linear-gradient(180deg,#ffffff,#e8e8ee)}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;background:#13151f;border:1px solid var(--line);color:var(--muted);font-size:12px}
.status-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-weight:700}
.dot{width:9px;height:9px;border-radius:50%;background:#888}
.dot.live{background:#ff3b3b;box-shadow:0 0 0 6px rgba(255,59,59,.15)}

.hero-visual{position:relative}
.glass{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.glass img{display:block;width:100%;height:auto;opacity:.95}
.overlay-logo {position: absolute;left: 0;right: 0;bottom: 0;display: flex;justify-content: flex-end;align-items: flex-end;height: 50%;padding: 6px;background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.7) 100%);pointer-events: none;}

.overlay-logo img,
.overlay-logo picture,
.overlay-logo picture img {display: block;width: clamp(56px, 8vw, 88px);height: auto;opacity: .96;margin: 0;}

.hero .about-panel{margin-top:22px}
.about-panel .panel{padding:20px}
/* ================= PLATFORMS ================= */
.platforms{padding:56px 0;background: linear-gradient(180deg, var(--group-light-1) 0%, var(--group-light-2) 100%);}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:stretch;grid-auto-rows:1fr}
.card{background:linear-gradient(180deg,#12131a,#0c0d13);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;transition:transform .06s ease,border .2s}
.card:hover{transform:translateY(-2px);border-color:#2b2d44}
.card h3{margin:0;font-size:15px}
.card p{margin:0;color:var(--muted);font-size:13px}
.card .go{margin-top:auto}

.icon-badge{width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);box-shadow:var(--shadow)}
.icon-badge img {width: 60%; height: auto; display: block; margin: auto;  object-fit: contain;}
.card.twitch .icon-badge{background:rgba(145,70,255,.15);border-color:rgba(145,70,255,.35)}
.card.youtube .icon-badge{background:rgba(255,0,0,.12);border-color:rgba(255,0,0,.35)}
.card.discord .icon-badge{background:rgba(88,101,242,.12);border-color:rgba(88,101,242,.35)}
.card.instagram .icon-badge{background:rgba(228,64,95,.12);border-color:rgba(228,64,95,.35)}
.card.tiktok .icon-badge{background:rgba(37,244,238,.12);border-color:rgba(37,244,238,.35)}
.card.ytplus .icon-badge{background:rgba(255,255,255,.15);border-color:#000}

.platforms .card {
  display:grid;
  grid-template-areas:
    "icon title"
    "desc desc"
    "go go";
  grid-template-columns:48px 1fr;
  grid-template-rows:auto 1fr auto;
  gap:8px;
  height:100%;

  /* alignment fixes */
  align-items: start;  /* keep everything top-aligned */
}
.platforms .card .icon-badge {
  grid-area:icon;
  align-self:center;
  justify-self:center; /* ensure icon is centered in its cell */
}
.platforms .card h3 {
  grid-area:title;
  align-self:center;
  margin:0;
}
.platforms .card p {
  grid-area:desc;
  margin:0;
  align-self:start;   /* description always starts at top of its grid area */
}
.platforms .card .go {
  grid-area:go;
  margin-top:8px;
  justify-self:start;
  align-self:end;     /* pin go-tag to bottom */
}

.platforms .card.twitch{
  display:grid !important;
  box-sizing:border-box;
  padding:18px !important;
  grid-template-areas:
    "icon title"
    "desc desc"
    "go go";
  grid-template-columns:48px 1fr;
  grid-template-rows:auto 1fr auto;
  gap:8px;
  height:100%;
  align-items:start;
}
.platforms .grid > .card {display:grid; box-sizing:border-box;}

/* Watch & Listen (dark group) */
/* ================= WATCH & LISTEN ================= */
.watch-listen{
  padding:56px 0;
  border-top:1px solid var(--line);
  background: linear-gradient(180deg, var(--group-dark-1) 0%, var(--group-dark-2) 100%);
}
.watch-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.watch-grid .panel{padding:18px}
.video-wrap{position:relative;padding-top:56.25%;overflow:hidden;border-radius:12px;margin-top:10px}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block}
.player{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);min-height:0}
#twitch-embed{position:relative;width:100%;padding-top:56.25%;height:0;overflow:hidden}
#twitch-embed iframe{position:absolute !important;top:0;left:0;width:100% !important;height:100% !important;border:0}

.platform-link{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.platform-logo{width:22px;height:22px;display:block;object-fit:contain;filter:none}

.status-badge.action{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-weight:800;
  font-size:13px;
  color:var(--text);
  text-decoration:none;
}
.status-badge.action img{width:18px;height:18px;display:block;object-fit:contain;filter:none;border-radius:4px}
.status-center { text-align: center; }

/* Beyond The Vale (light group) */
/* ================= BEYOND THE VALE ================= */
.beyond{
  padding:56px 0;
  border-top:1px solid var(--line);
  background: linear-gradient(180deg, var(--group-light-1) 0%, var(--group-light-2) 100%);
}
/* stretch both columns so they match heights (video defines height) */
.beyond-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
/* panels are flexible to allow the text panel to stretch to match the video panel */
.beyond .panel{padding:18px;display:flex;flex-direction:column;position:relative}
.beyond .kicker{letter-spacing:.4em;text-transform:uppercase;color:var(--muted);font-weight:700;font-size:12px}
.beyond .video-wrap{position:relative;padding-top:56.25%;overflow:hidden;border-radius:12px;margin-top:10px;flex:1 1 auto}
.beyond .video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block}

/* logo inside left panel — positioned top-right on desktop, stacks under text on small screens */
.beyond-logo{
  position:absolute;
  top:18px;
  right:18px;
  width:88px;
  height:auto;
  opacity:.95;
  border-radius:6px;
  background:transparent;
  display:block;
}
.beyond .panel.has-logo{padding-right:128px}

/* Bookings (light group) */
/* ================= BOOKINGS ================= */
.bookings-section{
  padding:56px 0;
  display:flex;
  justify-content:center;
  background: linear-gradient(180deg, var(--group-light-1) 0%, var(--group-light-2) 100%);
}
.bookings-inner{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:24px;
  align-items:center;
  width:100%;
  max-width:1200px;
  margin-inline:auto;
}
.event-image .glass{aspect-ratio:4/3;border-radius:18px;overflow:hidden;}
.event-image img{width:100%;height:100%;object-fit:cover;display:block}

/* ensure bookings panel occupies the full width on all breakpoints (fixes mobile being narrower) */
.bookings-section .panel{width:100%;padding:28px}

.about .cols{display:grid;grid-template-columns:1fr;gap:min(5vw,40px)}
.panel{background:linear-gradient(180deg,#10121a,#0b0c11);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow)}
.panel h3{margin-top:0;font-size:26px}
.list{display:grid;gap:12px;margin:0;padding:0}
/* keep list visually tidy across browsers: align bullet and text and avoid odd whitespace */
.list li{list-style:none;display:flex;gap:12px;align-items:flex-start}
.list li .bullet{width:9px;height:9px;background:#d9d9df;border-radius:50%;margin-top:6px;flex:0 0 9px}
/* fix for inline text blocks inside list items (prevents blank gaps before links) */
.list li .li-content{display:inline;line-height:1.35;color:var(--muted)}
/* ================= FOOTER ================= */
footer{
  padding:24px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  background: linear-gradient(180deg, var(--group-light-1) 0%, var(--group-light-2) 100%);
}

.footer-icons{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.footer-icons a{display:inline-flex;align-items:center;justify-content:center;padding:6px;border-radius:8px;background:transparent}
.footer-icons img.footer-icon{width:20px;height:20px;display:block}

.kicker{letter-spacing:.4em;text-transform:uppercase;color:var(--muted);font-weight:700;font-size:13px}
.section-title{font-size:32px;margin:0 0 18px}
.two-col{grid-template-columns:1fr 1fr;gap:18px}
.container, .grid, .panel {max-width:100%;box-sizing:border-box}

/* responsive behaviour */
/* step to 3 columns before the 2-column breakpoint to avoid overflow issues on zoom */
/* ================= RESPONSIVE: 1260px ================= */
@media (max-width:1260px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
/* ================= RESPONSIVE: 980px ================= */
@media (max-width:980px){
  .beyond-grid{grid-template-columns:1fr}
  /* when stacked, logo becomes inline and centered */
  .beyond-logo{position:static;display:block;margin:14px auto 0;right:auto;top:auto}
  .beyond .panel.has-logo{padding-right:18px}
  .bookings-inner{grid-template-columns:1fr}
  .event-image{order:2}
  .bookings-inner .panel{order:1}
  .hero-inner{grid-template-columns:1fr;gap:28px;padding:46px 0 8px}
  .hero-visual{grid-row:1}
  .hero-inner > div:first-child{grid-row:2;margin-top:12px}
  .about .cols{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .panel{padding:12px}
  .video-wrap{margin-top:8px;border-radius:10px}
  .watch-grid{grid-template-columns:1fr}
}
/* ================= RESPONSIVE: 580px ================= */
@media (max-width:580px){
  /* keep header links visible, centered and equal height; avoid wrapping to two lines */
  .nav-links{display:flex;gap:8px;flex-wrap:nowrap;justify-content:center;align-items:center;padding:8px 6px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .nav-links a{min-height:44px;padding:6px 10px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;flex:0 0 auto}
  nav{flex-direction:row;gap:6px}
  .nav-links a{padding:4px 6px;font-size:13px}
  .brand{flex-basis:100%;justify-content:center}
  .grid{grid-template-columns:1fr}
  .platforms .card{grid-template-columns:48px 1fr}
  .two-col{grid-template-columns:1fr;gap:18px}
  .watch-grid{grid-template-columns:1fr}
  /* make bookings panel full width on small screens (fixes earlier narrower behaviour) */
  .bookings-section .panel{width:100%}

  /* hide header when scrolled down (applies only when header.nav-hidden exists) */
  header.nav-hidden{ transform: translateY(-110%); }

  /* cookie banner on mobile: text above, buttons horizontally beside each other underneath */
  #ss-consent-banner { padding:12px; flex-direction:column; align-items:stretch; gap:10px; }
  #ss-consent-banner > div:last-child { display:flex; flex-direction:row; gap:8px; align-items:center; justify-content:flex-end; width:100%; }
  #ss-consent-banner button { width:auto; }
}
/* ================= RESPONSIVE: 520px ================= */
@media (max-width:520px){
  header{min-height:54px}
}

/* small styling for embed placeholders */
/* ================= EMBED PLACEHOLDERS ================= */
.embed-placeholder img{display:block;width:100%;height:100%;object-fit:cover}
.embed-placeholder:focus{outline:3px solid rgba(145,70,255,0.16);outline-offset:4px}
.embed-note{display:none} /* note overlay removed — thumbnails include their own text */

/* Footer legal layout adjustments */
.footer-legal{ flex-basis:100%; justify-content:center; margin-top:8px; }
@media (max-width: 640px){
  .footer-legal{ justify-content:space-between; }
}

/* === Mobile layout tweaks (surgical, no HTML/JS changes) === */

/* Footer (≤640px): icons above copyright; center both; legal links below & spread */
@media (max-width: 640px){
  footer .container{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  /* social icons row */
  footer .container > .footer-icons{
    order: 1;
    justify-content: center;
    width: 100%;
  }
  /* copyright/developer text (first div inside footer .container) */
  footer .container > div:first-child{
    order: 2;
    width: 100%;
    text-align: center;
  }
  /* cookie/privacy links */
  footer .container > .footer-legal{
    order: 3;
    width: 100%;
    justify-content: space-between; /* keep spread on narrow screens for tap targets */
  }
}

/* Header (≤580px): remove horizontal scroll; keep buttons on a single row.
   Let each button's label wrap to two lines if needed. */
@media (max-width: 580px){
  .nav-links{
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 4px;
    overflow: visible; /* override previous overflow-x */
  }
  .nav-links a{
    flex: 1 1 0;       /* share the row evenly */
    min-width: 0;      /* allow shrinking */
    padding: 6px 8px;  /* slightly tighter */
    line-height: 1.15;
    white-space: normal; /* allow 2-line labels */
  }
}

/* Social cards (≤480px): compact grid, smaller badges/icons, tightened spacing */
@media (max-width: 480px) {
  .platforms {  padding: 40px 0;  }
  .platforms .grid {  grid-template-columns: repeat(2, 1fr);  gap: 12px; }
  .platforms .card {    padding: 12px 14px;    gap: 4px;   }
  .platforms .card h3 {    font-size: 14px;    line-height: 1.2;    margin: 0;  }
  .platforms .card p {  font-size: 12px;  margin: 2px 0; }
  .platforms .card .go {  font-size: 12px;   margin-top: 2px;  }
  .platforms .card .icon-badge {  width: 38px;  height: 38px;  border-radius: 12px;  margin-right: 4px;  }
}

/* ================= COOKIE PREFERENCES MODAL ================= */
/* === Cookie Preferences Modal (site-wide) === */
#ss-consent-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:100001; display:flex; align-items:center; justify-content:center; padding:18px;
}
.ssc-panel{
  width:min(760px,96vw);
  background:linear-gradient(180deg,#0b0b0f,#060609);
  border:1px solid var(--line); border-radius:14px;
  padding:18px; color:var(--text); box-shadow:var(--shadow);
}
.ssc-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.ssc-title{ margin:0 0 6px; font-family:Alata,system-ui,sans-serif; }
.ssc-desc{ margin:0; color:var(--muted); font-size:13px; }

/* close button */
.ssc-close{
  background:transparent; border:1px solid rgba(255,255,255,.08);
  color:var(--muted); border-radius:10px; padding:6px 10px; cursor:pointer;
}

.ssc-group{ margin-top:14px; display:grid; gap:10px; }
.ssc-box{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-radius:12px; padding:12px; background:transparent;
}
.ssc-box.required{ background:rgba(255,255,255,.02); }
.ssc-box input[type="checkbox"]{  }
.ssc-box.required input[type="checkbox"]{  }
.ssc-label{ font-weight:700; }
.ssc-help{ color:var(--muted); font-size:13px; }

.ssc-actions{
  display:flex; gap:8px; justify-content:space-between; align-items:center;
  margin-top:14px; flex-wrap:wrap;
}
.ssc-btn{
  background:transparent; border:1px solid rgba(255,255,255,.08);
  padding:10px 14px; border-radius:10px; color:var(--muted); font-weight:700; cursor:pointer;
}
.ssc-btn.primary{
  background:linear-gradient(90deg,#f6f6f8,#d9d9df);
  border:0; color:#0a0a0a;
}

/* small-screen tweaks */
@media (max-width: 540px){
  .ssc-desc{ font-size:12px; }
  .ssc-help{ font-size:12px; }
}

/* Smooth scrolling for in-page anchors */
html { scroll-behavior: smooth; }

/* Give main sections a top offset so the fixed header doesn't cover anchors */
.hero, .platforms, .watch-listen, .beyond, .bookings-section {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* Clickable brand */
/* ================= BRAND (FOCUS/VISIBILITY) ================= */
.brand.is-clickable { cursor: pointer; }
.brand { -webkit-tap-highlight-color: transparent; }
.brand:focus { outline: none; }
.brand:focus:not(:focus-visible) { outline: none; }
.brand:focus-visible {
  outline: 2px solid rgba(145,70,255,.35);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Contact form helpers */
/* ================= CONTACT FORM HELPERS ================= */
.hpot{
  position: absolute !important;
  left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  -webkit-appearance: none; appearance: none;
}

/* Checkbox row for "Email me a copy" */
.chk { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text); }
.chk input { width:16px; height:16px; }

/* Button spinner */
.spinner {
  display:inline-block; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.85);
  border-radius:50%; margin-right:8px; vertical-align:-2px;
  animation: ss-spin .8s linear infinite;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }

/* Toast */
.toast {
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(10px);
  background:#0c0d13; color:var(--text); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px; z-index:100002;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.success { border-color:#2a5; }
.toast.error { border-color:#f66; }

/* Form status messages (smaller + colored) */
.form-note{ font-size:13px; color:var(--muted); }
.form-note.form-success{ color:#2acb6b; } /* green */
.form-note.form-error{ color:#ff6b6b; }   /* red */

/* === Live status badge — hover & focus when it acts like a link === */
#liveBadge {
  /* smooth visual feedback (honours your global reduced-motion rule) */
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Only when the badge is live-linked (set by JS via data-live-link="1") */
#liveBadge[data-live-link="1"]:hover {
  background: rgba(255,255,255,.06);
  border-color: #2b2d44; /* subtle lift */
  cursor: pointer;       /* just in case JS didn’t set it yet */
}

/* Clear keyboard focus ring, consistent with your brand focus style */
#liveBadge[data-live-link="1"]:focus-visible {
  outline: 2px solid rgba(145,70,255,.35);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px rgba(145,70,255,.12);
}

/* === iOS Safari fix: prevent auto-zoom on inputs === */
@media (max-width: 480px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important; /* stops Safari from zooming */
    line-height: 1.2;
  }

  /* Adjust padding so inputs don’t look too tall after font bump */
  #bookingForm input,
  #bookingForm textarea,
  #bookingForm select {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Let Safari respect our sizes instead of “helpfully” scaling text */
html { -webkit-text-size-adjust: 100%; }




/* --- Cookie banner: ensure Accept text is readable on light button --- */
#ss-consent-banner #ss-accept { color:#0a0a0a; font-weight:800; }

/* --- Cookie banner: keep the short description on one line on desktop --- */
#ss-consent-desc { white-space: nowrap; }
@media (max-width:580px){
  #ss-consent-desc { white-space: normal !important; }
}

/* --- Toggle switches (cookies panel + contact form "Email me a copy") --- */
.ssc-box input[type="checkbox"],
.chk input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #2a2b36;
  border: 1px solid var(--line);
  outline: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
  margin: 0;
  flex: 0 0 auto;
}

.ssc-box input[type="checkbox"]::after,
.chk input[type="checkbox"]::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: transform .2s ease;
}

.ssc-box input[type="checkbox"]:checked,
.chk input[type="checkbox"]:checked{
  background: var(--tw);
  border-color: transparent;
}

.ssc-box input[type="checkbox"]:checked::after,
.chk input[type="checkbox"]:checked::after{
  transform: translateX(20px);
}

.ssc-box input[type="checkbox"]:disabled,
.chk input[type="checkbox"]:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* adjust "Email me a copy" switch to be slightly smaller */
.chk input[type="checkbox"]{
  width: 40px;
  height: 22px;
}
.chk input[type="checkbox"]::after{
  width: 18px;
  height: 18px;
  top: 2px;
  left: 2px;
  transform: translateX(0);
}
.chk input[type="checkbox"]:checked::after{ transform: translateX(18px); }

/* Align items nicely in cookie boxes */
.ssc-box{ align-items: center; }


/* Keyboard focus for custom switches */
.ssc-box input[type="checkbox"]:focus-visible,
.chk input[type="checkbox"]:focus-visible{
  outline: 2px solid rgba(145,70,255,.35);
  outline-offset: 2px;
}


/* --- Toggle switch corrections (v2) — center knob in both states --- */
.ssc-box input[type="checkbox"]::after {
  top: 50%;
  left: 2px;
  width: 20px;
  height: 20px;
  transform: translate(0, -50%);
}
.ssc-box input[type="checkbox"]:checked::after {
  transform: translate(20px, -50%);
}

/* Smaller variant used for "Email me a copy" */
.chk input[type="checkbox"]::after {
  top: 50%;
  left: 2px;
  width: 18px;
  height: 18px;
  transform: translate(0, -50%);
}
.chk input[type="checkbox"]:checked::after {
  transform: translate(18px, -50%);
}