/* Sofia Pro - self-contained @font-face for the guide template. The jones theme's
   global body rule references "Sofia Pro" but no face is loaded on this template,
   so the body fell back to system sans-serif. Files live in the jonestenants theme.
   Scoped to this enqueue (guide pages only); does NOT re-enable the global font loader. */
@font-face {
    font-family: "Sofia Pro";
    src: url("/wp-content/themes/jonestenants/fonts/fonts_website_3_0/SofiaPro.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Sofia Pro";
    src: url("/wp-content/themes/jonestenants/fonts/fonts_website_3_0/SofiaPro-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Sofia Pro";
    src: url("/wp-content/themes/jonestenants/fonts/fonts_website_3_0/SofiaPro-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Sofia Pro";
    src: url("/wp-content/themes/jonestenants/fonts/fonts_website_3_0/SofiaPro-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Default styles */

.insurance-home {
    padding: 64px 20px 0;
    margin: auto;
    max-width: 1056px !important;
}

.insurance-home .header-section {
    text-align: center;
    width: 100%;
    padding-top: 48px;
    margin: auto;
    margin-bottom: 40px;
}

.insurance-home .header-section .title {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 20px;
    color: var(--black-regular, #1F2023);
    font-weight: 600;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.03em;
}

.insurance-home .sub-title {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: var(--grey-dark, #606876);
    max-width: 327px;
    margin: auto;
}

.grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.insurance-home .insurance-guide-frames {
    max-width: 1080px;
    margin: auto;
    margin-bottom: 40px;
}

.tile {
    background: var(--grey-light, #F9FAFB);
    border-radius: 15px;
    padding: 16px;
}

.tile-icon {
    width: 40px;
    height: 40px;
    padding: 8px;
    background: #FFFFFF;
    border-radius: 8px;
    margin-bottom: 16px;
}

.tile-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.tile-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.03em;
    color: var(--black-regular, #1F2023);
}

.tile-links a,
.tile-links * {
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: -0.01em;
    color: var(--primary-regular, #0073FF) !important;
    text-decoration: none;
}

.tile-links a:hover {
    color: #0061D7 !important;
}

.tile-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tile-links li {
    margin-bottom: 16px;
}

.d-none {
    display: none;
}

.insurance-guide {
    max-width: 1056px;
    margin: auto;
    color: #4E5972;
    padding-top: 102px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 80px !important;
}

.insurance-guide h1 {
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: -0.96px;
    color: var(--black-regular, #1F2023);
    font-style: normal;
    margin-bottom: 20px;
    /* Font style comes after font size in the standard sequence */
}

/* Article body: list/toggle spacing, summary markers, image & figure frames.
   Ported from prod jonestenants global styles (not in the original partial CSS). */
.insurance-guide details,
.insurance-guide ol,
.insurance-guide ul {
    margin-bottom: 20px;
}

.insurance-guide details p {
    margin-left: 17px;
}

.insurance-guide summary {
    display: list-item;
    font-weight: bold;
}

.insurance-guide .wp-block-details summary,
.wp-block-details summary {
    cursor: pointer;
}

p.image-container {
    border: 0.5px solid lightgray;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}

.insurance-guide figure {
    width: unset !important;
    text-align: center;
    font-style: italic;
    border: 0.5px solid lightgray;
    border-radius: 5px;
    padding: 10px;
}

.insurance-guide .section-link {
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    letter-spacing: -0.03em;
    color: var(--black-regular, #1F2023);
    margin-bottom: 16px;
}

.insurance-guide .menu-item {
    display: block !important;
}

.ig-heading {
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 30px;
}

.ig-heading a {
    color: #4E5A72;
    text-decoration: none;
}

.navigation-left {
    margin-top: 0 !important;
}

.right-navigation.ins {
    padding: 0px;
    margin-bottom: 52px !important;
}

.right-navigation.ins .sub-menu {
    width: 100%;
    padding: 0;
    padding-left:16px;
    margin-bottom:0;
    position: relative;
    box-shadow: none;
    display: none;
}

.right-navigation.ins .current-menu-parent .sub-menu{
    display: block;
}

.right-navigation.ins {
    width: 100%;
    padding-left: 0;
    padding-right: 20px;
}

.right-navigation.ins li {
    list-style: none;
    top: 0px;
    position: relative;
    text-align: left;
    width: 100%;
}

ul#menu-insurance-sidebar-menu {
    margin: 0;
    padding: 0;
}


.right-navigation.ins li a {
    color: #4F5667;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 23px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    transition: all 0.6s;
    display: block;
}

.right-navigation.ins .current-menu-parent a,
.right-navigation.ins ul.sub-menu .current-menu-item a,
.right-navigation.ins ul.sub-menu a {
    color: #000 !important;
}

.right-navigation.ins .visible>a:first-child::after {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    right: 0;
    top: 14px;
    transition: transform 0.1s linear;
    background:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.4112 6.19305L7.99786 8.77971L10.5845 6.19305C10.8445 5.93305 11.2645 5.93305 11.5245 6.19305C11.7845 6.45305 11.7845 6.87305 11.5245 7.13305L8.46453 10.193C8.20453 10.453 7.78453 10.453 7.52453 10.193L4.46453 7.13305C4.20453 6.87305 4.20453 6.45305 4.46453 6.19305C4.72453 5.93971 5.1512 5.93305 5.4112 6.19305Z' fill='%231F2023'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.main-content * {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.01em;
}

.main-content a {
    margin-bottom: 16px;
    color: #0073FF;
}
.main-content p a:last-of-type{
    margin-bottom:0;
}

.main-content p {
    color: #606876;
}

.right-navigation.ins ul.sub-menu .current-menu-item a,
.main-content a {
    color: #0073FF !important;
}

.main-content a,
.sticky-menu a,
.right-tab,
.sticky-menu {
    display: inline-block !important;
}


/* Media Query for Small Screens (min-width: 576px) */
@media (min-width: 576px) {
    .d-sm-none {
        display: none;
    }
}

/* Media Query for Medium Screens (min-width: 768px) */
@media (min-width: 768px) {
    .d-md-none {
        display: none;
    }

    .insurance-guide {
        padding-top: 138px !important;
    }

    .insurance-guide h1 {
        font-size: 40px;
        line-height: 48px;
    }

    .header-section .title {
        font-size: 48px;
        line-height: 57px;
        letter-spacing: -0.05em;
    }

    .insurance-home .sub-title {
        font-size: 16px;
        line-height: 26px;
        letter-spacing: 0;
    }

    .tile-links a {
        font-size: 14px;
        line-height: 22px;
    }

    .insurance-home .header-section {
        max-width: 498px;
        width: 498px;
        margin-bottom: 70px;
    }

    .insurance-home .header-section .title {
        width: 498px;
        font-size: 48px;
        line-height: 57px;
        letter-spacing: -0.05em;
    }
}

/* Media Query for Large Screens (min-width: 1280px) */
@media (min-width: 1280px) {
    .grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }

    .tile-title {
        min-height: 52px;
        max-width: 170px;
    }

    .insurance-guide .row {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
    }

    .insurance-guide .col-md-3 {
        width: 25%;
    }

    .insurance-guide .col-md-9 {
        width: calc(75% - 40px);
    }
}