html { scroll-behavior: smooth; }
body { font-size: 16px; line-height: 1.6; overflow-x: hidden; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', Georgia, serif; }
:focus-visible { outline: 2px solid #C5A059; outline-offset: 2px; }

.gold-rule { width: 60px; height: 1px; background: #C5A059; display: block; }
.header-ghost { transition: background-color 0.4s ease, box-shadow 0.4s ease; }
#site-header.scrolled { background-color: #06402B !important; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }

/* Hero slider */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease, transform 1.2s ease; transform: scale(1.05); pointer-events: none; }
.hero-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-indicator { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: rgb(250 250 249 / 0.4); transition: all 0.3s; border: none; padding: 0; }
.hero-indicator.active { width: 2rem; background-color: #C5A059; }

/* FAQ */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; opacity: 0; }
.faq-item.open .faq-answer { max-height: 500px; opacity: 1; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }

/* Mobile menu */
#mobile-menu { display: none; }
#mobile-menu.open { display: flex; }
#mobile-menu-btn.open .hamburger-line:nth-child(1) { transform: rotate(45deg) translateY(8px); }
#mobile-menu-btn.open .hamburger-line:nth-child(2) { opacity: 0; }
#mobile-menu-btn.open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translateY(-8px); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* Admin */
.admin-table tr:hover { background-color: rgb(6 64 43 / 0.02); }