/* Q Pool Doha — Pool Services site styles */

:root {
  --color-primary: #1F4E79;   /* deep pool navy */
  --color-secondary: #2980B9; /* pool water blue */
  --color-cta: #0EA5E9;       /* bright sky/pool CTA */
  --color-cta-dark: #0284C7;
  --color-aqua: #22D3EE;      /* cyan pool highlight */
  --color-brand: #FFEE00;     /* Qpool brand yellow (from letterhead) */
  --color-brand-dark: #1A1A1A; /* Qpool brand black (frame on letterhead) */
  --color-bg: #F0F9FF;        /* sky-50 gentle water tint */
  --color-text: #0F172A;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: -0.01em;
}

/* Pool water hero gradient (used behind images as fallback) */
.hero-gradient {
  background:
    radial-gradient(1200px 700px at 80% 10%, rgba(34,211,238,0.30), transparent 60%),
    radial-gradient(900px 600px at 10% 90%, rgba(14,165,233,0.25), transparent 60%),
    linear-gradient(160deg, #0B2845 0%, #1F4E79 45%, #2980B9 100%);
}

.aqua-gradient {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.4), transparent 50%),
    linear-gradient(135deg, #0EA5E9 0%, #22D3EE 50%, #67E8F9 100%);
}

/* Caustic water overlay */
.water-pattern {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10) 0%, transparent 8%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.08) 0%, transparent 10%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.06) 0%, transparent 12%);
  background-size: 240px 240px, 180px 180px, 320px 320px;
}

/* Hero image overlay — darkens pool photos so white text is readable */
.image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.25) 0%, rgba(15,23,42,0.55) 60%, rgba(15,23,42,0.78) 100%),
    linear-gradient(135deg, rgba(31,78,121,0.55) 0%, rgba(14,165,233,0.25) 100%);
  pointer-events: none;
}

