/* ============================================================
   BLOG
   Source of truth lives here, in the site repo, and is copied into
   yafnah-blog by tools/sync-blog-theme.py. Edit here, never there.

   This replaces the blog's old assets/style.css, which had grown a
   parallel design system: 328 custom properties, Ghaf renamed after a
   watch brand, Dhahab used as a CSS fill when it is a foil-only finish,
   and Playfair Display, a serif, as the headline face. Every class name
   assets/app.js emits is preserved, so the JS keeps working; only what
   they look like changes.

   Loads after tokens.css and craft.css, which bring the palette, the
   IBM Plex Sans Arabic, the neutral ramp and the interaction floor.
   ============================================================ */

body{background:var(--paper,#FFF9F3);color:var(--ink,#38250E);font-family:var(--font);
  -webkit-font-smoothing:antialiased}

.container{max-width:1180px;margin-inline:auto;padding-inline:var(--pad,clamp(20px,5vw,80px))}
.content-narrow{max-width:760px;margin-inline:auto}
.mt-xl{margin-top:clamp(28px,4vw,48px)}
.mt-2xl{margin-top:clamp(40px,6vw,80px)}

/* ── Type ── */
h1,h2,h3{font-weight:200;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-weight:300;letter-spacing:0;line-height:1.3}
h1{font-size:clamp(30px,5vw,58px)}
h2{font-size:clamp(21px,2.4vw,32px);font-weight:300}
h3{font-size:clamp(17px,1.7vw,21px);font-weight:400;letter-spacing:-.015em}
p{line-height:1.75;font-weight:300}
a{color:inherit}
.lead{font-size:clamp(16px,1.4vw,20px);line-height:1.7;font-weight:300;color:var(--t80);max-width:62ch}
.label,.hero-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ghaf);
  font-weight:500}
html[lang="ar"] .label,html[lang="ar"] .hero-label{letter-spacing:.03em;text-transform:none;font-size:14px}

/* ── Hero ── */
.hero{padding:calc(var(--nav-h,70px) + clamp(34px,6vw,72px)) 0 clamp(30px,5vw,56px);
  border-block-end:1px solid var(--surface-line)}
.hero-content{max-width:760px}
.hero-subtitle{margin-top:16px;font-size:clamp(15px,1.3vw,18px);line-height:1.7;font-weight:300;
  color:var(--t80);max-width:58ch}
.hero-cta{margin-top:clamp(22px,3vw,34px);display:flex;gap:12px;flex-wrap:wrap}

/* ── Buttons, matching the storefront ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding-inline:clamp(22px,2vw,32px);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;border-radius:0;touch-action:manipulation;
  transition:color var(--t-hover) var(--out),background var(--t-hover) var(--out),
             border-color var(--t-hover) var(--out),transform var(--t-press) var(--out)}
html[lang="ar"] .btn{letter-spacing:.03em;text-transform:none;font-size:15px}
.btn:active{transform:scale(.97)}
.btn-primary,.btn-green{background:var(--ghaf);color:#fff;border:1px solid var(--ghaf)}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--surface-line)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover,.btn-green:hover{background:var(--ghaf-deep);border-color:var(--ghaf-deep)}
  .btn-secondary:hover{border-color:var(--ghaf);color:var(--ghaf)}
}

/* ── Category tabs ── */
.category-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-block:clamp(22px,3vw,34px)}
.category-tab{min-height:44px;padding-inline:18px;display:inline-flex;align-items:center;
  border:1px solid var(--surface-line);background:var(--surface);color:var(--t80);
  font-size:14px;border-radius:var(--r-pill,999px);touch-action:manipulation;
  transition:color var(--t-hover) var(--out),border-color var(--t-hover) var(--out),
             background var(--t-hover) var(--out),transform var(--t-press) var(--out)}
.category-tab:active{transform:scale(.97)}
.category-tab.active{background:var(--ghaf);border-color:var(--ghaf);color:var(--rimal)}
@media (hover:hover) and (pointer:fine){
  .category-tab:hover{border-color:var(--ghaf);color:var(--ghaf)}
  .category-tab.active:hover{color:var(--rimal)}
}

