/* Global NIPC site header — styling source of truth.
   Loaded by /home (the homepage) AND every other page that embeds the
   shared header via /lib/site-header.js. Both pages render identical
   markup from /lib/site-header.html, so identical CSS rules in here
   guarantee identical visual output.

   Edits to header layout/typography belong here, not in any page's
   inline <style>. The rules below were extracted verbatim from the
   pre-extraction inline block in home/index.html. */

/* Theme tokens. Mirrors the body.theme-light block in home/index.html's
   first-paint <style> AND the .body class block in nipc.webflow.css.
   Scoping the tokens to `body` (not `.body`) means any page can wire the
   header into a body without inheriting `.body`'s background — only
   /home opts into that by shipping class="body theme-light" in markup.
   The dark-mode token values mirror nipc.webflow.css's .body class so
   the two themes match across pages. */
body.theme-light {
  --surface-base: #f3f0ed;
  --surface-elevated: #e9e6e2;
  --text-primary: #282424;
  --text-secondary: #786d6d;
  --text-accent: #dc2828;
  --nipc-logo: #dc2828;
  --border-subtle: #d1ccc7;
  --border-bg-subtle: rgba(209, 204, 199, 0.5);
}
body:not(.theme-light) {
  --surface-base: #181818;
  --surface-elevated: #0d0d0d;
  --text-primary: #d9d9d9;
  --text-secondary: #737373;
  --text-accent: #dc2828;
  --nipc-logo: white;
  --border-subtle: #2e2e2e;
  --border-bg-subtle: rgba(46, 46, 46, 0.5);
}

/* Theme toggle. The toggle's CELL (in .divrelative-2 below) is a 1×1 square.
   This rule shapes the slide TRACK so it occupies just the bottom 25% strip
   of that square — a 4:1 horizontal rectangle. The .switch-button "puck"
   then slides left↔right inside that strip (sun on the left = light mode,
   moon on the right = dark mode). The puck is itself a square (aspect-ratio
   1:1) sized to the strip's height, so on a 110×110 cell the strip is
   110×~28 and the puck is ~28×28 sliding ~82 px between the two endpoints
   (puck width = 25% of track width, so translateX(300%) reaches the right
   edge: 3 puck-widths × 25% = 75% of track = end-to-end minus puck width). */
.switch.align-center {
  width: 100%;
  height: 25%;
  border: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
  background: transparent;
  font: inherit;
  color: inherit;
  overflow: hidden;
  display: block;
}
.switch .switch-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  background-color: var(--text-accent, #dc2828);
  transform: translateX(0);
}
/* Puck position derived from body.theme-light (set synchronously at top of
   <body> from localStorage) rather than from .is-on on the button, which the
   theme-init script at the bottom of body doesn't add until after first
   paint. Body class is in place before the toggle is rendered, so the puck
   sits in the correct position from frame 1. */
body:not(.theme-light) .switch .switch-button {
  transform: translateX(300%);
}
.switch .theme-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  color: #fff;
  opacity: 0;
  transform: rotate(-30deg) scale(0.85);
}
body.theme-light .switch .theme-icon-sun,
body:not(.theme-light) .switch .theme-icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
/* Transitions only activate after the page is armed (body.dropdowns-armed
   added by the theme init after the first frame). Until then, puck and icons
   snap to their final position with no animation on initial load. */
