/*
 Theme Name:   Astra Luxury Child V2
 Theme URI:    https://dubaibali.com
 Description:  $10M premium child theme for Astra. Complete design system with parallax, stagger animations, editorial layouts, transparent header, video hero support, AEO optimization, and mobile-first responsive CSS. Built from DubaiBali.com production blueprint. Activate, change 14 config lines, add content.
 Author:       BaliDubai Team
 Author URI:   https://dubaibali.com
 Template:     astra
 Version:      2.0.0
 License:      GPL v2 or later
 Text Domain:  astra-luxury-child
*/

/* ===========================================
   BRAND DESIGN TOKENS
   EDIT THESE 6 COLORS TO REBRAND THE ENTIRE SITE
   =========================================== */
:root {
  --brand-navy: #0A1628;
  --brand-gold: #C5A572;
  --brand-teal: #1A7A7A;
  --brand-white: #FAFAF8;
  --brand-warm-bg: #FAFAF8;
  --brand-card-dark: #111E30;

  /* Derived colors (auto-calculated) */
  --brand-gold-hover: color-mix(in srgb, var(--brand-gold) 85%, white);
  --brand-navy-light: color-mix(in srgb, var(--brand-navy) 80%, white);
  --brand-text-on-dark: rgba(250, 250, 248, 0.7);
  --brand-text-on-light: #2D3748;
  --brand-shadow: rgba(0, 0, 0, 0.12);
  --brand-shadow-hover: rgba(0, 0, 0, 0.2);

  /* $10M SPACING SCALE */
  --space-section: clamp(80px, 10vw, 160px);
  --space-section-inner: clamp(48px, 6vw, 80px);
  --space-content: clamp(24px, 3vw, 48px);
  --space-card: clamp(20px, 2.5vw, 32px);

  /* $10M TYPOGRAPHY SCALE */
  --type-h1: clamp(36px, 5.5vw, 72px);
  --type-h2: clamp(28px, 4vw, 54px);
  --type-h3: clamp(20px, 2.5vw, 32px);
  --type-h4: clamp(18px, 2vw, 24px);
  --type-body: clamp(16px, 1.2vw, 19px);
  --type-small: clamp(13px, 1vw, 15px);
  --type-tagline: clamp(12px, 1vw, 14px);

  /* LETTER SPACING — luxury feel */
  --ls-tagline: 3px;
  --ls-button: 1.5px;
  --ls-nav: 0.5px;

  /* TRANSITIONS */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
  --transition-reveal: 0.8s ease;
}

/* ===========================================
   GLOBAL TYPOGRAPHY
   =========================================== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--type-body);
  color: var(--brand-text-on-light);
  background: var(--brand-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
}

h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }
h4 { font-size: var(--type-h4); }

/* ===========================================
   RESPONSIVE GRID SYSTEM
   Targets inline-styled grids from REST API
   BOTH spacing variants for CSS attribute selectors
   =========================================== */
.db-section [style*="grid-template-columns: repeat(3"],
.db-section [style*="grid-template-columns:repeat(3"] {
  gap: var(--space-card) !important;
}

.db-section [style*="grid-template-columns: repeat(2"],
.db-section [style*="grid-template-columns:repeat(2"] {
  gap: var(--space-card) !important;
}

