/* =====================================================================
   Hisar Landing Engine — shared layer (loaded on all five pages, BEFORE
   the page stylesheet). Small on purpose: tokens, theme guard, a11y
   helpers and the few components introduced in 1.2.0. See DESIGN.md.
   Everything is scoped to #hisar-hajj (the wrapper render() prints), so
   nothing here can touch the theme header, footer or menus.
   ===================================================================== */
#hisar-hajj{
  --hle-navy:#071A33; --hle-navy-deep:#04101F; --hle-ink:#0F2338;
  --hle-gold:#C9A24B; --hle-gold-ink:#7E5F18; --hle-gold-soft:#E4C87A;
  --hle-turq:#087F83; --hle-turq-2:#55D6CF;
  --hle-ok:#0B7A43; --hle-warn:#8A5A00; --hle-err:#B4452F;
  --hle-warn-bg:#FFF6E0; --hle-err-bg:#FDECEA; --hle-info-bg:#EAF1F9;
  --hle-focus:#1B4A78;
}
/* Theme guard: theme rules such as `button{text-transform:uppercase}` or
   `.btn{background:#1e73be}` must not restyle landing buttons. :where()
   keeps specificity at (1,0,0) so every page rule still wins. */
#hisar-hajj :where(button, .btn, a.btn, input[type=submit], h1, h2, h3, h4, h5, h6){ text-transform:none; letter-spacing:normal; }
#hisar-hajj :where(a.btn){ background-color:transparent; }
#hisar-hajj :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline:3px solid var(--hle-focus); outline-offset:2px; }
#hisar-hajj .sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* "To be confirmed" — never an invented value (stars, distance, price). */
#hisar-hajj .tbc{ display:inline-block; font-size:.78em; font-weight:700; letter-spacing:.02em; color:var(--hle-warn); background:var(--hle-warn-bg); border:1px solid #EFD9A6; border-radius:999px; padding:1px 8px; line-height:1.5; vertical-align:1px; }

/* Inline spinner (buttons, loading notes). */
#hisar-hajj .spin{ display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:hleSpin .8s linear infinite; }
@keyframes hleSpin{ to{ transform:rotate(360deg); } }
#hisar-hajj [aria-busy="true"]{ cursor:progress; }

/* Field-level error text (both forms). */
#hisar-hajj .field-err{ margin:4px 0 0!important; font-size:12.5px; font-weight:700; color:var(--hle-err); line-height:1.35; }
#hisar-hajj [aria-invalid="true"]{ border-color:var(--hle-err)!important; box-shadow:0 0 0 2px rgba(180,69,47,.18)!important; }

/* Admin-only data panel (rendered only for logged-in administrators). */
#hisar-hajj .hle-admin-issues{ max-width:1180px; margin:10px auto; padding:10px 14px; border:2px dashed #B4452F; border-radius:10px; background:#fff; font:13px/1.45 system-ui,sans-serif; color:#1d2327; }
#hisar-hajj .hle-admin-issues summary{ cursor:pointer; font-weight:700; }
#hisar-hajj .hle-admin-issues li{ margin:4px 0; }
#hisar-hajj .hle-admin-issues .lvl-error{ color:#B4452F; }
#hisar-hajj .hle-admin-issues .lvl-warn{ color:#8A5A00; }

@media (prefers-reduced-motion: reduce){
  #hisar-hajj .spin{ animation-duration:2.4s; }
}

/* Hajj sub-navigation: all four pages visible on a 360–420 px phone (in 1.1.2
   "Support" was cut off at 390 px and only reachable by a hidden sideways scroll). */
@media (max-width:420px){
  #hisar-hajj .hajjbar .wrap .hb-links{ gap:.85rem; }
  #hisar-hajj .hajjbar .hb-links a{ font-size:.84rem; }
}
/* 1.4.0 — one rule so hiding anything with [hidden] actually hides it.
   The page hides the "from" price, notes and panels this way; a component
   rule with display:flex/grid used to win and an out-of-date price stayed
   on screen. Scoped to the landing wrapper, so the theme is untouched. */
.hle-scope [hidden]{ display:none !important; }