/* Coldwell Banker Pelican: article guides. Loaded only on the guide pages (body.cbp-guide). */

.cbp-guide {
    --cbp-navy: #133a63;
    --cbp-navy-deep: #0f2f52;
    --cbp-blue: #2b5b93;
    --cbp-ink: #3a4047;
    --cbp-muted: #5f6872;
    --cbp-line: #d8dfe7;
    --cbp-tint: #eef3f8;
    --cbp-tint-2: #f6f8fb;
    --cbp-warn: #a5352d;
    --cbp-warn-tint: #fbf1ef;
    --cbp-radius: 30px;
    --cbp-pad: 56px;
    --cbp-inset: 40px;
    background: #eeeeee;
}

/* ---------- article frame ---------- */
.cbp-guide-wrap {
    padding: 0 16px;
}

.cbp-article {
    max-width: 1000px;
    margin: 30px auto 60px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--cbp-ink);
    text-align: left;
}

.cbp-article *,
.cbp-article *::before,
.cbp-article *::after {
    box-sizing: border-box;
}

.cbp-hero__img {
    display: block;
    width: 100%;
    height: 440px;
    object-fit: cover;
    border-radius: var(--cbp-radius);
    padding: 0;
    background: #c9d3de;
}

.cbp-sheet {
    position: relative;
    margin: -150px var(--cbp-inset) 0;
    padding: 46px var(--cbp-pad) 0;
    background: #ffffff;
    border-top: 6px solid var(--cbp-navy);
    border-radius: 24px;
    box-shadow: 0 22px 44px -30px rgba(19, 58, 99, .45);
}

/* ---------- type ---------- */
.cbp-article h1,
.cbp-article h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--cbp-navy);
    font-weight: bold;
    letter-spacing: -0.01em;
}

.cbp-article h1 {
    margin: 0 0 18px;
    font-size: 36px;
    line-height: 1.18;
}

.cbp-article h2 {
    margin: 0 0 14px;
    font-size: 26px;
    line-height: 1.25;
}

.cbp-article p {
    margin: 0 0 16px;
}

.cbp-article p:last-child,
.cbp-article ul:last-child,
.cbp-article .cbp-table-wrap:last-child {
    margin-bottom: 0;
}

.cbp-article .cbp-lead {
    font-size: 18px;
    line-height: 1.65;
    color: #2f353b;
}

.cbp-article a {
    color: var(--cbp-navy);
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: rgba(19, 58, 99, .35);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.cbp-article a:hover,
.cbp-article a:focus-visible {
    color: var(--cbp-blue);
    text-decoration-color: currentColor;
}

.cbp-article a:focus-visible {
    outline: 2px solid var(--cbp-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- sections ---------- */
.cbp-intro {
    padding-bottom: 36px;
}

.cbp-sec {
    padding: 38px 0;
    border-top: 1px solid var(--cbp-line);
}

/* two deadline cards */
.cbp-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 6px 0 20px;
}

.cbp-article .cbp-pair__item {
    margin: 0;
    padding: 22px 24px 24px;
    background: var(--cbp-tint);
    border-top: 4px solid var(--cbp-navy);
    border-radius: 0 0 16px 16px;
}

/* side notes */
.cbp-article .cbp-note,
.cbp-article .cbp-path {
    padding: 16px 22px;
    background: var(--cbp-tint-2);
    border-left: 4px solid var(--cbp-blue);
    border-radius: 0 14px 14px 0;
}

.cbp-article .cbp-path {
    background: var(--cbp-tint);
    border-left-color: var(--cbp-navy);
}

/* the three questions */
.cbp-article .cbp-quotes {
    position: relative;
    padding: 24px 26px 24px 78px;
    background: var(--cbp-tint);
    border-radius: 18px;
    color: #2f353b;
}

.cbp-article .cbp-quotes::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 26px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cbp-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / 22px no-repeat;
}

/* ---------- worksheet tables ---------- */
.cbp-table-wrap {
    margin: 6px 0 20px;
    border: 1px solid var(--cbp-line);
    border-radius: 16px;
    overflow: hidden;
}

.cbp-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 15px;
    line-height: 1.5;
}

.cbp-table th {
    padding: 13px 16px;
    background: var(--cbp-navy);
    color: #ffffff;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
}

.cbp-table td {
    padding: 13px 16px;
    border-top: 1px solid var(--cbp-line);
    vertical-align: top;
    word-break: break-word;
}

.cbp-table tbody tr:nth-child(even) td {
    background: var(--cbp-tint-2);
}

.cbp-table td.cbp-key {
    color: var(--cbp-navy);
    font-weight: bold;
}

