/* ==========================================================================
   theme.css — Best Muscat design system.

   Loaded AFTER styles.css and BEFORE the component sheets, so it can both
   introduce the new --bm-* tokens and correct the legacy ones (--brand,
   --border, --muted…) that the older CSS still reads.

   PALETTE RATIONALE
   The brand mark is a gold Islamic rosette on deep navy with a teal
   brush-lettered wordmark. The site, however, was built on Google-blue
   (#0b57d0) — a colour that appears nowhere in the logo and clashes with it.
   Everything below is sampled from the mark itself: navy for structure and
   authority, teal for interaction, gold for merit (ratings, featured,
   awards). The neutrals are warmed very slightly so white surfaces sit against
   a sand-tinted page rather than a clinical grey one, which suits a curated
   city guide far better than a SaaS dashboard palette.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --bm-navy-900: #0B2739;
  --bm-navy-800: #0E3049;
  --bm-navy-700: #123B5E;   /* the rosette field — primary structural colour */
  --bm-navy-600: #1B4E76;
  --bm-navy-050: #EEF3F8;

  --bm-teal-700: #0E6979;
  --bm-teal-600: #127D91;   /* interactive: links, focus. AA on white (4.6:1) */
  --bm-teal-500: #199FB6;
  --bm-teal-400: #2AA7BD;   /* the wordmark teal — decorative use only */
  --bm-teal-050: #E6F5F8;

  --bm-gold-700: #8A6A10;   /* gold that is legible as TEXT on white */
  --bm-gold-600: #B08618;
  --bm-gold-500: #C79A1E;   /* badge/fill gold */
  --bm-gold-400: #E0B838;
  --bm-gold-050: #FBF3DE;

  /* ---- Neutrals (warm-tinted) ------------------------------------------ */
  --bm-ink:      #141A22;   /* body text */
  --bm-ink-soft: #3D4650;   /* secondary text */
  --bm-muted:    #6B7280;   /* meta, captions */
  --bm-faint:    #9AA1A9;   /* placeholders, disabled */
  --bm-line:     #E5E1D9;   /* hairline borders */
  --bm-line-soft:#F0EDE7;
  --bm-surface:  #FFFFFF;
  --bm-surface-2:#FAF8F4;   /* page background — warm off-white */
  --bm-surface-3:#F4F1EB;   /* inset panels */

  /* ---- Semantic -------------------------------------------------------- */
  --bm-success: #17694A;
  --bm-success-bg: #E6F4EE;
  --bm-danger:  #A4262C;
  --bm-danger-bg: #FBEBEC;
  --bm-whatsapp: #25D366;
  --bm-whatsapp-ink: #075E54;

  /* ---- Typography ------------------------------------------------------ */
  /* Display face is a serif: this is an editorial guide, not an app. Body and
     UI stay on a neutral grotesque for legibility at small sizes. */
  --bm-font-display: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --bm-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Arabic content is rendered in a face that actually has the glyphs — Inter
     does not — otherwise the browser picks an arbitrary fallback per platform. */
  --bm-font-arabic: "Noto Naskh Arabic", "Segoe UI", "Geeza Pro", "Traditional Arabic", serif;

  /* Fluid type scale, 1.25 ratio at the small end opening to ~1.33 */
  --bm-text-xs:   0.75rem;
  --bm-text-sm:   0.8125rem;
  --bm-text-base: 0.9375rem;
  --bm-text-md:   1rem;
  --bm-text-lg:   1.125rem;
  --bm-text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --bm-text-2xl:  clamp(1.5rem, 1.28rem + 1.0vw, 2rem);
  --bm-text-3xl:  clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);
  --bm-text-4xl:  clamp(2.25rem, 1.6rem + 2.9vw, 3.75rem);

  /* ---- Space scale ----------------------------------------------------- */
  --bm-1: 4px;   --bm-2: 8px;   --bm-3: 12px;  --bm-4: 16px;
  --bm-5: 20px;  --bm-6: 24px;  --bm-8: 32px;  --bm-10: 40px;
  --bm-12: 48px; --bm-16: 64px; --bm-20: 80px; --bm-24: 96px;

  /* ---- Radii ----------------------------------------------------------- */
  --bm-r-sm: 8px;  --bm-r: 12px;  --bm-r-lg: 16px;
  --bm-r-xl: 22px; --bm-r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  /* Two-layer shadows (tight contact + broad ambient) read as real depth;
     a single large blur reads as a smudge. Tinted navy, never pure black. */
  --bm-shadow-xs: 0 1px 2px rgba(18, 59, 94, .06);
  --bm-shadow-sm: 0 1px 2px rgba(18, 59, 94, .06), 0 2px 6px rgba(18, 59, 94, .05);
  --bm-shadow:    0 1px 3px rgba(18, 59, 94, .07), 0 6px 16px rgba(18, 59, 94, .07);
  --bm-shadow-lg: 0 2px 6px rgba(18, 59, 94, .08), 0 16px 36px rgba(18, 59, 94, .11);
  --bm-shadow-xl: 0 4px 12px rgba(18, 59, 94, .10), 0 28px 60px rgba(18, 59, 94, .16);

  /* ---- Motion ---------------------------------------------------------- */
  --bm-ease: cubic-bezier(.2, .7, .3, 1);
  --bm-fast: .14s var(--bm-ease);
  --bm-med:  .24s var(--bm-ease);

  /* ---- Layout ---------------------------------------------------------- */
  --bm-container: 1180px;
  --bm-container-narrow: 780px;
  --bm-pad: clamp(16px, 4vw, 28px);

  /* ---- Legacy token overrides ----------------------------------------- */
  /* styles.css and the older component sheets still read these names. Pointing
     them at the new palette re-skins everything that has not been rewritten,
     rather than leaving two competing colour systems on the page. */
  --maxw: var(--bm-container);
  --brand: var(--bm-teal-600);
  --muted: var(--bm-muted);
  --border: var(--bm-line);
  --bg: var(--bm-surface-2);
  --chip: var(--bm-surface-3);
  --chip-on: var(--bm-teal-050);
  --site-header-h: 68px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

