/* ==========================================================================
   Battuta landing page - stylesheet
   Standalone marketing surface. No build step, no external requests, and no
   relationship to any other surface in this repository (owner ruling LP-R3).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts - self-hosted, replacing the export's Google Fonts <link>.
   IBM Plex Sans Arabic v1.101, SIL OFL 1.1. See fonts/OFL.txt.
   font-display:swap matches the export's "&display=swap".
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Document styles - lifted verbatim from the export's <helmet><style>.
   Unchanged: same selectors, same declarations, same breakpoints.
   -------------------------------------------------------------------------- */
html{scroll-behavior:smooth}
body{margin:0;background:#F6F4EF;color:#1B2421;font-family:'IBM Plex Sans Arabic','Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#0E6F66}a:hover{color:#DF6448}
::selection{background:rgba(217,160,47,.35)}
summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}
details[open] [data-chev]{transform:rotate(180deg)}
details[open] summary [data-q]{color:#0E6F66}
@media (max-width:1024px){
[data-sticker]{display:none!important}
[data-route-svg]{display:none}
[data-navlinks]{display:none!important}
[data-hero]{grid-template-columns:1fr!important;gap:44px!important}
[data-hero-copy]{text-align:center!important;align-items:center!important}
[data-feat]{grid-template-columns:repeat(2,1fr)!important}
[data-span3]{grid-column:span 2!important}
}
@media (max-width:700px){
[data-feat]{grid-template-columns:1fr!important}
[data-span2],[data-span3]{grid-column:auto!important}
[data-persona-off]{margin-top:0!important}
}

/* --------------------------------------------------------------------------
   3. Components - inline styles that repeated across the export, lifted to
   classes verbatim. Declarations are byte-identical to the inline strings
   they replaced, so computed appearance is unchanged.
   -------------------------------------------------------------------------- */
.nav-cta{margin-inline-start:auto;background:#0E6F66;color:#F6F4EF;text-decoration:none;font-weight:600;font-size:15px;padding:10px 22px;border-radius:999px;white-space:nowrap;flex-shrink:0;transition:transform .25s,background .25s}
.nav-link{color:#1B2421;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;flex-shrink:0}
.store-btn{display:flex;align-items:center;gap:12px;background:#1B2421;color:#F6F4EF;border-radius:18px;padding:12px 22px;text-decoration:none;box-shadow:0 6px 0 rgba(27,36,33,.16);transition:transform .25s,box-shadow .25s}
.store-btn-dark{display:flex;align-items:center;gap:12px;background:#1B2421;color:#F6F4EF;border-radius:18px;padding:13px 24px;text-decoration:none;box-shadow:0 6px 0 rgba(0,0,0,.2);transition:transform .25s,box-shadow .25s}
.footer-link{color:rgba(246,244,239,.78);text-decoration:none;font-size:14.5px;font-weight:600;transition:color .25s}
.faq-item{background:#FFFFFF;border:1.5px solid rgba(27,36,33,.1);border-radius:20px;overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-weight:600;font-size:17px}
.faq-a{margin:0;padding:0 24px 22px;color:rgba(27,36,33,.66);line-height:1.95;font-size:15px}
.phone{width:250px;background:#12201C;border-radius:42px;padding:10px;box-shadow:0 30px 60px rgba(5,30,27,.5)}
.phone-screen{background:#F6F4EF;border-radius:34px;overflow:hidden;position:relative;aspect-ratio:9/18}
.feat-card{background:#FFFFFF;border:1.5px solid rgba(27,36,33,.08);border-radius:28px;padding:26px;display:flex;flex-direction:column;gap:12px;transition:transform .3s,box-shadow .3s}

/* Section eyebrow (kicker) above an <h2>. Unlike the rules above this is not
   lifted verbatim from the export - the export had two hand-rolled copies at a
   fixed 13/13.5px that did not scale, so beside a clamp()ed h2 they shrank to
   an orphaned line at desktop widths. One spec now, shared: the size clamp
   tracks the headline, and --on-dark only swaps the two colours so the pair
   can never drift in size again. Layout spacing stays at the call site - the
   features section needs a margin, the showcase section gets it from flex gap. */
.eyebrow{display:inline-block;font-size:clamp(14px,1.4vw,17px);font-weight:700;color:#0E6F66;border:2px dashed rgba(14,111,102,.45);padding:6px 15px;border-radius:6px;transform:rotate(-3deg)}
.eyebrow--on-dark{color:rgba(246,244,239,.92);border-color:rgba(246,244,239,.5)}

/* --------------------------------------------------------------------------
   4. Hover states (owner ruling LP-R1).
   The export carried these as hover-style attributes, which its
   runtime never implemented - see FINDINGS.md F-LP-1. The declarations below
   are those attribute values verbatim, restored as real :hover rules so the
   approved design's hover behaviour actually fires. Each element already
   declared a matching `transition:`, which is what these animate.
   -------------------------------------------------------------------------- */
.nav-cta:hover{background:#0A4A43;transform:translateY(-2px)}
.store-btn:hover{transform:translateY(-3px);box-shadow:0 10px 0 rgba(27,36,33,.2)}
.store-btn-dark:hover{transform:translateY(-3px);box-shadow:0 10px 0 rgba(0,0,0,.24)}
.footer-link:hover{color:#F6F4EF}
.card-lift:hover{transform:translateY(-5px)}
.card-lift-lg:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(27,36,33,.12)}

/* --------------------------------------------------------------------------
   5. Final CTA background.
   The export exposed this as an editor prop `finalCta` (enum teal|coral,
   default teal); its render step turned it into an inline style object. The
   default is the rule below. To switch, swap the class on the single
   `<div class="cta-bg">` in index.html to `cta-bg--coral`.
   -------------------------------------------------------------------------- */
.cta-bg{position:absolute;inset:0;background:linear-gradient(160deg,#0C5950,#0A4A43 55%,#093F39)}
.cta-bg--coral{position:absolute;inset:0;background:#DF6448}

/* --------------------------------------------------------------------------
   6. Screenshot slots - see SLOTS.md.
   Each slot renders its designed placeholder (a tinted block plus the
   «معاينة مؤقتة» tag) until a file appears at the documented path. landing.js
   probes each path; when one resolves it sets the background and marks the
   slot `.shot-ready`, which hides the mock content and the tag. Dropping the
   file in is therefore the entire swap - no HTML or CSS edit.

   The background sizing is applied inline by landing.js rather than declared
   here, because each slot's own inline `background:` shorthand would outrank
   a rule at this level. See the note in loadShots().
   -------------------------------------------------------------------------- */
[data-shot].shot-ready > *,[data-screen-slot].shot-ready > *{display:none}

/* --------------------------------------------------------------------------
   7. Reduced motion.
   landing.js reads prefers-reduced-motion and takes its static path, which
   settles every animated element at its end state. This block is the
   no-JS-yet backstop: it suppresses the two CSS-declared transitions that
   could otherwise animate before the script runs.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}
  .nav-cta,.store-btn,.store-btn-dark,.footer-link,.feat-card,[data-chev]{transition:none}
}

/* --------------------------------------------------------------------------
   8. Narrow-viewport feature grid (audit F-AUD-LP-4, owner ruling R-AUD-LP-4).
   NOT part of the verbatim export lift in §2 - this is an added fix, kept in
   its own section so §2's "unchanged from the export" claim stays true.

   At <=700px [data-feat] collapses to a single `1fr` column, and `1fr` is
   `minmax(auto,1fr)`: the track cannot shrink below the item's content-based
   minimum. Two cards declare inner floors - «مجتمع الرحّالة» (min-width 240px
   + 220px on a wrapping flex row) and «المخطط» (260px) - which put their
   min-content at 391.6px and 312.4px against a 320px container at a 360px
   viewport. Every other card measures 118-149px. The widest therefore set a
   388.7px track inside 320px, the card overhung the viewport's left edge by
   50px, and an ancestor's `overflow-x:clip` cut it with no scrollbar: four
   runs of body copy were silently truncated.

   `min-width:0` here releases the automatic minimum so the track may shrink.
   That alone is what was missing: relaxing only the inner floors to
   `min(240px,100%)` measurably did NOTHING, because during intrinsic track
   sizing the percentage resolves against an indefinite containing block. With
   the card free to be 320px the inner floors resolve against a DEFINITE width
   and the flex row wraps as designed.

   No `!important`, unlike its neighbours above: no card declares an inline
   min-width, so there is nothing to outrank.
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  [data-feat] > *{min-width:0}
}

/* --------------------------------------------------------------------------
   9. Batch-2 fixes (audit F-AUD-LP-14 / -21, owner ruling LP-R4).

   .shot-tag was the one class used in index.html with no rule behind it: ten
   copies of the same ~180-character inline style, which is exactly what §3
   exists to prevent. Declarations are the inline string verbatim.

   The tap targets are the rest: footer and nav links measured 22px tall and the
   nav CTA 42px, against a 44px minimum, at every width including touch. Padding
   is added rather than font-size, so nothing reflows.
   -------------------------------------------------------------------------- */
.shot-tag{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(27,36,33,.78);color:#F6F4EF;font-size:10.5px;font-weight:600;padding:4px 12px;border-radius:999px;z-index:3;white-space:nowrap}
.nav-link{padding:11px 9px}
.footer-link{display:inline-block;padding:11px 9px}
.nav-cta{padding:11px 22px}
.brand-link{padding:4px 0}

/* --------------------------------------------------------------------------
   10. Empty screenshot slots cost 740px of phone scroll (measured 375x812).

   The feature section runs 3004px on a 375px viewport - 3.7 screens for six
   cards - and 903px of that is screenshot slots showing nothing, because
   shots/ holds only a .gitkeep. Six «معاينة مؤقتة» pills is a third of the
   scroll spent on absent content.

   Rejected first: a 2-up grid below 700px. It saves more (1049px) and it
   wrecks the cards - 164-177px tracks wrap both title lines, break body copy
   into 2-3 word fragments, and squeeze «مجتمع الرحّالة», whose min-content is
   396px. §8 above is the record of what a too-narrow track already did here
   once. Column count was never the problem; empty boxes were.

   Scoped to the slots that are ACTUALLY empty - :not(:has(> :not(.shot-tag)))
   means "nothing inside but the placeholder pill". Four qualify: journal,
   places, badges, planner. The other six carry designed content that must
   survive - «مجتمع الرحّالة» its two mock post cards, «خريطتك الشخصية» a real
   world-map <img>, and the three phone screens their mock UI. A blanket
   [data-shot] rule would delete all of it, which is why this is not one.

   Self-reversing, so there is no rule to remember to delete (R-AUTO-5):
   loadShots() adds .shot-ready the moment a file resolves at the documented
   path, and .shot-ready fails the selector. Drop a real screenshot into
   shots/ and that slot returns to full height on phones by itself - no HTML
   edit, no CSS edit, matching §6's single-file-drop contract.

   :has() is required. Where it is unsupported the whole selector is invalid,
   the rule is dropped, and the slots render exactly as they do today.
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  [data-shot]:not(.shot-ready):not(:has(> :not(.shot-tag))){display:none}
}