/*
 * Nujai Creative website — site-specific additions composing design-system tokens.
 * Only additions here; nav/footer/component primitives live in styles.css + kit.css.
 */

/* ── Nav language switcher ──
   Lives inside .nav-cta (right grid column) before the CTA pill.
   Overrides the .nav-cta a pill styles for its own small links. */
.nav-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4rem;
}
.nav-lang {
  display: flex;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-cta .nav-lang a {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--on-dark) 55%, transparent);
  border: none;
  padding: 0;
  border-radius: 0;
  transition: color 0.2s ease;
}
.nav-cta .nav-lang a:hover {
  background: transparent;
  border-color: transparent;
  color: var(--on-dark);
}
.nav-cta .nav-lang a.current { color: var(--on-dark); }
.nav.scrolled .nav-cta .nav-lang a { color: var(--muted); border: none; }
.nav.scrolled .nav-cta .nav-lang a:hover {
  background: transparent;
  color: var(--ink);
}
.nav.scrolled .nav-cta .nav-lang a.current { color: var(--ink); }

/* ── Mobile nav (hamburger + dropdown panel) ──
   The design-system nav is a fixed 3-column grid with no responsive handling.
   Desktop is untouched: .nav-toggle is hidden and .nav-menu is display:contents,
   so its children (.nav-links, .nav-cta) stay direct grid items (centered links).
   Below the breakpoint the hamburger appears and .nav-menu becomes a dropdown. */
.nav-toggle { display: none; }
.nav-menu { display: contents; }

@media (max-width: 860px) {
  .nav { grid-template-columns: 1fr auto; }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: 0;
    cursor: pointer;
    justify-self: end;
    z-index: 2;
  }
  .nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--on-dark);
    transition: transform 0.25s ease, opacity 0.2s ease, background 0.3s ease;
  }
  .nav.scrolled .nav-toggle-bar { background: var(--ink); }
  /* hamburger morphs into an X when open */
  .nav.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* .nav-menu: closed by default, drops down below the bar when .nav.open */
  .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-card, 0 10px 28px rgba(26, 26, 26, 0.12));
    padding: 1.75rem 2rem 2.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }
  .nav.open .nav-menu { opacity: 1; visibility: visible; transform: none; }

  /* when open, force the bar solid + dark ink so it reads over any hero */
  .nav.open { background: var(--bg); }
  .nav.open .nav-logo { color: var(--ink); }
  .nav.open .nav-toggle-bar { background: var(--ink); }

  .nav-menu .nav-links {
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
  }
  .nav-menu .nav-links a,
  .nav-menu .nav-links a.active { color: var(--ink); font-size: 1.05rem; }
  .nav-menu .nav-links a::after { display: none; }

  .nav-menu .nav-cta {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.1rem;
    width: 100%;
  }
  .nav-menu .nav-cta > a {
    text-align: center;
    color: var(--ink);
    border-color: var(--border);
  }
  .nav-menu .nav-lang { justify-content: flex-start; }
}

/* ── Hero typewriter (static first word; Task 10 JS reads data-typewriter and cycles) ──
   Reproduces TypewriterFoil.jsx's DOM as static markup, its inline styles moved
   here: an inline-block wrapper, the nx-foil word, and the accent caret bar. */
.typed-foil { display: inline-block; }
.typed-foil .nx-foil { white-space: nowrap; }
.typed-caret {
  display: inline-block;
  width: 5px;
  height: 0.72em;
  margin-left: 0.12em;
  border-radius: 2px;
  background: var(--accent);
  vertical-align: baseline;
}

/* ── Shared: smaller .services-head h2 ──
   Reusable modifier for section heads whose h2 uses the smaller clamp (vs the
   default .services-head h2). Used by the Offers "how we work" head and every
   Product page head. Ports the repeated inline font-size clamp into one class. */
.section-head--sm h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ── Offers: "How we work" heading ──
   Reuses .services-head + .section-head--sm; adds Offers.jsx's wrapper margins. */
.offers-howwework-head { margin-top: 4.5rem; margin-bottom: 2.5rem; }

/* ── Product page: section-head modifiers ──
   Port Product.jsx's inline style={{}} on the .services-head wrappers into classes.
   The how/included heads used marginBottom:3rem; the pricing head was centered with
   a max-width (the centered .eyebrow follows from text-align:center on the wrapper). */
