/*
Theme Name: Van Cleef & Arpels - Egypt Personalized Experience
Theme URI: https://github.com/novamesh/vancleefarpels
Author: Nova Mesh Solutions
Description: Custom WordPress theme for the Egypt Hosting Website. Highly personalized guest experience with cinematic scroll-driven loading and interactive sand-reveal effects.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: vancleefarpels
*/

/* --- DESIGN SYSTEM TOKENS (Section 7C) --- */
:root {
  /* Color Palette */
  --color-sand: #e5d5b7;        /* Primary Background */
  --color-cream: #FAF6EE;       /* Secondary Background / Form Background */
  --color-teal: #1E3B38;        /* Primary Accent (headers/footers/accents) */
  --color-gold: #B8912F;        /* Metallic Accent (buttons/dividers/icons) */
  --color-terracotta: #B5673E;  /* Secondary Accent (highlights/hovers) */
  --color-emerald: #3C5C4A;     /* Tertiary Accent (very rare details) */
  --color-ink: #2B2620;         /* Primary Text */
  --color-off-white: #F5F0E6;   /* Text on Dark Backgrounds */

  /* Typography Fonts */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;
  
  /* Transition timings */
  --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.2s ease;
}

/* --- BASE STYLES --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-ink);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- TYPOGRAPHY SCALE (Desktop -> Mobile responsive) --- */
h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-ink);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
}

p {
  font-size: clamp(16px, 2vw, 18px);
  margin-bottom: 1.5rem;
}

a {
  color: var(--color-teal);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--color-terracotta);
}

