/* ============================================================
   THEME A — "AZULEJO" · faithful to the original brand
   Ocean blue #0d5585 · burnt orange #ca6702 · amber #ee9b00
   Light-first, no neon, original wave/shrimp patterns restored
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;800;900&display=swap');

:root {
  --deep: #0d5585;
  --deep-2: #0a466e;
  --deep-3: #1371af;
  --teal: #1371af;
  --aqua: #a8dadc;
  --coral: #ca6702;
  --coral-dark: #a85602;
  --lime: #ee9b00;
  --sand: #f6f8fa;
  --cream: #ffffff;
  --ink: #1d3557;
  --ink-soft: #44586b;
  --font-display: "Outfit", "Bricolage Grotesque", sans-serif;
  --shadow-pop: 0.5rem 0.5rem 0 rgba(29, 53, 87, 0.12);
  --shadow-deep: 0 24px 60px -20px rgba(13, 85, 133, 0.4);
}

.site-header { background: rgba(13, 85, 133, 0.95); border-bottom-color: rgba(168, 218, 220, 0.3); }
.topbar { color: #ffd166; border-bottom-color: rgba(255, 209, 102, 0.3); }

/* no neon, no glow */
.on-dark .kicker { color: #ffd166; text-shadow: none; }
.hero h1 em { color: #a8dadc; text-shadow: none; }
.brand img { filter: none; }
.hero-photo::after { background: radial-gradient(circle at 35% 35%, #ee9b00, #ca6702); box-shadow: none; }
.btn-coral { box-shadow: 0 8px 20px -10px rgba(202, 103, 2, 0.5); }
.btn-lime { box-shadow: 0 8px 20px -10px rgba(238, 155, 0, 0.5); color: #1d3557; }
.price-tag { box-shadow: 0 4px 12px rgba(29, 53, 87, 0.3); }
.review .stars { color: #ffd166; }
.tile h3 { color: #ffd166; }

/* original sea-life wave patterns back */
.hero::before, .page-hero::before, .wave-sep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/img/patterns/waves-blue.png');
  background-size: 300px auto;
  opacity: 0.3; /* matches the original site's pattern-blue opacity-30 */
  pointer-events: none;
}
/* blue bands: pattern as a 30% overlay, same as the original site's
   `absolute inset-0 pattern-blue opacity-30` */
.section-dark, .section-deep2 { background: var(--deep); position: relative; }
.section-dark::before, .section-deep2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/img/patterns/waves-blue.png');
  background-size: 300px auto;
  opacity: 0.3;
  pointer-events: none;
}
.section-dark > .wrap, .section-deep2 > .wrap { position: relative; z-index: 1; }
.scales { background-image: none; }
/* full-bleed pattern on the page itself; light sections go transparent so it
   runs uninterrupted edge-to-edge and between sections on every page */
body { background: #fff url('/assets/img/patterns/waves-white.png'); background-size: 300px auto; }
.section:not(.section-dark):not(.section-deep2), .section-cream { background: transparent; }

/* footer carries the pattern too — no plain gaps anywhere */
.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/img/patterns/waves-blue.png');
  background-size: 300px auto;
  opacity: 0.18;
  pointer-events: none;
}
.site-footer > .wrap { position: relative; z-index: 1; }