/* ============================================================
   Flagler Voice — base stylesheet
   Layout primitives, navigation, controls, forms, cards and the
   booking calendar. Page-specific rules live in each page's own
   <style> block (house convention).
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ margin:0; line-height:1.06; letter-spacing:-.02em; font-weight:700; }
h1,h2{ font-family:var(--display); }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
a{ color:var(--volt); text-decoration:none; }
a:hover{ color:var(--volt-bright); }
ul,ol{ margin:0 0 1em; padding-left:1.15em; }
hr{ border:0; border-top:1px solid var(--line); margin:var(--s6) 0; }
::selection{ background:var(--volt); color:var(--on-brand); }

/* ---------- Accessibility ---------- */
:focus-visible{
  outline:3px solid var(--line-focus); outline-offset:3px; border-radius:var(--r-sm);
}
.skip-link{
  position:absolute; left:var(--s4); top:-100px; z-index:var(--z-toast);
  background:var(--volt); color:var(--on-brand); padding:12px 20px;
  border-radius:var(--r-md); font-weight:600; transition:top var(--dur) var(--ease-out);
}
.skip-link:focus{ top:var(--s4); color:var(--on-brand); }
.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;
}
/* `hidden` must beat any author display rule that sets a layout mode. */
[hidden]{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s5); }
.wrap-narrow{ max-width:var(--wrap-narrow); }
@media (min-width:768px){ .wrap{ padding-inline:var(--s6); } }
.section{ padding-block:var(--s9); position:relative; }
.section-tight{ padding-block:var(--s8); }
@media (max-width:700px){
  .section{ padding-block:var(--s8); }
  .section-tight{ padding-block:var(--s7); }
}

/* Faint dotted broadcast grid — decorative, sits behind content. */
.grid-bg{ position:relative; }
.grid-bg::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 78%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 78%);
}
.grid-bg > *{ position:relative; z-index:1; }

