/*
Theme Name: Unique Holidays Child
Template: atooratravelagency
Version: 1.0.0
Description: Premium child theme for Unique Holidays travel agency.
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --uh-gold:        #D4A843;
  --uh-gold-light:  #F0C96A;
  --uh-teal:        #097770;
  --uh-teal-dark:   #065550;
  --uh-teal-light:  #00BFA6;
  --uh-navy:        #0D1B2A;
  --uh-navy-mid:    #1A2F42;
  --uh-white:       #FFFFFF;
  --uh-off-white:   #F8F9FA;
  --uh-gray-light:  #F0F2F5;
  --uh-gray:        #6C757D;
  --uh-text:        #1A1A2E;
  --uh-radius:      12px;
  --uh-radius-lg:   20px;
  --uh-shadow:      0 4px 24px rgba(9,119,112,.12);
  --uh-shadow-lg:   0 12px 48px rgba(9,119,112,.18);
  --uh-transition:  0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: var(--uh-text);
  background: var(--uh-white);
  -webkit-font-smoothing: antialiased;
}

a { transition: color var(--uh-transition); }
img { max-width: 100%; height: auto; }

/* ============================================================
   HEADER — premium dark with gold accent
   ============================================================ */
.wp-block-group.wb-header-wrapper,
header.wp-block-group {
  background: var(--uh-navy) !important;
  border-bottom: 3px solid var(--uh-gold) !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
}

.wp-block-site-title a,
.wp-block-site-title {
  color: var(--uh-white) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
}
.wp-block-site-title a::after {
  content: " ✈";
  color: var(--uh-gold);
  font-size: 1rem;
}

/* Nav links */
.wp-block-navigation a,
.wp-block-navigation__container a {
  color: var(--uh-white) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.3px;
  padding: 6px 4px !important;
  position: relative;
}
.wp-block-navigation a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--uh-gold);
  transition: width var(--uh-transition);
}
.wp-block-navigation a:hover::after { width: 100%; }
.wp-block-navigation a:hover { color: var(--uh-gold) !important; }

/* Book Now button */
.wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--uh-gold) !important;
  color: var(--uh-gold) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  border-radius: 50px !important;
  padding: 10px 24px !important;
  transition: all var(--uh-transition) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--uh-gold) !important;
  color: var(--uh-navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,168,67,.4);
}

/* ============================================================
   HERO / BANNER
   ============================================================ */
.wb-banner-section,
.banner-section,
[class*="banner"] .wp-block-cover,
.wp-block-cover {
  border-radius: 0 !important;
}

.wb-banner-section h1,
.banner-section h1 {
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-shadow: 0 3px 16px rgba(0,0,0,.45);
  letter-spacing: -1px;
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.wp-block-heading,
h1, h2, h3, h4 {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
}

h2.wp-block-heading {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
}

/* Gold underline decoration for section titles */
.wb-section-title,
.section-title,
.wp-block-heading.has-text-align-center {
  position: relative;
}

/* ============================================================
   DESTINATION CARDS
   ============================================================ */
.wb-destination-card,
.destination-card,
.wp-block-group[class*="destination"],
.wp-block-post {
  border-radius: var(--uh-radius-lg) !important;
  overflow: hidden;
  transition: transform var(--uh-transition), box-shadow var(--uh-transition) !important;
  box-shadow: var(--uh-shadow);
}
.wb-destination-card:hover,
.destination-card:hover,
.wp-block-post:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--uh-shadow-lg) !important;
}

/* ============================================================
   PACKAGE / TRIP CARDS
   ============================================================ */
.wb-trip-card,
.trip-card,
[class*="package-card"],
[class*="trip-card"] {
  background: var(--uh-white);
  border-radius: var(--uh-radius-lg) !important;
  overflow: hidden;
  border: 1px solid rgba(9,119,112,.1) !important;
  transition: all var(--uh-transition) !important;
  box-shadow: var(--uh-shadow);
}
.wb-trip-card:hover,
.trip-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--uh-teal) !important;
  box-shadow: var(--uh-shadow-lg) !important;
}

/* Price badge */
.wb-price,
.price-badge,
[class*="price"] {
  background: linear-gradient(135deg, var(--uh-gold), var(--uh-gold-light)) !important;
  color: var(--uh-navy) !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  padding: 4px 14px !important;
  font-size: 0.9rem !important;
}

/* ============================================================
   FEATURES / WHY US SECTION
   ============================================================ */
