/* Reko Study – GCSE Maths Study Page
   Production CSS (vanilla, no framework). 
   Includes: light/dark themes, responsive grids, motion-sensible animations, and accessible focus states.
   -------------------------------------------------------------- */
.fake-3d-title {
  font-family: 'Luckiest Guy', cursive;
  font-size: 2.5rem;
  text-align: center;
  color: #1e40af;  /* Base blue */
  text-shadow:
    1px 1px 0 #1a368f,  /* slightly darker blue */
    2px 2px 0 #162e73,  /* deeper navy */
    3px 3px 0 #12265c,  /* very dark navy */
    4px 4px 0 #0d1d45;  /* almost black-blue */
  margin-bottom: 1.5rem;
  letter-spacing: 6px;
}
/* 1) CSS Variables & Baseline --------------------------------- */
:root{
  --bg: #0f172a;              /* slate-900 */
  --bg-soft: #111827;         /* gray-900 */
  --panel: #0b1224;           /* deep navy */
  --card: #0c1326;
  --elev: 0 10px 25px rgba(2,6,23,.35), 0 2px 6px rgba(2,6,23,.4);
  --blur: saturate(120%) blur(12px);
  --text: #e5e7eb;            /* gray-200 */
  --text-dim: #94a3b8;        /* slate-400 */
  --brand: #38bdf8;           /* sky-400 */
  --brand-2: #22d3ee;         /* cyan-400 */
  --accent: #a78bfa;          /* violet-400 */
  --success: #34d399;         /* emerald-400 */
  --warning: #f59e0b;         /* amber-500 */
  --danger: #fb7185;          /* rose-400 */
  --ring: 2px solid color-mix(in oklab, var(--brand) 65%, white 35%);
  --radius-xl: 1.25rem;
  --radius-lg: .875rem;
  --radius-md: .625rem;
  --gap-xl: clamp(1.25rem, 2.5vw, 2rem);
  --gap-lg: clamp(1rem, 2vw, 1.5rem);
  --gap-md: .9rem;
  --gap-sm: .6rem;
  --maxw: 1100px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f8fafc;           /* slate-50 */
    --bg-soft:#f1f5f9;      /* slate-100 */
    --panel:#ffffff;
    --card:#ffffff;
    --text:#0f172a;
    --text-dim:#475569;
    --elev: 0 8px 18px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.08);
  }
}

html{scroll-behavior:smooth}
body{
  background: radial-gradient(1200px 800px at 10% -10%, rgba(56,189,248,.2), transparent 40%),
              radial-gradient(1200px 800px at 110% 10%, rgba(167,139,250,.18), transparent 45%),
              var(--bg);
  color: var(--text);
}

/* Generic containers */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,3vw,28px)}
.study-section{position:relative;padding:clamp(36px,6vw,56px) 0}
.main-heading{font-size:clamp(1.25rem,1.6rem + .6vw,1.75rem);margin:0 0 .25rem;font-weight:800;letter-spacing:.2px}
.subtext{color:var(--text-dim);margin:.25rem 0 1.25rem;max-width:70ch}

