/* INTI NAN CUSTOM FOOTER
   Hides the Kadence default footer and styles the custom footer.
   Migrated out of the footer Code Snippet: July 2026
   Loaded site wide.
*/

/* ============================================
   HIDE KADENCE DEFAULT FOOTER
   ============================================ */
/* The Kadence footer is no longer emitted at all: the child theme removes the
   kadence_footer action, so there is nothing left to hide.

   Hiding it with display:none left 1,483 bytes and the line "WordPress Theme by
   Kadence WP" sitting in the HTML source of every page, plus a second
   role="contentinfo" landmark. Crawlers and language models read source, not
   rendered output. Not producing the markup is the fix; hiding it was not. */

/* Remove any space below footer */
body,
html {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.site,
.site-container,
.site-inner,
#wrapper,
#page,
.content-wrap,
main,
.entry-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.inti-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.inti-footer .footer-main {
    margin-bottom: 0 !important;
}

.inti-footer .footer-copyright-row {
    margin-bottom: 0 !important;
    padding-bottom: 0.6rem !important;
}

/* ============================================
   THE INTI NAN FOOTER
   ============================================ */

:root {
    --clr-hanan: #9B2335;
    --clr-hanan-90: rgba(155, 35, 53, 0.9);
    --clr-hanan-15: rgba(155, 35, 53, 0.15);
    --clr-kay: #D9A441;
    --clr-kay-90: rgba(217, 164, 65, 0.9);
    --clr-kay-15: rgba(217, 164, 65, 0.15);
    --clr-ukhu: #3A9DAB;
    --clr-ukhu-90: rgba(58, 157, 171, 0.9);
    --clr-ukhu-15: rgba(58, 157, 171, 0.15);
}

.inti-footer {
    background: linear-gradient(135deg, #FAF8F5 0%, #F5F0EB 50%, #F0EBE6 100%) !important;
    position: relative !important;
    margin-top: 0 !important;
    width: 100% !important;
    clear: both !important;
    display: block !important;
    /* The dropup panels are absolutely positioned with bottom:100%, so they are
       painted OUTSIDE the footer, over the page content above it. Without its
       own stacking context the footer cannot guarantee they land on top, and
       without overflow:visible any ancestor clip cuts them off at the footer
       edge. Both are required for the panels to render. */
    isolation: isolate !important;
    z-index: 20 !important;
    overflow: visible !important;
}

/* No element between the footer and a dropup panel may clip it. */
.inti-footer .footer-main,
.inti-footer .footer-container,
.inti-footer .footer-column,
.inti-footer .footer-dropup {
    overflow: visible !important;
}

.inti-footer::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--clr-hanan) 0%, var(--clr-kay) 50%, var(--clr-ukhu) 100%) !important;
}

.inti-footer .footer-main {
    padding: 1.5rem 1.5rem 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.inti-footer .footer-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 115px 1.6fr repeat(4, 0.9fr) 50px !important;
    gap: 0.9rem !important;
    align-items: start !important;
}

.inti-footer .footer-logo-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem 0 !important;
    border-right: 1px solid rgba(0,0,0,0.1) !important;
}

.inti-footer .footer-logo-image {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
    object-position: center !important;
}

.inti-footer .footer-newsletter-column {
    padding-right: 0.6rem !important;
    border-right: 1px solid rgba(0,0,0,0.1) !important;
}

.inti-footer .newsletter-compact-title {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 0.2rem !important;
}

.inti-footer .newsletter-compact-subtitle {
    font-size: 0.8rem !important;
    color: #666 !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
}

.inti-footer .newsletter-form-compact {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 0.2rem !important;
    margin-bottom: 0.4rem !important;
}

