/* PHP-port-only overrides — things the React app handled via component logic/inline state.
   Loaded AFTER main.css (compiled Tailwind) so these win. */

/* Language switcher active/inactive states (React drove these via variant props) */
.pepi-langswitch .pepi-lang { color: rgba(255,255,255,0.4); }
.pepi-langswitch .pepi-lang:hover { color: rgba(255,255,255,0.7); }
.pepi-langswitch .pepi-lang.is-active { color: #ffffff; }
.pepi-langswitch .pepi-lang-sep { color: rgba(255,255,255,0.2); }

/* Navbar scrolled state (added by JS) */
#navbar.is-scrolled { background-color: rgba(10,10,10,0.95); backdrop-filter: blur(12px); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
html:not(.dark) #navbar.is-scrolled { background-color: rgba(250,247,242,0.95); }
/* when scrolled (and menu closed) the bar text/buttons flip to the dark-on-light scheme */
#navbar.is-scrolled:not(.is-menu-open) .nav-logo,
#navbar.is-scrolled:not(.is-menu-open) #menuTrigger,
#navbar.is-scrolled:not(.is-menu-open) #darkToggle { color: var(--color-text-primary); }
html:not(.dark) #navbar.is-scrolled:not(.is-menu-open) .nav-logo,
html:not(.dark) #navbar.is-scrolled:not(.is-menu-open) #menuTrigger,
html:not(.dark) #navbar.is-scrolled:not(.is-menu-open) #darkToggle { color: var(--color-charcoal); }
#navbar.is-scrolled:not(.is-menu-open) .nav-inquire { border-color: var(--color-accent); color: var(--color-accent); }
#navbar.is-scrolled:not(.is-menu-open) .nav-inquire:hover { background-color: var(--color-accent); color: var(--color-bg-primary); }
#navbar.is-scrolled:not(.is-menu-open) .nav-book { background-color: var(--color-accent); color: var(--color-bg-primary); }
#navbar.is-scrolled:not(.is-menu-open) .nav-book:hover { background-color: var(--color-accent-hover); }
#navbar.is-scrolled:not(.is-menu-open) .pepi-langswitch .pepi-lang { color: rgba(107,99,86,0.4); }
html.dark #navbar.is-scrolled:not(.is-menu-open) .pepi-langswitch .pepi-lang { color: var(--color-text-tertiary); }
#navbar.is-scrolled:not(.is-menu-open) .pepi-langswitch .pepi-lang.is-active { color: var(--color-charcoal); }
html.dark #navbar.is-scrolled:not(.is-menu-open) .pepi-langswitch .pepi-lang.is-active { color: var(--color-text-primary); }

/* Overlay menu open state (JS toggles .is-open on #overlayMenu) */
#overlayMenu.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
#overlayMenu.is-open .overlay-panel { clip-path: inset(0 0% 0 0%); }
#overlayMenu.is-open .overlay-photo { transform: translateX(0); }
#overlayMenu.is-open .overlay-link,
#overlayMenu.is-open .overlay-cta { opacity: 1; transform: translateY(0); }

/* Chat panel open state */
#chatWidget .chat-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; }
#chatWidget .chat-msg { max-width: 85%; padding: 0.625rem 1rem; font-size: 0.875rem; line-height: 1.5; border-radius: 1rem; }
#chatWidget .chat-msg.bot { align-self: flex-start; background:#fff; color: var(--color-charcoal); border: 1px solid rgba(36,31,26,0.05); border-bottom-left-radius: 0.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
html.dark #chatWidget .chat-msg.bot { background: var(--color-bg-secondary); color: var(--color-text-primary); border-color: rgba(255,255,255,0.05); }
#chatWidget .chat-msg.user { align-self: flex-end; background: var(--color-forest); color:#fff; border-bottom-right-radius: 0.25rem; }
html.dark #chatWidget .chat-msg.user { background: var(--color-accent); color: var(--color-bg-primary); }
#chatWidget .chat-row { display: flex; }
#chatWidget .chat-row.user { justify-content: flex-end; }
#chatWidget .chat-send.is-active { background: var(--color-forest); color:#fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); cursor: pointer; }
html.dark #chatWidget .chat-send.is-active { background: var(--color-accent); color: var(--color-bg-primary); }

/* Legal-page prose (raw h2/p/ul inside .legal-prose) */
.legal-prose h2 { font-family: var(--font-serif); font-weight: 300; font-size: 1.25rem; margin-top: 2rem; margin-bottom: 0.5rem; color: var(--color-charcoal); }
html.dark .legal-prose h2 { color: var(--color-text-primary); }
.legal-prose a { color: var(--color-forest); text-decoration: underline; text-underline-offset: 2px; }
html.dark .legal-prose a { color: var(--color-accent); }
.legal-prose ul { list-style: disc; padding-left: 1.25rem; }
.legal-prose li { margin-bottom: 0.35rem; }

/* GSAP fromTo reveal targets start hidden so there is no FOUC before JS runs.
   Gated on html.pepi-js (set by an inline head script) so that if JS is disabled
   OR the GSAP bundle fails to load, main.js removes .pepi-js and everything shows —
   nothing can get stuck invisible (CLAUDE.md GSAP hard rule). */
html.pepi-js .wc-reveal, html.pepi-js .gc-reveal, html.pepi-js .exp-card, html.pepi-js .review-card,
html.pepi-js .rooms-header, html.pepi-js .offers-header, html.pepi-js .exp-header, html.pepi-js .loc-header,
html.pepi-js .loc-map, html.pepi-js .loc-info, html.pepi-js .reviews-header, html.pepi-js .booking-inner,
html.pepi-js .contact-header, html.pepi-js .contact-cta, html.pepi-js .contact-info, html.pepi-js .apt-card {
  opacity: 0;
}