/* ── The post grid ── */
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(14px,2vw,26px)}
.post-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--surface-line);overflow:hidden;
  transition:transform var(--t-hover) var(--out),border-color var(--t-hover) var(--out),
             box-shadow var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){
  .post-card:hover{transform:translateY(-3px);border-color:rgba(0,96,57,.4);
    box-shadow:0 14px 30px -16px rgba(56,37,14,.35)}
}
.post-card:active{transform:scale(.995)}
.post-card-image,.post-card-icon{aspect-ratio:16/9;display:grid;place-items:center;
  background:var(--paper-2);color:var(--ghaf);border-block-end:1px solid var(--surface-line)}
.post-card-image img{width:100%;height:100%;object-fit:cover}
.post-card-content{padding:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;gap:10px;flex:1}
.post-card-meta,.article-meta{font-size:12.5px;color:var(--t60);
  font-variant-numeric:tabular-nums lining-nums}
.post-card-footer{margin-top:auto;padding-top:12px}
.category-badge,.post-card-badge,.category{display:inline-flex;align-items:center;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ghaf);
  background:var(--ghaf-tint);padding:5px 10px;border-radius:var(--r-pill,999px)}
html[lang="ar"] .category-badge,html[lang="ar"] .post-card-badge,html[lang="ar"] .category{
  letter-spacing:.02em;text-transform:none;font-size:13px}
.read-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ghaf);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
html[lang="ar"] .read-more{letter-spacing:.03em;text-transform:none;font-size:15px}
@media (hover:hover) and (pointer:fine){.read-more:hover{color:var(--ghaf-deep)}}

/* ── An article ── */
.post,.article-body,.area-content{max-width:760px;margin-inline:auto;
  padding-inline:var(--pad,clamp(20px,5vw,80px))}
.post-head,.article-header,.area-hero{padding:calc(var(--nav-h,70px) + clamp(28px,5vw,56px)) 0
  clamp(20px,3vw,32px)}
.post-lang{margin-bottom:16px}
.post-lang a{display:inline-flex;align-items:center;min-height:44px;color:var(--ghaf);
  font-size:14px;border-block-end:1px solid transparent;
  transition:border-color var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){.post-lang a:hover{border-block-end-color:var(--ghaf)}}
.post-lede{margin-top:16px;font-size:clamp(16px,1.4vw,19px);line-height:1.7;font-weight:300;
  color:var(--t80);max-width:60ch}
.post-body{padding-block:clamp(20px,3vw,34px) clamp(40px,6vw,80px)}
.post-body h2{margin-top:clamp(28px,3.4vw,42px);margin-bottom:12px}
.post-body p{font-size:clamp(15px,1.25vw,17px);color:var(--t80);max-width:66ch}
.post-body ul.related{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.post-body ul.related a{display:inline-flex;align-items:center;min-height:44px;padding-inline:16px;
  border:1px solid var(--surface-line);border-radius:var(--r-pill,999px);font-size:14px;
  color:var(--ghaf);background:var(--surface)}
@media (hover:hover) and (pointer:fine){
  .post-body ul.related a:hover{border-color:var(--ghaf);background:var(--ghaf-tint)}
}

/* ── FAQs, working without JavaScript ── */
.faq{border-block-start:1px solid var(--surface-line)}
.faq:last-of-type{border-block-end:1px solid var(--surface-line)}
.faq summary{display:flex;align-items:center;gap:12px;min-height:56px;cursor:pointer;
  font-size:15.5px;font-weight:400;list-style:none;
  transition:color var(--t-hover) var(--out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-inline-start:auto;flex:none;width:9px;height:9px;
  border-inline-end:1.4px solid var(--ghaf);border-block-end:1.4px solid var(--ghaf);
  transform:rotate(45deg) translateY(-2px);transition:transform var(--t-hover) var(--out)}
.faq[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
@media (hover:hover) and (pointer:fine){.faq summary:hover{color:var(--ghaf)}}
.faq p{padding-block:0 18px;margin:0;max-width:62ch;font-size:14.5px;color:var(--t80)}

/* ── The booking block ── */
.post-cta,.cta-section{margin-top:clamp(34px,5vw,64px);padding:clamp(24px,3.4vw,40px);
  background:var(--paper-2);border:1px solid var(--surface-line)}
.post-cta h2,.cta-section h2{margin-bottom:12px}
.post-cta p,.cta-section p{color:var(--t80);max-width:58ch}

/* ── States ── */
.loading,.error-state{padding:clamp(40px,6vw,80px) 0;text-align:center;color:var(--t60);
  font-size:15px}

/* ── Entrance, honouring reduced motion ── */
.reveal{opacity:0;transform:translateY(10px);
  transition:opacity 420ms var(--out),transform 420ms var(--out)}
/* .visible is the class assets/app.js actually sets. The other two are kept
   because the static pages use them. Without .visible here the entire SPA
   below the hero — tabs, listing, call to action — sat at opacity 0
   permanently: the observer fired, added the class, and matched nothing. */
.reveal.is-in,.reveal.active,.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:60ms}
.reveal-delay-2{transition-delay:120ms}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}
/* If nothing ever adds the class, the content must not stay invisible. */
@media (scripting:none){.reveal{opacity:1;transform:none}}



/* ══════════════ THE BLOG'S OWN CHROME ══════════════
   The blog keeps its own header, its own tabs and its own footer. It is a
   separate thing with its own job, and it should read that way. What it
   borrows is the styling: the Bakhoor bar, IBM Plex Sans Arabic, Ghaf as the accent,
   Rimal on dark. Same clothes, its own body. */

.site-header{position:sticky;top:0;z-index:100;
  background:rgba(56,37,14,.94);backdrop-filter:blur(16px);
  border-block-end:1px solid rgba(255,228,196,.14)}
.header-inner{max-width:1180px;margin-inline:auto;min-height:66px;
  padding-inline:var(--pad,clamp(20px,5vw,80px));
  display:flex;align-items:center;justify-content:space-between;gap:20px}

.site-header .logo{display:inline-flex;align-items:center;gap:11px;min-height:44px;
  color:var(--rimal);transition:opacity var(--t-hover) var(--out)}
.site-header .logo img{height:28px;width:auto;display:block}
.logo-text{font-size:17px;font-weight:300;letter-spacing:-.02em}
html[lang="ar"] .logo-text{font-weight:400;letter-spacing:0}
@media (hover:hover) and (pointer:fine){.site-header .logo:hover{opacity:.82}}
.site-header .logo:active{transform:scale(.97)}

.nav-main{display:flex;align-items:center;gap:clamp(12px,1.8vw,28px);
  list-style:none;margin:0;padding:0}
.nav-main a{position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-nav,15px);color:rgba(255,228,196,.84);
  transition:color var(--t-hover) var(--out)}
