/*
 * Document shell
 * --------------
 * Page-level sizing, typography, and chrome shared by every app mode.
 * Shell-owned responsive rules live at the bottom of this file. Feature and
 * navigation responsive rules live beside their respective base styles.
 */

html {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

/* Story reading can extend beyond the viewport. */
html.reading {
  height: auto;
}

body {
  background-color: var(--color-surface-subtle);
  display: flex;
  flex-direction: column;
  font-family: "Source Serif 4", "Noto Serif", serif;
  font-size: 16px;
  height: 100%;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header,
footer {
  background-color: var(--color-bg-chrome);
  color: var(--color-ink);
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
  text-align: center;
}

header {
  letter-spacing: 0.05rem;
  padding: 14px 20px 18px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(13, 58, 105, 0.08),
    0 4px 10px rgba(13, 58, 105, 0.06);
}

#site-title {
  align-items: center;
  color: inherit;
  display: inline-flex;
  flex-direction: column;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: 600;
  gap: 5px;
  letter-spacing: -0.012em;
  line-height: 1.08;
  margin: 6px 0 0;
  /* Overrides the shared h1{overflow:hidden} rule below — that clip exists
     for h1s with dynamic, possibly-long text (e.g. word-entry titles) that
     need single-line ellipsis truncation. This wordmark's text is fixed and
     short, so it never needs truncating, and the clip has no headroom for
     a serif face's g/y descenders once line-height is tight. */
  overflow: visible;
  text-decoration: none;
  user-select: none;
}

#site-title:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--color-interactive);
  outline-offset: 4px;
}

.site-wordmark-name {
  display: block;
}

.site-wordmark-descriptor {
  color: var(--color-text-strong);
  display: block;
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: none;
}

.site-wordmark-descriptor span {
  color: var(--color-ink);
  margin: 0 0.35em;
}

main {
  flex: 1;
}

footer {
  padding: 20px 0;
  position: relative;
  width: 100%;
}

footer p {
  font-size: 14px;
  margin: 5px 0;
}

footer p a {
  color: var(--color-interactive);
  font-weight: bold;
  text-decoration: none;
}

footer p a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

footer .copyright {
  color: var(--color-text-strong);
  font-size: 14px;
}

@media (max-width: 1024px) {
  /* Reserves scroll room below the page's real last content so it can
     scroll clear of #mode-nav — the fixed bottom tab bar at this
     breakpoint (styles/35-navigation.css). Applied to footer (the last
     visible element in every mode except Word Game, which hides it) and
     to main directly in Word Game mode instead: body itself has a fixed
     height:100% (see the base `body` rule above), so its own
     padding-bottom doesn't reach past content that already overflows
     that fixed box — main's own intro/placement screens routinely do,
     being taller than one viewport. Lifted back to 0 mid-round, when
     #mode-nav hides itself to avoid colliding with the round's own fixed
     "Next" button dock (00-foundations-and-game.css). */
  footer {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  body.word-game-mode main {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  body.word-game-mode.word-game-round-active main {
    padding-bottom: 0;
  }

  header,
  footer {
    box-sizing: border-box;
    width: 100%;
  }

  header {
    padding: 10px 15px 12px;
  }

  footer {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 10px;
  }

  footer p,
  footer .copyright {
    font-size: 14px;
  }

  footer p {
    margin: 0;
  }

  body.word-game-mode {
    min-height: 100svh;
    overflow-x: hidden;
    overflow-x: clip;
  }

  body.word-game-mode footer {
    display: none;
  }

  body.word-game-mode header {
    padding: 6px 12px;
  }

  body.word-game-mode #site-title {
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
  }

  body.word-game-mode .site-wordmark-descriptor {
    display: none;
  }
}

@media (max-width: 600px) {
  #site-title {
    font-size: 32px;
  }

  .site-wordmark-descriptor {
    font-size: 14px;
    letter-spacing: 0.08em;
  }
}

/* Short game viewports (e.g. a tablet in landscape) hide the complete
   header to preserve play space, independent of width. */
@media (max-width: 1024px) and (max-height: 700px) {
  body.word-game-mode header {
    display: none;
  }
}

/* Every phone gets the headerless Word Game, tall or short — the in-round
   toolbar already provides quit/report controls, so the site header is
   redundant chrome on a screen this narrow regardless of height. */
@media (max-width: 600px) {
  body.word-game-mode header {
    display: none;
  }

  /* A live round has its answers and Next action fixed to the bottom of the
     viewport. Letting the document behind that action zone scroll creates a
     misleading empty space above the answers and can push the round toolbar
     underneath the iOS browser chrome. The teaching card has its own
     overflow treatment for unusually long content, so the page itself must
     remain a stable, non-scrolling game board while a question is active. */
  html:has(body.word-game-mode.word-game-round-active),
  body.word-game-mode.word-game-round-active {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.word-game-mode.word-game-round-active main {
    min-height: 0;
    overflow: hidden;
  }
}