/* RetireRight — site-wide custom CSS
 * Loaded via jsDelivr, referenced in Webflow site-wide Head Code.
 * ADDITIVE: this layers on top of Webflow Designer styles + any existing
 * custom code. Add tweaks under a labeled section so they're easy to find.
 * Deploy with ./deploy.sh "message".
 */

:root {
    --nav-height: 152px;
    scroll-padding-top: var(--nav-height);

    @media (max-width: 1200px) {
        --container-width: 1000px;
    }

    @media (max-width: 990px) {
        --nav-height: 72px;
        --padding: 60px;
    }
    
    @media (max-width: 767px) {
        --padding: 40px;
    }
}

/* ===== LAYOUT ===== */
/* One shared gutter so nav, page content and footer share a left/right edge */

.rr-nav,
.rr-footer {
    padding-left: 0;
    padding-right: 0;
}

.rr-nav-inner,
.rr-inner.rr-inner:not(.rr-inner--floating),
body > * > .w-container {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--container-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.rr-footer .footer-row {
    /* 10px here + 10px of .w-col padding lands the columns on the same edge */
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--container-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}

/* ===== NAVBAR ===== */
/* Dropdown hover – desktop */
@media screen and (min-width: 991px) {
    .rr-has-dd:hover > .rr-dd {
        display: block;
    }

    /* Nav link hover color */
    .rr-nav-link:hover {
        color: #009e56;
    }
}

.rr-ham-bar {
transition: all 0.25s ease;
}
.rr-hamburger.rr-nav-open .rr-ham-bar:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.rr-hamburger.rr-nav-open .rr-ham-bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.rr-hamburger.rr-nav-open .rr-ham-bar:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu open state */
@media screen and (max-width: 991px) {
    .rr-nav-links.is-open {
        display: flex;
    }

    /* Mobile dropdown open state */
    .rr-nav-item.rr-dd-open > .rr-dd {
        display: block;
    }

    .rr-nav-links > .rr-nav-item {
        border-top: 1px solid #ccc;
    }
    .rr-has-dd {
        flex-direction: column;
    }
    .rr-dd {
        width: 100%;
        border-left: 0;
        text-align: center;
        background-color: #fff;
    }
    .rr-dd-open .rr-nav-dd-toggle {
        background-color: var(--_brand-colors---surface-light);
        color: var(--_brand-colors---green-dark);
    }
    .rr-nav-dd-toggle::after {
        content: '\f107';
        font-family: 'awb-icons';
        margin-left: 8px;
        font-size: 11px;
        transform: none;
    }
    .rr-nav-dd-toggle[aria-expanded='true']::after {
        transform: rotate(180deg);
    }
}



/* ===== FOOTER ===== */

.footer-row::before,
.footer-row::after {
    content: none;
}

/* Footer navigation */
.rr-footer-nav-item:is(:hover, :focus) .rr-footer-nav-dd,
.rr-footer-nav-dd:is(:focus, :hover) {
    display: block;
}

.rr-footer-nav-menu a:is(:hover, :focus) {
    color: #009e56;
}

@media (min-width: 768px) {
    .rr-footer-dd-item:is(:focus, :hover) {
        background: white;
    }

    .rr-footer-dd-item:not(:last-child) {
        border-bottom: 1px solid white;
    }
}

.rr-footer-dd-item .rr-footer-nav-link {
    width: 100%;
    padding: 1em;
}

@media (max-width: 767px) {
    .rr-footer-nav-dd {
        position: relative;
        left: 0;
        margin-bottom: 0;
        height: 0;
        overflow: hidden;
        transition: 0.125s height ease-in-out;
        background: transparent;
    }
    .rr-footer-nav-item:is(:hover, :focus) .rr-footer-nav-dd {
        height: 100%;
    }
    .rr-footer-nav-item .rr-footer-nav-dd {
        height: 100%;
        display: block;
    }
    .rr-footer-dd-item .rr-footer-nav-link {
        width: unset;
        padding: 2px 0;
    }
}

/* ===== COMPONENTS ===== */

.w-container {
    max-width: var(--container-width);
}

@media (max-width: 767px) {
    .w-col:not(:last-child),
    .rr-inner--two-col_img-first img {
        /* Add breathing room between stacked columns */
        margin-bottom: 10px;
    }
}

:is(p, .button-link):last-child {
    /* No gap following the last element in an area */
    margin-bottom: 0;
}

.rr-heading--mixed {
    line-height: 1.2;
    font-weight: 600;
}

.rr-heading--mixed strong {
    font-size: 3rem;
    font-weight: 700;
}


.rr-section--floating {
    background-image: linear-gradient(180deg, #009e56 50%, #004782 50%);
}

.rr-section--floating-reverse {
    background-image: linear-gradient(to top, #009e56 50%, #004782 50%);
}

@media (max-width: 767px) {
    /* When columns stack on smaller screens they may not be the same height so spliting the background color half way up does not align with content */
    .rr-section--floating,
    .rr-section--floating-reverse {
        background: #004782;
    }
}

.two-column-e .two-column-grid {
    max-width: 940px;
    margin-inline: auto;
}



@media (min-width: 768px) {
    .rr-testimonial-text::before,
    .rr-testimonial-text::after {
        content: '\201C';
        position: absolute;
        font-size: 100px;
        line-height: 1;
        font-family: sans-serif;
    }
    .rr-testimonial-text::before {
        top: -0.125em;
        left: -0.75ch;
    }
    .rr-testimonial-text::after {
        bottom: -0.125em;
        right: -0.75ch;
        transform: rotate(180deg);
    }
}

/* Slider */
.w-slider:is(:hover, :focus, :focus-within) :is(.w-slider-arrow-left, .w-slider-arrow-right) {
    opacity: 1;
}

/* Button links */
img ~ .button-link {
    margin-top: 10px;
}

:is(.rr-bg--navy, .dark-flipped) .button-link:not(:hover, :focus) {
    background: var(--_brand-colors---green-dark);
}

/* Youtube embeds */
@media (max-width: 600px) {
    .yt-embed {
        max-width: 100%;
        aspect-ratio: 16/9;
        width: unset;
        height: unset;
    }
}

/* Flip Card component */
.flip-card {
    min-height: 270px;
    text-align: center;
    position: relative;
    border-radius: 5px;
    overflow: clip;
    cursor: pointer;

    & .flip {
        position: relative;
        min-height: inherit;
        transition: 0.75s transform cubic-bezier(0.66, 0, 0.371, 1.186);
        transform-style: preserve-3d;
        perspective: 1000px;
        transform-origin: center;
    }

    :is(.card-front, .card-back) {
        height: inherit;
        width: 100%;
        position: absolute;
        inset: 0;
        color: white;
        backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        place-items: center;
        transform-style: preserve-3d;

        & p {
        margin: auto;
        }
    }

    .card-front {
        z-index: 2;

        &:is(.flip-card:nth-child(even) .card-front) .card-front-paragraph {
        color: #009e56;
        }
    }

    .card-back {
        background: gray;
        z-index: 1;
        transform: rotateX(180deg);

        & img {
        position: absolute;
        object-fit: cover;
        top: 0;
        left: 0;
        height: 100%;
        object-position: center;
        width: 100%;
        }

        & p {
        position: relative;
        z-index: 1;
        color: white;
        }
    }

    &:is(:hover, :focus) {
        & .flip {
        transform: rotateX(180deg);
        }

        & .card-front {
        z-index: 0;
        }
    }
}

:is(h1, h2, h3, h4, p):empty {
    display: none;
}

:is(h2, h3) + .subtitle:not(:empty) {
    margin-top: -10px;
}

.subtitle + :is(h2, h3) {
    margin-top: 0;
}

.subtitle:first-child {
    font-size: 24px;
}

/* Content section and light-blue-section */

.content-section:is([class*="w-variant"], .grid-a, .blue-background, .green-background) + .content-section:is([class*="w-variant"], .grid-a, .blue-background, .green-background), 
.content-section:not(
        :is([class*="w-variant"], .grid-a, .testimonial-b, .blue-background, .green-background)
    ) + .content-section:not(
        :is([class*="w-variant"], .grid-a, .testimonial-b, .blue-background, .green-background)
    )
{
    /* Don't include padding-top when a content-section follows a content-section. Verbose selector required so that content-section first content-section with a different colored background will still get padding */
    padding-top: 0;
}

.content-section:first-of-type :is(h1, h2) {
    margin-top: 0;
}

.content-section[data-wf--content-section--variant="blue-background"] a:not(:is(:focus, :hover)) {
    color: var(--_brand-colors---link);
}

.light-blue-section + .light-blue-section {
    padding-top: 0;
}

.light-blue-section h3 {
    text-align: center;
    /* font-size: 28px; */
    font-weight: 600;
    color: var(--_brand-colors---navy-deep);
    font-family: var(--_typography---font-sans);

    &:is(.text-left) {
        text-align: left;
    }
}

.light-blue-section :is(p, .w-richtext:has(p:last-child)) + .w-richtext h3 {
    /* Top borders of light blue section */
    position: relative;
    padding-top: var(--gap);
}

.grid-item ul {
    padding-left: 1ch;
}

.light-blue-section:last-of-type {
    padding-bottom: 40px;
}

.light-blue-section a:not(:is([class], :hover, :focus)) {
    color: var(--_brand-colors---navy-deep);
}

.affiliated-firm:last-child {
    margin-bottom: 0;
}

.affiliated-firm+.affiliated-firm::before {
    --width: 300px;
    content: '';
    display: block;
    position: absolute;
    top: calc(var(--gap) * -1);
    left: calc(50% - (var(--width) * .5));
    border: 1px solid var(--_brand-colors---link);
    opacity: .5;
    width: var(--width);
    max-width: 100%;
}

.w-richtext h3:first-child {
    margin-top: 0;
}


/* Profile modal styles */

body::before {
    /* Overlay for content under modal */
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 1001;
    display: block;
    pointer-events: none;
    transition: .125s background ease-in-out;
}

body.modal-launched {
    overflow-y: clip;
    height: 100%;
}

html:has(.modal-launched) {
    height: 100%;
}

body.modal-launched::before {
    /* Overlay for content under modal */
    background: rgb(0 0 0 / 80%);
}

@media (min-width: 768px) {
    .rr-profile:last-child:is(:nth-of-type(3n+4)) {
        /* Center align the last profile card if it would be the first item it it's row */
        grid-column: 2 / 3;
    }
}

.profile-modal {
    --header-height: 160px;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: calc(90vh - var(--header-height));
    max-width: 80vw;
    margin: auto;
    border-radius: 10px;
    width: 885px;
    padding: 15px;
    background: white;
    z-index: 1001;
    opacity: 0;
    transition:
        0.125s opacity ease-in-out,
        0.125s margin-top ease-in-out;
    pointer-events: none;
    margin-top: 10px;
}

.launch-modal .profile-modal {
    opacity: 1;
    pointer-events: all;
    margin-top: 0;
}

.profile-modal .button-link {
    margin-block: unset;
    margin-right: unset;
}

.sidebar {
    line-height: 1.2em;
    
    & :is(h2, h3) {
        font-family: var(--_typography---font-sans);
        font-size: 1.3rem;
        font-weight: 700;
        line-height: 1.2em;
        text-transform: unset;
    }

    & :is(h2, h3):first-child {
        margin-top: 0;
    }
    
    & img {
        margin-bottom: 10px;
    }

    & .button-link {
        margin-inline: unset;
    }
}

.sidebar section {
    padding-block: calc(var(--padding) * .4);
    
    @media (min-width: 768px) {
        &:is(:first-child) {
            padding-top: 0;
        }
    }
    
    &:is(:last-child) {
        padding-bottom: 0;
    }
    
    & + section {
        border-top: 1px solid lightgray;
    }
}

.accordion {
    display: grid;
    grid-template-columns: max-content 1fr;
    text-align: left;
    padding-bottom: 10px;
    gap: 0 10px;

    & :is(.w-dropdown, .w-dropdown-list, .w-dropdown-list.rr-open)  {
        /* Display contents to align element's child to accordion's display: grid */
        display: contents;
    }

    & :is(.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link) {
        /* Left align trigger and accordion content */
        margin-inline: unset;
    }

    & .w-icon-dropdown-toggle {
        /* Hide dropdown carets */
        display: none;
    }

    & .w-dropdown-toggle {
        grid-column: 1 / 2;
        border-left: 5px solid transparent;
        transition: .125s border ease-in-out, .125s background ease-in-out;
        font-weight: 600;
        padding: 10px 20px;
        padding-left: 15px;

        &.rr-open {
            border-left: 5px solid var(--_brand-colors---navy-deep);
        }

        & + .w-dropdown-toggle {
            border-top: 1px;
            padding-top: 9px;
        }
    }

    & .w-dropdown-link {
        display: none;
        grid-column: 2 / 3;
        white-space: normal;

        &:is(.rr-open &) {
            display: block;
            /* background: white; */
        }

        &:nth-child(1) {
            grid-row-start: 1;
        }
        &:nth-child(2) {
            grid-row-start: 2;
        }
        &:nth-child(3) {
            grid-row-start: 3;
        }
        &:nth-child(4) {
            grid-row-start: 4;
        }
        &:nth-child(5) {
            grid-row-start: 5;
        }
        &:nth-child(6) {
            grid-row-start: 6;
        }
        &:nth-child(7) {
            grid-row-start: 7;
        }
        &:nth-child(8) {
            grid-row-start: 8;
        }
        &:nth-child(9) {
            grid-row-start: 9;
        }
        &:nth-child(10) {
            grid-row-start: 10;
        }
        &:nth-child(11) {
            grid-row-start: 11;
        }
    }

    & .w-dropdown {
        &:nth-child(1) .w-dropdown-toggle {
            grid-row-start: 1;
        }
        &:nth-child(2) .w-dropdown-toggle {
            grid-row-start: 2;
        }
        &:nth-child(3) .w-dropdown-toggle {
            grid-row-start: 3;
        }
        &:nth-child(4) .w-dropdown-toggle {
            grid-row-start: 4;
        }
        &:nth-child(5) .w-dropdown-toggle {
            grid-row-start: 5;
        }
        &:nth-child(6) .w-dropdown-toggle {
            grid-row-start: 6;
        }
        &:nth-child(7) .w-dropdown-toggle {
            grid-row-start: 7;
        }
        &:nth-child(8) .w-dropdown-toggle {
            grid-row-start: 8;
        }
        &:nth-child(9) .w-dropdown-toggle {
            grid-row-start: 9;
        }
        &:nth-child(10) .w-dropdown-toggle {
            grid-row-start: 10;
        }
        &:nth-child(11) .w-dropdown-toggle {
            grid-row-start: 11;
        }
    }

    @media (max-width: 900px) {
        & {
            display: block;
    
            & .w-dropdown-toggle {
                pointer-events: none;
                    &.rr-open {
                        border-left: 5px solid transparent;
                    }
            }
    
            & .w-dropdown-link {
                display: block;
            }
        }
    }
}

/* Contact: How did you hear  */

:is(#referred-by, [for="referred-by"]),
:is(#describe-how, [for="describe-how"]) {
    /* Hide additional questions... */
    display: none;
}

#how-did-you-hear:has([value="referal"]:checked) ~ :is(#referred-by, [for="referred-by"]),
#how-did-you-hear:has([value="other"]:checked) ~ :is(#describe-how, [for="describe-how"])
 {
    /* ...until the relevant <option> is selected */
    display: block;
}

/* ===== UTILITIES ===== */

.rr-uppercase {
    text-transform: uppercase;
}

.align-left {
    text-align: left;
}

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

/* ===== ANIMATIONS ===== */

:root {
    --distance: 2rem;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        top: var(--distance);
    }

    25% {
        opacity: 1;
    }

    50% {
        top: 0;
    }
}

@keyframes fadeLeft {
    0% {
        opacity: 0;
        left: calc(var(--distance) * .5);
    }

    25% {
        opacity: 1;
    }

    50% {
        left: 0;
    }
}

@keyframes fadeRight {
    0% {
        opacity: 0;
        right: calc(var(--distance) * .5);
    }
    
    25% {
        opacity: 1;
    }

    50% {
        right: 0;
    }
}

.fade-up, .fade-left, .fade-right {
    position: relative;
    animation-duration: 1ms;
    /* animation-duration required for Firefox compatibility */
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-timeline: view(block 10%);
}

.fade-up {
    animation-name: fadeUp;
}
.fade-left {
    animation-name: fadeLeft;
}
.fade-right {
    animation-name: fadeRight;
}

@media (max-width: 767px) { 
    .fade-up, .fade-left, .fade-right {
        animation-name: unset;
    }
}