/* --- PERSISTENT UTILITIES --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Uppercase buttons and labels */
.nav-link, .btn-action, .small-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.btn-primary {
  display: inline-block;
  padding: 12px 30px;
  background-color: var(--color-teal);
  color: var(--color-off-white);
  border: 1px solid var(--color-teal);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-primary:hover {
  background-color: transparent;
  color: var(--color-teal);
  border-color: var(--color-teal);
}

.btn-secondary {
  display: inline-block;
  padding: 12px 30px;
  background-color: transparent;
  color: var(--color-teal);
  border: 1px solid var(--color-teal);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-secondary:hover {
  background-color: var(--color-teal);
  color: var(--color-off-white);
}

/* Hidden state utility */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

/* --- GLOBAL HEADER (Section 7A) --- */
.global-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 1100;
  /* Always-on frosted cream glass effect */
  background-color: rgba(230, 218, 196, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(184, 145, 47, 0.18);
  display: flex;
  align-items: center;
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Deeper glass when scrolled - stronger cream + gold shadow */
.global-header.scrolled {
  background-color: rgba(250, 246, 238, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(184, 145, 47, 0.25);
  box-shadow: 0 2px 24px rgba(43, 38, 32, 0.07);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 40px;
}

.header-left, .header-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.header-right {
  justify-content: flex-end;
}

.header-center {
  flex: 2;
  text-align: center;
}

/* Brand Logo (centered) */
.brand-logo {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--color-ink);
  text-decoration: none;
  text-transform: uppercase;
}

.header-date {
  color: rgba(43, 38, 32, 0.6);
  font-size: 11px;
  letter-spacing: 2px;
}

/* Hamburger Toggle Button - Sleek Luxury 2-Line Design */
.hamburger-btn {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  padding: 0;
  color: var(--color-ink);
  transition: color 0.3s ease;
}

.hamburger-btn span {
  display: block;
  width: 24px;
  height: 1.5px;
  background-color: currentColor;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.hamburger-btn span:nth-child(2) {
  width: 16px; /* Shorter second bar for premium branding style */
}

/* Hamburger button hover effect */
.hamburger-btn:hover {
  color: var(--color-gold); /* Change color to gold on hover */
}
.hamburger-btn:hover span:nth-child(1) {
  width: 16px;
}
.hamburger-btn:hover span:nth-child(2) {
  width: 24px;
}

/* --- SLIDING HAMBURGER SIDE NAVIGATION MENU (Luxury Parchment Redesign) --- */
.hamburger-menu {
  position: fixed;
  top: 0;
  left: -350px;
  width: min(350px, 85vw);
  height: 100vh;
  background-color: #FAF6EE;
  background-image: url('assets/images/card-white-space.webp');
  background-size: cover;
  background-position: center;
  color: #2B2620;
  z-index: 100000;
  box-shadow: 20px 0 50px rgba(43, 38, 32, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  padding: 48px 36px 36px 36px;
  border-right: 1px solid rgba(184, 145, 47, 0.3);
  box-sizing: border-box;
  transition: left 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hamburger-menu.active {
  left: 0;
}

.close-menu-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: 1px solid rgba(184, 145, 47, 0.4);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  color: #B8912F;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}
.close-menu-btn:hover {
  background-color: #B8912F;
  color: #FAF6EE;
  border-color: #B8912F;
  transform: rotate(90deg);
}

/* SIDEBAR LOGO — NO ANIMATION */
.menu-logo {
  margin-top: 16px;
  margin-bottom: 24px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-logo img {
  max-width: 130px;
  height: auto;
  display: block;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
.menu-logo img:hover {
  animation: none !important;
  transform: none !important;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 12px;
  margin: auto 0;
}

.menu-nav-link {
  display: block;
  width: 100%;
  padding: 14px 0;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #2B2620;
  text-align: center;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 145, 47, 0.12);
  transition: color 0.35s ease, letter-spacing 0.35s ease, border-color 0.35s ease;
}
.menu-nav-link:last-child {
  border-bottom: none;
}
.menu-nav-link:hover {
  color: #B8912F;
  border-color: rgba(184, 145, 47, 0.45);
  letter-spacing: 3.5px;
}

.menu-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(184, 145, 47, 0.2);
}
.menu-footer p {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8B7038;
  margin: 0;
}

/* Sliding Menu Backdrop Overlay */
.menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(30, 59, 56, 0.35); /* tinted with teal */
  backdrop-filter: blur(4px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.menu-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* --- GLOBAL FOOTER --- */
.global-footer {
  padding: 80px 0 60px 0;
  background-color: var(--color-teal);
  color: var(--color-off-white);
  border-top: 1px solid var(--color-gold);
  text-align: center;
  position: relative;
}

/* Decorative border inset for the footer */
.global-footer::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  border: 1px solid rgba(184, 145, 47, 0.15);
  pointer-events: none;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 6px;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.footer-ornament {
  margin-bottom: 20px;
  color: var(--color-gold);
  opacity: 0.85;
  position: relative;
  z-index: 2;
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  letter-spacing: 1px;
  color: rgba(245, 240, 230, 0.75);
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}

.footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 17px;
  color: rgba(245, 240, 230, 0.8);
}

.footer-icon {
  width: 18px;
  height: 18px;
  color: var(--color-gold);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.footer-copyright-text {
  font-size: 15px;
  color: rgba(245, 240, 230, 0.45);
  margin-top: auto;
}

.footer-column-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-cream);
  margin-bottom: 24px;
  position: relative;
  text-transform: capitalize;
}

.footer-column-title::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background-color: var(--color-gold);
  margin-top: 8px;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-list li {
  margin-bottom: 12px;
}

.footer-links-list a {
  font-size: 17px;
  color: rgba(245, 240, 230, 0.65);
  text-decoration: none;
  transition: var(--transition-fast);
}

.footer-links-list a:hover {
  color: var(--color-gold);
  padding-left: 4px;
}

.footer-totop-btn {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 5;
  background-color: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.footer-totop-btn:hover {
  background-color: var(--color-gold);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(184,145,47,0.2);
}


/* Global Button Consistency Fix */
.hub-btn-primary, .sp-back-btn, .btn-submit-intake {
  background-image: url('assets/images/button-sand-bg.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  color: #1E3B38 !important;
  border: 1px solid rgba(184, 145, 47, 0.4) !important;
}

.hub-btn-primary:hover, .sp-back-btn:hover, .btn-submit-intake:hover {
  color: #1E3B38 !important;
  border-color: #B8912F !important;
  filter: brightness(1.06) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(43, 38, 32, 0.12) !important;
}




.hub-btn-primary {
  font-size: 14px !important;
  padding: 12px 30px 16px !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
}



/* --- RESTORED FOOTER CSS --- */
.inner-back-btn:hover { color: var(--color-ink) !important; transform: translateX(-2px); }
.inner-guest-form-btn:hover { background-color: var(--color-gold) !important; color: var(--color-cream) !important; border-color: var(--color-gold) !important; }
.eg-site-footer { background-color: #132a27; color: rgba(245, 240, 230, 0.7); padding: 80px 0 40px; position: relative; overflow: hidden; font-family: var(--font-body); }
.footer-columns-container { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 40px 20px; }
@media (max-width: 991px) { .footer-columns-container { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 575px) { .footer-columns-container { grid-template-columns: 1fr; } }
.footer-column { display: flex; flex-direction: column; }
.footer-desc { font-size: 17px; line-height: 1.6; margin-bottom: 24px; color: rgba(245, 240, 230, 0.55); }

.footer-contact-list { list-style: none; padding: 0; margin: 0 0 24px; }
.footer-copy { font-family: var(--font-body); font-size: 12px; }



/* RESPONSIVE FLEX ROW */
.responsive-flex-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) {
  .responsive-flex-row {
    flex-direction: row;
    gap: 40px;
  }
}

/* Reduce header padding and heading sizes on tablet and mobile for tighter layout */
@media (max-width: 1124px) {
  .global-header, .inner-global-header {
    min-height: 64px !important;
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }
  .header-container { min-height: 64px !important; }
  .bm-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 60px); padding-bottom: 56px !important; padding-left: 0 !important; padding-right: 0 !important; }
  .bm-header { margin-bottom: 36px !important; }
  .bm-title { font-size: clamp(32px, 5vw, 48px) !important; }
  .eg-header-logo { 
  }
  .extracted-style-1{ 
    max-height: 70px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .global-header, .inner-global-header {
    min-height: 56px !important;
    padding-top: 4px !important;
    padding-bottom: 6px !important;
  }
  .header-container { min-height: 56px !important; }
  .bm-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 48px); padding-bottom: 48px !important; padding-left: 0 !important; padding-right: 0 !important; }
  .bm-header { margin-bottom: 28px !important; }
  .bm-title { font-size: clamp(28px, 6vw, 40px) !important; }
  .bm-intro { font-size: 15px !important; }
  .bm-section-title { font-size: clamp(20px, 4vw, 24px) !important; }
  .bm-card { padding: 20px !important; }
}

@media (max-width: 420px) {
  .global-header, .inner-global-header {
    min-height: 50px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .header-container { min-height: 50px !important; }
  .bm-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 40px); padding-bottom: 40px !important; padding-left: 0 !important; padding-right: 0 !important; }
  .bm-title { font-size: clamp(24px, 8vw, 36px) !important; }
  .bm-intro { font-size: 14px !important; }
  .bm-section-title { font-size: 18px !important; }
}
/* Custom styles for home page sections requested by user */
/* Apply clamp font-size to main section headings (like 'Before The Trip') */
.landing-body .section-title,
.landing-body h1.section-title,
.landing-body h2.section-title,
.landing-body h3.section-title,
.landing-body .ec-section-title {
    font-size: clamp(28px, 4vw, 46px) !important;
    text-align: center !important;
}

/* Keep 'Your Guide to Experience' and other card headings fixed at 28px */
/*
.landing-body [class*="card"] h1,
.landing-body [class*="card"] h2,
.landing-body [class*="card"] h3,
.landing-body [class*="card"] h4,
.landing-body [class*="card"] h5,
.landing-body [class*="card"] h6,
.landing-body [class*="Card"] h1,
.landing-body [class*="Card"] h2,
.landing-body [class*="Card"] h3,
.landing-body [class*="Card"] h4,
.landing-body [class*="Card"] h5,
.landing-body [class*="Card"] h6,
.landing-body .ec-sub-card-title,
.landing-body .ec-iti-card-subtitle,
.landing-body .ec-info-card-title {
    font-size: 28px;
    text-align: center !important;
}
    */

/* Center all cards */
.landing-body [class*="card"],
.landing-body [class*="Card"],
.landing-body .ec-iti-card-content {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
}
 .vca-sec-title{
  font-size: clamp(28px, 4vw, 38px) !important;
}

.ec-discovery-card h2.vca-sec-title,
.ec-discovery-card .vca-sec-title {
    font-family: 'Tempus Sans ITC', 'Cormorant Garamond', sans-serif !important;
    font-size: clamp(28px, 4vw, 38px) !important;
    color: #2B2620 !important;
    text-align: center !important;
    font-weight: 400 !important;
    margin: 0 0 12px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.15 !important;
    text-transform: none !important;
}




/* Header Logo Override Removed */
.ec-discovery-card h2{
  white-space: unset !important;
}
.vca-stay-title{
  font-size: 20px !important;
}

/* Mobile header tweaks: hide only the GUIDE label, keep hamburger icon, reduce logo size */
@media (max-width: 768px) {
  /* the button contains the two line spans inside a div, then the label is a direct child span */
  #btnHamburger > span {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* reduce header logo height on tablet/mobile */
  .header-center img,
  .brand-logo img {
    max-height: 56px !important;
    width: auto !important;
  }
  .header-left{
        margin-top: 26px;
  }
}

@media (max-width: 420px) {
  .header-center img,
  .brand-logo img {
    max-height: 48px !important;
  }
}
/* Fix double lines in Luxor timeline */
.timeline-item { border-left: none !important; }

/* Prevent body scroll when popup is open */
body.vca-popup-open {
    overflow: hidden !important;
}

/* Force html to also hide scroll */
html:has(body.vca-popup-open) {
    overflow: hidden !important;
}

html.vca-popup-open, body.vca-popup-open {
    overflow: hidden !important;
}





/* Fix Home page unwanted scrollbar by locking the main container height */
body.home #pageContainer {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.home {
    overflow: hidden;
}

@media (min-width: 1024px) and (max-height: 700px) {
  .header-center img, .brand-logo img {
.footer-contact-list { list-style: none; padding: 0; margin: 0 0 24px; }
.footer-copy { font-family: var(--font-body); font-size: 12px; }



/* RESPONSIVE FLEX ROW */
.responsive-flex-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) {
  .responsive-flex-row {
    flex-direction: row;
    gap: 40px;
  }
}

/* Reduce header padding and heading sizes on tablet and mobile for tighter layout */
@media (max-width: 1124px) {
  .global-header, .inner-global-header {
    min-height: 64px !important;
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }
  .header-container { min-height: 64px !important; }
  .bm-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 60px); padding-bottom: 56px !important; padding-left: 0 !important; padding-right: 0 !important; }
  .bm-header { margin-bottom: 36px !important; }
  .bm-title { font-size: clamp(32px, 5vw, 48px) !important; }
  .eg-header-logo { 
  }
  .extracted-style-1{ 
    max-height: 70px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .global-header, .inner-global-header {
    min-height: 56px !important;
    padding-top: 4px !important;
    padding-bottom: 6px !important;
  }
  .header-container { min-height: 56px !important; }
  .bm-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 48px); padding-bottom: 48px !important; padding-left: 0 !important; padding-right: 0 !important; }
  .bm-header { margin-bottom: 28px !important; }
  .bm-title { font-size: clamp(28px, 6vw, 40px) !important; }
  .bm-intro { font-size: 15px !important; }
  .bm-section-title { font-size: clamp(20px, 4vw, 24px) !important; }
  .bm-card { padding: 20px !important; }
}

@media (max-width: 420px) {
  .global-header, .inner-global-header {
    min-height: 50px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .header-container { min-height: 50px !important; }
  .bm-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 40px); padding-bottom: 40px !important; padding-left: 0 !important; padding-right: 0 !important; }
  .bm-title { font-size: clamp(24px, 8vw, 36px) !important; }
  .bm-intro { font-size: 14px !important; }
  .bm-section-title { font-size: 18px !important; }
}
/* Custom styles for home page sections requested by user */
/* Apply clamp font-size to main section headings (like 'Before The Trip') */
.landing-body .section-title,
.landing-body h1.section-title,
.landing-body h2.section-title,
.landing-body h3.section-title,
.landing-body .ec-section-title {
    font-size: clamp(28px, 4vw, 46px) !important;
    text-align: center !important;
}

