/**
 * Bali page — critical overrides for text visibility
 * Loads after base/layout, ensures text renders correctly
 */

/* Panel intro — force text visibility */
.bali-page .panel-intro__content,
.bali-page .panel-intro__heading,
.bali-page .panel-intro__line,
.bali-page .panel-intro__philosophy-p,
.bali-page .panel-intro__subheading,
.bali-page .panel-intro__highlights-title,
.bali-page .panel-intro__highlight-header,
.bali-page .panel-intro__highlight-desc,
.bali-page .panel-intro__index-link,
.bali-page .panel-intro__index-num,
.bali-page .panel-intro__index-label {
    color: #f5f5f0 !important;
    line-height: 1.4;
    opacity: 1;
    visibility: visible;
}

.bali-page .panel-intro__heading { font-size: 1.75rem !important; }
.bali-page .panel-intro__philosophy-p { font-size: 0.95rem !important; }
.bali-page .panel-intro__subheading { font-size: 0.625rem !important; }
.bali-page .panel-intro__highlights-title { font-size: 0.75rem !important; }
.bali-page .panel-intro__highlight-header { font-size: 0.95rem !important; }
.bali-page .panel-intro__highlight-desc { font-size: 0.75rem !important; }
.bali-page .panel-intro__index-link { font-size: 0.8125rem !important; }

/* Panel index (hotels, pools, etc.) — force text visibility */
.bali-page .panel-index__main-no,
.bali-page .panel-index__main-title,
.bali-page .panel-index__main-label,
.bali-page .panel-index__heading,
.bali-page .panel-index__intro,
.bali-page .panel-index__subindex-num,
.bali-page .panel-index__subindex-name,
.bali-page .panel-index__carousel-brand,
.bali-page .panel-index__carousel-name,
.bali-page .panel-index__carousel-area,
.bali-page .panel-index__carousel-title,
.bali-page .panel-index__carousel-desc,
.bali-page .panel-index__carousel-cta,
.bali-page .panel-index__cta {
    color: #f5f5f0 !important;
    opacity: 1;
    visibility: visible;
}

.bali-page .panel-index__main-overlay {
    color: #fff !important;
}

.bali-page .panel-index__intro,
.bali-page .panel-index__carousel-desc {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Prevent collapse — ensure text wrappers have natural height */
.bali-page .panel-intro__content,
.bali-page .panel-intro__philosophy,
.bali-page .panel-intro__highlights {
    flex-shrink: 0;
}
.bali-page .panel-intro__highlights-grid {
    display: grid;
    grid-auto-rows: minmax(80px, min-content);
}
.bali-page .panel-intro__index,
.bali-page .panel-intro__index-list {
    display: flex;
    flex-wrap: wrap;
}
.bali-page .panel-index__main-overlay,
.bali-page .panel-index__content-wrap,
.bali-page .panel-index__heading,
.bali-page .panel-index__intro {
    display: block;
}
/* Footer — dark theme, text inherits from .site-footer */

/* ========== Home wordmark (top center, matches main site) ========== */
.bali-page .bali-home-link {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.35em;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.25s ease, letter-spacing 0.25s ease;
    pointer-events: auto;
}

.bali-page .bali-home-link:hover {
    color: #fff;
    letter-spacing: 0.4em;
}

@media (max-width: 768px) {
    .bali-page .bali-home-link {
        font-size: 0.6875rem;
        letter-spacing: 0.28em;
    }
}

/* Hero — stronger presence + text shadow for readability */
.bali-page .panel-hero__heading {
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}

.bali-page .panel-hero__logo {
    text-shadow: 0 1px 20px rgba(0, 0, 0, 0.35);
}

/* Intro & panels — slightly larger readable type */
.bali-page .panel-intro__heading {
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
}

.bali-page .panel-intro__philosophy-p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
    max-width: 42rem;
}

.bali-page .panel-index__heading {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
}

/* Footer strip — readable on cream background */
.panel-stack__item--footer .site-footer {
    color: #1a1a1a;
}