/*--------------------------------------------------------------
# Override any conflicting styles - MVV Professional Design
--------------------------------------------------------------*/
/* Ensure MVV section always uses professional card design, not tiles */
.disha-onepage .mvv-item,
.mvv-item {
    display: none !important; /* Hide any old tile-style items */
}

/* Force MVV cards to display properly */
.disha-onepage .mvv-card {
    display: block !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
}

/* Ensure section header is visible */
.disha-onepage .mvv-section .section-header {
    display: block !important;
    text-align: center !important;
    margin-bottom: 40px !important;
}

/* Auto-hide header on all devices for better content area.
   The header is hidden by default and becomes visible when the user scrolls up.
   This provides better UX by giving more screen space. */
.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    transform: translateY(-110%) !important;
    transition: transform 0.3s ease !important;
}

body.header-visible .site-header {
    transform: translateY(0) !important;
}

/* Show header by default on desktop screens AND mobile to prevent loading issues */
@media (min-width: 769px) {
    .site-header {
        transform: translateY(0) !important;
    }

    body.header-visible .site-header {
        transform: translateY(0) !important;
    }
}

/* Show header by default on mobile to prevent loading issues */
@media (max-width: 768px) {
    .site-header {
        transform: translateY(0) !important;
    }

    body.header-visible .site-header {
        transform: translateY(0) !important;
    }
}

/* Ensure proper top padding for content when header is auto-hidden */
body {
    padding-top: 0;
}

.site-main {
    padding-top: 120px;
}

/* Ensure team member pages have proper top padding */
body.single-wpteam_member .site-main,
body.single-wpteam_member .entry-content {
    padding-top: 120px !important;
    margin-top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    body.single-post .site-header,
    body.single-post.header-visible .site-header {
        transition: none;
    }
}

/* Hide footer on news/archive pages */
body.archive .site-footer,
body.category .site-footer,
body.tag .site-footer,
body.search .site-footer {
    display: none !important;
}

