/* Footer V3 is the site-wide footer (see footer.php) and loads on every page,
   most of which never enqueue css/typography.css (that file is scoped to
   Front Page V3 / Pricing). So this component declares its own font instead of
   depending on typography.css for it — otherwise every other page would get
   the right layout/sizes (those come through with plain px fallbacks) but the
   wrong typeface. Same @font-face as typography.css; harmless to declare twice
   on pages where both happen to load. */
@font-face {
    font-family: 'Google Sans Flex Local v2';
    font-display: swap;
    src: url('/wp-content/themes/simplydepo/fonts/GoogleSansFlex/GoogleSansFlex_VariableFont_GRAD,ROND,opsz,slnt,wdth,wght_2.ttf') format('truetype');
    font-weight: 100 1000;
    font-style: normal;
}

/* Front Page V3 is the site-wide footer, mounted into pages that each carry
   their own stylesheet (e.g. .page-retail-execution nests plain-tag rules like
   "p { font-family: Gilroy; color: ...; font-size: ... }"). A plain-tag rule
   scoped to one ancestor class still out-specifies our own ".front-page-v3-footer *"
   (one class beats one class + one element only when the class counts are equal;
   here they're both 1, so the extra tag on their side would normally win). Every
   selector below that carries text-rendering properties is written as
   ".front-page-v3-footer.front-page-v3-footer" (repeating the class name doesn't
   change what it matches — an element either has the class or it doesn't — it just
   raises the selector's specificity from one class to two), which reliably beats
   any single-class-scoped page rule regardless of how many tags it chains. Purely
   layout rules (flex/width/gap/etc.) aren't touched — pages don't realistically
   target this component's own BEM classes, so there's nothing to defend there. */
.front-page-v3-footer.front-page-v3-footer,
.front-page-v3-footer.front-page-v3-footer * {
    box-sizing: border-box;
    font-family: 'Google Sans Flex Local v2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.front-page-v3-footer.front-page-v3-footer {
    width: 100%;
    background: #0d0d0d;
    color: #fff;
    padding: 96px 64px;
}

.front-page-v3-footer.front-page-v3-footer a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.front-page-v3-footer.front-page-v3-footer a:hover,
.front-page-v3-footer.front-page-v3-footer a:focus-visible {
    color: #fff;
    opacity: 1;
}

.front-page-v3-footer__wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 64px;
    row-gap: 32px;
}

