/* HEADER-NAV-01 (seat A1, 16 Oct 2026). THE SITE HEADER: four plain links (Search, Words, How it works,
   Sources & rights) and three buttons of one size and one weight (Read the Qur'an, Listen, Explore questions).

   Its own file, at a versioned address (base.html), and loaded after the others: the older stylesheets are cached
   for 7 days at unversioned addresses, so every rule this header needs is here and overrides theirs, and a browser
   holding an older copy of them still draws this header whole. No words change.

     1024px and up    one line: brand, the links, the buttons (1024 and 1280 measured; this is the 1024 wrap fixed)
     640 to 1023px    two lines: brand and the links, then the buttons
     below 640px      brand and the menu button, then the buttons as one row; the menu holds the four links

   ONE SIZE: every button has the same type, weight, padding, border and height. From 640px each is as wide as its
   words - three equal widths do not fit one line at 1024 beside the brand (measured: 1,044px needed, 976px there);
   below 640px the row is three equal thirds. */

.rd-header .rd-acts{display:flex;gap:.5rem;flex:none}
.rd-header .rd-act{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:var(--rd-sm);font-weight:500;line-height:1.2;
  padding:.5rem .85rem;border:1.5px solid var(--rd-ink);border-radius:var(--rd-r-sm);
  background:var(--rd-ink);color:var(--rd-bg);
  text-decoration:none;white-space:nowrap;
  transition:background var(--rd-motion),border-color var(--rd-motion),color var(--rd-motion);
}
/* hover: the theme's softer ink, so the words stay readable in dark mode too (a fixed #0e1512, as the old button had,
   put dark words on a dark ground there) */
.rd-header .rd-act:hover{background:var(--rd-ink-soft);border-color:var(--rd-ink-soft)}
.rd-header .rd-act:focus-visible{outline:2px solid var(--rd-gold);outline-offset:2px}
.rd-header .rd-act[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--rd-gold-light)}
/* VERSION B: "Read the Qur'an" filled; Listen and Explore questions outlined - the same ink, border, weight and size. */
.rd-header .rd-act:not(.rd-act-main){background:transparent;color:var(--rd-ink)}
.rd-header .rd-act:not(.rd-act-main):hover{background:var(--rd-paper-deep);border-color:var(--rd-ink)}
.rd-header .rd-nav{flex-wrap:nowrap;gap:1.25rem}
.rd-header .rd-nav a{white-space:nowrap}

@media (min-width:640px){
  .rd-header .rd-wrap{flex-wrap:wrap}
  .rd-header .rd-brand{flex:none}
  .rd-header .rd-nav{order:0;flex-basis:auto;margin-inline-start:auto}
}
@media (min-width:640px) and (max-width:1023.98px){
  .rd-header .rd-wrap{column-gap:.5rem;row-gap:.6rem;padding-block:.9rem}
  .rd-header .rd-nav{gap:.75rem}
  .rd-header .rd-nav a,.rd-header .rd-act{font-size:.8125rem}
  .rd-header .rd-acts{flex:1 1 100%;justify-content:flex-end}
}
@media (min-width:1024px){
  /* still allowed to wrap: if a fallback font is wider than Inter, the buttons drop to a second line instead of
     pushing the page sideways */
  .rd-header .rd-wrap{gap:1.25rem}
}
@media (min-width:1024px) and (max-width:1199.98px){
  .rd-header .rd-wrap{width:min(1120px,100% - 2rem);gap:1rem}
  .rd-header .rd-nav{gap:.875rem}
  .rd-header .rd-nav a,.rd-header .rd-act{font-size:.8125rem}
  .rd-header .rd-acts{gap:.4rem}
  .rd-header .rd-act{padding:.5rem .6rem}
}

@media (max-width:639.98px){
  .rd-header .rd-wrap{flex-wrap:wrap;row-gap:.65rem}
  .rd-header .rd-acts{order:3;flex:1 1 100%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.4rem}
  .rd-header .rd-act{white-space:normal;min-height:2.75rem;padding:.4rem .35rem;font-size:.84rem;line-height:1.15}
}

/* THE HOME PAGE'S "NEW HERE?" (HEADER-NAV-01, the revised addition): with the fourth card (Listen) the four sit two by two
   from 640px, and stay stacked below it (clarity-ui.css). Three cards (the player off) keep their row of three. */
@media (min-width:640px){
  .cu-doors:has(> li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* SITE-COPY-LISTEN-01: with the reciters' tile the band holds six figures, so from 768px it is three by two rather than five
   and one left over; the first figure of the second row loses its rule, as the first of a row does. Five keep their one row. */
@media (min-width:48rem){
  .rd-stats:has(> .rd-stat:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1.5rem}
  .rd-stats:has(> .rd-stat:nth-child(6)) > .rd-stat:nth-child(4){border-left:0;padding-left:0}
}
/* the three buttons under "New here?" (Read the Qur'an, Listen, Explore a question): on a phone, one row of equal thirds, as
   in the header, rather than two and one. */
@media (max-width:639.98px){
  .rd-hero-actions:has(> .rd-btn:nth-child(3)){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
  .rd-hero-actions:has(> .rd-btn:nth-child(3)) > .rd-btn{padding:.6rem .35rem;text-align:center;min-height:2.75rem}
}