/* =============================================================
   IACU THEME — COMPREHENSIVE RESPONSIVE STYLESHEET
   Covers: Mobile (< 640px), Tablet (640px–1023px), Desktop (1024px+)
   ============================================================= */

/* ---- Base resets ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; display: block; }
table { width: 100%; }

/* ---- Prevent horizontal overflow on every page ------------ */
html, body { overflow-x: hidden; width: 100%; }

/* ============================================================
   TOP BAR
   ============================================================ */
@media (max-width: 767px) {
    /* Already hidden on mobile via `hidden md:block` but keep safe */
    .iacu-topbar { display: none !important; }
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */

/* Logo sizing safety */
#mainHeader img { max-height: 56px; width: auto; object-fit: contain; }
@media (max-width: 639px) {
    #mainHeader img { max-height: 44px; }
}

/* Sticky header: reduce padding on small screens */
@media (max-width: 1023px) {
    #headerTopRow { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
}

/* Desktop nav: submenu arrows & dropdowns */
header nav ul { position: relative; }
header nav > ul > li { position: relative; }
header nav > ul > li > .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 60px -10px rgba(30, 58, 87,0.18);
    z-index: 200;
    padding: 8px 0;
}
header nav > ul > li:hover > .sub-menu,
header nav > ul > li:focus-within > .sub-menu { display: block; }
header nav > ul > li > .sub-menu li a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    transition: color .2s, background .2s;
}
header nav > ul > li > .sub-menu li a:hover { color: #c52127; background: #f8fafc; }

/* nested 2nd level */
header nav > ul > li > .sub-menu li { position: relative; }
header nav > ul > li > .sub-menu .sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 60px -10px rgba(30, 58, 87,0.18);
    z-index: 300;
    padding: 8px 0;
}
header nav > ul > li > .sub-menu li:hover > .sub-menu { display: block; }

/* Mobile drawer: submenu accordion */
#mobileMenuDrawer .sub-menu {
    display: none;
    padding-left: 1rem;
    margin-top: 0.5rem;
    border-left: 2px solid #e2e8f0;
}
#mobileMenuDrawer .sub-menu.is-open { display: block; }
#mobileMenuDrawer li.menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* ============================================================
   HERO SECTION (front-page.php)
   ============================================================ */
@media (max-width: 767px) {
    .hero-bg {
        padding-top: 5rem !important;
        padding-bottom: 4rem !important;
        background-attachment: scroll !important; /* fixed bg kills perf on mobile */
        min-height: 80vh;
    }
    .hero-bg h2 { font-size: 2rem !important; line-height: 1.15 !important; }
    .hero-bg p  { font-size: 1rem !important; }
}
@media (max-width: 479px) {
    .hero-bg h2 { font-size: 1.75rem !important; }
}

