/* ------------------------------------------------------------------
   Bunna — base layer: reset, RTL typography, layout containers and
   small utilities. Depends on tokens.css.
   ------------------------------------------------------------------ */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

/* In-page anchors stop below the sticky header: the mobile navbar is
   two–three rows (brand row + link row, which can wrap under ~370px),
   one row from 768px up — so mobile needs the taller clearance. */
section[id],
#main-content {
    scroll-margin-top: calc(var(--header-height) + 7rem);
}

@media (min-width: 48rem) {
    section[id],
    #main-content {
        scroll-margin-top: calc(var(--header-height) + var(--space-3));
    }
}

body {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-body);
    color: var(--color-text);
    background: var(--color-bg);
    /* Room for the mobile fixed bottom reservation bar */
    padding-bottom: 4.5rem;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    line-height: 1.4;
    color: var(--color-text);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Visible focus ring for keyboard navigation */
:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip link — visually hidden until focused via keyboard */
.skip-link {
    position: absolute;
    inset-inline-start: var(--space-3);
    top: -100%;
    z-index: 200;
    background: var(--color-primary);
    color: var(--color-surface);
    padding: var(--space-2) var(--space-4);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
    text-decoration: none;
}

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

/* Container — mobile-first (1rem gutters, capped and centered) */
.container {
    width: min(100% - 2rem, var(--container-max));
    margin-inline: auto;
}

/* Grid utilities — single column on mobile, multi-column at 768px */
.grid {
    display: grid;
    gap: var(--space-4);
}

.section {
    padding-block: var(--space-6);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-4);
}

/* Small utilities */
.text-center {
    text-align: center;
}

.muted {
    color: var(--color-text-muted);
}

/* Bottom reservation bar frees the viewport on larger screens */
@media (min-width: 48rem) {
    body {
        padding-bottom: 0;
    }

    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------- Scroll reveal ---------------------------
   JS adds [data-reveal] only to sections below the first screen, so
   without JS (or with reduced motion) content is never hidden.
   Sections are anchor targets: browsers scroll to the *transformed*
   box, so a translating section would land 24px off its scroll-margin.
   The rise therefore moves the section's inner container instead —
   the animation looks identical, the section box never moves. */
[data-reveal] {
    opacity: 0;
    transform: translateY(var(--space-4));
    transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

section[data-reveal] {
    transform: none;
}

section[data-reveal] > .container {
    transform: translateY(var(--space-4));
    transition: transform var(--transition-reveal);
}

section[data-reveal].is-visible > .container {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    section[data-reveal] > .container {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --------------------------- One-page bands --------------------------
   Sections run full width and stack in one scroll: generous vertical
   rhythm, then even ones paint white so the long page reads as
   alternating cream/white bands (odd sections show the body cream). */
#main-content > section {
    padding-block: var(--space-7);
}

#main-content > section:nth-of-type(even) {
    background: var(--color-surface);
}