/**
 * TICKET-336: Secondary Page Shell System
 *
 * Loaded globally on all pages (loaded after premium.css).
 * Homepage is excluded via .cws-page--home scoping or :not() guards.
 * Solver and puzzle pages retain their explicit card surfaces defined in
 * premium-solver.css and premium-puzzle.css respectively.
 *
 * Intent: Make non-homepage public pages feel like they share the same
 * design canvas as the homepage — no narrow floating boxes, consistent
 * vertical rhythm, appropriate widths per content type.
 *
 * Width system (max-width):
 *   Tool/solver pages:      1200px  (premium-solver.css)
 *   Standard content pages: 1080px  (global .container default)
 *   Long-form guide text:    900px  (premium-instructions.css)
 *
 * Vertical rhythm:
 *   All secondary <main> elements get consistent bottom padding so
 *   content never flushes into the footer.
 */

/* ─── Secondary page main: bottom breathing room ────────────────────────────── */

body:not(.cws-page--home) #main-content {
  padding-bottom: 3.5rem;
}

/* ─── Solver and puzzle card containers: consistent top gap ─────────────────── */
/*
 * The sticky header is ~54px tall. Give the card surface breathing room
 * at the top so it doesn't appear to collide with the header chrome.
 */

/* TICKET-337: scope to #main-content > .container so margin-top/bottom
 * never bleeds into .site-header .container or .site-footer .container. */
.cws-page--solver #main-content > .container,
.puzzle-page #main-content > .container,
.puzzle-archive-page #main-content > .container {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* ─── Submit word page: page header section treatment ───────────────────────── */
/*
 * The submit page has no dedicated premium-surface CSS file. Add the
 * section-style heading divider here so the h1 + intro are grounded
 * before the form surface — matching the contact page pattern.
 */

.submit-word-page .container > h1 {
  padding-bottom: 1.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

html.light-mode .submit-word-page .container > h1 {
  border-bottom-color: var(--line-soft);
}

/* ─── Instructions / methodology: consistent top rhythm ─────────────────────── */
/*
 * premium-instructions.css handles the 900px width and transparent surface.
 * Add breathing room between the header nav and the first heading here.
 */

.instructions-page {
  padding-top: 0.5rem;
}

/* ─── Trust pages (about, privacy, terms): open canvas ─────────────────────── */
/*
 * Trust pages share the transparent .container from the global default.
 * Ensure the first heading in the container has the section divider treatment.
 */

.cws-page--trust .container > h1,
.cws-page--trust .container > header > h1 {
  padding-bottom: 1.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

html.light-mode .cws-page--trust .container > h1,
html.light-mode .cws-page--trust .container > header > h1 {
  border-bottom-color: var(--line-soft);
}

/* ─── Back link: consistent treatment across secondary pages ─────────────────── */
/*
 * .trust-back-link is used on contact and trust pages. Defined in
 * premium-contact.css but used more broadly — keep the token-based
 * definition there; this rule only normalises display.
 */

/* (no overrides needed — trust-back-link is fully defined in premium-contact.css) */

/* ─── Mobile: normalise edge-to-edge padding on secondary pages ─────────────── */

@media (max-width: 600px) {
  body:not(.cws-page--home) .container {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Keep solver/puzzle card contained on mobile — scoped to #main-content */
  .cws-page--solver #main-content > .container,
  .puzzle-page #main-content > .container,
  .puzzle-archive-page #main-content > .container {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}