/*
 * 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. The headline
   keeps the kit's original mobile/tablet scale; only desktop was toned down. */
@media (max-width: 900px) {
  .hero { padding-bottom: 22vh; }
  .hero-headline { font-size: clamp(3rem, 8vw, 7rem); }
}