/* Contact info styling - Desktop defaults */
.top-contact-info {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    font-size: 1.5rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
}
.top-contact-info a {
    color: inherit !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
.top-contact-info a:hover {
    color: #ffffff !important;
}
.contact-separator {
    margin: 0 15px;
    color: #555555;
}

/* Responsive Overrides for 13th Hour Rising Haunted Hayride */
@media (max-width: 768px) {
    /* Stack tables and columns vertically */
    table, tbody, tr, td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
    }

    /* Stacking cells and adding vertical margin */
    td {
        text-align: center !important;
        padding: 12px 15px !important;
        margin: 0 auto !important;
        float: none !important;
        background-color: transparent !important;
    }

    /* Contact bar mobile stacked layout */
    .top-contact-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 15px 10px !important;
        font-size: 1.15rem !important;
    }
    .contact-separator {
        display: none !important;
    }
    .contact-item {
        display: block !important;
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Clean, unified navigation menu container for mobile */
    .auto-style21, .auto-style30, .auto-style37, nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: #0c0c0c !important;
        border: 2px solid #222222 !important;
        border-radius: 8px !important;
        padding: 8px !important;
        margin: 15px 10px !important;
        font-size: 0 !important; /* Removes whitespace-node rendering */
    }

    /* Flatten nested navigation HTML structures on mobile */
    .auto-style21 span, 
    .auto-style30 span, 
    .auto-style37 span, 
    .auto-style23, 
    .auto-style45, 
    .auto-style14, 
    .auto-style52,
    .auto-style53,
    .auto-style51,
    .auto-style42,
    .auto-style48,
    .auto-style25,
    .auto-style49 {
        display: contents !important;
    }

    /* Cohesive navigation menu items structured as a 3-column grid */
    .auto-style21 a, 
    .auto-style30 a, 
    .auto-style37 a,
    a.auto-style54,
    a.auto-style27,
    a.auto-style48,
    a.auto-style51,
    a.auto-style40 {
        display: inline-block !important;
        flex: 1 1 calc(33.333% - 10px) !important; /* 3 items per row on mobile */
        margin: 5px !important;
        padding: 10px 5px !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        color: #00FA9A !important;
        background-color: #1a1a1a !important;
        border: 1px solid #333333 !important;
        border-radius: 5px !important;
        min-width: 80px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
        letter-spacing: 0.05em !important;
    }

    /* Hover and active states for mobile menu items */
    .auto-style21 a:hover, 
    .auto-style30 a:hover, 
    .auto-style37 a:hover,
    a.auto-style54:hover,
    a.auto-style27:hover,
    a.auto-style48:hover,
    a.auto-style51:hover,
    a.auto-style40:hover {
        background-color: #00FA9A !important;
        color: #000000 !important;
        border-color: #00FA9A !important;
    }

    /* Downscale extremely large headers for mobile screens */
    h1, .auto-style20, .auto-style21, .auto-style36, .auto-style44, .auto-style49, .auto-style50, .auto-style28 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }

    h2, .auto-style9, .auto-style19, .auto-style30, .auto-style57, .auto-style55 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    h3, .auto-style14, .auto-style29, .auto-style7, .auto-style8, .auto-style23, .auto-style25 {
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
    }

    p, span, td, .auto-style27, .auto-style29, .auto-style55 {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* Ensure all images scale responsively */
    img {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }

    /* Keep side-by-side elements from being squished */
    td img {
        display: block !important;
        margin: 10px auto !important;
        float: none !important;
    }

    /* Map and Video Iframe responsiveness */
    iframe, embed, object, video {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        margin: 10px 0 !important;
        border: none !important;
    }

    /* Facebook Page Plugin Responsive overrides */
    .fb-page, .fb-page span, .fb-page iframe {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Remove excessive top margins and padding */
    br {
        display: none !important;
    }

    /* Re-display break tags that are actually needed for textual paragraphs */
    p br, span br, h1 br, h2 br {
        display: inline !important;
    }
}