/* ═══════════════════════════════════════════════════
   RevisionNMT — Shared CSS
═══════════════════════════════════════════════════ */
/* Fonts: self-hosted @font-face rules are inlined in every page head (scripts/page-heads.js). */

:root {
  --navy:   #1A2744;
  --gold:   #F5C842;
  --bg:     #F9F8F5;
  --white:  #FFFFFF;
  --text:   #1A1A1A;
  --muted:  #5F6673;
  --border: #E5E7EB;
  --green:  #22C55E;
  --red:    #EF4444;
  --shadow: 0 4px 24px rgba(26,39,68,.10);
  --shadow-h: 0 12px 40px rgba(26,39,68,.16);
  --radius: 16px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
button, input, select, textarea { font-family:inherit; }
html { scroll-behavior:smooth; }
body {
  font-family:'Nunito',sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.6; overflow-x:hidden;
  padding-top:0;
}

/* ── LAYOUT ───────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.section   { padding:80px 0; }
.page-hero {
  background:linear-gradient(135deg,var(--navy) 0%,#243060 100%);
  color:#fff; padding:64px 0 48px;
}
.page-hero h1 {
  font-family:'Unbounded',sans-serif;
  font-size:clamp(26px,4.4vw,44px); font-weight:800; letter-spacing:-.02em; line-height:1.12; margin-bottom:12px;
}
/* dark page heads share the home hero's texture: dot grid + gold glow (behind the content) */
.page-hero, .setup-hero { position:relative; overflow:hidden; isolation:isolate; }
.page-hero::before, .setup-hero::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size:24px 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent 25%,#000); mask-image:linear-gradient(90deg,transparent 25%,#000);
}
.page-hero::after, .setup-hero::after {
  content:''; position:absolute; z-index:-1; pointer-events:none; width:520px; height:520px; right:-160px; top:-260px;
  background:radial-gradient(circle,rgba(245,200,66,.18),transparent 62%);
}
.page-hero p { font-size:17px; color:rgba(255,255,255,.7); max-width:560px; }

/* ── TYPOGRAPHY ───────────────────────────────── */
h1,h2,h3 { font-family:'Unbounded',sans-serif; }
.section-title {
  font-size:clamp(24px,3.5vw,38px); font-weight:700;
  color:var(--navy); line-height:1.2; margin-bottom:12px;
}
.section-sub { font-size:17px; color:var(--muted); max-width:560px; line-height:1.75; }
.label {
  display:inline-block; font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:#7A5B00; background:rgba(245,200,66,.12);
  padding:5px 12px; border-radius:20px; margin-bottom:14px;
}

/* gold text on dark backgrounds; the darker default keeps contrast on light ones */
.hero .label, .page-hero .label, .features-bg .label, .pricing-hero .label, .subj-hero .label, .setup-hero .label { color:var(--gold); }

