/* ============================================================
 * Tresl Footer global
 * ============================================================ */

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

.tresl-footer {
    --tresl-footer-bg: #1A6DB6;
    --tresl-footer-text: #ffffff;
    --tresl-footer-heading: #FAB041;
    --tresl-footer-link: #ffffff;

    background-color: var(--tresl-footer-bg);
    color: var(--tresl-footer-text);
    width: 100%;
    max-width: 100%;
    overflow-x: clip; /* clip any accidental horizontal overflow */
    padding: 60px 32px 48px;
    font-family: 'Lato', system-ui, sans-serif;
}

.tresl-footer__inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* ============================
 * MAIN LAYOUT
 * ----------------------------
 * 2 top columns:
 *   LEFT  → 3 menus on top + 2 embeds below (stacked)
 *   RIGHT → logos / license / about / copyright (full-height alongside)
 * ============================ */
.tresl-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 56px;
    min-width: 0;
    /* align-items: start; */
}

.tresl-footer__left {
    display: flex;
    flex-direction: column;
    gap: 48px;
    min-width: 0;
}

.tresl-footer__menus {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
    min-width: 0;
}

.tresl-footer__col {
    min-width: 0;
}

/* TRESL-H3: Montserrat 28/700, line-height 28px, color #FAB041 */
.tresl-footer__col-title {
    margin: 0 0 18px;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    color: var(--tresl-footer-heading);
}

.tresl-footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Menu links: Montserrat 15/400 #FFF, line-height 28px (186.667%) */
.tresl-footer__menu a {
    display: inline-block;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    color: var(--tresl-footer-link);
    text-decoration: none;
}

.tresl-footer__menu a:hover,
.tresl-footer__menu a:focus {
    text-decoration: underline solid;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
    text-underline-offset: 4px;
}

.tresl-footer__menu-empty {
    margin: 0;
    font-size: 13px;
    opacity: .8;
}

/* ============================
 * RIGHT COLUMN (aside full-height)
 *
 * Vertical rhythm: each block in the aside breathes via its OWN
 * margin-top instead of a single shared gap. This lets us give
 * "Licenses" a tighter offset (close to the logos), and give the
 * about/copyright paragraphs a larger breathing room.
 * ============================ */
.tresl-footer__right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tresl-footer__right > * + * { margin-top: 32px; }

/* "Licenses" sits closer to the logos than to the rest. */
.tresl-footer__right > .tresl-footer__license + *,
.tresl-footer__right > .tresl-footer__logos + .tresl-footer__license {
    /* fine-tune adjacent spacings */
}

.tresl-footer__right > .tresl-footer__logos + .tresl-footer__license { margin-top: 28px; }
.tresl-footer__right > .tresl-footer__license + .tresl-footer__about { margin-top: 32px; }
.tresl-footer__right > .tresl-footer__about + .tresl-footer__copyright { margin-top: 28px; }

.tresl-footer__logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Each logo occupies a "row" with uniform height. The SVGs have
   different aspect ratios (Autopay wide, Tresl/rategenius taller);
   we constrain by height (not width) so ALL render at the same
   vertical size, matching the design. */
.tresl-footer__logo-item {
    display: flex;
    align-items: center;
    height: 40px;
}

.tresl-footer__logo-item a {
    display: inline-flex;
    align-items: center;
    height: 100%;
    line-height: 0;
}

.tresl-footer__logo-item img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

/* Right column body type — Lato 16 / 500 #FFF (size lowered from 18 to
   match the comfort of the design at this column width). */
.tresl-footer__about,
.tresl-footer__copyright {
    margin: 0;
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--tresl-footer-text);
    max-width: 320px;
}

/* License link: Lato 16 / 400 (slightly lighter than the rest), underline
   with a small gap between the text baseline and the line (text-underline-offset). */
.tresl-footer__license {
    margin: 0;
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--tresl-footer-text);
    max-width: 320px;
}

.tresl-footer__license a,
.tresl-footer__license a:link,
.tresl-footer__license a:visited {
    color: var(--tresl-footer-link);
    text-decoration: underline solid;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
    /* Small gap between the baseline and the line — per spec. */
    text-underline-offset: 4px;
}

/* High specificity: wins against `.elementor a { text-decoration:none }` (0,1,1). */
.tresl-footer a.tresl-footer__license { text-decoration: underline solid; }

/* ============================
 * BOTTOM (reviews + BBB)
 * ============================ */
/* Embeds: 2 empty columns for HTML/JS snippets pasted from admin.
   They live inside the left column, below the 3 menus. */
.tresl-footer__embeds {
    display: flex;
    gap: 60px;
    align-items: center;
    min-width: 0;
    margin-top: auto;
}

.tresl-footer__embed {
    min-width: 0;
    color: var(--tresl-footer-text);
    font-family: 'Lato', system-ui, sans-serif;
}

.tresl-footer__embed:empty {
    /* Keeps the row visible even when the slot is empty. */
    min-height: 1px;
}

.tresl-footer__embed--right {
    text-align: right;
}

@media (max-width: 600px) {
    .tresl-footer__embed--right { text-align: left; }
}

/* ============================
 * RESPONSIVE
 * ============================ */
@media (max-width: 1024px) {
    /* Right aside drops below the left block. */
    .tresl-footer__main {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .tresl-footer { padding: 48px 22px 36px; }

    .tresl-footer__menus {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .tresl-footer__embeds {
      flex-direction: column;
    }

    .tresl-footer__embed--right { text-align: left; }
}