/* NACSShow 2026 Footer Styles */
/* Using Figma Design Tokens */

/* ========================================
   FIGMA DESIGN TOKENS (CSS Custom Properties)
   ======================================== */
:root {
    /* Primary Colors */
    --footer-primary-pms-2945: #004C97;
    --footer-primary-process-cyan: #009FDF;
    --footer-primary-pms-368: #78BE20;
    /* Neutral Colors */
    --footer-neutrals-pms-281: #00205B;
    --footer-neutrals-pms-7545: #425563;
    --footer-neutrals-grey-light-nickel-02: #818181;
    --footer-neutrals-sand: #EDEBE4;
    /* Shade Colors */
    --footer-shade-white: #FFFFFF;
    --footer-shade-black: #000000;
    /* Typography - Subhead 1 (Gotham Bold) */
    --footer-subhead-1-size: 24px;
    --footer-subhead-1-line-height: 32px;
    --footer-subhead-1-letter-spacing: 0px;
    /* Typography - Subhead 2 (Gotham Bold) */
    --footer-subhead-2-size: 18px;
    --footer-subhead-2-line-height: 24px;
    --footer-subhead-2-letter-spacing: 0px;
    /* Typography - Heading 4 (Work Sans Light) */
    --footer-heading-4-size: 32px;
    --footer-heading-4-line-height: 40px;
    /* Typography - Label (Gotham Medium) */
    --footer-label-size: 16px;
    --footer-label-line-height: 24px;
    --footer-label-letter-spacing: 0px;
    /* Typography - Medium Paragraph (Gotham Book) */
    --footer-medium-paragraph-size: 12px;
    --footer-medium-paragraph-line-height: 16px;
    --footer-medium-paragraph-letter-spacing: 0px;
    /* Responsive Padding - Desktop */
    --footer-responsive-margins: 80px;
    --footer-responsive-padding-72: 72px;
    --footer-responsive-padding-56: 56px;
    --footer-responsive-padding-40: 40px;
    --footer-responsive-padding-32: 32px;
    --footer-responsive-padding-24: 24px;
    --footer-responsive-gutter: 20px;
}

/* ========================================
   MAIN FOOTER CONTAINER
   ======================================== */
.footer-2026 {
    background-color: var(--footer-shade-white);
    border-top: 2px solid var(--footer-neutrals-sand);
    width: 100%;
}

.footer-2026__main {
    display: flex;
    flex-direction: column;
    gap: var(--footer-responsive-padding-72);
    padding: var(--footer-responsive-padding-72) var(--footer-responsive-margins);
}

/* ========================================
   HEADER SECTION - "Still Looking"
   ======================================== */
.footer-2026__header {
    display: flex;
    flex-direction: column;
    gap: var(--footer-responsive-padding-56);
}

.footer-2026__heading {
    color: var(--footer-primary-pms-2945);
    font-family: 'Gotham SSm A', 'Gotham SSm B', 'Gotham', sans-serif;
    font-weight: 700;
    font-size: var(--footer-subhead-1-size);
    line-height: var(--footer-subhead-1-line-height);
    letter-spacing: var(--footer-subhead-1-letter-spacing);
    text-transform: capitalize;
    margin: 0;
}

/* ========================================
   SEARCH SECTION
   ======================================== */
.footer-2026__search {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 40px 0;
}

.footer-2026__search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.footer-2026__search-input {
    display: flex;
    align-items: center;
    gap: var(--footer-responsive-gutter);
    flex: 1;
}

.footer-2026__search-icon {
    width: 40px;
    height: 40px;
    color: var(--footer-neutrals-pms-281);
    flex-shrink: 0;
}

    .footer-2026__search-icon svg {
        width: 100%;
        height: 100%;
    }

.footer-2026__search-divider-vertical {
    width: 2px;
    height: 46px;
    background-color: var(--footer-primary-pms-2945);
    opacity: 0.3;
    flex-shrink: 0;
}

.footer-2026__search-text-input {
    border: none;
    background: transparent;
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
    font-size: var(--footer-heading-4-size);
    line-height: var(--footer-heading-4-line-height);
    color: var(--footer-primary-pms-2945);
    outline: none;
    width: 100%;
    text-transform: capitalize;
}

    .footer-2026__search-text-input::placeholder {
        color: var(--footer-primary-pms-2945);
    }

