/* ==========================================================================
   GAAB Website — contact.css
   Page-specific styles for /contact (Layout A — immersive).
   Sections: HERO (3D globe) · VISIT US (factory map) · WHERE WE SERVE.
   Reuses variables / typography; ships a self-contained dark navbar so the
   page does not depend on about.css.
   ========================================================================== */


/* ==========================================================================
   NAVBAR — dark variant, self-contained (BEM names, fixed dark state)
   The base .navbar (fixed + glass + padding) comes from components.css.
   This page stays dark top-to-bottom, so the bar is locked to data-state="dark"
   and needs no scroll-driven toggle.
   ========================================================================== */

.navbar__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Same locked height as the other pages (they get it from the 40px "Get a
     Quote" button; contact has no button, so match it explicitly). */
  min-height: 40px;
}

.navbar__logo {
  position: relative;
  display: flex;
  align-items: center;
  line-height: 0;
}

.navbar__logo-img {
  height: 28px;
  width: auto;
  display: block;
  transition: opacity 300ms ease-out;
}

/* Two stacked logos; the white one shows on this dark page. */
.navbar__logo-img--light { position: absolute; top: 0; left: 0; }

.navbar[data-state="dark"] .navbar__logo-img--color { opacity: 0; }
.navbar[data-state="dark"] .navbar__logo-img--light { opacity: 1; }

.navbar__menu {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar__menu a {
  font-size: 14px;
  font-weight: var(--weight-regular);
  text-decoration: none;
  color: var(--color-white);
  opacity: 0.75;
  transition: opacity 200ms ease-out;
}

.navbar__menu a:hover,
.navbar__menu a[aria-current="page"] { opacity: 1; }

/* Dark glass background — overrides the white base from components.css. */
.navbar--dark-bg {
  background: rgba(10, 10, 10, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

@media (max-width: 768px) {
  .navbar__menu { display: none; }
}


/* ==========================================================================
   PAGE SHELL
   ========================================================================== */

.contact-page {
  background: var(--color-black);
  color: #FFFFFF;
}


/* ==========================================================================
   HERO — 3D globe
   ========================================================================== */

.contact-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: #F4F2ED;
}

.contact-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contact-hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 35%,
    rgba(244, 242, 237, 0.65) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.contact-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl);
  z-index: 2;
  pointer-events: none;
}

.contact-hero-eyebrow {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(10, 10, 10, 0.55);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.contact-hero-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-black);
  margin: 0 0 var(--space-md) 0;
  text-shadow: 0 2px 28px rgba(244, 242, 237, 0.7);
}

.contact-hero-subtitle {
  font-size: clamp(16px, 1.4vw, 19px);
  color: rgba(10, 10, 10, 0.65);
  margin: 0;
  max-width: 540px;
}


/* ==========================================================================
   VISIT US — split info + factory map
   ========================================================================== */

.contact-visit {
  width: 100%;
  padding: clamp(80px, 12vh, 140px) var(--space-2xl);
  background: #FFFFFF;
}

/* Eyebrow only inside Visit us: navy reads better than the light blue on white.
   (Where we serve keeps the lighter blue, since it stays on a dark background.) */
.contact-visit .contact-eyebrow {
  color: var(--color-blue-gaab);
}

.contact-visit-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-3xl);
  align-items: center;
}

.contact-visit-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Eyebrows on dark backgrounds use the lighter brand blue (variables.css notes
   the navy reads muddy on black). */
.contact-eyebrow {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-blue-gaab-light);
  opacity: 0.85;
  text-transform: uppercase;
}

/* Cliente oct-2026: "where we serve" se leía oscuro contra el fondo negro.
   Subimos a blanco pleno sin opacidad. */
.contact-presence .contact-eyebrow {
  color: #FFFFFF;
  opacity: 1;
}

.contact-visit-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;

  /* Light-reveal: dark ink sweeps in top-to-bottom on scroll. Same mechanic as
     the about/accordion titles, inverted for this white background. Default is
     solid (readable with no JS / reduced motion); GSAP sets the dim start. */
  background-image: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.95) 0%,
    rgba(10, 10, 10, 0.95) 50%,
    rgba(10, 10, 10, 0.16) 50%,
    rgba(10, 10, 10, 0.16) 100%
  );
  background-size: 100% 200%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(10, 10, 10, 0.1);
  text-decoration: none;
  transition: opacity 200ms;
}

.contact-detail:hover { opacity: 0.7; }

.contact-detail-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.45);
}

.contact-detail-value {
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--color-black);
}

.contact-factory-map-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  background: #0E0E12;
  cursor: pointer;
}

.contact-factory-map {
  position: absolute;
  inset: 0;
}

/* Hide Mapbox branding (logo + attribution) on this page — hero globe and
   factory map both. They sit in the lower corners. */
.mapboxgl-ctrl-logo,
.mapboxgl-ctrl-attrib,
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
  display: none !important;
}

