/* Reset, typography, form defaults, accessibility utilities. */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* a double tap does not zoom the page (pinch zoom stays: WCAG 1.4.4) */
    touch-action: manipulation;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: var(--lh);
    color: var(--ink);
    background: var(--page-glow) no-repeat, var(--bg-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Embedded in another site: the page behind shows through and the frame is only as tall as the booking. */
html.is-widget,
html.is-widget body,
html.is-framed,
html.is-framed body {
    background: transparent;
}

/* A page with its own colour scheme (color-scheme: light/dark) gets an opaque canvas in an iframe whenever the scheme differs from
   the one of the site around it: the frame must stay see-through in every scheme and layout, the colours of the booking are tokens. */
:root.is-widget,
:root.is-framed {
    color-scheme: normal !important;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--s-2);
    line-height: 1.25;
    font-weight: 650;
}

h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p {
    margin: 0 0 var(--s-3);
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img, svg {
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: var(--op-accent-ink);
    text-decoration: underline;
    text-underline-offset: .15em;
}

a:hover {
    text-decoration-thickness: 2px;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--s-4) 0;
}

strong, b {
    font-weight: 650;
}

small, .text-small {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

[hidden] {
    display: none !important;
}

.hide {
    display: none;
}

:focus,
:focus-visible {
    outline: none;
}

/* the focus ring shows while the visitor works with the keyboard (js/core/input-modality.js), never after a click or a tap;
   the browser's :focus-visible still decides which element shows it */
:root[data-input="keyboard"] :focus-visible {
    box-shadow: var(--focus);
    border-radius: var(--r-sm);
}

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

button {
    cursor: pointer;
}

button:disabled, input:disabled, select:disabled, textarea:disabled {
    cursor: not-allowed;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: var(--s-3);
    top: -4rem;
    z-index: 2000;
    padding: var(--s-2) var(--s-3);
    background: var(--bg-card);
    color: var(--ink);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
}

.skip-link:focus {
    top: var(--s-3);
}

.fatal {
    margin: var(--s-6) auto;
    max-width: var(--content-max);
    padding: var(--s-4);
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: var(--r-md);
}

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

/* Windows high contrast / forced colours: keep focus and selection visible without colour. */
@media (forced-colors: active) {
    :root[data-input="keyboard"] :focus-visible {
        outline: 3px solid Highlight;
        box-shadow: none;
    }
}