/* ============================================================
   Slice: public pages (home, booking, messages)

   Built on the main site's shared stylesheet, loaded before this one, so
   every colour, radius and font here is one of its tokens. The rules from
   there hold here too: the brand orange (--cta-bg) is the only solid fill
   and is kept for the one action that books; the logo gradient is for the
   logo and thin rules; nothing that carries a backdrop-filter is ever
   transformed or animated.
   ============================================================ */

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: var(--bg-2);
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* --- Header -------------------------------------------------------------- */
.slice-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}
.slice-brand img { width: 34px; height: 34px; }

.slice-nav-end {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.slice-by {
    color: var(--text-2);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}
.slice-by:hover { color: var(--text); }

/* --- Page frame ------------------------------------------------------------ */
/* overflow-x: hidden from the shared sheet makes body a scroll box, which
   stops the confirm bar from sticking; clip hides overflow without that. */
body { overflow-x: clip; }

.slice-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 128px 20px 80px;
    min-height: calc(100vh - 140px);
}

/* Text that sits straight on the dot field gets a frosted plate behind it,
   sized to its content, as the main site's headings do. */
.book-hero,
.home-copy,
.home-how > .label,
.home-how > h2 {
    background: var(--bg-veil);
    -webkit-backdrop-filter: blur(44px);
    backdrop-filter: blur(44px);
    border-radius: var(--radius-lg);
}

.glass { border-radius: var(--radius-lg); }

/* --- Booking: the header block -------------------------------------------- */
.book-hero {
    padding: 1.6rem 1.75rem 1.75rem;
    margin: 0 -1.75rem 1.5rem;
}

.book-hero .eyebrow { margin-bottom: 0.9rem; }

.book-title {
    font-family: var(--font-hero);
    font-weight: 600;
    font-size: clamp(2.1rem, 5.4vw, 3.3rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.book-desc {
    margin-top: 0.9rem;
    max-width: 44rem;
    color: var(--text-2);
    font-size: 1.08rem;
}

.book-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.4rem;
}

.book-facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem 0.45rem 0.7rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: 0.9rem;
    font-weight: 600;
}

.book-facts strong { color: var(--text); font-weight: 800; white-space: nowrap; }
.book-facts li > span { min-width: 0; }

.book-facts svg,
.book-note svg,
.booking-where svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Notes: confirmation, errors, the "you are moving" line ------------- */
.book-note {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.95rem 1.2rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    color: var(--text);
}
.book-note svg { margin-top: 0.2rem; }
.book-note--ok { border-color: var(--accent); background: var(--accent-wash); }
.book-note--error { border-color: var(--accent-2); }
.book-note--error p { color: var(--text); font-weight: 700; }

/* --- Booking: the confirmed time ------------------------------------------- */
.booking-card { padding: 2rem 2rem 1.75rem; }

.booking-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

.booking-day {
    margin-top: 0.6rem;
    font-size: clamp(1.5rem, 3.6vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.booking-time {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.booking-where {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.3rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    overflow-wrap: anywhere;
}
.booking-where svg { margin-top: 0.25rem; }

.booking-answers {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.3rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}
.booking-answers dt { font-size: 0.82rem; font-weight: 700; color: var(--text-3); }
.booking-answers dd { overflow-wrap: anywhere; }

.booking-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.6rem;
}

.booking-rule {
    margin-top: 1rem;
    color: var(--text-2);
    font-size: 0.95rem;
}

/* --- A page or panel holding one message ---------------------------------- */
.slice-message {
    max-width: 560px;
    margin: 2rem auto;
    padding: 2.6rem 2rem;
    text-align: center;
}
.slice-message img { margin: 0 auto 1.2rem; display: block; }
.slice-message h1,
.slice-message h2 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.slice-message p { color: var(--text-2); }
.slice-message p + p { margin-top: 1rem; }

/* --- Booking form ---------------------------------------------------------- */
.book-form {
    display: grid;
    gap: 1.25rem;
}

.book-step { position: relative; padding: 1.6rem 1.6rem 1.7rem; }
/* Each glass panel is its own layer (backdrop-filter), and the sticky bar
   below is a later one, so an open dropdown would slide under the bar.
   Lifting the panel that holds an open list keeps it on top. */
.book-step:has(.select-list:not([hidden])) { z-index: 10; }

.book-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.book-step-head h2 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.2rem;
    font-weight: 800;
}

.step-num {
    width: 30px;
    height: 30px;
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-wash);
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 800;
}

