/*
Theme Name: SolsticeYatching
Theme URI: https://solsticeyachting.com
Author: Solstice Yachting / MelisWeb
Version: 3.0.0
Description: Luxury yacht management theme
Text Domain: solsticeyatching
*/

/* =====================================================
   TOKENS
   ===================================================== */
:root {
  --gold:        #b8975a;
  --gold-light:  #d4b483;
  --gold-pale:   #f0e6d0;
  --navy:        #08111f;
  --navy-mid:    #0d1e33;
  --cream:       #faf8f4;
  --white:       #ffffff;
  --text:        #1e293b;
  --text-muted:  #64748b;
  --border-gold: rgba(184,151,90,0.22);
  --header-h:    90px;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Jost', system-ui, sans-serif;
  --transition:  .3s ease;
}

/* =====================================================
   RESET
   ===================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font:inherit; }

/* =====================================================
   GOOGLE FONTS — loaded here so all pages get them
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@200;300;400;500&display=swap');

/* =====================================================
   HEADER
   ===================================================== */
.site-header {
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 4rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
.site-header.scrolled,
.site-header.solid {
  background: #ffffff;
  border-bottom-color: rgba(0,0,0,.08);
  box-shadow: 0 2px 20px rgba(0,0,0,.09);
}

/* Force white on ALL screen sizes — overrides any residual theme CSS */
@media (max-width: 1024px) { .site-header { background: #ffffff !important; } }
@media (max-width: 768px)  { .site-header { background: #ffffff !important; border-bottom-color: rgba(0,0,0,.08) !important; } }

.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo img {
  height: 64px;
  width: auto;
}

/* Desktop nav */
.main-navigation ul {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.main-navigation > ul > li { position: relative; }
.main-navigation > ul > li > a {
  display: block;
  padding: .6rem 1.1rem;
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  transition: color var(--transition);
  position: relative;
}
.main-navigation > ul > li > a::after {
  content:'';
  position: absolute;
  bottom: 4px; left: 1.1rem; right: 1.1rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.main-navigation > ul > li > a:hover { color: var(--gold); }
.main-navigation > ul > li > a:hover::after { transform: scaleX(1); }

/* Contact CTA in nav */
.main-navigation .nav-contact > a {
  border: 1px solid var(--navy) !important;
  color: var(--navy) !important;
  padding: .55rem 1.3rem !important;
  transition: background var(--transition), color var(--transition) !important;
}
.main-navigation .nav-contact > a::after { display:none !important; }
.main-navigation .nav-contact > a:hover {
  background: var(--navy) !important;
  color: white !important;
}

/* Dropdown */
.main-navigation .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 195px;
  background: rgba(8,17,31,.97);
  border: 1px solid var(--border-gold);
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.main-navigation .menu-item-has-children:hover .sub-menu,
.main-navigation .sub-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-navigation .sub-menu li a {
  display: block;
  padding: .7rem 1rem;
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  transition: color var(--transition), background var(--transition);
}
.main-navigation .sub-menu li a:hover {
  color: var(--gold-light);
  background: rgba(184,151,90,.08);
}

/* Hamburger */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  z-index: 1001;
}
.mobile-menu-toggle span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--navy);
  transition: all var(--transition);
}
.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4.5px,4.5px); }
.mobile-menu-toggle.active span:nth-child(2) { opacity:0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(4.5px,-4.5px); }

/* Mobile overlay */
.mobile-menu-overlay {
  position: fixed; inset:0;
  background: rgba(0,0,0,.6);
  z-index: 998;
  opacity:0; visibility:hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.mobile-menu-overlay.active { opacity:1; visibility:visible; }
body.menu-open { overflow:hidden; }

/* Mobile nav panel */
.mobile-navigation {
  display: none;
  position: fixed;
  top:0; right:-100%;
  width: min(320px, 90vw);
  height: 100vh;
  background: var(--navy);
  border-left: 1px solid var(--border-gold);
  padding-top: 90px;
  z-index: 999;
  overflow-y: auto;
  transition: right var(--transition);
}
.mobile-navigation.active { right:0; }
.mobile-nav-menu { padding: 1rem 1.5rem; }
.mobile-nav-menu > li {
  border-bottom: 1px solid var(--border-gold);
}
.mobile-nav-menu > li > a {
  display: block;
  padding: 1rem 0;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.mobile-dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem 0;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  text-align: left;
}
.mobile-dropdown-toggle .dropdown-arrow {
  font-size: .6rem;
  transition: transform .2s;
  color: var(--gold);
}
.mobile-dropdown-toggle.active .dropdown-arrow { transform: rotate(180deg); }
.mobile-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.mobile-dropdown.active { max-height: 200px; }
.mobile-dropdown li a {
  display: block;
  padding: .7rem 1rem;
  font-size: .72rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.5);
  transition: color var(--transition);
}
.mobile-dropdown li a:hover { color: var(--gold-light); }

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
  background: #050d18;
  border-top: 1px solid var(--border-gold);
  padding: 5rem 4rem 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 2rem;
}
.footer-section h3 {
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.footer-section ul li { margin-bottom: .6rem; }
.footer-section ul li a {
  font-size: .75rem;
  font-weight: 300;
  color: rgba(255,255,255,.35);
  letter-spacing: .04em;
  transition: color var(--transition);
}
.footer-section ul li a:hover { color: var(--gold-light); }
.footer-section p {
  font-size: .75rem;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(255,255,255,.3);
}
.footer-brand-logo {
  height: 50px; width: auto;
  margin-bottom: 1.4rem;
  opacity: .85;
}
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .6rem;
  font-size: .75rem;
  font-weight: 300;
  color: rgba(255,255,255,.35);
}
.footer-contact-item a {
  color: rgba(255,255,255,.35);
  transition: color var(--transition);
}
.footer-contact-item a:hover { color: var(--gold-light); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-bottom p {
  font-size: .62rem;
  color: rgba(255,255,255,.18);
  letter-spacing: .08em;
}

/* =====================================================
   SHARED PAGE COMPONENTS
   ===================================================== */

/* Page hero (inner pages) */
.lux-page-hero {
  position: relative;
  height: 60vh;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lux-page-hero-bg {
  position: absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: lux-zoom 20s ease-in-out infinite alternate;
}
@keyframes lux-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.12); }
}
.lux-page-hero-overlay {
  position: absolute; inset:0;
  background: linear-gradient(to bottom, rgba(8,17,31,.45) 0%, rgba(8,17,31,.72) 100%);
}
.lux-page-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 2rem;
  padding-top: var(--header-h);
}
.lux-page-hero-content h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 300;
  color: white;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.lux-page-hero-content h1 em { font-style:italic; color: var(--gold-light); }
