/* ═══════════════════════════════════════════════════════════
   desktop.css — overrides applied at ≥769px only
   Loaded conditionally via <link media="(min-width: 769px)">
   ═══════════════════════════════════════════════════════════ */

/* Per-view sticky headers now stick BELOW the global navbar */
.app-hd, .dt-hd, .sec-hd {
  top: 5.25rem;
}

/* ────────────────────────────────────────────────────────────
   DETAIL PAGE — tighter sizes on desktop
   ──────────────────────────────────────────────────────────── */
.dt-wrap { max-width: 820px; padding: 1.5rem 1.5rem 4rem; }
.dt-card { padding: 1.5rem 1.8rem 1.3rem; }
.dt-head { margin-bottom: 1.2rem; padding-bottom: .9rem; }
.dt-fav-btn { width: 36px; height: 36px; }
.dt-meta-line { font-size: .72rem; }
.dt-topic { font-size: .65rem; }

.dt-section-label { font-size: .66rem; margin-bottom: .7rem; letter-spacing: .14em; }

.dt-question-block { margin-bottom: 1.5rem; }
.dt-q { font-size: 1.4rem; line-height: 1.7; }

.dt-answer-block { margin-bottom: 1.5rem; }
.dt-a {
  font-size: 1.05rem;
  line-height: 1.95;
  max-width: none;
  width: 100%;
  text-align: justify;
  text-justify: inter-word;
  word-spacing: .02em;
}
.dt-a p { margin: 0 0 1em; }

.dt-actions { padding-top: 1.1rem; gap: .45rem; }
.dt-act { padding: .55rem .95rem; font-size: .8rem; gap: .4rem; }
.dt-act svg { width: 14px; height: 14px; }

.dt-source-line { font-size: .68rem; }

/* Prev/Next nav: a bit more compact */
.dt-nav { gap: .8rem; margin-top: 1.2rem; }
.dt-nav-card { padding: .9rem 1.1rem; gap: .8rem; }
.dt-nav-arrow { font-size: 1.35rem; }
.dt-nav-label { font-size: .65rem; }
.dt-nav-q { font-size: .88rem; }

/* Related: compact too */
.dt-related { margin-top: 1.5rem; }
.dt-related-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.dt-rel-card { padding: .8rem 1rem; min-height: 72px; }
.dt-rel-q { font-size: .88rem; line-height: 1.55; }

/* ────────────────────────────────────────────────────────────
   APP TOOLBAR — search input centered, full-width search
   ──────────────────────────────────────────────────────────── */
.hd-toolbar {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem .7rem;
}

/* Big "search input" that's actually a button opening the modal */
/* Inline live-search input */
.search-input-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem 1.2rem;
  background: var(--d3);
  border: 1.5px solid var(--br);
  border-radius: 999px;
  transition: border-color .2s, background .2s, box-shadow .2s;
  direction: rtl;
}
.search-input-wrap:hover { border-color: var(--gold-d); background: var(--d2); }
.search-input-wrap:focus-within {
  border-color: var(--gold);
  background: var(--d2);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, .15);
}
.search-input-wrap svg {
  color: var(--gold-d);
  opacity: .55;
  flex-shrink: 0;
  transition: opacity .2s;
}
.search-input-wrap:focus-within svg { opacity: .95; color: var(--gold); }

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Tajawal', sans-serif;
  font-size: .95rem;
  color: var(--t1);
  padding: .35rem 0;
  direction: rtl;
  min-width: 0;
}
.search-input::placeholder {
  color: var(--t3);
  opacity: .65;
  font-weight: 400;
}
/* Hide the native clear button on search inputs */
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

.search-clear {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--d4);
  border: 1px solid var(--br);
  border-radius: 50%;
  color: var(--t2);
  cursor: pointer;
  transition: all .15s ease;
  padding: 0;
}
.search-clear:hover {
  background: var(--gold);
  color: #080808;
  border-color: var(--gold);
}
.search-clear[hidden] { display: none; }

