/* Core foundation.
   Loaded first on every page, public and staff alike. It holds the resets, the
   design tokens, and the handful of primitives neither surface may own: the
   accessibility idioms (.sr-only, .skip-link), the protective notices
   (.read-only-banner, .test-payment-warning), the staff return tab that renders
   inside a public document, and the reduced-motion and print rules that apply
   to the document itself.

   Split out of public/assets/site.css. Placement is recorded in
   docs/theme-contract/stylesheet-ownership.json; source order within this file
   is the order those rules had in site.css. */

:root {
    --ink: #080b08;
    --ink-2: #11170f;
    --ink-3: #1c2519;
    --paper: #d8d1bf;
    --paper-2: #c8bea5;
    --paper-3: #a99f83;
    --muted: #5e6257;
    --olive: #364a32;
    --olive-light: #82906a;
    --signal: #aa9a6b;
    --signal-dark: #7f724e;
    --tan: #b29e72;
    --line: rgb(8 11 8 / 20%);
    --shell: min(1240px, calc(100vw - 48px));
    --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
    --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 3px;
}

.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;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    padding: 10px 16px;
    color: white;
    background: var(--signal);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: none;
}

.read-only-banner {
    position: relative;
    z-index: 46;
    padding: 12px 0;
    color: #fff4d1;
    background: #6b3d16;
}

.span-full {
    grid-column: 1 / -1;
}

.staff-return-tab {
    position: fixed;
    z-index: 55;
    top: 50%;
    left: 0;
    display: inline-flex;
    width: 46px;
    min-height: 156px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 12px 8px;
    color: white;
    border: 1px solid rgb(255 255 255 / 18%);
    border-left: 0;
    background: var(--ink);
    box-shadow: 0 14px 30px rgb(8 11 8 / 28%);
    transform: translateY(-50%);
    transition: width 160ms ease, background-color 160ms ease;
}

.staff-return-tab:hover,
.staff-return-tab:focus-visible {
    width: 50px;
    background: var(--olive);
}

.staff-return-tab-icon {
    color: var(--signal);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.staff-return-tab-label {
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

@media (max-width: 620px) {
    .staff-return-tab {
        width: 38px;
        min-height: 118px;
        gap: 7px;
        padding: 10px 6px;
    }

    .staff-return-tab:hover,
    .staff-return-tab:focus-visible {
        width: 42px;
    }

    .staff-return-tab-label {
        font-size: 9px;
    }
}

[data-condition-target] {
    transition: opacity 160ms ease;
}

@media (max-width: 820px) {
    :root {
        --shell: min(100% - 32px, 680px);
    }
}

/* "This payment is not real" is a safety notice, and every element that carries
   it also carries .form-errors — see views/booking-payment.php and eight others.
   The two rules set the same background and colour, so while both lived in one
   file the later one won and the notice was red. This rule belongs to the
   foundation so that no theme can suppress it, and the foundation loads first,
   which would hand the tie to .form-errors and render the warning as an ordinary
   form error. The class is repeated to raise this rule to (0,2,0): it then wins
   against any single-class rule whichever sheet that rule arrives in, including
   a theme's own .form-errors. Not !important, which would also outrank rules
   that legitimately need to win later, such as the print sheet. */

.test-payment-warning.test-payment-warning {
    border-color: #9a3d31;
    background: #fff0ed;
    color: #601e17;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    body {
        background: white;
    }
}