.lux-page-hero-content p {
  font-size: .85rem;
  font-weight: 300;
  color: rgba(255,255,255,.65);
  letter-spacing: .06em;
  max-width: 560px;
  margin: 0 auto;
}

/* Section label */
.lux-label {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.3rem;
}
.lux-label::before {
  content:''; display:block;
  width: 26px; height: 1px;
  background: var(--gold);
  flex-shrink:0;
}
.lux-label span {
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}

/* Buttons */
.lux-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 2.4rem;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background var(--transition), transform var(--transition);
}
.lux-btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); color: var(--navy); }

.lux-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 2rem;
  font-family: var(--font-sans);
  font-size: .65rem;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.25);
  transition: color var(--transition), border-color var(--transition);
}
.lux-btn-ghost:hover { color: var(--gold-light); border-color: rgba(184,151,90,.5); }

.lux-btn-navy {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 2.4rem;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  border: 1px solid var(--border-gold);
  transition: background var(--transition), color var(--transition);
}
.lux-btn-navy:hover { background: var(--gold); color: var(--navy); }

/* Two col layout */
.lux-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.lux-two-col.reverse { direction: rtl; }
.lux-two-col.reverse > * { direction: ltr; }

.lux-two-col img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}

/* Text content */
.lux-section-h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  line-height: 1.12;
  color: var(--navy);
  margin-bottom: 1.5rem;
}
.lux-section-h2 em { font-style:italic; color: var(--gold); }
.lux-section-h2.light { color: white; }
.lux-section-h2.light em { color: var(--gold-light); }

.lux-lead {
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}
.lux-lead.light { color: rgba(255,255,255,.6); }

.lux-body-text {
  font-size: .85rem;
  font-weight: 300;
  line-height: 1.9;
  color: #555;
  margin-bottom: 1rem;
}
.lux-body-text.light { color: rgba(255,255,255,.5); }