.wb-feature-icon,
.feature-icon,
[class*="feature"] .wp-block-image {
  background: linear-gradient(135deg, var(--uh-teal), var(--uh-teal-light)) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(9,119,112,.25) !important;
  transition: transform var(--uh-transition) !important;
}
.wb-feature-icon:hover,
[class*="feature"] .wp-block-image:hover {
  transform: scale(1.08) rotate(-2deg) !important;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.wb-testimonial,
.testimonial-card,
[class*="testimonial"] .wp-block-group {
  background: linear-gradient(135deg, var(--uh-navy), var(--uh-navy-mid)) !important;
  color: var(--uh-white) !important;
  border-radius: var(--uh-radius-lg) !important;
  padding: 2rem !important;
  border-left: 4px solid var(--uh-gold) !important;
  position: relative;
}
.wb-testimonial::before,
[class*="testimonial"] .wp-block-group::before {
  content: '"';
  position: absolute;
  top: 16px; left: 20px;
  font-size: 5rem;
  color: var(--uh-gold);
  opacity: 0.3;
  font-family: Georgia, serif;
  line-height: 1;
}

/* ============================================================
   SEARCH / TRIP SEARCH BAR
   ============================================================ */
.wb-trip-search,
.trip-search,
[class*="trip-search"] {
  background: var(--uh-white) !important;
  border-radius: var(--uh-radius-lg) !important;
  padding: 1.5rem !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
  margin-top: -40px !important;
  position: relative;
  z-index: 10;
}

/* ============================================================
   GALLERY GRID
   ============================================================ */
.wp-block-gallery,
.wb-gallery,
[class*="gallery"] .wp-block-group {
  border-radius: var(--uh-radius) !important;
  overflow: hidden;
}
.wp-block-gallery figure,
.wp-block-gallery .wp-block-image {
  border-radius: var(--uh-radius) !important;
  overflow: hidden;
  transition: transform var(--uh-transition) !important;
}
.wp-block-gallery figure:hover,
.wp-block-gallery .wp-block-image:hover {
  transform: scale(1.04) !important;
  z-index: 2;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.wb-cta-section,
.cta-section,
[class*="call-to-action"] {
  background: linear-gradient(135deg, var(--uh-teal-dark) 0%, var(--uh-navy) 100%) !important;
  border-radius: var(--uh-radius-lg) !important;
  position: relative;
  overflow: hidden;
}
.wb-cta-section::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(212,168,67,.15), transparent 70%);
  border-radius: 50%;
}

/* Primary CTA button */
.wb-cta-btn,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: linear-gradient(135deg, var(--uh-gold), var(--uh-gold-light)) !important;
  color: var(--uh-navy) !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  font-size: 1rem !important;
  border: none !important;
  transition: all var(--uh-transition) !important;
  box-shadow: 0 6px 24px rgba(212,168,67,.35) !important;
  letter-spacing: 0.3px;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(212,168,67,.5) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
footer.wp-block-template-part {
  background: var(--uh-navy) !important;
  color: rgba(255,255,255,.8) !important;
  border-top: 3px solid var(--uh-gold) !important;
}
footer a { color: var(--uh-gold) !important; }
footer a:hover { color: var(--uh-gold-light) !important; }
footer h3, footer h4 {
  color: var(--uh-white) !important;
  font-size: 1rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(212,168,67,.3);
  padding-bottom: 8px;
  margin-bottom: 12px !important;
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
details, .wp-block-details {
  border: 1px solid rgba(9,119,112,.15) !important;
  border-radius: var(--uh-radius) !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 0.75rem !important;
  transition: box-shadow var(--uh-transition) !important;
}
details[open], .wp-block-details[open] {
  border-color: var(--uh-teal) !important;
  box-shadow: var(--uh-shadow) !important;
}
summary {
  font-weight: 700 !important;
  color: var(--uh-text) !important;
  cursor: pointer;
  font-size: 1.05rem !important;
  list-style: none;
  padding: 4px 0;
}
summary::marker, summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+';
  float: right;
  color: var(--uh-teal);
  font-size: 1.4rem;
  font-weight: 300;
  transition: transform var(--uh-transition);
}
details[open] summary::after { content: '−'; }

/* ============================================================
   ANIMATIONS & SCROLL EFFECTS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.wb-animate-up { animation: fadeInUp 0.6s ease both; }
.wb-float      { animation: float 4s ease-in-out infinite; }

/* ============================================================
   SECTION BACKGROUNDS
   ============================================================ */
.has-tertiary-background-color,
.wp-block-group.has-tertiary-background-color {
  background: var(--uh-gray-light) !important;
}
.has-base-background-color,
.wp-block-group.has-base-background-color {
  background: var(--uh-navy) !important;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.uh-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--uh-gold), var(--uh-gold-light));
  color: var(--uh-navy);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 0.75rem;
}

/* Star ratings */
.uh-stars::before {
  content: "★★★★★";
  color: var(--uh-gold);
  font-size: 1.1rem;
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 768px) {
  .wp-block-site-title a { font-size: 1.3rem !important; }
  h2.wp-block-heading { font-size: 1.75rem !important; }
  .wb-trip-search { margin-top: 0 !important; border-radius: 0 !important; }
}

@media (max-width: 480px) {
  .wp-block-button__link { width: 100% !important; text-align: center !important; }
}