/* ============================================================
   Roohle — MOBILE OVERRIDES
   Loaded AFTER roohle.css / per-page stylesheets so every rule
   here wins by cascade order. Targets phones (<=480px),
   small tablets / large phones (481-880px), and shared touch
   target / readability concerns across the whole site.
   ============================================================ */

/* ---------- Universal: prevent horizontal scroll on phones ---------- */
@media (max-width: 880px){
  html, body{ overflow-x:hidden; }
  body{ -webkit-text-size-adjust:100%; }
  img, svg, video{ max-width:100%; height:auto; }
}

/* ============================================================
   NAV — fix the broken r-nav-links display:flex override
   The theme's nav uses BOTH .nav-links AND .r-nav-links classes.
   The base .nav-links{display:none} at <=880px is overridden by
   .r-nav-links{display:flex}. We force the hamburger pattern.
   ============================================================ */
@media (max-width: 880px){
  /* Hide the desktop links list */
  .nav-links.r-nav-links,
  .r-nav-links,
  .nav-links{
    display:none !important;
  }

  /* Show the hamburger button */
  .nav-toggle{
    display:flex !important;
    width:44px; height:44px;
    align-items:center; justify-content:center;
    border:1px solid var(--rule, #e6e6e6);
    border-radius:8px;
    background:transparent;
    cursor:pointer;
  }
  .nav-toggle svg{ width:20px; height:20px; }

  /* Open state — full-width drawer below the bar */
  .nav-links.is-open,
  .r-nav-links.is-open{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    position:absolute;
    left:0; right:0;
    top:100%;
    background:var(--bg, #FAFAFA);
    border-bottom:1px solid var(--rule, #e6e6e6);
    padding:8px 22px 18px;
    box-shadow:0 12px 24px -16px rgba(0,0,0,0.16);
    z-index:100;
  }
  .nav-links.is-open a,
  .r-nav-links.is-open a{
    display:block;
    width:100%;
    padding:16px 0;
    font-size:16px;
    border-bottom:1px solid var(--rule-soft, #efefef);
    min-height:48px;
  }
  .nav-links.is-open a:last-child,
  .r-nav-links.is-open a:last-child{ border-bottom:0; }
  .nav-links.is-open a.divider-before,
  .r-nav-links.is-open a.divider-before{
    margin-left:0; padding-left:0;
  }
  .nav-links.is-open a.divider-before::before,
  .r-nav-links.is-open a.divider-before::before{ display:none; }

  /* Tighter nav bar height */
  .nav-inner, .r-nav-inner{
    height:64px !important;
    padding:0 18px;
  }
  .nav-brand, .r-brand{
    font-size:20px !important;
  }
  .nav-brand .mark, .r-brand img{
    width:36px !important; height:36px !important;
  }

  /* Sticky cat-name in mid-article nav (maps/surahs/etc) */
  .r-nav .r-cat-name{ display:none !important; }
}

/* ============================================================
   HOMEPAGE — Roohle.html
   Fix hero stacking, subscribe form, doors, recent list
   ============================================================ */
@media (max-width: 640px){
  .container{ padding:0 18px; }

  /* HERO */
  .hero{ padding:48px 0 64px !important; }
  .hero-mark-row{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    margin-bottom:32px;
  }
  .hero-mark{ width:72px !important; height:72px !important; }
  .hero-wordmark{ font-size:30px !important; }
  .hero-arabic-block{
    margin-left:0 !important;
    padding-left:0 !important;
    border-left:0 !important;
    text-align:left !important;
  }
  .hero-arabic{ font-size:42px !important; }
  .hero-arabic-trans{ font-size:10px !important; letter-spacing:0.14em !important; }

  .hero-positioning{
    font-size:24px !important;
    line-height:1.25 !important;
    margin-bottom:32px !important;
    max-width:100% !important;
  }

  /* Decorative SVGs — keep, but scale + reposition so they don't fight content */
  .hero-orbit{
    width:380px !important; height:380px !important;
    right:-160px !important; top:auto !important; bottom:-40px !important;
    opacity:0.4 !important;
  }
  .hero-citation{ display:none; }
  .hero-horizon{ height:60px !important; }

  /* Subscribe — stack input + full-width button */
  .subscribe{
    flex-direction:column;
    align-items:stretch;
    border-bottom:0 !important;
    gap:12px;
    max-width:100% !important;
  }
  .subscribe input{
    border-bottom:1px solid var(--ink, #232323);
    padding:14px 0 !important;
    font-size:16px !important; /* prevents iOS zoom */
    min-height:48px;
  }
  .subscribe button{
    padding:14px 20px !important;
    border:1px solid var(--accent-ink, #7e2fcf);
    align-self:flex-start;
    min-height:48px;
    font-size:13px !important;
  }

  .hero-author{ margin-top:24px !important; font-size:12px !important; }

  /* SECTIONS */
  .section{ padding:56px 0 !important; }
  .section-title{ font-size:24px !important; margin-bottom:28px !important; }
  .section-eyebrow{ font-size:11px !important; letter-spacing:0.16em !important; }

  /* DOORS */
  .doors{ grid-template-columns:1fr !important; }
  .door{
    padding:28px 22px !important;
    min-height:0 !important;
  }
  .door-title{ font-size:24px !important; }
  .door-desc{ font-size:16px !important; }
  .door-items{ font-size:15px !important; }
  .door-cta{ padding:8px 0; min-height:44px; display:inline-flex; align-items:center; }

  /* RECENT WRITING */
  .featured{ grid-template-columns:1fr !important; gap:24px !important; }
  .featured-title{ font-size:24px !important; }
  .featured-dek{ font-size:16px !important; }
  .featured-byline{ font-size:12px !important; gap:6px 10px !important; }
  .recent-item{
    grid-template-columns:1fr !important;
    gap:6px !important;
    padding:18px 0 !important;
  }
  .recent-cat{ order:1; }
  .recent-title{ order:2; font-size:17px !important; line-height:1.35 !important; }
  .recent-date{ order:3; font-size:11px !important; }

  /* BEHIND ROOHLE */
  .behind{ grid-template-columns:1fr !important; gap:24px !important; }
  .behind-photo{ max-width:240px !important; }
  .behind-bio{ font-size:19px !important; line-height:1.4 !important; }
  .read-more{ padding:8px 0; min-height:44px; display:inline-flex; align-items:center; }

  /* OLIVE BREAK */
  .olive-break svg{ width:160px !important; height:50px !important; }
  .olive-break .cite{ font-size:9px !important; letter-spacing:0.12em !important; }

  /* FOOTER */
  .footer{ padding:28px 0 !important; }
  .footer-inner{ font-size:12px !important; }
  .footer-inner a{ padding:6px 0; min-height:32px; display:inline-flex; align-items:center; }
}

/* Very narrow phones (<=380px) — extra tightening */
@media (max-width: 380px){
  .container{ padding:0 16px; }
  .hero-positioning{ font-size:22px !important; }
  .hero-wordmark{ font-size:26px !important; }
  .hero-arabic{ font-size:36px !important; }
  .section-title{ font-size:22px !important; }
  .door-title{ font-size:22px !important; }
  .featured-title{ font-size:22px !important; }
}

/* ============================================================
   ABOUT — front-matter layout
   ============================================================ */
@media (max-width: 760px){
  .gh-content .a-fm-wrap{ padding:0 20px; }
  .gh-content .a-titlepage{
    padding:80px 0 56px !important;
  }
  .gh-content .a-titlepage h1{
    font-size:30px !important;
    line-height:1.2 !important;
    margin-bottom:32px !important;
  }
  .gh-content .a-titlepage .ar{ font-size:28px !important; }
  .gh-content .a-titlepage .colophon{
    font-size:10px !important;
    letter-spacing:0.22em !important;
    margin-bottom:36px !important;
  }
  .gh-content .a-titlepage .dateline{
    font-size:10px !important;
    margin-top:32px !important;
  }
  .gh-content .a-titlepage .titlepage-epigraph{
    margin-top:40px !important;
    padding-top:28px !important;
  }
  .gh-content .a-titlepage .titlepage-epigraph p{ font-size:17px !important; }

  .gh-content .a-frontpage{
    padding:56px 0 !important;
  }
  .gh-content .a-frontpage h2{
    font-size:26px !important;
    line-height:1.2 !important;
    margin-bottom:20px !important;
  }
  .gh-content .a-frontpage p{ font-size:16.5px !important; line-height:1.6 !important; }
  .gh-content .a-frontpage .pagenum{ font-size:10px !important; margin-bottom:24px !important; }
  .gh-content .a-frontpage .sidenote{ font-size:14px !important; padding-left:14px !important; }

  /* Bio block stacks (already in base) — tighten */
  .gh-content .a-frontpage .a-bio{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .gh-content .a-bio .portrait{
    width:140px !important; height:170px !important;
    font-size:36px !important;
  }
  .gh-content .a-bio .bio-body h3{ font-size:22px !important; }
  .gh-content .a-bio .bio-stand{ font-size:18px !important; }
  .gh-content .a-bio .bio-body p{ font-size:16.5px !important; }
  .gh-content .a-bio .bio-meta{ font-size:11px !important; gap:4px 12px !important; }

  .gh-content .a-debts{ margin-top:28px !important; padding-top:28px !important; }
  .gh-content .a-debts p{ font-size:15.5px !important; }

  /* Methodology grid → single column (base does this) — tighten */
  .gh-content .a-method-named{ padding:0 !important; }
  .gh-content .a-method-named h3{ font-size:28px !important; line-height:1.18 !important; }
  .gh-content .a-method-named .ar{ font-size:22px !important; }
  .gh-content .a-method-named .lead{ font-size:16.5px !important; margin-bottom:28px !important; }
  .gh-content .a-method-named .grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
  .gh-content .a-method-named .item h4{ font-size:18px !important; }
  .gh-content .a-method-named .item p{ font-size:15px !important; }

  /* Contact form */
  .gh-content .a-contact h3{ font-size:22px !important; }
  .gh-content .a-contact .d{ font-size:15.5px !important; }
  .gh-content .a-contact .field{ padding:12px 0 !important; }
  .gh-content .a-contact .field input,
  .gh-content .a-contact .field textarea{
    font-size:16px !important; /* prevents iOS zoom */
    min-height:32px;
  }
  .gh-content .a-contact .send{
    min-height:48px;
    padding:12px 0 !important;
  }

  /* Signature */
  .gh-content .a-sig svg{ width:200px !important; height:auto !important; }
}

/* ============================================================
   ARTICLE / MAP / SURAH / RESEARCH-PAPER LAYOUT
   r-* classes shared across maps/surahs/eschatology/reflections
   ============================================================ */
@media (max-width: 760px){
  .r-wrap{ padding:0 20px !important; }
  .r-head{ padding:48px 0 36px !important; }
  .r-eyebrow{ font-size:10.5px !important; letter-spacing:0.18em !important; margin-bottom:18px !important; }
  .r-title{
    font-size:34px !important;
    line-height:1.1 !important;
    margin-bottom:20px !important;
  }
  .r-dek{
    font-size:18px !important;
    line-height:1.45 !important;
    margin-bottom:24px !important;
  }
  .r-byline{ font-size:12px !important; gap:6px 12px !important; padding-top:18px !important; }

  .r-hero-img{ margin:24px auto 36px !important; }
  .r-hero-cap{ font-size:9.5px !important; padding:4px 7px !important; }

  .r-body{
    font-size:17px !important;
    line-height:1.62 !important;
    padding:0 !important;
  }
  .r-body h2{
    font-size:24px !important;
    line-height:1.22 !important;
    margin:44px 0 14px !important;
  }
  .r-body h3{ font-size:18px !important; margin:28px 0 8px !important; }

  /* Drop cap: scale down */
  .r-body .r-firstpara::first-letter{
    font-size:54px !important;
    line-height:0.9 !important;
  }

  /* Category masthead (maps/, surahs/, etc.) */
  .r-cat-masthead{ padding:48px 20px 40px !important; }
  .r-cat-title{
    font-size:48px !important;
    line-height:0.96 !important;
    letter-spacing:-0.022em !important;
    margin-bottom:32px !important;
  }
  .r-cat-eyebrow{
    font-size:10.5px !important;
    letter-spacing:0.2em !important;
    margin-bottom:20px !important;
  }
  .r-cat-verse{
    grid-template-columns:1fr !important;
    row-gap:14px !important;
    padding:22px 0 !important;
    margin-bottom:36px !important;
  }

  /* Map card / list rows */
  .r-mapcard,
  .r-map-row{
    padding:24px 18px !important;
  }
  .r-mapcard-body{ grid-template-columns:1fr !important; gap:18px !important; }
  .r-mapcard-body .mc-cta-cell{ align-items:flex-start !important; }

  /* Verse-index, related rows — already in base, tighten */
  .r-vidx-item, .r-related-row{
    grid-template-columns:80px 1fr !important;
    column-gap:14px !important;
  }

  /* Maps head / standalone */
  .r-maps-head .r-title,
  .r-map-head .r-title{ font-size:36px !important; line-height:1.08 !important; }
  .r-maps-head .r-dek,
  .r-map-head .r-dek{ font-size:17px !important; }

  /* Territory blocks */
  .r-terr-head .ttl{ font-size:26px !important; }
  .r-terr-head .num{ font-size:11px !important; }

  /* Lexicon grid */
  .r-lex-grid{ grid-template-columns:1fr !important; gap:14px !important; }

  /* Stand-row (article callouts) — collapse to single column,
     reset desktop grid placements, and re-flow .meta inline. */
  .r-stand-row{ grid-template-columns:1fr !important; row-gap:6px !important; }
  .r-stand-row .num,
  .r-stand-row .stand-thumb,
  .r-stand-row .ttl,
  .r-stand-row .meta,
  .r-stand-row .verses{ grid-column:1 !important; grid-row:auto !important; }
  .r-stand-row .num{ padding-top:0 !important; }
  .r-stand-row .stand-thumb{
    width:100% !important;
    max-width:280px !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    margin-top:0 !important;
    margin-bottom:6px !important;
  }
  .r-stand-row .ttl{ font-size:22px !important; line-height:1.22 !important; margin-bottom:8px !important; }
  .r-stand-row .meta{
    flex-direction:row !important;
    align-items:baseline !important;
    padding-top:0 !important;
    text-align:left !important;
    gap:6px !important;
    white-space:normal !important;
  }
  .r-stand-row .meta .dot{ display:inline !important; color:var(--rule) !important; }

  /* Footer subscribe within article pages */
  .r-foot-sub{ padding:36px 0 !important; }
  .r-foot-sub h3{ font-size:22px !important; }
}

/* Phones <=480 — final tightening on article pages */
@media (max-width: 480px){
  .r-title{ font-size:28px !important; }
  .r-cat-title{ font-size:40px !important; }
  .r-body{ font-size:16.5px !important; }
  .r-body h2{ font-size:22px !important; }
  .r-maps-head .r-title,
  .r-map-head .r-title{ font-size:30px !important; }

  /* Ensure all <a> tap targets meet 44px minimum on article body */
  .r-body a{ padding:1px 0; }
}

/* ============================================================
   TABLET (881–1024) — light tuning
   ============================================================ */
@media (min-width:881px) and (max-width:1024px){
  .container, .r-wrap{ padding:0 28px; }
  .hero-positioning{ font-size:36px; }
  .r-cat-title{ font-size:88px; }
  .r-title{ font-size:46px; }
}

/* ============================================================
   Touch / motion / accessibility hardening
   ============================================================ */
@media (max-width: 880px){
  /* Larger min hit-area on every link inside main flows */
  main a, .footer a, .r-foot a{
    -webkit-tap-highlight-color: rgba(170,79,255,0.15);
  }

  /* Disable expensive backdrop-filter on small devices for perf */
  .nav, .r-nav{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(250,250,250,0.96) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}