/*
 * Public website chrome + shared page primitives:
 * announcement bar, header, mobile menu, footer, Play Store notice, inner-page hero, prose, CTA band.
 * Home sections live in css/home.css, the other pages in css/pages.css.
 */

/* ───────────────────────────── announcement ───────────────────────────── */
.announce { position: relative; z-index: calc(var(--z-nav) + 1); background: linear-gradient(90deg, var(--gold-600), var(--gold-500) 50%, var(--gold-600)); color: #1B1303; font-size: var(--fs-sm); font-weight: 600; }
.announce__in { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 42px; padding-block: .35rem; }
.announce__in p { text-align: center; }
.announce .link { color: inherit; }
.announce__x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; }
.announce__x:hover { background: rgba(27, 19, 3, .14); }
.announce :focus-visible { outline-color: #1B1303; }

/* ───────────────────────────── header ───────────────────────────── */
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--text); transition: background-color var(--t-med), border-color var(--t-med), transform var(--t-fast); }
.icon-btn:hover { background: var(--glass-2); border-color: var(--accent); }
.icon-btn:active { transform: scale(.94); }
.icon-btn[aria-pressed="false"] { color: var(--text-mute); }

[data-site-header] { position: sticky; top: 0; z-index: var(--z-nav); height: 0; }
.site-header { position: absolute; left: 0; right: 0; top: 0; color: #F3F7FA; transition: background-color var(--t-med), box-shadow var(--t-med); --text: #F3F7FA; --text-soft: #B4C8D6; --text-mute: #7F99AB; --line: rgba(181, 221, 236, .16); --glass: rgba(255, 255, 255, .06); --glass-2: rgba(255, 255, 255, .11); --accent: var(--gold-300); }
.site-header::before { content: ''; position: absolute; inset: 0; background: rgba(5, 19, 33, .94); border-bottom: 1px solid rgba(229, 197, 104, .2); opacity: 0; transition: opacity var(--t-med); pointer-events: none; }
.site-header.is-stuck::before { opacity: 1; }
.site-header__bar { position: relative; display: flex; align-items: center; gap: 1.5rem; height: 76px; transition: height var(--t-med) var(--ease-out); }
.site-header.is-stuck .site-header__bar { height: 64px; }
.site-header__logo { flex: none; height: 40px; display: block; border-radius: 6px; }
.site-header__logo svg { height: 100%; width: auto; }
.site-nav { display: flex; align-items: center; gap: .25rem; margin-inline: auto; padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(5, 19, 33, .35); }
.site-nav__link { position: relative; padding: .5rem 1rem; border-radius: var(--r-pill); color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600; transition: color var(--t-med), background-color var(--t-med); }
.site-nav__link:hover { color: #fff; background: var(--glass-2); }
.site-nav__link.is-active { color: #1B1303; background: var(--gold-300); }
.site-header__actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.site-nav + .site-header__actions { margin-left: 0; }
.site-header__burger { display: none; }
@media (max-width: 960px) {
  .site-nav, .site-header__login { display: none; }
  .site-header__burger { display: inline-grid; }
  .site-header__actions, .site-nav + .site-header__actions { margin-left: auto; }
  .site-header__bar { height: 66px; gap: .75rem; }
  .site-header__logo { height: 34px; }
}
@media (max-width: 480px) {
  .site-header__actions .btn--primary { display: none; }
  .site-header__logo { height: 32px; }
}

/* mobile menu: a full sheet that drops from the top like a swell */
.site-menu { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(2, 9, 18, .6); opacity: 0; transition: opacity var(--t-med); }
.site-menu.is-open { opacity: 1; }
.site-menu__panel { display: flex; flex-direction: column; gap: 1.5rem; max-height: 100dvh; overflow-y: auto; padding: 0 var(--gutter) max(1.5rem, env(safe-area-inset-bottom)); background: linear-gradient(180deg, #0F3A55 0%, var(--deep-900) 100%); color: #F3F7FA; border-radius: 0 0 var(--r-2xl) var(--r-2xl); border-bottom: 1px solid rgba(229, 197, 104, .35); box-shadow: var(--shadow-3); transform: translateY(-104%); transition: transform .5s var(--ease-out); --text: #F3F7FA; --text-soft: #B4C8D6; --line: rgba(181, 221, 236, .16); --line-strong: rgba(181, 221, 236, .28); --glass: rgba(255, 255, 255, .06); --glass-2: rgba(255, 255, 255, .11); --accent: var(--gold-300); }
.site-menu.is-open .site-menu__panel { transform: none; }
.site-menu__top { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.site-menu__logo { height: 34px; }
.site-menu__nav { display: grid; }
.site-menu__link { display: flex; align-items: center; justify-content: space-between; padding: 1rem .25rem; border-bottom: 1px solid var(--line); color: #F3F7FA; font-family: var(--font-display); font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out) calc(var(--i) * 45ms + 120ms), transform .5s var(--ease-out) calc(var(--i) * 45ms + 120ms), color var(--t-med); }
.site-menu.is-open .site-menu__link { opacity: 1; transform: none; }
.site-menu__link .i { color: var(--gold-300); }
.site-menu__link.is-active { color: var(--gold-300); }
.site-menu__cta { display: grid; gap: .7rem; }
.site-menu__note { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: var(--fs-sm); color: var(--text-soft); }
.site-menu__note .i { color: var(--gold-300); }

/* ───────────────────────────── footer ───────────────────────────── */
.site-footer { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--deep-950), var(--abyss)); color: var(--text-soft); padding: clamp(3.5rem, 7vw, 6rem) 0 1.5rem; border-top: 1px solid rgba(229, 197, 104, .25); }
.site-footer .container { position: relative; z-index: 1; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.site-footer__logo { display: block; height: 52px; margin-bottom: 1.1rem; }
.site-footer__brand p { max-width: 42ch; font-size: var(--fs-sm); }
.site-footer__project { margin-top: .8rem; color: var(--text-mute); }
.site-footer__h { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 1rem; }
.site-footer__col ul { display: grid; gap: .65rem; }
.site-footer__col a { color: var(--text-soft); font-size: var(--fs-sm); font-weight: 500; transition: color var(--t-med); }
.site-footer__col a:hover { color: #fff; }
.site-footer__contact li { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--fs-sm); }
.site-footer__contact .i { flex: none; margin-top: .15em; color: var(--gold-300); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-mute); }
.site-footer__hadith { font-family: var(--font-quote); font-style: italic; font-size: 1.1rem; color: var(--text-soft); }
.site-footer__hadith span { font-family: var(--font-body); font-style: normal; font-size: var(--fs-xs); color: var(--text-mute); margin-left: .4em; }
@media (max-width: 900px) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-footer__top { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; } .site-footer__col:last-child { grid-column: 1 / -1; } .site-footer__bottom { padding-bottom: 4.5rem; } }

/* ───────────────────────────── Play Store notice ───────────────────────────── */
.play-note { position: fixed; z-index: var(--z-float); left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .2rem; padding: .35rem; border-radius: var(--r-pill); border: 1px solid rgba(229, 197, 104, .4); background: #0B2438; color: #F3F7FA; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(20px); transition: opacity var(--t-med), transform .5s var(--ease-spring); pointer-events: none; }
.play-note.is-in { opacity: 1; transform: none; pointer-events: auto; }
.play-note__main { display: flex; align-items: center; gap: .6rem; padding: .15rem .5rem .15rem .15rem; border-radius: var(--r-pill); text-align: left; color: inherit; }
.play-note__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.play-note__text { display: grid; line-height: 1.15; }
.play-note__text strong { font-size: var(--fs-sm); }
.play-note__text small { font-size: .7rem; color: #B4C8D6; }
.play-note__x { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #7F99AB; }
.play-note__x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.play-note__x .i { width: 1rem; height: 1rem; }
.play-note__text, .play-note__x { transition: opacity var(--t-med); }
.play-note.is-mini { padding: .25rem; opacity: .92; }
.play-note.is-mini .play-note__main { padding: 0; }
.play-note.is-mini .play-note__text, .play-note.is-mini .play-note__x { display: none; }

/* ───────────────────────────── inner-page hero (About, Competition, Help, Contact, legal) ───────────────────────────── */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(76px + clamp(3rem, 8vw, 6.5rem)) 0 clamp(4.5rem, 10vw, 8rem); background: linear-gradient(180deg, #12607A 0%, var(--deep-700) 50%, var(--deep-900) 100%); color: #F3F7FA; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.page-hero__text { display: grid; gap: 1.2rem; justify-items: start; }
.page-hero h1 { font-size: clamp(2.3rem, 1.3rem + 4vw, 4.4rem); }
.page-hero__art { position: relative; min-height: 260px; display: grid; place-items: center; }
.crumbs { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--text-soft); }
.crumbs a { color: var(--text-soft); }
.crumbs a:hover { color: #fff; }
.crumbs .i { width: .9em; height: .9em; opacity: .6; }
@media (max-width: 860px) { .page-hero__grid { grid-template-columns: 1fr; } .page-hero__art { min-height: 200px; order: -1; max-width: 360px; margin-inline: auto; width: 100%; } .page-hero { padding-top: calc(66px + 2rem); } }

/* light band that follows a deep hero */
.band { position: relative; background: var(--bg); color: var(--text); }
.band--pearl { background: var(--pearl-50); }
.band--abyss { background: var(--abyss); }

/* prose (privacy, delete account, long answers) */
.prose { max-width: 72ch; color: var(--text-soft); font-size: 1.04rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-h3); color: var(--text); margin-top: 2.2em; scroll-margin-top: 100px; }
.prose h3 { font-size: var(--fs-h4); color: var(--text); margin-top: 1.8em; }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .5em; }
.prose li::marker { color: var(--accent-strong); font-weight: 700; }
.prose a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.prose code { font-size: .9em; padding: .12em .45em; border-radius: 6px; background: var(--glass-2); color: var(--text); }

/* closing call-to-action band used on every public page */
.cta-band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(4rem, 9vw, 7.5rem) 0; background: linear-gradient(180deg, var(--deep-800), var(--deep-950)); color: #F3F7FA; text-align: center; }
.cta-band .container { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.4rem; }
.cta-band h2 { max-width: 18ch; }
.cta-band p { max-width: 52ch; color: var(--text-soft); }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .4rem; }
.cta-band__shell { width: clamp(120px, 18vw, 190px); margin-bottom: .2rem; }

/* number + label pairs */
.stat { display: grid; gap: .25rem; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); font-weight: 750; line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.stat__label { font-size: var(--fs-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }

@media print {
  [data-site-header], [data-site-footer], .play-note, .announce, .cta-band { display: none !important; }
}