.footer-2026__search-button {
    width: 96px;
    height: 96px;
    position: relative;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.footer-2026__search-button-circle {
    width: 64px;
    height: 64px;
    border: 2px solid var(--footer-primary-pms-2945);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    position: absolute;
    top: 15px;
    left: 17px;
}

.footer-2026__search-button:hover .footer-2026__search-button-circle {
    background-color: var(--footer-primary-pms-2945);
}

.footer-2026__search-button:hover .footer-2026__search-button-arrow {
    stroke: var(--footer-shade-white);
}

.footer-2026__search-button-arrow {
    width: 24px;
    height: 24px;
    stroke: var(--footer-primary-pms-2945);
    fill: none;
    stroke-width: 2;
    transition: stroke 0.2s ease;
}

.footer-2026__search-line {
    height: 1px;
    background-color: var(--footer-primary-process-cyan);
    width: 100%;
}

/* ========================================
   CONTENT SECTION - DESKTOP
   Logo on left, Links (with Social) on right
   ======================================== */
.footer-2026__content {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

/* ========================================
   LOGO SECTION - DESKTOP
   ======================================== */
.footer-2026__logo-container {
    flex: 0 0 auto;
    width: 522px;
    display: flex;
    flex-direction: column;
    gap: var(--footer-responsive-padding-40);
}

.footer-2026__logo-image {
    max-width: 100%;
    height: auto;
}

/* ========================================
   LINKS SECTION - DESKTOP
   ======================================== */
.footer-2026__links-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--footer-responsive-padding-72);
    padding-left: 128px;
}

.footer-2026__links-row {
    display: flex;
    gap: var(--footer-responsive-gutter);
    width: 100%;
}

.footer-2026__links-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--footer-responsive-padding-32);
    padding-right: var(--footer-responsive-padding-24);
}

.footer-2026__links-title {
    color: var(--footer-primary-pms-2945);
    font-family: 'Gotham SSm A', 'Gotham SSm B', 'Gotham', sans-serif;
    font-weight: 700;
    font-size: var(--footer-subhead-2-size);
    line-height: var(--footer-subhead-2-line-height);
    letter-spacing: var(--footer-subhead-2-letter-spacing);
    margin: 0;
}

.footer-2026__links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--footer-responsive-padding-32);
}

    .footer-2026__links-list li {
        padding: 0;
    }

.footer-2026__link {
    color: var(--footer-primary-pms-2945);
    font-family: 'Gotham SSm A', 'Gotham SSm B', 'Gotham', sans-serif;
    font-weight: 500;
    font-size: var(--footer-label-size);
    line-height: var(--footer-label-line-height);
    letter-spacing: var(--footer-label-letter-spacing);
    text-decoration: none;
    transition: color 0.2s ease;
}

    .footer-2026__link:hover {
        color: var(--footer-primary-process-cyan);
    }

/* ========================================
   SOCIAL LINKS - DESKTOP
   ======================================== */
.footer-2026__social {
    display: flex;
    gap: var(--footer-responsive-padding-32);
    align-items: flex-end;
    justify-content: flex-start;
}