/* Keep 'Your Guide to Experience' and other card headings fixed at 28px */
/*
.landing-body [class*="card"] h1,
.landing-body [class*="card"] h2,
.landing-body [class*="card"] h3,
.landing-body [class*="card"] h4,
.landing-body [class*="card"] h5,
.landing-body [class*="card"] h6,
.landing-body [class*="Card"] h1,
.landing-body [class*="Card"] h2,
.landing-body [class*="Card"] h3,
.landing-body [class*="Card"] h4,
.landing-body [class*="Card"] h5,
.landing-body [class*="Card"] h6,
.landing-body .ec-sub-card-title,
.landing-body .ec-iti-card-subtitle,
.landing-body .ec-info-card-title {
    font-size: 28px;
    text-align: center !important;
}
    */

/* Center all cards */
.landing-body [class*="card"],
.landing-body [class*="Card"],
.landing-body .ec-iti-card-content {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
}
 .vca-sec-title{
  font-size: clamp(28px, 4vw, 38px) !important;
}

.ec-discovery-card h2.vca-sec-title,
.ec-discovery-card .vca-sec-title {
    font-family: 'Tempus Sans ITC', 'Cormorant Garamond', sans-serif !important;
    font-size: clamp(28px, 4vw, 38px) !important;
    color: #2B2620 !important;
    text-align: center !important;
    font-weight: 400 !important;
    margin: 0 0 12px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.15 !important;
    text-transform: none !important;
}




