/* ---------------- page dim overlay (nav hover) ----------------
   Legacy behavior: hovering a centerwell tile subtly dims the rest of the page.
   Implemented as an overlay pseudo-element so it cannot affect layout.
   Uses :has() where supported, with a JS class fallback (see JS/script.js).
*/

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(24, 27, 31, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  z-index: 10;
}

/* Prefer CSS-only when available */
body:has(.cw-btn:hover)::before,
body:has(.cw-btn:focus-visible)::before {
  opacity: 1;
}

/* Fallback for browsers without :has() */
body.is-dimmed::before {
  opacity: 1;
}

/* Keep header + centerwell above the overlay */
.header,
.centerwell {
  position: relative;
  z-index: 11;
}

.container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 2fr 0.5fr 2fr 1fr;
  grid-template-rows: 110px 177px 1fr 90px;
  grid-template-areas:
    "header header header header header"
    "centerwell centerwell centerwell centerwell centerwell"
    "lgutter primary primary secondary rgutter"
    "footer footer footer footer footer";
}

/* ---------------- centerwell ---------------- */

.centerwell {
  grid-area: centerwell;
  background: #3d464e;
  display: grid;
  grid-template-columns: 1fr 2fr 0.5fr 2fr 1fr;
  height: 100%;
}

.cw-nav {
  grid-column: 2 / 5;
  height: 100%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.cw-btn {
  height: 100%;
  flex: 1 1 0;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  border-right: 1px solid #2f3740;
  user-select: none;
  color: #657381;
  text-decoration: none;
  letter-spacing: 1px;
  line-height: 1;

  transition:
    flex-grow 1000ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 1000ms ease,
    color 1000ms ease;
}

.cw-btn.is-active {
  background: #3d464e;
  color: #181b1f;
}

/* hover/focus after .is-active so it wins on the active tile (equal
   specificity, later rule) — otherwise hovering the current tab stays grey. */
.cw-btn:hover,
.cw-btn:focus-visible {
  flex-grow: 3;
  background: #32CD32;
  color: #181b1f;
  outline: none;
}

.cw-btn:first-child {
  border-left: 1px solid #2f3740;
}

/* ---------------- view switching ----------------
   JS-driven (JS/nav.js sets body[data-view]), not CSS :target/:has() — nav
   clicks preventDefault() so the URL/hash never changes. Deliberate
   trade-off: no more deep-linking to a section via URL, and browser
   back/forward no longer navigates between sections.

   Every view/sideview is only shown when its own [data-view="key"] matches —
   fully exclusive, nothing defaults to visible-unless-hidden — so this can't
   regress into the old "unconditional display beats the default" bug where
   skills leaked onto every page.

   index.html's <body> ships with data-view="home" baked in (not just set by
   JS/nav.js on init) — without it, everything here is display:none until JS
   finishes running, so ANY script failure/slow-load earlier in the defer
   chain blanks the whole page instead of degrading to showing home, which
   is what the old :target CSS did for free with zero JS dependency. */

.view,
.sideview {
  display: none;
}

.sideview.side-job {
  /* layout-only; visibility is decided below by [data-view]. */
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

body[data-view="home"] .view-home,
body[data-view="job"] .view-job,
body[data-view="projects"] .view-projects,
body[data-view="writeups"] .view-writeups {
  display: block;
}

body[data-view="home"] .side-home {
  display: block;
}
body[data-view="job"] .side-job {
  display: flex;
}
body[data-view="projects"] .side-projects {
  display: block;
}
body[data-view="writeups"] .side-writeups {
  display: block;
}