/* ==========================================================================
   theme.css — Open Oman design system (07-DESIGN-SYSTEM §2–§3, §5, §7).

   Forked from the Best Muscat theme.css STRUCTURE: tokens → base → primitives →
   footer. Loaded AFTER styles.css and BEFORE the component sheets, so it both
   introduces the --oo-* tokens and re-points every legacy --bm-* / --brand token
   the forked component CSS (admin-pro, detail, listing, microsite, for-business,
   home) still reads. One palette on the page, never two.

   PALETTE RATIONALE — derived from the land, AA-checked on white:
     sea-900   the Gulf at dusk         → structure (headers, footer, primary buttons)
     sea-600   interactive              → links, focus rings (AA on white)
     dune-500  Sharqiyah sand           → merit + CTAs-of-value (ratings, featured, book)
     dune-700  dune as TEXT on white
     palm-600  success / "open now" / season-active
     rock-900  Hajar basalt             → ink
   Neutrals are warm sand-tinted, same logic as Best Muscat: a curated travel
   guide, not a SaaS dashboard.

   CATEGORY ACCENTS (hubs + micro-sites): desert=dune, diving/coast=sea-400,
   mountains=rock+palm, culture/forts=terracotta, wildlife=palm. A dive centre
   must never look like a desert camp.

   Edit with Write/Edit tools or python file scripts only — never a shell
   heredoc (gotcha #4) — then run `npm run qa:controlchars`.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --oo-sea-900: #0A2E3D;
  --oo-sea-800: #0C3B4E;
  --oo-sea-700: #0D5468;
  --oo-sea-600: #0E6B84;   /* interactive: links, focus. AA on white (5.9:1) */
  --oo-sea-500: #1A889F;
  --oo-sea-400: #2FA3BE;   /* decorative accents only */
  --oo-sea-050: #E8F3F6;

  --oo-dune-700: #8F5E1F;  /* dune that is legible as TEXT on white (5.0:1) */
  --oo-dune-600: #A8722B;
  --oo-dune-500: #C98A3B;  /* badge/fill dune: ratings, featured, "book" */
  --oo-dune-400: #DBA65E;
  --oo-dune-050: #FBF1E2;

  --oo-palm-700: #21634A;
  --oo-palm-600: #2E7D5B;  /* success, open now, season-active (4.6:1) */
  --oo-palm-050: #E6F3EC;

  --oo-terracotta-600: #A4552E;  /* culture / forts accent */
  --oo-terracotta-050: #F8ECE5;

  --oo-rock-900: #1E1B16;  /* ink */
  --oo-rock-700: #3F3A31;  /* secondary text */
  --oo-rock-500: #6B655B;  /* meta, captions (5.2:1) */
  --oo-rock-300: #9C9588;  /* placeholders, disabled */

  /* ---- Neutrals (warm sand-tinted) ------------------------------------ */
  --oo-page:      #FBF9F5;
  --oo-surface:   #FFFFFF;
  --oo-panel:     #F2EEE6;
  --oo-line:      #E7E1D6;
  --oo-line-soft: #F1ECE3;

  /* ---- Semantic -------------------------------------------------------- */
  --oo-success: var(--oo-palm-600);
  --oo-success-bg: var(--oo-palm-050);
  --oo-danger:  #A4262C;
  --oo-danger-bg: #FBEBEC;
  --oo-warn:    var(--oo-dune-700);
  --oo-warn-bg: var(--oo-dune-050);
  --oo-khareef: #4A7FA5;   /* season ribbon: monsoon months */
  --oo-whatsapp: #25D366;
  --oo-whatsapp-ink: #075E54;

  /* ---- Category accents ----------------------------------------------- */
  --oo-cat-desert: var(--oo-dune-500);
  --oo-cat-coast: var(--oo-sea-400);
  --oo-cat-mountain: var(--oo-palm-700);
  --oo-cat-culture: var(--oo-terracotta-600);
  --oo-cat-wildlife: var(--oo-palm-600);

  /* ---- Typography ------------------------------------------------------ */
  /* Display: Fraunces (Source Serif 4 fallback) — editorial, travel-magazine warmth.
     UI/body: Inter. Arabic: Noto Naskh Arabic at 1.95 line-height (proven). */
  --oo-font-display: "Fraunces", "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --oo-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --oo-font-arabic: "Noto Naskh Arabic", "Segoe UI", "Geeza Pro", "Traditional Arabic", serif;

  --oo-text-xs:   0.75rem;
  --oo-text-sm:   0.8125rem;
  --oo-text-base: 0.9375rem;
  --oo-text-md:   1rem;
  --oo-text-lg:   1.125rem;
  --oo-text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --oo-text-2xl:  clamp(1.5rem, 1.28rem + 1.0vw, 2rem);
  --oo-text-3xl:  clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);
  --oo-text-4xl:  clamp(2.25rem, 1.6rem + 2.9vw, 3.75rem);

  /* ---- Space / radii / elevation / motion / layout -------------------- */
  --oo-1: 4px;  --oo-2: 8px;  --oo-3: 12px; --oo-4: 16px; --oo-5: 20px; --oo-6: 24px;
  --oo-8: 32px; --oo-10: 40px; --oo-12: 48px; --oo-16: 64px; --oo-20: 80px; --oo-24: 96px;
  --oo-r-sm: 8px; --oo-r: 12px; --oo-r-lg: 16px; --oo-r-xl: 22px; --oo-r-pill: 999px;
  --oo-shadow-xs: 0 1px 2px rgba(10, 46, 61, .06);
  --oo-shadow-sm: 0 1px 2px rgba(10, 46, 61, .06), 0 2px 6px rgba(10, 46, 61, .05);
  --oo-shadow:    0 1px 3px rgba(10, 46, 61, .07), 0 6px 16px rgba(10, 46, 61, .07);
  --oo-shadow-lg: 0 2px 6px rgba(10, 46, 61, .08), 0 16px 36px rgba(10, 46, 61, .11);
  --oo-ease: cubic-bezier(.2, .7, .3, 1);
  --oo-fast: .14s var(--oo-ease);
  --oo-med:  .24s var(--oo-ease);
  --oo-container: 1180px;
  --oo-container-narrow: 780px;
  --oo-pad: clamp(16px, 4vw, 28px);
  --oo-scrim: linear-gradient(180deg, rgba(10,46,61,0) 30%, rgba(10,46,61,.72) 100%);

  /* ---- Legacy token bridge (forked component sheets read these) ------- */
  --bm-navy-900: var(--oo-sea-900); --bm-navy-800: var(--oo-sea-800); --bm-navy-700: var(--oo-sea-700);
  --bm-navy-600: var(--oo-sea-600); --bm-navy-050: var(--oo-sea-050);
  --bm-teal-700: var(--oo-sea-700); --bm-teal-600: var(--oo-sea-600); --bm-teal-500: var(--oo-sea-500);
  --bm-teal-400: var(--oo-sea-400); --bm-teal-050: var(--oo-sea-050);
  --bm-gold-700: var(--oo-dune-700); --bm-gold-600: var(--oo-dune-600); --bm-gold-500: var(--oo-dune-500);
  --bm-gold-400: var(--oo-dune-400); --bm-gold-050: var(--oo-dune-050);
  --bm-ink: var(--oo-rock-900); --bm-ink-soft: var(--oo-rock-700); --bm-muted: var(--oo-rock-500); --bm-faint: var(--oo-rock-300);
  --bm-line: var(--oo-line); --bm-line-soft: var(--oo-line-soft);
  --bm-surface: var(--oo-surface); --bm-surface-2: var(--oo-page); --bm-surface-3: var(--oo-panel);
  --bm-success: var(--oo-success); --bm-success-bg: var(--oo-success-bg); --bm-danger: var(--oo-danger); --bm-danger-bg: var(--oo-danger-bg);
  --bm-whatsapp: var(--oo-whatsapp); --bm-whatsapp-ink: var(--oo-whatsapp-ink);
  --bm-font-display: var(--oo-font-display); --bm-font-body: var(--oo-font-body); --bm-font-arabic: var(--oo-font-arabic);
  --bm-text-xs: var(--oo-text-xs); --bm-text-sm: var(--oo-text-sm); --bm-text-base: var(--oo-text-base); --bm-text-md: var(--oo-text-md);
  --bm-text-lg: var(--oo-text-lg); --bm-text-xl: var(--oo-text-xl); --bm-text-2xl: var(--oo-text-2xl); --bm-text-3xl: var(--oo-text-3xl); --bm-text-4xl: var(--oo-text-4xl);
  --bm-1: var(--oo-1); --bm-2: var(--oo-2); --bm-3: var(--oo-3); --bm-4: var(--oo-4); --bm-5: var(--oo-5); --bm-6: var(--oo-6);
  --bm-8: var(--oo-8); --bm-10: var(--oo-10); --bm-12: var(--oo-12); --bm-16: var(--oo-16); --bm-20: var(--oo-20); --bm-24: var(--oo-24);
  --bm-r-sm: var(--oo-r-sm); --bm-r: var(--oo-r); --bm-r-lg: var(--oo-r-lg); --bm-r-xl: var(--oo-r-xl); --bm-r-pill: var(--oo-r-pill);
  --bm-shadow-xs: var(--oo-shadow-xs); --bm-shadow-sm: var(--oo-shadow-sm); --bm-shadow: var(--oo-shadow); --bm-shadow-lg: var(--oo-shadow-lg); --bm-shadow-xl: var(--oo-shadow-lg);
  --bm-ease: var(--oo-ease); --bm-fast: var(--oo-fast); --bm-med: var(--oo-med);
  --bm-container: var(--oo-container); --bm-container-narrow: var(--oo-container-narrow); --bm-pad: var(--oo-pad);
  --maxw: var(--oo-container);
  --brand: var(--oo-sea-600);
  --muted: var(--oo-rock-500);
  --border: var(--oo-line);
  --bg: var(--oo-page);
  --chip: var(--oo-panel);
  --chip-on: var(--oo-sea-050);
  --site-header-h: 68px;
}