.product-section-head { margin-bottom: 3rem; }
.product-pricing-head {
  max-width: 640px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

/* ── Footer newsletter status lines (hidden until Task 10's JS toggles them) ── */
.footer .fine {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.footer .fine-error { color: var(--error); }

/* ── Work page: expandable case studies ──
   Every value below is copied faithfully from Work.jsx's inline style={{}} objects
   (the CASES map): paddings, radii, grid-template-columns, gaps, font sizes, colors.
   Aurora hex pairs stay as inline --a/--b custom props on each .work-case-card
   (design data, mapped by case key in work.njk). The radial-gradients that composed
   them in the JSX live here on ::before and reference those vars. Detail panels are
   rendered for every case but collapsed via the `hidden` attribute; Task 10 wires
   [data-case-toggle]/[data-case-close] to toggle the sibling [data-case-detail]. */

.work-cases {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 3rem 7rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.work-case-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card, 0 1px 2px rgba(26,26,26,0.06), 0 10px 28px rgba(26,26,26,0.08));
  overflow: hidden;
}

/* Top row: aurora thumb + name/type/summary/tags */
.work-card-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.25rem;
  align-items: center;
  padding: 2rem 2.5rem;
}
.work-card-thumb {
  position: relative;
  width: 220px;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #efe9df 0%, #e1d9cc 100%);
}
.work-card-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 28% 24%, var(--a) 0%, transparent 60%),
    radial-gradient(55% 55% at 76% 72%, var(--b) 0%, transparent 58%);
}
.work-card-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.work-card-name {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.work-card-type {
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.work-card-summary {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 34rem;
  margin: 0.9rem 0 1.25rem;
}
.work-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Toggle bar (a real <button> for a11y; JS flips aria-expanded + swaps the cta) */
.work-case-toggle {
  appearance: none;
  width: 100%;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0;
  border-top: 1px solid var(--border);
  padding: 1rem 2.5rem;
  background: transparent;
}
.work-case-toggle:hover,
.work-case-toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--contrast) 30%, var(--surface));
}
.work-case-toggle-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.work-case-toggle-cta {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}

/* Detail panel: rendered for SEO / no-JS, collapsed by default via [hidden] */
.work-case-detail {
  background: color-mix(in srgb, var(--contrast) 38%, var(--bg));
  border-top: 1px solid var(--border);
  padding: 2.75rem 2.5rem;
}
.work-case-detail[hidden] { display: none; }
.work-detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.75rem;
}
.work-detail-copy {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.work-detail-copy p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
}
.work-detail-quiet { color: var(--muted); }