.inti-footer .newsletter-input-compact {
    padding: 0.35rem 0.5rem !important;
    border: 2px solid #ddd !important;
    border-radius: 5px !important;
    font-size: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.inti-footer .newsletter-input-compact:focus {
    outline: none !important;
    border-color: var(--clr-kay) !important;
}

.inti-footer .newsletter-button-compact {
    padding: 0.35rem 0.6rem !important;
    background: var(--clr-kay) !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.3s ease !important;
}

.inti-footer .newsletter-button-compact:hover {
    background: #c4922a !important;
    color: white !important;
}

.inti-footer .newsletter-note {
    font-size: 0.65rem !important;
    color: #888 !important;
    font-style: italic !important;
    line-height: 1.2 !important;
    margin-top: 0.2rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.inti-footer .footer-column {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    min-width: 0 !important;
}

.inti-footer .footer-column-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.inti-footer .column-icon {
    font-size: 0.95rem !important;
}

.inti-footer .dropup-arrow {
    margin-left: auto !important;
    font-size: 0.65rem !important;
    transition: transform 0.3s ease !important;
    color: #999 !important;
}

.inti-footer .footer-column:hover .dropup-arrow {
    transform: translateY(-2px) !important;
    color: #333 !important;
}

.inti-footer .footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.inti-footer .footer-links a {
    color: #555 !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    transition: color 0.3s ease !important;
    line-height: 1.2 !important;
    display: block !important;
}

.inti-footer .footer-links a:hover {
    color: var(--clr-hanan) !important;
}

.inti-footer .footer-dropup {
    position: relative !important;
}

.inti-footer .dropup-content {
    position: absolute !important;
    bottom: 100% !important;
    left: 0 !important;
    background: white !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    padding: 0.7rem 0.9rem !important;
    margin-bottom: 0.5rem !important;
    min-width: 180px !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: all 0.3s ease !important;
    /* Sits above the footer's own children AND the page content behind it. */
    z-index: 200 !important;
    /* The Connect column has six sections. Opening upward from the footer edge
       it can run past the top of the viewport, which reads as "clipped".
       Cap it and let it scroll instead. */
    max-height: min(60vh, 420px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    /* Pinned so nothing is inherited from the (often dark) page above. */
    color: #555 !important;
}

.inti-footer .footer-dropup:hover .dropup-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.inti-footer .dropup-content a {
    color: #555 !important;
}

.inti-footer .dropup-content a:hover {
    color: var(--clr-hanan) !important;
}

.inti-footer .dropup-content h4 {
    font-size: 0.75rem !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0.4rem !important;
    font-weight: 600 !important;
}

.inti-footer .dropup-section {
    margin-bottom: 0.6rem !important;
}

.inti-footer .dropup-section:last-child {
    margin-bottom: 0 !important;
}

.inti-footer .dropup-section ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
}

.inti-footer .dropup-section a {
    color: #555 !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    transition: color 0.3s ease, padding-left 0.3s ease !important;
    display: block !important;
    padding: 0.15rem 0 !important;
}

.inti-footer .dropup-section a:hover {
    color: var(--clr-hanan) !important;
    padding-left: 5px !important;
}

.inti-footer .pathway-kay h4 { color: var(--clr-kay) !important; }
.inti-footer .pathway-hanan h4 { color: var(--clr-hanan) !important; }
.inti-footer .pathway-ukhu h4 { color: var(--clr-ukhu) !important; }

.inti-footer .footer-social-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding-left: 0.6rem !important;
    border-left: 1px solid rgba(0,0,0,0.1) !important;
}

.inti-footer .social-column-title {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #777 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0.15rem !important;
}

.inti-footer .social-icons-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    align-items: center !important;
}

.inti-footer .social-icon-vertical {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    color: #888 !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    transition: all 0.3s ease !important;
    border: 1px solid #ddd !important;
    cursor: default !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
}

.inti-footer .footer-copyright-row {
    text-align: center !important;
    padding: 0.8rem 1.5rem 0.5rem !important;
    margin-top: 0.6rem !important;
    margin-bottom: 0 !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    background: rgba(0,0,0,0.03) !important;
}

.inti-footer .footer-copyright-centered {
    font-size: 0.85rem !important;
    color: #555 !important;
    font-weight: 500 !important;
}

/* ============================================
   TABLET (1024px and below)
   ============================================ */
