@import "tailwindcss";

/* ============================================================
   Tablet responsiveness
   The whole UI switches from "mobile" to "desktop" at the `lg`
   breakpoint. Default Tailwind sets lg = 1024px, which means
   tablets (800–1023px) used to render the mobile layout. Lowering
   lg to 800px makes tablets render the full desktop layout while
   leaving the mobile (<800px) and desktop (>=800px) designs intact.
   ============================================================ */
@theme {
  --breakpoint-lg: 800px;
}

@theme inline {
  --font-sans: var(--font-manrope), "Manrope", sans-serif;
  --font-heading: var(--font-host-grotesk), "Host Grotesk", sans-serif;
  --font-accent: var(--font-barlow-condensed), "Barlow Condensed", sans-serif;
  --font-serif: var(--font-instrument-serif), "Instrument Serif", serif;
  --font-funnel: var(--font-funnel-sans), "Funnel Sans", sans-serif;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  content-visibility: auto;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@media (min-width: 800px) {
  .lg\:overflow-x-visible {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}

/* ============================================================
   Tablet-range (800–1023px) compaction
   The desktop chrome (Header nav, Footer) was designed for
   >=1024px. These rules tighten spacing ONLY between 800–1023px
   so tablets render the desktop layout without overflowing.
   Mobile (<800px) and desktop (>=1024px) are NOT affected.
   ============================================================ */
@media (min-width: 800px) and (max-width: 1023px) {
  /* Header: shrink logo, separators, nav text and CTA */
  .hdr-logo { width: 168px !important; height: 46px !important; }
  .hdr-sep { margin-left: 12px !important; margin-right: 12px !important; }
  .hdr-nav button,
  .hdr-nav a { font-size: 14px !important; }
  .hdr-cta-inner { padding-left: 16px !important; padding-right: 16px !important; }
  .hdr-cta-text { font-size: 14px !important; }
  .hdr-cta-arrow {
    width: 20px !important;
    height: 20px !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
  }

  /* Footer: narrow the three desktop columns so they fit side-by-side */
  .ftr-desktop { padding-left: 20px !important; padding-right: 20px !important; }
  .ftr-col-quick { width: 200px !important; }
  .ftr-col-companies { width: 300px !important; }
  .ftr-companies-inner { width: 300px !important; }
  .ftr-companies-left { width: 150px !important; }
  .ftr-col-contact { width: 210px !important; }
  .ftr-contact-val { width: 160px !important; }

  /* Contact page: give the form breathing room */
  .contact-section { padding-left: 32px !important; padding-right: 32px !important; }
  .contact-split { gap: 40px !important; }
  .contact-sidebar { width: 340px !important; }
  .contact-watermark { font-size: 88px !important; letter-spacing: -2px !important; }

  /* Newsletter subscribe: fit text + form side-by-side */
  .nl-box { padding: 32px !important; gap: 24px !important; }
  .nl-heading { width: 260px !important; }
  .nl-desc { width: 260px !important; }
  .nl-form { width: auto !important; flex-grow: 1 !important; flex-basis: 0 !important; }

  /* Two-column sections: shrink the dominant fixed column */
  .ac-main { width: 400px !important; }
  .sp-card { width: 360px !important; }
  .legacy-img { width: 380px !important; }

  /* Side-by-side inquiry forms (switch at md): fit image + form */
  .hi-section,
  .wi-section { padding-left: 32px !important; padding-right: 32px !important; }
  .hi-form,
  .wi-form { width: 380px !important; }

  /* Logistics map + details: shrink the square map */
  .lcd-map { width: 360px !important; }
}

@keyframes gallery-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.gallery-perf-section {
  content-visibility: auto;
  contain-intrinsic-size: 720px;
}

.gallery-motion-track {
  backface-visibility: hidden;
  contain: layout paint style;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.contain-paint {
  contain: layout paint;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-motion-track,
  .gallery-scroll-track,
  .animate-marquee {
    animation-play-state: paused !important;
  }
}
.gallery-scroll-track {
  animation: gallery-scroll 40s linear infinite;
  will-change: transform;
}
.gallery-scroll-track:hover {
  animation-play-state: paused;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

@keyframes galleryNewsletterDesktopMarquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes galleryNewsletterMobileMarquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
.animate-marquee {
  animation: marquee 30s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* ============================================================
   Small-screen overflow safety net (covers every page)
   Stops horizontal overflow on viewports <= 360px while
   preserving intentionally-scrollable carousels (whose cards
   use flex-shrink-0 / explicit widths and overflow-x-auto).
   ============================================================ */

/* Responsive media: never wider than its container */
img,
svg,
video,
canvas,
picture {
  max-width: 100%;
}

/* Let flex "share-the-space" items and grid items shrink below
   their content size so they never push the page wider. */
.flex-1 {
  min-width: 0;
}
.grid > * {
  min-width: 0;
}

/* Break long unbreakable strings instead of overflowing */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li {
  overflow-wrap: break-word;
}

@media (max-width: 360px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  section,
  header,
  footer,
  main,
  article,
  nav {
    max-width: 100%;
  }
  /* Wide tables / code scroll internally instead of blowing out the page */
  table,
  pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}