/* Gold link */
.lux-gold-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 1rem;
  transition: gap var(--transition);
}
.lux-gold-link:hover { gap: 1rem; }

/* Section wrappers */
.lux-section {
  padding: 8rem 4rem;
}
.lux-section.cream  { background: var(--cream); }
.lux-section.navy   { background: var(--navy); }
.lux-section.navy-mid { background: var(--navy-mid); }
.lux-section.white  { background: var(--white); }

/* Dept badges */
.lux-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}
.lux-badge {
  display: inline-block;
  padding: .45rem 1.1rem;
  background: var(--gold);
  color: var(--navy);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Stats row */
.lux-stats-row {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.lux-stat-inline { display:flex; flex-direction:column; gap:.2rem; }
.lux-stat-inline strong {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--gold);
  line-height:1;
}
.lux-stat-inline span {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* CTA banner */
.lux-cta-banner {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lux-cta-banner-bg {
  position: absolute; inset:0;
  background-size: cover;
  background-position: center;
}
.lux-cta-banner-overlay {
  position: absolute; inset:0;
  background: linear-gradient(rgba(8,17,31,.65), rgba(8,17,31,.82));
}
.lux-cta-banner-inner {
  position: relative;
  z-index:2;
  text-align: center;
  padding: 3rem 2rem;
  max-width: 640px;
  color: white;
}
.lux-cta-banner-inner h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 300;
  line-height: 1.1;
  color: white;
  margin-bottom: 1.2rem;
}
.lux-cta-banner-inner h2 em { font-style:italic; color: var(--gold-light); }
.lux-cta-banner-inner p {
  font-size: .83rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255,255,255,.5);
  margin-bottom: 2.5rem;
}

/* Reveal animation */
.lux-reveal {
  opacity:0;
  transform: translateY(30px);
  transition: opacity .9s ease, transform .9s ease;
}
.lux-reveal.lux-visible { opacity:1; transform:translateY(0); }
.lux-d1 { transition-delay:.12s; }
.lux-d2 { transition-delay:.24s; }
.lux-d3 { transition-delay:.36s; }

/* =====================================================
   RESPONSIVE — global
   ===================================================== */
@media (max-width: 1024px) {
  .site-header { padding: 0 2rem; }
  .lux-section { padding: 6rem 2.5rem; }
  .lux-two-col { grid-template-columns:1fr; gap:3rem; }
  .lux-two-col.reverse { direction:ltr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .main-navigation { display:none; }
  .mobile-menu-toggle { display:flex; }
  .mobile-navigation { display:block; }

  .site-header {
    padding: 0 1.5rem;
    height: 80px;
  }
  .site-logo img { height: 60px; }

  .lux-section { padding: 4.5rem 1.5rem; }

  .lux-page-hero { height: 55vh; min-height:360px; }
  .lux-page-hero-content h1 { font-size: 2rem; }

  .footer-grid { grid-template-columns: 1fr; gap:2rem; }
  .site-footer { padding: 3.5rem 1.5rem 2rem; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }

  .lux-btn-gold, .lux-btn-ghost, .lux-btn-navy {
    width: 100%;
    justify-content: center;
  }
}

/* =====================================================
   CONTAINER UTILITY
   ===================================================== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 4rem;
}
@media(max-width:1024px){ .container { padding: 0 2.5rem; } }
@media(max-width:768px){  .container { padding: 0 1.5rem; } }

/* =====================================================
   MOBILE: TWO-COL / REVERSE FIX
   ===================================================== */
@media(max-width:768px){
  .lux-two-col       { grid-template-columns:1fr !important; gap:2.5rem !important; }
  .lux-two-col.reverse { direction:ltr !important; }

  /* Service list two-col inside form */
  .lux-form-row.two-col { grid-template-columns:1fr !important; }
}

/* =====================================================
   MOBILE: SECTIONS
   ===================================================== */
@media(max-width:768px){
  .lux-section { padding: 4rem 1.5rem; }
  .lux-cta-banner { min-height: 420px; }
  .lux-cta-banner-inner h2 { font-size: 2rem; }
  .lux-cta-banner-inner { padding: 2.5rem 1.5rem; }
}