/* Header Logo Override Removed */
.ec-discovery-card h2{
  white-space: unset !important;
}
.vca-stay-title{
  font-size: 20px !important;
}

/* Mobile header tweaks: hide only the GUIDE label, keep hamburger icon, reduce logo size */
@media (max-width: 768px) {
  /* the button contains the two line spans inside a div, then the label is a direct child span */
  #btnHamburger > span {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* reduce header logo height on tablet/mobile */
  .header-center img,
  .brand-logo img {
    max-height: 56px !important;
    width: auto !important;
  }
}

@media (max-width: 420px) {
  .header-center img,
  .brand-logo img {
    max-height: 48px !important;
  }
}
/* Fix double lines in Luxor timeline */
.timeline-item { border-left: none !important; }

/* Prevent body scroll when popup is open */
body.vca-popup-open {
    overflow: hidden !important;
}

/* Force html to also hide scroll */
html:has(body.vca-popup-open) {
    overflow: hidden !important;
}

html.vca-popup-open, body.vca-popup-open {
    overflow: hidden !important;
}





/* Fix Home page unwanted scrollbar by locking the main container height */
body.home #pageContainer {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.home {
    overflow: hidden;
}

@media (min-width: 1024px) and (max-height: 700px) {
  .header-center img, .brand-logo img {
    max-height: 48px !important;
  }
  .header-left{
    margin-top: 27px;
  }
  }
}

