<!-- PAGE‑SPECIFIC CSS -->
<style>

/* ============================================================
   FAQ PAGE — CLEAN, CONFLICT‑FREE, DEVICE‑TUNED CSS
   ============================================================ */

/* Base page styling */
body.page-certifications {
    background: var(--bg);
    color: var(--text-main);
    transition: background 0.3s ease, color 0.3s ease;
}

/* Hero section */
.page-certifications .hero-section {
    margin: 0 0 2rem;
}

.page-certifications .hero-section h1 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.page-certifications .hero-section p {
    font-size: 1.1rem;
    color: var(--text-sub);
    max-width: 720px;
}

/* Page container */
.page-certifications .page-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 2rem;
}

/* ============================================================
   HEADER → BODY SPACING (corrected for all devices)
   ============================================================ */

/* Default (desktop + fallback) */
.page-container {
    padding-top: 240px !important;
}

/* iPad spacing */
@media (min-width: 701px) and (max-width: 1024px) {
    .page-container {
        padding-top: 280px !important;
    }
}

/* ============================================================
   NAV WRAPPER POSITIONING (iPhone + iPad)
   ============================================================ */

/* iPhone — slight gap under profile photo */
@media (max-width: 700px) {
    .header-standard .hs-nav-wrapper {
        margin-top: -150px !important;
    }
}

/* iPad — slight gap under header text + left alignment */
@media (min-width: 701px) and (max-width: 1024px) {
    .header-standard .hs-nav-wrapper {
        margin-top: -140px !important;
        padding-left: 20px !important;
    }
}





/* ============================================================
   SEARCH BAR
   ============================================================ */

.search-bar-local {
    margin: 20px 0 30px;
}

#faq-search {
    width: 100%;
    padding: 12px 16px;
    border-radius: 50px;
    border: 2px solid var(--text-main);
    background: var(--card-bg);
    font-size: 15px;
    color: var(--text-main);
    outline: none;
    transition: 0.25s ease;
}

#faq-search::placeholder {
    color: #6b7280;
}

#faq-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,120,255,0.15);
}

/* ============================================================
   FAQ CARDS
   ============================================================ */

.faq-card {
    background: var(--card-bg);
    padding: 1.25rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}

.faq-card h3 {
    margin-top: 0;
    color: var(--text-main);
    font-size: 1.1rem;
}

.faq-card p {
    margin-bottom: 0;
    color: var(--text-sub);
    line-height: 1.5;
}

/* ============================================================
   CTA SECTION
   ============================================================ */

.cta-section {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

.sticky-follow {
    background: var(--accent);
}
/* ============================================================
   FINAL HEADER FIXES — iPhone + iPad + Desktop
   ============================================================ */

/* Desktop body spacing */
.page-container {
    padding-top: 220px !important;
}

/* iPhone — slight gap under profile photo */
@media (max-width: 700px) {
    .header-standard .hs-nav-wrapper {
        margin-top: -135px !important;
    }
    .page-container {
        padding-top: 240px !important;
    }
}

/* iPad — slight gap under header text + left alignment */
@media (min-width: 701px) and (max-width: 1024px) {
    .header-standard .hs-nav-wrapper {
        margin-top: -140px !important;
        padding-left: 20px !important;
    }
    .page-container {
        padding-top: 260px !important;
    }
}



/* Desktop */
.page-container {
    padding-top: 200px !important;
}

/* iPhone */
@media (max-width: 700px) {
    .page-container {
        padding-top: 220px !important;
    }
}

/* iPad */
@media (min-width: 701px) and (max-width: 1024px) {
    .page-container {
        padding-top: 240px !important;
    }
}
.header-standard {
    position: relative;
    z-index: 999999 !important;
}

#fab {
    position: fixed !important;
    z-index: 9999999 !important;
}
@media (max-width: 700px) {
    .header-standard {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}
/* Force hamburger to show on iPhone */
@media (max-width: 700px) {
    .hs-hamburger {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure mobile menu container is visible */
    #hsMobileMenu {
        display: flex !important;
    }

    /* Ensure desktop nav isn't accidentally hidden AND hamburger suppressed */
    .header-standard .hs-nav-wrapper {
        display: none !important; /* keep desktop nav hidden on iPhone */
    }
}
/* Keep search + dark mode on one row on iPad */
.header-standard .hs-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
}
/* Force mobile menu to behave correctly on iPhone */
@media (max-width: 700px) {

    /* Hide mobile menu until hamburger is clicked */
    #hsMobileMenu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: #0a2342 !important;
        padding: 20px !important;
        z-index: 999999 !important;
    }

    #hsMobileMenu.open {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Ensure hamburger is visible */
    .hs-hamburger {
        display: block !important;
        z-index: 999999 !important;
    }
}
/* iPhone mobile menu fix */
@media (max-width: 700px) {

    /* Hide menu by default */
    #hsMobileMenu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: #0a2342 !important;
        padding: 20px !important;
        z-index: 999999 !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Show menu when hamburger toggles it */
    #hsMobileMenu.open {
        display: flex !important;
    }

    /* Ensure hamburger is visible */
    .hs-hamburger {
        display: block !important;
        z-index: 999999 !important;
    }
}
/* FORCE MOBILE HEADER ON IPHONE + IPAD */
@media (max-width: 1024px) {

    /* Force hamburger visible */
    .hs-hamburger {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999999 !important;
    }

    /* Force desktop nav hidden */
    .hs-nav-wrapper {
        display: none !important;
    }

    /* Force mobile menu hidden by default */
    #hsMobileMenu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: #0a2342 !important;
        padding: 20px !important;
        flex-direction: column !important;
        gap: 12px !important;
        z-index: 999999 !important;
    }

    /* Force mobile menu visible when toggled */
    #hsMobileMenu.open {
        display: flex !important;
    }

    /* Force search + dark mode visible */
    .hs-search-wrapper,
    #searchIcon,
    #darkToggleHeader {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force FAB visible */
    #fab {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 999999 !important;
    }
}


</style>
