/* Tablet + mobile — single-column stack, body owns the scroll.
   Order: Projects → About → CV (matches K384 mobile reference).

   Typography in stack mode breaks from the desktop's flat 0.95rem to
   reintroduce visual hierarchy: h1 = 1.2rem (site title, mildly larger
   than body), h2 = 1.05rem weight 500 (column section labels — just
   enough above body to read as a header when stacked), h3 = 0.95rem
   weight 500 (unchanged from typography.css), body and captions =
   0.95rem (unchanged). Desktop stays flat — three-column isolation
   already gives enough visual separation that bumped sizes would feel
   oversized. */

@media (max-width: 1023px) {
  /* Redefining the token at :root makes every consumer (including the
     desktop .column rule in layout.css) pick up the responsive value
     automatically, instead of duplicating padding declarations. */
  :root {
    --col-padding:   1.25rem;     /* design-tokens.md §7.1 — wider touch margins */
    --header-height: 3.5rem;      /* fixed brand header height in stack mode */
  }

  html, body {
    height: auto;
    overflow: auto;
  }

  /* Body content sits below the fixed header. scroll-padding-top on html
     makes anchor links land below the header instead of underneath it. */
  body {
    padding-top: var(--header-height);
  }

  html {
    scroll-padding-top: var(--header-height);
  }

  /* The <h1> stays in the DOM for accessibility and SEO but is hidden
     from view in stack mode. The visible brand mark is rendered by
     .site-header-fixed__title (a plain <a>, intentionally not a heading
     so the page keeps a single <h1>). Off-screen with clip — read by
     screen readers, zero layout footprint. */
  .site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ---- Fixed header --------------------------------------------------- */
  .site-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--col-padding);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-text-ghost);
  }

  .site-header-fixed__title {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text);
    text-decoration: none;
  }

  /* Hamburger button — 44×44 hit target with three CSS bars. The bars
     converge into an X on aria-expanded="true" via translate + rotate. */
  .site-header-fixed__toggle {
    width: 44px;
    height: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .site-header-fixed__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    transition: transform 200ms ease, opacity 200ms ease;
    transform-origin: center;
  }

  .site-header-fixed__toggle[aria-expanded="true"] .site-header-fixed__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header-fixed__toggle[aria-expanded="true"] .site-header-fixed__toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .site-header-fixed__toggle[aria-expanded="true"] .site-header-fixed__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ---- Dropdown nav --------------------------------------------------- */
  .site-nav-mobile {
    display: block;                         /* override layout.css default `none` */
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 99;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-text-ghost);

    /* Collapsed: invisible, no height, not focusable. visibility:hidden
       (with the timed transition) keeps the keyboard tab order from
       reaching links inside while the nav is closed. */
    visibility: hidden;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 200ms ease, opacity 200ms ease, visibility 0s linear 200ms;
  }

  .site-nav-mobile.is-open {
    visibility: visible;
    max-height: 14rem;                      /* ~3 links @ ~3rem + slack */
    opacity: 1;
    transition: max-height 200ms ease, opacity 200ms ease, visibility 0s linear 0s;
  }

  .site-nav-mobile__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Override the en-dash bullet that components.css applies to every
     <ul> <li>; the nav links are flush. */
  .site-nav-mobile__list > li {
    position: static;
  }
  .site-nav-mobile__list > li::before {
    content: none;
  }

  .site-nav-mobile__link {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.5rem var(--col-padding);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--color-text);
    text-decoration: none;
  }
  .site-nav-mobile__link:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-link);
    text-underline-offset: 0.2em;
  }

  /* Active section indicator — set on the matching link by the scrollspy
     IntersectionObserver in main.js. Differentiates by weight (500 vs.
     400) and a full-strength underline (color-link vs. the default
     0.25-opacity underline that hover uses). */
  .site-nav-mobile__link.is-active {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--color-link);
    text-underline-offset: 0.2em;
  }

  /* Admin bar offset — WP injects html { margin-top: 32px (or 46px under
     782px) }, but our position:fixed elements ignore that and sit at
     viewport top by default. Push them down by the admin-bar height so
     they don't overlap. */
  body.admin-bar .site-header-fixed {
    top: 32px;
  }
  body.admin-bar .site-nav-mobile {
    top: calc(var(--header-height) + 32px);
  }

  @media (max-width: 782px) {
    body.admin-bar .site-header-fixed {
      top: 46px;
    }
    body.admin-bar .site-nav-mobile {
      top: calc(var(--header-height) + 46px);
    }
  }

  /* Stack-mode heading hierarchy — desktop is flat 0.95rem because the
     three-column isolation provides separation visually, but stacked the
     scale needs to do that work. h3 + body + captions stay at their
     typography.css defaults; only h1 and h2 lift, conservatively. */
  h1 {
    font-size: 1.2rem;
  }

  h2 {
    font-size: 1.05rem;
    font-weight: 500;
  }

  /* The legacy first-child <hr> inside the About column was the divider
     between the (originally inline) site title and PROFILE (SAMPLE). In
     stack mode .site-header-fixed (with its own border-bottom) plus the
     About section's natural border-bottom from .column:not(:last-child)
     handle the dividing job, so this internal hr becomes redundant —
     hide it to keep PROFILE aligned with MATERIAL and CV. */
  .about-leading-rule {
    display: none;
  }

  /* Reveal the trailing <hr> right below PROFILE so the About column
     follows the same h2 → <hr> → content pattern Projects and CV inherit
     naturally. All other hr properties (color, height, margins) come from
     the base hr rule in components.css — no need to redeclare here. */
  .profile-trailing-rule {
    display: block;
  }

  /* Stack mode — restore auto height even when the admin-bar override
     in layout.css would otherwise win on specificity. */
  .site-columns,
  body.admin-bar .site-columns {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  /* Section-break breathing room — asymmetric. The big gap (4rem) sits
     ABOVE each border-bottom, inside the section that is ending, so the
     content tapers off into a clear pause. Below the divider, a small
     gap (1rem) keeps the next section's heading anchored close to the
     line, signaling that it belongs "right after" the break.
     Sides keep the standard --col-padding (set by the layout.css shorthand
     `padding: var(--col-padding)`). Applied uniformly to every .column —
     not via `.column + .column` — because the visual order in stack mode
     differs from DOM order (Projects → About → CV vs. About → Projects →
     CV in DOM), so a sibling-combinator selector would skip About and
     leave its heading floating. The uniform rule also obsoletes the
     previous .column--about padding-top override that existed only to
     neutralize the desktop calc reservation. */
  .column,
  body.admin-bar .column {
    overflow: visible;
    height: auto;
    padding-top: var(--space-md);
    padding-bottom: var(--space-2xl);

    /* Restore native scrollbar at body level */
    scrollbar-width: auto;
  }
  .column::-webkit-scrollbar {
    display: revert;
  }

  /* The desktop vertical column divider becomes a horizontal section
     divider in stack mode — same hairline weight/color, just rotated. */
  .column:not(:last-child) {
    border-right: 0;
    border-bottom: var(--col-divider);
  }

  /* Stack order — Projects first, matching the K384 mobile reference. */
  .column--projects { order: 1; }
  .column--about    { order: 2; }
  .column--cv       { order: 3; }

  /* Inner 1fr/2fr grids in project and CV blocks lose their visual rhythm
     when the parent column spans the full viewport — collapse to a single
     column so heading and body stack vertically. */
  .project,
  .cv-section {
    grid-template-columns: 1fr;
    row-gap: var(--space-md);
  }
}