/* MISSING FIXES ADDED */
.vca-bft-grid, .vca-packing-grid {
    max-width: 100% !important;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .vca-side-ornament.left-side { left: 9px !important; }
    .vca-side-ornament.right-side { right: 9px !important; }
}

@media (max-width: 768px) {
    body .header-container .eg-header-logo,
    body .eg-header-logo {
        font-size: 14px !important;
        letter-spacing: 4px !important;
        line-height: 1 !important;
        margin: 0 !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        height: auto !important;
    }
    
    body .header-container .header-left,
    body .header-left {
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: 20px !important;
    }

    .ec-discovery-card, .ec-before-card {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
    
    .vca-side-ornament.left-side { left: 7px !important; }
    .vca-side-ornament.right-side { right: 7px !important; }

    body .header-container .eg-header-logo img,
    body .eg-header-logo img {
        max-width: 130px !important;
        height: auto !important;
    }
}



/* ========================================================
   IPAD/TABLET RESPONSIVE FIXES (Approx 744px)
   ======================================================== */
@media (min-width: 641px) and (max-width: 1024px) {
    /* 1. Before The Trip */
    #vca-sec-before {
        padding-top: 150px !important;
        margin-top: 20px !important;
    }
    #vca-sec-before .vca-bft-card {
        padding: 16px 20px !important;
        gap: 8px !important;
        aspect-ratio: auto !important;
        height: auto !important;
    }
    #vca-sec-before .vca-bft-icon {
        margin-bottom: 4px !important;
    }
    #vca-sec-before .vca-bft-title {
        margin-top: 0 !important;
        line-height: 1.2 !important;
    }
    #vca-sec-before .vca-bft-intro {
        margin-bottom: 20px !important;
    }
    
    /* 2. Discovery Card */
    .ec-discovery-card, .vca-discovery-card {
        padding-left: 40px !important;
        padding-right: 40px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 480px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Accommodation Cards Buttons */
    .vca-hotel-btn, .ec-hotel-btn {
        padding: 10px 16px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    .vca-stay-actions .vca-btn-link, .ec-hotel-actions .ec-btn-link {
        display: none !important;
    }
    .vca-stay-actions, .ec-hotel-actions {
        justify-content: center !important;
        width: 100% !important;
    }
}


/* =========================================================================
   SHORT DESKTOP / IPAD LANDSCAPE (Approx 1120x630 or 1024x768 short)
   ========================================================================= */
@media (min-width: 1024px) and (max-height: 700px) {
    /* Logo override */
    body .extracted-style-1,
    img.extracted-style-1,
    .extracted-style-1 {
        max-height: 60px !important;
        height: 60px !important;
    }
    
    /* Guide card override - Scoped only to 'Your Guide To The Experience' via :has() */
    body #pg-hero .ec-discovery-card:has(div[style*="gap"]) {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
        min-height: 0 !important;
    }
    
    /* Guide card menu items gap */
    body #pg-hero .ec-discovery-card:has(div[style*="gap"]) div[style*="gap"] {
        gap: 10px !important;
    }
    
    /* Side ornaments */
    .vca-side-ornament.right-side {
        right: 12px !important;
    }
    .vca-side-ornament.left-side {
        left: 12px !important;
    }
}