/* ==========================================================================
   Base
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--oo-font-body);
  font-size: var(--oo-text-base);
  line-height: 1.6;
  color: var(--oo-rock-900);
  background: var(--oo-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}
h1, h2, h3, h4, .oo-display {
  font-family: var(--oo-font-display);
  color: var(--oo-sea-900);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.011em;
  text-wrap: balance;
}
h1 { font-size: var(--oo-text-3xl); }
h2 { font-size: var(--oo-text-2xl); }
h3 { font-size: var(--oo-text-lg); }
p { text-wrap: pretty; }
a { color: var(--oo-sea-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--oo-sea-700); }

/* Arabic: correct face and looser leading; RTL pages rely on logical properties
   throughout, so nothing needs mirroring by hand. */
[lang="ar"], [dir="rtl"] { font-family: var(--oo-font-arabic); line-height: 1.95; letter-spacing: 0; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: var(--oo-font-arabic); letter-spacing: 0; line-height: 1.5; font-weight: 700; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--oo-sea-600);
  outline-offset: 2px;
  border-radius: var(--oo-r-sm);
}
::selection { background: var(--oo-sea-050); color: var(--oo-sea-900); }
img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Shared primitives
   ========================================================================== */
.oo-container { max-width: var(--oo-container); margin-inline: auto; padding-inline: var(--oo-pad); }
.oo-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--oo-4); margin-block-end: var(--oo-5); }
.oo-sechead h2 { margin: 0 0 2px; }
.oo-sechead p { margin: 0; color: var(--oo-rock-500); font-size: var(--oo-text-base); }
.oo-eyebrow {
  font-family: var(--oo-font-body); font-size: var(--oo-text-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--oo-sea-600); margin: 0 0 var(--oo-2);
}
[dir="rtl"] .oo-eyebrow { letter-spacing: 0; font-family: var(--oo-font-arabic); }