/* "Get Directions" overlay — makes it obvious the map is clickable. Sits on
   top of the map but lets clicks fall through to the wrapper (which opens the
   native maps app). */
.contact-map-cta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-lg);
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 18, 0.7), transparent 55%);
}

.contact-map-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.contact-map-cta-pill svg {
  width: 16px;
  height: 16px;
}

/* Whole map lights the pill on hover/focus so the affordance is unmistakable. */
.contact-factory-map-wrapper:hover .contact-map-cta-pill,
.contact-factory-map-wrapper:focus-visible .contact-map-cta-pill {
  background: #5DC4FF;
  color: #0A0E14;
  transform: translateY(-2px);
}

.contact-factory-map-wrapper:focus-visible {
  outline: 2px solid #5DC4FF;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .contact-map-cta-pill { transition: none; }
}


/* ==========================================================================
   WHERE WE SERVE — 17 countries
   ========================================================================== */

.contact-presence {
  width: 100%;
  padding: clamp(80px, 12vh, 140px) var(--space-2xl);
  background: var(--color-black);
}

.contact-presence-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.contact-presence-title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: var(--space-md) 0 var(--space-2xl) 0;
}

.contact-countries {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: country;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 var(--space-2xl);
}

.contact-countries li {
  counter-increment: country;
  position: relative;
  overflow: hidden; /* masks the name as it rises in */
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: var(--space-md) 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.35s ease, background 0.35s ease;
}

/* Auto index 01–17 — editorial detail, no manual numbering. */
.contact-countries li::before {
  content: counter(country, decimal-leading-zero);
  flex: none;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-blue-gaab-light);
  opacity: 0.55;
  transition: color 0.35s ease, opacity 0.35s ease;
}

.contact-countries .cc-name {
  display: inline-block;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.35s ease;
  will-change: transform;
}

.contact-countries li:hover {
  border-color: rgba(93, 196, 255, 0.5);
  background: rgba(93, 196, 255, 0.04);
}

.contact-countries li:hover::before {
  color: #5DC4FF;
  opacity: 1;
}

.contact-countries li:hover .cc-name {
  color: #5DC4FF;
}


/* ==========================================================================
   GLOBE / MAP MARKERS
   ========================================================================== */

.country-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3A5A9F;
  box-shadow: 0 0 12px rgba(58, 90, 159, 0.9), 0 0 0 2px rgba(58, 90, 159, 0.3);
  animation: marker-pulse 2.4s ease-in-out infinite;
}

.country-marker--florida {
  width: 14px;
  height: 14px;
  background: #1B3A6B;
  box-shadow: 0 0 16px rgba(27, 58, 107, 1), 0 0 0 3px rgba(27, 58, 107, 0.4);
}

@keyframes marker-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

/* Hub marker: dot on the coordinate, text label floating just above it. The
   wrapper is sized to the dot (label is absolutely positioned, out of flow) so
   Mapbox keeps the dot pinned exactly on the lng/lat. */
.hub-marker {
  position: relative;
  width: 14px;
  height: 14px;
}

.hub-marker__dot {
  display: block;
}

.hub-marker__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  text-align: center;
  pointer-events: none;
}

.hub-marker__title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #1B3A6B;
}

.hub-marker__sub {
  font-weight: 500;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B7A99;
}

/* Houston label offset — Medley sits ~1500 km to the east so a centered label
   stacks on top of the Office Medley label. Push the Houston label to the
   upper-left of its dot so both read clean. */
.hub-marker--left .hub-marker__label {
  left: auto;
  right: calc(100% + 10px);
  bottom: calc(100% - 2px);
  transform: none;
  align-items: flex-end;
  text-align: right;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .contact-visit-inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

@media (max-width: 768px) {
  .contact-hero { height: 85vh; }
  .contact-hero-title { font-size: clamp(40px, 12vw, 64px); }
  .contact-visit,
  .contact-presence { padding: clamp(60px, 10vh, 100px) var(--space-xl); }
}

/* The country list is auto-fit with a 200px minimum, so on a phone only ONE
   column ever fits and the 17 names become a very long scroll. Force two. */
@media (max-width: 640px) {
  .contact-countries {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--space-lg);
  }

  /* The globe canvas fills the whole hero (inset: 0), so it centres against the
     section — but the fixed navbar covers the top ~107px of that section, which
     pushed the sphere 53px above the centre of what you can actually SEE. That
     is the lopsided look: a sliver of cream up top, a big empty band below.
     Starting the canvas below the chrome centres it in the visible area.
     height must go to auto or the 100% would keep the old height and simply
     overflow past the bottom. */
  .contact-globe {
    top: 107px;
    height: auto;
  }
}


/* ==========================================================================
   REDUCED MOTION — kill the marker pulse for users who opt out
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .country-marker { animation: none; }
}


/* Headlines → --font-display (Archivo); rest stays Inter. Revert via variables.css. */
.contact-hero-title,
.contact-visit-title,
.contact-presence-title {
  font-family: var(--font-display);
  letter-spacing: -0.035em;   /* global headline tracking — tightened */
}