/* ---------- Type helpers ---------- */
.label{
  font-family:var(--mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.label-volt{ color:var(--volt); }
.lede{ font-size:1.15rem; line-height:1.6; color:var(--fg-soft); max-width:60ch; }
.small{ font-size:var(--t-small); }
.muted{ color:var(--muted); }
.tabular{ font-variant-numeric:tabular-nums; }

/* Section opener: mono kicker + oversized display heading + rule. */
.opener{ margin-bottom:var(--s7); }
.opener .label{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); }
.opener .label::before{ content:""; width:32px; height:2px; background:var(--volt); flex:none; }
.opener h2{ font-size:var(--t-display); font-stretch:112%; }
.opener p{ margin-top:var(--s4); }

/* The "01 / 02" index numerals from the reference layouts. */
.numeral{
  display:block; margin-bottom:var(--s3);
  font-family:var(--display); font-weight:200; font-size:clamp(3rem,7vw,5.5rem);
  line-height:.8; color:transparent; -webkit-text-stroke:1px var(--line-strong);
  letter-spacing:-.04em; user-select:none;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:13px 26px; border-radius:var(--r-pill);
  font-family:var(--sans); font-size:var(--t-small); font-weight:600; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  touch-action:manipulation;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{ background:var(--volt); color:var(--on-brand); }
.btn-primary:hover{ background:var(--volt-bright); color:var(--on-brand); box-shadow:var(--glow-volt); }
.btn-primary:active{ background:var(--volt-deep); }
.btn-ghost{ background:transparent; color:var(--fg); border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--volt); color:var(--fg); }
.btn-quiet{ background:var(--surface-2); color:var(--fg); border-color:var(--line); }
.btn-quiet:hover{ background:var(--surface-3); color:var(--fg); }
.btn-danger{ background:transparent; color:var(--bad); border-color:rgba(255,107,99,.45); }
.btn-danger:hover{ background:var(--live-wash); color:var(--bad); }
.btn-sm{ min-height:44px; padding:10px 18px; font-size:.85rem; }
.btn-lg{ min-height:56px; padding:17px 34px; font-size:1rem; }
.btn-block{ width:100%; }
.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.42; cursor:not-allowed; box-shadow:none; pointer-events:none;
}
.btn.is-busy{ position:relative; color:transparent !important; pointer-events:none; }
.btn.is-busy::after{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  color:var(--on-brand); animation:spin .7s linear infinite;
}
.btn-ghost.is-busy::after,.btn-quiet.is-busy::after{ color:var(--fg); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Text link with an animated underline that does not shift layout. */
.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:600;
  font-size:var(--t-small); color:var(--volt);
}
.link-arrow svg{ width:16px; height:16px; transition:transform var(--dur) var(--ease-out); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- Navigation ---------- */
.nav{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(7,8,11,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; gap:var(--s5);
  height:var(--nav-h); max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s5);
}
@media (min-width:768px){ .nav-inner{ padding-inline:var(--s6); } }
.nav-logo{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-logo img,.nav-logo svg{ height:34px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:var(--s2); margin-left:auto; }
.nav-links a{
  padding:10px 14px; border-radius:var(--r-md); color:var(--fg-soft);
  font-size:var(--t-small); font-weight:500; transition:color var(--dur), background var(--dur);
}
.nav-links a:hover{ color:var(--fg); background:var(--surface-2); }
.nav-links a[aria-current="page"]{ color:var(--fg); }
.nav-links a[aria-current="page"]::after{
  content:""; display:block; height:2px; margin-top:5px; border-radius:2px; background:var(--volt);
}
.nav-cta{ display:flex; align-items:center; gap:var(--s3); margin-left:var(--s4); }
.nav-toggle{
  display:none; margin-left:auto; width:48px; height:48px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-strong); border-radius:var(--r-md);
  color:var(--fg); cursor:pointer;
}
.nav-toggle svg{ width:22px; height:22px; }
@media (max-width:1000px){
  .nav-toggle{ display:flex; }
  .nav-links,.nav-cta{
    display:none; position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--surface); border-bottom:1px solid var(--line); padding:var(--s3);
  }
  .nav.is-open .nav-links,.nav.is-open .nav-cta{ display:flex; }
  .nav.is-open .nav-cta{ top:auto; position:static; border-bottom:0; padding-top:0; gap:var(--s2); }
  .nav-links a{ padding:14px; }
  .nav-links a[aria-current="page"]::after{ width:32px; }
}

/* ---------- Vertical side rails (reference-layout detail) ---------- */
.rail{
  position:fixed; top:0; bottom:0; width:var(--rail); z-index:var(--z-rail);
  display:none; align-items:center; justify-content:center; pointer-events:none;
  border-inline:1px solid var(--line);
}
.rail-l{ left:0; border-left:0; }
.rail-r{ right:0; border-right:0; }
.rail span{
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
  writing-mode:vertical-rl;
}
.rail-l span{ transform:rotate(180deg); }
@media (min-width:1400px){ .rail{ display:flex; } }

/* ---------- ON AIR pill ---------- */
.onair{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px;
  border-radius:var(--r-pill); border:1px solid rgba(255,77,74,.4);
  background:var(--live-wash); color:var(--live);
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:.22em; text-transform:uppercase;
}
.onair::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--live); flex:none;
  animation:pulse 2s var(--ease-out) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); transition:border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.card-hover:hover{ border-color:var(--line-strong); background:var(--surface-2); }
.card h3{ font-size:var(--t-h3); margin-bottom:var(--s3); }