.tz-switch {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
}
.tz-switch button {
    min-height: 34px;
    padding: 0.3rem 0.85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    font: 700 0.82rem/1 var(--font-body);
    cursor: pointer;
}
.tz-switch button[aria-pressed="true"] {
    background: var(--bg-2);
    color: var(--text);
    box-shadow: var(--shadow-1);
}

/* Without the script every open day is listed. With it, a calendar picks
   the day and only that day's times show. */
.slot-picker.is-enhanced {
    display: grid;
    grid-template-columns: minmax(0, 310px) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}
.slot-picker.is-enhanced .slot-day { display: none; }
.slot-picker.is-enhanced .slot-day.is-active { display: block; }

.slot-days { display: grid; gap: 1.5rem; min-width: 0; }

.slot-day { border: 0; min-width: 0; }

.slot-day legend {
    padding: 0;
    margin-bottom: 0.8rem;
    font-weight: 800;
    font-size: 1rem;
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 0.6rem;
}

.slot {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-height: 58px;
    padding: 0.65rem 0.9rem;
    border-radius: 14px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.slot input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.slot:hover { border-color: var(--text-3); background: var(--surface-2); }
.slot:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-wash);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.slot:has(input:disabled) { cursor: not-allowed; opacity: 0.5; background: transparent; }
.slot--mine:has(input:disabled) { opacity: 1; border-style: dashed; border-color: var(--accent-2); }

.slot-time {
    font-weight: 800;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
.slot-meta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-3);
}
.slot--mine .slot-meta { color: var(--accent-2); }

/* The month calendar */
.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.7rem;
}
.cal-month { font-weight: 800; }

.cal-nav {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.cal-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal-nav:hover:not(:disabled) { border-color: var(--line-2); background: var(--surface-2); }
.cal-nav:disabled { opacity: 0.3; cursor: default; }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.cal-wd {
    padding-bottom: 0.3rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-3);
}

.cal-day {
    position: relative;
    aspect-ratio: 1;
    min-height: 38px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-3);
    font: 600 0.92rem/1 var(--font-body);
    font-variant-numeric: tabular-nums;
}
.cal-day:disabled { opacity: 0.45; }
.cal-day.has-free {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--line);
}
.cal-day.has-free::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--accent);
}
.cal-day.has-free:hover { box-shadow: inset 0 0 0 1px var(--text-3); }
.cal-day[aria-pressed="true"] {
    background: var(--accent-wash);
    color: var(--accent);
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* --- Details ------------------------------------------------------------- */
.book-who {
    margin-bottom: 1.2rem;
    color: var(--text-2);
}
.book-who strong { color: var(--text); }

.book-form label em {
    font-style: normal;
    font-weight: 500;
    color: var(--text-3);
}

.book-form .form-group textarea { min-height: 110px; }

.form-check label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.form-check input {
    width: 20px;
    height: 20px;
    min-height: 0;
    margin-top: 0.15rem;
    flex: none;
    accent-color: var(--accent);
}

.field-error {
    margin-top: 0.4rem;
    color: var(--accent-2);
    font-size: 0.88rem;
    font-weight: 700;
}
.book-step > .field-error { margin: -0.4rem 0 1rem; }

[aria-invalid="true"] { border-color: var(--accent-2) !important; }

/* The bar with the chosen time and the one orange button. It sticks to the
   bottom of the screen while the form is in view. */
.book-submit {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.75rem 0.75rem 0.75rem 1.4rem;
    border-radius: 22px;
}

.book-picked {
    color: var(--text-2);
    font-weight: 600;
}
.book-picked.is-set { color: var(--text); font-weight: 800; }
.book-picked.is-error { color: var(--accent-2); font-weight: 800; }

.book-submit-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* --- Home ---------------------------------------------------------------- */
.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
    gap: 2rem;
    padding-top: 2rem;
}

.home-copy {
    padding: 1.75rem;
    margin-left: -1.75rem;
}