/* Links & Buttons */
.button{display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1rem;border-radius:999px;border:1px solid transparent;font-weight:700;text-decoration:none;transition:transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease}
.button:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 35%, transparent),0 0 0 2px var(--brand)}
.button.cta-btn{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#001018}
.button.cta-btn:hover{transform:translateY(-1px)}
.button.secondary{background:transparent;border-color:color-mix(in oklab, var(--text-dim) 30%, transparent);color:var(--text)}
.button.small{padding:.55rem .85rem;font-size:.92rem}
.see-all-btn{border-color:transparent;background:color-mix(in oklab, var(--brand) 8%, var(--panel) 92%)}
.see-all-btn:hover{border-color:var(--brand)}

/* 2) Micro Hero ----------------------------------------------- */
/* ===========================
   Study page hero (matches home CTA style)
   =========================== */

.study-hero{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: clamp(2.2rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
  text-align: center;
  max-width: 1100px;
  margin: 2rem auto 2.5rem;

  /* brandy background */
  --hero-top: #dbeafe;  /* soft blue */
  --hero-bot: #c7d2fe;  /* soft indigo */
  --hero-glow: rgba(30,64,175,.12);

  background:
    radial-gradient(900px 240px at 50% -120px, var(--hero-glow), transparent 70%),
    linear-gradient(180deg, var(--hero-top), var(--hero-bot));
  box-shadow: 0 20px 40px rgba(2,6,23,.12);
}

/* animated sheen ring */
.study-hero::before{
  content:"";
  position:absolute; inset:-40%;
  background: conic-gradient(from 0deg at 50% 50%,
              transparent 0 25%, rgba(255,255,255,.18) 25% 35%,
              transparent 35% 100%);
  animation: study-hero-drift 16s linear infinite;
  pointer-events:none;
  mix-blend-mode: overlay;
}
@keyframes study-hero-drift{ to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .study-hero::before{ animation:none; } }

/* Title to match home CTA style */
.study-hero .section-title{
  margin: 0 0 1rem;
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: 1.5px;
  font-size: clamp(1.6rem, 4.8vw, 2.4rem);
  color: #0f172a;
  text-shadow: 1px 1px 0 #1a368f, 2px 2px 0 #162e73;
}

/* Subtext */
.study-hero .subtext{
  color: #1f2937;
  max-width: 60ch;
  margin: 0 auto 1rem;
  font-weight: 600;
}

/* Buttons (reuse existing .button styles; override for hero) */
.study-hero .cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  margin-top: .6rem;
  padding: clamp(.9rem, 2.2vw, 1.1rem) clamp(1.2rem, 3.2vw, 1.8rem);
  border-radius: 9999px;
  font-weight: 800;
  letter-spacing: .8px;
  text-decoration: none;
  background: linear-gradient(180deg, #3b82f6, #1e40af);
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 10px 18px rgba(30,64,175,.28),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.study-hero .cta-btn::after{
  content:"→";
  font-weight:900;
  transform: translateX(0);
  transition: transform .18s ease;
}
.study-hero .cta-btn:hover{
  transform: translateY(-3px);
  box-shadow:
    0 16px 26px rgba(30,64,175,.34),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.study-hero .cta-btn:hover::after{ transform: translateX(4px); }
.study-hero .cta-btn:focus-visible{
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}

/* Secondary button on hero */
.study-hero .button.secondary{
  background: rgba(255,255,255,.35);
  color: #0f172a;
  border-color: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
}
.study-hero .button.secondary:hover{
  background: rgba(255,255,255,.5);
}

/* Dark mode parity with home CTA */
html.dark-mode .study-hero{
  --hero-top:#0b1220;
  --hero-bot:#0f172a;
  --hero-glow: rgba(250,204,21,.08);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
}
html.dark-mode .study-hero .section-title{
  color:#c7d2fe;
  text-shadow: 1px 1px 0 #1e3a8a, 2px 2px 0 #172554;
}
html.dark-mode .study-hero .subtext{
  color:#cbd5e1;
}
html.dark-mode .study-hero .cta-btn{
  background: linear-gradient(180deg, #60a5fa, #1d4ed8);
  border-color: rgba(255,255,255,.15);
  box-shadow:
    0 14px 28px rgba(2,6,23,.6),
    inset 0 1px 0 rgba(255,255,255,.25);
}
html.dark-mode .study-hero .button.secondary{
  background: rgba(15,23,42,.45);
  color: #e5e7eb;
  border-color: rgba(148,163,184,.35);
}


/* 3) Category Flip Cards -------------------------------------- */
.gcse-bg{background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 6%, transparent), transparent 16%), linear-gradient(0deg, color-mix(in oklab, var(--accent) 4%, transparent), transparent 70%)}
.category-grid{--cols:3;display:grid;grid-template-columns:repeat(var(--cols), minmax(0,1fr));gap:var(--gap-lg);align-items:stretch}
@media (max-width: 980px){.category-grid{--cols:2}}
@media (max-width: 640px){.category-grid{--cols:1}}

.flip-card{perspective:1200px}
.flip-card-inner{position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.flip-card:hover .flip-card-inner{transform:rotateY(180deg)}}
.flip-card:focus-within .flip-card-inner{transform:rotateY(180deg)}

.flip-card-front, .flip-card-back{
  position:relative;min-height:132px;border-radius:var(--radius-xl);background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 88%, black 12%), color-mix(in oklab, var(--card) 92%, black 8%));
  box-shadow:var(--elev);padding:1rem;border:1px solid color-mix(in oklab, var(--brand) 8%, transparent);
  backface-visibility:hidden;transform:translateZ(0);
}
.flip-card-front.green-theme{background:
  linear-gradient(135deg, color-mix(in oklab, var(--success) 12%, transparent), transparent 40%),
  linear-gradient(180deg, color-mix(in oklab, var(--panel) 88%, black 12%), color-mix(in oklab, var(--card) 92%, black 8%));
}
.flip-card-back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.6rem}

.category-content-row{display:flex;align-items:center;gap:1rem}
.category-icon-inline{width:48px;height:48px;object-fit:contain;flex:0 0 48px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.category-labels h2{margin:0;font-size:1.15rem;font-weight:800}
.subcategory-count{margin:.15rem 0 0;color:var(--text-dim);font-size:.95rem}

.subcategory-preview{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.subcategory-preview li{color:var(--text-dim);font-size:.95rem}
.flip-card-back .button.small{margin-top:.25rem}

/* 4) Tutorial Grid -------------------------------------------- */
/* ===========================
   Tutorials – final safe version
   =========================== */

.gcse-tutorials{
  position: relative;
  isolation: isolate;
  border-radius: calc(var(--radius-xl) + 4px);
}

.gcse-tutorials .tutorial-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-lg, 18px);
}

/* Card */
.gcse-tutorials a.tutorial-card{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid color-mix(in oklab, var(--brand, #3b82f6) 12%, transparent);
  box-shadow: var(--elev);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}
/* Nuke any older overlays */
.gcse-tutorials a.tutorial-card::before,
.gcse-tutorials a.tutorial-card::after{ content:none !important; }

.gcse-tutorials a.tutorial-card:hover{
  transform: translateY(-2px);
  border-color: var(--brand);
}

/* Thumbnail */
.gcse-tutorials .tutorial-image{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid color-mix(in oklab, var(--brand, #3b82f6) 10%, transparent);
}

/* Text */
.gcse-tutorials .tutorial-card h4{
  margin: .75rem .9rem 0;
  font-weight: 900;
  letter-spacing: .2px;
}
.gcse-tutorials .tutorial-card .tutorial-preview{
  margin: .45rem .9rem 1rem;
  color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 2;  line-clamp: 2;  -webkit-box-orient: vertical; overflow: hidden;
}

/* Button polish */
.gcse-tutorials .see-all-btn{
  background: color-mix(in oklab, var(--brand) 10%, var(--panel) 90%);
  border-color: color-mix(in oklab, var(--brand) 25%, transparent);
}
.gcse-tutorials .see-all-btn:hover{ border-color: var(--brand) }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gcse-tutorials a.tutorial-card{ transition: none; }
}

/* 5) Exam Papers ---------------------------------------------- */
/* ===== Exam Papers slider (blue brand background) ===== */
.gcse-exam-papers.is-slider{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: clamp(18px, 3vw, 28px) 0 clamp(16px, 2.6vw, 24px);
  margin-top: var(--gap-xl);
  background:
    radial-gradient(900px 240px at -10% -60%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(900px 240px at 110% 0%, rgba(167,139,250,.16), transparent 60%),
    linear-gradient(180deg, #dbeafe, #c7d2fe);
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
}
html.dark-mode .gcse-exam-papers.is-slider{
  background:
    radial-gradient(900px 240px at -10% -60%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(900px 240px at 110% 0%, rgba(167,139,250,.10), transparent 60%),
    linear-gradient(180deg, #0b1220, #0f172a);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}

/* center title & subtitle width */
.gcse-exam-papers .fake-3d-title,
.gcse-exam-papers .section-subtitle{max-width: var(--maxw,1100px); margin-inline:auto; padding-inline: clamp(16px,3vw,28px);}

.gcse-exam-papers .section-subtitle{
  display:flex; align-items:center; justify-content:center; gap:clamp(8px,1vw,14px);
  margin:.3rem auto 1.1rem;
}
.gcse-exam-papers .section-subtitle::before,
.gcse-exam-papers .section-subtitle::after{
  content:""; height:1px; width:clamp(28px,8vw,140px);
  background:linear-gradient(90deg,transparent,#2563eb,transparent); opacity:.55;
}
html.dark-mode .gcse-exam-papers .section-subtitle::before,
html.dark-mode .gcse-exam-papers .section-subtitle::after{
  background:linear-gradient(90deg,transparent,#60a5fa,transparent);
}
.gcse-exam-papers .section-subtitle .subtext{
  margin:0; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size:clamp(.9rem,.85rem + .25vw,1.05rem);
  color:#1e3a8a;
}
html.dark-mode .gcse-exam-papers .section-subtitle .subtext{ color:#93c5fd; }

/* slider shell */
.exam-slider{
  position: relative;
  max-width: var(--maxw, 1100px);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
}

/* fade edges */
.exam-slider::before,
.exam-slider::after{
  content:""; position:absolute; top:0; bottom:0; width:40px; pointer-events:none;
  z-index:2;
}
.exam-slider::before{ left:0; background:linear-gradient(90deg, rgba(219,234,254,1), rgba(219,234,254,0)); }
.exam-slider::after { right:0; background:linear-gradient(270deg, rgba(199,210,254,1), rgba(199,210,254,0)); }
html.dark-mode .exam-slider::before{ background:linear-gradient(90deg, rgba(11,18,32,1), rgba(11,18,32,0)); }
html.dark-mode .exam-slider::after { background:linear-gradient(270deg, rgba(15,23,42,1), rgba(15,23,42,0)); }

/* track */
.slider-track{
  display: flex;
  gap: clamp(12px, 2vw, 18px);
  overflow-x: auto;
  padding-block: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* Firefox */
}
.slider-track::-webkit-scrollbar{ display:none; }

/* card */
.exam-card{
  flex: 0 0 clamp(260px, 45%, 360px); /* responsive card width */
  scroll-snap-align: start;
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 95%, black 5%),
                                        color-mix(in oklab, var(--card) 95%, black 5%));
  border: 1px solid color-mix(in oklab, var(--accent) 12%, transparent);
  border-radius: 18px;
  text-decoration:none; color:inherit;
  box-shadow: var(--elev);
  padding: 1rem;
  transition: transform .18s ease, border-color .18s ease;
}
.exam-card:hover{ transform: translateY(-2px); border-color: var(--accent); }
.exam-card h4{ margin:.1rem 0 .25rem; font-weight:900; }
.exam-card p{ margin:0; color:var(--text-dim); }

/* buttons */
.slider-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.1);
  box-shadow: 0 6px 16px rgba(2,6,23,.15);
  cursor:pointer;
}
.slider-btn:hover{ filter:saturate(1.05) }
.slider-btn.prev{ left: clamp(6px, 1vw, 10px); }
.slider-btn.next{ right: clamp(6px, 1vw, 10px); }
html.dark-mode .slider-btn{
  background: rgba(15,23,42,.75); color:#e5e7eb; border-color: rgba(148,163,184,.25);
}

/* ===== Exam Papers slider layout fixes ===== */
.gcse-exam-papers.is-slider .exam-slider{
  --gutter: clamp(16px, 3.5vw, 28px);
  --btn: clamp(40px, 5vw, 56px);

  max-width: var(--maxw, 1100px);
  margin-inline: auto;
  padding-inline: var(--gutter);

  /* Put arrows in their own columns so they don't overlap cards */
  display: grid;
  grid-template-columns: var(--btn) 1fr var(--btn);
  align-items: center;
  gap: 0;
}

/* Center subtitle + title already handled; no change needed */

/* Buttons no longer absolute */
.gcse-exam-papers .slider-btn{
  position: relative;            /* was absolute */
  width: var(--btn);
  height: var(--btn);
  border-radius: 999px;
  display: grid; place-items: center;
  z-index: 1;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 16px rgba(2,6,23,.15);
}
html.dark-mode .gcse-exam-papers .slider-btn{
  background: rgba(15,23,42,.8);
  color: #e5e7eb;
  border-color: rgba(148,163,184,.25);
}
.gcse-exam-papers .slider-btn.prev{ grid-column: 1; justify-self: center; }
.gcse-exam-papers .slider-btn.next{ grid-column: 3; justify-self: center; }

/* Track lives in the middle column, with gutters that match the container */
.gcse-exam-papers .slider-track{
  grid-column: 2;
  position: relative;
  display: flex;
  gap: clamp(12px, 2vw, 18px);
  overflow-x: auto;
  padding-block: 8px;

  /* snap + keep cards centered under the viewport */
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(var(--gutter) + var(--btn)/2);
  -webkit-overflow-scrolling: touch;
}
.gcse-exam-papers .slider-track::-webkit-scrollbar{ display:none; }
.gcse-exam-papers .exam-card{
  flex: 0 0 clamp(260px, 45%, 360px);
  scroll-snap-align: center;     /* center each card when stopping */
}

/* Slightly smaller arrows on narrow screens */
@media (max-width: 640px){
  .gcse-exam-papers .exam-slider{ --btn: 40px; --gutter: 18px; }
}

/* footer aligned to slider width */
.gcse-exam-papers .exam-footer{
  max-width: var(--maxw, 1100px);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
  margin-top: .9rem;
  display: grid;
}
.gcse-exam-papers .exam-footer .see-all-btn{ justify-self: center; }

/* ===== Exam cards: taller + yellow brand tiles ===== */
.gcse-exam-papers .exam-card{
  /* size */
  min-height: clamp(130px, 18vw, 180px);
  padding: clamp(14px, 2.2vw, 20px);

  /* look */
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.65), transparent 50%),
    linear-gradient(180deg, #fff7cc 0%, #fde68a 55%, #facc15 120%);
  border: 1px solid color-mix(in oklab, #f59e0b 40%, transparent);
  border-radius: 18px;
  box-shadow:
    0 10px 18px rgba(2,6,23,.10),
    inset 0 1px 0 rgba(255,255,255,.55);
  color: #1f2937;                     /* text on yellow */
  display: flex; flex-direction: column; justify-content: center;
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}
.gcse-exam-papers .exam-card:hover{
  transform: translateY(-2px);
  border-color: #f59e0b;
  filter: saturate(1.03);
}

/* text colours inside the tile */
.gcse-exam-papers .exam-card h4{ margin:.1rem 0 .25rem; font-weight:900; color:#0f172a; }
.gcse-exam-papers .exam-card p{ margin:0; color:#334155; }

/* Dark mode amber tile */
html.dark-mode .gcse-exam-papers .exam-card{
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.08), transparent 50%),
    linear-gradient(180deg, #3a2a05 0%, #a16207 60%, #ca8a04 120%);
  border-color: color-mix(in oklab, #f59e0b 35%, #0b1220);
  color:#fffbeb;
}
html.dark-mode .gcse-exam-papers .exam-card h4{ color:#fffbeb; }
html.dark-mode .gcse-exam-papers .exam-card p{ color:#fde68a; }


/* 7) Ads Placeholder ------------------------------------------ 
.adsense-placeholder{position:relative;display:block;min-height:120px;border-radius:var(--radius-lg);background:repeating-linear-gradient(45deg, color-mix(in oklab, var(--panel) 96%, black 4%), color-mix(in oklab, var(--panel) 96%, black 4%) 12px, color-mix(in oklab, var(--panel) 90%, black 10%) 12px, color-mix(in oklab, var(--panel) 90%, black 10%) 24px);border:1px dashed color-mix(in oklab, var(--text-dim) 30%, transparent);margin:clamp(18px,2.5vw,28px) 0}
.adsense-label{position:absolute;top:8px;left:10px;background:var(--bg-soft);color:var(--text-dim);border-radius:6px;padding:.15rem .4rem;font-size:.75rem}
---------------------------------------------- */
/* ===========================
   Trust strip – glossy badges
   =========================== */

.trust-strip{
  position: relative;
  overflow: hidden;
  padding: clamp(16px, 3vw, 26px) 0;
  margin: var(--gap-xl, 28px) 0;
  border-radius: 24px;
  background:
    radial-gradient(900px 240px at -10% -60%, rgba(56,189,248,.14), transparent 60%),
    radial-gradient(900px 240px at 110% 0%, rgba(167,139,250,.12), transparent 60%),
    linear-gradient(180deg, #eef2ff, #e0e7ff);
  box-shadow: 0 14px 34px rgba(2,6,23,.10);
}
html.dark-mode .trust-strip{
  background:
    radial-gradient(900px 240px at -10% -60%, rgba(56,189,248,.08), transparent 60%),
    radial-gradient(900px 240px at 110% 0%, rgba(167,139,250,.08), transparent 60%),
    linear-gradient(180deg, #0b1220, #0f172a);
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
}

/* subtle sparkles */
.trust-strip::before,
.trust-strip::after{
  content:""; position:absolute; inset:auto -20% -40% -20%;
  height:140%; filter: blur(40px) saturate(120%);
  background:
    radial-gradient(18rem 8rem at 20% 20%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(16rem 7rem at 80% 30%, rgba(167,139,250,.16), transparent 60%);
  pointer-events:none; opacity:.6;
}

/* badges */
.trust-strip .trust-points{
  max-width: var(--maxw, 1100px);
  margin: 0 auto;
  padding: 0 clamp(16px,3vw,28px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(10px, 1.6vw, 16px);
}

.trust-strip .trust-points li{
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem .9rem .65rem .7rem;
  border-radius: 9999px;
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(255,255,255,.6), transparent 50%),
    linear-gradient(180deg, color-mix(in oklab, var(--panel, #fff) 92%, #000 8%),
                           color-mix(in oklab, var(--card, #fff) 94%, #000 6%));
  border: 1px solid color-mix(in oklab, var(--brand, #3b82f6) 14%, transparent);
  color: var(--text);
  box-shadow:
    0 8px 18px rgba(2,6,23,.12),
    inset 0 1px 0 rgba(255,255,255,.55);
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .15s ease, border-color .15s ease, filter .15s ease;
}
.trust-strip .trust-points li:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--brand, #3b82f6) 28%, transparent);
  filter: saturate(1.03);
}

/* icon chip */
.trust-strip .trust-points li::before{
  content:"✓";
  display: grid; place-items: center;
  width: 1.35rem; height: 1.35rem; flex: 0 0 1.35rem;
  border-radius: 50%;
  font-size: .9rem; font-weight: 900; color: #fff;
  background: radial-gradient(circle at 45% 40%, #34d399, #10b981);
  box-shadow: 0 0 0 3px color-mix(in oklab, #34d399 35%, transparent);
}

/* dark text tweaks */
html.dark-mode .trust-strip .trust-points li{
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(255,255,255,.08), transparent 50%),
    linear-gradient(180deg, #0e162a, #0c1426);
  border-color: color-mix(in oklab, var(--brand, #60a5fa) 18%, #0b1220);
  color:#e5e7eb;
}

/* 9) Tutor CTA ------------------------------------------------- */
/* ===========================
   Tutor CTA – Clean premium card (no HTML changes)
   =========================== */

.tutor-cta{
  position: relative;
  overflow: hidden;
  max-width: var(--maxw, 1100px);
  margin: var(--gap-xl, 28px) auto;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 22px;
  background:
    radial-gradient(100% 120% at 0% 0%, rgba(56,189,248,.10), transparent 50%),
    radial-gradient(100% 120% at 100% 0%, rgba(250,204,21,.12), transparent 55%),
    linear-gradient(180deg, #ffffff, #f8fbff 70%);
  border: 1px solid color-mix(in oklab, #2563eb 18%, transparent);
  box-shadow: 0 14px 36px rgba(2,6,23,.10);
}

/* slim gradient accent bar on the left */
.tutor-cta::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width:8px;
  background: linear-gradient(180deg, #2563eb, #3b82f6 50%, #f59e0b 50%, #facc15);
  border-radius: 22px 0 0 22px;
}

/* Heading underline highlight */
.tutor-cta .main-heading{
  margin: 0 0 .35rem;
  font-weight: 900;
  letter-spacing: .2px;
  display:inline;
  background: linear-gradient(0deg, #fef08a 0 45%, transparent 45%);
  padding: 0 .15rem;
  border-radius: 6px;
}

/* Subtext */
.tutor-cta .subtext{
  margin: .25rem 0 1rem;
  color: #1f2a44;
  font-weight: 700;
}

/* Benefits: tidy two-column chips on md+ */
.tutor-cta .tutor-benefits{
  list-style: none; padding-left: 0; margin: .75rem 0 1.1rem;
  display: grid; gap: .55rem;
}
@media (min-width: 720px){ .tutor-cta .tutor-benefits{ grid-template-columns: 1fr 1fr; } }
.tutor-cta .tutor-benefits li{
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem .55rem .6rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #fffdf5);
  border: 1px solid color-mix(in oklab, #f59e0b 20%, transparent);
  box-shadow: 0 6px 14px rgba(2,6,23,.08);
  font-weight: 700; letter-spacing: .2px; color:#0f172a;
}
.tutor-cta .tutor-benefits li::before{
  content:"✓";
  display:grid; place-items:center;
  width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem;
  border-radius: 50%;
  font-size: .85rem; font-weight: 900; color: #0b1220;
  background: radial-gradient(circle at 45% 40%, #93c5fd, #2563eb);
  box-shadow: 0 0 0 3px rgba(147,197,253,.35);
}

/* Button: strong primary, with micro-note under (via pseudo-element) */
.tutor-cta .center-button{
  display:flex; justify-content:center; align-items:center; flex-direction:column;
}
.tutor-cta .center-button .button{
  padding: clamp(.9rem, 1.4vw, 1.1rem) clamp(1.3rem, 2.6vw, 1.6rem);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  border-radius: 9999px;
  font-weight: 900; letter-spacing: .3px;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  color:#ffffff !important;
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: 0 12px 24px rgba(2,6,23,.16), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.tutor-cta .center-button .button:hover{
  transform: translateY(-2px);
  filter: saturate(1.03);
}

/* Micro confidence note (no extra HTML) */
.tutor-cta .center-button::after{
  content: "Free 20-min intro · No commitment";
  margin-top: .55rem;
  font-weight: 700;
  color: color-mix(in oklab, #2563eb 55%, #475569);
}

/* Dark mode */
html.dark-mode .tutor-cta{
  background:
    radial-gradient(100% 120% at 0% 0%, rgba(56,189,248,.08), transparent 50%),
    radial-gradient(100% 120% at 100% 0%, rgba(250,204,21,.10), transparent 55%),
    linear-gradient(180deg, #0b1220, #0f172a 70%);
  border-color: color-mix(in oklab, #60a5fa 20%, #0b1220);
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
}
html.dark-mode .tutor-cta .subtext{ color:#cbd5e1; }
html.dark-mode .tutor-cta .tutor-benefits li{
  background: linear-gradient(180deg, #0e162a, #0c1426);
  border-color: color-mix(in oklab, #f59e0b 24%, #0b1220);
  color:#e5e7eb;
}
html.dark-mode .tutor-cta .center-button::after{
  color: color-mix(in oklab, #60a5fa 65%, #cbd5e1);
}

/* Reduced motion: keep it calm */
@media (prefers-reduced-motion: reduce){
  .tutor-cta *{ transition:none !important; }
}

/* Center the Tutor CTA subtitle precisely */
.tutor-cta .subtext{
  display: flex;                       /* not inline-flex */
  align-items: center;
  justify-content: center;
  width: max-content;                  /* shrink to content + dividers */
  margin-inline: auto;                 /* centers the element */
  gap: clamp(8px, 1vw, 14px);          /* keep the divider spacing */
  /* keep your other styles (weight, uppercase, color, font-size) */
}

/* keep the hairline dividers as flex items */
.tutor-cta .subtext::before,
.tutor-cta .subtext::after{
  content: "";
  height: 1px;
  width: clamp(28px, 8vw, 140px);
  background: linear-gradient(90deg, transparent,
    color-mix(in oklab, var(--brand, #2563eb) 55%, var(--text-dim, #475569)),
    transparent);
  opacity: .65;
}

/* Restore Tutor CTA subtitle colour (keep centering + dividers) */
.tutor-cta .subtext{
  color: color-mix(in oklab, var(--brand, #2563eb) 60%, var(--text-dim, #475569));
}
html.dark-mode .tutor-cta .subtext{
  color: #cbd5e1;              /* dark-mode equivalent */
}

/* Tutor CTA: add vertical padding to the benefits grid */
.tutor-cta .tutor-benefits{
  padding-block: clamp(8px, 1.4vw, 16px);   /* top & bottom padding */
  margin: 1rem 0 1.4rem;                    /* extra space above/below grid */
  row-gap: clamp(10px, 1.6vw, 14px);        /* a touch more vertical gap */
}

/* Slightly taller chips so the grid feels airier */
.tutor-cta .tutor-benefits li{
  padding-block: .7rem;
}



/* Mini FAQ */
.mini-faq{margin:.5rem 0;border-top:1px solid color-mix(in oklab, var(--text-dim) 18%, transparent)}
.mini-faq summary{cursor:pointer;padding:.6rem 0;font-weight:700}
.mini-faq p{margin:.25rem 0 .9rem;color:var(--text-dim)}

/* 10) Utilities ------------------------------------------------ */
.gcse-tutorials,.gcse-exam-papers,.gcse-worksheets{padding:clamp(28px,4vw,40px) 0}
.tutorial-footer,.exam-footer,.worksheet-footer{margin-top:1rem}

/* 11) Focus & A11y -------------------------------------------- */
.flip-card .button.small{outline-offset:4px}
.flip-card-back a{align-self:flex-start}
:where(a, button, .tutorial-card, .exam-paper-card, .worksheet-card){outline-color:transparent}
:where(a, button, .tutorial-card, .exam-paper-card, .worksheet-card):focus-visible{outline: none; box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 35%, transparent),0 0 0 2px var(--brand)}

/* 12) Motion Preferences -------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .flip-card-inner{transition:none}
}

/* 13) Helpful Spacing Tweaks ---------------------------------- */
.study-hero + .study-section{padding-top:0}
.category-grid + .adsense-placeholder{margin-top:.5rem}

/* 14) Image hygiene ------------------------------------------- */
img{max-inline-size:100%;height:auto}

/* 15) Optional Dark-Theme Trigger via data-theme -------------- */
:root[data-theme="dark"] body{background: radial-gradient(1200px 800px at 10% -10%, rgba(56,189,248,.2), transparent 40%), radial-gradient(1200px 800px at 110% 10%, rgba(167,139,250,.18), transparent 45%), var(--bg)}

/* Flip card container */
.flip-card {
  perspective: 1000px;
  height: 140px;
}

/* Inner */
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s ease;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(17,24,39,.08);
}

/* Flip on hover/focus */
.flip-card:hover .flip-inner,
.flip-card:focus-within .flip-inner {
  transform: rotateY(180deg);
}

/* Faces */
.flip-front, .flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  font-weight: 700;
}

/* Front look (brand teal you use) */
.flip-front {
  background: #1e40af;
  color: #fff;
  letter-spacing: 2px;
}

/* Back look */
.flip-back {
  display: flex;
  transform: rotateY(180deg);
   align-items: center;
  background: #facc15;
  border: 2px solid #d4e8f0;
  gap: .6rem;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1.25rem;
}

/* Buttons on back */
.tbtn {
  display: inline-block;
  padding: .5rem .9rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  background: #1e40af;   /* header blue */
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.tbtn:hover { transform: translateY(-2px); }

.tbtn.ghost {
  background: #facc15;   /* friendly yellow */
  color: #0f172a;        /* dark navy text */
}

.topic-links {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 260px;           /* tweak if you want wider */
  text-align: center;
}

.topic-links li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(15,23,42,.12);
}
.topic-links li:last-child { border-bottom: 0; }

/* “Hero button text” colour */
.topic-links a {
  color: #0f172a;
  font-weight: 800;
  text-decoration: none;
  line-height: 1.3;
}
.topic-links a:hover,
.topic-links a:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Responsive sizing */
@media (max-width: 640px) {
  .flip-card { height: 120px; }
  .flip-back { gap: .4rem; }
  .tbtn { padding: .45rem .7rem; font-size: .9rem; }
}

/* Grid layout for the topics */
.topics-grid {
  display: grid;
  gap: 2rem;
  max-width: 1000px;
  margin: 2rem auto 0;
  grid-template-columns: repeat(1, minmax(0, 1fr));   /* mobile: 1 col */
}

/* Mobile horizontal gutters for the Topics section */
@media (max-width: 640px) {
  /* Add padding to the section and the grid (belt + braces) */
  .section-light.categories,
  .categories,
  .topics-grid {
    box-sizing: border-box;
    padding-inline: 16px !important;   /* left & right */
  }

  /* Keep spacing tidy */
  .topics-grid { gap: 1.25rem; }

  /* Ensure cards don't cling to the edges even if padding is stripped */
  .topics-grid > .flip-card {
    width: 100%;
    margin-inline: 0;                  /* reset any weird margins */
  }
}


@media (min-width: 1024px) { /* ≥ lg */
  .topics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ensure each card fits its grid cell */
.topics-grid .flip-card {
  width: 100%;
  height: 160px;    /* tweak as you like */
}

.topics-grid .flip-back {
  display: flex;
  flex-direction: column;     /* was row */
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

/* Safari/backface fix */
.flip-front, .flip-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Center each line; no flex needed on li */
.topics-grid .flip-back .topic-links {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 260px;
  text-align: center;         /* centers inline content */
}

.topics-grid .flip-back .topic-links li {
  display: block;             /* was flex */
  padding: .55rem 0;
  border-bottom: 1px solid rgba(15,23,42,.12);
}
.topics-grid .flip-back .topic-links li:last-child { border-bottom: 0; }

.topics-grid .flip-back .topic-links a {
  color: #0f172a;             /* hero button text colour */
  font-weight: 800;
  text-decoration: none;
  line-height: 1.25;
}
.topics-grid .flip-back .topic-links a:hover,
.topics-grid .flip-back .topic-links a:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Give the card enough height for 4 centered lines */
.topics-grid .flip-card { height: 230px; }
@media (min-width: 1024px) { .topics-grid .flip-card { height: 240px; } }

/* LIGHT — Topics */
/* Token defaults scoped to the Topics section */
#topics {
  --card-front: #1e40af;          /* blue-800 */
  --card-front-text: #ffffff;
  --card-back: #facc15;           /* yellow */
  --card-back-divider: rgba(15,23,42,.12);
}

#topics .flip-front {
  font-size: clamp(1.05rem, 0.5rem + 1.2vw, 1.5rem);
  line-height: 1.25;
}

/* Less-white, branded background for Topics */
.section-light.categories {
  --top: #dbeafe;                 /* soft blue (not white) */
  --bottom: #c7d2fe;              /* soft indigo */
  --vignette: rgba(30, 64, 175, .10);  /* subtle blue glow */
  padding-top: 5rem;
  padding-bottom: 5rem;

  background:
    radial-gradient(900px 220px at 50% -80px, var(--vignette), transparent 70%),
    linear-gradient(180deg, var(--top) 0%, var(--bottom) 100%);
}

/* LIGHT — Topics */
#topics {
  --top: #dbeafe;                        /* soft blue */
  --bottom: #c7d2fe;                     /* soft indigo */
  --vignette: rgba(30, 64, 175, .12);    /* subtle blue glow */
  padding-top: 5rem;
  padding-bottom: 5rem;
  background:
    radial-gradient(900px 220px at 50% -80px, var(--vignette), transparent 70%),
    linear-gradient(180deg, var(--top) 0%, var(--bottom) 100%) !important;
  background-color: var(--bottom) !important; /* fallback */
}

/* DARK — match common theme toggles & force override */
body.dark-mode #topics,
html.dark-mode #topics,
.dark #topics,
[data-theme="dark"] #topics {
  --top: #0b1220;
  --bottom: #0f172a;
  --vignette: rgba(250, 204, 21, .08);
  background:
    radial-gradient(900px 220px at 50% -80px, var(--vignette), transparent 70%),
    linear-gradient(180deg, var(--top) 0%, var(--bottom) 100%) !important;
  background-color: var(--bottom) !important;
}

/* Optional: also respect OS dark mode */
@media (prefers-color-scheme: dark) {
  #topics {
    --top: #0b1220;
    --bottom: #0f172a;
    --vignette: rgba(250, 204, 21, .08);
    background:
      radial-gradient(900px 220px at 50% -80px, var(--vignette), transparent 70%),
      linear-gradient(180deg, var(--top) 0%, var(--bottom) 100%) !important;
    background-color: var(--bottom) !important;
  }
}

/* Topics section subtitle (just styles what's inside #topics) */
#topics .section-subtitle{
  max-width: var(--maxw, 1100px);
  margin: .3rem auto 1.2rem;
  padding: 0 clamp(16px,3vw,28px);
  text-align: center;
}

#topics .section-subtitle .subtext{
  /* center like Tutor CTA */
  display: flex;                 /* not inline-flex */
  align-items: center;
  justify-content: center;
  width: max-content;
  margin-inline: auto;
  gap: clamp(8px, 1vw, 14px);
    /* typographic match */
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  font-size: clamp(.9rem, .85rem + .25vw, 1.05rem);
  color: #1f2a44;                /* same tone as tutor subtitle */

  /* remove previous pill look */
  background: none;
  border: 0;
  box-shadow: none;
  padding: .1rem .35rem;
  border-radius: 0;
}

#topics .section-subtitle .subtext::before,
#topics .section-subtitle .subtext::after{
  content: "";
  height: 1px;
  width: clamp(28px, 8vw, 140px);
  background: linear-gradient(90deg, transparent, #2563eb, transparent);
  opacity: .65;
}
/* Dark mode tweak */
html.dark-mode #topics .section-subtitle .subtext{ color: #cbd5e1; }
html.dark-mode #topics .section-subtitle .subtext::before,
html.dark-mode #topics .section-subtitle .subtext::after{
  background: linear-gradient(90deg, transparent, #60a5fa, transparent);
}
/* Tutorials subtitle (centered with hairline dividers) */
.gcse-tutorials .section-subtitle{
  max-width: var(--maxw, 1100px);
  margin: .3rem auto 1.2rem;
  padding: 0 clamp(16px,3vw,28px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px,1vw,14px);
  text-align: center;
}

.gcse-tutorials .section-subtitle::before,
.gcse-tutorials .section-subtitle::after{
  content: "";
  height: 1px;
  width: clamp(28px,8vw,140px);
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--brand, #3b82f6) 45%, var(--text-dim, #475569)),
    transparent);
  opacity: .6;
}

.gcse-tutorials .section-subtitle .subtext{
  margin: 0;
  display: inline-block;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;    /* remove if you prefer Title Case */
  font-size: clamp(.9rem, .85rem + .25vw, 1.05rem);
  color: color-mix(in oklab, var(--brand, #3b82f6) 55%, var(--text-dim, #475569));
}

/* Dark mode */
html.dark-mode .gcse-tutorials .section-subtitle::before,
html.dark-mode .gcse-tutorials .section-subtitle::after{
  background: linear-gradient(90deg, transparent,
    color-mix(in oklab, var(--brand, #60a5fa) 55%, #cbd5e1), transparent);
}
html.dark-mode .gcse-tutorials .section-subtitle .subtext{
  color: color-mix(in oklab, var(--brand, #60a5fa) 65%, #cbd5e1);
}

/* Side margins/gutters for the Tutorials grid */
.gcse-tutorials .tutorial-grid{
  max-width: var(--maxw, 1100px);   /* keep width consistent with site */
  margin-inline: auto;              /* center it */
  padding-inline: clamp(16px, 3vw, 28px); /* left/right breathing room */
}

/* (optional) keep the footer button aligned with the grid */
.gcse-tutorials .tutorial-footer{
  max-width: var(--maxw, 1100px);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
}

/* Keep footer aligned to grid width + gutters, and center the button */
.gcse-tutorials .tutorial-footer{
  max-width: var(--maxw, 1100px);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
  margin-top: .8rem;

  display: grid;           /* lets us center the child cleanly */
}
.gcse-tutorials .tutorial-footer .see-all-btn{
  justify-self: center;    /* centers horizontally inside the footer */
}

.tutor-cta .subtext { 
  text-transform: uppercase; 
  letter-spacing: .06em; /* optional for nicer caps */
}