/* ═══════════════════════════════════════════════════════════════
   ÁMBAR BEACH — Global Rebrand CSS v3.1
   Ámbar: #FFBF00 / #E6A817 / #FFD54F
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ambar: #E8A800;
  --ambar-dark: #D49A00;
  --ambar-light: #FFD54F;
  --ambar-glow: rgba(232,168,0,.12);
  --dark: #1A1300;
  --text: #2C2000;
  --text-light: #7A6E50;
  --bg: #FFFDF5;
  --white: #ffffff;
  --border: #F0E8D0;
  --font: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  --hg-primary: #E8A800 !important;
  --hg-secondary: #D49A00 !important;
}

/* ═══ LAYOUT STABILITY ═══ */
html { overflow-y: scroll; overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
#page, .site, #hg-wrapper, .container, main, .content-area,
.row, article, .entry-content { max-width: 100%; overflow-x: hidden; }
/* Kill sticky menu animation from theme */
/* Kill the theme's sticky→fixed transition completely */
.is-sticky-menu {
  animation: none !important;
  -webkit-animation: none !important;
  transition: none !important;
  position: sticky !important; /* Stay sticky, never switch to fixed */
  box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
}

/* ═══ ANTI-SHIFT: lock header dimensions on all interaction states ═══ */
.mastser-header, .mastser-header-one, #mastser-header,
.mastser-header .navbar, .mastser-header-one .navbar {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  transition: none !important;
  animation: none !important;
}
/* Nav links: no layout change on any state */
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:active,
.navbar-light .navbar-nav .nav-link:visited {
  border: none !important;
  outline: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  text-decoration: none !important;
}
/* Nav items: stable size */
.navbar-nav .nav-item {
  border: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Container: no shift */
.navbar .container, .navbar .container-fluid {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
/* Disable ALL animations that cause layout shift */
.wow, .animated, .fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight,
.fadeIn, .slideInUp, .slideInDown, .slideInLeft, .slideInRight,
.bounceIn, .zoomIn, .inside-article {
  animation: none !important;
  -webkit-animation: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-transform: none !important;
}
/* Kill all page-level transitions and transforms */
#page, #hg-wrapper, .content-area, .site, .container,
main, article, .entry-content, .inside-article {
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  -webkit-transition: none !important;
  animation: none !important;
  -webkit-animation: none !important;
}
/* Kill mouse cursor follower that may cause reflow */
.mouse-cursor, .cursor-outer, .cursor-inner {
  display: none !important;
}

/* ═══ HEADER ═══ */
.logo.navbar-brand img, .custom-logo-link img, .custom-logo {
  max-height: 65px !important; width: auto !important; height: auto !important;
}
.mastser-header, .mastser-header-one, #mastser-header {
  width: 100% !important; box-sizing: border-box !important;
  max-width: 100vw !important; overflow-x: hidden !important;
  position: sticky !important; top: 0 !important; z-index: 9999 !important;
}
.mastser-header-one .navbar, .mastser-header .navbar {
  padding: 6px 20px !important; min-height: unset !important;
  background: #fff !important; width: 100% !important;
  box-sizing: border-box !important; position: relative !important;
}
.navbar-brand { padding: 0 !important; }
.info-bar, #header_infobar, .header-above-btn, .header-above-collapse {
  display: none !important;
}
@media (min-width: 992px) {
  #header_navbar.navbar-collapse, #header_navbar.collapse,
  .navbar-collapse.collapse, .navbar-collapse.collapsing {
    display: flex !important; height: auto !important;
    overflow: visible !important; visibility: visible !important;
    justify-content: center !important;
  }
  .navbar-nav {
    margin: 0 auto !important;
  }
}

/* ═══ NAV LINKS ═══ */
.navbar-light .navbar-nav .nav-link {
  color: var(--text) !important; font-family: var(--font) !important;
  font-weight: 600 !important; font-size: 13.5px !important;
  padding: 10px 14px !important; border-radius: 20px !important;
  transition: background .2s, color .2s !important;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--dark) !important; background: var(--ambar-light) !important;
  border-radius: 20px !important;
}
/* Remove dot from link (theme default) */
.mastser-header-one .navbar-nav > li > a:after {
  display: none !important;
}
/* Dot separator between menu items */
.mastser-header-one .navbar-nav > li {
  display: flex !important;
  align-items: center !important;
}
.mastser-header-one .navbar-nav > li:not(:last-child)::after {
  content: "" !important;
  width: 4px !important; height: 4px !important;
  background: var(--ambar) !important;
  border-radius: 50% !important;
  margin: 0 6px !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

/* ═══ BUTTONS — ALL ═══ */
.btn-theme, .btn-theme-dark, .wp-block-button__link,
.ah-cta-primary, .aap-cta-btn, .aap2-cta-btn,
.mphb-book-button, input[type="submit"].mphb-book-button,
.mphb-confirm-reservation, .mphb-apply-coupon-code-button {
  background: var(--ambar) !important; color: var(--dark) !important;
  border: none !important; font-family: var(--font) !important;
  font-weight: 700 !important; border-radius: 8px !important;
}
.btn-theme:hover, .btn-theme-dark:hover, .wp-block-button__link:hover,
.ah-cta-primary:hover, .aap-cta-btn:hover, .aap2-cta-btn:hover,
.mphb-book-button:hover, .mphb-confirm-reservation:hover {
  background: var(--ambar-dark) !important; color: var(--dark) !important;
}

/* ═══ LINKS ═══ */
.entry-content a, .page-content a { color: var(--ambar-dark); }
.entry-content a:hover, .page-content a:hover { color: var(--ambar); }
/* Preserve white text on styled buttons inside content */
.entry-content a[style*="color:#fff"],
.entry-content a[style*="color:#ffffff"],
.entry-content a[style*="color: #fff"] { color: #fff !important; }

/* ═══ HERO & SECTIONS ═══ */
.ah-hero h1 span { color: var(--ambar) !important; }
.aap2-hero, .aap2-cta { display: none !important; }
/* Section titles */
.aap2-section-title { color: var(--text) !important; }
.aap2-section-sub { color: var(--text-light) !important; }
/* CTA section */
.aap2-cta { background: var(--dark) !important; }
.aap2-cta h2 { color: var(--ambar) !important; }
.aap2-cta-btn { background: var(--ambar) !important; color: var(--dark) !important; }
/* Amenities */
.aap2-amen-item { border-color: var(--border) !important; }

/* ═══ PAGE TITLES (h1) ═══ */
.entry-content h1, .wp-block-heading.has-text-align-center {
  text-align: center !important; font-family: var(--font) !important;
  font-size: 2rem !important; font-weight: 800 !important;
  color: var(--text) !important; margin: 28px auto 8px !important;
}

/* ═══ SECTION HEADINGS (h2) — unified style ═══ */
.aap2-section-title, .ahg-title, .abp-h2,
h2.wp-block-heading, .entry-content h2,
.ambar-section h2, .ci-card-title,
h3.wp-block-heading {
  font-family: var(--font) !important;
  font-size: clamp(1.3rem, 3vw, 1.9rem) !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  text-align: center !important;
  margin: 0 0 6px !important;
}
/* Subtitles */
.aap2-section-sub, .ahg-sub, .abp-sub {
  text-align: center !important;
  color: var(--text-light) !important;
  font-size: 1rem !important;
}

/* ═══ BOOKING PAGE ═══ */
.ambar-book-btn {
  background: linear-gradient(135deg, var(--ambar), var(--ambar-dark)) !important;
  color: var(--dark) !important;
}
/* WA CTA handled below in WHATSAPP section */
.dp-popup .dp-highlight a { background: var(--ambar) !important; color: var(--dark) !important; }
.dp-popup .dp-today a { border-color: var(--ambar) !important; }
.dp-popup .dp-month-header { color: var(--text) !important; }
/* MotoPress calendar */
.mphb_sc_availability_calendar td.mphb-available-date { background: #E8FFE8 !important; }
.mphb_sc_availability_calendar td.mphb-available-date a { color: #166534 !important; }
.mphb_sc_availability_calendar td.mphb-not-available-date,
.mphb_sc_availability_calendar td.mphb-blocked-date { background: #FFE8E8 !important; }
.mphb-rate-hint { color: var(--ambar-dark) !important; }

/* ═══ FOOTER ═══ */
/* Hide theme footer bars (empty brown bar + copyright) */
.copyright-bar, .hg-footer-bottom-area, .footer-bottom-area,
.site-footer-area, .site-footer-area .footer-info,
footer.site-footer-area, .copyright-text,
.copyright-bar *, .site-footer-area * { display: none !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; border: none !important; }
.ambar-footer { background: var(--dark) !important; }
.ambar-ft-logo { color: var(--ambar) !important; }
.ambar-ft-col h4 { color: var(--ambar) !important; }
.ambar-ft-gmaps { color: var(--ambar) !important; }
.ambar-ft-phone:hover, .ambar-ft-col ul li a:hover { color: var(--ambar) !important; }
/* FT WA handled below in WHATSAPP section */

/* ═══ WHATSAPP — always green ═══ */
.ambar-wa-float {
  background: #25D366 !important;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4) !important;
}
.ambar-wa-cta, a.ambar-wa-cta,
.ambar-ft-wa, a.ambar-ft-wa {
  background: #25D366 !important;
  color: #fff !important;
}
.ambar-wa-cta:hover, .ambar-ft-wa:hover {
  background: #1DA851 !important;
  color: #fff !important;
}

/* ═══ MOBILE DRAWER OVERRIDES ═══ */
@media (max-width: 991px) {
  .logo.navbar-brand img, .custom-logo { max-height: 45px !important; }
  .mastser-header-one .navbar { padding: 8px 14px !important; }
  /* Hamburger — inherits from mu-plugin CSS */
  /* Drawer brand */
  .ambar-mdrawer-brand { color: var(--ambar) !important; }
  /* lang switcher removed */
  /* Drawer overrides handled in mu-plugin CSS */
}

/* ═══ TABLET & MOBILE ═══ */
@media (max-width: 991px) {
  html, body { overflow-x: hidden !important; }

  /* Full width layout — everything stretches to screen width */
  .container, #hg-wrapper .container, .content-area .container,
  .site .container, #page .container {
    max-width: 100% !important; width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin: 0 !important;
  }
  .row, .content-area .row { margin: 0 !important; padding: 0 !important; }
  .col-lg-12, .col-lg-4, .col-md-6, .col-md-12, .col-12,
  [class*="col-"] {
    padding: 0 !important; width: 100% !important;
    max-width: 100% !important; flex: 0 0 100% !important;
  }
  .col-lg-4:empty, .col-lg-4:not(:has(*)) { display: none !important; }
  .content-area, #hg-wrapper, .site-main, main {
    padding: 0 !important; margin: 0 !important; width: 100% !important;
  }
  .inside-article { padding: 0 !important; margin: 0 !important; }

  /* Content full width with small side padding */
  .entry-content, article { padding: 0 10px !important; }
  /* Override ALL width constraints on mobile */
  .entry-content div, .entry-content section,
  .entry-content p, .entry-content form,
  .entry-content .wp-block-group,
  .entry-content .wp-block-group__inner-container,
  .ci-wrap, .ci-card, .ci-pending,
  .abp, .abp-inner, .abp-sec {
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .wp-block-group { padding-left: 12px !important; padding-right: 12px !important; }
  .wp-block-columns { flex-direction: column !important; gap: 16px !important; }
  .wp-block-column { flex-basis: 100% !important; }

  /* Apartment sections full width */
  .aap2-gallery, .aap2-amenities, .aap2-location { padding: 32px 12px !important; }
  .aap2-grid { gap: 6px !important; }

  /* Booking page full width */
  .abp, .abp-inner { padding: 0 12px !important; }
  .abp-sec { padding: 24px 0 !important; }

  /* Check-in form */
  .ci-wrap { padding: 12px !important; }
  .ci-card { padding: 16px !important; }
  .ci-grid { grid-template-columns: 1fr !important; }

  /* Headings */
  .entry-content h1 { font-size: 1.5rem !important; margin: 16px auto 8px !important; }

  /* Tables */
  .entry-content table { font-size: 13px !important; }

  /* Footer */
  .ambar-footer-inner { grid-template-columns: 1fr !important; gap: 20px !important; }
  .ambar-footer { padding: 28px 16px 0 !important; }

  /* Show only 4 months in booking calendar on mobile */
  .mphb-calendar-month:nth-child(n+5) { display: none !important; }
  .abp-month:nth-child(n+5) { display: none !important; }
}

/* ═══ PHONE ═══ */
@media (max-width: 576px) {
  .logo.navbar-brand img, .custom-logo { max-height: 38px !important; }
  .entry-content h1 { font-size: 1.3rem !important; }
  .wp-block-group { padding: 16px 10px !important; }
  .entry-content, .inside-article, article { padding: 0 10px !important; }

  /* Hero on homepage */
  .ah-hero { padding: 40px 16px 36px !important; }
  .ah-hero h1 { font-size: 1.8rem !important; }
  .ah-ctas { flex-direction: column !important; }
  .ah-cta-primary, .ah-cta-secondary { width: 100% !important; text-align: center !important; }
  .ah-stats { flex-direction: column !important; }

  /* Gallery */
  .ahg-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }

  /* Amenities */
  .aap2-amen-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* Location */
  .aap2-loc-body { grid-template-columns: 1fr !important; }
  .aap2-loc-map iframe { height: 250px !important; }
}

/* ═══ CONTACT FORM ═══ */
.ambar-cf-btn {
  background: var(--ambar) !important; color: var(--dark) !important;
}
.ambar-cf-btn:hover { background: var(--ambar-dark) !important; }
.ambar-cf-group input:focus, .ambar-cf-group textarea:focus {
  border-color: var(--ambar) !important;
}

/* ═══ SELECTION / FOCUS STATES ═══ */
::selection { background: var(--ambar-light); color: var(--dark); }
:focus-visible { outline-color: var(--ambar); }

/* ═══ SCROLLBAR STYLE (Webkit) ═══ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f5f5f0; }
::-webkit-scrollbar-thumb { background: var(--ambar); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ambar-dark); }