/* Fixed Slideshow Styles - Makes slideshows stay fixed when scrolling */

/* Hero Slideshow - Used in index.php, dining.php, spa.php */
#heroSlider {
    position: fixed !important;
    inset: 0 !important; /* Avoid 100vw overflow; fills viewport */
    z-index: -10 !important; /* Behind everything */
}

#heroSlider img[data-slide] {
    position: fixed !important;
    inset: 0 !important; /* Fill viewport without causing horizontal scroll */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Story Slideshow - Used in story.php */
.story-slide {
    position: fixed !important;
    inset: 0 !important; /* Full viewport without 100vw overflow */
    z-index: -10 !important; /* Behind everything */
}

.story-slide img {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Ensure slideshow sections have transparent backgrounds */
.story-section,
section.relative:not(.bg-white):not(.bg-\[\#f3f3f3\]):not(.bg-black):not(.bg-gradient-to-br) {
    background: transparent !important;
}

/* Exception for Canggu section - allow black background */
section.bg-black.relative {
    background: black !important;
}

/* Allow white background when explicitly set */
section.bg-\[\#f3f3f3\].relative {
    background: #f3f3f3 !important;
}

/* Allow gradient backgrounds - specifically target the commitment section */
section.relative.bg-gradient-to-br {
    background: linear-gradient(135deg, rgb(39, 39, 42), rgb(24, 24, 27), rgb(0, 0, 0)) !important;
}

/* FIXED SLIDESHOW TEXT CONTENT - Stay with slideshow with proper z-index */
.story-slide-content,
.story-section .relative.z-10 .text-white {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 50 !important; /* Higher z-index to prevent sudden appearance */
    width: 90% !important;
    max-width: 1200px !important;
    text-align: center !important;
}

/* Ensure slideshow content on index page stays centered */
.fixed.inset-0.z-5.flex.items-center.justify-center,
.fixed.inset-0.z-0.flex.items-center.justify-center,
.absolute.inset-0.z-0.flex.items-center.justify-center {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 0 !important;
}

#smooth-wrapper {
    position: relative;
    z-index: 10;
    pointer-events: none; /* Allow clicks to pass through to fixed hero */
}

#smooth-content {
    pointer-events: none; /* Inherit transparency to clicks */
}

/* Re-enable pointer events for actual content inside the smooth scroller */
#smooth-content > * {
    pointer-events: auto;
}

/* Ensure the hero spacer (and other explicitly non-interactive elements) remains unclickable */
#smooth-content > .pointer-events-none {
    pointer-events: none !important;
}

.fixed.inset-0.z-0.flex.items-center.justify-center .text-center,
.fixed.inset-0.z-20.flex.items-center.justify-center .text-center {
    text-align: center !important;
}

/* Ensure Private Sanctuaries section and other content sections maintain normal positioning */
#villas .text-white,
#villas .relative.z-10 .text-white,
section:not(.story-section):not([class*="relative h-screen"]) .text-white,
section:not(.story-section):not([class*="relative h-screen"]) .relative.z-10 .text-white {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
    width: auto !important;
    max-width: none !important;
    text-align: inherit !important;
}

/* Remove any overrides for slideshow content positioning */
/* Content is now positioned using absolute positioning in HTML */

/* Remove button styling overrides - let natural styling take precedence */
/* Button styling is now handled in HTML inline styles */

/* Ensure overlays stay with the slideshow - contained within section */
.story-slide .absolute.inset-0.bg-black\/30,
.absolute.inset-0.bg-\[linear-gradient\(to_top\,rgba\(0\,0\,0\,0\.45\)\,rgba\(0\,0\,0\,0\.1\)\)\] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important; /* Just above the slideshow images but below content */
}

/* HEADER - Solid white background (no transparency) */
header,
nav,
.navigation {
    position: relative !important;
    z-index: 1000 !important; /* Very high to stay above everything */
    background: #f3f3f3 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: none !important;
}

/* Fixed-on-scroll override: when header reaches top, lock it as fixed */
.fixed-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}

/* Add body padding to prevent layout jump when header becomes fixed */
body.has-fixed-header {
    padding-top: 4rem !important; /* matches h-16 header height */
}