/* Grid helpers */
.grid{ display:grid; gap:var(--s5); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---------- Forms ---------- */
.field{ margin-bottom:var(--s5); }
.field > label,.field-label{
  display:block; margin-bottom:7px; font-size:var(--t-small); font-weight:600; color:var(--fg);
}
.field .req{ color:var(--live); margin-left:3px; }
.field .help{ display:block; margin-top:6px; font-size:.84rem; color:var(--muted); }
.field .err{ display:block; margin-top:7px; font-size:.84rem; color:var(--bad); font-weight:500; }
.field .err:empty{ display:none; }
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=date],input[type=time],input[type=number],input[type=url],select,textarea{
  width:100%; min-height:48px; padding:12px 14px;
  background:var(--surface-3); color:var(--fg);
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  font-family:var(--sans); font-size:1rem; line-height:1.4;
  transition:border-color var(--dur), box-shadow var(--dur);
}
textarea{ min-height:130px; resize:vertical; }
select{
  appearance:none; padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:18px;
}
input::placeholder,textarea::placeholder{ color:var(--muted); opacity:1; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--volt); box-shadow:0 0 0 3px var(--volt-wash);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid var(--line-focus); outline-offset:2px; }
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{ border-color:var(--bad); }
input:disabled,textarea:disabled,select:disabled{ opacity:.5; cursor:not-allowed; }
input[readonly]{ background:var(--surface-2); color:var(--fg-soft); }
fieldset{ border:0; padding:0; margin:0 0 var(--s5); }
legend{ padding:0; margin-bottom:var(--s3); font-size:var(--t-small); font-weight:600; }

.checkbox{ display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:var(--t-small); }
.checkbox input{ width:20px; height:20px; min-height:0; margin:2px 0 0; accent-color:var(--volt); flex:none; cursor:pointer; }

/* ---------- Alerts / toasts ---------- */
.alert{
  display:flex; gap:12px; padding:14px 16px; border-radius:var(--r-md);
  border:1px solid var(--line-strong); background:var(--surface-2);
  font-size:var(--t-small); margin-bottom:var(--s5);
}
.alert svg{ width:20px; height:20px; flex:none; margin-top:1px; }
.alert-good{ border-color:rgba(65,201,139,.4); background:rgba(65,201,139,.1); color:var(--good); }
.alert-bad{ border-color:rgba(255,107,99,.4); background:var(--live-wash); color:var(--bad); }
.alert-info{ border-color:rgba(55,180,240,.4); background:var(--volt-wash); color:var(--volt); }
.alert:empty{ display:none; }

.toast-host{
  position:fixed; bottom:var(--s5); left:50%; transform:translateX(-50%);
  z-index:var(--z-toast); display:flex; flex-direction:column; gap:var(--s2);
  width:min(440px, calc(100vw - 32px)); pointer-events:none;
}
.toast{
  display:flex; gap:11px; align-items:flex-start;
  padding:14px 17px; border-radius:var(--r-md); background:var(--surface-2);
  border:1px solid var(--line-strong); box-shadow:var(--sh-3);
  font-size:var(--t-small); animation:toast-in var(--dur) var(--ease-out);
}
.toast-good{ border-color:rgba(65,201,139,.45); }
.toast-bad{ border-color:rgba(255,107,99,.45); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(12px); } }