body {
  font-family: var(--bm-font-body);
  font-size: var(--bm-text-base);
  line-height: 1.6;
  color: var(--bm-ink);
  background: var(--bm-surface-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Proportional figures read better in prose; tabular ones are opted into
     locally on ratings and counts. */
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4, .bm-display {
  font-family: var(--bm-font-display);
  color: var(--bm-navy-900);
  font-weight: 600;
  line-height: 1.15;
  /* Display serifs set tighter than their default sidebearings suggest. */
  letter-spacing: -0.011em;
  text-wrap: balance;
}
h1 { font-size: var(--bm-text-3xl); }
h2 { font-size: var(--bm-text-2xl); }
h3 { font-size: var(--bm-text-lg); }

p { text-wrap: pretty; }

a { color: var(--bm-teal-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bm-teal-700); }

/* Arabic blocks: correct face, and a looser leading — Naskh needs more room
   than a Latin grotesque at the same size. */
[lang="ar"], [dir="rtl"] {
  font-family: var(--bm-font-arabic);
  line-height: 1.95;
  letter-spacing: 0;
}

/* A single, visible focus treatment everywhere, instead of the browser default
   being suppressed piecemeal by component CSS. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bm-teal-600);
  outline-offset: 2px;
  border-radius: var(--bm-r-sm);
}

::selection { background: var(--bm-teal-050); color: var(--bm-navy-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
   ========================================================================== */

.bm-container { max-width: var(--bm-container); margin-inline: auto; padding-inline: var(--bm-pad); }

/* Section heading with an optional standfirst and a trailing link. */
.bm-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bm-4); margin-bottom: var(--bm-5); }
.bm-sechead h2 { margin: 0 0 2px; }
.bm-sechead p { margin: 0; color: var(--bm-muted); font-size: var(--bm-text-base); }
.bm-sechead .bm-seclink {
  flex: none; font-weight: 600; font-size: var(--bm-text-base); text-decoration: none;
  color: var(--bm-teal-600); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--bm-fast);
}
.bm-sechead .bm-seclink:hover { gap: 10px; }

/* Small caps eyebrow above a heading. */
.bm-eyebrow {
  font-family: var(--bm-font-body);
  font-size: var(--bm-text-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bm-teal-600); margin: 0 0 var(--bm-2);
}

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