.footer-2026__social-icon {
    width: 56px;
    height: 56px;
    background-color: var(--footer-primary-process-cyan);
    border-radius: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

    .footer-2026__social-icon:hover {
        background-color: var(--footer-primary-pms-2945);
    }

    .footer-2026__social-icon svg,
    .footer-2026__social-icon img {
        width: 22px;
        height: 22px;
    }

    .footer-2026__social-icon a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

/* ========================================
   BOTTOM BAR - DESKTOP
   ======================================== */
.footer-2026__bottom {
    display: flex;
    align-items: center;
    gap: var(--footer-responsive-padding-56);
    padding: var(--footer-responsive-padding-40) var(--footer-responsive-margins);
    background-color: var(--footer-shade-white);
}

.footer-2026__nacs-logo {
    width: 302.406px;
    height: 40px;
    flex-shrink: 0;
}

    .footer-2026__nacs-logo a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .footer-2026__nacs-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.footer-2026__description {
    flex: 1;
    color: var(--footer-neutrals-pms-7545);
    font-family: 'Gotham SSm A', 'Gotham SSm B', 'Gotham', sans-serif;
    font-weight: 325;
    font-size: var(--footer-medium-paragraph-size);
    line-height: var(--footer-medium-paragraph-line-height);
    letter-spacing: var(--footer-medium-paragraph-letter-spacing);
    margin: 0;
}

.footer-2026__convenience-link {
    color: var(--footer-primary-pms-2945);
    font-family: 'Gotham SSm A', 'Gotham SSm B', 'Gotham', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    text-decoration: underline;
    flex-shrink: 0;
    width: 151px;
}

    .footer-2026__convenience-link:hover {
        color: var(--footer-primary-process-cyan);
    }

/* ========================================
   MOBILE RESPONSIVE STYLES (max-width: 48rem / 768px)
   Based on Figma Mobile Design
   Mobile order: Links first, Logo second, Social third
   ======================================== */
@media screen and (max-width: 48rem) {
    /* Mobile CSS Variables */
    .footer-2026 {
        --footer-responsive-margins: 20px;
        --footer-responsive-padding-72: 40px;
        --footer-responsive-padding-56: 32px;
        --footer-responsive-padding-40: 24px;
        --footer-responsive-padding-32: 20px;
        --footer-responsive-padding-24: 12px;
        --footer-responsive-gutter: 16px;
    }

    .footer-2026__main {
        padding: var(--footer-responsive-padding-40) var(--footer-responsive-margins);
        gap: var(--footer-responsive-padding-40);
    }

    /* Header - Mobile */
    .footer-2026__header {
        gap: var(--footer-responsive-padding-32);
    }

    .footer-2026__heading {
        font-size: 18px;
        line-height: 24px;
    }

    /* Search - Mobile */
    .footer-2026__search {
        padding: 24px 0;
        gap: 12px;
    }

    .footer-2026__search-bar {
        gap: 12px;
    }

    .footer-2026__search-icon {
        width: 24px;
        height: 24px;
    }

    .footer-2026__search-divider-vertical {
        height: 24px;
    }

    .footer-2026__search-text-input {
        font-size: 16px;
        line-height: 24px;
    }

    .footer-2026__search-button {
        width: 48px;
        height: 48px;
    }

    .footer-2026__search-button-circle {
        width: 40px;
        height: 40px;
        top: 4px;
        left: 4px;
    }

    .footer-2026__search-button-arrow {
        width: 18px;
        height: 18px;
    }

    /* Content - Mobile: Vertical stacking with reordered elements */
    .footer-2026__content {
        flex-direction: column;
        gap: var(--footer-responsive-padding-40);
    }

    /* Use display: contents to flatten links-container so we can reorder all children */
    .footer-2026__links-container {
        display: contents;
    }

    /* Links row comes first on mobile (order: 1) */
    .footer-2026__links-row {
        order: 1;
        flex-direction: row;
        gap: var(--footer-responsive-gutter);
        width: 100%;
    }

    .footer-2026__links-column {
        flex: 1;
        gap: var(--footer-responsive-padding-24);
        padding-right: 0;
    }

    .footer-2026__links-title {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 8px;
    }

    .footer-2026__links-list {
        gap: 16px;
    }

    .footer-2026__link {
        font-size: 14px;
        line-height: 20px;
    }

    /* Logo comes second on mobile (order: 2) */
    .footer-2026__logo-container {
        order: 2;
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .footer-2026__logo-image {
        max-width: 280px;
        margin: 0 auto;
    }

    /* Social comes third on mobile (order: 3) - after logo */
    .footer-2026__social {
        order: 3;
        justify-content: center;
        width: 100%;
        gap: 16px;
    }

    .footer-2026__social-icon {
        width: 48px;
        height: 48px;
    }

        .footer-2026__social-icon svg,
        .footer-2026__social-icon img {
            width: 18px;
            height: 18px;
        }

    /* Bottom Bar - Mobile: Vertical stacking, centered */
    .footer-2026__bottom {
        flex-direction: column;
        gap: 24px;
        padding: 32px var(--footer-responsive-margins);
      /*  text-align: center;*/
        align-items: start;
    }

    .footer-2026__nacs-logo {
        width: 200px;
        height: auto;
    }

    .footer-2026__description {
        text-align: justify;
        font-size: 11px;
        line-height: 16px;
    }

    .footer-2026__convenience-link {
        display: none; /* Hidden on mobile per Figma design */
    }
}

/* ========================================
   TABLET RESPONSIVE STYLES (48rem - 60rem / 768px - 960px)
   ======================================== */
@media screen and (min-width: 48rem) and (max-width: 60rem) {
    .footer-2026 {
        --footer-responsive-margins: 40px;
        --footer-responsive-padding-72: 56px;
        --footer-responsive-padding-56: 40px;
    }

    .footer-2026__content {
        flex-wrap: wrap;
        gap: 40px;
    }

    .footer-2026__logo-container {
        width: 40%;
    }

    .footer-2026__links-container {
        width: 55%;
        padding-left: 32px;
    }

    .footer-2026__social {
        width: 100%;
        justify-content: center;
        margin-top: 24px;
    }

    .footer-2026__bottom {
        flex-wrap: wrap;
        gap: 24px;
    }

    .footer-2026__nacs-logo {
        width: 250px;
    }
}

/* ========================================
   LARGE DESKTOP (min-width: 80rem / 1280px)
   ======================================== */
@media screen and (min-width: 80rem) {
    .footer-2026__main {
        max-width: 1440px;
        margin: 0 auto;
    }

    .footer-2026__bottom {
        max-width: 1440px;
        margin: 0 auto;
    }
}