/**
 * Responsive Styles
 * Media queries and breakpoint-specific styles
 */

/* Responsive Design - Based on Original Breakpoints */
@media (max-width: 1119px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1023px) {
    .posts-grid {
        grid-template-columns: 1fr;
    }

    .page-title {
        font-size: 2rem;
    }

    .single-post-title {
        font-size: 1.8rem;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stack sidebar below content on tablets and mobile */
    .page-container-with-sidebar {
        flex-direction: column;
    }

    .page-sidebar {
        width: 100%;
        margin-left: 0;
        margin-top: 30px;
    }

    /* ---- Off-canvas mobile menu ----
       Loaded last, so this overrides megamenu.css's .main-navigation
       { position: relative } and the hover-show of megamenu panels. */
    .main-navigation {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: auto;
        height: 100%;
        height: 100dvh;
        width: 80%;
        max-width: 320px;
        margin-top: 0;
        background: var(--background-pure-white);
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
        border-radius: 0;
        z-index: 1001;
        overflow-y: auto;
        padding: 4.5rem 0 2rem;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .main-navigation.toggled {
        transform: translateX(0);
    }
    .main-navigation ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* Accordion: sub-menus collapse unless the parent has .menu-open (JS),
       and expand inline (pushing the menu down) rather than floating as
       dropdowns. Overrides megamenu.css's position:absolute / opacity:0 /
       visibility:hidden / hover-show dropdown behaviour. */
    .main-navigation .sub-menu,
    .main-navigation .megamenu-dropdown {
        position: static;
        top: auto;
        left: auto;
        min-width: 0;
        width: 100%;
        background: transparent;
        box-shadow: none;
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 0 0 0 1.25rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .main-navigation .menu-item-has-children > .sub-menu,
    .main-navigation .megamenu-enabled > .megamenu-dropdown {
        display: none;
    }
    .main-navigation .menu-item-has-children.menu-open > .sub-menu,
    .main-navigation .megamenu-enabled.menu-open > .megamenu-dropdown {
        display: block;
    }
    /* Don't reveal sub-menus on hover/tap-1; the JS .menu-open toggle owns it. */
    .main-navigation .menu-item-has-children:hover > .sub-menu,
    .main-navigation .megamenu-enabled:hover > .megamenu-dropdown {
        display: none;
    }
    .main-navigation .sub-menu a,
    .main-navigation .megamenu-dropdown a {
        white-space: normal;
        padding: 0.75rem 1.5rem;
    }
    /* Rotate the dropdown-indicator arrow when a parent is open. */
    .main-navigation .menu-open > a .dropdown-indicator {
        transform: rotate(180deg);
    }

    /* Backdrop overlay + body scroll lock while the menu is open.
       z-index is BELOW .site-header (100): the nav panel lives inside the
       header's stacking context, so this keeps the panel (and hamburger)
       above the overlay (clicks reach the menu, the overlay only catches
       clicks on the dimmed page content to close). */
    .menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 90;
        cursor: pointer;
    }
    .menu-overlay.active {
        display: block;
    }
    body.menu-open {
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    .post-card h2 {
        font-size: 1.5rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-logo {
        justify-content: center;
        margin-bottom: 1rem;
    }

    /* Hero video responsive */
    .hero-video-section {
        height: calc(100vh - 150px);
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.75rem;
    }

    .hero-button {
        padding: 12px 30px;
        font-size: 1.1rem;
    }

    .hero-content-inner {
        padding-left: 20px;
    }

    .hero-content-bottom {
        flex-direction: column;
        gap: 1.5rem;
    }

    .hero-buttons {
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .hero-description {
        font-size: 1.25rem;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-video-section {
        height: calc(100vh - 150px);
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }

    .hero-content-inner {
        padding-left: 15px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .hero-button {
        width: 100%;
        text-align: center;
    }

    .hero-description {
        font-size: 1.1rem;
    }
}