body.dropdowns-armed .switch .switch-button {
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.dropdowns-armed .switch .theme-icon {
  transition: opacity 220ms ease, transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  body.dropdowns-armed .switch .switch-button,
  body.dropdowns-armed .switch .theme-icon { transition: none; }
}

/* Column dividers in the header grid are rendered as right-borders on each
   column child. The Webflow export sets align-items:flex-start on the row +
   height:100% on the child — but with the row's height being auto, those
   children resolve to their content height, leaving the dividers visibly
   short. Stretch every column to fill its row so the dividers run the full
   height. */
.divrelative-2 > .divgrid,
.divrelative-2 > .divgrid-3 {
  align-items: stretch;
}
/* Webflow defaults .divgrid-3 to justify-content:center. The row's cells used
   to total 100% so centering was a no-op; with the EDITORS COLLECTIVE cell
   removed, the row totals 83.33% and centering pushes the wordmark cell off
   the left edge. Pin to flex-start so the wordmark stays flush-left. */
.divrelative-2 > .divgrid-3 {
  justify-content: flex-start;
}
/* Reclaim the 16.67% gap left by removing the EDITORS COLLECTIVE cell by
   doubling the wordmark cell's width. The row now totals 100% again
   (wordmark 33.33% + UPCOMING EVENTS 33.33% + reels 33.33%). Scoped to
   ≥992px since the responsive layout below that uses different widths. */
@media (min-width: 992px) {
  .divrelative-2 > .divgrid-3 > .divcol-span-2-3 {
    width: 33.3333%;
  }
}
.divrelative-2 > .divgrid > *:not(._w-switch),
.divrelative-2 > .divgrid-3 > * {
  align-self: stretch;
  height: auto;
}
/* Drop the right border on the top-row POST-PRODUCTION / STUDIO cell so the
   first vertical divider after that cell disappears. .divcol-span-4 is shared
   with other rows; scoping to .divrelative-2 > .divgrid keeps the change to
   just the top header row. */
.divrelative-2 > .divgrid > .divcol-span-4 {
  border-right: 0;
}
/* Top-left label stays "POST-PRODUCTION STUDIO" at every breakpoint. The
   cell flex-grows (see the @media (min-width:992px) block below) so the
   string always has room without wrapping. */
.divrelative-2 > .divgrid > .divcol-span-4 .home-label-long {
  white-space: nowrap;
}
/* CLIENT LOGIN cell — sized to fit content (link + its padding) so the top
   header row shrinks to the height of the link rather than a fixed 110px
   square. The toggle now lives in the adjacent middle cell, no longer
   pinning this cell to a square. flex-shrink:0 + min-width:max-content keep
   the cell from being squeezed by a narrow flex row — otherwise the
   `white-space:nowrap` link below would simply overflow/clip when the row
   ran out of space, truncating "CLIENT LOGIN" to "CLIENT". The ≤479px
   override below restores the mobile layout where the cell tracks the
   wordmark's height. */
.divrelative-2 .divcol-span-2-1._w-switch {
  align-self: flex-start;
  margin-top: 0;
  width: auto;
  min-width: max-content;
  height: auto;
  position: relative;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.divrelative-2 .divcol-span-2-1._w-switch > .top-clients-link {
  align-self: flex-start;
  padding: 14px 12px;
  white-space: nowrap;
  line-height: 16px;
  text-align: left;
}
/* Middle cell hosting the theme toggle. Right-align the toggle so it sits
   flush against the CLIENT LOGIN cell border to its right. The cell stretches
   to the full row height so the toggle track fills the row's vertical space.
   Track width is fixed at 160px (4× the row's content height) so the puck —
   which is a 25%-wide square slot translated 300% from the left endpoint —
   lands flush with the track's right edge in dark mode instead of clipping
   past it. */
.divrelative-2 .divcol-span-2-2._theme-toggle-host {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}
.divrelative-2 .divcol-span-2-2._theme-toggle-host > .switch.align-center {
  width: 160px;
  height: 100%;
  flex: 0 0 auto;
  align-self: stretch;
}

/* Top row layout — POST-PRODUCTION STUDIO / theme-toggle / CLIENT LOGIN.
   The label cell flex-grows to fill the entire left side of the row, so
   "POST-PRODUCTION STUDIO" has the full horizontal runway up to the toggle
   instead of being penned into a 16.67% column that forced an early swap to
   the short "STUDIO" label at desktop widths. The toggle cell sizes to its
   160px track. CLIENT LOGIN sizes to its content. There is no visible
   divider between the label cell and the toggle because divcol-span-4
   already has border-right:0 (set above) and divcol-span-2-2 has none of
   its own. */
@media screen and (min-width: 480px) {
  .divrelative-2 > .divgrid > .divcol-span-4 {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
  .divrelative-2 > .divgrid > .divcol-span-2-2 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
}

/* UPCOMING EVENTS cell — Webflow ships .divhidden with align-items:center
   which vertically centers the text in the row. Top-align it so it matches
   the logo and reel-category cells. Also pin justify-content to flex-start
   so the label stays left-aligned at every breakpoint (webflow's media
   queries flip it to flex-end at 991/767px, which made the label jump
   between left/right depending on viewport). The default flex-direction
   (row) only worked when this cell held a single label child — now that
   we stack a gray section label + an events list, switch to column. */
.divrelative-2 .divhidden {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
}
/* Match the right-column reels list spacing (.divgrid-4 ships with
   row-gap 3.5px); the link wrapper inherits the column flow from
   .divgrid-4. */
.divrelative-2 .upcoming-events-list {
  width: 100%;
}

/* Wordmark cell — container-type:inline-size lets the wordmark/acronym
   switch tiers as the cell narrows. The container is the wordmark cell. */
.divrelative-2 > .divgrid-3 > .divcol-span-2-3 {
  container-type: inline-size;
}
.home-logo-mark {
  display: block;
  width: 100%;
  font-family: var(--_nipc_figma_v1---font-family--font-1, "DM Mono", monospace);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.08;
  color: var(--text-accent, #dc2828);
  text-decoration: none;
}
.home-logo-line {
  display: block;
  font-size: 16px;
}
.home-logo-word {
  display: block;
}
.home-logo-acronym {
  display: none;
  width: 80px;
  height: 80px;
  max-width: none;
  object-fit: contain;
}
.home-logo-acronym-text {
  display: none;
  font-family: var(--_nipc_figma_v1---font-family--font-1, "DM Mono", monospace);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.0;
  letter-spacing: 0.5px;
  color: var(--text-accent, #dc2828);
  text-align: center;
}
.home-logo-acronym-line {
  display: block;
}
/* Below 150px content box, "INTERNATIONAL" at 16px (~131px) plus the
   one-character staircase indent (~10px) no longer fits without crowding
   the cell edge. Swap the wordmark for the themed acronym. */
@container (max-width: 150px) {
  .home-logo-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .home-logo-line {
    display: none;
  }
  .home-logo-acronym--light {
    display: block;
  }
}
/* Narrowest tier: at ≤80px content the 80px image acronym is starting to
   overflow its cell. Swap to the 2-line NI / PC text acronym. */
@container (max-width: 80px) {
  .home-logo-acronym {
    display: none;
  }
  .home-logo-acronym--light {
    display: none;
  }
  .home-logo-acronym-text {
    display: block;
  }
  .home-logo-mark {
    height: 100%;
    justify-content: center;
  }
}

/* Top-left logo cell padding. */
[class*="divcol-"]:has(> .home-logo-mark) {
  padding-top: 14px;
  padding-bottom: 5px;
}

/* Mobile-only swap: at ≤479px the wordmark relocates from .divcol-span-2-3
   (where it sits below the hero stats on desktop) into the top-left
   .divcol-span-4 cell, and POST-PRODUCTION / STUDIO swaps the other way.
   The two cells live in different parent grids (.divgrid vs .divgrid-3),
   so CSS `order` can't reorder them; we duplicate both pieces of content
   in markup and toggle visibility instead. */
.home-show-on-mobile { display: none; }
@media (max-width: 479px) {
  .home-hide-on-mobile { display: none !important; }
  .home-show-on-mobile { display: revert; }
}
/* Stacked variant of the wordmark used in the mobile top-left cell. */
.home-logo-mark--stacked .home-logo-line {
  font-size: clamp(13px, 11.8cqi, 22px);
}

/* Mobile (≤479px): place the stacked wordmark and the CLIENT LOGIN / theme
   toggle square in a single row. */
@media (max-width: 479px) {
  .divrelative-2 > .divgrid {
    flex-flow: row nowrap;
    align-items: stretch;
  }
  .divrelative-2 > .divgrid > .divcol-span-4 {
    width: auto;
    height: auto;
    flex: 1 1 0;
    min-width: 0;
    border-right: 1px solid var(--border-subtle);
  }
  .divrelative-2 > .divgrid > .divcol-span-2-2 {
    display: none;
  }
  .divrelative-2 .divcol-span-2-1._w-switch {
    align-self: stretch;
    width: auto;
    height: auto;
    min-width: 0;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    justify-content: space-between;
  }
  .divrelative-2 .divcol-span-2-1._w-switch > .top-clients-link {
    white-space: normal;
  }
  /* Match the bottom padding under the stacked wordmark to the 14px top
     padding above it. The base [class*="divcol-"]:has(> .home-logo-mark)
     rule ships 14px top / 5px bottom — fine on desktop where the
     wordmark cell stretches to the grid row's height, but on mobile the
     cell shrinks to the wordmark's content height and the 5px bottom
     reads as cramped against the row's bottom horizontal divider. */
  [class*="divcol-"]:has(> .home-logo-mark--stacked) {
    padding-bottom: 14px;
  }
  /* Keep the upcoming event link on a single line within the cell, and at the
     SAME 11px size as the reel category links ([F] FILM etc.) so the two
     red-link columns read as one consistent tier on mobile. On mobile the
     label drops "NIPC" but still shows the longer "LAUNCH PARTY — RSVP"
     string; letter-spacing stays tightened (vs the .text-7 base 0.55px) and
     white-space:nowrap holds it to one line so the full string still fits the
     50%-width cell's content box down to a 320px viewport (~127px text in a
     132px box). */
  .divrelative-2 .upcoming-events-list .text-7 {
    font-size: 11px;
    letter-spacing: 0.1px;
    white-space: nowrap;
  }
  /* On mobile, .divgrid-3 wraps and .divcol-span-4-2 (reel categories)
     sits below .divcol-span-2-3 (POST-PRODUCTION / STUDIO) in the left
     column. .divcol-span-2-3's right border ends where its cell ends, so
     the vertical divider between left/right halves stops short of the
     row's bottom horizontal divider. Mirror the same right border on
     .divcol-span-4-2 so the divider continues full-height and visually
     connects both horizontal dividers bounding this header row. */
  .divrelative-2 > .divgrid-3 > .divcol-span-4-2 {
    border-right: 1px solid var(--border-subtle);
    /* Tuck [F] FILM directly beneath POST-PRODUCTION while POST-PRODUCTION
       stays top-aligned with UPCOMING EVENTS. The reels are the left half of
       the SECOND flex-wrap row, so by default they start a full row below —
       and row 1's height is set by the taller right half (UPCOMING EVENTS +
       LAUNCH PARTY — RSVP, two lines ≈ 64px), leaving ~34px of dead space
       under the single-line POST-PRODUCTION. Pulling this row up closes that
       gap to ~2px. The reels (left half) and the events column (right half)
       never overlap horizontally, so lifting only this row keeps both columns
       top-aligned and reads as two parallel label→list pairs. The −34px tracks
       row 1's height minus the POST-PRODUCTION line; the header copy is curated
       and single-line (RSVP link is nowrap), so the value stays stable.
       Trimmed 4px (−34px → −30px) so [F] FILM drops onto the same baseline as
       LAUNCH PARTY — RSVP, matching the gap below UPCOMING EVENTS so the two
       label→list pairs line up row-for-row. */
    margin-top: -30px;
    padding-top: 0;
  }
  /* Mobile: drop the secondary "STUDIO" line beneath POST-PRODUCTION. Only the
     mobile-only stacked label carries it (the desktop "POST-PRODUCTION STUDIO"
     one-liner is a separate node and is untouched). The reel links use the same
     .ptext-2xs-4 wrapper, so this is scoped to the mobile label block. */
  .divrelative-2 > .divgrid-3 > .divcol-span-2-3 .home-show-on-mobile .ptext-2xs-4 {
    display: none;
  }
}

/* Narrowest tier (≤374px, e.g. 320–360px): the upcoming-event link's
   50%-width cell is too tight for "LAUNCH PARTY [DATE TBD]" on one line, so
   the nowrap rule above clips it. Allow it to wrap here — "LAUNCH PARTY" on its
   own line above "[DATE TBD]" — so nothing is truncated. The two halves are
   each held together with their own nowrap span so the break only ever falls
   between the event name and the date, never mid-phrase. 375px+ still fits on
   one line and is unaffected. */
@media (max-width: 374px) {
  .divrelative-2 .upcoming-events-list .text-7 {
    white-space: normal;
  }
  .divrelative-2 .upcoming-events-list .text-7 .event-nowrap {
    white-space: nowrap;
  }
}

/* Category links in the wordmark row — [F] FILM / [C] COMMERCIAL etc.
   Inline-block so the link's hover opacity covers the full row of text. */
a.category-link {
  display: inline-block;
  cursor: pointer;
  transition: opacity 200ms ease;
}
a.category-link:hover { opacity: 0.6; }

.category-disabled {
  color: var(--text-secondary, #786d6d);
  cursor: default;
}

/* CLIENT LOGIN link in the top-right cell. Padding lives on the cell's
   ._w-switch container (above); these properties set the link's typography
   and ensure the browser's default underline is stripped. */
.top-clients-link {
  align-self: center;
  color: var(--text-primary, #1c1919);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.55px;
  line-height: 16px;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 200ms ease;
  white-space: nowrap;
}
.top-clients-link:hover { opacity: 0.6; }

/* Header text uses DM Mono everywhere. The Webflow export ships .text /
   .text-4 / .text-6 / .text-7 (POST-PRODUCTION STUDIO, UPCOMING EVENTS,
   [F] FILM, etc.) WITHOUT a font-family declaration, so they inherit from
   body. webflow.css sets body to Arial, sans-serif; pages that override
   body (e.g. reel.html → "DM Mono") end up rendering these labels in a
   different font than the home page does. Force DM Mono on every header
   text node so the same markup looks identical regardless of how the
   host page styles its body. */
.divrelative-2 .text,
.divrelative-2 .text-4,
.divrelative-2 .text-6,
.divrelative-2 .text-7 {
  font-family: var(--_nipc_figma_v1---font-family--font-1, "DM Mono", monospace);
}

/* Standalone usage. On the homepage the header sits inside a .divsticky
   wrapper that supplies the cream/dark surface background. Pages that
   embed the header via /lib/site-header.js don't have that wrapper, so
   apply the background directly to the .divrelative-2 root when it
   carries the [data-site-header] hook attribute. */
[data-site-header].divrelative-2 {
  background-color: var(--surface-base);
  width: 100%;
}