/* Mobile: All grids → single column */
@media (max-width: 768px) {
  .db-section [style*="grid-template-columns: repeat(3"],
  .db-section [style*="grid-template-columns:repeat(3"],
  .db-section [style*="grid-template-columns: repeat(2"],
  .db-section [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .db-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Tablet: 3-col → 2-col */
@media (min-width: 769px) and (max-width: 1024px) {
  .db-section [style*="grid-template-columns: repeat(3"],
  .db-section [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .db-section p {
    font-size: 15px !important;
  }
}

/* ===========================================
   HERO SECTION
   Supports both static image AND video hero
   =========================================== */
.db-hero {
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(197,165,114,0.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: 2;
}

/* Video hero — auto-skip if no video (CSS is harmless) */
.db-hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.db-hero-video-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(10,22,40,0.3) 0%, rgba(10,22,40,0.75) 100%);
  z-index: 1;
}

.db-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  padding: 0 24px;
}

.db-hero h1 {
  font-size: var(--type-h1);
  color: var(--brand-white);
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.db-hero .db-tagline {
  color: var(--brand-gold);
  font-size: var(--type-tagline);
  letter-spacing: var(--ls-tagline);
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Mobile: fallback to static image, hide video */
@media (max-width: 768px) {
  .db-hero-video { display: none; }
  .db-hero { background-size: cover; background-position: center; min-height: 70vh; }
}

/* ===========================================
   TRANSPARENT → SOLID HEADER (homepage only)
   JS handles the transition, CSS provides base
   =========================================== */
body.home #masthead,
body.home .ast-primary-header {
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

body.home .header-transparent #masthead,
body.home .header-transparent .ast-primary-header {
  background: transparent !important;
}

body.home .header-solid #masthead,
body.home .header-solid .ast-primary-header {
  background: var(--brand-navy) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

/* ===========================================
   SCROLL ANIMATIONS
   Triggered by IntersectionObserver in scripts.js
   =========================================== */
.db-anim-hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.db-anim-visible {
  opacity: 1;
  transform: translateY(0);
}

.db-anim-delay-1 { transition-delay: 0.1s; }
.db-anim-delay-2 { transition-delay: 0.2s; }
.db-anim-delay-3 { transition-delay: 0.3s; }
.db-anim-delay-4 { transition-delay: 0.4s; }
.db-anim-delay-5 { transition-delay: 0.5s; }

/* STAGGER ANIMATION — children animate one by one */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-stagger].db-stagger-active > * {
  opacity: 1;
  transform: translateY(0);
}

/* PARALLAX CONTAINER */
.db-parallax-container {
  overflow: hidden;
  position: relative;
}

.db-parallax-container img,
[data-parallax] {
  will-change: transform;
  transform: translateZ(0);
}

/* SCALE ON SCROLL */
[data-scroll-scale] {
  overflow: hidden;
  border-radius: 12px;
}

[data-scroll-scale] img {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ===========================================
   CONTENT IMAGES (figure.db-content-image)
   =========================================== */
figure.db-content-image {
  margin: var(--space-content) 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px var(--brand-shadow);
}

figure.db-content-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  figure.db-content-image:hover img {
    transform: scale(1.02);
  }
}

/* ===========================================
   EDITORIAL LAYOUT PATTERNS
   For magazine-style content pages
   =========================================== */

/* Split Image-Text 50/50 */
.db-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-content);
  align-items: center;
  margin: var(--space-section-inner) 0;
}

.db-split-reverse {
  direction: rtl;
}
.db-split-reverse > * {
  direction: ltr;
}

@media (max-width: 768px) {
  .db-split, .db-split-reverse {
    grid-template-columns: 1fr !important;
    direction: ltr;
  }
}

/* Pull Quote */
.db-pull-quote {
  border-left: 3px solid var(--brand-gold);
  padding: 24px 32px;
  margin: var(--space-section-inner) 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.5vw, 28px);
  font-style: italic;
  color: var(--brand-navy);
  line-height: 1.5;
  background: rgba(197, 165, 114, 0.05);
  border-radius: 0 8px 8px 0;
}

/* Full-Width Image Break */
.db-full-image {
  margin: var(--space-section-inner) -24px;
  overflow: hidden;
}

.db-full-image img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .db-full-image { margin-left: -16px; margin-right: -16px; }
  .db-full-image img { height: 40vh; }
}

/* Stats Row */
.db-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-card);
  text-align: center;
  padding: var(--space-section-inner) 0;
}

.db-stats-row .db-stat-number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  color: var(--brand-gold);
  display: block;
}

.db-stats-row .db-stat-label {
  color: var(--brand-text-on-light);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: var(--type-small);
  margin-top: 8px;
}

@media (max-width: 768px) {
  .db-stats-row { grid-template-columns: 1fr; gap: 32px; }
}

/* ===========================================
   AEO ATOMIC ANSWER (Featured Snippet Target)
   =========================================== */
.aeo-atomic-answer {
  background: #f8f9fa;
  border-left: 4px solid var(--brand-gold);
  padding: 20px 24px;
  margin: var(--space-content) 0;
  border-radius: 0 8px 8px 0;
  font-size: 17px;
  line-height: 1.7;
}

/* ===========================================
   KILL WPAUTOP EMPTY PARAGRAPHS IN GRIDS
   =========================================== */
.db-section [style*="display: grid"] > p,
.db-section [style*="display:grid"] > p {
  display: none !important;
}

/* ===========================================
   CARD HOVER EFFECTS
   =========================================== */
