/* MOBILE-LANDING-01 (seat A2, 14 Oct 2026). PHONE ONLY (below 640px).

   Measured at 390x844 before this file: the wordmark sat smaller than the header
   button, the five nav links wrapped onto a second row for one link, the hero
   began ~90px below a 169px header, the eyebrow ran to two lines, both hero
   buttons fell below the first screen, and "Read the Qur'an" showed twice.

   Every rule here sits under (max-width:639.98px) except the first, which hides
   the phone menu at 640px and up. So the desktop and tablet header and landing
   render exactly as before. No words change: the menu button is an icon, named
   by its aria-label. */

.rd-menu{display:none}

@media (max-width:639.98px){
  /* ONE ROW: brand left, menu button right. The header's own button goes; the
     hero keeps "Read the Qur'an" as its first action, so it is not lost. */
  .rd-header{position:relative}
  .rd-header .rd-wrap{flex-wrap:nowrap;gap:.75rem;padding-block:.7rem}
  .rd-header .rd-nav{display:none}
  .rd-header .rd-action{display:none}

  /* THE WORDMARK, about 1.4x the size it had at these widths (the 720px rule set
     1.7rem / 1.2rem; the 26rem rule below sets the narrow sizes). */
  .rd-brand-ar{font-size:2.35rem}
  .rd-brand-name{font-size:1.65rem;letter-spacing:.15em}
  .rd-brand-rule{min-height:2.7rem}

  /* THE MENU. A <details>: the summary is the button, the nav is the panel.
     The panel hangs below the header, full width, over the page rather than
     pushing it down. */
  .rd-menu{display:block;margin-inline-start:auto;flex:none}
  .rd-menu-btn{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    width:2.75rem;height:2.75rem;
    border:1px solid var(--rd-border);border-radius:var(--rd-r-sm);
    color:var(--rd-ink);background:var(--rd-bg);
  }
  .rd-menu-btn::-webkit-details-marker{display:none}
  .rd-menu-btn::marker{content:""}
  .rd-menu-btn:focus-visible{outline:2px solid var(--rd-gold);outline-offset:2px}
  .rd-menu-bars,.rd-menu-bars::before,.rd-menu-bars::after{
    display:block;width:1.2rem;height:2px;background:currentColor;border-radius:1px;
  }
  .rd-menu-bars{position:relative}
  .rd-menu-bars::before,.rd-menu-bars::after{content:"";position:absolute;left:0}
  .rd-menu-bars::before{top:-6px}
  .rd-menu-bars::after{top:6px}
  /* Open: the three bars become a cross, so the same button reads as "close". */
  .rd-menu[open] .rd-menu-bars{background:transparent}
  .rd-menu[open] .rd-menu-bars::before{top:0;transform:rotate(45deg)}
  .rd-menu[open] .rd-menu-bars::after{top:0;transform:rotate(-45deg)}
  .rd-menu-nav{
    position:absolute;left:0;right:0;top:100%;z-index:20;
    display:flex;flex-direction:column;
    padding:.25rem 1rem 1rem;
    background:var(--rd-bg);border-bottom:1px solid var(--rd-border);
    box-shadow:0 8px 16px rgba(0,0,0,.06);
  }
  .rd-menu-nav a{
    font-size:1rem;color:var(--rd-ink-soft);text-decoration:none;
    padding:.8rem .25rem;border-bottom:1px solid var(--rd-border);
  }
  .rd-menu-nav a:last-child{border-bottom:0}
  .rd-menu-nav a:hover{color:var(--rd-ink)}
  .rd-menu-nav a[aria-current="page"]{color:var(--rd-ink);font-weight:600}
  .rd-menu-nav a:focus-visible{outline:2px solid var(--rd-gold);outline-offset:-2px}

  /* THE HERO STARTS UNDER THE HEADER: the landing page's main carried 2.5rem of top
     padding and the lede 3rem more at this width (measured: 40px + 48px), on top of
     the header's second row. The gap is now the lede's 1.75rem alone. */
  .rd-home{padding-top:0}
  .rd-lede{padding-top:1.75rem}

  /* THE EYEBROW ON ONE LINE: the same words, a little smaller and less tracked. */
  .rd-hero .rd-kicker{font-size:.66rem;letter-spacing:.07em;margin-bottom:.75rem}
}

/* NARROW (the 26rem rule in redesign.css drops the descriptor and sets the
   lockup at 1.55rem / 1.05rem): the same 1.4x step from those sizes. */
@media (max-width:26rem){
  .rd-brand{gap:.6rem}
  .rd-brand-ar{font-size:2.15rem}
  .rd-brand-name{font-size:1.45rem;letter-spacing:.13em}
  .rd-brand-rule{min-height:2.1rem}
}