/* src/styles/layout.css */
/* =========================================================
   Layout + component styling (token-driven, static-first)
   Uses unified semantic spacing tokens from semantics.css:
   - --space-page-inline
   - --space-stack-*
   - --space-inset-*
   - --space-grid-*
   - --space-hero-gap (single allowed exception)
   ========================================================= */

/* -----------------------------
   Page wrapper
------------------------------ */
.page {
  width: 100%;
  margin: 0;
}

/* -----------------------------
   Navbar
------------------------------ */
.site-header {
  background: transparent;
  border-bottom: var(--border-default);
}

.navbar {
  height: var(--spacing-96);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  /* Unified spacing usage */
  padding-inline: var(--space-page-inline);
}

/* left */
.navbar__brand {
  justify-self: start;
  margin: 0;

  /* (Unchanged) */
  /* If you want this to match Figma exactly, we need the Figma inspect for navbar brand. */
  font-family: var(--type-h3-font-family);
  font-size: var(--type-h3-font-size);
  line-height: var(--type-h3-line-height);
  letter-spacing: var(--type-h3-letter-spacing);
  font-weight: var(--type-h3-font-weight);
  text-decoration: var(--type-h3-text-decoration);
  color: var(--text-default);
}

/* If brand is a link, prevent default link styling from fighting the brand style */
.navbar__brand a {
  color: inherit;
  text-decoration: none;
}

/* center trigger (match your HTML: navbar__menu-button) */
.navbar__menu-button,
.navbar__menu {
  justify-self: center;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--icon-default);
  cursor: pointer;
}

/* right */
.navbar__controls {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-stack-1);
}

/* Inline links are not used in this design; overlay owns nav. */
.navbar__nav {
  display: none;
}

.navbar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Theme switcher (4 dots) */
.navbar__theme-switcher {
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
}

.theme-btn {
  width: var(--spacing-24);
  height: var(--spacing-24);
  border-radius: var(--radius-999);
  border: var(--border-width-2) solid var(--color-ink-950);
  padding: 0;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: none;
  transition:
    transform 120ms ease,
    background-color 160ms ease,
    outline-color 160ms ease,
    border-color 160ms ease;
}

/* Inactive states: Fill with identity color */
.theme-btn[data-theme="light"] { background: var(--theme-id-light); }
.theme-btn[data-theme="yellow"] { background: var(--theme-id-yellow); }
.theme-btn[data-theme="orange"] { background: var(--theme-id-orange); }
.theme-btn[data-theme="dark"] { 
  background: var(--theme-id-dark); 
  border-color: var(--color-ink-950); /* Fixed border color for dark btn visibility */
}

/* Active state: Reveal white canvas */
.theme-btn[aria-pressed="true"],
.theme-btn.is-active {
  background: var(--surface-canvas-neutral-white);
  border-color: var(--border-default);
  transform: scale(1.05);
}

/* Specific border for dark button when active in dark theme */
:root[data-theme="dark"] .theme-btn[aria-pressed="true"],
:root[data-theme="dark"] .theme-btn.is-active {
  border-color: var(--color-ink-50);
}

/* -----------------------------
   Menu overlay (BEM)
------------------------------ */
.menu-overlay {
  display: none; /* hidden until opened */
}

.menu-overlay.is-open,
.menu-overlay[aria-hidden="false"] {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--surface-overlay);
  color: var(--text-inverse);
  align-items: center;
  justify-content: center;

  /* Unified spacing usage */
  padding: var(--space-page-inline);
}

.menu-overlay__close {
  position: absolute;
  top: var(--space-inset-1);
  right: var(--space-inset-1);
  width: 42px;
  height: 42px;
  background: transparent;
  border: 0;
  color: var(--icon-inverse);
  cursor: pointer;
}

.menu-overlay__close::before {
  content: "×";
  display: block;
  font-size: 2rem;
  line-height: 1;
}

.menu-overlay__nav {
  display: block;
}

.menu-overlay__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;

  /* Unified spacing usage */
  gap: var(--space-stack-3);

  align-items: center;
}

.menu-overlay__item {
  margin: 0;
}

.menu-overlay__link {
  color: var(--text-inverse);
  text-decoration: var(--text-decoration-none);

  /* Figma: typography/Display/lg */
  font-family: var(--type-display-lg-font-family);
  font-size: var(--type-display-lg-font-size);
  line-height: var(--type-display-lg-line-height);
  letter-spacing: var(--type-display-lg-letter-spacing);
  font-weight: var(--type-display-lg-font-weight);
}

/* -----------------------------
   Hero
   - Keep one-line name except on mobile
   - Uses Display/2xl tokens from semantics.css
------------------------------ */
.hero {
  width: 100%;
  border-bottom: var(--border-default);

  /* Unified spacing usage */
  padding-block: clamp(var(--space-stack-4), 8vh, var(--space-stack-6));
}

.hero__inner {
  padding-inline: var(--space-page-inline);
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  /* One allowed exception token */
  gap: var(--space-hero-gap);
}

.hero__title {
  margin: 0;
  width: 100%;
  white-space: nowrap; /* desktop/tablet: keep one line */

  font-family: var(--type-display-2xl-font-family);
  font-weight: var(--type-display-2xl-font-weight);
  line-height: 1.333;
  letter-spacing: var(--type-display-2xl-letter-spacing);
  text-decoration: var(--type-display-2xl-text-decoration);

  /* Responsive fill within inset space (behavior-only) */
  font-size: clamp(3.5rem, 14vw, var(--type-display-2xl-font-size));
}