.db-section a[style*="border-radius"] {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .db-section a[style*="border-radius"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px var(--brand-shadow-hover);
  }
}

/* ===========================================
   CTA BUTTONS
   =========================================== */
.db-cta-button {
  display: inline-block;
  padding: 16px 40px;
  background: var(--brand-gold);
  color: var(--brand-navy) !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

@media (hover: hover) {
  .db-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(197, 165, 114, 0.3);
    filter: brightness(1.1);
    color: var(--brand-navy) !important;
    text-decoration: none;
  }
}

/* ===========================================
   COUNTER BAR
   =========================================== */
.db-counter-number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: var(--brand-gold);
}

/* ===========================================
   INLINE INQUIRY FORM (dark theme)
   =========================================== */
.db-inquiry-widget {
  background: var(--brand-navy);
  padding: var(--space-section-inner);
  border-radius: 16px;
  max-width: 600px;
  margin: var(--space-content) auto;
}

.db-inquiry-widget input,
.db-inquiry-widget select,
.db-inquiry-widget textarea {
  width: 100%;
  padding: 14px 20px;
  margin-bottom: 12px;
  border: 1px solid rgba(197,165,114,0.3);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: var(--brand-white);
  font-size: 16px;
  font-family: inherit;
  transition: border-color var(--transition-fast);
  min-height: 44px;
}

.db-inquiry-widget input:focus,
.db-inquiry-widget select:focus,
.db-inquiry-widget textarea:focus {
  outline: none;
  border-color: var(--brand-gold);
}

.db-inquiry-widget input::placeholder,
.db-inquiry-widget textarea::placeholder {
  color: rgba(250,250,248,0.4);
}

/* ===========================================
   PREMIUM FOOTER
   =========================================== */
.db-footer {
  background: var(--brand-navy);
  color: var(--brand-white);
  padding: var(--space-section) 24px 30px;
}

.db-footer a {
  color: var(--brand-text-on-dark);
  text-decoration: none;
  transition: color var(--transition-base);
}

@media (hover: hover) {
  .db-footer a:hover { color: var(--brand-gold); }
}

/* ===========================================
   MEGA MENU DROPDOWN
   =========================================== */
.ast-desktop-popup-content .menu-item-has-children > .sub-menu {
  background: var(--brand-navy) !important;
  border: 1px solid rgba(197, 165, 114, 0.2);
  border-radius: 12px;
  padding: 12px 0;
  min-width: 220px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.ast-desktop-popup-content .sub-menu .menu-item > a {
  color: var(--brand-white) !important;
  padding: 10px 24px;
  transition: all var(--transition-fast);
}

@media (hover: hover) {
  .ast-desktop-popup-content .sub-menu .menu-item > a:hover {
    color: var(--brand-gold) !important;
    background: rgba(197, 165, 114, 0.08);
  }
}

/* ===========================================
   WHATSAPP FLOATING BUTTON
   =========================================== */
.db-whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
  z-index: 9999;
  transition: transform var(--transition-base);
  cursor: pointer;
}

@media (hover: hover) {
  .db-whatsapp-float:hover { transform: scale(1.1); }
}

.db-whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: white;
}

/* ===========================================
   CSS SCROLL-SNAP CAROUSEL
   Lightweight alternative to Swiper/Slick
   =========================================== */
.db-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-card);
  padding: 8px 0 24px;
  scrollbar-width: none;
}

.db-carousel::-webkit-scrollbar { display: none; }

.db-carousel > * {
  scroll-snap-align: start;
  flex: 0 0 calc(33.333% - var(--space-card));
  min-width: 280px;
}

@media (max-width: 768px) {
  .db-carousel > * { flex: 0 0 85%; }
}

/* Carousel pagination dots */
.db-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.db-carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(197,165,114,0.3);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-carousel-dot::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: inherit;
}

.db-carousel-dot.active {
  background: var(--brand-gold);
}

/* ===========================================
   ACCESSIBILITY: TOUCH TARGETS + FOCUS
   =========================================== */
a, button, input, select, textarea,
[role="button"] {
  min-height: 44px;
}

:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* Skip link for accessibility */
.db-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--brand-gold);
  color: var(--brand-navy);
  padding: 8px 16px;
  z-index: 10000;
  font-weight: 600;
  transition: top var(--transition-fast);
}

.db-skip-link:focus {
  top: 0;
}