/* Ensure consistent 80% white background for all header elements */
.bg-white\/80.backdrop-blur,
header.bg-white\/80.backdrop-blur,
.bg-white\/80,
header.bg-white\/80,
div.bg-white\/80,
.bg-\[\#f3f3f3\]\/80.backdrop-blur,
header.bg-\[\#f3f3f3\]\/80.backdrop-blur,
.bg-\[\#f3f3f3\]\/80,
header.bg-\[\#f3f3f3\]\/80,
div.bg-\[\#f3f3f3\]\/80 {
    background: rgba(243, 243, 243, 0.8) !important;
    backdrop-filter: none !important;
}

/* Ensure Book Now button keeps its black background (but not in footer) */
header .book-btn,
nav .book-btn,
#book {
    background: linear-gradient(to bottom, #18181b, #000000) !important;
}

/* Remove rectangle backgrounds from header text elements but preserve dropdown backgrounds and Book Now button */
header *:not(.bg-white):not([class*="bg-white"]):not(.bg-\[\#f3f3f3\]):not([class*="bg-[#f3f3f3]"]):not([class*="shadow-lg"]):not(.book-btn):not(#book),
nav *:not(.bg-white):not([class*="bg-white"]):not(.bg-\[\#f3f3f3\]):not([class*="bg-[#f3f3f3]"]):not([class*="shadow-lg"]):not(.book-btn):not(#book),
.navigation *:not(.bg-white):not([class*="bg-white"]):not(.bg-\[\#f3f3f3\]):not([class*="bg-[#f3f3f3]"]):not([class*="shadow-lg"]):not(.book-btn):not(#book) {
    background: transparent !important;
    box-shadow: none !important;
}

/* Force all navigation elements to have no background with maximum specificity */
header .text-sm,
nav .text-sm,
header .transition-colors,
nav .transition-colors,
header div .text-sm,
nav div .text-sm,
header div a.text-sm,
nav div a.text-sm {
    background: none !important;
    background-color: transparent !important;
}

/* Preserve dropdown menu backgrounds */
.group-hover\:block,
[class*="shadow-lg"] {
    background: #f3f3f3 !important;
}

/* Remove the margin-top from welcome section to eliminate gap */
/* #welcome rule removed as it was empty */

/* Ensure header container has no margins */
header .max-w-screen-2xl {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* CONTENT SECTIONS - Remove all gaps and ensure proper spacing */
body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Prevent horizontal scroll gaps across the site */
html, body {
    overflow-x: hidden !important;
}

main,
.content-section,
section:not(.story-section):not(.relative):not(#welcome):not(.bg-black) {
    background: #f3f3f3 !important;
    position: relative !important;
    z-index: 20 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 6rem !important;
    padding-bottom: 4rem !important;
}

/* Black sections should keep their black background */
section.bg-black {
    background: black !important;
}

/* First content section after slideshow */
main:first-of-type,
section:first-of-type:not(.story-section):not(.relative) {
    margin-top: 100vh !important;
    padding-top: 0 !important;
}

/* Welcome section should have no top margin to sit directly under header */
#welcome {
    margin-top: 0 !important;
    /* padding-top: 2rem !important; - REMOVED to allow custom padding */
    padding-bottom: 2rem !important;
    background: #f3f3f3 !important;
    position: relative !important;
    z-index: 20 !important;
}

/* Remove ALL gaps between sections */
section:not(#welcome),
main,
div[class*="section"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure consecutive sections are connected */
section + section,
main + section,
section + main,
div + section,
section + div {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Specific adjustments for story page content */
.story-section + * {
    margin-top: 100vh !important;
    background: #f3f3f3 !important;
    z-index: 20 !important;
    padding-top: 0 !important;
}

/* Welcome section and all following sections - but exclude black sections */
section[id]:not(#welcome):not(.bg-black) {
    background: #f3f3f3 !important;
    margin-top: 0 !important;
    padding-top: 6rem !important;
    padding-bottom: 4rem !important;
}

/* Remove conflicting welcome section rule */

/* Remove any default spacing from containers */
.container,
.max-w-screen-2xl,
.mx-auto {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure booking panel stays on top */
.booking-panel,
#bookingPanel {
    z-index: 1100 !important;
}

/* Make sure slideshow controls stay visible */
.story-dot,
#prevSlide,
#nextSlide {
    z-index: 30 !important;
    position: fixed !important;
}

/* Specific slideshow button controls only - target only navigation dots and controls */
.story-dot[data-slide],
button.dot[data-slide],
button.offer-dot[data-slide] {
    z-index: 30 !important;
    position: fixed !important;
}

/* Slideshow navigation dots positioning */
.absolute.bottom-8.left-1\/2 {
    position: fixed !important;
    bottom: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
}

/* Slideshow arrow controls positioning */
#prevSlide {
    left: 1.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#nextSlide {
    right: 1.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Footer should also have white background and no gaps */
footer {
    background: #f3f3f3 !important;
    z-index: 20 !important;
    margin: 0 !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Remove any padding/margin from html and body that might create gaps */
html {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure no spacing issues with Tailwind classes */
.space-y-0 > * + * {
    margin-top: 0 !important;
}

.space-y-1 > * + *,
.space-y-2 > * + *,
.space-y-3 > * + *,
.space-y-4 > * + *,
.space-y-5 > * + *,
.space-y-6 > * + *,
.space-y-8 > * + *,
.space-y-10 > * + *,
.space-y-12 > * + * {
    margin-top: 0 !important;
}

/* AGGRESSIVE FIX: Ensure subscribe button and form maintain normal positioning */
button[type="submit"],
form button[type="submit"],
footer button[type="submit"],
.newsletter-subscribe button[type="submit"],
button.h-11.px-5.rounded-md,
button[class*="h-11"][class*="px-5"][class*="rounded-md"],
footer button,
footer form button {
    position: static !important;
    z-index: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    float: none !important;
}

/* Ensure newsletter forms maintain normal positioning */
form[action*="sibforms.com"],
.newsletter-subscribe form,
footer form,
footer div form,
div[class*="grid"][class*="grid-cols"] form {
    position: static !important;
    z-index: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    float: none !important;
}

/* Override any Tailwind or other positioning classes */
footer *[class*="fixed"],
footer *[class*="absolute"],
footer *[class*="relative"] {
    position: static !important;
}

/* PARAGRAPH SPACING - Global paragraph spacing for better readability */
p {
    margin-bottom: 1rem !important;
}

/* Specific paragraph spacing for different sections */
p + p {
    margin-top: 1rem !important;
}

/* Ensure proper spacing in content sections */
section p,
div p,
.text-content p {
    margin-bottom: 1rem !important;
    line-height: 1.6 !important;
}

/* Special spacing for FAQ and content-heavy pages */
.faq-content p,
.story-content p,
.dining-content p,
.spa-content p {
    margin-bottom: 1.2rem !important;
}

/* Ensure last paragraph in a section doesn't have bottom margin */
section p:last-child,
div p:last-child,
.text-content p:last-child {
    margin-bottom: 0 !important;
}

/* Maintain existing small text spacing */
p.text-xs,
p.text-sm {
    margin-bottom: 0.5rem !important;
}

/* HERO TITLE - Bigger and bolder across all pages */
/* Target common hero overlays used across pages */
.fixed.inset-0 .text-center h1,
.absolute.inset-0 .text-center h1,
.story-section .relative.z-10 .text-white h1 {
    font-weight: 500 !important; /* medium weight per request */
    font-size: clamp(2.75rem, 6.5vw, 4.75rem) !important; /* bigger */
    line-height: 1.1 !important; /* tighter for hero */
    letter-spacing: 0.02em !important;
}

/* Ensure medium+ screens retain a strong presence */
@media (min-width: 768px) {
    .fixed.inset-0 .text-center h1,
    .absolute.inset-0 .text-center h1,
    .story-section .relative.z-10 .text-white h1 {
        font-size: clamp(3.5rem, 6vw, 5rem) !important;
    }
}

/* HEADINGS - Make H3 thinner globally */
h3 {
    font-weight: 500 !important; /* thinner but still headline-appropriate */
}

/* CONTENT CONTAINER WIDTHS — apply only inside sections, slightly wider */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

section .max-w-screen-2xl,
section .max-w-7xl {
    max-width: 1200px !important; /* wider than previous 1100 */
    margin-left: auto !important;
    margin-right: auto !important;
}

section .max-w-4xl {
    max-width: 880px !important; /* slightly wider for text blocks */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Provide horizontal padding utilities (Tailwind-like) */
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }