/* Three-column layout with independent scroll. Desktop ≥1024px.
   Mobile/tablet stack defined in responsive.css. */

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* desktop: body never scrolls; columns own their scroll */
}

/* .site is the relative anchor for the absolutely-positioned site title.
   The actual three-column grid lives one level deeper, on .site-columns,
   so that the <h1> can sit visually inside the About column on desktop
   without being a child of any column (which would force it into the
   stack mode flow in the wrong place). */
.site {
  position: relative;
}

.site-title {
  position: absolute;
  top: var(--col-padding);
  left: var(--col-padding);
  margin: 0;
  z-index: 2;
}

/* In desktop the About column scrolls independently while the absolute
   <h1> sits over its top-left corner. Without a background, scrolled
   content shows through behind the title text. The h1 spans the full
   About column width with an opaque background — extended down to the
   y-position of the first <hr> inside the column.
   Math: `padding-top: 1rem` (col-padding) + `1.25rem` (h1 line-height)
   + `padding-bottom: 1.5rem` (var(--space-lg)) = 3.75rem total. That
   matches the column's reserved padding-top (2.25rem) + the .about-
   leading-rule's natural margin-top (1.5rem) = 3.75rem, so the bg
   covers exactly up to the divider with no gap.
   The `- 1px` on width preserves the column's border-right visibility
   from y=0. */
@media (min-width: 1024px) {
  .site-title {
    top: 0;
    left: 0;
    width: calc(25% - 1px);
    padding: var(--col-padding) var(--col-padding) var(--space-lg);
    background: var(--color-bg);
  }
}

/* Mirror of the "h2 → <hr> → content" pattern that Projects and CV use
   inherently. About doesn't need this divider on desktop (the absolute
   <h1> + .about-leading-rule already pair PROFILE visually), so it stays
   hidden and only appears in stack mode for parity with MATERIAL/CV. */
.profile-trailing-rule {
  display: none;
}

/* Fixed header + dropdown nav exist only in stack mode (≤1023px) — hide
   them entirely on desktop so they don't reserve layout space or steal
   focus. responsive.css flips both on at the breakpoint. */
.site-header-fixed,
.site-nav-mobile {
  display: none;
}

.site-columns {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;   /* 25 / 50 / 25 — measured from K384 reference */
  gap: 0;
  height: 100vh;
  height: 100dvh;
}

.column {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--col-padding);
  height: 100vh;
  height: 100dvh;

  /* "Always reserve, transparent colors" scrollbar pattern: the 6px
     gutter is always present (no layout shift on hover, no `display`
     toggle that some Chromium builds render inconsistently), but the
     thumb is transparent until the user hovers the column. Cross-
     browser consistent. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

/* Reserve top space in the About column for the absolutely-positioned site
   title. Extra = exactly one h1 line-height (0.95rem × 1.3 ≈ 1.235rem,
   rounded to 1.25rem) so the first <hr> lands at the same y-position the
   K384 reference draws — and the same y-position the Projects/CV columns
   draw their first <hr> via the column heading + sibling-margin chain.
   `scroll-padding-top` mirrors the same value so anchor scrolls inside
   the About column don't park content under the absolute <h1>. */
.column--about {
  padding-top: calc(var(--col-padding) + 1.25rem);
  scroll-padding-top: calc(var(--col-padding) + 1.25rem);
}

/* Webkit/Chromium counterpart to scrollbar-width/scrollbar-color: keep
   the 6px track always (no display toggle), with both thumb and track
   transparent in default state. Hover reveals the thumb. */
.column::-webkit-scrollbar {
  width: 6px;
}
.column::-webkit-scrollbar-track {
  background: transparent;
}
.column::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}

/* Hover colors bumped one step up the opacity scale (faint→muted,
   muted→tertiary). At 25% black on warm off-white the thumb was barely
   discernible; 40% reads as a clearly-but-subtly visible UI element,
   60% gives strong feedback when the pointer is on the thumb itself. */
.column:hover {
  scrollbar-color: var(--color-text-muted) transparent;
}
.column:hover::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
}
.column:hover::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* Vertical dividers between columns (decision in lieu of the K384 overlay
   "vertical-lines" element). */
.column:not(:last-child) {
  border-right: var(--col-divider);
}

/* Account for the WordPress admin bar (logged-in users). WP injects
   `html { margin-top: 32px !important }` (or 46px below 782px), which
   shifts our fixed-height columns past the viewport bottom and clips the
   tail of each column. Subtract that height so the columns fit again.
   Targets .site-columns now that .site is just a positional wrapper. */
body.admin-bar .site-columns,
body.admin-bar .column {
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}

@media (max-width: 782px) {
  body.admin-bar .site-columns,
  body.admin-bar .column {
    height: calc(100vh - 46px);
    height: calc(100dvh - 46px);
  }
}