/* Completely hide FAB containers */
.fab-container {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Blog Posts Grid */
.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.blog-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.blog-image {
    position: relative;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.blog-content-inner {
    padding: 25px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.85rem;
    color: #666;
}

.blog-category {
    background: var(--primary-color);
    color: #fff;
    padding: 4px 12px;
    border-radius: 15px;
    font-weight: 500;
}

.blog-author {
    color: #888;
}

.blog-author i {
    margin-right: 5px;
}

.blog-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    line-height: 1.4;
}

.blog-title a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-title a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

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

.blog-read-more {
    text-align: right;
}

.blog-pagination {
    text-align: center;
    margin-top: 50px;
}

.blog-pagination .page-numbers {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    background: #f8f9fa;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
    background: var(--primary-color);
    color: #fff;
}

.no-posts-content {
    text-align: center;
    padding: 80px 20px;
}

.no-posts-content h2 {
    color: var(--text-color);
    margin-bottom: 20px;
}

.no-posts-content p {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* Critical Mobile FAB Fixes */
@media (max-width: 768px) {
    /* Force FAB container to be completely hidden */
    .fab-container {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Force all FAB items to be visible */
    .fab-container .fab-item,
    .fab-container button.fab-donate,
    .fab-container button.fab-volunteer,
    .fab-container a.fab-whatsapp,
    .fab-container a[href*="whatsapp"],
    .fab-container a[href*="facebook"],
    .fab-container a[href*="instagram"],
    .fab-container a#scroll-to-top {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background-color: var(--primary-color) !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        box-shadow: 0 4px 20px rgba(44, 82, 130, 0.3) !important;
        transition: all 0.3s ease !important;
        border: none !important;
        cursor: pointer !important;
        font-size: 16px !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 999998 !important;
        pointer-events: auto !important;
    }
    
    /* WP Accessibility toolbar mobile positioning */
    #wp-accessibility-toolbar,
    .wp-accessibility-toolbar {
        position: fixed !important;
        bottom: 120px !important;
        left: 20px !important;
        z-index: 1000000 !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Share link buttons for sections */
.section-share-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(44, 82, 130, 0.2);
    border-radius: 20px;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.section-share-link:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 82, 130, 0.3);
}

.section-share-link i {
    font-size: 0.9rem;
}

/* Hide share links on mobile for cleaner look */
@media (max-width: 768px) {
    .section-share-link {
        display: none;
    }
}

/* Smooth scroll behavior for all browsers */
html {
    scroll-behavior: smooth;
}

/* Add subtle visual indicator for anchor links */
section:target::before {
    content: '';
    display: block;
    height: 80px; /* Height of fixed header */
    margin-top: -80px; /* Negative margin to offset header */
    visibility: hidden;
    pointer-events: none;
}

.zeffy-iframe-container iframe,
div[style*="zeffy.com"] iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    background: transparent !important;
}

/* Responsive Zeffy iframe wrapper */
div[style*="position:relative"][style*="overflow:hidden"] {
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure iframe responsiveness in WordPress blocks */
.wp-block-custom-html iframe,
.entry-content iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* Specific Zeffy embed fixes */
iframe[src*="zeffy.com"] {
    width: 100% !important;
    min-height: 450px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #fff !important;
}

/* Ensure proper spacing around Zeffy embeds */
.entry-content .wp-block-custom-html:has(iframe[src*="zeffy.com"]),
.entry-content div:has(iframe[src*="zeffy.com"]) {
    margin: 30px 0 !important;
    padding: 20px !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Fix for Zeffy iframe wrapper div */
div[style*="padding-top:450px"] {
    margin: 30px auto !important;
    max-width: 800px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure Zeffy iframes work in all contexts */
.page .entry-content iframe[src*="zeffy.com"],
.single .entry-content iframe[src*="zeffy.com"],
.archive .entry-content iframe[src*="zeffy.com"] {
    width: 100% !important;
    min-height: 450px !important;
    border: none !important;
    border-radius: 8px !important;
    display: block !important;
}

/* Fix for WordPress custom HTML blocks containing Zeffy iframes */
.wp-block-custom-html:has(div[style*="zeffy.com"]),
.wp-block-custom-html:has(iframe[src*="zeffy.com"]) {
    margin: 30px 0 !important;
    padding: 0 !important;
}

/* Ensure proper iframe container sizing */
div[style*="position:relative"][style*="height:450px"] {
    width: 100% !important;
    max-width: 800px !important;
    margin: 30px auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Mobile responsive adjustments for Zeffy iframes */
@media (max-width: 768px) {
    div[style*="padding-top:450px"] {
        margin: 20px 15px !important;
        max-width: none !important;
    }
    
    iframe[src*="zeffy.com"] {
        min-height: 400px !important;
    }
    
    /* Header social and action buttons mobile adjustments */
    .header-social {
        gap: 8px;
    }
    
    .header-social .social-link {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .header-actions {
        gap: 6px;
    }
    
    .btn-volunteer-icon,
    .btn-header-donate {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    /* Ensure header container doesn't overflow on mobile */
    .header-container {
        padding: 10px 15px;
        gap: 10px;
    }
    
    .header-cta {
        gap: 8px;
        flex-shrink: 0;
        min-width: 0; /* Allow shrinking */
    }
    
    /* Reduce header element sizes further on very small screens */
    .header-social .social-link {
        width: 28px;
        height: 28px;
    }
    
    .header-social .social-link i {
        font-size: 12px;
    }
    
    .btn-volunteer-icon,
    .btn-header-donate {
        width: 28px;
        height: 28px;
    }
    
    .btn-volunteer-icon i,
    .btn-header-donate i {
        font-size: 12px;
    }
}

/* Prevent theme styles from interfering with Zeffy iframes */
.entry-content div[style*="position:relative"] iframe,
.entry-content div[style*="overflow:hidden"] iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Ensure Zeffy container maintains aspect ratio */
div[style*="padding-top:450px"] {
    position: relative !important;
    width: 100% !important;
    padding-top: 450px !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 30px auto !important;
    max-width: 800px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* --------------------------------------------------------------
# UI Polish Overrides (safe final layer)
-------------------------------------------------------------- */
@media (min-width: 1024px) {
    section,
    .site-main,
    .site-content,
    .content-area {
        max-width: none !important;
    }

    .container,
    .header-container,
    .hero-content {
        max-width: 1240px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (min-width: 992px) {
    .main-navigation ul {
        gap: 6px !important;
    }

    .main-navigation a {
        font-size: 0.94rem !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        letter-spacing: 0.2px !important;
        padding: 10px 12px !important;
    }
}

/* Mission/Vision repair: stable cards and predictable spacing */
#mission.mvv-section {
    padding: 96px 0 !important;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
}

#mission .mvv-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin-top: 42px !important;
}

#mission .mvv-card {
    background: #ffffff !important;
    border: 1px solid #e5eaf0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(18, 52, 86, 0.08) !important;
    padding: 30px 24px !important;
    text-align: left !important;
    min-height: 230px !important;
    transform: none !important;
}

#mission .mvv-card::after {
    display: none !important;
}

#mission .mvv-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 34px rgba(18, 52, 86, 0.12) !important;
}

#mission .mvv-icon {
    font-size: 1.8rem !important;
    margin-bottom: 14px !important;
    filter: none !important;
}

#mission .mvv-card h3 {
    font-size: 1.35rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-bottom: 10px !important;
}

#mission .mvv-card .mvv-description {
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: #334155 !important;
}

@media (max-width: 991px) {
    #mission .mvv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    #mission .mvv-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Arrow-only scroll to top (no circle) */
#scroll-to-top.scroll-to-top-btn {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px !important;
    right: 22px !important;
    bottom: 20px !important;
}

#scroll-to-top.scroll-to-top-btn i {
    font-size: 32px !important;
    color: #2C5282 !important;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.85) !important;
}

#scroll-to-top.scroll-to-top-btn:hover i {
    color: #1A365D !important;
}

/* --------------------------------------------------------------
# Premium Polish Pass 2
-------------------------------------------------------------- */
section {
    padding: 88px 0 !important;
}

@media (max-width: 991px) {
    section {
        padding: 68px 0 !important;
    }
}

.section-header {
    margin-bottom: 44px !important;
}

.section-header h2 {
    font-size: clamp(2rem, 2.6vw, 2.8rem) !important;
    letter-spacing: 0.2px !important;
    line-height: 1.15 !important;
}

.section-header p {
    max-width: 760px !important;
    font-size: 1.06rem !important;
    color: #4a5568 !important;
}

.site-header {
    border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
}

.header-container {
    min-height: 78px !important;
}

@media (min-width: 992px) {
    .site-branding .logo-img {
        max-height: 62px !important;
        max-width: 62px !important;
    }

    .site-branding .logo-container {
        height: 62px !important;
    }

    .header-cta {
        gap: 10px !important;
    }

    .main-navigation {
        justify-content: flex-start !important;
    }
}

.hero-section {
    min-height: 88vh !important;
}

.hero-content {
    max-width: 900px !important;
    padding-top: 24px !important;
}

.hero-title {
    font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 16px !important;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.32rem) !important;
    max-width: 760px !important;
    margin: 0 auto !important;
}

/* Consistent card polish */
.guidance-item,
.program-item,
.wpteam-member,
.gallery-fallback,
.events-fallback {
    border: 1px solid #e6edf3 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

.guidance-item:hover,
.program-item:hover,
.wpteam-member:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1) !important;
}

.program-content h3,
.guidance-item h3,
.wpteam-member h3 {
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Better desktop and mobile dropdown behavior */
.menu-item-has-children:focus-within .sub-menu,
.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 992px) {
    .main-navigation {
        max-height: calc(100vh - 84px);
        overflow-y: auto;
    }

    .main-navigation .menu-item-has-children > a::after {
        content: '▾' !important;
        float: right;
        transition: transform 0.25s ease;
    }

    .main-navigation .menu-item-has-children .sub-menu {
        max-height: 0;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
        border-left: 2px solid transparent !important;
        transition: max-height 0.28s ease;
        background: #f8fafc !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .main-navigation .menu-item-has-children.submenu-open > .sub-menu {
        max-height: 420px;
        border-left-color: var(--primary-color) !important;
        margin: 4px 16px 6px 24px !important;
        border-radius: 8px !important;
        background: #f1f5f9 !important;
    }

    .main-navigation .menu-item-has-children.submenu-open > a::after {
        transform: rotate(180deg);
    }

    .main-navigation .sub-menu a {
        padding: 10px 14px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        color: #1e3a5f !important;
    }
}

/* --------------------------------------------------------------
# Premium Polish Pass 3 (Typography + Consistency)
-------------------------------------------------------------- */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    color: #1f2937 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

p,
li {
    color: #475569;
}

.hero-subtitle,
.section-header p,
.program-content p,
.guidance-item p,
.footer-description {
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
}

.main-navigation a {
    position: relative;
}

.main-navigation a::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
    border-radius: 2px;
}

.main-navigation a:hover::after,
.main-navigation a:focus-visible::after {
    transform: scaleX(1);
}

.btn,
.footer-modal-trigger {
    letter-spacing: 0.2px;
}

.tag {
    border: 1px solid #d9e3ee;
    background-color: #f8fbff;
    font-weight: 500;
}

/* Clear, professional focus states */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid #2C5282;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Keep rich cards readable by avoiding extra-long lines */
.mvv-card .mvv-description,
.guidance-item p,
.program-content p {
    max-width: 58ch;
}

@media (max-width: 768px) {
    body {
        font-size: 15.5px !important;
    }

    .section-header p {
        font-size: 1rem !important;
    }
}

/* Keep donate/volunteer icon buttons perfectly circular like social icons */
.header-actions .btn-volunteer-icon,
.header-actions .btn-header-donate {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
}

.header-actions .btn-volunteer-icon i,
.header-actions .btn-header-donate i {
    line-height: 1 !important;
}

@media (max-width: 768px) {
    .header-actions .btn-volunteer-icon,
    .header-actions .btn-header-donate {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        flex: 0 0 32px !important;
    }
}

/* Final mobile header icon uniformity override */
@media (max-width: 768px) {
    .header-social .social-link,
    .header-actions .btn-volunteer-icon,
    .header-actions .btn-header-donate {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        padding: 0 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 32px !important;
    }

    .header-social .social-link i,
    .header-actions .btn-volunteer-icon i,
    .header-actions .btn-header-donate i {
        font-size: 13px !important;
        line-height: 1 !important;
    }
}

/* --------------------------------------------------------------
# Mission / Vision / Values Professional Layout
-------------------------------------------------------------- */
#mission .mvv-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
}

#mission .mvv-group {
    display: grid !important;
    gap: 20px !important;
}

#mission .mvv-group-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#mission .mvv-values-header {
    text-align: center !important;
    margin: 8px 0 2px !important;
}

#mission .mvv-values-header h3 {
    font-size: 1.6rem !important;
    color: #1E3A5F !important;
    margin: 0 0 6px !important;
    letter-spacing: 0.2px !important;
}

#mission .mvv-values-header p {
    margin: 0 auto !important;
    color: #5b6b7f !important;
    max-width: 62ch !important;
}

#mission .mvv-group-values {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#mission .mvv-card {
    border-radius: 14px !important;
    border: 1px solid #dce6f1 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07) !important;
    padding: 24px 20px !important;
    text-align: left !important;
    min-height: 220px !important;
}

#mission .mvv-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.11) !important;
}

#mission .mvv-card::before {
    height: 4px !important;
    border-radius: 14px 14px 0 0 !important;
}

#mission .mvv-card::after {
    display: none !important;
}

#mission .mvv-card-primary {
    padding: 28px 24px !important;
    min-height: 245px !important;
}

#mission .mvv-tagline {
    display: inline-block !important;
    margin-bottom: 8px !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 999px !important;
    color: #1E3A5F !important;
    background: #e8f0fb !important;
}

#mission .mvv-card h3 {
    margin-bottom: 8px !important;
    font-size: 1.25rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

#mission .mvv-description {
    margin: 0 !important;
    color: #4a5568 !important;
    line-height: 1.65 !important;
    font-size: 0.98rem !important;
}

/* Guidance-like blue/green alternation */
#mission .mvv-group-values .mvv-card-value:nth-child(odd),
#mission .mvv-group-primary .mvv-card-primary:nth-child(odd) {
    background: linear-gradient(145deg, #ffffff 0%, #eff6ff 100%) !important;
    border-color: rgba(44, 82, 130, 0.18) !important;
}

#mission .mvv-group-values .mvv-card-value:nth-child(even),
#mission .mvv-group-primary .mvv-card-primary:nth-child(even) {
    background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%) !important;
    border-color: rgba(56, 161, 105, 0.18) !important;
}

#mission .mvv-group-values .mvv-card-value:nth-child(odd)::before,
#mission .mvv-group-primary .mvv-card-primary:nth-child(odd)::before {
    background: linear-gradient(90deg, #2C5282 0%, #1A365D 100%) !important;
}

#mission .mvv-group-values .mvv-card-value:nth-child(even)::before,
#mission .mvv-group-primary .mvv-card-primary:nth-child(even)::before {
    background: linear-gradient(90deg, #38A169 0%, #2F855A 100%) !important;
}

#mission .mvv-group-values .mvv-card-value:nth-child(odd) .mvv-icon,
#mission .mvv-group-primary .mvv-card-primary:nth-child(odd) .mvv-icon,
#mission .mvv-group-values .mvv-card-value:nth-child(odd) h3,
#mission .mvv-group-primary .mvv-card-primary:nth-child(odd) h3 {
    color: #2C5282 !important;
}

#mission .mvv-group-values .mvv-card-value:nth-child(even) .mvv-icon,
#mission .mvv-group-primary .mvv-card-primary:nth-child(even) .mvv-icon,
#mission .mvv-group-values .mvv-card-value:nth-child(even) h3,
#mission .mvv-group-primary .mvv-card-primary:nth-child(even) h3 {
    color: #2F855A !important;
}

#mission .mvv-icon {
    font-size: 1.55rem !important;
    margin-bottom: 10px !important;
    filter: none !important;
}

@media (max-width: 1199px) {
    #mission .mvv-group-values {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991px) {
    #mission .mvv-group-primary {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    #mission .mvv-group-values {
        grid-template-columns: 1fr !important;
    }

    #mission .mvv-card,
    #mission .mvv-card-primary {
        min-height: 0 !important;
        padding: 20px 16px !important;
    }

    #mission .mvv-values-header h3 {
        font-size: 1.35rem !important;
    }
}

/* --------------------------------------------------------------
# Global Typography Normalization
-------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

p,
li,
a,
span,
small {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    letter-spacing: 0 !important;
}

.section-header h2,
.hero-title,
.mvv-card h3,
.guidance-item h3,
.program-content h3,
.footer-section h4 {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.section-header p,
.hero-subtitle,
.mvv-description,
.guidance-item p,
.program-content p,
.footer-description {
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

@media (max-width: 768px) {
    body {
        font-size: 15.5px !important;
    }

    .section-header h2 {
        font-size: 1.9rem !important;
    }
}

/* --------------------------------------------------------------
# Clean Uniformity Pass (Menu + MVV + Guidance alignment)
-------------------------------------------------------------- */
:root {
    --ui-heading-color: #1e3a5f;
    --ui-text-color: #475569;
    --ui-card-heading-size: 1.28rem;
    --ui-card-body-size: 0.98rem;
    --ui-nav-size: 0.95rem;
}

/* Navigation: consistent professional sizing */
.main-navigation ul {
    gap: 8px !important;
}

.main-navigation a {
    font-size: var(--ui-nav-size) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    padding: 10px 12px !important;
    color: #1f2937 !important;
}

.sub-menu a {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
}

/* Section headings: one rhythm across site */
.section-header h2 {
    color: var(--ui-heading-color) !important;
    font-size: clamp(2rem, 2.5vw, 2.7rem) !important;
    line-height: 1.16 !important;
}

.section-header p {
    font-size: 1rem !important;
    line-height: 1.68 !important;
    color: var(--ui-text-color) !important;
}

/* Align Mission/Vision/Values with Guidance visual language */
#mission .mvv-card {
    text-align: center !important;
    padding: 26px 22px !important;
}

#mission .mvv-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 12px !important;
    font-size: 1.6rem !important;
}

#mission .mvv-card h3,
.guidance-item h3,
.program-content h3 {
    font-size: var(--ui-card-heading-size) !important;
    line-height: 1.25 !important;
    color: var(--ui-heading-color) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 10px !important;
}

#mission .mvv-description,
.guidance-item p,
.program-content p {
    font-size: var(--ui-card-body-size) !important;
    line-height: 1.7 !important;
    color: var(--ui-text-color) !important;
    max-width: 32ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#mission .mvv-values-header h3 {
    color: var(--ui-heading-color) !important;
    font-size: 1.5rem !important;
}

#mission .mvv-values-header p {
    font-size: 0.98rem !important;
    color: var(--ui-text-color) !important;
}

/* Guidance cards: keep same spacing feel as MVV cards */
.guidance-item {
    padding: 28px 22px 24px !important;
}

.guidance-icon {
    margin-bottom: 12px !important;
    font-size: 1.6rem !important;
}

.guidance-item h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
    font-style: normal !important;
}

/* Tablet + mobile tuning */
@media (max-width: 1024px) {
    .main-navigation a {
        font-size: 0.92rem !important;
        padding: 9px 10px !important;
    }

    #mission .mvv-card,
    .guidance-item,
    .program-item {
        border-radius: 12px !important;
    }
}

@media (max-width: 768px) {
    .section-header h2 {
        font-size: 1.85rem !important;
    }

    .section-header p {
        font-size: 0.98rem !important;
    }

    #mission .mvv-card,
    .guidance-item {
        padding: 20px 16px !important;
    }

    #mission .mvv-card h3,
    .guidance-item h3,
    .program-content h3 {
        font-size: 1.18rem !important;
    }

    #mission .mvv-description,
    .guidance-item p,
    .program-content p {
        font-size: 0.95rem !important;
        max-width: 100% !important;
    }
}

/* Hero subtitle contrast fix over green video overlay */
.hero-subtitle {
    color: #f8fbff !important;
    font-size: clamp(1.08rem, 2vw, 1.26rem) !important;
    line-height: 1.6 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
    background: rgba(15, 23, 42, 0.34) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    display: inline-block !important;
    max-width: 760px !important;
}

@media (max-width: 768px) {
    .hero-subtitle {
        padding: 8px 12px !important;
        border-radius: 10px !important;
    }
}

/* --------------------------------------------------------------
# Header / Navigation System Refinement (all displays)
-------------------------------------------------------------- */
.site-header {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
}

.header-container {
    max-width: 1240px !important;
    min-height: 80px !important;
    padding: 10px 20px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    column-gap: 16px !important;
}

.site-branding {
    justify-self: start !important;
}

.site-branding .brand-link {
    display: inline-flex !important;
    align-items: center !important;
}

.site-branding .logo-container {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
}

.site-branding .logo-img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: contain !important;
}

.main-navigation {
    justify-self: center !important;
    width: 100% !important;
    justify-content: center !important;
}

.main-navigation ul {
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
}

.main-navigation a {
    font-size: 0.93rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 9px 11px !important;
}

.header-cta {
    justify-self: end !important;
    gap: 8px !important;
}

/* Tablet adjustments */
@media (max-width: 1200px) {
    .header-container {
        min-height: 76px !important;
        column-gap: 12px !important;
    }

    .site-branding .logo-img {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .main-navigation a {
        font-size: 0.88rem !important;
        padding: 8px 9px !important;
    }

    .header-social {
        gap: 7px !important;
    }
}

/* Mobile / small tablet navigation behavior */
@media (max-width: 992px) {
    .header-container {
        grid-template-columns: auto auto auto !important;
        grid-template-areas: "brand cta toggle" !important;
        min-height: 70px !important;
        padding: 10px 14px !important;
    }

    .site-branding {
        grid-area: brand !important;
    }

    .header-cta {
        grid-area: cta !important;
    }

    .mobile-menu-toggle {
        grid-area: toggle !important;
        display: inline-flex !important;
        justify-self: end !important;
        align-items: center !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
    }

    /* Override older rule that hid toggle off-home */
    body:not(.home) .mobile-menu-toggle {
        display: inline-flex !important;
    }

    .main-navigation {
        display: none;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        width: 100% !important;
        background: #ffffff !important;
        border-top: 1px solid #e6edf3 !important;
        border-radius: 0 0 12px 12px !important;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14) !important;
        max-height: calc(100vh - 76px) !important;
        overflow-y: auto !important;
        z-index: 1200 !important;
    }

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

    .main-navigation ul {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 8px 0 !important;
    }

    .main-navigation li {
        border-bottom: 1px solid #edf2f7 !important;
    }

    .main-navigation a {
        display: block !important;
        padding: 13px 16px !important;
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }

    .sub-menu a {
        font-size: 0.9rem !important;
        padding: 10px 14px !important;
    }
}

@media (max-width: 768px) {
    .site-branding .logo-img {
        width: 46px !important;
        height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
    }

    .header-cta {
        gap: 6px !important;
    }

    /* Keep header clean: prioritize actions + menu on narrow screens */
    .header-social {
        display: none !important;
    }
}