/* Shots: placeholder aurora tiles reusing the case --a/--b */
.work-shots {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  justify-content: center;
}
.work-shot {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #efe9df, #e1d9cc);
  display: flex;
  align-items: end;
  padding: 0.8rem 1rem;
}
.work-shot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 80% at var(--sx) var(--sy), var(--sc) 0%, transparent 60%);
}
.work-shot-label {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

/* How it ships */
.work-ships {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  margin-bottom: 2rem;
}
.work-ships-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.work-steps {
  display: grid;
  grid-template-columns: repeat(var(--step-cols), 1fr);
  gap: 0;
}
.work-step { padding: 0 1.5rem 0 0; }
.work-step:last-child { padding: 0; }
.work-step-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.work-step-num {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--kairos);
}
.work-step-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.work-step-arrow { color: var(--accent); }
.work-step-title {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.work-step-body {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* Detail footer: stat + close link (button, same toggle hook) */
.work-case-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.work-case-stat {
  font-size: 0.95rem;
  color: var(--muted);
}
.work-case-close {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}

/* .nx-grain overlay (thumbs + shots) — ported from the design-system WorkPage template */
.nx-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  mix-blend-mode: overlay;
  opacity: 0.35;
}

/* ── Contact page ──
   Ports the inline styles from the design-system Contact.jsx into classes:
   spacer between the booking + email blocks, the post-submit "sent" state,
   the form error line, and the newsletter plate offset. Field/panel/subscribe
   primitives already live in tokens/base.css + kit.css. */
.contact-spacer { height: 2.5rem; }

/* Post-submit confirmation shown when Task 10's JS unhides [data-form-sent]. */
.panel-sent { text-align: center; padding: 2rem 0; }
.panel-sent h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

/* Contact form error line (unhidden by JS on a failed submit). */
.panel-form .form-error {
  color: var(--error);
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

/* Newsletter plate sits below the contact grid. */
.contact-newsletter { margin-top: 4rem; }

/* Newsletter subscribe error, on the dark plate (matches Contact.jsx #ff9d85). */
.newsletter .fine-error { color: #ff9d85; }

/* ── Mobile hero: shift the art right ──
   Same full-bleed image as desktop (cover, cropped on the sides). On a narrow
   viewport the default `right center` pulls the figure's head under the
   headline, so nudge the focal point left of the right edge: the figure lands
   on the right of the frame with its head clear of the text. */
@media (max-width: 900px) {
  .hero-bg {
    background:
      linear-gradient(90deg, rgba(16, 12, 8, 0.82) 0%, rgba(16, 12, 8, 0.5) 46%, rgba(16, 12, 8, 0.08) 100%),
      url('../img/header-image.webp') 62% center / cover no-repeat,
      var(--dark-deep);
  }
}

/* ── Hero placement: anchored low, one continuous scale ──
   The kit centres the hero block vertically, which left a large gap under the
   CTA. Pin the block to the bottom of the viewport instead, and let both the
   headline and the gap under the "See offers" button scale fluidly with the
   viewport — no breakpoint jump, so the composition reads the same from phone
   to large desktop. Bottom gap tracks the hero's 3rem side inset at the small
   end and grows to 5.5rem on wide screens. */
.hero {
  justify-content: flex-end;
  padding-bottom: clamp(4rem, 14vh, 11rem);
}
.hero-headline { font-size: clamp(2.75rem, 6.2vw, 5.5rem); }

/* Tall/portrait viewports: the same bottom anchor sits much lower than it does
   on a wide desktop, so the gap under the CTA is measured in viewport height
   there — the block lands at a comparable height on the screen.

   svh, not vh: the hero is `height: 100svh` — the viewport *with* the mobile
   browser toolbars showing. On iOS, `vh` is the LARGE viewport (toolbars
   retracted), so a vh-based bottom gap inside an svh-tall hero pushed the whole
   block ~20px higher on a real phone than in any desktop preview. Same unit for
   both keeps the composition identical everywhere; 18 (down from 22) drops the
   headline clear of the figure's face. */
@media (max-width: 900px) {
  .hero { padding-bottom: 18svh; }

  /* The min() caps the kit's scale so the longest typed word always fits
     between the gutters. The kit's floor is 3rem/48px, but 8vw only reaches
     48px at a 600px viewport — so every phone rendered the headline at 48px,
     where the nowrap typed line ("your momentum.") is ~363px wide inside a
     294px content box. It overflowed right and got cut by the hero's
     overflow:hidden, leaving ~0 margin on the right against 48px on the left.
     10.3vw is the widest that word can be and still fit; above a ~466px
     viewport the cap is inert and the kit's clamp takes over unchanged. */
  .hero-headline {
    font-size: min(10.3vw, clamp(3rem, 8vw, 7rem));
    text-wrap: balance; /* "build agents / to improve", not "build agents to / improve" */
  }
}

/* Phones: the hero and nav were the last blocks still on the 3rem desktop
   gutter — every other section already drops to --section-inset (1rem) below
   768px. 1.5rem buys the headline 48px of width, and moving the nav with it
   keeps the logo aligned to the headline's left edge. */
@media (max-width: 600px) {
  .hero { padding-inline: 1.5rem; }
  .nav { padding-inline: 1.5rem; }
}

/* ── Reduced motion: quiet, not frozen ──
   site.js used to skip every hero animation outright when the OS asks for
   reduced motion, so on a phone with Settings → Accessibility → Motion →
   Reduce Motion switched on the hero was completely dead — including the word
   cycle, which is copy rather than decoration.

   Reduced motion is about *movement* (travel, parallax, scaling), not about
   change. So under `reduce` the hero still animates, on opacity alone: the
   entrance fades in without the 26px rise, and the typed line cross-fades
   between whole words instead of typing itself out character by character
   (see the REDUCED branch in site.js). The caret is dropped — it only means
   anything while something is being typed.

   The !important overrides the blanket `* { transition-duration: 0.01ms }`
   reduce rule in tokens/base.css, which would otherwise flatten these fades
   too. These class selectors outrank its `*`, so only they opt back in — and
   the durations stay longhand so the kit's staggered transition-delays survive. */
@media (prefers-reduced-motion: reduce) {
  .hero.hero-pre .hero-eyebrow,
  .hero.hero-pre .hero-headline,
  .hero.hero-pre .hero-sub,
  .hero.hero-pre .hero-actions { translate: none; }

  .hero-eyebrow,
  .hero-headline,
  .hero-sub,
  .hero-actions {
    transition-property: opacity !important;
    transition-duration: 600ms !important;
    transition-timing-function: ease !important;
  }

  .typed-foil {
    transition-property: opacity !important;
    transition-duration: 420ms !important;
    transition-timing-function: ease !important;
  }
  .typed-caret { display: none; }
}