/*
Copyright © Wild Rose Devs. & Alberta Lynx 2025. Design & Code rights reserved - United Conservative Party logo and name reserved by The United Conservative Party of Alberta, Canada.

This software and its source code are proprietary and confidential.
Unauthorized copying, distribution, modification, or use in whole or in part
is strictly prohibited and may result in civil and/or criminal penalties.

No license or rights are granted by implication or otherwise under any
intellectual property rights.

For licensing inquiries, contact: https://wildrosedevs.ca
*/

@media (min-width: 1025px) {
    .mobile-nav,
    .mobile-submenu {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .desktop-nav {
        display: none;
    }

    .menu-button {
        display: block;
        width: 100%;
        background-color: #004080;
        color: white;
        padding: 10px;
        font-size: 1.2rem;
        border: none;
        cursor: pointer;
    }

    .mobile-nav {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 50%;
        width: 90%;
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
        background-color: #004080;
        z-index: 1000;
        text-align: center;
        padding: 10px 0;
    }

    .mobile-nav.show {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    .mobile-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-nav ul li a {
        display: block;
        padding: 12px;
        color: white;
        text-decoration: none;
    }

    /* General styling for mobile navigation & submenus */
    .mobile-nav,
    .mobile-submenu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 50%;
        width: 90%;
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
        background-color: #004080;
        z-index: 1000;
        text-align: center;
        padding: 10px 0;
        border-radius: 10px; /* Optional: Matches a rounded look */
    }

    /* Show when activated */
    .mobile-nav.show,
    .mobile-submenu.show {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    /* Style the back button */
    .back-button {
        background: none;
        border: none;
        color: white;
        font-size: 1.2rem;
        padding: 10px;
        cursor: pointer;
        text-align: left;
        width: 100%;
        display: block;
    }

    .back-button:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Style for submenu list */
    .mobile-submenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-submenu ul li {
        padding: 12px;
    }

    .mobile-submenu ul li a {
        color: white;
        text-decoration: none;
        font-size: 1.2rem;
    }

    .mobile-submenu ul li a:hover {
        text-decoration: underline;
    }

    .mobile-nav ul li a.membership {
        background-color: #007bff;
        color: #fff;
        border-radius: 8px;
        font-size: 1.15rem;
        width: 80%;
        margin: 5px auto;
        text-align: center;
        padding: 12px;
    }

    .mobile-nav ul li a.membership:hover {
        background-color: #0056b3;
    }

    .mobile-nav ul li a.donate {
        background-color: #ed272a;
        color: #fff;
        border-radius: 8px;
        font-size: 1.15rem;
        width: 80%;
        margin: 5px auto;
        text-align: center;
        padding: 12px;
    }

    .mobile-nav ul li a.donate:hover {
        background-color: #b8001c;
    }

    .hero {
        height: auto;
        padding: 40px 20px;
        width: auto;
        overflow-x: hidden;
        max-width: 100vw;
        margin: 0 auto;
        background-position: center;
        background-size: cover;
    }

    .hero-content {
        margin: 0 auto;
        max-width: 90%;
        margin-top: 20px;
    }

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

    .hero p {
        font-size: 1.3rem;
    }

    .hero .buttons a {
        font-size: 1rem;
        padding: 10px 15px;
    }

    .youtube-iframe {
        height: 300px;
    }

    .support-movement {
        padding: 40px 20px;
    }
    .support-movement h2 {
        font-size: 2rem;
        padding-left: 20px;
        text-align: center;
    }
    .support-movement p {
        font-size: 1rem;
        padding-left: 20px;
        text-align: center;
        margin-bottom: 20px;
    }

    .donation-buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .donation-buttons a {
        display: block;
        width: 50px;
        max-width: 90%;
        font-size: 1rem;
        padding: 10px 15px;
    }

    .contact-info {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .contact-info div {
        min-height: auto !important;
    }

    .contact-section {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .contact-card {
        width: 90%;
        margin: 0 auto;
        min-width: auto;
    }

    .statement-of-principles {
        padding: 20px;
        margin: 20px auto;
        max-width: 95%;
    }

    .statement-of-principles h2 {
        font-size: 2rem;
    }

    .statement-of-principles .divider {
        width: 100%;
        margin: 10px 0 20px;
    }

    .statement-of-principles p {
        width: auto;
        max-width: 100%;
        font-size: 1rem;
    }

    .principles-container {
        flex-direction: column;
        gap: 20px;
    }
    .principles-column {
        width: 100%;
    }

    .principles-column li {
        padding-left: 40px;
    }

    .footer-container {
        flex-wrap: wrap;
    }

    .hero-section .hero-content {
        bottom: 20px !important;
        left: 20px !important;
        padding-left: 0 !important;
        max-width: 90% !important;
        word-wrap: break-word;
    }

    .hero-section .hero-content h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        padding-left: 0 !important;
        margin: 0 !important;
        word-wrap: break-word;
    }

    .governance-summary {
        flex-direction: column;
        padding: 20px;
    }
    .governance-summary .text-content {
        flex: 1;
        padding-right: 0;
    }
    .governance-summary .text-content h2 {
        font-size: 2rem;
    }
    .governance-summary .image-container {
        margin-top: 20px;
    }

    .footer-social {
        flex-wrap: wrap;
        gap: 8px;
    }

    .footer-social svg,
    .footer-social i {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }
    .hero p {
        font-size: 1rem;
    }
    .youtube-iframe {
        height: 250px;
    }
}