/* Center last row in Guidance (5 cards) on desktop */
@media (min-width: 1100px) {
    .guidance-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 24px !important;
    }

    .guidance-item {
        flex: 0 1 calc((100% - 48px) / 3) !important;
        max-width: calc((100% - 48px) / 3) !important;
    }

    .programs-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 24px !important;
    }

    .program-item {
        flex: 0 1 calc((100% - 48px) / 3) !important;
        max-width: calc((100% - 48px) / 3) !important;
    }
}

/* --------------------------------------------------------------
# Header Menu Polish
-------------------------------------------------------------- */
@media (min-width: 993px) {
    .main-navigation ul {
        gap: 12px !important;
    }

    .main-navigation > ul > li > a {
        text-transform: uppercase !important;
        letter-spacing: 0.07em !important;
        font-size: 0.83rem !important;
        font-weight: 700 !important;
        padding: 10px 14px !important;
    }

    /* Professional desktop dropdown design */
    .menu-item-has-children {
        position: relative !important;
    }

    /* Center About Us dropdown under parent item */
    .menu-item-has-children .sub-menu {
        left: 50% !important;
        right: auto !important;
        width: 168px !important;
        min-width: 168px !important;
        max-width: 168px !important;
        padding: 6px !important;
        border-radius: 12px !important;
        border: 1px solid #e5eaf0 !important;
        background: #ffffff !important;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12) !important;
        transform: translateX(-50%) translateY(-8px) !important;
    }

    .menu-item-has-children .sub-menu li {
        border-bottom: none !important;
        margin: 0 !important;
    }

    .sub-menu a {
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        background: transparent !important;
        color: #1e3a5f !important;
        text-align: center !important;
    }

    .sub-menu a:hover,
    .sub-menu a:focus-visible {
        background: #f8fbff !important;
        color: #1e3a5f !important;
    }

    .menu-item-has-children:hover .sub-menu,
    .menu-item-has-children:focus-within .sub-menu {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* Hero subtitle: remove gray panel while preserving contrast */
.hero-subtitle {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: block !important;
    color: #f5f9ff !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55) !important;
}

/* --------------------------------------------------------------
# Final Site-wide Polish (Logo + Mobile Icons + Aesthetic Pass)
-------------------------------------------------------------- */
/* Larger, more visible logo across breakpoints */
.site-branding .logo-img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
}

@media (min-width: 1200px) {
    .site-branding .logo-img {
        width: 74px !important;
        height: 74px !important;
        max-width: 74px !important;
        max-height: 74px !important;
    }
}

@media (min-width: 993px) and (max-width: 1199px) {
    .site-branding .logo-img {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }
}

/* Mobile: keep logo visible + compact, restore social icons */
@media (max-width: 992px) {
    .site-branding .logo-img {
        width: 54px !important;
        height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
    }
}

@media (max-width: 768px) {
    .site-branding .logo-img {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .header-cta {
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    /* Bring social icons back, compact and uniform */
    .header-social {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        margin-right: 4px !important;
    }

    .header-social .social-link {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        flex: 0 0 32px !important;
        border-radius: 50% !important;
    }

    .header-social .social-link i {
        font-size: 14px !important;
    }

}

/* Very narrow screens: drop LinkedIn first to avoid wrap (keep size uniform) */
@media (max-width: 430px) {
    .header-social .social-link[href*="linkedin"] {
        display: none !important;
    }

    .header-social {
        gap: 5px !important;
    }
}

/* Unify button radius + slight refinement */
.btn,
.footer-modal-trigger {
    border-radius: 10px !important;
}

.btn-primary,
.btn-secondary {
    padding: 12px 22px !important;
}

/* Consistent card hover lift across sections */
.mvv-card,
.guidance-item,
.program-item,
.wpteam-member,
.event-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.mvv-card:hover,
.guidance-item:hover,
.program-item:hover,
.wpteam-member:hover,
.event-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1) !important;
}

/* Accessibility: visible focus state */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #2C5282 !important;
    outline-offset: 3px !important;
}

/* Tablet: 2-column Programs/Guidance to avoid cramped rows */
@media (min-width: 768px) and (max-width: 1099px) {
    .programs-grid,
    .guidance-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    .program-item,
    .guidance-item {
        max-width: none !important;
        flex: 0 1 auto !important;
    }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .swiper-wrapper {
        transition: none !important;
    }
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}