/* Favorites button — gold accent, prominent */
.fav-btn-top {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  gap: .45rem;
  padding: .65rem 1.15rem !important;
  background: var(--gold-bg) !important;
  border: 1.5px solid rgba(201, 168, 76, .4) !important;
  color: var(--gold-l) !important;
  font-size: .82rem !important;
  font-weight: 600;
  border-radius: 999px !important;
}
.fav-btn-top:hover {
  border-color: var(--gold) !important;
  background: rgba(201, 168, 76, .16) !important;
  color: var(--gold) !important;
}
.fav-btn-top.on {
  background: var(--gold) !important;
  color: #080808 !important;
  border-color: var(--gold) !important;
  box-shadow: 0 4px 16px rgba(201, 168, 76, .3);
}
.fav-btn-top .fav-count {
  font-size: .68rem;
  background: rgba(0, 0, 0, .15);
  padding: .08rem .42rem;
  border-radius: 100px;
  font-weight: 700;
}
.fav-btn-top.on .fav-count {
  background: rgba(0, 0, 0, .25);
  color: #080808;
}

/* View toggle: cleaner */
.hd-toolbar .view-tog {
  flex-shrink: 0;
  display: flex;
  gap: 0;
  background: var(--d3);
  border: 1.5px solid var(--br);
  border-radius: 10px;
  padding: 3px;
}
.hd-toolbar .vtbtn {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--t2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
}
.hd-toolbar .vtbtn:hover { color: var(--t1); }
.hd-toolbar .vtbtn.on {
  background: var(--gold);
  color: #080808;
}

/* Filter bar (topic chips) — same width as toolbar, centered */
.flt-bar {
  max-width: 920px;
  margin: 0 auto;
  border-top: none;
  padding: 0 1.5rem 1rem;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  overflow-x: visible;
}
.flt-lbl { display: none; }

/* ────────────────────────────────────────────────────────────
   FLOATING BACK-TO-TOP — appears after scrolling
   ──────────────────────────────────────────────────────────── */
