/* ============================================================
   base.css — global resets, design tokens, typography, menu
   Shared by index.html and projects.html
   ============================================================ */

/* ── Google Fonts ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700&display=swap');

/*
 * Bebas Neue  → display / headings (condensed uppercase, architectural)
 * Outfit      → body / UI copy (clean, contemporary, readable at small sizes)
 */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Palette */
  --clr-bg:           #080606;
  --clr-bg-mid:       #0f0b0b;
  --clr-surface:      rgba(255, 255, 255, 0.04);
  --clr-surface-hover:rgba(255, 255, 255, 0.07);
  --clr-border:       rgba(255, 255, 255, 0.08);
  --clr-border-hover: rgba(255, 255, 255, 0.20);
  --clr-glow:         rgba(120, 20, 10, 0.55);   /* warm dark-red ambient */

  --clr-text-primary:   #f2ede8;
  --clr-text-secondary: #9e9590;
  --clr-text-muted:     #5c5654;
  --clr-accent:         #c0392b;                 /* deep crimson accent   */

  /* Typography */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'Outfit', 'Helvetica Neue', sans-serif;

  /* Transitions */
  --t-fast:   150ms ease;
  --t-base:   220ms ease;
  --t-slow:   350ms cubic-bezier(0.33, 1, 0.68, 1);

  /* Layout */
  --header-h: 72px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:             16px;
  -webkit-font-smoothing: antialiased;
  text-rendering:        optimizeLegibility;
  scroll-behavior:       smooth;
}

body {
  font-family:     var(--font-body);
  font-weight:     400;
  background:      var(--clr-bg);
  color:           var(--clr-text-primary);
  min-height:      100dvh;
  overflow-x:      hidden;
  line-height:     1.6;
}

img {
  display:   block;
  max-width: 100%;
}

a {
  color:           inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ── Logo / wordmark ────────────────────────────────────────── */
.logo {
  font-family:    var(--font-display);
  font-size:      clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight:    400;               /* Bebas Neue has a single weight */
  letter-spacing: 0.08em;
  color:          var(--clr-text-primary);
  line-height:    1;
  text-transform: uppercase;
}

/* ── Hamburger toggle ───────────────────────────────────────── */
.toggle {
  position:   relative;
  width:       28px;
  height:      20px;
  cursor:      pointer;
  flex-shrink: 0;
}

.toggle::before,
.toggle::after,
.toggle span {           /* span injected by JS if needed; use pseudo only */
  content:          '';
  position:         absolute;
  left:             0;
  width:            100%;
  height:           2px;
  background:       var(--clr-text-primary);
  border-radius:    2px;
  transition:       transform var(--t-slow), opacity var(--t-base), top var(--t-base);
}

/* Three-bar hamburger via pseudo-elements only */
.toggle::before { top: 0;    }
.toggle::after  { top: 18px; }

/* Middle bar — rendered as a box-shadow trick to avoid extra HTML */
.toggle {
  /* middle bar */
  box-shadow: none; /* reset */
}
/* We'll draw the middle bar using a real element approach:
   JS adds .active; we animate all three bars via CSS class */

/* Simple three-line hamburger using border trick */
.toggle {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  padding:         1px 0;
}

/* Overwrite pseudo approach — use three child divs generated in JS,
   OR style the toggle element itself with border lines */

/* Clean approach: style .toggle as three stacked lines via
   background + linear-gradient */
.toggle {
  background:
    linear-gradient(var(--clr-text-primary), var(--clr-text-primary)) top    / 100% 2px no-repeat,
    linear-gradient(var(--clr-text-primary), var(--clr-text-primary)) center / 100% 2px no-repeat,
    linear-gradient(var(--clr-text-primary), var(--clr-text-primary)) bottom  / 100% 2px no-repeat;
  transition: background var(--t-base), opacity var(--t-base);
}

.toggle.active {
  /* X state — hide middle, rotate top and bottom */
  background:
    linear-gradient(var(--clr-text-primary), var(--clr-text-primary)) center / 100% 2px no-repeat,
    linear-gradient(var(--clr-text-primary), var(--clr-text-primary)) center / 100% 2px no-repeat;
  /* Simple: just change opacity on active, let menu open speak for itself */
  opacity: 0.65;
}

/* ── Menu drawer ────────────────────────────────────────────── */
.menu {
  position:   fixed;
  top:        0;
  right:      -280px;
  width:      280px;
  height:     100dvh;
  background: rgba(10, 6, 6, 0.96);
  backdrop-filter: blur(24px) saturate(120%);
  border-left: 1px solid var(--clr-border);
  z-index:    1000;
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: right var(--t-slow);
}

.showcase.active ~ .menu {
  right: 0;
}

.menu ul {
  display:        flex;
  flex-direction: column;
  gap:            2rem;
  text-align:     center;
}

.menu ul li a {
  font-family:    var(--font-display);
  font-size:      2.2rem;
  letter-spacing: 0.12em;
  color:          var(--clr-text-primary);
  text-transform: uppercase;
  transition:     color var(--t-base), letter-spacing var(--t-base);
}

.menu ul li a:hover {
  color:          var(--clr-accent);
  letter-spacing: 0.18em;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

/* ── Selection ──────────────────────────────────────────────── */
::selection {
  background: var(--clr-accent);
  color:      #fff;
}

/* ── Focus visible ──────────────────────────────────────────── */
:focus-visible {
  outline:        2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
}

/* ── Utility ────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}