/*
 * surrealism.css — Amanda Morgan Portfolio: Surrealism Style
 * Standalone dark theme stylesheet. Enqueued on the Surrealism front page template.
 */

@font-face {
  font-family: 'King Basil Lite';
  src: url('assets/fonts/King-Basil-Lite.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ─── Surrealism color vars mapped to Figma semantic tokens ──────────────── */
/* Surface and text vars alias tokens.css semantics so light/dark mode works. */
/* Transparency overlays flip per mode since they sit on top of the surface.  */
:root {
  /* Surfaces — alias semantic tokens */
  --void:     var(--color-surface-page);
  --deep:     var(--color-surface-primary);
  --surface:  var(--color-surface-secondary);
  --surface-2:var(--color-surface-tertiary);

  /* Text — alias semantic tokens */
  --pale:     var(--color-text-primary);
  --ink:      var(--color-text-primary);
  --ink-muted:var(--color-text-secondary);

  /* Accent — alias semantic tokens */
  --accent:     var(--color-accent);
  --accent-dim: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --gold:       var(--color-accent-text);
  --gold-dim:   color-mix(in srgb, var(--color-accent-text) 30%, transparent);
  --glow:       color-mix(in srgb, var(--color-accent) 15%, transparent);

  /* Light-mode transparency overlays (dark tint on light surface) */
  --pale-dim:   rgba(15,11,18,0.6);
  --pale-ghost: rgba(15,11,18,0.08);
  --ink-ghost:  rgba(15,11,18,0.1);

  /* Fonts */
  --mono:  'DM Mono', monospace;
  --serif: 'Instrument Serif', serif;
  --sans:  'Outfit', sans-serif;
}

/* Dark-mode transparency overlays (light tint on dark surface) */
@media (prefers-color-scheme: dark) {
  :root {
    --pale-dim:   rgba(237,232,223,0.6);
    --pale-ghost: rgba(237,232,223,0.08);
    --ink-ghost:  rgba(237,232,223,0.1);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body-default-size);
  font-weight: 300 !important; /* Outfit Light — overrides TT5 theme.json inline weight */
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient noise grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}


/* ─── SUPPRESS PARENT THEME (Twenty Twenty-Five) HEADER BLOCKS ──────────── */
/* Hide any block-rendered site title, logo, or navigation that Twenty        */
/* Twenty-Five injects outside our PHP template nav.                          */
.wp-site-blocks > header,
.wp-block-template-part[class*="header"],
.site-header,
body > header:not(nav) {
  display: none !important;
}


/* ─── WORK SECTION ───────────────────────────────────────────────────────── */
/* Figma (103:902): the traditional .page-hero is gone — Featured Work now sits in
   its place as the first thing on the page. Figma's own "Featured Work" frame
   padding is a symmetric 16px top/bottom (literal) + a responsive
   --padding-container-horizontal-2 left/right (4/8/12/24/24) for the carousel edge
   space; fill is Color/Surface/Primary. The nav-clearance offset is NOT part of
   this frame's own padding in Figma — it's the root frame's itemSpacing:16 (the
   gap between nav, Body, and Footer) plus nav's own real height. Since nav is
   position:fixed here (out of flow, so it can't produce a real flex/gap space),
   that's reconstructed as margin-top: var(--nav-height) + 16px instead. Was
   previously a single hardcoded 79px baked into padding-top — approximated from a
   stale "nav height 71px + gap 8px" comment that no longer matched either the real
   current nav height (--nav-height, itself responsive: 81/73/69) or the real gap
   (16, not 8), and conflated the clearance with the frame's own padding besides. */
/* max-width/margin(-right/bottom/left) explicitly zeroed — components.css's generic
   `section { max-width: var(--container); margin: 0 auto; }` rule only had its
   padding actually contested by .work-section's own class (class beats the bare
   type selector), so margin/max-width fell through uncontested, capping and
   centering the section instead of letting it fill full width. Same leak pattern
   already documented/fixed for .cs-more-studies. */
.work-section {
  padding: var(--size-16) var(--padding-container-horizontal-2);
  margin: calc(var(--nav-height) + 16px) 0 0;
  background: var(--color-surface-primary);
  max-width: none;
}

/* .work-section-label ("Case Studies" overline) removed — Figma's Header frame
   for Featured Work is now hidden (540:14997), so this text no longer shows. */

/* ─── Work grid ──────────────────────────────────────────────────────────── */
/* Horizontal scroll carousel. Left edge keeps the normal inset from
   .work-section's own left padding (Padding/Container Horizontal Padding,
   --padding-container-horizontal-2) — the site is left-aligned throughout, so the
   carousel's start position shouldn't move. Only the right side breaks out (negative
   right margin matching the section's own right padding exactly, plus a matching
   padding-right on .work-grid to preserve the trailing inset when not scrolled) so
   cards can bleed all the way to the actual viewport edge as the user scrolls,
   instead of being clipped early by the section's own right padding acting as an
   unintended second boundary on top of the real one (the viewport, via body's
   overflow-x:hidden). */
.work-grid {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-right: calc(-1 * var(--padding-container-horizontal-2));
  padding-right: var(--padding-container-horizontal-2);
}
.work-grid::-webkit-scrollbar { display: none; }

/* .work-dots/.work-dot/.work-dot--active moved to components.css — dots are now a
   single global component shared with the case-study "More Case Studies" carousel
   instead of duplicated per-template (the old copy here also had a stale inactive-dot
   color, --color-info-text instead of Figma's current --color-accent-subtle). */

/* Card width in scroll context — Figma's BaseModule=Feature 1 minWidth is 264px
   (was hardcoded 300px here, stale — matches case-study.css's More Case Studies
   carousel, which uses the same underlying component). */
.work-grid .base-module {
  flex-shrink: 0;
  width: var(--size-264);
  scroll-snap-align: start;
}


/* ─── CONTACT ────────────────────────────────────────────────────────────── */
.contact-section {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-section) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.contact-orb {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,79,46,0.07) 0%, transparent 60%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(60px);
}
.contact-kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.contact-big {
  font-family: var(--serif);
  font-size: clamp(48px, 8vw, 110px);
  color: var(--pale);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-style: italic;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.contact-sub {
  font-family: var(--serif);
  font-size: clamp(48px, 8vw, 110px);
  color: var(--accent);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-style: italic;
  margin-bottom: 48px;
  position: relative;
  z-index: 2;
}
.contact-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.contact-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 12px 28px;
  border: 1px solid var(--ink-ghost);
  color: var(--ink-muted);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  border-radius: 100px;
}
.contact-link:hover { border-color: rgba(237,232,223,0.3); color: var(--pale); }
.contact-link.primary { background: var(--pale); border-color: var(--pale); color: var(--void); }
.contact-link.primary:hover { opacity: 0.9; }


/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--ink-ghost);
  padding: 24px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer p {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}


/* The old .body-shape-section (decorative diamond between work grid and footer) is
   gone from Figma's 103:902 tree entirely — removed here and from front-page.php. */


/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
/* max-width breakpoints mirror the Figma Responsive collection thresholds:
   1439px = below lg (< 1440px), 1023px = below md (< 1024px / sm) */
/* .base-module--span-2/3/tall and --default-right/--default-left responsive
   overrides moved to components.css (2026-09-11 cleanup) — they modify BaseModule
   component-set selectors, which live there now. The old
   .base-module--feature-1 .base-module__image { aspect-ratio: 16/10 } override
   at this breakpoint was removed outright, not moved — it conflicts with the
   component's current min/max-height:147/148 sizing approach and with Figma's own
   explicit sm-pin on this component (nothing about it should change per viewport
   width in the first place). */
@media (max-width: 1439px) {
  footer { padding: 20px var(--gutter); flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 1023px) {
  .contact-section { padding: 72px var(--gutter); }
  footer { padding: 16px var(--gutter); }
}