/* ================================================================
   LargePrintPD landing page (index.php)  -  styles/landing.css
   Built for low-vision readers:
     - body text 1.25rem (20px at default size), line-height 1.65
     - plain solid backgrounds, no patterns behind text
     - body text contrast 7:1 or better (WCAG AAA) in every theme
     - system sans-serif font, regular and bold only, no italics
     - 3px focus rings, controls at least 48px tall
   Loaded only on the landing page, after site.css.
   Themes: light (default), dark (prefers-color-scheme), and a High contrast
   switch (html.lp-hc, set by js/a11y-bar.js or prefers-contrast: more).
   ================================================================ */

:root {
  color-scheme: light dark;

  --lp-bg:        #FBF8F1;   /* page: warm cream                       */
  --lp-surface:   #FFFFFF;   /* cards                                   */
  --lp-alt:       #F3ECDC;   /* alternate sections: parchment           */
  --lp-text:      #1B2430;   /* body text            14.8:1 on bg       */
  --lp-muted:     #33404F;   /* secondary text        9.9:1 on bg       */
  --lp-heading:   #1F2D3D;   /* headings             13:1 on bg         */
  --lp-link:      #1F3A5F;   /* links                10.8:1 on bg       */
  --lp-border:    #5C6B7C;   /* borders / non-text    5.1:1 on bg       */
  --lp-hero-bg:   #1F2D3D;
  --lp-hero-text: #FFFFFF;   /* 14:1 on hero                            */
  --lp-hero-accent: #F0D9A8; /* wheat, 10.1:1 on hero                   */
  --lp-btn-bg:    #1F2D3D;   /* primary button       14:1 with white    */
  --lp-btn-text:  #FFFFFF;
  --lp-btn2-bg:   #FFFFFF;   /* secondary button                        */
  --lp-btn2-text: #1F2D3D;
  --lp-focus:     #0A3D91;   /* 10:1 on white, 9.3:1 on cream           */
  --lp-gold:      #6B4E12;   /* darkened brand wheat, 7.7:1 on white    */
  --lp-bar-bg:    #EDE8DC;

  --lp-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --lp-radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root:not(.lp-hc) {
    --lp-bg:        #12181F;
    --lp-surface:   #1B2430;
    --lp-alt:       #172029;
    --lp-text:      #F2F0EC;   /* 15.7:1 */
    --lp-muted:     #C9D1DA;   /* 11.6:1 */
    --lp-heading:   #FFFFFF;
    --lp-link:      #9EC5F0;   /* 10:1   */
    --lp-border:    #8798AA;   /* 6:1    */
    --lp-hero-bg:   #0B1118;
    --lp-hero-text: #FFFFFF;
    --lp-hero-accent: #F0D9A8; /* 13.7:1 */
    --lp-btn-bg:    #F0D9A8;   /* dark text on wheat, 12.9:1 */
    --lp-btn-text:  #12181F;
    --lp-btn2-bg:   #1B2430;
    --lp-btn2-text: #F2F0EC;
    --lp-focus:     #FFD34D;   /* 12.5:1 */
    --lp-gold:      #F0D9A8;
    --lp-bar-bg:    #1B2430;
  }
}

/* High contrast, light: black on white. */
:root.lp-hc {
  --lp-bg: #FFFFFF; --lp-surface: #FFFFFF; --lp-alt: #FFFFFF;
  --lp-text: #000000; --lp-muted: #000000; --lp-heading: #000000;
  --lp-link: #0000B3; --lp-border: #000000;
  --lp-hero-bg: #000000; --lp-hero-text: #FFFFFF; --lp-hero-accent: #FFFFFF;
  --lp-btn-bg: #000000; --lp-btn-text: #FFFFFF;
  --lp-btn2-bg: #FFFFFF; --lp-btn2-text: #000000;
  --lp-focus: #0000B3; --lp-gold: #000000; --lp-bar-bg: #FFFFFF;
}
/* High contrast on a device set to dark: white on black, yellow links. */
@media (prefers-color-scheme: dark) {
  :root.lp-hc {
    --lp-bg: #000000; --lp-surface: #000000; --lp-alt: #000000;
    --lp-text: #FFFFFF; --lp-muted: #FFFFFF; --lp-heading: #FFFFFF;
    --lp-link: #FFFF00; --lp-border: #FFFFFF;
    --lp-hero-bg: #000000; --lp-hero-text: #FFFFFF; --lp-hero-accent: #FFFF00;
    --lp-btn-bg: #FFFF00; --lp-btn-text: #000000;
    --lp-btn2-bg: #000000; --lp-btn2-text: #FFFFFF;
    --lp-focus: #FFFF00; --lp-gold: #FFFF00; --lp-bar-bg: #000000;
  }
}

