/*
Theme Name: LSAT Unplugged Lean
Theme URI: https://www.unpluggedprep.com/
Description: Lightweight child theme for unpluggedprep.com. No page builder. Inter only, self-hosted. Built for speed, mobile-first, SEO/GEO/AEO.
Author: LSAT Unplugged
Version: 1.0.0
Template: hello-elementor
Text Domain: lsatunplugged-lean
*/

/* ==========================================================================
   Design tokens
   Sampled from the live /free-lsat-lesson/ build on 2026-07-31 so this
   matches the page that already looks right. Do not eyeball-adjust these.
   ========================================================================== */

:root {
  /* Brand palette */
  --ink:         #15191C;  /* headings, buttons, hard type */
  --body:        #5C5349;  /* body copy, warm gray */
  --taupe:       #7F756B;  /* brand taupe, secondary/meta text */
  --slate:       #5E92A8;  /* brand slate blue, accents only */
  --slate-deep:  #2E5666;  /* eyebrows, small caps, link hover */
  --paper:       #F5F1E8;  /* warm off-white, page background */
  --sand:        #ECE5D6;  /* cards, alternating sections */
  --white:       #FFFFFF;
  --rule:        rgba(21, 25, 28, 0.12);

  /* Type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid scale: mobile first, grows to the desktop sizes measured on the live page */
  --fs-h1:      clamp(2.125rem, 1.35rem + 3.6vw, 3.4rem);   /* -> 54.4px */
  --fs-h2:      clamp(1.5rem,   1.16rem + 1.6vw, 2.125rem);
  --fs-h3:      clamp(1.25rem,  1.10rem + 0.7vw, 1.5rem);
  --fs-body:    clamp(1.0625rem, 1.02rem + 0.22vw, 1.15rem); /* -> 18.4px */
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.78rem;

  /* Space */
  --gutter:  clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  --section: clamp(3rem, 2rem + 5vw, 6rem);
  --measure: 68ch;   /* readable line length for prose */
  --wide:    1120px; /* max content width */

  --radius: 10px;
}

/* ==========================================================================
   Font. Variable Inter, self-hosted. One file, both axes.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/InterVariable-Italic.woff2") format("woff2");
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, video, svg, iframe { max-width: 100%; height: auto; display: block; }

a { color: var(--slate-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

::selection { background: var(--slate); color: var(--white); }

:focus-visible { outline: 3px solid var(--slate); outline-offset: 2px; }

/* Skip link, keyboard + screen reader accessibility */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--white);
  padding: .75rem 1rem; border-radius: var(--radius); z-index: 999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   Typography
   Hierarchy comes from weight, never from a second typeface.
   ========================================================================== */

h1, h2, h3, h4 {
  color: var(--ink);
  font-family: var(--font);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-top: 1.8em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.6em;
}

p { margin: 0 0 1.15em; }

strong, b { font-weight: 700; color: var(--ink); }

blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--slate);
  color: var(--ink);
  font-size: 1.05em;
}

ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }
li { margin-bottom: .45em; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--section) 0; }

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* Eyebrow: small caps label above a heading */
.eyebrow {
  display: block;
  color: var(--slate-deep);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: .85rem;
}

/* Short slate accent rule under a heading */
.accent-rule {
  width: 56px; height: 4px;
  background: var(--slate);
  border-radius: 2px;
  margin: 1.25rem 0 1.75rem;
}

.lede { font-size: 1.12em; color: var(--body); }

/* ==========================================================================
   Layout
   ========================================================================== */

.container { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 760px; }

.section { padding-block: var(--section); }
.section--sand  { background: var(--sand); }
.section--white { background: var(--white); }
.section--ink   { background: var(--ink); color: rgba(255,255,255,.82); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }

main { display: block; }

/* ==========================================================================
   Header
   Two variants. Full nav on content pages, minimal on conversion pages.
   Controlled from functions.php, see lsatu_use_minimal_header().
   ========================================================================== */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: static;
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 64px;
  padding-block: .75rem;
}

.site-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-logo img { width: auto; height: 30px; }

.site-tagline {
  color: var(--taupe);
  font-size: var(--fs-small);
  font-weight: 600;
  margin: 0;
}