/* Subtle ripple animation */
@keyframes ripple {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.ripple { animation: ripple 6s ease-in-out infinite; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-text {
  background: linear-gradient(90deg, #BAE6FD 0%, #FFFFFF 50%, #BAE6FD 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3.5s linear infinite;
}

@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.float-slow { animation: floatUpDown 7s ease-in-out infinite; }

/* Header — floating pill */
[data-site-header] .pill {
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(226,232,240,0.7);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 10px 30px -10px rgba(15,23,42,0.10),
    0 4px 10px -6px rgba(15,23,42,0.08);
  transition: background-color 240ms ease, box-shadow 240ms ease, border-radius 240ms ease;
}
[data-site-header].is-scrolled .pill {
  background: rgba(255,255,255,0.95);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 16px 36px -14px rgba(15,23,42,0.20),
    0 6px 14px -8px rgba(15,23,42,0.12);
}
.body-pad-floating {
  /* Reserve space for the fixed floating header on pages that don't have an absolute hero */
  padding-top: calc(72px + 1rem);
}
@media (min-width: 640px) {
  .body-pad-floating { padding-top: calc(72px + 1.25rem); }
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ripple, .shimmer-text, .float-slow { animation: none; }
  html { scroll-behavior: auto; }
}

/* Stat counter pulse */
@keyframes statPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.stat-pulse { animation: statPulse 2.4s ease-in-out 0.4s 1; }

/* Cards */
.card-lift {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.card-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -16px rgba(31,78,121,0.22);
  border-color: rgba(14,165,233,0.45);
}

/* Image with overlay reveal on hover (gallery cards) */
.media-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: linear-gradient(135deg, #1F4E79, #0EA5E9);
}
.media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.media-card:hover img {
  transform: scale(1.08);
}
.media-card .media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.05) 0%, rgba(15,23,42,0.3) 50%, rgba(15,23,42,0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: #fff;
  opacity: 1;
  transition: background 360ms ease;
  pointer-events: none;
}
.media-card:hover .media-overlay {
  background: linear-gradient(180deg, rgba(31,78,121,0.15) 0%, rgba(15,23,42,0.45) 50%, rgba(15,23,42,0.92) 100%);
}
.media-card .media-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  color: #0EA5E9;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Pill / Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem;
  background: rgba(14,165,233,0.10);
  color: #0369A1;
  border: 1px solid rgba(14,165,233,0.30);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Footer */
.footer-dark { background: #0B1F37; color: #CBD5E1; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 50;
}
.dropdown:hover .dropdown-panel,
.dropdown:focus-within .dropdown-panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Filter chips */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid #BAE6FD;
  background: #FFFFFF;
  color: #1F4E79;
  cursor: pointer;
  transition: all 180ms ease;
}
.chip:hover {
  border-color: #0EA5E9;
  color: #0EA5E9;
  transform: translateY(-1px);
}
.chip.is-active {
  background: linear-gradient(135deg, #0EA5E9, #22D3EE);
  border-color: #0EA5E9;
  color: #FFFFFF;
  box-shadow: 0 6px 16px -6px rgba(14,165,233,0.6);
}

/* Forms */
.form-input {
  width: 100%;
  padding: 0.75rem 0.95rem;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 0.55rem;
  font-size: 0.95rem;
  color: #0F172A;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.form-input::placeholder { color: #94A3B8; }
.form-input:focus {
  outline: none;
  border-color: #0EA5E9;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
}
.form-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1F4E79;
}

/* Wave fill helpers */
.wave-fill-bg { fill: #F0F9FF; }
.wave-fill-white { fill: #FFFFFF; }

/* ===== Swiper customisations ===== */
.swiper-button-next,
.swiper-button-prev {
  width: 48px !important;
  height: 48px !important;
  background: rgba(255,255,255,0.95);
  color: #0EA5E9 !important;
  border-radius: 999px;
  box-shadow: 0 8px 24px -8px rgba(15,23,42,0.4);
  transition: background 180ms ease, transform 180ms ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #0EA5E9;
  color: #FFFFFF !important;
  transform: scale(1.06);
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 18px !important;
  font-weight: 800 !important;
}

.swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background: rgba(255,255,255,0.45) !important;
  opacity: 1 !important;
  transition: width 240ms ease, background 240ms ease;
}
.swiper-pagination-bullet-active {
  width: 32px !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
}

/* Hero split-screen slider */
.split-hero {
  position: relative;
  isolation: isolate;
}
.split-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(720px 480px at 88% 12%, rgba(14,165,233,0.16), transparent 60%),
    radial-gradient(600px 420px at 10% 90%, rgba(34,211,238,0.12), transparent 60%),
    linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 60%, #ECFEFF 100%);
}
.split-hero .image-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(15,23,42,0.30),
    0 12px 24px -10px rgba(14,165,233,0.18);
  background: linear-gradient(135deg, #1F4E79, #0EA5E9);
}
.split-hero .image-card::after {
  /* slim inner ring */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  pointer-events: none;
}
.split-hero .image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 8000ms ease;
}
.split-hero .swiper-slide-active .image-card img {
  transform: scale(1.18);
}
.split-hero .hero-text {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease 100ms, transform 700ms ease 100ms;
}
.split-hero .swiper-slide-active .hero-text {
  opacity: 1;
  transform: translateY(0);
}

/* Slide counter pill */
.slide-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.85rem;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #1F4E79;
}
.slide-counter .bar {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 2px;
  background: rgba(31,78,121,0.18);
  overflow: hidden;
  border-radius: 2px;
}
.slide-counter .bar > span {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, #0EA5E9, #22D3EE);
  transition: width 240ms ease;
}

/* Hero nav buttons (split slider) */
.split-hero .swiper-button-prev,
.split-hero .swiper-button-next {
  position: static !important;
  margin: 0 !important;
  width: 44px !important;
  height: 44px !important;
}

/* Testimonial slider */
.testimonial-slider {
  padding-bottom: 60px !important;
}
.testimonial-slider .swiper-pagination {
  bottom: 0 !important;
}
.testimonial-slider .swiper-pagination-bullet {
  background: #BAE6FD !important;
}
.testimonial-slider .swiper-pagination-bullet-active {
  background: #0EA5E9 !important;
}

/* Logo strip */
.logo-strip-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

/* Marquee scroll for partner logos */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 35s linear infinite;
}

/* Focus rings */
:focus-visible {
  outline: 2px solid #0EA5E9;
  outline-offset: 2px;
  border-radius: 4px;
}

@media print {
  [data-site-header], footer { display: none; }
}