/* ---------- base ---------- */
body.landing {
  /* Plain solid page. site.css paints a fixed pattern; remove it here. */
  background: var(--lp-bg);
  background-image: none;
  color: var(--lp-text);
  font-family: var(--lp-font);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.65;
  overflow-wrap: break-word;
}
.landing .lp-door, .landing .lp-card, .landing .lp-wrap > *, .lp-a11y-group { min-width: 0; }
.landing h1, .landing h2, .landing h3, .landing p, .landing li, .landing .lp-btn, .landing .lp-a11y-btn { overflow-wrap: anywhere; }
.landing *, .landing *::before, .landing *::after { font-style: normal; }
.landing h1, .landing h2, .landing h3 {
  font-family: var(--lp-font);
  font-weight: 700;
  color: var(--lp-heading);
  line-height: 1.2;
  margin: 0 0 0.6em;
}
.landing p { margin: 0 0 1em; }
.landing main a:not(.lp-btn) {
  color: var(--lp-link);
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
}
.landing main a:not(.lp-btn):hover { text-decoration-thickness: 0.2em; }

/* Focus: 3px ring everywhere, in a colour that works on the theme. */
.landing :focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.landing .lp-hero :focus-visible,
.landing footer :focus-visible { outline-color: #FFD34D; }
:root.lp-hc .landing .lp-hero :focus-visible,
:root.lp-hc .landing footer :focus-visible { outline-color: #FFFF00; }

.landing .skip-link { font-size: 1.25rem; font-weight: 700; padding: 0.9rem 1.4rem; }

.lp-wrap { max-width: 70rem; margin: 0 auto; padding: 0 1.25rem; }
.lp-measure { max-width: 65ch; }
.lp-list { list-style: none; margin: 0; padding: 0; }

/* ---------- header / nav (landing only) ---------- */
.landing nav {
  height: auto; min-height: 4rem; flex-wrap: wrap; gap: 0.25rem 1.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--lp-surface);
  border-bottom: 3px solid var(--lp-border);
  justify-content: space-between;
}
.landing .nav-logo {
  font-family: var(--lp-font); font-size: 1.5rem; font-weight: 700;
  color: var(--lp-heading); min-height: 3rem; max-width: 100%;
}
.landing .nav-logo span { color: var(--lp-gold); }
.landing .nav-links { margin: 0; padding: 0; gap: 0.25rem 0.5rem; flex-wrap: wrap; width: auto; justify-content: flex-start; }
.landing .nav-links a {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0.25rem 0.75rem;
  font-size: 1.15rem; font-weight: 700; color: var(--lp-link); text-decoration: none;
  border-radius: 8px;
}
.landing .nav-links a:hover { text-decoration: underline; text-decoration-thickness: 0.15em; text-underline-offset: 0.25em; color: var(--lp-link); }
.landing .nav-links a[aria-current="page"] {
  color: var(--lp-heading);
  text-decoration: underline; text-decoration-thickness: 0.2em; text-underline-offset: 0.3em;
}

/* ---------- Text size / High contrast bar ---------- */
.lp-a11y { background: var(--lp-bar-bg); border-bottom: 1px solid var(--lp-border); font-size: 1.1rem; }
.lp-a11y[hidden] { display: none; }
.lp-a11y-inner { max-width: 70rem; margin: 0 auto; padding: 0.4rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.75rem; }
.lp-a11y-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.lp-a11y-label { font-weight: 700; color: var(--lp-heading); margin-right: 0.25rem; }
.lp-a11y-btn {
  font: inherit; font-weight: 700; color: var(--lp-btn2-text); background: var(--lp-btn2-bg);
  border: 3px solid var(--lp-border); border-radius: 10px;
  min-width: 3rem; min-height: 3rem; padding: 0.2rem 0.8rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.lp-a11y-btn:hover { border-color: var(--lp-heading); }
.lp-a11y-btn[aria-pressed="true"] { background: var(--lp-btn-bg); color: var(--lp-btn-text); border-color: var(--lp-btn-bg); }
.lp-a11y-btn[aria-disabled="true"] { opacity: 1; border-style: dashed; cursor: default; }
.lp-a11y-btn[data-size="smaller"] { font-size: 1rem; }
.lp-a11y-btn[data-size="reset"]   { font-size: 1.2rem; }
.lp-a11y-btn[data-size="larger"]  { font-size: 1.4rem; }
.lp-a11y-contrast { font-size: 1.1rem; }
.lp-a11y-help { display: none; color: inherit; font-size: 1rem; }
@media (min-width: 62rem) { .lp-a11y-help { display: inline; margin-left: auto; } }
.lp-a11y-state { font-weight: 700; min-width: 2.2em; text-align: left; }
.lp-js-only { display: none; }
.js .lp-js-only { display: list-item; }

/* ---------- buttons ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3.5rem; padding: 0.75rem 1.6rem;
  font-family: var(--lp-font); font-size: 1.2rem; font-weight: 700; line-height: 1.25;
  border: 3px solid var(--lp-btn-bg); border-radius: 12px;
  text-decoration: none; cursor: pointer;
}
.lp-btn-primary   { background: var(--lp-btn-bg);  color: var(--lp-btn-text); }
.lp-btn-secondary { background: var(--lp-btn2-bg); color: var(--lp-btn2-text); border-color: var(--lp-btn2-text); }
.lp-btn-big { min-height: 4.25rem; font-size: 1.4rem; padding: 0.9rem 2.2rem; }
a.lp-btn:hover { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.25em; }
.landing a.lp-btn-primary, .landing a.lp-btn-primary:hover { color: var(--lp-btn-text); }
.landing a.lp-btn-secondary, .landing a.lp-btn-secondary:hover { color: var(--lp-btn2-text); }
.lp-btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.25rem; }
.lp-more { margin: 1.75rem 0 0; }

/* ---------- hero ---------- */
.lp-hero { background: var(--lp-hero-bg); color: var(--lp-hero-text); padding: 3rem 0 3.25rem; border-bottom: 6px solid var(--lp-hero-accent); }
.landing .lp-hero h1 {
  color: var(--lp-hero-text);
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.4rem);
  line-height: 1.15; max-width: 20ch; margin-bottom: 0.5em;
}
.lp-eyebrow { margin: 0 0 0.75rem; font-size: 1.15rem; font-weight: 700; color: var(--lp-hero-accent); letter-spacing: 0.04em; }
.lp-lead { font-size: 1.5rem; line-height: 1.5; max-width: 40ch; margin: 0; color: var(--lp-hero-text); }

/* ---------- sections ---------- */
.lp-section { padding: 3.25rem 0; background: var(--lp-bg); }
.lp-alt { background: var(--lp-alt); border-top: 1px solid var(--lp-border); border-bottom: 1px solid var(--lp-border); }
.landing .lp-section h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem); margin-bottom: 0.6em; }