/* =========================================================================
   WHERE WE WILL STAY - IPAD/TABLET RESPONSIVE FIX (CUSTOM PHP OVERLAY)
   ========================================================================= */
@media (min-width: 1025px) and (max-width: 1250px) {
    /* Reduce header logo size so it does not overlap */
    #pg-hero .extracted-style-1,
    #vca-sec-stay .eg-header-logo img,
    body .extracted-style-1,
    img.extracted-style-1,
    .extracted-style-1 {
        max-height: 55px !important;
        height: auto !important;
    }

    /* Keep the 2-column grid but ensure it is fully fluid */
    .vca-stay-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Auto-adjust card height */
    .vca-stay-card {
        min-height: 160px !important;
        height: auto !important;
        overflow: hidden !important;
    }

    /* Prevent image wrapper from having a fixed min-width that pushes text out */
    .vca-stay-img-wrap {
        width: 32% !important;
        min-width: 0 !important;
    }

    /* Scale down the city badge */
    .vca-stay-badge {
        font-size: 9px !important;
        padding: 4px 8px !important;
        top: 8px !important;
        left: 8px !important;
    }

    /* Fix text wrapper spacing and prevent it from overflowing the right side */
    .vca-stay-content {
        margin-left: 32% !important;
        width: 68% !important;
        padding: 16px 20px !important;
        box-sizing: border-box !important;
        flex: none !important; /* Ensure it respects the explicit 68% width */
    }

    /* Scale down typography only as much as necessary */
    .vca-stay-title {
        font-size: 17px !important;
        margin-bottom: 6px !important;
        line-height: 1.1 !important;
    }
    
    .vca-stay-desc {
        font-size: 13px !important;
        line-height: 1.35 !important;
        margin-bottom: 8px !important;
        /* Natural text wrap without truncation, or line clamp if too long */
        -webkit-line-clamp: 3 !important;
    }

    .vca-stay-rule {
        margin: 0 0 8px 0 !important;
    }

    /* Scale down button slightly so it doesn't break layout */
    .vca-hotel-btn {
        padding: 7px 14px !important;
        font-size: 10px !important;
    }
}