.hero__lead {
  margin: 0;
  max-width: 52rem;

  /* Figma: typography/Heading/h2 */
  font-family: var(--type-h2-font-family);
  font-size: var(--type-h2-font-size);
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--type-h2-letter-spacing);
  font-weight: var(--type-h2-font-weight);
  text-decoration: var(--type-h2-text-decoration);
}

/* Mobile: allow wrapping for the name */
@media (max-width: 640px) {
  .hero__inner {
    gap: clamp(var(--space-stack-2), 6vh, var(--space-stack-5));
  }

  .hero__title {
    white-space: normal;
    overflow: visible;
    font-size: clamp(3rem, 12vw, var(--type-display-2xl-font-size));
  }
}

/* -----------------------------
   Title blocks (e.g., "What I Do", "Selected Work")
   Contract: Heading/h1
------------------------------ */
.section-title {
  width: 100%;
  border-bottom: var(--border-default);

  /* Unified spacing usage */
  padding-inline: var(--space-page-inline);
  padding-block: var(--space-inset-2);

  /* Figma: typography/Heading/h1 */
  font-family: var(--type-h1-font-family);
  font-size: var(--type-h1-font-size);
  line-height: var(--type-h1-line-height);
  letter-spacing: var(--type-h1-letter-spacing);
  font-weight: var(--type-h1-font-weight);
  text-decoration: var(--type-h1-text-decoration);
}

/* -----------------------------
   Skills list
   Contract:
   - Title: Heading/h4
   - Description: Heading/h4
------------------------------ */
.skills-card {
  width: 100%;
  border-bottom: var(--border-default);

  /* Unified spacing usage */
  padding-inline: var(--space-page-inline);
  padding-block: var(--space-stack-6);
}

.skills-card__heading,
.skills-card__title {
  margin: 0 0 var(--space-stack-1) 0;

  /* Figma: typography/Heading/h1 */
  font-family: var(--type-h1-font-family);
  font-size: var(--type-h1-font-size);
  line-height: var(--type-h1-line-height);
  letter-spacing: var(--type-h1-letter-spacing);
  font-weight: var(--type-h1-font-weight);
  text-decoration: var(--type-h1-text-decoration);
}

.skills-card__body {
  margin: 0;
  max-width: 52rem;

  /* Contract: Heading/h4 */
  font-family: var(--type-h4-font-family);
  font-size: var(--type-h4-font-size);
  line-height: var(--type-h4-line-height);
  letter-spacing: var(--type-h4-letter-spacing);
  font-weight: var(--type-h4-font-weight);
  text-decoration: var(--type-h4-text-decoration);
}

/* -----------------------------
   Case studies grid
   Contract:
   - Card title: Heading/h2
   - Card body: Heading/h4
------------------------------ */
.case-studies-grid,
.case-studies__grid {
  display: grid;
  grid-template-columns: 1fr;
  
  /* Figma: No gap, borders form the grid lines */
  gap: 0;
  
  /* Unified spacing usage */
  padding-inline: var(--space-page-inline);
}

@media (min-width: 900px) {
  .case-studies-grid,
  .case-studies__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.case-study-card {
  border: var(--border-default);
  /* Prevent double borders when stacked */
  margin-top: calc(var(--border-width-4) * -1);
  margin-left: calc(var(--border-width-4) * -1);

  /* Unified spacing usage: 96px inline, 64px block */
  padding-inline: var(--space-inset-4);
  padding-block: var(--space-inset-3);

  background: transparent;
  text-decoration: none;
  color: inherit;
}

.case-study-card__title {
  margin: 0 0 var(--space-stack-2) 0;

  /* Figma: typography/Heading/h2 */
  font-family: var(--type-h2-font-family);
  font-size: var(--type-h2-font-size);
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--type-h2-letter-spacing);
  font-weight: var(--type-h2-font-weight);
  text-decoration: var(--type-h2-text-decoration);
}

.case-study-card__body {
  margin: 0;

  /* Figma: typography/Heading/h4 */
  font-family: var(--type-h4-font-family);
  font-size: var(--type-h4-font-size);
  line-height: var(--type-h4-line-height);
  letter-spacing: var(--type-h4-letter-spacing);
  font-weight: var(--type-h4-font-weight);
  text-decoration: var(--type-h4-text-decoration);
}

/* -----------------------------
   Footer
------------------------------ */
.site-footer {
  width: 100%;
  border-top: var(--border-default);
  
  /* Collapse top border with preceding content to prevent 8px double line */
  margin-top: calc(var(--border-width-4) * -1);

  /* Unified spacing usage: 160px inline, 48px block */
  padding-inline: var(--spacing-160);
  padding-block: var(--space-inset-2);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-stack-2);

  /* Figma: Typography/Heading/h4 (Inter Tight, 28px) applied to container */
  font-family: var(--type-h4-font-family);
  font-size: var(--type-h4-font-size);
  line-height: var(--type-h4-line-height);
  letter-spacing: var(--type-h4-letter-spacing);
  font-weight: var(--type-h4-font-weight);
  text-decoration: var(--type-h4-text-decoration);
}

.site-footer__links {
  display: flex;
  gap: var(--space-grid-3); /* 48px */
  align-items: center;
}

.site-footer__link {
  color: inherit;
  text-decoration: none;
}