.oo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: var(--oo-text-base); font-weight: 600;
  padding: 11px 20px; border-radius: var(--oo-r-sm); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--oo-fast), border-color var(--oo-fast), box-shadow var(--oo-fast), transform var(--oo-fast);
}
.oo-btn:active { transform: translateY(1px); }
.oo-btn--primary { background: var(--oo-sea-900); color: #fff; box-shadow: var(--oo-shadow-sm); }
.oo-btn--primary:hover { background: var(--oo-sea-800); color: #fff; box-shadow: var(--oo-shadow); }
.oo-btn--dune { background: var(--oo-dune-500); color: var(--oo-rock-900); }
.oo-btn--dune:hover { background: var(--oo-dune-400); color: var(--oo-rock-900); }
.oo-btn--ghost { background: var(--oo-surface); color: var(--oo-sea-900); border-color: var(--oo-line); }
.oo-btn--ghost:hover { border-color: var(--oo-sea-900); background: var(--oo-sea-050); }

.oo-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--oo-text-xs); font-weight: 700;
  padding: 3px 9px; border-radius: var(--oo-r-pill); border: 1px solid transparent; white-space: nowrap;
}
.oo-badge--dune     { background: var(--oo-dune-050); color: var(--oo-dune-700); border-color: #ECD7B3; }
.oo-badge--verified { background: var(--oo-sea-050); color: var(--oo-sea-700); border-color: #B9DCE5; }
.oo-badge--palm     { background: var(--oo-palm-050); color: var(--oo-palm-700); border-color: #BBDDCB; }
.oo-badge--neutral  { background: var(--oo-panel); color: var(--oo-rock-700); border-color: var(--oo-line); }
.oo-badge--warn     { background: var(--oo-warn-bg); color: var(--oo-warn); border-color: #ECD7B3; border-style: dashed; }

.oo-card { background: var(--oo-surface); border: 1px solid var(--oo-line); border-radius: var(--oo-r-lg); box-shadow: var(--oo-shadow-xs); }
.oo-tabular { font-variant-numeric: tabular-nums; }
.oo-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Category ambience band fallback: a gradient stands in until the ambience library
   exists (07 §6). NEVER a fabricated photo of a real place. */
.oo-hero-fallback { background: linear-gradient(135deg, var(--oo-sea-900), var(--oo-sea-600) 55%, var(--oo-dune-500)); }
.oo-hero-fallback[data-cat="desert"]   { background: linear-gradient(135deg, var(--oo-dune-700), var(--oo-dune-400)); }
.oo-hero-fallback[data-cat="beaches"], .oo-hero-fallback[data-cat="islands"] { background: linear-gradient(135deg, var(--oo-sea-800), var(--oo-sea-400)); }
.oo-hero-fallback[data-cat="mountains"], .oo-hero-fallback[data-cat="wadis"], .oo-hero-fallback[data-cat="caves"], .oo-hero-fallback[data-cat="springs"] { background: linear-gradient(135deg, var(--oo-rock-900), var(--oo-palm-700)); }
.oo-hero-fallback[data-cat="forts"], .oo-hero-fallback[data-cat="heritage"], .oo-hero-fallback[data-cat="museums"], .oo-hero-fallback[data-cat="souqs"] { background: linear-gradient(135deg, #5E2E17, var(--oo-terracotta-600)); }
.oo-hero-fallback[data-cat="wildlife"], .oo-hero-fallback[data-cat="parks"] { background: linear-gradient(135deg, var(--oo-palm-700), var(--oo-sea-500)); }

/* ==========================================================================
   Header
   ========================================================================== */
.oo-header { position: sticky; top: 0; z-index: 40; background: rgba(251,249,245,.92); backdrop-filter: blur(8px); border-block-end: 1px solid var(--oo-line); }
.oo-header-inner { max-width: var(--oo-container); margin-inline: auto; padding: 10px var(--oo-pad); display: flex; align-items: center; gap: var(--oo-4); min-height: var(--site-header-h); }
.oo-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-inline-start: auto; }
.oo-nav a { text-decoration: none; color: var(--oo-rock-700); font-weight: 600; font-size: var(--oo-text-sm); padding: 7px 10px; border-radius: var(--oo-r-sm); }
.oo-nav a:hover, .oo-nav a.active { background: var(--oo-sea-050); color: var(--oo-sea-800); }
.oo-lang { font-size: var(--oo-text-sm); font-weight: 600; text-decoration: none; padding: 7px 12px; border: 1px solid var(--oo-line); border-radius: var(--oo-r-pill); color: var(--oo-sea-900); background: var(--oo-surface); }
.oo-lang[lang="ar"] { font-family: var(--oo-font-arabic); }
@media (max-width: 720px) { .oo-nav { display: none; } }

/* ==========================================================================
   Wordmark  (07 §1 — typographic `open` light + `Oman` semibold serif + arc mark)
   ========================================================================== */
.oo-wordmark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--oo-sea-900); }
.oo-wordmark .oo-mark { flex: none; overflow: visible; filter: drop-shadow(0 1px 1px rgba(10,46,61,.08)); transition: transform var(--oo-med); }
.oo-wordmark:hover .oo-mark { transform: rotate(-6deg); }
.oo-wm-stack { display: grid; gap: 1px; }
.oo-wordmark .oo-wm-text { font-family: var(--oo-font-display); font-size: 1.5rem; line-height: 1; letter-spacing: -.025em; white-space: nowrap; font-variation-settings: "opsz" 48; }
.oo-wordmark .oo-wm-text em { font-style: italic; font-weight: 300; color: var(--oo-sea-600); letter-spacing: -.01em; }
.oo-wordmark .oo-wm-text b { font-weight: 600; color: currentColor; }
.oo-wordmark .oo-wm-text[lang="ar"] { font-family: var(--oo-font-arabic); font-size: 1.4rem; letter-spacing: 0; }
.oo-wordmark .oo-wm-text[lang="ar"] em { font-style: normal; font-weight: 400; }
.oo-wm-tag { font-family: var(--oo-font-body); font-size: .58rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--oo-dune-700); white-space: nowrap; }
.oo-wm-tag[lang="ar"] { font-family: var(--oo-font-arabic); letter-spacing: 0; font-size: .72rem; text-transform: none; }
.oo-wordmark--light { color: #fff; }
.oo-wordmark--light .oo-wm-text em { color: var(--oo-sea-400); }
.oo-wordmark--light .oo-wm-tag { color: var(--oo-dune-400); }
.oo-wordmark--light .oo-mark { filter: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.oo-footer { background: var(--oo-sea-900); color: rgba(255,255,255,.72); font-size: var(--oo-text-base); }
.oo-footer-main { max-width: var(--oo-container); margin: 0 auto; padding: var(--oo-16) var(--oo-pad) var(--oo-10); display: grid; gap: var(--oo-8); grid-template-columns: 1.6fr repeat(3, 1fr); }
.oo-footer-brand p { color: rgba(255,255,255,.6); line-height: 1.65; max-width: 40ch; margin: var(--oo-4) 0 0; font-size: var(--oo-text-sm); }
.oo-footer-col h3 { font-family: var(--oo-font-body); font-size: var(--oo-text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oo-dune-400); margin: 0 0 var(--oo-4); }
[dir="rtl"] .oo-footer-col h3 { font-family: var(--oo-font-arabic); letter-spacing: 0; }
.oo-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.oo-footer-col a { color: rgba(255,255,255,.74); text-decoration: none; transition: color var(--oo-fast); }
.oo-footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.oo-footer-bottom { border-block-start: 1px solid rgba(255,255,255,.1); }
.oo-footer-legal { max-width: var(--oo-container); margin: 0 auto; padding: var(--oo-5) var(--oo-pad) var(--oo-2); display: flex; gap: var(--oo-5); flex-wrap: wrap; align-items: center; font-size: var(--oo-text-sm); color: rgba(255,255,255,.5); }
.oo-footer-legal a { color: rgba(255,255,255,.62); text-decoration: none; }
.oo-footer-legal a:hover { color: #fff; text-decoration: underline; }
.oo-footer-attrib { max-width: var(--oo-container); margin: 0 auto; padding: 0 var(--oo-pad) var(--oo-8); font-size: var(--oo-text-xs); line-height: 1.7; color: rgba(255,255,255,.42); max-width: 90ch; }
.oo-footer-attrib a { color: rgba(255,255,255,.55); }
@media (max-width: 900px) { .oo-footer-main { grid-template-columns: 1fr 1fr; gap: var(--oo-6); padding-block-start: var(--oo-12); } .oo-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .oo-footer-main { grid-template-columns: 1fr; } }

/* Legacy class bridge so forked components keep their layout until retouched. */
.bm-container { max-width: var(--oo-container); margin-inline: auto; padding-inline: var(--oo-pad); }
.bm-eyebrow { font-size: var(--oo-text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oo-sea-600); margin: 0 0 var(--oo-2); }
.bm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; padding: 11px 20px; border-radius: var(--oo-r-sm); border: 1px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; }
.bm-btn--primary, .bm-btn--teal { background: var(--oo-sea-900); color: #fff; }
.bm-btn--ghost { background: var(--oo-surface); color: var(--oo-sea-900); border-color: var(--oo-line); }
.bm-btn--gold { background: var(--oo-dune-500); color: var(--oo-rock-900); }
.bm-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--oo-text-xs); font-weight: 700; padding: 3px 9px; border-radius: var(--oo-r-pill); border: 1px solid transparent; white-space: nowrap; }
.bm-badge--gold { background: var(--oo-dune-050); color: var(--oo-dune-700); }
.bm-badge--verified { background: var(--oo-sea-050); color: var(--oo-sea-700); }
.bm-badge--neutral { background: var(--oo-panel); color: var(--oo-rock-700); border-color: var(--oo-line); }
.bm-card { background: var(--oo-surface); border: 1px solid var(--oo-line); border-radius: var(--oo-r-lg); box-shadow: var(--oo-shadow-xs); }
.bm-tabular { font-variant-numeric: tabular-nums; }
.bm-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }