/* Global Reset & Base */
body {
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

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

.elementor-widget-text-editor ul {
    list-style-type: disc;
    margin: 0 20px 10px;
}

/* Header Structure */
.site-header {
    background-color: #fff;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: padding 0.3s ease;
}

.site-header.scrolled {
    padding: 5px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.header-inner {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Site Branding */
.site-branding {
    width: 250px;
    transition: width 0.3s ease;
}

.site-header.scrolled .site-branding {
    width: 150px;
    padding: 5px 0;
}

.site-branding img {
    max-width: 100%;
    height: auto;
    box-shadow: none !important;
}

.site-branding .site-title {
    margin: 0;
}

.site-branding .site-title a {
    color: #1a4d2e;
    /* Dark green matching YAMAL SLA */
    font-family: serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 1px;
    line-height: 1;
    transition: font-size 0.3s ease;
}

.site-header.scrolled .site-branding .site-title a {
    font-size: 1.4rem;
}

/* Navigation */
.main-navigation ul {
    display: flex;
    gap: 30px;
    align-items: center;
}

.main-navigation ul li a {
    color: #666;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    display: block;
    transition: color 0.2s;
    font-family: "Inter", sans-serif;
}

.main-navigation ul li.current-menu-item a,
.main-navigation ul li a:hover {
    color: #1a4d2e;
}

/* Call to Action Button */
.header-cta {
    margin-left: 20px;
}

.button-donate {
    background-color: #d4af37;
    /* Gold/Mustard */
    color: #000;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease, transform 0.2s;
}

.button-donate:hover {
    background-color: rgba(196, 160, 48, 0.8);
    transform: translateY(-1px);
}

.button-donate svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Form Response Messages */
.form-response {
    padding: 10px 15px;
    margin-top: 15px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

.form-response.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-response.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Menu Toggle - Simple Design */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #1a4d2e;
    /* Brand Dark Green */
    z-index: 9999;
    width: 44px;
    /* Good touch target size */
    height: 44px;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.menu-toggle:hover {
    transform: scale(1.1);
}

.menu-toggle:focus {
    outline: none;
}

.menu-toggle svg {
    width: 32px;
    /* Slightly larger icon for visibility */
    height: 32px;
    display: block;
    stroke-width: 2;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .header-inner {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: space-between;
        /* Changed from center to space-between */
        align-items: center;
    }

    .menu-toggle {
        display: flex !important;
        /* Force flex display */
        order: 2;
        /* Place after branding */
    }

    /* Hide the CTA on very small screens if needed, or adjust */
    .header-cta {
        display: none;
        /* Often hidden inside the menu or separate on mobile. Let's keep it simple for now or maybe keep it if it fits. */
    }

    /* Better Mobile Menu approach: Off-canvas or Dropdown */
    .main-navigation {
        display: none;
        width: 100%;
        order: 4;
        background-color: #fff;
        border-top: 1px solid #eee;
        padding-top: 10px;
        animation: slideDown 0.3s ease-out;
    }

    .main-navigation.toggled {
        display: block !important;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
        padding-bottom: 20px;
    }

    .main-navigation ul li {
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
    }

    .main-navigation ul li:last-child {
        border-bottom: none;
    }

    .main-navigation ul li a {
        display: block;
        padding: 15px 0;
        font-size: 1.1rem;
    }

    /* Re-display CTA inside header if we want, or keeping it hidden. 
       Let's actually show the CTA button at the bottom of the open menu or keep it visible in header if space permits.
       For this specific requested, usually we want the CTA visible. 
    */
    .header-cta {
        display: block;
        order: 3;
    }

    /* On very small screens, maybe adjust branding width/font */
    .site-branding {
        width: auto;
        max-width: 250px;
        flex: 1;
    }

    .site-branding .site-title a {
        font-size: 1.4rem;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer Styles */
.site-footer {
    background-color: #fff;
    padding: 60px 20px 20px;
    font-size: 0.95rem;
    color: #666;
    border-top: 1px solid #eee;
}

.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
}

.footer-col {
    flex: 1;
    min-width: 200px;
}

.footer-col.footer-branding {
    flex: 1.2;

}

.footer-branding img {
    width: 100%;
    max-width: 250px;
    height: auto;
    box-shadow: none !important;
    margin-bottom: 15px;
}

.footer-title {
    color: #1a4d2e;
    /* Dark Green */
    font-family: serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-text {
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Footer Navigation */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav ul li {
    margin-bottom: 8px;
}

.footer-nav ul li a {
    color: #666;
    transition: color 0.2s;
}

.footer-nav ul li a:hover {
    color: #1a4d2e;
}

/* Contact List */
.contact-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.contact-list .icon {
    font-size: 1.1rem;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    color: #666;
    font-size: 1.2rem;
    transition: color 0.2s;
}

.social-icon:hover {
    color: #1a4d2e;
}

/* Focus Section */
.learn-more-link {
    color: #1a4d2e;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s;
}

.learn-more-link:hover {
    opacity: 0.8;
}

/* Copyright & Legal */
.site-info {
    max-width: 1200px;
    margin: 20px auto 0;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
}

.legal-links {
    margin-top: 5px;
}

.legal-links a {
    color: #888;
    margin: 0 5px;
}

.legal-links a:hover {
    color: #1a4d2e;
}

/* Button override for footer if needed */
.button-donate {
    display: inline-flex;
    justify-content: center;
}

.elementor-17 .elementor-element.elementor-element-39e85a1>.e-n-accordion>.e-n-accordion-item[open]>.e-n-accordion-item-title {
    border-radius: 20px 20px 0 0;
}

.badge-information {
    width: 150px !important;
}



/* Responsive */
@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        gap: 30px;
    }

    .footer-col {
        width: 100%;
    }
}

/* Contact Page Styles */
.contact-page-wrapper {
    background-color: #f7f9fa;
    /* Light background for the whole page area below header */
    min-height: 100vh;
}

.contact-hero {
    background-color: #eff1f3;
    padding: 80px 20px 60px;
    text-align: center;
}

.contact-hero .page-title {
    color: #1a4d2e;
    font-family: serif;
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: 400;
}

.contact-hero .page-subtitle {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.contact-main.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
}

/* Left Column */
.contact-info-col {
    padding-top: 20px;
}

.section-title {
    color: #1a4d2e;
    font-family: serif;
    font-size: 1.6rem;
    margin-bottom: 25px;
    font-weight: 400;
}

.info-group {
    margin-bottom: 50px;
}

.info-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color: #555;
    font-size: 1rem;
}

.info-list li a {
    color: #555;
    transition: color 0.2s;
}

.info-list li a:hover {
    color: #1a4d2e;
}

.info-list .icon {
    color: #1a4d2e;
    display: flex;
    align-items: center;
}

.social-icons {
    display: flex;
    gap: 20px;
}

.social-link {
    color: #777;
    transition: color 0.2s;
}

.social-link:hover {
    color: #1a4d2e;
}

.section-desc {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.map-placeholder img {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.map-placeholder img:hover {
    transform: scale(1.02);
}

/* Right Column - Form Card */
.contact-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.card-title {
    color: #1a4d2e;
    font-family: serif;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.card-desc {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 25px;
}

/* Tabs */
.form-tabs {
    display: flex;
    background: #f5f5f5;
    padding: 5px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #666;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    text-align: center;
    /* Ensure text is centered in div */
}

.tab-btn.active {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Form Styles */
/* Form Styles - Scoped */
.custom-form .form-group {
    margin-bottom: 20px;
}

.custom-form .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}

.custom-form .form-input {
    width: 100%;
    padding: 12px 15px;
    background: #f7f9fa;
    border: 1px solid #eee;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #333;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    /* Important for padding */
}

.custom-form .form-input:focus {
    border-color: #1a4d2e;
    background: #fff;
}

.custom-form .form-textarea {
    min-height: 120px;
    resize: vertical;
}

.custom-form .submit-btn {
    background-color: #1a4d2e;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    display: inline-block;
    /* Essential for div */
    text-align: center;
}

.custom-form .submit-btn:hover {
    background-color: #143d24;
}

.custom-form .submit-btn[disabled],
.custom-form .submit-btn.disabled {
    background-color: #999;
    cursor: not-allowed;
    pointer-events: none;
}

/* Form Messages */
.custom-form .form-response {
    margin-bottom: 20px;
    font-size: 0.95rem;
    border-radius: 8px;
    padding: 0;
    transition: all 0.3s ease;
}

.custom-form .form-response.success {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    border: 1px solid #c3e6cb;
}

.custom-form .form-response.error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border: 1px solid #f5c6cb;
}

/* Responsive Contact */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-card {
        padding: 30px 20px;
    }
}