/* ==========================================================
   LAYOUT VARIANT: magazine
   Source: design-system/layouts/magazine/site-layout.css
   ========================================================== */

/* ==========================================================
   LAYOUT: Magazine — Editorial Multi-Column
   ==========================================================
   Visual: Large featured cards alternating with smaller cards,
   like a magazine editorial spread. First category gets hero
   treatment (2-col span). List pages use 2-column cards.
   SEO area stacks full-width for readability.
   ========================================================== */

/* ── Homepage: Hero Section ── */
.hero {
  text-align: left;
  padding: 6rem 3rem 5rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 700px;
}

.hero .subtitle {
  text-align: left;
  margin-left: 0;
  max-width: 600px;
}

/* ── Homepage: Categories — Magazine Grid ── */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

/* Featured card: first, fourth, seventh — span 2 cols */
.category-card:nth-child(3n+1) {
  grid-column: span 2;
}

.category-card:nth-child(3n+1) h3 {
  font-size: 1.5rem;
}

.category-card:nth-child(3n+1) .category-icon {
  font-size: 3.25rem;
}

.category-card:nth-child(3n+1) p {
  font-size: 1.05rem;
}

/* ── Homepage: Intro Section ── */
.intro-section {
  text-align: left;
  border-left: 5px solid var(--site-primary, #eab308);
  border-radius: 0 var(--radius-md, 14px) var(--radius-md, 14px) 0;
  padding-left: 2rem;
}

/* ── List Page: Subcategories — 2-Column Editorial Cards ── */
.category-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}

.category-list li:first-child {
  grid-column: 1 / -1;
}

.category-list li:first-child a {
  padding: 1.5rem 2rem;
  font-size: 1.1rem;
}

/* ── List Page: Worksheets — Horizontal Cards ── */
.worksheet-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
}

/* ── SEO Components — Full-Width Stacked ── */
.seo-components--primary {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.seo-card {
  padding: 2rem 2.5rem;
}

.seo-card:nth-child(even) {
  background: var(--site-bg-alt, #f9fafb);
}

.seo-more-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .category-card:nth-child(3n+1) {
    grid-column: span 1;
  }
  .category-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .categories-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 4rem 1.5rem 3rem;
  }
  .seo-more-grid {
    grid-template-columns: 1fr;
  }
}


/**
 * Site-Specific Custom Styles (Layer 5)
 * =====================================
 *
 * This is the 5th and final layer in the CSS cascade:
 *
 * 1. main.css           → Platform base (header, footer, buttons)
 * 2. base-structure.css → Page layout (grids, sections, cards)
 * 3. tokens.css         → Design tokens (colors, spacing, typography)
 * 4. skin.css           → Theme skin (gradients, shadows, effects)
 * 5. site.css           → Site-specific customization (THIS FILE)
 *
 * THIS FILE HAS TWO SECTIONS:
 * ────────────────────────────────────────────────────────────
 *
 * Section A:  LAYOUT VARIANT CSS
 *   Loaded from design-system/layouts/<layout>/site-layout.css
 *   during cloning (Phase 5). Defines homepage grid, category page,
 *   and SEO component structures unique to each layout type.
 *
 *   Available layouts:
 *   - grid-cards   : Equal-height square product cards (default)
 *   - magazine     : Editorial 3-col with featured cards
 *   - masonry      : Pinterest-style CSS columns
 *   - list-rows    : Full-width horizontal rows
 *   - sidebar-nav  : 2-column split with sticky sidebar
 *
 *   The layout is set in site-profile.json → design.layout
 *   and auto-applied by generate-design-tokens.py during cloning.
 *
 * Section B:  CONTENT-TYPE-SPECIFIC STYLES
 *   Manually added per site for puzzle/content rendering.
 *   Examples: sudoku grids, arithmetic layouts, bingo cards.
 *
 * GUIDELINES:
 * -----------
 * DO:
 *    - Keep layout CSS in Section A (auto-generated)
 *    - Add content-specific layouts in Section B
 *    - Override generic styles for your site's unique needs
 *
 * DON'T:
 *    - Redefine design tokens (use tokens.css)
 *    - Copy/paste from other sites (each site is unique)
 *    - Modify Section A manually (re-run pipeline instead)
 */

/* ==========================================================
   Section A: LAYOUT VARIANT CSS
   ==========================================================
   AUTO-GENERATED — Do not edit manually.
   Layout: [will be set during cloning based on site-profile.json]
   Source: design-system/layouts/<layout>/site-layout.css
   ========================================================== */

/* Layout CSS will be injected here by generate-design-tokens.py */


/* ==========================================================
   Section B: CONTENT-TYPE-SPECIFIC STYLES
   ==========================================================
   K-5 English language arts — reading, writing, vocabulary
   ========================================================== */

/* ── Word display / sight word highlight ── */
.word-display {
  font-size: clamp(2rem, 8vw, 4.5rem);
  font-weight: 800;
  color: var(--site-primary-dark);
  font-family: var(--font-heading);
  text-align: center;
  line-height: 1.1;
  letter-spacing: -0.02em;
  padding: 1.5rem;
  background: var(--site-primary-light);
  border: 2px solid var(--site-primary-border);
  border-radius: var(--radius-lg);
}

/* ── Vocabulary word card ── */
.vocab-card {
  background: #ffffff;
  border: 2px solid var(--site-primary-border);
  border-top: 4px solid var(--site-primary);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  transition: box-shadow var(--dur-normal) ease, transform var(--dur-normal) ease;
}
.vocab-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.vocab-word {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--site-primary-dark);
  font-family: var(--font-heading);
  margin: 0 0 0.25rem;
}
.vocab-pos {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--site-accent-dark);
  font-style: italic;
  margin-bottom: 0.5rem;
}
.vocab-definition {
  font-size: 0.95rem;
  color: var(--site-text-secondary);
  line-height: 1.6;
}

/* ── Sentence writing lines ── */
.writing-lines {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.writing-line {
  border-bottom: 2px solid var(--site-primary-border);
  min-height: 3rem;
  position: relative;
}
.writing-line::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  border-bottom: 1px dashed #fef9c3;
}

/* ── Reading passage block ── */
.reading-passage {
  background: #fefce8;
  border: 1.5px solid var(--site-primary-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--site-text);
  font-family: var(--font-body);
}
.reading-passage p { margin: 0 0 1rem; }
.reading-passage p:last-child { margin-bottom: 0; }

/* ── Comprehension question ── */
.question-block {
  background: #ffffff;
  border: 1.5px solid var(--site-primary-border);
  border-left: 4px solid var(--site-accent);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin: 0.75rem 0;
}
.question-text {
  font-weight: 700;
  color: var(--site-text);
  font-family: var(--font-heading);
  margin: 0 0 0.5rem;
}

/* ── Sky-blue accent for secondary learning elements ── */
.sky-accent {
  color: var(--site-accent-dark);
  font-weight: 700;
}
.sky-highlight {
  background: var(--site-accent-light);
  color: var(--site-accent-dark);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
}

/* ── Print: K-5 English worksheets ── */
@media print {
  .writing-line   { border-bottom-color: #ccc; }
  .word-display   { border: 1pt solid #ccc; border-radius: 0; background: none; }
  .vocab-card     { border: 1pt solid #ccc; border-radius: 0; }
  .reading-passage { border: 1pt solid #ccc; border-radius: 0; background: none; }
  .question-block  { border: 1pt solid #ccc; border-radius: 0; }
}