/* =========================================================================
   TG Custom Vans — Refresh migration layer
   Loaded AFTER normalize.css, components.css, tg-customs.css.

   Purpose:
   1. Surface the real design tokens extracted from the Webflow export as a
      single documented :root source of truth (colors + typography).
   2. Provide the mobile navigation open/close behaviour that Webflow's
      jQuery runtime used to handle, now that the site runs without it.

   Design tokens (extracted verbatim from tg-customs.css :root + computed styles):
     Brand pink (primary CTA) .... #db2089  (hover #e92e97)
     Royal blue (accent) ......... #206bdb
     Ink / dark button ........... #1a1a1a
     White smoke (section bg) .... #f3f3f3
     Page background ............. #f8f8f8
     Body text ................... #333333
     Paragraph (.para) ........... #474747
     Muted paragraph ............. #9b9b9b
     Heading font ................ "Playfair Display", serif
     Body / UI font .............. "Fauna One", sans-serif
   ========================================================================= */

:root {
  --tg-pink: #db2089;
  --tg-pink-hover: #e92e97;
  --tg-royal-blue: #206bdb;
  --tg-ink: #1a1a1a;
  --tg-white-smoke: #f3f3f3;
  --tg-page-bg: #f8f8f8;
  --tg-text: #333;
  --tg-para: #474747;
  --tg-muted: #9b9b9b;
  --tg-font-heading: "Playfair Display", serif;
  --tg-font-body: "Fauna One", sans-serif;
}

/* -------------------------------------------------------------------------
   Mobile navigation (replaces Webflow's over-right nav interaction).
   At <=991px the Webflow CSS already hides .w-nav-menu and shows the
   hamburger (.w-nav-button). These rules re-enable opening it.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .navbar.w-nav[data-collapse="medium"] .nav-menu.w-nav-menu {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    max-width: 80vw;
    transform: translateX(105%);
    transition: transform 0.4s ease;
    will-change: transform;
    overflow-y: auto;
  }

  .navbar.w-nav.nav-open[data-collapse="medium"] .nav-menu.w-nav-menu {
    transform: translateX(0);
  }

  /* dimmed backdrop behind the open panel */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 999;
  }

  .navbar.w-nav.nav-open ~ .nav-backdrop,
  .navbar.w-nav.nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* The in-panel × close is retired in favour of the animated toggle, which now
     sits above the sliding panel and morphs to an X to serve as the single
     open/close control (see .w-nav-button z-index below). */
  .navbar .menu-button.close-version.w-hidden-main {
    display: none !important;
  }
}

/* Hamburger button active state — smooth fade to the gray .w--open state
   (defined in components.css) instead of an instant snap, matching the
   panel's 400ms ease. */
.navbar .menu-button.w-nav-button {
  /* Stay above the over-right panel + backdrop so the animated hamburger/X is
     the single visible open AND close control (the navbar's own
     z-index:1000 stacking context keeps this above the dimming backdrop). */
  position: relative;
  z-index: 1001;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* -------------------------------------------------------------------------
   Animated hamburger icon.
   Replaces the static Webflow icon-font glyph (.w-icon-nav-menu \e602) with a
   clean 3-line mark that morphs into an X when the mobile nav is open, and
   back on close. Pure CSS transforms/transitions — no JS animation library.
   The button's size/position/click target and its .w--open background
   behaviour are untouched; only the glyph is swapped. Bars use a fixed ink
   colour so the X stays visible over the button's transparent open state.
   ------------------------------------------------------------------------- */
.navbar .menu-button.w-nav-button .tg-hamburger {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 18px;
  vertical-align: middle;
}

.navbar .menu-button.w-nav-button .tg-hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background-color: var(--tg-ink);
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease;
  will-change: transform, top, opacity;
}

.navbar .menu-button.w-nav-button .tg-hamburger span:nth-child(1) {
  top: 0;
}

.navbar .menu-button.w-nav-button .tg-hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.navbar .menu-button.w-nav-button .tg-hamburger span:nth-child(3) {
  top: 100%;
  transform: translateY(-100%);
}

/* Open state — top + bottom bars converge to the centre and cross into an X,
   middle bar fades out. */
.navbar .menu-button.w-nav-button.w--open .tg-hamburger span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.navbar .menu-button.w-nav-button.w--open .tg-hamburger span:nth-child(2) {
  opacity: 0;
}

.navbar .menu-button.w-nav-button.w--open .tg-hamburger span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* Prevent body scroll while the mobile nav is open */
body.nav-locked {
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   Hero overlay tiles — "text hover in" interaction.
   Faithful re-creation of the Webflow IX2 interactions that lived on the two
   .overlay-image-block tiles (export data-w-id adea02fe… / 76f1eef5…):
     - PAGE_START (a-3): .button.image-block-button starts hidden
                         -> opacity 0, translateX(10px)
     - MOUSE_OVER (a-4): -> opacity 1, translateX(0), 500ms ease
     - MOUSE_OUT  (a-5): -> opacity 0, translateX(10px), 500ms ease
   Rebuilt as a CSS hover reveal (no JS runtime) with identical timing/easing.
   ------------------------------------------------------------------------- */
.overlay-image-block .button.image-block-button {
  opacity: 0;
  transform: translateX(10px);
  transition: transform 500ms ease, opacity 500ms ease;
  will-change: transform, opacity;
}

.overlay-image-block:hover .button.image-block-button,
.overlay-image-block:focus-within .button.image-block-button {
  opacity: 1;
  transform: translateX(0);
}

/* -------------------------------------------------------------------------
   Smooth in-page anchor scrolling.
   Webflow's jQuery runtime animated scroll for on-page # links; that runtime
   is intentionally not carried over, so restore the behaviour natively. All
   nav links (#about-us, #our-work, #teardrop, #contact) and the hero CTAs
   resolve to same-document fragments, so scroll-behavior covers them.
   ------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* Respect users who prefer reduced motion: no hover slide, no smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* Hamburger still morphs to an X, just without the tween. */
  .navbar .menu-button.w-nav-button .tg-hamburger span {
    transition: none;
  }
  .overlay-image-block .button.image-block-button {
    transition: opacity 500ms ease;
    transform: none;
  }
  .overlay-image-block:hover .button.image-block-button,
  .overlay-image-block:focus-within .button.image-block-button {
    transform: none;
  }
}