/*
Theme Name: Secret Ocean Dubai - Luxury Yacht Charters
Theme URI: https://secretoceandubai.com
Author: Secret Ocean Dubai
Author URI: https://secretoceandubai.com
Description: High-converting, Google Ads & SEO-optimized WordPress native theme engineered for luxury yacht charters and boat rentals in Dubai. Built for maximum Google Ads Quality Score, sub-second load times, and seamless Hostinger deployment.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: secret-ocean-dubai
*/

:root {
  --color-navy-dark: #071224;
  --color-navy-primary: #0B192C;
  --color-navy-light: #1E3E62;
  --color-gold-primary: #D4AF37;
  --color-gold-light: #F3C623;
  --color-gold-dark: #AA820A;
  --color-pearl: #F8FAFC;
  --color-slate-muted: #64748B;
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #128C7E;
  --font-serif: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --shadow-luxury: 0 20px 40px -15px rgba(11, 25, 44, 0.15);
  --shadow-gold: 0 10px 30px -5px rgba(212, 175, 55, 0.3);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  color: #1E293B;
  background-color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

body {
  line-height: 1.6;
  overflow-x: hidden;
}

/* Typography Helpers */
.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
}

.text-gold-gradient {
  background: linear-gradient(135deg, #F3C623 0%, #D4AF37 50%, #E5C358 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-navy {
  color: var(--color-navy-primary);
}

.bg-navy-dark {
  background-color: var(--color-navy-dark);
}

.bg-navy-primary {
  background-color: var(--color-navy-primary);
}

.bg-pearl {
  background-color: var(--color-pearl);
}

/* Luxury Card & Buttons */
.luxury-card {
  background: #FFFFFF;
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 16px;
  box-shadow: var(--shadow-luxury);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 25px 50px -12px rgba(11, 25, 44, 0.22);
}

.btn-gold {
  background: linear-gradient(135deg, #F3C623 0%, #D4AF37 100%);
  color: #071224;
  font-weight: 700;
  border-radius: 9999px;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  box-shadow: var(--shadow-gold);
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.btn-gold:hover {
  background: linear-gradient(135deg, #FFD700 0%, #E5C358 100%);
  transform: translateY(-2px);
  box-shadow: 0 15px 35px -5px rgba(212, 175, 55, 0.45);
}

.btn-whatsapp {
  background-color: var(--color-whatsapp);
  color: #FFFFFF;
  font-weight: 700;
  border-radius: 9999px;
  padding: 14px 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.4);
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
}

.btn-whatsapp:hover {
  background-color: var(--color-whatsapp-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -5px rgba(37, 211, 102, 0.55);
}

.btn-outline-gold {
  background: transparent;
  color: #D4AF37;
  border: 1.5px solid #D4AF37;
  font-weight: 600;
  border-radius: 9999px;
  padding: 13px 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-outline-gold:hover {
  background: rgba(212, 175, 55, 0.1);
  color: #F3C623;
  border-color: #F3C623;
  transform: translateY(-2px);
}