.nav-main a::after{content:"";position:absolute;bottom:10px;inset-inline:0;height:1px;
  background:var(--rimal);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){
  .nav-main a:hover{color:var(--rimal)}
  .nav-main a:hover::after{transform:scaleX(1);transform-origin:0 50%}
}
.nav-main a:active{transform:scale(.97)}

.menu-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  color:var(--rimal);font-size:20px;background:none;border:0;touch-action:manipulation}
@media(max-width:820px){
  .menu-toggle{display:inline-flex}
  .nav-main{position:absolute;inset-inline:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:rgba(56,37,14,.98);backdrop-filter:blur(16px);
    border-block-end:1px solid rgba(255,228,196,.14);
    max-height:0;overflow:hidden;transition:max-height 320ms var(--draw)}
  .nav-main.open,.nav-main.active{max-height:70vh}
  .nav-main li{border-block-end:1px solid rgba(255,228,196,.1)}
  .nav-main a{min-height:54px;padding-inline:var(--pad,20px);font-size:17px}
  .nav-main a::after{display:none}
  .site-header nav{position:static}
}

/* ── Its footer, same idea ── */
.site-footer{background:var(--ink);color:var(--rimal);
  border-block-start:1px solid rgba(255,228,196,.16);margin-top:clamp(40px,6vw,80px)}
.footer-inner{max-width:1180px;margin-inline:auto;
  padding:16px var(--pad,clamp(20px,5vw,80px));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 22px;font-size:13px;color:rgba(255,228,196,.5)}
.footer-inner p{margin:0;line-height:1.4;font-weight:300}
.footer-mini{display:flex;flex-wrap:wrap;gap:4px 22px}
.footer-mini a{display:inline-flex;align-items:center;min-height:34px;
  color:rgba(255,228,196,.72);transition:color var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){.footer-mini a:hover{color:var(--rimal)}}
@media (hover:none){.footer-mini a{min-height:44px}}
@media(max-width:520px){
  .footer-inner{justify-content:flex-start;padding-block:14px}
}

/* ============================================================
   ARABIC-FIRST PASS
   The blog declares Arabic and RTL on its shell pages. The rules
   below either had no styling at all — they replace inline styles
   built from variables that no longer resolve — or had styling
   that only held in one direction.
   ============================================================ */

