/* ============================================================
   Boqueria — fonts, tokens, base styles (ported from tokens.css)
   Red is reserved for reservation actions only.

   Flatsome note: Flatsome already owns .container / .section / .button,
   so prototype layout classes are namespaced .boq-*. Higher-specificity
   selectors (html body …) beat Flatsome's inline typography CSS.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: 'Knockout Feather'; src: url('../fonts/knockout-feath.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ITC AG Book'; src: url('../fonts/itc-ag-book.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ITC AG Book'; src: url('../fonts/itc-ag-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Avant Garde Demi'; src: url('../fonts/avantgarde-demi.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face {
	font-family: 'Antolio Light';
	src: url('../fonts/antolio-light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}


/* ---------- XDDD ---------- */
@font-face {
    font-family: 'itc-ag-book-local';
    src: url('../fonts/itc-ag-book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.itc-ag-book-local {
    font-family: 'itc-ag-book-local' !important;
    font-weight: 400 !important;
}



/* ---------- Tokens ---------- */
:root {
	--red: #c11f31;
	--red-hover: #a3182a;
	--brick: #a93c42;
	--churro: #eee5d3;
	--cream: #fff6ee;
	--charcoal: #454142;
	--ink: #171515;
	--night: #0e0d0d;
	--paper-line: rgba(69, 65, 66, 0.18);

	--font-display: 'Knockout Feather', 'Arial Narrow', 'Helvetica Neue', sans-serif;
	--font-body: 'ITC AG Book', 'Century Gothic', 'Segoe UI', sans-serif;
	--font-nav: 'Avant Garde Demi', 'Century Gothic', 'Segoe UI', sans-serif;
	--font-antolio: 'Antolio Light', 'ITC AG Book', 'Century Gothic', sans-serif;

	--space-section: clamp(4rem, 9vw, 7rem);
	--container: 1180px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--sticky-h: 64px;
	--radius: 4px;

	accent-color: var(--red);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

html body {
	background: var(--cream);
	color: var(--charcoal);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	caret-color: var(--red);
}

::selection { background: var(--red); color: var(--cream); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }

html body h1, html body h2, html body h3, html body h4,
html body .heading-font {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.05;
	color: var(--ink);
	text-wrap: balance;
}
html body .dark h1, html body .dark h2, html body .dark h3, html body .dark h4 { color: var(--cream); }


/* Page backgrounds: cream everywhere (Flatsome paints #wrapper / #main white) */
html body #wrapper, html body #main { background-color: var(--cream); }

/* Body links: charcoal + underline, like the prototype. Red belongs to booking. */
html body :where(#main .text, .entry-content, .boq-prose) a:where(:not(.btn):not(.button)) {
	color: var(--charcoal);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
html body :where(#main .text, .entry-content, .boq-prose) a:where(:not(.btn):not(.button)):hover { color: var(--ink); text-decoration-thickness: 2px; }

/* Paragraph measure, as the prototype */
html body :where(#main .text) p { max-width: 68ch; }

/* ---------- Layout helpers (namespaced) ---------- */
.boq-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.boq-section { padding-block: var(--space-section); }
.boq-title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.boq-prose p { max-width: 68ch; }

/* ---------- Buttons ----------
   In UX Builder: Button element → Advanced → Class:
     btn-book        red booking button (booking actions only)
     btn-outline     outlined ink button (add "light" for dark backgrounds)
     btn-small       compact size
   Also works on plain <a class="btn btn-book"> in custom HTML. */
html body .btn,
html body .button.btn-book,
html body .button.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px;
	margin: 0;
	padding: 0.35em 1.7em 0.25em;
	border-radius: 999px;
	border: 2px solid transparent;
	box-shadow: none;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.6;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out;
}
html body .btn:active,
html body .button.btn-book:active,
html body .button.btn-outline:active { transform: translateY(1px); }

html body .btn-book,
html body .button.btn-book { background: var(--red); border-color: var(--red); color: var(--cream); }
html body .btn-book:hover,
html body .button.btn-book:hover { background: var(--red-hover); border-color: var(--red-hover); color: var(--cream); }

html body .btn-outline,
html body .button.btn-outline { background: transparent; border-color: currentColor; color: var(--ink); }
html body .btn-outline:hover,
html body .button.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

html body .dark .btn-outline,
html body .btn-outline.light,
html body .button.btn-outline.light { color: var(--cream); }
html body .dark .btn-outline:hover,
html body .btn-outline.light:hover,
html body .button.btn-outline.light:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

html body .btn-small,
html body .button.btn-small { min-height: 44px; font-size: 1rem; padding-inline: 1.3em; }

/* ---------- Utility ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Flatsome Button element: its "primary" colour rule is .button.primary:not(.is-outline) (0,3,0).
   :not(#boq) lifts ours above it so btn-book / btn-outline look like the prototype. */
html body .button.btn-book:not(#boq) { background: var(--red); border-color: var(--red); color: var(--cream); }
html body .button.btn-book:not(#boq):hover { background: var(--red-hover); border-color: var(--red-hover); color: var(--cream); }
html body .button.btn-outline:not(#boq) { background: transparent; border-color: currentColor; color: var(--ink); }
html body .button.btn-outline:not(#boq):hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
html body .dark .button.btn-outline:not(#boq), html body .button.btn-outline.light:not(#boq) { color: var(--cream); border-color: currentColor; }
html body .dark .button.btn-outline:not(#boq):hover, html body .button.btn-outline.light:not(#boq):hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
html body .button.btn-book > span, html body .button.btn-outline > span { line-height: inherit; }

html body a:focus-visible, html body button:focus-visible, html body .button:focus-visible, html body input:focus-visible { outline-color: var(--red) !important; }
html body .boq-book-band a:focus-visible, html body .boq-book-band .button:focus-visible { outline-color: var(--cream) !important; }