.home-title {
    font-family: var(--font-hero);
    font-weight: 600;
    font-size: clamp(2.8rem, 7.5vw, 5rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.home-lede {
    margin: 1.2rem 0 1.8rem;
    max-width: 34rem;
    color: var(--text-2);
    font-size: 1.15rem;
}

.home-mark img {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 30px 50px rgba(76, 84, 176, 0.35));
}

.home-how {
    margin-top: 5rem;
    text-align: center;
}
.home-how > .label { padding: 0.35rem 0.9rem; border-radius: 999px; }
.home-how > h2 {
    display: table;
    margin: 0 auto 2rem;
    padding: 0.2rem 1rem;
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
}

.home-steps {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.1rem;
    text-align: left;
}
.home-steps li {
    flex: 1 1 240px;
    max-width: 320px;
    padding: 1.6rem 1.5rem;
}
.home-steps h3 { margin: 1rem 0 0.4rem; font-size: 1.1rem; }
.home-steps p { color: var(--text-2); font-size: 0.97rem; }

.home-lost {
    display: table;
    margin: 2rem auto 0;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--bg-veil);
    -webkit-backdrop-filter: blur(44px);
    backdrop-filter: blur(44px);
    color: var(--text-2);
    font-size: 0.95rem;
}

/* --- Footer ----------------------------------------------------------------
   The shared sheet styles every <footer> for the main site's big footer;
   this one is a single row, so its padding is reset here. */
footer.slice-foot {
    padding: 0;
    border-top: 1px solid var(--line);
    background: var(--bg-veil);
}
.slice-foot-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.4rem 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 1.5rem;
}
.slice-foot-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-2);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
}
.slice-foot-brand img { display: block; flex: none; height: 26px; width: auto; }
.slice-foot-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    color: var(--text-3);
    font-size: 0.9rem;
}
.slice-foot a { color: var(--text-2); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.slice-foot a:hover { color: var(--text); }

/* --- Phone background --------------------------------------------------
   Below 769px the dot field is not loaded (see layout.php). Phones get the
   admin's soft blobs instead: the logo colours, blurred, fixed behind. */
.atmosphere {
    display: none;
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.55;
}
[data-theme="dark"] .atmosphere { opacity: 0.3; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); }
.blob-indigo { width: 90vw; height: 90vw; left: -30vw; top: -20vw; background: var(--sli-indigo); opacity: 0.55; }
.blob-violet { width: 70vw; height: 70vw; right: -30vw; top: 45vh; background: var(--sli-violet); opacity: 0.4; }
.blob-rose { width: 60vw; height: 60vw; right: -20vw; top: -10vw; background: var(--sli-rose); opacity: 0.35; }
.blob-amber { width: 70vw; height: 70vw; left: -20vw; bottom: -20vw; background: var(--sli-amber); opacity: 0.45; }

@media (max-width: 768px) {
    .atmosphere { display: block; }
    /* if a desktop window is narrowed after the dot field loaded */
    .ambient, .cursor-halo, .cursor-dot { display: none !important; }
    html.has-cursor, html.has-cursor * { cursor: revert; }
}

/* --- Smaller screens ------------------------------------------------------ */
@media (max-width: 860px) {
    .slot-picker.is-enhanced { grid-template-columns: minmax(0, 1fr); }
    .cal { max-width: 380px; width: 100%; margin: 0 auto; }
    .home-hero { grid-template-columns: minmax(0, 1fr); }
    .home-mark { order: -1; }
    .home-mark img { max-width: 200px; }
}

@media (max-width: 600px) {
    .slice-main { padding: 104px 16px 64px; }
    .slice-by { display: none; }
    .book-hero, .home-copy { margin-left: -1rem; margin-right: -1rem; padding: 1.25rem 1rem; }
    /* on a phone the facts are a short list rather than pills that wrap
       into lopsided two-line capsules */
    .book-facts { flex-direction: column; align-items: stretch; gap: 0.45rem; }
    .book-facts li { align-items: flex-start; border-radius: 14px; padding: 0.6rem 0.85rem; line-height: 1.45; }
    .book-facts li svg { margin-top: 0.15rem; }
    .book-step, .booking-card { padding: 1.3rem 1.1rem; }
    .book-submit { padding: 0.8rem; border-radius: 18px; }
    .book-picked { width: 100%; text-align: center; }
    .book-submit-actions, .book-submit-actions .btn { width: 100%; }
    .booking-actions .btn { width: 100%; }
    .slot-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
    .slice-foot-inner { flex-direction: column; justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .slot, .cal-nav { transition: none; }
}