/* blank cells read as write-in lines */
.cbp-table td.cbp-blank::after {
    content: "";
    display: block;
    height: 1.1em;
    border-bottom: 2px dashed #a9b7c6;
}

/* ---------- plates with lists ---------- */
.cbp-plate {
    padding: 32px 34px;
    border-radius: 20px;
}

.cbp-plate--checks {
    background: var(--cbp-tint);
}

.cbp-plate--warn {
    background: var(--cbp-warn-tint);
    border-left: 5px solid var(--cbp-warn);
    border-radius: 0 20px 20px 0;
}

.cbp-plate--warn h2 {
    color: var(--cbp-warn);
}

.cbp-article ul.cbp-checks,
.cbp-article ul.cbp-warns {
    list-style: none;
    margin: 6px 0 20px;
    padding: 0;
}

.cbp-article ul.cbp-checks li,
.cbp-article ul.cbp-warns li {
    position: relative;
    margin: 0;
    padding: 11px 0 11px 42px;
    border-bottom: 1px dashed #b9c6d4;
}

.cbp-article ul.cbp-warns li {
    border-bottom-color: #e3c4bf;
}

.cbp-article ul.cbp-checks li:first-child,
.cbp-article ul.cbp-warns li:first-child {
    border-top: 1px dashed #b9c6d4;
}

.cbp-article ul.cbp-warns li:first-child {
    border-top-color: #e3c4bf;
}

.cbp-article ul.cbp-checks li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 13px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--cbp-navy);
    border-radius: 5px;
    background: #ffffff;
}

.cbp-article ul.cbp-warns li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8 1.6 20.6a1 1 0 0 0 .9 1.5h19a1 1 0 0 0 .9-1.5L12 2.8z' fill='%23a5352d'/%3E%3Cpath d='M12 9v5.2' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.6' r='1.3' fill='%23ffffff'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- photo opener: the heading sits on a tab cut into the photo ---------- */
.cbp-sec--opener {
    padding-top: 0;
    border-top: 0;
}

.cbp-opener {
    position: relative;
    margin: 0 calc(-1 * var(--cbp-pad)) 22px;
}

.cbp-opener__img {
    display: block;
    width: 100%;
    height: 330px;
    object-fit: cover;
    padding: 0;
    border-radius: 0;
    background: #c9d3de;
}

.cbp-article .cbp-opener__title {
    position: absolute;
    left: 0;
    bottom: -1px;
    max-width: calc(100% - 2 * var(--cbp-pad));
    margin: 0;
    padding: 20px var(--cbp-pad) 2px;
    background: #ffffff;
    border-radius: 0 22px 0 0;
}

/* ---------- closing band ---------- */
.cbp-sec--close {
    margin: 0 calc(-1 * var(--cbp-pad));
    padding: 42px var(--cbp-pad) 46px;
    background: var(--cbp-navy);
    border-top: 0;
    border-radius: 0 0 24px 24px;
    color: #e9eff6;
}

.cbp-article .cbp-sec--close h2 {
    color: #ffffff;
}

.cbp-article .cbp-sec--close a {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, .55);
}

.cbp-article .cbp-sec--close a:hover,
.cbp-article .cbp-sec--close a:focus-visible {
    color: #cfe0f4;
    outline-color: #ffffff;
}

.cbp-article .cbp-sec--close .cbp-fine {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: 14px;
    line-height: 1.6;
    color: #c4d2e1;
}

/* ---------- site header and footer: keep them inside narrow screens ---------- */
@media (max-width: 1032px) {
    .cbp-guide table[width="1000"] {
        width: 100% !important;
    }
}