/* ---------- cards ---------- */
.lp-card {
  position: relative;
  background: var(--lp-surface);
  border: 3px solid var(--lp-border);
  border-radius: var(--lp-radius);
  padding: 1.5rem;
}
.lp-stretch { text-decoration: none !important; color: inherit !important; }
.lp-stretch::after { content: ""; position: absolute; inset: 0; border-radius: calc(var(--lp-radius) - 2px); }
.landing .lp-stretch:focus-visible { outline: none; }
.landing .lp-stretch:focus-visible::after { outline: 4px solid var(--lp-focus); outline-offset: 3px; }
.landing .lp-card:has(.lp-stretch):hover { border-color: var(--lp-heading); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.landing .lp-card:has(.lp-stretch):hover .lp-stretch { text-decoration: underline !important; text-decoration-thickness: 0.1em; text-underline-offset: 0.2em; }
.lp-above { position: relative; z-index: 1; }

.lp-doors { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
.lp-door { padding: 2rem 1.75rem; display: flex; flex-direction: column; align-items: flex-start; }
.lp-icon { color: var(--lp-heading); margin-bottom: 0.75rem; flex: none; }
.landing .lp-card-title { font-size: 1.8rem; margin-bottom: 0.5em; }
.lp-door p { max-width: 36em; }
.lp-door .lp-btn-row, .lp-door > .lp-btn { margin-top: auto; }
.lp-door > p { margin-bottom: 1.25rem; }

/* play strip and contact: text + one big button, stacked on small screens */
.lp-split { display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; align-items: center; justify-content: space-between; }
.lp-split h2 { margin-bottom: 0.4em; }
.lp-split p { margin-bottom: 0.75em; }
.lp-split-action { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* latest classics */
.lp-books { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
.lp-book { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; padding: 1.1rem; }
.lp-book-text { flex: 1 1 11rem; min-width: 0; }
.lp-cover { flex: none; width: 6.5rem; height: auto; aspect-ratio: 2 / 3; object-fit: contain; background: var(--lp-alt); border: 1px solid var(--lp-border); border-radius: 6px; }
.landing .lp-book-title { font-size: 1.4rem; margin: 0 0 0.3em; }
.lp-book-author { margin: 0; color: var(--lp-muted); }

/* puzzle titles */
.lp-puzzles { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
.lp-puzzle { border-top: 14px solid var(--lp-band, var(--lp-border)); padding-top: 1.25rem; }
.landing .lp-puzzle-title { font-size: 1.4rem; margin-bottom: 0.3em; }
.lp-puzzle-theme { color: var(--lp-muted); margin-bottom: 0.9rem; }
.lp-puzzle p:last-child { margin-bottom: 0; }
.lp-pill { display: inline-block; padding: 0.3rem 1rem; border: 3px solid var(--lp-heading); border-radius: 999px; font-weight: 700; color: var(--lp-heading); }

/* facts */
.lp-facts { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
.landing .lp-fact h3 { font-size: 1.4rem; }
.lp-fact p { margin-bottom: 0; }
.lp-quote { margin: 2.25rem 0 0; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 8px solid var(--lp-gold); max-width: 40rem; }
.lp-quote p:first-child { font-size: 1.5rem; line-height: 1.45; font-weight: 700; color: var(--lp-heading); }
.lp-quote p:last-child { margin-bottom: 0; }

/* screen tips */
.lp-checks { margin: 0; padding-left: 1.4em; }
.lp-checks li { margin-bottom: 0.75em; padding-left: 0.25em; }

/* ---------- footer (landing only) ---------- */
.landing footer { background: var(--lp-hero-bg); color: var(--lp-hero-text); font-size: 1.1rem; border-top: 6px solid var(--lp-hero-accent); padding: 2.25rem 1.25rem; }
.landing .footer-admin-text a { color: var(--lp-hero-text); text-decoration: underline; text-underline-offset: 0.2em; }
.landing .footer-disclaimer { font-size: 1.05rem; opacity: 1; }
.landing .footer-admin-icon { opacity: 1; }
.landing .footer-admin, .landing .footer-admin-text { min-width: 0; max-width: 100%; }
.landing .footer-admin { flex-wrap: wrap; justify-content: center; }

/* ---------- wider screens (em, so they follow the reader's text size) ---------- */
@media (min-width: 40em) {
  .lp-books, .lp-puzzles, .lp-facts { grid-template-columns: repeat(2, 1fr); }
  .lp-hero { padding: 4.25rem 0 4.5rem; }
}
@media (min-width: 56em) {
  .lp-doors { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .lp-books { grid-template-columns: repeat(4, 1fr); }
  .lp-book { flex-direction: column; align-items: flex-start; }
  .lp-cover { width: 100%; max-width: 11rem; }
  .lp-puzzles { grid-template-columns: repeat(4, 1fr); }
  .lp-facts { grid-template-columns: repeat(4, 1fr); }
  .lp-section { padding: 4rem 0; }
}
@media (max-width: 25em) {
  /* Very narrow screens (320px) at large text sizes: keep the logo on one line. */
  .landing .nav-logo { font-size: min(1.5rem, 6.4vw); }
  .landing .nav-links a { padding-left: 0.5rem; padding-right: 0.5rem; }
  .lp-a11y-btn { padding-left: 0.5rem; padding-right: 0.5rem; text-align: center; }
}
@media (max-width: 40em) {
  .landing nav { padding: 0.5rem 1rem; }
  .lp-wrap, .lp-a11y-inner { padding-left: 1rem; padding-right: 1rem; }
  .lp-door { padding: 1.5rem 1.25rem; }
  .lp-btn { width: 100%; }
  .lp-btn-row, .lp-split-action { flex-direction: column; align-items: stretch; width: 100%; }
  .lp-a11y-label { width: 100%; }
}

/* ---------- motion, high-contrast OS mode ---------- */
@media (prefers-reduced-motion: reduce) {
  .landing * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .lp-card, .lp-btn, .lp-a11y-btn { border: 3px solid CanvasText; }
  .lp-btn-primary { background: ButtonFace; color: ButtonText; }
  .lp-stretch:focus-visible::after { outline-color: Highlight; }
}
@media print {
  .lp-a11y, .skip-link { display: none !important; }
  body.landing { font-size: 12pt; }
}