/* ---------- Tables ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.data{ width:100%; border-collapse:collapse; font-size:var(--t-small); min-width:600px; }
table.data th,table.data td{ padding:13px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
table.data th{
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:500; white-space:nowrap;
}
table.data tbody tr:hover{ background:var(--surface-2); }
table.data td.num{ font-variant-numeric:tabular-nums; }

/* ---------- Status chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line-strong); color:var(--fg-soft); white-space:nowrap;
}
.chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.chip-confirmed{ color:var(--good); border-color:rgba(65,201,139,.4); background:rgba(65,201,139,.1); }
.chip-pending{ color:var(--warn); border-color:rgba(240,180,64,.4); background:rgba(240,180,64,.1); }
.chip-cancelled{ color:var(--muted); }
.chip-done{ color:var(--volt); border-color:rgba(55,180,240,.4); background:var(--volt-wash); }

/* ---------- Booking calendar ---------- */
.cal{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); }
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4); }
.cal-title{ font-family:var(--display); font-size:1.35rem; font-weight:600; letter-spacing:-.01em; }
.cal-nav{ display:flex; gap:var(--s2); }
.cal-nav button{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-md);
  color:var(--fg); cursor:pointer; transition:background var(--dur), border-color var(--dur);
}
.cal-nav button:hover:not(:disabled){ background:var(--surface-3); border-color:var(--volt); }
.cal-nav button:disabled{ opacity:.35; cursor:not-allowed; }
.cal-nav svg{ width:18px; height:18px; }

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow{
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-align:center; padding-bottom:8px;
}
.cal-day{
  position:relative; aspect-ratio:1; min-height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--surface-2); border:1px solid transparent; border-radius:var(--r-md);
  color:var(--fg); font-size:var(--t-small); font-variant-numeric:tabular-nums;
  cursor:pointer; transition:background var(--dur) var(--ease-out), border-color var(--dur), color var(--dur);
  font-family:var(--sans);
}
.cal-day:hover:not(:disabled){ background:var(--surface-3); border-color:var(--volt-deep); }
.cal-day[aria-pressed="true"]{ background:var(--volt); color:var(--on-brand); font-weight:700; border-color:var(--volt); }
.cal-day:disabled{ background:transparent; color:var(--muted); opacity:.4; cursor:not-allowed; }
.cal-day.is-empty{ background:transparent; border:0; cursor:default; pointer-events:none; }
.cal-day.is-today{ border-color:var(--lilac); }
/* Availability is shown by a dot AND by the disabled state — never colour alone. */
.cal-day .dot{ width:4px; height:4px; border-radius:50%; background:var(--volt); }
.cal-day[aria-pressed="true"] .dot{ background:var(--on-brand); }
.cal-day:disabled .dot{ display:none; }

.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:var(--s2); }
.slot{
  min-height:48px; padding:12px 8px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--fg);
  font-family:var(--sans); font-size:var(--t-small); font-variant-numeric:tabular-nums;
  cursor:pointer; transition:background var(--dur) var(--ease-out), border-color var(--dur), color var(--dur);
}
.slot:hover{ background:var(--surface-3); border-color:var(--volt); }
.slot[aria-pressed="true"]{ background:var(--volt); border-color:var(--volt); color:var(--on-brand); font-weight:700; }

/* Skeleton placeholder — reserves height so slot loading never shifts layout. */
.skeleton{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite; border-radius:var(--r-md);
}
@keyframes shimmer{ to{ background-position:-200% 0; } }

/* ---------- Steps ---------- */
.steps{ display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s6); flex-wrap:wrap; }
.step{ display:flex; align-items:center; gap:9px; font-size:var(--t-small); color:var(--muted); }
.step .n{
  width:28px; height:28px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line-strong); font-family:var(--mono); font-size:.75rem;
}
.step.is-active{ color:var(--fg); font-weight:600; }
.step.is-active .n{ background:var(--volt); border-color:var(--volt); color:var(--on-brand); }
.step.is-done .n{ background:var(--volt-wash); border-color:var(--volt); color:var(--volt); }
.step-sep{ flex:1; min-width:16px; height:1px; background:var(--line); }

/* ---------- Empty state ---------- */
.empty{ text-align:center; padding:var(--s8) var(--s5); color:var(--muted); }
.empty svg{ width:44px; height:44px; margin:0 auto var(--s4); opacity:.5; }
.empty h3{ color:var(--fg-soft); font-size:var(--t-h3); margin-bottom:var(--s2); }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); background:var(--surface); padding-block:var(--s8) var(--s6); margin-top:var(--s9); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s6); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--s5); } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.footer h2{
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin-bottom:var(--s4);
}
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin-bottom:11px; }
.footer li a{ color:var(--fg-soft); font-size:var(--t-small); }
.footer li a:hover{ color:var(--volt); }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; align-items:center;
  margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line);
  font-size:.85rem; color:var(--muted);
}
.social{ display:flex; gap:var(--s2); }
.social a{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:var(--r-md); color:var(--fg-soft);
  transition:color var(--dur), border-color var(--dur), background var(--dur);
}
.social a:hover{ color:var(--volt); border-color:var(--volt); background:var(--volt-wash); }
.social svg{ width:19px; height:19px; }