/* Force hero heading to stay on exactly 2 lines */
.hero-bg h2 {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* ============================================================
   CATEGORY GRID (checkerboard) — front-page.php
   ============================================================ */
/* On mobile stack each block full-width, minimum height reduced */
@media (max-width: 767px) {
    .iacu-cat-grid-item { min-height: 280px !important; padding: 2rem !important; }
    .iacu-cat-grid-item h3 { font-size: 1.5rem !important; }
}

/* ============================================================
   ABOUT SECTION — front-page.php
   ============================================================ */
@media (max-width: 1023px) {
    .iacu-about-img-wrap { margin-bottom: 3.5rem; }
    /* floating badges can overflow on tablet */
    .iacu-about-img-wrap .animate-bounce { left: 0 !important; bottom: -1rem !important; }
}
@media (max-width: 767px) {
    .iacu-about-img-wrap .animate-bounce {
        position: relative !important;
        left: auto !important; bottom: auto !important;
        margin-top: 1rem;
        transform: none !important;
        animation: none !important;
    }
    /* hide the second badge (member avatars) on small screens */
    .iacu-about-img-wrap .hidden.md\:flex { display: none !important; }
}

/* ============================================================
   COUNTER SECTION — front-page.php
   ============================================================ */
@media (max-width: 767px) {
    .iacu-counter-section { background-attachment: scroll !important; }
    .iacu-counter-card { padding: 2rem 1.25rem !important; }
    .counter-value { font-size: 2.5rem !important; }
}

/* ============================================================
   FEATURES / BENEFIT CARDS — front-page.php
   ============================================================ */
@media (max-width: 767px) {
    .feature-card { padding: 2rem 1.5rem !important; }
}

/* ============================================================
   SEARCH SECTION — front-page.php
   ============================================================ */
@media (max-width: 767px) {
    .iacu-search-section { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .iacu-search-section form { flex-direction: column !important; border-radius: 12px !important; overflow: hidden; }
    .iacu-search-section form input,
    .iacu-search-section form button {
        width: 100% !important;
        border-radius: 0 !important;
    }
    .iacu-search-section h2 { font-size: 1.75rem !important; }
}

/* ============================================================
   BANNER HEADERS (inner pages)
   ============================================================ */
@media (max-width: 767px) {
    .iacu-page-banner { padding-top: 5rem !important; padding-bottom: 2.5rem !important; }
    .iacu-page-banner h1 { font-size: 1.875rem !important; line-height: 1.2 !important; }
}

/* ============================================================
   INNER PAGE LAYOUT (2-col: content + sidebar)
   ============================================================ */
/* Sidebar sticky is fine on desktop, reset on mobile */
@media (max-width: 1023px) {
    .iacu-sidebar-sticky { position: relative !important; top: auto !important; }
}

/* ============================================================
   BECOME A MEMBER — page-become-a-member.php
   ============================================================ */
@media (max-width: 767px) {
    /* Process timeline: shift bullet to fit smaller widths */
    .iacu-timeline-wrap { padding-left: 1.5rem !important; margin-left: 0.5rem !important; }
    .iacu-timeline-wrap .iacu-step-num { left: -2rem !important; width: 1.75rem !important; height: 1.75rem !important; font-size: 0.65rem !important; }
}

/* ============================================================
   GOVERNANCE PAGE — page-governance.php
   ============================================================ */
@media (max-width: 767px) {
    .iacu-gov-role-card { padding: 1.25rem !important; }
}

/* ============================================================
   PUBLICATIONS — page-publications.php
   ============================================================ */
@media (max-width: 767px) {
    .iacu-pub-card { flex-direction: column !important; }
    .iacu-pub-cover { width: 100% !important; height: 220px !important; }
}

/* ============================================================
   FOOTER
   ============================================================ */
@media (max-width: 767px) {
    footer .iacu-footer-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
    footer .lg\:col-span-4,
    footer .lg\:col-span-2,
    footer .lg\:col-span-3 { grid-column: span 1 !important; }
    footer .iacu-footer-bottom {
        flex-direction: column !important;
        text-align: center;
        gap: 1rem !important;
    }
}
@media (min-width: 640px) and (max-width: 1023px) {
    /* Tablet: 2-col footer grid */
    footer .iacu-footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; }
    footer .lg\:col-span-4 { grid-column: span 2 !important; }
}

/* ============================================================
   NAVIGATION MENU ITEMS — WordPress generated classes
   ============================================================ */

/* Ensure top-level menu items don't wrap on tablet */
@media (min-width: 1024px) and (max-width: 1200px) {
    header nav ul.flex.space-x-8 { gap: 1.25rem !important; }
    header nav ul li a { font-size: 12px !important; }
}

/* ============================================================
   UTILITY — Touch-friendly tap targets
   ============================================================ */
@media (max-width: 1023px) {
    a, button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    /* Except inline text links, slider dots */
    p a, li a, .breadcrumb a { min-height: unset; display: inline; }
    .hero-slider-container button[data-dot] { min-height: unset !important; height: 12px !important; width: 12px !important; display: block !important; }
}

/* ============================================================
   TAILWIND bg-fixed OVERRIDE (parallax breaks on mobile)
   ============================================================ */
@media (max-width: 1023px) {
    [style*="background-attachment: fixed"],
    .bg-fixed { background-attachment: scroll !important; }
}

/* ============================================================
   MISSION & VISION — page-mission-vision.php
   ============================================================ */
@media (max-width: 767px) {
    .iacu-mv-grid { grid-template-columns: 1fr !important; }
    .iacu-mv-vision-card { border-radius: 1.25rem !important; }
}

/* ============================================================
   INTRODUCTION — page-introduction.php
   ============================================================ */
@media (max-width: 767px) {
    .iacu-intro-split { flex-direction: column !important; gap: 2rem !important; }
    .iacu-intro-split > * { width: 100% !important; }
}

/* ============================================================
   FOCUS AREAS — page-focus-areas.php
   ============================================================ */
@media (max-width: 767px) {
    .iacu-focus-area-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; }
    .iacu-focus-badge { margin-left: 0 !important; }
}

/* ============================================================
   CONTACT — page-contact.php
   ============================================================ */
@media (max-width: 767px) {
    .iacu-contact-grid { grid-template-columns: 1fr !important; }
    .iacu-map-embed { height: 260px !important; }
}

/* ============================================================
   PERSONAL MEMBERSHIP — page-personal-membership.php
   ============================================================ */
@media (max-width: 767px) {
    .iacu-pm-plan-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   GLOBAL OVERFLOW SAFETY
   ============================================================ */
.container { max-width: 100%; }
@media (max-width: 639px) {
    .container { padding-left: 1rem !important; padding-right: 1rem !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .container { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

/* ============================================================
   MOBILE DRAWER — full width refinement
   ============================================================ */
@media (max-width: 479px) {
    #mobileMenuDrawer { max-width: 100% !important; padding: 1.25rem !important; }
}

/* ============================================================
   IMAGE SAFE GUARDS
   ============================================================ */
img.h-16 { height: 4rem; max-height: 4rem; }
img.h-12 { height: 3rem; max-height: 3rem; }
@media (max-width: 639px) {
    img.h-16 { height: 2.75rem; max-height: 2.75rem; }
    img.h-12 { height: 2.25rem; max-height: 2.25rem; }
}

/* ============================================================
   CHECKERBOARD GRID — responsive reorder (tablet)
   ============================================================ */
@media (min-width: 640px) and (max-width: 1023px) {
    .iacu-cat-grid-item { min-height: 320px !important; }
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
@media (max-width: 767px) {
    #quickSearchOverlay form { flex-direction: column !important; border-radius: 12px; overflow: hidden; }
    #quickSearchOverlay input,
    #quickSearchOverlay button { width: 100% !important; border-radius: 0 !important; }
    #quickSearchOverlay h3 { font-size: 1.375rem !important; }
}

/* ============================================================
   PUBLICATIONS GRID — page-publications.php
   ============================================================ */
@media (max-width: 767px) {
    .iacu-pub-grid { grid-template-columns: 1fr !important; }
    .iacu-pub-detail-split { flex-direction: column !important; }
}

/* ============================================================
   GOVERNANCE GRID
   ============================================================ */
@media (max-width: 1023px) {
    .iacu-gov-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   FOOTER LINKS LEFT-ALIGNMENT
   ============================================================ */
footer a {
    min-height: unset !important;
    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    width: auto !important;
}

/* Except footer social media icon links which should remain centered inside their container */
footer .flex.space-x-3 a {
    min-height: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    height: 40px !important;
}