/* Final presentation and accessibility refinements. Main site styles remain in style.css. */
body,
button,
input,
select,
textarea {
    font-family: Avenir, Arial, sans-serif
}

.country-art>img {
    height: auto
}

.hero-flag {
    object-fit: contain
}

p,
li {
    font-size: max(17px, 1em)
}

.provider-form {
    background: white;
    border: 1px solid #c7d7eb;
    border-radius: 10px;
    padding: 25px;
    margin-top: 25px
}

.provider-form h3 {
    font-size: 27px;
    margin-bottom: 18px
}

.provider-form p {
    margin: 15px 0
}

.error-page {
    min-height: 65vh;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: 50px
}

.error-code {
    font-size: clamp(100px, 19vw, 260px);
    font-weight: 700;
    line-height: 1;
    color: #2055a1;
    opacity: .25;
    letter-spacing: -.08em
}

.error-page h1 {
    font-size: clamp(42px, 5vw, 70px)
}

.error-page p {
    margin: 25px 0
}

.error-page .actions {
    margin: 25px 0
}

.checklist-page li {
    padding: 12px 0;
    border-bottom: 1px solid #d5e0ef
}

.checklist-page h1 {
    font-size: 48px
}

.site-privacy-note {
    line-height: 1.8
}

.pipedriveWebForms {
    min-height: 700px
}

[hidden] {
    display: none !important
}

:focus-visible {
    outline: 3px solid #2055a1;
    outline-offset: 4px
}

.skip {
    font-size: 17px
}

@media(max-width:700px) {
    .error-page {
        grid-template-columns: 1fr
    }

    .error-code {
        order: -1;
        font-size: 110px
    }

    .error-page .actions {
        flex-wrap: wrap
    }

    .checklist-page h1 {
        font-size: 38px
    }
}

@media print {

    header,
    footer,
    .topbar,
    .skip,
    .button,
    .text-link,
    .design-toolbar {
        display: none !important
    }

    .checklist-page {
        padding: 0 !important;
        color: black
    }

    .checklist-page li {
        break-inside: avoid
    }
}

/* Keep the full G5 logo at 170px on desktop. Scale it with the viewport on phones. */
header .brand > img,
footer .brand > img {
    flex: 0 0 auto;
    width: 170px;
    height: auto;
}
footer .brand > span:last-child { min-width: 0; }
@media (max-width: 700px) {
    header .brand > img,
    footer .brand > img {
        /* Override the old fixed phone widths in the base stylesheet. */
        width: clamp(72px, 24vw, 140px) !important;
    }
}
.quote-form .provider-form { margin: 0; border: 0; }