/* ── BUTTONS ──────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:12px;
  font-family:'Nunito',sans-serif; font-size:15px; font-weight:700;
  text-decoration:none; cursor:pointer; border:none;
  transition:all .25s ease;
}
.btn-sm { padding:10px 20px; font-size:14px; }
.btn-gold {
  background:var(--gold); color:var(--navy);
  box-shadow:0 4px 16px rgba(245,200,66,.3);
}
.btn-gold:hover { background:#e6b800; transform:translateY(-2px); }
.btn-navy { background:var(--navy); color:#fff; }
.btn-navy:hover { background:#243060; transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--navy); border:2px solid var(--navy); }
.btn-outline:hover { background:var(--navy); color:#fff; transform:translateY(-2px); }
.btn-outline-sm {
  background:transparent; color:var(--navy);
  border:1.5px solid var(--navy); padding:8px 16px;
  border-radius:10px; font-size:14px; font-weight:700;
  text-decoration:none; transition:all .2s;
}
.btn-outline-sm:hover { background:var(--navy); color:#fff; }
.btn-ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.35); }
.btn-ghost:hover { background:rgba(255,255,255,.1); border-color:#fff; }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { background:#16a34a; transform:translateY(-2px); }
.btn-red { background:var(--red); color:#fff; }
.btn-danger { background:#FEE2E2; color:var(--red); border:1.5px solid #FECACA; }

/* ── NAV ──────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:100;
  background:rgba(249,248,245,.93);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); transition:box-shadow .3s;
}
.nav.scrolled { box-shadow:var(--shadow); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:68px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-icon {
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg,var(--navy),#2A3F7E);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.logo-text { font-family:'Unbounded',sans-serif; font-size:18px; font-weight:700; color:var(--navy); }
.logo-text span { color:#8F6B00; } /* gold on the light header fails contrast; the footer logo keeps --gold on navy */
.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a { font-size:14px; font-weight:600; color:var(--text); text-decoration:none; transition:color .2s; }
.nav-links a:hover,.nav-links a.active { color:var(--navy); }
.nav-links a.active { border-bottom:2px solid var(--gold); padding-bottom:2px; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.nav-login { font-size:14px; font-weight:600; color:var(--navy); text-decoration:none; }
.hamburger { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer; width:44px; height:44px; padding:0; background:none; border:none; border-radius:10px; }
.hamburger span { display:block; width:24px; height:2px; background:var(--navy); border-radius:2px; transition:all .3s; }
.mob-menu {
  display:none; position:fixed; inset:68px 0 0;
  background:#fff; z-index:99; flex-direction:column; gap:4px; padding:24px; overflow-y:auto;
}
.mob-menu.open { display:flex; }
.mob-menu a { padding:14px 16px; font-size:16px; font-weight:600; color:var(--navy); text-decoration:none; border-radius:12px; transition:background .2s; }
.mob-menu a:hover { background:var(--bg); }
.mob-menu .btn-gold { margin-top:12px; justify-content:center; }

/* ── FOOTER ───────────────────────────────────── */
.footer { background:var(--navy); color:rgba(255,255,255,.75); padding:72px 0 36px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:56px; }
.footer-brand { display:flex; flex-direction:column; gap:14px; }
.f-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.f-logo-text { font-family:'Unbounded',sans-serif; font-size:17px; font-weight:700; color:#fff; }
.f-logo-text span { color:var(--gold); }
.f-tagline { font-size:14px; line-height:1.75; max-width:260px; }
.socials { display:flex; gap:10px; margin-top:6px; }
.social-link {
  width:38px; height:38px; background:rgba(255,255,255,.08); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); text-decoration:none; transition:all .2s;
}
.social-link:hover { background:var(--gold); color:var(--navy); transform:translateY(-2px); }
.footer-col .f-title {
  font-family:'Unbounded',sans-serif; font-size:11px; font-weight:600;
  color:#fff; margin-bottom:18px; text-transform:uppercase; letter-spacing:.5px;
}
.f-contact { font-size:14px; line-height:1.7; }
.f-contact a { color:var(--gold); text-decoration:none; word-break:break-all; }
.f-contact a:hover { text-decoration:underline; }
.f-feedback { align-self:flex-start; min-height:44px; padding:10px 20px; border:none; border-radius:12px; background:var(--gold); color:var(--navy); font-family:'Nunito',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:background .2s; }
.f-feedback:hover { background:#e6b800; }
.f-links { display:flex; flex-direction:column; gap:4px; list-style:none; }
.f-links a { display:inline-block; padding:9px 0; color:rgba(255,255,255,.75); text-decoration:none; font-size:14px; transition:color .2s; }
.f-links a:hover { color:var(--gold); }
.f-divider { border:none; border-top:1px solid rgba(255,255,255,.08); margin-bottom:28px; }
.f-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.f-copy { font-size:13px; }
.f-legal { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 20px; list-style:none; }
.f-legal a { display:inline-block; padding:8px 0; font-size:13px; color:rgba(255,255,255,.7); text-decoration:none; transition:color .2s; }
.f-legal a:hover { color:#fff; }

/* ── FLOATING CTA ─────────────────────────────── */
.float-cta {
  display:none; position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:90; white-space:nowrap; box-shadow:0 8px 32px rgba(245,200,66,.5);
}

/* ── SCROLL-TO-TOP (js/nav.js) ─────────────────── */
.to-top {
  position:fixed; bottom:24px; right:24px; z-index:88; width:44px; height:44px; border-radius:50%;
  background:var(--navy); color:var(--gold); border:none; font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(26,39,68,.3);
  opacity:0; translate:0 12px; pointer-events:none; transition:opacity .25s, translate .25s;
}
.to-top.on { opacity:1; translate:0 0; pointer-events:auto; }
@media(max-width:768px) { .to-top { bottom:84px; right:16px; } }   /* above the floating sign-up button */

/* ── CARDS ────────────────────────────────────── */
.card {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:28px 24px;
  transition:all .3s ease;
}
.card:hover { box-shadow:var(--shadow-h); transform:translateY(-4px); }

/* ── FORM ELEMENTS ────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.form-label { font-weight:700; font-size:14px; color:var(--navy); }
.form-input {
  padding:13px 16px; border:1.5px solid var(--border); border-radius:12px;
  font-family:'Nunito',sans-serif; font-size:15px; color:var(--text);
  background:#fff; transition:border-color .2s, box-shadow .2s; outline:none;
}
.form-input:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(26,39,68,.1); }
.form-input.error { border-color:var(--red); }
.form-error { font-size:13px; color:var(--red); margin-top:4px; }

/* ── PROGRESS BAR ─────────────────────────────── */
.progress-track {
  background:var(--border); border-radius:4px; height:8px; overflow:hidden;
}
.progress-fill {
  height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--navy),var(--gold));
  transition:width .6s ease;
}

/* ── BADGE ────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:20px;
  font-size:12px; font-weight:700;
}
.badge-gold  { background:rgba(245,200,66,.15); color:#92700A; }
.badge-green { background:rgba(34,197,94,.12);  color:#15803D; }
.badge-navy  { background:rgba(26,39,68,.1);    color:var(--navy); }
.badge-red   { background:rgba(239,68,68,.1);   color:#B91C1C; }

/* ── REVEAL ON SCROLL ──────────────────────────
   js/nav.js puts html.reveal and shows each .fi when it scrolls into view;
   without JS (or on pages without nav.js) everything simply stays visible. */
.fi { transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal .fi:not(.show) { opacity:0; transform:translateY(28px); }
.d1{transition-delay:.08s} .d2{transition-delay:.16s}
.d3{transition-delay:.24s} .d4{transition-delay:.32s}

/* ── SHARED MOTION (used by practice, test, mock exam, plan, dashboard) ── */
@keyframes rise-in { from { opacity:0; transform:translateY(14px); } }
@keyframes pop-in { 0% { opacity:0; transform:scale(.8); } 60% { transform:scale(1.06); } 100% { opacity:1; transform:none; } }
@keyframes ok-pop { 40% { transform:scale(1.02); } }
@keyframes shake { 20%,60% { transform:translateX(-5px); } 40%,80% { transform:translateX(5px); } }

/* ── MICRO-INTERACTIONS ─────────────────────── */
.btn:active, .btn-outline-sm:active, .f-feedback:active { transform:translateY(0) scale(.97); }
.btn .arr { display:inline-block; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arr, a:hover > .arr { transform:translateX(4px); }
:focus-visible { outline:3px solid #2A3F7E; outline-offset:2px; }
.on-dark :focus-visible, .footer :focus-visible { outline-color:var(--gold); }

/* ── LOADING (appears only if loading takes longer than ~0.4 s, so fast loads do not flash) ── */
.loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:28px 16px; color:var(--muted); font-weight:600; font-size:15px; opacity:0; animation:ld-show .2s .4s forwards; }
.loading::before { content:''; width:20px; height:20px; flex-shrink:0; border:3px solid var(--border); border-top-color:var(--navy); border-radius:50%; animation:ld-spin .8s linear infinite; }
@keyframes ld-spin { to { transform:rotate(360deg); } }
@keyframes ld-show { to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .loading::before { animation-duration:2.4s; } }
/* subject pages: the topic list is built with += — while it is still empty, keep its place (the footer used to jump) */
.topics-list:empty { min-height:70vh; }
/* subject hero counters are filled from the database: an empty number keeps the width of three digits so the line does not re-wrap */
.sh-stat strong:empty::before { content:'000'; visibility:hidden; }
@media(max-width:600px){ .sh-stats { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px !important; } .sh-stat { display:flex; flex-direction:column; line-height:1.3; } }
.topics-list:empty::before { content:'Завантаження…'; display:block; padding:28px 0; text-align:center; color:var(--muted); font-weight:600; opacity:0; animation:ld-show .2s .4s forwards; }

/* ── LOCK OVERLAY ─────────────────────────────── */
.lock-overlay {
  position:absolute; inset:0; background:rgba(249,248,245,.9);
  backdrop-filter:blur(4px); border-radius:inherit;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; z-index:10;
  text-align:center; padding:24px;
}
.lock-icon { font-size:36px; }
.lock-title { font-family:'Unbounded',sans-serif; font-size:16px; font-weight:700; color:var(--navy); }
.lock-sub { font-size:14px; color:var(--muted); }

/* ── SUBJECT COLORS ───────────────────────────── */
.subj-math     { --sc:#3B82F6; }
.subj-ukrainian{ --sc:#8B5CF6; }
.subj-history  { --sc:#F59E0B; }
.subj-english  { --sc:#10B981; }
.subj-biology  { --sc:#22C55E; }
.subj-chemistry{ --sc:#EF4444; }
.subj-physics  { --sc:#F97316; }
.subj-geography{ --sc:#06B6D4; }
.subj-literature{ --sc:#E11D48; }

/* ── RESPONSIVE ───────────────────────────────── */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
}
@media(max-width:768px) {
  .section { padding:56px 0; }
  .nav-links,.nav-login,.nav-actions .btn { display:none; }
  .hamburger { display:flex; }
  .float-cta { display:flex; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .f-bottom { flex-direction:column; text-align:center; }
}
@media(max-width:480px) {
  .container { padding:0 16px; }
  .footer-grid { grid-template-columns:1fr; }
}

/* long displayed formulas / reaction equations scroll inside their block instead of widening the page on phones */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
/* a long formula inside an answer option (match / single) scrolls inside the option on phones instead of overflowing the card */
.opt .katex, .tq-opt .katex { display:inline-block; max-width:100%; overflow-x:auto; overflow-y:hidden; vertical-align:middle; }
.opt > span, .tq-opt > span, .opt-txt { min-width:0; }

/* ── REDUCED MOTION: no movement anywhere; the loading spinner still turns slowly ── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  .reveal .fi:not(.show) { opacity:1; transform:none; }
  .loading::before { animation-duration:2.4s !important; animation-iteration-count:infinite !important; }
}