/*
 * Custom layout CSS for Sharklifemedia.com.
 * Brand tokens, type, and semantic classes come from colors_and_type.css. Do not duplicate them here.
 * Motion follows the Motion Policy in CLAUDE.md.
 *
 * STILL FORBIDDEN: drop shadows, border-radius, gradients, capsules, transparency, em dashes.
 * Animations are allowed per CLAUDE.md Motion Policy. Always gate behind prefers-reduced-motion media query.
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-body, Inter, system-ui, sans-serif); background: var(--canvas, #FFFFFF); color: var(--ink, #00002b); }
img { display: block; max-width: 100%; height: auto; }
html:focus-within { scroll-behavior: smooth; }

/* ============================================================
   PRIMARY NAV (sticky dark variant)
   ============================================================ */
.nav-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas-dark);
  transition: none;
}

.nav-sticky .primary-nav {
  height: 64px;
  padding: 0;
  border-bottom: 1px solid transparent;
  transition: height 200ms ease-out, border-color 200ms ease-out;
}

.nav-sticky.is-shrunk .primary-nav {
  height: 56px;
  border-bottom-color: var(--hairline-dark);
}

.nav-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 32px;
  /* The HTML uses .container alongside .nav-inner, which would otherwise
     cap the nav at 1440px and center it via margin: 0 auto. Override:
     - max-width: none releases the cap
     - flex: 1 makes the nav-inner expand to fill .primary-nav (a flex parent)
     - margin: 0 cancels the centering auto-margins
     The .container's padding: 0 24px is preserved as side breathing room. */
  max-width: none;
  flex: 1;
  margin: 0;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo img {
  height: 28px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xxl);
  margin-left: auto;
}

.nav-links a {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink);
  text-decoration: none;
  position: relative;
  padding-bottom: 6px;
}

/* Hover/focus underline — 2px gold-gradient bar that wipes in left-to-right.
   Mechanic mirrors design-system-reference/preview/components-nav.html
   (::after, scaleX, 0.18s ease). Spec uses solid ink/on-ink for hover and
   reserves gold-gradient for the .active state — using gold here is an
   intentional deviation matching the gold-CTA decision. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

.nav-cta {
  height: 40px;
  padding: 0 20px;
  font-size: 13px;
  flex-shrink: 0;
}

/* Sign In: low-contrast, far-right, sits after the CTA */
.nav-signin {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
  text-decoration: none;
  flex-shrink: 0;
  margin-left: 18px;
  transition: color 180ms ease;
}

.nav-signin:hover,
.nav-signin:focus-visible {
  color: var(--on-ink);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  color: var(--on-ink);
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.nav-toggle-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
}

.nav-mobile {
  display: none;
  flex-direction: column;
  background: var(--canvas-dark);
  border-top: 1px solid var(--hairline-dark);
  padding: 16px 24px 24px;
  gap: 4px;
}

.nav-mobile.is-open {
  display: flex;
}

.nav-mobile a:not(.btn) {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline-dark);
}

.nav-mobile a.nav-mobile-signin {
  color: var(--on-ink-mute);
  border-bottom: none;
  margin-top: 4px;
}

.nav-mobile-cta {
  width: 100%;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .nav-links,
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ============================================================
   HERO — full-bleed editorial cover
   Warehouse photograph with parallax + eyebrow + two-line headline
   anchored in the lower portion. text-shadow / drop-shadow on the
   type is an intentional, scoped override of the project no-shadow
   rule (CLAUDE.md rule 7) for legibility over the photograph.
   ============================================================ */
.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--canvas-dark);
  overflow: hidden;
}

.hero-banner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* All overhang sits BELOW the visible window. At rest the image's top
     edge is flush with the hero top, so subject heads are never cropped.
     Parallax translates the image upward as the user scrolls through the
     hero, revealing the lower portion (body, dog, floor). */
  height: calc(100% + 240px);
  background-image: url('assets/images/hero-warehouse-mia+alex.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  will-change: transform;
}

.hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  padding: 0 24px 80px;
  text-align: center;
}

.hero-eyebrow {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-ink);
  margin: 0 0 20px;
  text-shadow: 0 2px 12px var(--canvas-dark);
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(48px, 7.5vw, 104px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0;
  /* drop-shadow follows the painted pixels — required because line 1 uses
     background-clip: text, where text-shadow is unreliable across browsers. */
  filter: drop-shadow(0 4px 24px var(--canvas-dark)) drop-shadow(0 2px 8px var(--canvas-dark));
}

.hero-headline-gold,
.hero-headline-white {
  display: block;
}

.hero-headline-gold {
  background-image: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-headline-white {
  color: var(--on-ink);
}

.hero-cta {
  margin-top: 36px;
  height: 60px;
  padding: 0 44px;
  font-size: 16px;
}

/* ============================================================
   FIELD INPUT (ported from design-system-reference/preview/components-inputs.html)
   ============================================================ */
.field {
  height: 44px;
  padding: 0 14px;
  background: var(--soft-cloud);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
  outline: none;
}

.field::placeholder {
  color: var(--stone);
}

.field:focus,
.field.focused {
  background: var(--canvas);
  border-color: var(--ink);
}

/* ============================================================
   MOTION (entry animations gated by prefers-reduced-motion)
   ============================================================ */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.is-revealed .word {
  opacity: 1;
  transform: none;
}

.fade-up {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.fade-up.is-revealed {
  opacity: 1;
  transform: none;
}

/* Hero line reveal — shared animation for the three hero lines so they
   play one after another, each fully completing before the next starts.
   Same shape as .fade-up, scoped to a hero-specific class so the JS can
   target only these three without competing with .fade-up elsewhere. */
.hero-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.hero-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

.eyebrow-rise {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.eyebrow-rise.is-revealed {
  opacity: 1;
  transform: none;
}

.stripe-draw {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease-out;
}

.stripe-draw.is-revealed {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .word,
  .fade-up,
  .hero-reveal,
  .eyebrow-rise,
  .stripe-draw {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav-sticky .primary-nav {
    transition: none;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero { min-height: 80vh; }
  .hero-overlay { padding-bottom: 64px; }
}

@media (max-width: 768px) {
  .hero { min-height: 70vh; }
  .hero-banner-img { top: 0; height: calc(100% + 180px); }
  .hero-overlay { padding: 0 20px 48px; }
  .hero-eyebrow {
    font-size: 12px;
    letter-spacing: 0.16em;
    margin-bottom: 14px;
  }
  .hero-cta {
    margin-top: 28px;
    height: 52px;
    padding: 0 28px;
    font-size: 14px;
  }
}

/* ============================================================
   PRESS STRIP — "As Featured In" credibility marquee
   Dark band, six white-on-transparent press logos scrolling
   right-to-left in a seamless loop. Linear easing, slow (40s),
   pause on hover, no edge fades.
   ============================================================ */
.press-strip {
  background: var(--canvas-dark);
  padding: 60px 0;
  overflow: hidden;
}

.press-strip-eyebrow {
  color: var(--on-ink);
  text-align: center;
  margin: 0 0 36px;
}

.press-strip-marquee {
  width: 100%;
  overflow: hidden;
}

/* Pause the entire track on any hover within the marquee — not just on
   the logo being hovered. */
.press-strip-marquee:hover .press-strip-track {
  animation-play-state: paused;
}

.press-strip-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: press-strip-scroll 40s linear infinite;
}

.press-strip-logo {
  height: 32px;
  width: auto;
  /* margin-right (not flex gap) gives every logo a uniform trailing slot.
     With 4 identical sets of 6 logos and animation translateX(-25%), the
     track lands exactly on the start of set 2 at loop end → seamless. */
  margin-right: 80px;
  opacity: 0.75;
  transition: opacity 200ms ease-out;
  flex-shrink: 0;
}

.press-strip-logo:hover {
  opacity: 1;
}

/* 4 copies of 6 logos × 80px margin ≈ 1280px per copy. translateX(-25%)
   moves the track by exactly one copy width. Three copies' worth of
   content (~3840px) is always to the right of the viewport's left edge
   throughout the cycle, so the viewport never runs past the end of the
   track. Covers desktop up to ~3.8K wide. */
@keyframes press-strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

@media (max-width: 768px) {
  .press-strip { padding: 40px 0; }
  .press-strip-logo {
    height: 24px;
    margin-right: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .press-strip-track {
    animation: none;
  }
}

/* ============================================================
   DIVI HEADER OVERRIDES
   Force solid navy chrome (no transparency, rule 7), tighten
   vertical padding, and clean up the active page indicator.
   ============================================================ */

/* Solid navy header, always. Kill Divi's transparent-nav behavior. */
#main-header,
#top-header,
.et-fixed-header,
.et_transparent_nav #main-header,
.et_transparent_nav .et-fixed-header,
.et_transparent_nav.et_show_nav #main-header,
.et_transparent_nav.et_show_nav .et-fixed-header {
  background-color: var(--ink, #00002b) !important;
  background-image: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Tighten vertical padding so the menu reads compact */
#main-header .container.et_menu_container {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Menu links: white, uppercase, Inter, no padding for active bar */
#top-menu li a {
  color: var(--on-ink, #F5F5F5) !important;
  font-family: var(--font-ui, Inter), sans-serif !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 0 !important;
}

/* Kill Divi's default active-link indicator (the floating bar with the gap) */
#top-menu li.current-menu-item > a::after,
#top-menu li.current_page_item > a::after,
#top-menu li.current-menu-ancestor > a::after,
#top-menu li.current-menu-item > a::before,
#top-menu li.current_page_item > a::before {
  display: none !important;
  content: none !important;
}

/* Clean gold underline for the active page — tight to text, signal-only.
   Uses the canonical gold gradient from the design system. */
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a {
  background-image: linear-gradient(135deg, #ecc073 0%, #f7e7b2 50%, #ecc073 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 0 100% !important;
  background-size: 100% 2px !important;
  padding-bottom: 4px !important;
}

/* ============================================================
   HERO EDITORIAL BANNER (custom, not stock)
   Editorial deviation from rule 2: gold IS used as text fill on
   one keyword phrase ("Make the Phone") for the brand hero only.
   Documented exception, not a pattern to repeat elsewhere.
   ============================================================ */

.hero-editorial {
  text-align: center;
  color: #F5F5F5;
  padding: clamp(48px, 8vw, 120px) 24px;
}

.hero-editorial .eyebrow {
  font-family: var(--font-ui, Inter), sans-serif;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F5F5F5 !important;
  margin: 0 0 16px;
  text-shadow:
    0 0 16px #00002B,
    0 2px 6px #00002B;
}

.hero-editorial .headline {
  font-family: var(--font-display, 'Bebas Neue'), 'Anton', 'Impact', sans-serif;
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #F5F5F5 !important;
  margin: 0;
  text-shadow:
    0 0 40px #00002B,
    0 6px 16px #00002B,
    0 12px 32px rgba(0, 0, 43, 0.6);
}

.hero-editorial .headline + .headline {
  margin-top: 8px;
}

/* Gold gradient text fill — clip background to the glyph shape.
   !important forces transparent fill even when .headline sets white. */
.hero-editorial .gold-fill {
  background-image: linear-gradient(135deg, #ecc073 0%, #f7e7b2 50%, #ecc073 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   DIVI BUTTON OVERRIDES — enforce square geometry (rule 3)
   Divi modules override the global Customizer button radius
   on a per-module basis, so we force every Divi button class
   to border-radius: 0 site-wide.
   ============================================================ */

.et_pb_button,
.et_pb_button:hover,
a.et_pb_button,
a.et_pb_button:hover,
.et_pb_button_module_wrapper .et_pb_button,
.et_pb_promo_button,
.et_pb_more_button,
.et_pb_newsletter_button,
.et_pb_contact_submit,
.et_pb_button_inner,
.et_pb_pricing_table_button,
input[type="submit"].et_pb_button,
button.et_pb_button {
  border-radius: 0 !important;
}

.et_pb_button::before,
.et_pb_button::after {
  border-radius: 0 !important;
}

/* Gold CTA hover scale — matches the image-zoom motion token (1.04, 300ms).
   Hero-tier exception to the "no hover transform on buttons" default. */
.btn-gold,
.et_pb_button.btn-gold {
  transition: transform 300ms ease-out;
}

.btn-gold:hover,
.et_pb_button.btn-gold:hover {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .btn-gold,
  .et_pb_button.btn-gold,
  .btn-gold:hover,
  .et_pb_button.btn-gold:hover {
    transform: none;
    transition: none;
  }
}

/* ============================================================
   NEW HOME 2026 — DIVI HEADER
   Brings the Divi-rendered header into parity with the static
   .nav-sticky pattern. Scoped via .slm-new-home-header (added
   to the header section in Divi → Advanced → CSS Class).
   ============================================================ */

.slm-new-home-header {
  background: var(--canvas-dark);
  padding: 0 24px;
}

.slm-new-home-header .et_pb_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Three-column flex: logo | menu | cta+signin */
.slm-new-home-header .et_pb_column {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.slm-new-home-header .et_pb_column.slm-col-menu {
  flex: 1 1 auto;
  justify-content: center;
}
.slm-new-home-header .et_pb_column.slm-col-cta {
  gap: 18px;
  margin-left: auto;
}

/* Menu module: strip Divi chrome, apply nav-links typography */
.slm-new-home-header .et_pb_menu {
  background: transparent;
}
.slm-new-home-header .et_pb_menu__menu > nav > ul {
  display: flex;
  align-items: center;
  gap: var(--space-xxl);
  padding: 0;
  margin: 0;
}
.slm-new-home-header .et_pb_menu__menu li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.slm-new-home-header .et_pb_menu__menu a {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink);
  text-decoration: none;
  position: relative;
  padding-bottom: 6px;
}
.slm-new-home-header .et_pb_menu__menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}
.slm-new-home-header .et_pb_menu__menu a:hover::after,
.slm-new-home-header .et_pb_menu__menu a:focus-visible::after {
  transform: scaleX(1);
}

/* CTA: lock height/typography to match the static .nav-cta.
   The existing .et_pb_button.btn-gold rule above already paints
   the gold gradient; we only constrain size + text here. */
.slm-new-home-header .et_pb_button.btn-gold {
  height: 40px;
  padding: 0 20px;
  font-size: 13px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Sign In: muted gray, far-right, recedes against navy */
.slm-new-home-header .slm-signin a,
.slm-new-home-header a.slm-signin {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
  text-decoration: none;
  transition: color 180ms ease;
}
.slm-new-home-header .slm-signin a:hover,
.slm-new-home-header a.slm-signin:hover {
  color: var(--on-ink);
}

/* ---- Scroll-shrink (DESKTOP ONLY) ----
   Divi adds .et-fixed-header to <body> when scrolled past trigger.
   We piggyback on that, no new JS. */
@media (min-width: 901px) {
  .slm-new-home-header,
  .slm-new-home-header .et_pb_row,
  .slm-new-home-header .et_pb_image img {
    transition: padding 200ms ease-out, transform 200ms ease-out,
                height 200ms ease-out, border-color 200ms ease-out;
  }

  body.et-fixed-header .slm-new-home-header {
    border-bottom: 1px solid var(--hairline-dark);
  }
  body.et-fixed-header .slm-new-home-header .et_pb_row {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  body.et-fixed-header .slm-new-home-header .et_pb_image img {
    transform: scale(0.88);
    transform-origin: left center;
  }
}

/* Mobile/tablet: do NOT trigger scroll-shrink; collapse menu */
@media (max-width: 900px) {
  .slm-new-home-header .et_pb_row {
    flex-wrap: wrap;
  }
  .slm-new-home-header .et_pb_column.slm-col-menu {
    display: none;
  }
}