/* ==========================================================================
   DrakME — shared mobile / responsive + readability enhancements
   Drop-in: loaded after each page's own <style>, so it overrides.
   Pairs with nav-mobile.js (injects the hamburger button + .nav-links panel).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* Body copy uses Lora — a serif built for on-screen reading — instead of the
   thin display face. Headings (Cinzel) and the logo (MedievalSharp) are left
   alone, so the medieval look stays. Every element that was pinned to
   'Crimson Text' is repointed here. */
body,
.intro, .lore-block,
.hero-tagline, .countdown-zone, .footer-copy,
.page-header p, .section-head .sub, .lightbox-counter,
.radio-row label, .char-input-wrap input,
input[type="text"], input[type="email"] {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
}

/* Prevent iOS from auto-inflating font sizes in landscape */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ==========================================================================
   Readability pass (applies on all viewports)
   Keeps the medieval fonts but bumps size, line-height, contrast & weight so
   the body copy isn't thin/low-contrast. Loads after page styles → overrides.
   ========================================================================== */

/* Darken the "light ink" brown used for most paragraphs — the old value was
   low-contrast on parchment. This one var feeds intro/feature/lore/card text. */
:root { --ink-light: #4a2c19; }

body {
  font-size: 19px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Main narrative text: a touch larger, roomier, and darker */
.intro { font-size: 20px; line-height: 1.78; color: #34200f; }

/* These were only 15px — small for a serif at reading distance */
.feature p,
.class-card p,
.news-list p { font-size: 16.5px; line-height: 1.62; }

/* Lore quote: keep italic flavour but lift contrast */
.lore-block { color: #402710; font-size: 18px; }

/* Hero tagline was dimmed to 0.7 opacity — hard to read on the dark hero */
.hero-tagline { opacity: 0.95; color: #e8d9ac; }

/* Slightly heavier nav labels so the thin uppercase reads cleanly */
.top-bar a { font-weight: 600; }

/* --- Countdown banner: minimal, refined layout (eyebrow · timer · date) - */
.countdown-banner { padding: 30px 16px 34px; }
.countdown-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #cca95c;
  margin-bottom: 22px;
}
.countdown-unit-label {
  color: #c2a05a;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
}
.countdown-when {
  margin-top: 22px;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: #e7d6a6;
}
.countdown-note {
  margin: 22px auto 0;
  max-width: 680px;
  padding: 18px 26px;
  font-family: 'Cinzel', 'Lora', Georgia, serif;
  font-weight: 700;
  font-size: clamp(19px, 3.4vw, 27px);
  line-height: 1.4;
  color: #ffe9a8;
  background: rgba(139, 26, 26, 0.14);
  border: 1px solid var(--blood, #8b1a1a);
  border-radius: 6px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* --- Desktop nav ------------------------------------------------------------
   .nav-links is a transparent wrapper (display:contents) so its children lay
   out as direct children of <nav>, and the hamburger is hidden.
   The original 960px cap was too narrow for 10 links + the language flags, so
   the last items (Downloads, the flag switcher) overflowed off-screen. Widen
   the bar, centre it, and tighten spacing so everything fits. A wrap fallback
   keeps items visible (never clipped) on in-between widths. */
.top-bar nav .nav-links { display: contents; }
.top-bar nav .nav-toggle { display: none; }
.top-bar nav {
  max-width: 1320px;
  padding: 0 16px;
  flex-wrap: wrap;
  row-gap: 0;
  justify-content: center;
}
.top-bar a { padding: 15px 8px; font-size: 12.5px; letter-spacing: 0.4px; }
/* No auto margins in the nav row — an auto margin inside a flex-wrap container
   forces later items (the flags) onto a 2nd line even when there's room.
   Everything is centred and only wraps as a genuine fallback below ~1240px. */
.top-bar .nav-logo { margin-right: 12px; padding-right: 0; }
.lang-switch { margin-left: 8px; }
.lang-switch button { padding: 3px 6px; font-size: 14px; }

/* --------------------------------------------------------------------------
   Nav collapses to a hamburger below 1240px — 10 links + the flag switcher
   only fit on one row on wide desktops; narrower screens get the clean menu.
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  /* Header becomes: logo | hamburger, with links in a drop-down panel */
  .top-bar nav {
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    padding: 0 10px;
    gap: 0;
  }
  .top-bar .nav-logo {
    padding: 14px 4px;
    margin-right: auto;
    font-size: 20px;
  }

  /* Hamburger button */
  .top-bar nav .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .top-bar nav .nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--gold, #c9a84c);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .top-bar nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .top-bar nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .top-bar nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The collapsible panel */
  .top-bar nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(180deg, #1a0f08 0%, #2c1810 100%);
    border-bottom: 2px solid var(--gold-dim, #8a6d2b);
    box-shadow: 0 16px 40px rgba(0,0,0,0.55);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    z-index: 200;
  }
  .top-bar nav.nav-open .nav-links { display: flex; }

  /* Links stack full-width and get real tap targets */
  .top-bar nav .nav-links a {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 14px;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(138,109,43,0.18);
    white-space: normal;
  }
  .top-bar nav .nav-links a:last-of-type { border-bottom: none; }

  /* Language switcher: centered row at the bottom of the panel */
  .top-bar nav .nav-links .lang-switch {
    margin: 0;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid rgba(138,109,43,0.25);
  }
  .top-bar nav .nav-links .lang-switch button {
    font-size: 16px;
    padding: 8px 10px;
  }
}

/* --------------------------------------------------------------------------
   Phone / small-tablet typography (kept separate from the nav breakpoint)
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* ---- Typography: big letter-spacing breaks words on narrow screens ---- */
  .hero { height: auto; min-height: 360px; padding: 40px 0; }
  .hero-content { padding: 24px 16px; }
  .hero-content h1 { letter-spacing: 2px; }
  .hero-content h1 span { letter-spacing: 3px; font-size: 0.34em; }
  .hero-tagline { font-size: 17px; }

  .section-head h2 { font-size: 22px; letter-spacing: 2px; }
  .parchment { padding: 30px 20px; }
  .parchment-wrap { padding: 0 12px; }

  /* Keep the countdown tidy */
  .countdown-zones { gap: 18px; }
}

/* Extra-small phones */
@media (max-width: 400px) {
  .parchment { padding: 24px 16px; }
  .hero-content h1 { letter-spacing: 1px; }
  .hero-content h1 span { letter-spacing: 2px; }
}