/* Badges ------------------------------------------------------------------- */
.bm-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--bm-font-body); font-size: var(--bm-text-xs); font-weight: 700;
  letter-spacing: .01em; padding: 3px 9px; border-radius: var(--bm-r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.bm-badge--gold     { background: var(--bm-gold-050); color: var(--bm-gold-700); border-color: #EBD9A6; }
.bm-badge--verified { background: var(--bm-teal-050); color: var(--bm-teal-700); border-color: #B9E0E8; }
.bm-badge--neutral  { background: var(--bm-surface-3); color: var(--bm-ink-soft); border-color: var(--bm-line); }

/* Cards -------------------------------------------------------------------- */
.bm-card {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-lg);
  box-shadow: var(--bm-shadow-xs);
}

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

/* ==========================================================================
   Site footer
   ========================================================================== */
.bm-footer {
  background: var(--bm-navy-900); color: rgba(255,255,255,.72);
  font-size: var(--bm-text-base); margin-top: 0;
}
.bm-footer-main {
  max-width: var(--bm-container); margin: 0 auto;
  padding: var(--bm-16) var(--bm-pad) var(--bm-10);
  display: grid; gap: var(--bm-8);
  grid-template-columns: 1.6fr repeat(3, 1fr);
}
.bm-footer-lockup {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--bm-gold-400); margin-bottom: var(--bm-4);
}
.bm-footer-lockup svg { flex: none; overflow: visible; }
/* The rosette's petals are clipped to the outer ring, exactly as in the mark. */
.bm-footer-lockup svg g { clip-path: circle(30px at 32px 32px); }
.bm-footer-lockup span {
  font-family: var(--bm-font-display); font-size: 1.5rem; font-weight: 600;
  color: #fff; line-height: 1; letter-spacing: -.02em;
}
.bm-footer-lockup em { font-style: normal; font-weight: 400; color: var(--bm-teal-400); }
.bm-footer-brand p { color: rgba(255,255,255,.6); line-height: 1.65; max-width: 40ch; margin: 0; font-size: var(--bm-text-sm); }
.bm-footer-col h3 {
  font-family: var(--bm-font-body); font-size: var(--bm-text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bm-gold-400);
  margin: 0 0 var(--bm-4);
}
.bm-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bm-footer-col a { color: rgba(255,255,255,.74); text-decoration: none; transition: color var(--bm-fast); }
.bm-footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.bm-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
}
.bm-footer-legal {
  max-width: var(--bm-container); margin: 0 auto;
  padding: var(--bm-5) var(--bm-pad) var(--bm-2);
  display: flex; gap: var(--bm-5); flex-wrap: wrap; align-items: center;
  font-size: var(--bm-text-sm); color: rgba(255,255,255,.5);
}
.bm-footer-legal a { color: rgba(255,255,255,.62); text-decoration: none; }
.bm-footer-legal a:hover { color: #fff; text-decoration: underline; }

/* The disclaimer is required but does not deserve four lines of body copy at
   the bottom of every page — it collapses instead. */
.bm-footer-disclaimer { max-width: var(--bm-container); margin: 0 auto; padding: 0 var(--bm-pad) var(--bm-8); }
.bm-footer-disclaimer summary {
  cursor: pointer; font-size: var(--bm-text-xs); color: rgba(255,255,255,.42);
  list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
}
.bm-footer-disclaimer summary::-webkit-details-marker { display: none; }
.bm-footer-disclaimer summary::after { content: "＋"; font-size: .9em; opacity: .7; }
.bm-footer-disclaimer[open] summary::after { content: "－"; }
.bm-footer-disclaimer summary:hover { color: rgba(255,255,255,.7); }
.bm-footer-disclaimer p {
  font-size: var(--bm-text-xs); line-height: 1.7; color: rgba(255,255,255,.42);
  max-width: 90ch; margin: var(--bm-2) 0 0;
}

@media (max-width: 900px) {
  .bm-footer-main { grid-template-columns: 1fr 1fr; gap: var(--bm-6); padding-top: var(--bm-12); }
  .bm-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .bm-footer-main { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Bottom banner  (.hero--bottom, styled in styles.css — retuned here)
   ========================================================================== */
.hero { padding: var(--bm-12) var(--bm-pad) var(--bm-8); }
.hero-card {
  max-width: var(--bm-container);
  background: var(--bm-navy-800);
  border-radius: var(--bm-r-xl);
  padding: clamp(36px, 5vw, 56px) var(--bm-6);
  box-shadow: var(--bm-shadow-lg);
  position: relative; overflow: hidden; isolation: isolate;
}
.hero-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23C79A1E' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='44'/%3E%3Ccircle cx='88' cy='0' r='44'/%3E%3Ccircle cx='0' cy='88' r='44'/%3E%3Ccircle cx='88' cy='88' r='44'/%3E%3Ccircle cx='44' cy='44' r='44'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88px 88px; opacity: .11;
}
.hero-mark { display: block; margin: 0 auto var(--bm-4); color: var(--bm-gold-400); overflow: visible; }
.hero-mark g { clip-path: circle(30px at 32px 32px); }
.hero-title {
  font-family: var(--bm-font-display); font-size: var(--bm-text-2xl) !important;
  font-weight: 600; color: #fff; margin: 0 0 var(--bm-3) !important; letter-spacing: -.02em;
}
.hero-subtitle { font-size: var(--bm-text-md); color: rgba(255,255,255,.8); margin: 0 auto var(--bm-6); max-width: 60ch; }
.hero-try { gap: 8px; margin-top: 0; }
.hero-try > span {
  font-size: var(--bm-text-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.5); opacity: 1;
}
.hero .chip {
  font-size: var(--bm-text-base); font-weight: 500; padding: 7px 15px;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px);
  transition: background var(--bm-fast), border-color var(--bm-fast);
}
.hero .chip:hover {
  background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.42);
  color: #fff; transform: none; box-shadow: none;
}