/* THE ESTATE'S ONE HEADER FRAME (owner, 2026-09-22: "unify the headers, consistency and beauty
   with functionality, but maintain their content"). ONE master, tools/header/header.css, fanned
   byte-identical to every app by tools/sync-header.sh and verified by fanout-verify.sh; every page
   loads it right after its own style.css, so these rules win by order at equal specificity.
   THE FRAME ONLY: one bar height (--bar-h), one background, one hairline, one wordmark, one title
   voice, one streak pill. Each page keeps its own content (dates, links, tabs, progress).
   ONE NUMBER TO TUNE: --bar-h. The counters pad their body by it + 8px and the audio apps set
   --header-h to the same value (per-app numbers, named in CLAUDE.md). */
:root { --bar-h: 52px; }

/* the bar: the status-bar inset above, then exactly --bar-h of bar, whatever the page put inside */
.site-header, .top {
  box-sizing: border-box;
  height: calc(env(safe-area-inset-top, 0px) + var(--bar-h));
  padding: env(safe-area-inset-top, 0px) 0 0;
  background: rgba(10, 10, 10, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #3a3020;
}
.site-header .header-inner, .top .header-inner {
  box-sizing: border-box;
  height: calc(var(--bar-h) - 1px);
  padding: 0 16px;
  margin: 0 auto;
}
/* the row: a left side, the title, a right side. THE SIDES ARE ALWAYS EQUAL (flex 1 1 0, no
   minimum), so the title sits exactly on the page's centre line on every page and at every width;
   what a side holds shrinks a little on a narrow phone (below) rather than pushing the title. One
   inner width for every page, so the wordmark stands at the same place on a desktop everywhere. */
.site-header .header-inner, .top .header-inner { max-width: 960px; }
.header-row-top { padding: 0; }
.site-header .header-side, .top .header-side, .header-row-top > .back-link, .header-inner > .back-link,
.site-header .header-left, .site-header .header-right { flex: 1 1 0; min-width: 0; }
.site-header .header-side, .top .header-side, .header-row-top > .back-link, .header-inner > .back-link, .site-header .header-left { display: flex; align-items: center; }
.site-header .header-side.header-right, .top .header-side.header-right { justify-content: flex-end; gap: 8px; }
.site-header .header-side > *, .top .header-side > * { min-width: 0; }
.site-header .header-meta { flex: 0 1 auto; min-width: 0; }
/* the wordmark stands at ONE place on every page: a 16px chevron and a 6px gap before it on every
   sub page, and the same 22px of lead-in on the homepage, which has no chevron (nothing to go back to) */
.site-header .back-link, .site-header .header-brand, .top .header-brand { gap: 6px; }
.site-header .back-link svg, .site-header .header-brand svg, .top .header-brand svg { width: 16px; height: 16px; flex-shrink: 0; }
.site-header .header-left > .header-brand { padding-left: 22px; }
/* the homepage's dates step down a little on a phone so they sit whole on the centre line */
@media (max-width: 480px) {
  .site-header .header-date, .site-header #header-hijri { font-size: .8rem; }
  .site-header .header-date-g, .site-header #header-gregorian { font-size: .66rem; }
}
/* the common 360px Android width and the 375px iPhones: one more small step so the two right-hand lines
   and the dates still meet nowhere */
@media (max-width: 370px) {
  .site-header #header-hijri { font-size: .76rem; }
  .site-header #header-gregorian { font-size: .62rem; }
}

@media (max-width: 360px) {
  /* on a narrow phone the chevron steps aside (the wordmark itself is the way back) so the longest
     titles still sit centred between two equal sides; the homepage lead-in goes with it */
  .site-header .back-link svg, .site-header .header-brand svg, .top .header-brand svg { display: none; }
  .site-header .header-left > .header-brand { padding-left: 0; }
  .hdr-dash, .hdr-fam { font-size: .7rem; padding: 5px 9px; }
  .site-header .header-tab { font-size: .7rem; }
  .site-header .read-pct { font-size: .66rem; min-width: 28px; }
  .site-header .header-date { font-size: .82rem; }
  .site-header .header-date-g { font-size: .66rem; }
}

/* the wordmark: ISLAMIC over a hairline over TIMES, the same everywhere */
.site-header .logo-top, .site-header .logo-bottom, .top .logo-top, .top .logo-bottom {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: #c9a84c;
  text-transform: uppercase;
}
.site-header .logo-line, .top .logo-line { display: block; width: 100%; height: 1px; background: #7a6a30; opacity: 0.7; margin: 2px 0; border: none; }

/* the title voice: serif, bold, bright gold, one size that steps down on a narrow phone */
.site-header .header-title, .top .title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(0.66rem, 3.4vw, 0.95rem);
  letter-spacing: 0.06em;
  color: #f0c040;
  margin: 0 8px;
  white-space: nowrap;
  position: static;
  transform: none;
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
  pointer-events: auto;
}

/* the streak pill, the LAST item of the right side on every counting page (33, 100, 313, 1000,
   the family and friends Counter tabs, the halaqa counting page): a flow item, so the title can
   never slide under it; shown by the page's own script when the streak is above zero, hidden
   otherwise (a "0 day" pill is never shown) */
.it-streak {
  display: none;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(201, 168, 76, 0.10);
  border: 1px solid #3a3020;
  color: #f0c040;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  position: static;
  flex: 0 0 auto;
}