/* comparehero2-style footer
 * Mirrors comparehero2/src/components/page-layout/components/page-footer/index.marko
 * Plain CSS only; no Tailwind. Class prefix: .ch2-footer
 */

:root {
    --ch2-footer-bg: #0075a9;         /* brand.primary */
    --ch2-footer-title: #55cbff;      /* accent.aquaBlue */
    --ch2-footer-text: #ffffff;
    --ch2-footer-border: rgba(255, 255, 255, 0.2);
    --ch2-footer-container-max: 1280px;
}

.ch2-footer,
.ch2-footer * {
    box-sizing: border-box;
}

.ch2-footer {
    background-color: var(--ch2-footer-bg);
    color: var(--ch2-footer-text);
    font-family: "Public Sans", "Ubuntu", "Inter", "Plus Jakarta Sans", sans-serif;
    font-weight: 420;
}

.ch2-footer__container {
    max-width: var(--ch2-footer-container-max);
    margin: 0 auto;
    padding: 24px 28px;
}

@media (min-width: 768px) {
    .ch2-footer__container {
        padding: 36px 32px;
    }
}

/* Top row: logo + social icons */
.ch2-footer__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 24px 0;
}

@media (min-width: 768px) {
    .ch2-footer__top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

.ch2-footer__logo {
    display: inline-flex;
    align-items: center;
}

.ch2-footer__logo img {
    height: 32px;
    width: auto;
    display: block;
    /* The CH logo asset is multi-colored; on the dark footer comparehero2 uses
       brightness(0) invert(1) to render it white. */
    filter: brightness(0) invert(1);
}

.ch2-footer__social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ch2-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ch2-footer-text);
    opacity: 0.9;
    transition: opacity 150ms ease;
}

.ch2-footer__social-link:hover {
    opacity: 1;
}

.ch2-footer__social-link img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Mobile collapsible sections */
.ch2-footer__mobile-sections {
    display: block;
}

@media (min-width: 768px) {
    .ch2-footer__mobile-sections {
        display: none;
    }
}

.ch2-footer__details {
    border-top: 1px solid var(--ch2-footer-border);
}

.ch2-footer__details:last-of-type {
    border-bottom: 1px solid var(--ch2-footer-border);
}

.ch2-footer__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ch2-footer-title);
}

.ch2-footer__summary::-webkit-details-marker {
    display: none;
}

.ch2-footer__caret {
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
    color: var(--ch2-footer-text);
    transition: transform 200ms ease;
}

.ch2-footer__caret svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ch2-footer__details[open] .ch2-footer__caret {
    transform: rotate(180deg);
}

.ch2-footer__list {
    list-style: none;
    margin: 0;
    padding: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ch2-footer__link {
    display: inline-block;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ch2-footer-text);
    text-decoration: none;
}

.ch2-footer__link:hover {
    text-decoration: underline;
}

/* Desktop grid */
.ch2-footer__grid {
    display: none;
}

@media (min-width: 768px) {
    .ch2-footer__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
}

@media (min-width: 1024px) {
    .ch2-footer__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 40px;
    }
}

.ch2-footer__column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ch2-footer__title {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ch2-footer-title);
}

.ch2-footer__column .ch2-footer__list {
    padding: 0;
    gap: 8px;
}

/* Divider + copyright */
.ch2-footer__divider {
    display: none;
}

@media (min-width: 768px) {
    .ch2-footer__divider {
        display: block;
        height: 0;
        border: 0;
        border-top: 1px solid var(--ch2-footer-border);
        margin: 20px 0 0 0;
    }
}

.ch2-footer__copyright {
    margin: 20px 0 0 0;
    font-size: 12px;
    color: var(--ch2-footer-text);
    text-align: left;
}

@media (min-width: 768px) {
    .ch2-footer__copyright {
        font-size: 14px;
    }
}