/* =====================================================================
   Base: reset, typography, layout primitives, utilities.
   Loaded after tokens.css and before components.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   The `hidden` attribute wins, always.

   A component that sets `display: flex` or `display: grid` on its own
   class overrides the browser's default `[hidden] { display: none }` —
   same specificity, later rule. The result is an invisible element that
   still fills the screen and swallows every click on the page. This
   rule makes that impossible.
   --------------------------------------------------------------------- */
[hidden] { display: none !important; }

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-height) + var(--space-4));

  /*
   * A safety net, not a fix. Nothing on the site should overflow
   * sideways, and the layouts are built so nothing does — but in RTL an
   * overflow spills LEFT, where it is easy to miss in testing and very
   * obvious to a visitor as a page that slides around under their
   * thumb. This makes that failure mode impossible.
   *
   * `clip` and not `hidden`: hidden would make this a scroll container
   * and silently kill every `position: sticky` inside it. Browsers
   * without `clip` support ignore the line.
   */
  overflow-x: clip;
}

body {
  font-family: var(--font, var(--font-ar));
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

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

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

a:hover {
  color: var(--primary-hover);
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: 0;
  border-block-start: 1px solid var(--border);
  margin-block: var(--space-6);
}

/* Numbers read better in a proportional Latin face even inside Arabic
   text — prices, dates and phone numbers all benefit. */
.num,
time,
.price,
[data-numeric] {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: embed;
}

/* ---------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p {
  text-wrap: pretty;
}

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

small { font-size: var(--text-sm); }

.muted    { color: var(--text-muted); }
.soft     { color: var(--text-soft); }
.tiny     { font-size: var(--text-xs); }
.lead     { font-size: var(--text-lg); color: var(--text-muted); line-height: var(--leading-snug); }
.eyebrow  {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------------------------------------------------------------------
   Focus — visible for keyboard users, quiet for mouse users
   --------------------------------------------------------------------- */
:focus {
  outline: none;
}

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

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: -100px;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--primary);
  color: var(--primary-ink);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: inset-block-start var(--duration) var(--ease);
}

.skip-link:focus {
  inset-block-start: 0;
  color: var(--primary-ink);
}

/* ---------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

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

.section--tight { padding-block: var(--space-10); }
.section--warm  { background: var(--surface-warm); }

.stack > * + * { margin-block-start: var(--space-4); }
.stack-sm > * + * { margin-block-start: var(--space-2); }
.stack-lg > * + * { margin-block-start: var(--space-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster--tight { gap: var(--space-2); }
.cluster--between { justify-content: space-between; }

.grid {
  display: grid;
  gap: var(--space-5);
}

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

.grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ---------------------------------------------------------------------
   Section headings
   --------------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-8);
}

.section-head__title {
  font-size: var(--text-2xl);
  margin-block-end: var(--space-1);
}

.section-head__subtitle {
  color: var(--text-muted);
  font-size: var(--text-base);
}

.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------- */
.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;
}

.hidden { display: none !important; }

.text-start  { text-align: start; }
.text-center { text-align: center; }
.text-end    { text-align: end; }

.flex-1 { flex: 1 1 0%; }
.w-full { width: 100%; }

.mt-0 { margin-block-start: 0; }
.mb-0 { margin-block-end: 0; }
.mt-2 { margin-block-start: var(--space-2); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-6 { margin-block-start: var(--space-6); }
.mb-2 { margin-block-end: var(--space-2); }
.mb-4 { margin-block-end: var(--space-4); }
.mb-6 { margin-block-end: var(--space-6); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clamp-2,
.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Icons inherit the text colour and sit on the text baseline. */
.icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}

.icon--sm { inline-size: 1em; block-size: 1em; }
.icon--lg { inline-size: 1.5em; block-size: 1.5em; }

/* Arrows and chevrons need to mirror in RTL; the flip token does it. */
.icon--directional {
  transform: scaleX(var(--flip, 1));
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: var(--text-2xl); }
}

@media (max-width: 640px) {
  :root {
    --space-16: 3rem;
    --space-20: 3.5rem;
  }

  .container { padding-inline: var(--space-4); }
  .section   { padding-block: var(--space-10); }

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

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

  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------
   Print — a booking confirmation is printed often enough to matter
   --------------------------------------------------------------------- */
@media print {
  body { background: #fff; }

  .no-print,
  .site-header,
  .site-footer,
  .admin-sidebar,
  .admin-topbar { display: none !important; }

  a[href]::after { content: ""; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}