@media (max-width: 880px) {
    .cbp-guide .headerbg {
        height: auto;
        padding: 12px 16px 12px;
        background-color: #133a63;
    }

    .cbp-guide .headerbg table,
    .cbp-guide .headerbg tbody,
    .cbp-guide .headerbg tr,
    .cbp-guide .headerbg td {
        display: block;
        width: auto !important;
        height: auto !important;
    }

    .cbp-guide .headerbg > table > tbody > tr > td > table > tbody > tr:first-child,
    .cbp-guide .headerbg td[height="85"] > table > tbody > tr:last-child {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 14px;
    }

    .cbp-guide .headerbg td[height="85"] {
        flex: 1 1 auto;
    }

    .cbp-guide .headerbg td[height="85"] > table > tbody > tr:last-child {
        justify-content: flex-end;
    }

    .cbp-guide .headerbg td[height="85"] > table > tbody > tr:first-child {
        display: none;
    }

    .cbp-guide .headerbg div > table {
        display: table !important;
    }

    .cbp-guide .headerbg div > table tr {
        display: table-row;
    }

    .cbp-guide .headerbg div > table td {
        display: table-cell;
        height: 50px !important;
    }

    .cbp-guide .headerbg .logo {
        position: static;
        display: block;
        width: 116px;
        height: auto;
    }

    .cbp-guide .headerbg td[width="170"] {
        min-width: 150px;
    }

    .cbp-guide .headerbg td[height="55"] {
        margin-top: 12px;
    }

    .cbp-guide .nav-wrapper,
    .cbp-guide .nav {
        float: none;
    }

    .cbp-guide .nav ul {
        float: none;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 0;
    }

    .cbp-guide .nav li {
        float: none;
    }

    .cbp-guide table[width="1000"][style*="margin:0 auto"],
    .cbp-guide table[width="1000"][style*="margin:0 auto"] > tbody,
    .cbp-guide table[width="1000"][style*="margin:0 auto"] > tbody > tr,
    .cbp-guide table[width="1000"][style*="margin:0 auto"] > tbody > tr > td {
        display: block;
        width: auto !important;
    }

    .cbp-guide td.footerbg-bottom {
        padding: 14px 16px 0;
    }

    .cbp-guide .footerbg-bottom ul {
        text-align: left;
    }

    .cbp-guide td[width="48%"] {
        display: block;
        width: auto !important;
        padding: 10px 16px 0;
    }

    .cbp-guide .text-simple-bottom {
        display: block;
        margin-top: 14px;
        padding: 14px 16px;
    }

    .cbp-guide .realtor-logo {
        float: none;
        height: auto;
        margin-bottom: 10px;
    }
}

/* ---------- article on tablets and phones ---------- */
@media (max-width: 1032px) {
    .cbp-guide {
        --cbp-inset: 24px;
        --cbp-pad: 40px;
    }
}

@media (max-width: 760px) {
    .cbp-guide {
        --cbp-inset: 10px;
        --cbp-pad: 22px;
        --cbp-radius: 22px;
    }

    .cbp-article {
        margin: 18px auto 40px;
        font-size: 16px;
    }

    .cbp-hero__img {
        height: 260px;
    }

    .cbp-sheet {
        margin-top: -64px;
        padding-top: 28px;
        border-radius: 18px;
    }

    .cbp-article h1 {
        font-size: 27px;
    }

    .cbp-article h2 {
        font-size: 22px;
    }

    .cbp-article .cbp-lead {
        font-size: 17px;
    }

    .cbp-intro {
        padding-bottom: 26px;
    }

    .cbp-sec {
        padding: 28px 0;
    }

    .cbp-pair {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cbp-plate {
        padding: 22px 18px;
        margin: 0 -10px;
    }

    .cbp-plate--warn {
        border-left-width: 4px;
    }

    .cbp-article .cbp-quotes {
        padding: 66px 18px 20px;
    }

    .cbp-article .cbp-quotes::before {
        left: 18px;
        top: 18px;
    }

    .cbp-opener__img {
        height: 220px;
    }

    .cbp-article .cbp-opener__title {
        position: relative;
        left: auto;
        bottom: auto;
        width: fit-content;
        max-width: calc(100% - 28px);
        margin-top: -38px;
        padding-top: 14px;
        border-top-right-radius: 16px;
    }

    .cbp-sec.cbp-sec--opener {
        padding-top: 0;
    }

    .cbp-sec.cbp-sec--close {
        padding: 30px var(--cbp-pad) 34px;
        border-radius: 0 0 18px 18px;
    }

    /* worksheet rows become stacked cards */
    .cbp-table-wrap {
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .cbp-table,
    .cbp-table tbody,
    .cbp-table tr,
    .cbp-table td {
        display: block;
        width: 100%;
    }

    .cbp-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .cbp-table tr {
        margin: 0 0 12px;
        border: 1px solid var(--cbp-line);
        border-radius: 14px;
        overflow: hidden;
    }

    .cbp-table td,
    .cbp-table tbody tr:nth-child(even) td {
        display: grid;
        grid-template-columns: minmax(96px, 38%) 1fr;
        gap: 12px;
        align-items: start;
        padding: 10px 14px;
        border-top: 1px solid var(--cbp-line);
        background: #ffffff;
    }

    .cbp-table td:first-child,
    .cbp-table tbody tr:nth-child(even) td:first-child {
        border-top: 0;
        background: var(--cbp-tint);
    }

    .cbp-table td::before {
        content: attr(data-label);
        color: var(--cbp-muted);
        font-size: 13px;
        font-weight: bold;
        line-height: 1.5;
    }

    .cbp-table td.cbp-blank::after {
        align-self: end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cbp-article * {
        transition: none !important;
    }
}