/* The card tile. No gradient, no emoji: the brand ground, a hairline, and
   the category named in type. Each line gets a different brand surface so
   the three are told apart without inventing a colour. */
.post-card-image{position:relative;background:var(--ghaf-tint)}
.post-card-image--areas{background:var(--ghaf-tint)}
.post-card-image--faq{background:var(--rimal-soft)}
.post-card-image--guides{background:var(--surface-2)}
.post-card-image .post-card-badge{position:absolute;inset-block-start:12px;inset-inline-start:12px}

/* The order box at the foot of a post. Was an inline style built from
   --cream, --platinum and --rolex-green, none of which resolve. */
.post-order{margin-block-start:clamp(32px,4vw,52px);
  padding:clamp(20px,2.5vw,30px);
  background:var(--surface-2);border:1px solid var(--surface-line)}
.post-order h3{margin-block-end:8px;color:var(--ghaf)}
.post-order p{color:var(--t80);margin-block-end:16px}

.article-lede{color:rgba(255,228,196,.76);max-width:60ch}
html[lang="ar"] .article-lede{max-width:52ch}

.empty-state{padding:clamp(40px,6vw,80px) 0;text-align:center;color:var(--t60)}
.error-code{font-size:clamp(56px,9vw,88px);line-height:1;color:var(--t25);
  font-variant-numeric:lining-nums tabular-nums;margin-block-end:8px}

/* The burger was the ☰ glyph, which renders at a different size and
   baseline in every font and sat off-centre in Arabic. Two rules instead,
   same as the storefront's. */
.menu-toggle{flex-direction:column;gap:6px;font-size:0}
.menu-toggle span{display:block;width:20px;height:1px;background:var(--rimal);
  transition:transform var(--t-hover) var(--out),opacity var(--t-hover) var(--out)}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* The header now carries three children, not two: mark, nav, globe. The
   nav takes the slack so the globe stays pinned to the end edge in both
   directions rather than floating beside the last tab. */
.header-inner > nav{margin-inline-start:auto}
.hd-lang{flex:none}
.site-header .hd-langmenu{top:calc(100% + 6px)}

/* Latin runs inside Arabic prose — a duration, a slug, a package name —
   must not be reordered by the bidi algorithm. */
html[lang="ar"] .post-card-meta .ltr{unicode-bidi:isolate}

@media(max-width:820px){
  /* The nav collapses to a burger here. Keeping the auto margin groups the
     burger and the globe together at the end edge; without it flex spacing
     strands the burger alone in the middle of the bar. */
  .header-inner{gap:4px}
  .hd-globe{min-width:40px}
}

/* The blog loads home.css for the shared components, and home.css owns a
   .hero built for the storefront: full-bleed, 100svh tall, painted --ink,
   with its content pinned to the bottom edge behind a photograph. The
   blog's .hero rule above sets only padding and a rule, so every one of
   those storefront properties still applied — a full-screen dark void
   with the blog's dark-on-light heading invisible inside it.

   Same class name, two different components. The blog's wins on its own
   pages. */
.hero{min-height:0;display:block;place-items:normal;overflow:visible;
  background:transparent;text-align:start}
.hero-content{max-width:760px;margin-inline:auto;
  padding-inline:var(--pad,clamp(20px,5vw,80px))}
.hero h1{color:var(--t100);font-size:clamp(30px,4.4vw,52px);margin-block-start:10px}
.hero .hero-cta{justify-content:flex-start}

/* A card in the other language sets its own dir, so its badge must follow
   the card rather than the page — otherwise the tile label jumps to the
   opposite corner from the text beneath it. */
.post-card[dir] .post-card-image .post-card-badge{inset-inline-start:12px}
.post-card[dir="ltr"]{text-align:left}
.post-card[dir="rtl"]{text-align:right}

/* The tile carries a badge and nothing else until a post has real artwork.
   At 16/9 that is a large empty rectangle, which on a phone pushes the
   headline most of a screen down. Keep the shape when there is an image,
   shrink it to a band when there is not. */
.post-card-image--areas,.post-card-image--faq,.post-card-image--guides{
  aspect-ratio:auto;min-height:0;padding:14px}
.post-card-image--areas .post-card-badge,
.post-card-image--faq .post-card-badge,
.post-card-image--guides .post-card-badge{position:static}