/* ===========================================================================
   base.css — reset, document defaults, typography, accessibility primitives.
   Every directional property in this codebase is a CSS logical property so
   that dir="rtl" produces a genuinely mirrored layout from one stylesheet.
   =========================================================================== */

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

* { margin: 0; }

/* The HTML `hidden` attribute must always win. Its UA-stylesheet rule
   ([hidden] { display: none }) has the same specificity as any of our own
   single-class selectors (e.g. .field, .booking-result), and on a tie the
   later-declared rule wins — which is ours, since author styles load after
   the UA stylesheet. Without this, toggling `.hidden = true` on an element
   whose class sets its own `display` (flex, grid, inline-flex…) silently does
   nothing. This is exactly what `hidden` is supposed to guarantee, so it gets
   `!important` rather than a specificity fight repeated at every call site. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the sticky header */
  scroll-padding-block-start: calc(var(--header-h) + var(--emergency-bar-h) + var(--sp-4));
  -moz-tab-size: 2;
  tab-size: 2;
}

body {
  min-height: 100svh;
  background: var(--canvas);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  /* Nothing may ever cause a horizontal scrollbar. Decorative overflow is
     clipped at the section level, not hidden globally, so position:sticky
     keeps working. */
  overflow-x: clip;
}

img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
svg { flex: none; }

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: inherit;
}

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

fieldset { border: 0; padding: 0; min-inline-size: 0; }

legend { padding: 0; }

table { border-collapse: collapse; }

:target { scroll-margin-block-start: calc(var(--header-h) + var(--sp-6)); }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  color: var(--c-heading);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-3xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-family: var(--font-sans); font-weight: var(--fw-semibold); }

p { text-wrap: pretty; }

a {
  color: var(--c-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--c-link-hover); }

strong, b { font-weight: var(--fw-semibold); }

::selection { background: var(--brand-200); color: var(--ink-900); }

/* ── Focus — always visible, never removed ───────────────────────────────── */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Inputs get a ring instead of an offset outline so nothing is clipped */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--c-focus-ring);
}

/* ── Accessibility utilities ─────────────────────────────────────────────── */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: var(--z-skiplink);
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface);
  color: var(--brand-700);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  transform: translateY(calc(-100% - var(--sp-4)));
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Numeric runs — time ranges, phone numbers, addresses.
   In an RTL paragraph the bidi algorithm reorders "09:00–20:00" into
   "20:00–09:00", because the two digit runs are LTR islands separated by a
   neutral dash. Isolating them keeps the range readable in every language. */
.num {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Placeholder body copy marker — enabled via build.highlightPlaceholders */
.is-placeholder-copy {
  border-block-end: 1px dotted var(--accent-600);
  background: rgb(var(--rgb-accent) / 0.12);
}

/* ── Media wrapper (see mediaHTML() in build.js) ─────────────────────────── */
.media {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  background: var(--brand-50);
}

.media__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--media-position, center);
}

/* Neutral placeholder shown until real media is dropped into assets/ */
.media--placeholder {
  display: grid;
  place-items: center;
  background: var(--grad-placeholder);
  color: var(--brand-600);
  min-block-size: 8rem;
}

.media--placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 22% 28%, rgb(255 255 255 / 0.5), transparent 42%),
    radial-gradient(circle at 78% 76%, rgb(255 255 255 / 0.35), transparent 46%);
  pointer-events: none;
}

.media__glyph { position: relative; z-index: 1; opacity: 0.5; }

/* ── Icons ───────────────────────────────────────────────────────────────── */
.icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}

/* Directional glyphs must flip in RTL. Anything with .icon--flip mirrors. */
[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* ── Reduced motion — comprehensive, not cosmetic ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  /* Scroll-reveal elements must start visible, never mid-transition */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .emergency-bar, .mobile-actions,
  .booking-modal, .hero__canvas { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}