@media (max-width: 900px) {
    .inti-footer .footer-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
    .inti-footer .footer-logo-column,
    .inti-footer .footer-social-column {
        display: none !important;
    }
    .inti-footer .footer-newsletter-column {
        grid-column: span 2 !important;
        border-right: none !important;
        padding-right: 0 !important;
        text-align: center !important;
    }
    .inti-footer .newsletter-form-compact {
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================
   MOBILE (768px and below)
   ============================================ */
@media (max-width: 768px) {
    .inti-footer {
        margin-top: 2rem !important;
    }
    .inti-footer .footer-main {
        padding: 1.25rem 1rem 1rem !important;
    }
    .inti-footer .footer-container {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .inti-footer .footer-newsletter-column {
        grid-column: span 1 !important;
        padding: 0 0 1.25rem 0 !important;
        margin-bottom: 0.75rem !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
        text-align: center !important;
    }
    .inti-footer .newsletter-compact-title {
        font-size: 1.1rem !important;
    }
    .inti-footer .newsletter-compact-subtitle {
        font-size: 0.9rem !important;
        white-space: normal !important;
    }
    .inti-footer .newsletter-form-compact {
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
        max-width: 100% !important;
    }
    .inti-footer .newsletter-input-compact {
        padding: 0.7rem 1rem !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }
    .inti-footer .newsletter-button-compact {
        padding: 0.8rem 1.5rem !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        margin-top: 0.2rem !important;
    }
    .inti-footer .newsletter-note {
        white-space: normal !important;
        font-size: 0.8rem !important;
        margin-top: 0.6rem !important;
    }
    .inti-footer .footer-column {
        border-bottom: 1px solid rgba(0,0,0,0.08) !important;
        padding: 0 !important;
    }
    .inti-footer .footer-column:last-of-type {
        border-bottom: none !important;
    }
    .inti-footer .footer-column-title {
        padding: 0.9rem 0 !important;
        margin-bottom: 0 !important;
        font-size: 1rem !important;
        min-height: 44px !important;
    }
    .inti-footer .column-icon {
        font-size: 1.1rem !important;
    }
    .inti-footer .dropup-arrow {
        font-size: 0.8rem !important;
        transform: rotate(180deg) !important;
    }
    .inti-footer .footer-column.mobile-expanded .dropup-arrow {
        transform: rotate(0deg) !important;
    }
    .inti-footer .footer-links {
        display: none !important;
        padding-bottom: 0.9rem !important;
    }
    .inti-footer .footer-column.mobile-expanded .footer-links {
        display: flex !important;
        gap: 0.4rem !important;
    }
    .inti-footer .footer-links li {
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
    }
    .inti-footer .footer-links a {
        font-size: 0.95rem !important;
        padding: 0.4rem 0 !important;
        width: 100% !important;
    }
    .inti-footer .dropup-content {
        position: static !important;
        opacity: 1 !important;
        visibility: hidden !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px solid rgba(0,0,0,0.05) !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: auto !important;
        background: transparent !important;
        border-radius: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    .inti-footer .footer-column.mobile-expanded .dropup-content {
        visibility: visible !important;
        max-height: 1000px !important;
        padding: 0.9rem 0 !important;
    }
    .inti-footer .dropup-section {
        margin-bottom: 1rem !important;
        padding-left: 0.5rem !important;
        border-left: 3px solid var(--clr-kay) !important;
    }
    .inti-footer .dropup-section.pathway-hanan {
        border-left-color: var(--clr-hanan) !important;
    }
    .inti-footer .dropup-section.pathway-ukhu {
        border-left-color: var(--clr-ukhu) !important;
    }
    .inti-footer .dropup-content h4 {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
        padding-left: 0.4rem !important;
    }
    .inti-footer .dropup-section a {
        font-size: 0.95rem !important;
        padding: 0.4rem !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
    }
    .inti-footer .footer-dropup:hover .dropup-content {
        visibility: hidden !important;
        max-height: 0 !important;
    }
    .inti-footer .footer-column.mobile-expanded .dropup-content {
        visibility: visible !important;
        max-height: 1000px !important;
    }
    .inti-footer .footer-social-column {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        padding: 1.25rem 0 !important;
        border-left: none !important;
        border-top: 1px solid rgba(0,0,0,0.08) !important;
        margin-top: 0.4rem !important;
    }
    .inti-footer .social-column-title {
        display: none !important;
    }
    .inti-footer .social-icons-vertical {
        flex-direction: row !important;
        gap: 0.9rem !important;
    }
    .inti-footer .social-icon-vertical {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }
    .inti-footer .footer-copyright-row {
        padding: 0.9rem !important;
        margin-top: 0 !important;
    }
    .inti-footer .footer-copyright-centered {
        font-size: 0.85rem !important;
    }
}

/* ============================================
   SMALL MOBILE (480px and below)
   ============================================ */
@media (max-width: 480px) {
    .inti-footer .footer-main {
        padding: 1rem 0.75rem !important;
    }
    .inti-footer .newsletter-compact-title {
        font-size: 1rem !important;
    }
    .inti-footer .newsletter-input-compact,
    .inti-footer .newsletter-button-compact {
        padding: 0.65rem 0.85rem !important;
        font-size: 0.95rem !important;
    }
    .inti-footer .social-icons-vertical {
        gap: 0.7rem !important;
    }
    .inti-footer .social-icon-vertical {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ============================================================
   REQUIRED SPECIAL QUERIES
   Added to meet the INTI NAN Global Responsive Standards, which
   require all three alongside the 900/768/480 width breakpoints.
   ============================================================ */

/* Touch devices - 44px minimum tap targets, WCAG 2.5.5.
   Required by the platform responsive standard and absent from this file. */
@media (pointer: coarse) {
    /* !important is required here, not preferred.
       The mobile accordion sets sub-44px heights with !important of its own:
           .inti-footer .dropup-section a  min-height: 36px !important
           .inti-footer .footer-links li   min-height: 40px !important
       Those were presumably chosen to fit a long list into a short accordion.
       They are 4-8px under the WCAG 2.5.5 floor on the navigation every mobile
       visitor uses, so they lose to this. */
    .inti-footer a,
    .inti-footer button,
    .newsletter-button-compact,
    .dropup-toggle,
    .social-icon-vertical,
    .inti-footer .dropup-section a,
    .inti-footer .footer-links a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center;
    }

    .inti-footer .footer-links li {
        min-height: 44px !important;
    }

    /* The theme's mobile menu button measures 31px. It is the control that
       opens navigation on a phone, so it cannot be the smallest target on the
       page. */
    .menu-toggle-open,
    .mobile-toggle-open-container button {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Landscape mobile - a hero sized for portrait swallows a short viewport. */
@media (max-height: 500px) and (orientation: landscape) {
    .hero,
    .guide-hero,
    .pw-hero {
        min-height: auto;
        padding: 2.5rem 2rem;
    }
}

/* Print - readable black on white, interactive elements removed. */
@media print {
    body,
    html {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .inti-footer {
        display: none !important;
    }

    h1, h2, h3, h4, p, span, div, li {
        color: #000000 !important;
    }

    a {
        color: #000000 !important;
        text-decoration: underline !important;
    }
}