.front-page-v3-footer__brand {
    flex: 1 0 0;
    max-width: 480px;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.front-page-v3-footer__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.front-page-v3-footer__logo {
    display: block;
    width: 167px;
    height: 24px;
}

.front-page-v3-footer__logo img,
.front-page-v3-footer__stores img,
.front-page-v3-footer__socials img {
    display: block;
}

.front-page-v3-footer__logo img {
    width: 100%;
    height: 100%;
}

.front-page-v3-footer__socials {
    display: flex;
    align-items: center;
    gap: 12px;
}

.front-page-v3-footer__socials a {
    width: 40px;
    height: 40px;
    border: 0.833px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.front-page-v3-footer__socials a:hover,
.front-page-v3-footer__socials a:focus-visible {
    border-color: rgba(255, 255, 255, 0.55);
}

.front-page-v3-footer__socials img {
    width: 17px;
    height: 17px;
}

.front-page-v3-footer__contact.front-page-v3-footer__contact {
    flex: 1;
    margin: 0;
    font-style: normal;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--gsf-static-md-fs, 16px);
    font-weight: 300;
    line-height: var(--gsf-static-md-lh, 24px);
    letter-spacing: var(--gsf-static-md-ls, 0.12px);
}

.front-page-v3-footer__contact.front-page-v3-footer__contact span {
    color: inherit;
    font: inherit;
}

.front-page-v3-footer__legal--desktop {
    display: flex;
    flex-direction: column;
}

.front-page-v3-footer__stores {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.front-page-v3-footer__stores a {
    display: block;
    flex: 0 0 auto;
}

.front-page-v3-footer__stores a:first-child img {
    width: 130px;
    height: 40px;
}

.front-page-v3-footer__stores a:last-child img {
    width: 123px;
    height: 40px;
}

.front-page-v3-footer__legal.front-page-v3-footer__legal {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--gsf-static-md-fs, 16px);
    font-weight: 300;
    line-height: var(--gsf-static-md-lh, 24px);
    letter-spacing: var(--gsf-static-md-ls, 0.12px);
}

/* Set directly on <p> (not just inherited from .front-page-v3-footer__legal
   above) — some pages have their own "p { font-family/color/font-size: ... }"
   rule, which targets this exact tag directly and would otherwise beat a value
   this element only has by inheritance. */
.front-page-v3-footer__legal.front-page-v3-footer__legal p {
    margin: 0 0 8px;
    color: inherit;
    font: inherit;
}

.front-page-v3-footer__legal.front-page-v3-footer__legal nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.front-page-v3-footer__nav--desktop {
    flex: 1 0 0;
    max-width: 640px;
    min-width: 470px;
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.front-page-v3-footer__col-group {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.front-page-v3-footer__col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
@media (min-width: 1250px) {
    .front-page-v3-footer__col--solutions{
        max-width: 240px;
        width: 100%;
    }
}


.front-page-v3-footer__nav > .front-page-v3-footer__col-group:nth-child(2) {
    flex: 1;
}

.front-page-v3-footer__col.front-page-v3-footer__col h3 {
    margin: 0;
    color: #fff;
    font-size: var(--gsf-body-lg-fs, 18px);
    font-weight: 400;
    line-height: var(--gsf-body-lg-lh, 26px);
    letter-spacing: var(--gsf-body-lg-ls, 0.135px);
}

.front-page-v3-footer__col ul,
.front-page-v3-footer__accordion-panel {
    list-style: none;
    padding: 0;
    margin: 0;
}

.front-page-v3-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.front-page-v3-footer__col.front-page-v3-footer__col a,
.front-page-v3-footer__all.front-page-v3-footer__all {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--gsf-static-md-fs, 16px);
    font-weight: 300;
    line-height: var(--gsf-static-md-lh, 24px);
    letter-spacing: var(--gsf-static-md-ls, 0.12px);
}

.front-page-v3-footer__all.front-page-v3-footer__all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
}

.front-page-v3-footer__all-text {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease;
}

.front-page-v3-footer__all:hover .front-page-v3-footer__all-text,
.front-page-v3-footer__all:focus-visible .front-page-v3-footer__all-text {
    text-decoration-color: #fff;
}

/* Overrides the site-wide a:active { color: #ccc } (css/style.css) — pressing this
   link shouldn't gray the text out, it should look the same as normal/hover. */
.front-page-v3-footer__all:active {
    color: #fff;
}

.front-page-v3-footer__all-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.front-page-v3-footer__all:hover .front-page-v3-footer__all-arrow,
.front-page-v3-footer__all:focus-visible .front-page-v3-footer__all-arrow {
    transform: translateX(2px);
}

.front-page-v3-footer__mobile-links,
.front-page-v3-footer__stores--mobile,
.front-page-v3-footer__legal--mobile {
    display: none;
}

@media (max-width: 1024px) {
    .front-page-v3-footer.front-page-v3-footer {
        padding: 80px 32px;
    }

    .front-page-v3-footer__wrapper {
        column-gap: 40px;
        row-gap: 32px;
    }

    .front-page-v3-footer__nav--desktop {
        gap: 24px;
    }
    .front-page-v3-footer__brand, .front-page-v3-footer__nav > .front-page-v3-footer__col-group:nth-child(2) {
        flex: none;
    }
    .front-page-v3-footer__nav--desktop{
        justify-content: end;
    }
}

@media (max-width: 860px) {
    .front-page-v3-footer.front-page-v3-footer {
        padding: 48px 20px;
    }

    .front-page-v3-footer__wrapper {
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .front-page-v3-footer__brand {
        width: 100%;
        max-width: none;
        gap: 32px;
    }

    .front-page-v3-footer__top {
        gap: 24px;
    }

    .front-page-v3-footer__contact.front-page-v3-footer__contact {
        font-size: 16px;
        line-height: 24px;
    }

    .front-page-v3-footer__nav--desktop,
    .front-page-v3-footer__stores--desktop,
    .front-page-v3-footer__legal--desktop {
        display: none;
    }

    .front-page-v3-footer__mobile-links,
    .front-page-v3-footer__stores--mobile,
    .front-page-v3-footer__legal--mobile {
        display: flex;
    }

    .front-page-v3-footer__mobile-links {
        width: 100%;
        flex-direction: column;
    }

    .front-page-v3-footer__accordion {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .front-page-v3-footer__accordion:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .front-page-v3-footer__accordion-button.front-page-v3-footer__accordion-button {
        width: 100%;
        min-height: 56px;
        padding: 16px 0;
        border: 0;
        background: transparent;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        font: inherit;
        cursor: pointer;
    }

    .front-page-v3-footer__accordion-button.front-page-v3-footer__accordion-button span:first-child {
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.16px;
        text-align: left;
    }

    .front-page-v3-footer__chevron {
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
        position: relative;
    }

    .front-page-v3-footer__chevron::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 1px;
        width: 7px;
        height: 7px;
        border-right: 1.5px solid #fff;
        border-bottom: 1.5px solid #fff;
        transform: rotate(45deg);
        transition: transform 0.2s ease, top 0.2s ease;
    }

    .front-page-v3-footer__accordion-button[aria-expanded="true"] .front-page-v3-footer__chevron::before {
        top: 5px;
        transform: rotate(-135deg);
    }

    .front-page-v3-footer__accordion-panel {
        padding: 0 0 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .front-page-v3-footer__accordion-panel[hidden] {
        display: none;
    }

    .front-page-v3-footer__accordion-panel.front-page-v3-footer__accordion-panel a {
        color: rgba(255, 255, 255, 0.8);
        font-size: 15px;
        font-weight: 300;
        line-height: 22px;
        letter-spacing: 0.11px;
    }

    .front-page-v3-footer__stores--mobile {
        width: 100%;
        gap: 16px;
    }

    .front-page-v3-footer__legal--mobile.front-page-v3-footer__legal--mobile {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 16px;
        line-height: 24px;
    }

    .front-page-v3-footer__legal--mobile.front-page-v3-footer__legal--mobile p {
        margin: 0;
        color: inherit;
        font: inherit;
    }

    .front-page-v3-footer__legal--mobile.front-page-v3-footer__legal--mobile nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
    }
}