/* =========================================================
   ExpatEase Living and Consulting — Site CSS (shared)
   "The Minimalist Partner" palette · Playfair Display + Inter
   ========================================================= */

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; color: #2E2E2E; background: #F9F7F2; -webkit-font-smoothing: antialiased; }
section { scroll-margin-top: 120px; }

/* ----- Hero / CTA backgrounds (use ../assets/banner/hero_01.webp) ----- */
.hero-bg {
  background-image: linear-gradient(to bottom, rgba(26,26,26,0.65), rgba(26,26,26,0.55), rgba(26,26,26,0.85)), url('../banner/hero_01.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cta-bg {
  background-image: linear-gradient(to bottom, rgba(26,26,26,0.85), rgba(26,26,26,0.92)), url('../banner/hero_01.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-hero-bg {
  background-image: linear-gradient(to bottom, rgba(26,26,26,0.78), rgba(26,26,26,0.62), rgba(26,26,26,0.88)), url('../banner/hero_01.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ----- Reveal on scroll ----- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ----- Card hover lift ----- */
.card-hover { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(26,26,26,0.18); }

/* ----- Gallery ----- */
.gallery-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.gallery-item { cursor: zoom-in; }
.gallery-item img { transition: transform 0.7s ease; }
.gallery-item:hover img { transform: scale(1.08); }

/* ----- Lightbox ----- */
.lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(10,10,10,0.94); display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-height: 88vh; max-width: 92vw; object-fit: contain; box-shadow: 0 24px 80px -20px rgba(0,0,0,0.55); border-radius: 6px; }
.lightbox-btn { position: absolute; background: rgba(249,247,242,0.08); border: 1px solid rgba(249,247,242,0.18); color: #F9F7F2; width: 44px; height: 44px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.lightbox-btn:hover { background: #BFA083; color: #1A1A1A; border-color: #BFA083; }
.lightbox-close { top: 22px; right: 22px; }
.lightbox-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(249,247,242,0.7); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
@media (max-width: 640px) {
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
}

/* ----- Partner carousel ----- */
.partner-track { display: flex; align-items: center; will-change: transform; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.partner-track.no-anim { transition: none; }
.partner-logo { filter: grayscale(100%); opacity: 0.55; transition: filter 0.5s ease, opacity 0.5s ease; }
.partner-logo:hover { filter: grayscale(0%); opacity: 1; }
.partner-dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(142,144,133,0.4); transition: background-color 0.3s ease, width 0.3s ease; cursor: pointer; border: none; padding: 0; }
.partner-dot.is-active { background: #BFA083; width: 24px; }

/* Mobile: 2 logos per viewport, sized by JS at runtime from the viewport's real width.
   Desktop: fixed 10rem (160px). High-specificity selector to beat Tailwind utilities. */
#partner-track .partner-slide { padding-left: 0.5rem; padding-right: 0.5rem; flex-shrink: 0; height: 5rem; display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) {
  #partner-track .partner-slide { width: 10rem !important; padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ----- Floating WA pulse ----- */
.wa-pulse { position: relative; }
.wa-pulse::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366;
  animation: pulseRing 2.4s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0;   }
}

/* ----- Hero scroll cue ----- */
.scroll-cue { animation: gentleBounce 2.4s ease-in-out infinite; }
@keyframes gentleBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ----- Language toggle (top bar) ----- */
.lang-btn { opacity: 0.7; transition: color 0.25s ease, opacity 0.25s ease, background-color 0.25s ease; }
.lang-btn:hover { opacity: 1; color: #BFA083; }
.lang-btn.is-active { opacity: 1; color: #BFA083; background-color: rgba(191,160,131,0.12); }
.lang-flag { width: 18px; height: 12px; object-fit: cover; box-shadow: 0 0 0 1px rgba(249,247,242,0.15); flex-shrink: 0; }

/* ----- Hide Google Translate UI elements ----- */
.goog-te-banner-frame, .goog-te-balloon-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-tooltip { display: none !important; }
font[style] { background: transparent !important; box-shadow: none !important; }

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .partner-track { animation: none; }
}

/* ----- Header sticky / scrolled state ----- */
.header-solid { background-color: rgba(249,247,242,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid #D9D2C7; }
.header-solid .nav-link, .header-solid .header-brand-text { color: #1A1A1A; }
.header-solid .header-burger { color: #1A1A1A; background: rgba(217,210,199,0.6); }

/* On subpages we want the solid header from the start (since the page hero is shorter) */
.force-solid-header .site-header { background-color: rgba(249,247,242,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid #D9D2C7; }
.force-solid-header .site-header .nav-link,
.force-solid-header .site-header .header-brand-text { color: #1A1A1A; }
.force-solid-header .site-header .header-burger { color: #1A1A1A; background: rgba(217,210,199,0.6); }

/* Active nav highlight */
.nav-link.is-active { color: #BFA083 !important; }

/* ----- Form inputs ----- */
.form-input {
  background: #F9F7F2; border: 1px solid #D9D2C7; border-radius: 8px;
  padding: 12px 16px; font-size: 14px; color: #1A1A1A; width: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-input::placeholder { color: #8E9085; }
.form-input:focus { outline: none; border-color: #BFA083; box-shadow: 0 0 0 2px rgba(191,160,131,0.18); }

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238E9085'%3E%3Cpath d='M5 8l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 40px;
}

/* ----- Breadcrumb ----- */
.breadcrumb a { color: rgba(249,247,242,0.7); transition: color 0.25s ease; }
.breadcrumb a:hover { color: #BFA083; }
.breadcrumb .sep { color: rgba(249,247,242,0.35); margin: 0 8px; }
.breadcrumb .current { color: #BFA083; }

/* ----- Page hero (subpages) ----- */
.page-hero { min-height: 44vh; }
@media (min-width: 768px) { .page-hero { min-height: 48vh; } }

/* ----- Site header offset spacer (used on subpages so content isn't hidden) ----- */
.header-spacer { height: 0; }