.fab-top {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 150;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(9, 9, 9, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid var(--brh);
  color: var(--gold-l);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(.85);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.fab-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.fab-top:hover {
  background: var(--gold);
  color: #080808;
  border-color: var(--gold);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 28px rgba(201, 168, 76, .45);
}
.fab-top:active {
  transform: translateY(-1px) scale(.97);
}
[data-theme=light] .fab-top {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(120, 90, 30, .35);
  color: var(--gold-d);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
[data-theme=light] .fab-top:hover {
  background: var(--gold);
  color: #080808;
}

/* Result bar — text on right, fav + view-tog on left */
.res-bar {
  max-width: 1400px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.res-bar .res-txt {
  font-size: 1rem;
  letter-spacing: .01em;
}
.res-bar .res-txt strong {
  font-size: 1.08rem;
}
.res-actions {
  display: flex;
  align-items: center;
  gap: .8rem;
}

/* ────────────────────────────────────────────────────────────
   HERO — image right (full visible), text-block left, centered
   ──────────────────────────────────────────────────────────── */
.hero {
  min-height: calc(100vh - 5.25rem); /* fill viewport below navbar */
  display: flex;
  align-items: center;          /* perfect vertical center */
  justify-content: flex-end;    /* In RTL, flex-end = visual LEFT */
  position: relative;
  background: var(--d1);        /* dark fill behind contained image */
  overflow: hidden;
}

/* Show full image without cropping */
.hero-image {
  background: var(--d1);
}
.hero-image img {
  object-fit: contain;
  object-position: right center; /* anchor image to the right edge */
  /* Mask: LEFT fades long, BOTTOM fades, TOP and RIGHT stay solid */
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%,
      transparent 18%,
      rgba(0,0,0,.15) 30%,
      rgba(0,0,0,.5) 45%,
      rgba(0,0,0,.85) 60%,
      black 75%,
      black 100%);
  mask-image:
    linear-gradient(to right,
      transparent 0%,
      transparent 18%,
      rgba(0,0,0,.15) 30%,
      rgba(0,0,0,.5) 45%,
      rgba(0,0,0,.85) 60%,
      black 75%,
      black 100%);
}

/* Overlay: dark on the LEFT (where text sits) → fade toward image on RIGHT */
.hero-overlay {
  background:
    /* Horizontal only: dark on the LEFT (text area) → transparent toward image */
    linear-gradient(
      90deg,
      var(--d1) 0%,
      var(--d1) 22%,
      rgba(9, 9, 9, 0.85) 38%,
      rgba(9, 9, 9, 0.45) 55%,
      rgba(9, 9, 9, 0.10) 72%,
      transparent 85%
    );
}

[data-theme=light] .hero-overlay {
  background:
    linear-gradient(
      90deg,
      var(--d1) 0%,
      var(--d1) 22%,
      rgba(245, 240, 232, 0.85) 38%,
      rgba(245, 240, 232, 0.45) 55%,
      rgba(245, 240, 232, 0.10) 72%,
      transparent 85%
    );
}

/* Content block sits on the LEFT, internally centered */
.hero-content {
  max-width: 620px;
  padding: 0 4rem;
  margin-left: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Vertical rhythm */
.hero-badge { margin-bottom: 1.8rem; }
.hero-title {
  margin-bottom: 1.6rem;
  font-size: clamp(3.5rem, 7vw, 6rem);
}
.hero-stats { margin-bottom: 1.8rem; font-size: .9rem; }
.hero-stats strong { font-size: 1.15rem; }
.hero-features { margin-bottom: 1.5rem; gap: .9rem; font-size: .82rem; }
.hero-feature { padding: .42rem .85rem; }
.hero-disclaimer { margin-top: .5rem; font-size: .72rem; }

/* ────────────────────────────────────────────────────────────
   GLOBAL TOP BAR — sticky on every page
   ──────────────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(9, 9, 9, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--br);
}
[data-theme=light] .site-nav {
  background: rgba(245, 240, 232, 0.88);
}

/* The section nav strip — now a natural middle element of the navbar */
.landing-strip {
  position: static;
  transform: none;
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  gap: .4rem;
  align-items: center;
}

/* Clean text-only buttons: no background, no border, no active fill */
.landing-strip .sec-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 .9rem;
  border-radius: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--t1);
  font-family: 'Tajawal', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .18s ease, opacity .18s ease;
  white-space: nowrap;
  opacity: .82;
}
.landing-strip .sec-nav-btn:hover {
  opacity: 1;
  color: var(--gold-l);
  background: transparent;
  border-color: transparent;
}
.landing-strip .sec-nav-btn.on {
  opacity: 1;
  font-weight: 700;
  background: transparent;
  border-color: transparent;
  color: var(--t1);
  box-shadow: none;
}

[data-theme=light] .landing-strip .sec-nav-btn {
  color: var(--t1);
  background: transparent;
}
[data-theme=light] .landing-strip .sec-nav-btn:hover {
  color: var(--gold-d);
  background: transparent;
}
[data-theme=light] .landing-strip .sec-nav-btn.on {
  background: transparent;
  color: var(--t1);
}

/* ────────────────────────────────────────────────────────────
   TRUST STRIP — 3 columns desktop
   ──────────────────────────────────────────────────────────── */
.hero-strip {
  padding: 2.5rem 2rem;
}
.strip-tagline { font-size: 1.15rem; margin-bottom: 1.8rem; }
.strip-grid { gap: 1.4rem; }
.strip-card { padding: 1.5rem 1.6rem; }
.strip-card h3 { font-size: 1.15rem; }
.strip-card p { font-size: .85rem; }