/**
 * Multi-Page Override CSS
 * This fixes the hidden content issue from the old single-page system
 * Add this AFTER the main template CSS
 */

/* Override the old show/hide system - show everything by default now */
.section-content {
    display: block !important;
    opacity: 1 !important;
}

/* Remove transition since we're not hiding/showing anymore */
.section-content.active {
    display: block !important;
    opacity: 1 !important;
}

/* Make sure all sections are visible */
.about-section,
.availability-section,
.specials-section,
.faqs-section,
.contact-section {
    display: block !important;
    opacity: 1 !important;
    padding-top: 0px !important;
}

/* Mobile menu positioning - absolute to avoid disrupting pre-menu-area */
header nav.mobile-menu {
    position: absolute !important;
    top: 10px;
    right: 3%;
    z-index: 9999;
}

/* Mobile menu fix - show menu when open class is added */
header nav.mobile-menu.open .menu {
    display: block !important;
}

/* Position the menu dropdown below the trigger */
header nav.mobile-menu .menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    margin-top: 5px;
    transition: all 0.3s ease-in-out;
}

/* Rotate hamburger icon when open */
header nav.mobile-menu .menu-trigger.open i {
    transform: rotate(90deg);
    transition: transform 0.3s ease-in-out;
}

/* ==========================================================================
   Lightbox Navigation Overrides
   Uses FontAwesome icons instead of missing image files
   ========================================================================== */

/* Make navigation arrows always visible (not just on hover) */
.lb-nav a.lb-prev,
.lb-nav a.lb-next {
    opacity: 0.7 !important;
    background: none !important;
}

.lb-nav a.lb-prev:hover,
.lb-nav a.lb-next:hover {
    opacity: 1 !important;
}

/* Use FontAwesome arrows via pseudo-elements */
.lb-nav a.lb-prev::after,
.lb-nav a.lb-next::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 40px;
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.lb-nav a.lb-prev::after {
    content: "\f053"; /* fa-chevron-left */
    left: 20px;
}

.lb-nav a.lb-next::after {
    content: "\f054"; /* fa-chevron-right */
    right: 20px;
}

/* Close button - use FontAwesome X */
.lb-data .lb-close {
    background: none !important;
    position: relative;
}

.lb-data .lb-close::after {
    content: "\f00d"; /* fa-xmark */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 24px;
    color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lb-data .lb-close:hover::after {
    color: white;
}

/* Loading spinner - use CSS animation instead of missing gif */
.lb-cancel {
    background: none !important;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: lightbox-spin 1s linear infinite;
}

@keyframes lightbox-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Non-Featured Asset Grid Layout
   ========================================================================== */

.non-featured-asset {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    justify-content: center;
    padding: 0 1em;
    align-items: flex-start;
    align-self: flex-start;
    width: 100%;
}

.non-featured-asset .listing-wrapper {
    flex: 0 1 calc(33.333% - 1.5em);
    max-width: calc(33.333% - 1.5em);
    width: auto !important;
    margin: 0 !important;
    display: block;
    text-decoration: none;
    color: inherit;
}

@media (max-width: 1024px) {
    .non-featured-asset .listing-wrapper {
        flex: 0 1 calc(50% - 1em);
        max-width: calc(50% - 1em);
    }
}

@media (max-width: 640px) {
    .non-featured-asset .listing-wrapper {
        flex: 0 1 100%;
        max-width: 100%;
    }
}