/* Nav */
.site-nav { display: none; }
.site-nav ul { list-style: none; display: flex; align-items: center; gap: 1.75rem; margin: 0; padding: 0; }
.site-nav a {
  color: var(--ink); font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; padding-block: .35rem;
}
.site-nav a:hover, .site-nav .current-menu-item > a {
  color: var(--slate-deep);
  box-shadow: inset 0 -2px 0 var(--slate);
}

/* Header CTA.
   The CTA is a .btn inside the nav, and ".site-nav a" (0,1,1) outranks ".btn"
   (0,1,0), so the two rules above were painting ink text on the ink button and
   a slate underline through it. Re-scope the button at nav specificity so it
   keeps white type, its own weight, and a real hit area. */
.site-nav a.btn {
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 800;
  padding: 11px 20px;
  box-shadow: none;
}
.site-nav a.btn:hover,
.site-nav .current-menu-item > a.btn {
  color: var(--white);
  background: #000;
  box-shadow: none;
}

/* Mobile nav: checkbox toggle, zero JS.
   This base rule MUST stay above the min-width block below. Both selectors are
   (0,1,0), so whichever comes last wins, and when this sat after the media
   query the hamburger rendered on desktop next to the full nav. */
.nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: .5rem; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

@media (min-width: 900px) {
  .site-nav { display: block; }
  .nav-toggle { display: none; }
}

.site-nav.is-open {
  display: block;
  position: absolute; inset: 100% 0 auto 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 1rem var(--gutter) 1.5rem;
}
.site-nav.is-open ul { flex-direction: column; align-items: flex-start; gap: 1rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 17px 30px;
  border: 0;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
.btn:hover { background: #000; color: var(--white); transform: translateY(-1px); }
.btn--slate { background: var(--slate); }
.btn--slate:hover { background: var(--slate-deep); }
.btn--block { display: block; width: 100%; text-align: center; }

/* Contrast guard.
   Every scope below sets its own "a" color at (0,1,1), which outranks .btn at
   (0,1,0) and repaints the button label to match its dark background. That is
   what made the header CTA invisible. Guard the remaining scopes at matching
   specificity so a .btn dropped into prose, a footer, or breadcrumbs keeps its
   own label color instead of vanishing. */
.prose a.btn,
.breadcrumbs a.btn,
.site-footer a.btn {
  color: var(--white);
}
.prose a.btn:hover,
.breadcrumbs a.btn:hover,
.site-footer a.btn:hover {
  color: var(--white);
}
.prose a.btn--slate,
.breadcrumbs a.btn--slate,
.site-footer a.btn--slate {
  color: var(--white);
}

/* ==========================================================================
   Article / prose. This is what blog posts will use in Phase 4.
   ========================================================================== */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 + p, .prose h3 + p { margin-top: .6em; }
.prose img, .prose figure { margin-block: 2rem; border-radius: var(--radius); }
.prose figcaption { font-size: var(--fs-small); color: var(--taupe); margin-top: .6rem; }

.prose a { color: var(--slate-deep); }
.prose a:hover { color: var(--ink); }

/* Direct-answer block: the AEO lever. Sits under the H1. */
.answer-box {
  background: var(--sand);
  border-left: 4px solid var(--slate);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  margin-block: 1.75rem;
  color: var(--ink);
}
.answer-box p:last-child { margin-bottom: 0; }

/* FAQ block */
.faq { margin-top: var(--section); }
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0;
}
.faq summary {
  cursor: pointer; list-style: none;
  color: var(--ink); font-weight: 700; font-size: 1.05em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--slate); font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > *:not(summary) { margin-top: .8rem; }

/* Post meta */
.post-meta { color: var(--taupe); font-size: var(--fs-small); margin-bottom: 1.5rem; }

/* Breadcrumbs */
.breadcrumbs { font-size: var(--fs-small); color: var(--taupe); margin-bottom: 1.25rem; }
.breadcrumbs a { color: var(--taupe); }
.breadcrumbs a:hover { color: var(--ink); }

/* ==========================================================================
   Cards
   ========================================================================== */

.card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card h3 { margin-top: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  padding-block: var(--section) 2rem;
  font-size: var(--fs-small);
}
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer h4 { color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: .9rem; }

.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .55rem; }

.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  color: rgba(255,255,255,.55);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }