/**
 * FRONTEND STYLES
 * This file is only loaded in the WordPress frontend.
 * Only add styles which are not needed in the block editor.
 */



/* Site Header
   ---------------------------------------------------------------------------------------------------- */
.site-header {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    padding-top: 1em;
}
.site-header .header__main {
    background: var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border-radius--medium);
    box-shadow: 0 8px 24px rgb(0 28 119 / 10%);
}
.site-header .wp-block-buttons {
    row-gap: 1rem;
    column-gap: 2rem;
}
.site-header .wp-block-site-logo img {
    width: 12vw;
    max-width: 200px;
    min-width: 120px;
}

@media (max-width: 559px) {
    .site-header .has-global-padding{
        padding-left: 1em;
        padding-right: 1em;
    }
}
@media (min-width: 1050px) {
    .site-header {
        padding-top: 1.5em;
    }
}




/* Search Block in Site Header
   ---------------------------------------------------------------------------------------------------- */
:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
    border: none;
}
.site-header .wp-block-search .wp-block-search__button {
    margin: 0;
}
.site-header .wp-block-search__button.has-icon {
    padding: 0.75rem;
}

@media (min-width: 1020px) {
    .site-header .wp-block-search .wp-block-search__input {
        position: absolute;
        right: 60px;
        width: 1px;
        padding: 0.5em 1em;
        border: 1px solid var(--wp--preset--color--primary-darker);
        border-radius: var(--wp--custom--border-radius--large);
        opacity: 0;
        clip-path: inset(50%);
        transition: 
            opacity 0.2s ease-in-out,
            width 0.2s ease-in-out;
    }
    .site-header .wp-block-search .wp-block-search__input:focus-within {
        opacity: 1;
        width: 30vw;
        clip-path: unset;
    }
    .site-header .wp-block-navigation__container,
    .site-header .wp-block-buttons {
        transition: opacity 0.2s ease-in-out;
    }
    .site-header:has(.wp-block-search:focus-within) .wp-block-navigation__container,
    .site-header:has(.wp-block-search:focus-within) .wp-block-buttons {
        opacity: 0.25;
    }
}




/* Home Hero Avatars
   ---------------------------------------------------------------------------------------------------- */
@media (max-width: 819px) {
    .wp-block-group:has(.avatar-wrapper) {
        display: grid;
        grid-template-columns: 100%;
    }
    :nth-child(1 of .avatar-wrapper) {
        grid-row: 99;
        max-width: 300px;
        margin-top: -1em;
    }
    :nth-child(2 of .avatar-wrapper) {
        grid-row: 1;
        max-width: 200px;
        margin-bottom: 2em;
    }
}
@media (min-width: 820px) {
    .site-main:has(.avatar-wrapper) {
        overflow-x: hidden;
    }
    .site-main *:has(>.avatar-wrapper) {
        position: relative;
        z-index: 1;
    }
    .avatar-wrapper {
        display: block;
        position: relative;
        z-index: -1;
        margin: 0;
    }
    .avatar-wrapper .avatar {
        position: absolute;
    }
    #avatar-1 {
        top: -15vh;
        left: -10vw;
    }
    #avatar-2 {
        top: -10vh;
        right: -7vw;
    }
    #avatar-3 {
        top: 7vh;
        left: -3vw;
        animation-delay: 200ms;
    }
    #avatar-4 {
        top: 11vh;
        right: -1vw;
    }
    #avatar-5 {
        top: 5vh;
        right: -7vw;
        animation-delay: 100ms;
    }
    #avatar-6 {
        right: 2vw;
        bottom: -4em;
        animation-delay: 100ms;
    }

    @media (prefers-reduced-motion: no-preference) {
        .avatar-wrapper .avatar {
            animation: hoverUpDownRotate 8s cubic-bezier(0.37, 0, 0.63, 1) infinite 1.7s;
        }
    }

    /* Hover Up, Down, and Rotate */
    @keyframes hoverUpDownRotate {
        0%, 100% {
            transform: translateY(0) rotate(0deg); /* Neutral position */
        }
        50% {
            transform: translateY(-20px) rotate(5deg); /* Move up by 20px and slight rotate */
        }
    }
}



/* Site Main
   ---------------------------------------------------------------------------------------------------- */
.site-main {
    margin-top: 1em;
}



/* Site Footer
   ---------------------------------------------------------------------------------------------------- */
.site-footer {
    background-image: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(215,235,255,1) 48%, rgba(215,235,255,1) 100%);
    margin-block-start: 0;
    padding-top: 2em;
}
.site-footer :where(.wp-block-navigation, .wp-block-page-list) {
    gap: 0.5em;
}



/* Navigation Menu (responsive)
   ---------------------------------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    background-color: var(--wp--preset--color--primary-lightest);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 4em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-bottom: 3em;
}
.wp-block-navigation__responsive-container-close {
    right: 1.5em;
    top: 1.5em;
}
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    padding: 0.25em clamp(0.15em,1vw,0.75em);
    border-radius: var(--wp--custom--border-radius--medium);
    transition: background-color 0.2s ease-in-out;
}

@media (min-width: 600px) and (max-width: 1049px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
    }
    .wp-block-navigation.wp-block-navigation-is-layout-flex {
        gap: 0;
    }

    @media (orientation: portrait) {
        .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
            bottom: 0;
        }
    }
}
@media (max-width: 1049px) {
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
        width: 100%;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
        width: inherit;
        /* border-bottom: 1px solid var(--wp--preset--color--dark-grey); */
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
        padding: 0.625em 0.5em;
    }
    .wp-block-navigation .wp-block-navigation-item__content {
        width: inherit;
    }
    .wp-block-navigation .wp-block-buttons {
        width: 100%;
        margin: 1.5em 0 2em 0;

        .wp-block-button {
            flex-grow: 1;
        }
    }
    .wp-block-navigation .wp-block-search {
        width: 100%;
    }
    :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
        border: 1px solid var(--wp--preset--color--dark-grey);
        border-radius: var(--wp--custom--border-radius--large);
        overflow: hidden;
        gap: 1em;
    }
    :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
        padding: 0.5em 1em !important;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, 
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
        gap: 0.5em;
    }
}
@media (min-width: 1020px) {
    .site-header .wp-block-navigation__container {
        gap: clamp(0.5em, 1vw, 2em);
    }
}
@media (min-width: 1100px) {
    .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
        background-color: var(--wp--preset--color--primary-lightest);
    }
    .wp-block-navigation__container {
        column-gap: 0.5em;
        row-gap: 1em;
    }
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none;
    }
}




/* General Form & Input Styles
   ---------------------------------------------------------------------------------------------------- */
form {
    --c-notice--alert: #B50000;
    --c-notice--attention: var(--wp--preset--color--black);
    --c-notice--success: var(--wp--preset--color--black);

    --c-input--text: var(--wp--preset--color--black);
    --c-input--focus: var(--wp--preset--color--primary-100);
    --c-label--text: var(--wp--preset--color--black);

    --input--border: 1px solid #8c8f94;
    --input--background: var(--wp--preset--color--white);
}

:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea) {
    width: 100%;
    border-radius: var(--wp--custom--border-radius--small);
    border: var(--input--border);
    padding: 0.5rem 1rem;
    font-size: var(--wp--preset--font-size--regular);
    line-height: var(--wp--custom--line-height--small);
    color: var(--c-input--text);
    background: var(--input--background);
}

input[type="date"], input[type="time"] {
    appearance: initial !important;
}

:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea):focus {
    border-color: var(--wp--preset--color--primary-darker);
}
:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea)[aria-invalid="true"] {
    border-color: var(--c-notice--alert);
}

textarea {
    resize: vertical; /* user can resize vertically, but width is fixed */
    height: auto;
}

select {
    -webkit-appearance: none;
    appearance: none;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="17" fill="none"><path fill="%23000" d="m13.176 9.459-5.763 5.763a.595.595 0 0 1-.825 0l-5.76-5.76-.824.825 5.76 5.76a1.794 1.794 0 0 0 2.474 0L14 10.284l-.824-.825ZM.829 7.083 6.592 1.32a.596.596 0 0 1 .824 0l5.76 5.76.825-.825L8.24.495a1.794 1.794 0 0 0-2.475 0L.004 6.258l.825.825Z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1.25em top 50%;
}

label, 
legend {
    display: inline-block;
    margin-bottom: 0.5rem;
    line-height: var(--wp--custom--line-height--small);
    color: var(--c-label--text);
}

label[for] {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
}

legend {
    font-family: var(--wp--preset--font-family--lato);
    font-weight: 500;
}

fieldset {
    padding: 0;
    margin: 0;
    border: none;
}

form p {
    margin-bottom: 1em;
}

input[type="date"],
input[type="time"] {
    -webkit-appearance: textfield;
            appearance: textfield;
}


.input-wrapper {
    padding: 0.5em 1em 1em 1em;
    border-radius: var(--wp--custom--border-radius--medium);
    background-color: var(--wp--preset--color--white);

    label {
        color: var(--wp--preset--color--dark-grey);
        line-height: var(--wp--custom--line-height--small);
    }

    :where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea) {
        border-color: transparent;
        border-bottom: 1px solid var(--wp--preset--color--dark-grey);
    }
}


/* Contact Form 7 plugin
   ---------------------------------------------------------------------------------------------------- */

input[type=checkbox] + .wpcf7-list-item-label {
    font-weight: 400;
}

.wpcf7-form-control-wrap {
    display: block;
}

.wpcf7-list-item {
    margin-left: 0 !important;
}

.wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    column-gap: 0.25em;
}

.wpcf7 .wpcf7-submit:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.wpcf7 .wp-block-button .wpcf7-submit.wp-block-button__link {
    width: auto;
}

.wpcf7-not-valid-tip {
    font-size: 1rem !important;
    margin-top: 0.5em;
    margin-left: 0.25em;
    color: var(--c-notice--alert);
}

.wpcf7-not-valid-tip::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14"><path fill="%23B50000" d="M8.00685 0.375C8.44478 0.375 8.85143 0.625 9.07039 1L15.827 12.5C16.046 12.9063 16.046 13.375 15.827 13.75C15.608 14.1563 15.2014 14.375 14.7634 14.375H1.25025C0.781045 14.375 0.374398 14.1563 0.155434 13.75C-0.06353 13.375 -0.06353 12.9063 0.155434 12.5L6.91203 1C7.131 0.625 7.53764 0.375 8.00685 0.375ZM8.00685 4.375C7.56892 4.375 7.25612 4.71875 7.25612 5.125V8.625C7.25612 9.0625 7.56892 9.375 8.00685 9.375C8.4135 9.375 8.75758 9.0625 8.75758 8.625V5.125C8.75758 4.71875 8.4135 4.375 8.00685 4.375ZM9.00783 11.375C9.00783 10.8438 8.53862 10.375 8.00685 10.375C7.4438 10.375 7.00587 10.8438 7.00587 11.375C7.00587 11.9375 7.4438 12.375 8.00685 12.375C8.53862 12.375 9.00783 11.9375 9.00783 11.375Z"/></svg>');
    margin-right: 0.5rem;
    vertical-align: middle;
}

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    margin-left: 0;
    margin-right: 0;
    padding-left: calc(2rem + 16px);
    position: relative;
}

:where(.wpcf7 form.sent .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output)::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14"><path fill="%23B50000" d="M8.00685 0.375C8.44478 0.375 8.85143 0.625 9.07039 1L15.827 12.5C16.046 12.9063 16.046 13.375 15.827 13.75C15.608 14.1563 15.2014 14.375 14.7634 14.375H1.25025C0.781045 14.375 0.374398 14.1563 0.155434 13.75C-0.06353 13.375 -0.06353 12.9063 0.155434 12.5L6.91203 1C7.131 0.625 7.53764 0.375 8.00685 0.375ZM8.00685 4.375C7.56892 4.375 7.25612 4.71875 7.25612 5.125V8.625C7.25612 9.0625 7.56892 9.375 8.00685 9.375C8.4135 9.375 8.75758 9.0625 8.75758 8.625V5.125C8.75758 4.71875 8.4135 4.375 8.00685 4.375ZM9.00783 11.375C9.00783 10.8438 8.53862 10.375 8.00685 10.375C7.4438 10.375 7.00587 10.8438 7.00587 11.375C7.00587 11.9375 7.4438 12.375 8.00685 12.375C8.53862 12.375 9.00783 11.9375 9.00783 11.375Z"/></svg>');
    position: absolute;
    left: 1rem;
}

.wpcf7 form.sent .wpcf7-response-output::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="%2346b450" d="M2 0H12C13.0938 0 14 0.90625 14 2V12C14 13.125 13.0938 14 12 14H2C0.875 14 0 13.125 0 12V2C0 0.90625 0.875 0 2 0ZM10.5312 5.53125H10.5C10.8125 5.25 10.8125 4.78125 10.5 4.46875C10.2188 4.1875 9.75 4.1875 9.46875 4.46875L6 7.96875L4.53125 6.5C4.21875 6.1875 3.75 6.1875 3.46875 6.5C3.15625 6.78125 3.15625 7.25 3.46875 7.53125L5.46875 9.53125C5.75 9.84375 6.21875 9.84375 6.53125 9.53125L10.5312 5.53125Z"/></svg>');
}
.wpcf7 form.invalid .wpcf7-response-output {
    border-color: #B50000;
}

.wpcf7 form .wpcf7-response-output {
    border-width: 1px;
    padding: 0.5em 1em;
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--wp--custom--border-radius--regular);
}


/* custom radio button styling for contact form 7 */
.is-radio .wpcf7-form-control.wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
.is-radio .wpcf7-form-control.wpcf7-radio input[type="radio"] {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.is-radio .wpcf7-form-control.wpcf7-radio .control-dummy {
    flex-shrink: 0;
    display:grid;
    place-items: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    border: var(--input--border);
    background: var(--input--background);
    margin-right: 0.5em;
}
.is-radio .wpcf7-form-control.wpcf7-radio .control-dummy::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    box-shadow: inset 0.75em 0.75em var(--c-input--focus);
    border-radius: 50%;
    transition: 180ms transform ease-in-out;
    transform: scale(0);    
}
.is-radio .wpcf7-form-control.wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label > .control-dummy::before {
    transform: scale(1);
}
.is-radio .wpcf7-form-control.wpcf7-radio .wpcf7-list-item-label {
    display: flex;
    align-items: center;
    font-weight: 400;
    cursor: pointer;
}
.is-radio .wpcf7-form-control.wpcf7-radio span.wpcf7-list-item {
    width: auto;
}
.is-radio .wpcf7-form-control.wpcf7-radio span.wpcf7-list-item > label {
    display: flex;
    align-items: center;
}


/* custom checkbox styling for contact form 7 */
.wpcf7-form-control.wpcf7-checkbox > .wpcf7-list-item {
    display: block;
    position: relative;
    margin-bottom: 0.5em;
}
.wpcf7-form-control.wpcf7-checkbox > .wpcf7-list-item label {
    display: flex;
}
.wpcf7-form-control input[type=checkbox] {
    clip: rect(1px,1px,1px,1px);
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.wpcf7-form-control input[type=checkbox] + span::before {
    display: block;
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    top: 0.25em;
    left: 0;
    border-radius: var(--wp--custom--border-radius--small);
    border: var(--input--border);
    background: var(--input--background);
}
.wpcf7-form-control input[type=checkbox] + span::after {
    display: inline-block;
    position: absolute;
    top: 12px;
    left: 5px;
    transform: rotate(-45deg);
    box-sizing: border-box;
    border: 2px solid transparent;
    border-top: 0;
    border-right: 0;
    width: 15px;
    height: 7px;
    content: "";
}
.wpcf7-form-control input[type=checkbox]:focus + span::before {
    outline: none;
}
.wpcf7-form-control input[type=checkbox]:checked + span::before {
    background: var(--input--background);
}
.wpcf7-form-control input[type=checkbox]:checked + span::after {
    visibility: visible;
    border-color: var(--wp--preset--color--black);
}
.wpcf7-form-control input[type=checkbox] + .wpcf7-list-item-label {
    margin-left: calc(24px + 0.5em);
    cursor: pointer;
}


/* focus styles for custom radio/checkbox */
.wpcf7-form-control input[type="radio"]:focus + .wpcf7-list-item-label > .control-dummy,
.wpcf7-form-control input[type="checkbox"]:focus + .wpcf7-list-item-label::before {
    background-color: var(--c-input--focus);
}




/* Search Page
   ---------------------------------------------------------------------------------------------------- */
.search-results .site-header .wp-block-search {
    display: none;
}
.search-results .wp-block-search__input {
    appearance: auto;
    border-radius: var(--wp--custom--border-radius--small);
    padding: 0.5rem 1rem;
    border: none;
    border-bottom: 1px solid var(--wp--preset--color--dark-grey);
}
.search-results .wp-block-search__inside-wrapper {
    gap: 0.5em;
}




/* Actuary profile specific styles
   ---------------------------------------------------------------------------------------------------- */
.single-wx_actuary .wp-block-post-featured-image {
    max-width: 256px;

    img {
        border-radius: 256px;
    }
}
.wp-block-post.wx_actuary .wp-block-post-featured-image {
    max-width: 128px;

    img {
        border-radius: 128px;
    }
}
.single-wx_actuary .actuary .info,
.wp-block-post.wx_actuary .info {
    gap: 0.1em;
    margin-top: 1rem;
}
.single-wx_actuary .wp-block-post-title,
.wp-block-post.wx_actuary .wp-block-post-title {
    font-family: var(--wp--preset--font-family--host-grotesk);
    margin-bottom: 0;
}
.single-wx_actuary .wp-block-post-title  {
    font-size: var(--wp--preset--font-size--large);
}
.wp-block-post.wx_actuary .wp-block-post-title {
    font-size: var(--wp--preset--font-size--medium);
}
.single-wx_actuary .wp-block-post-title + .entry-content,
.wp-block-post.wx_actuary .wp-block-post-title + .entry-content {
    margin-top: 0;
}

.wp-block-post.wx_actuary .wp-block-quote {
    margin: 0;
    padding: 0;
    border: none;
}
.wp-block-post.wx_actuary .actuary__quote > p {
    padding: 1.5em;
    font-size: 1.125rem;
    font-style: italic;
    border-radius: var(--wp--custom--border-radius--medium);
    quotes: '\201c' '\201d';
    -webkit-hyphens: auto;
            hyphens: auto;
}
.wp-block-post.wx_actuary .wp-block-quote > p:first-child::before {
    content: open-quote;
    display: block;
    min-width: 1ch;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 200px;
    color: var(--wp--preset--color--dark-grey);
    line-height: 1;
    position: absolute;
    top: 0;
    opacity: 0.25;
    transform: translate(-10px, -10px);
}

@media (min-width: 751px) {
    .wp-block-post.wx_actuary .actuary__quote > p {
        position: absolute;
        inset: 0;
        background: var(--wp--preset--color--white);
        display: grid;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        overflow: auto;
    }
    .wp-block-post.wx_actuary:hover .actuary__quote > p:not(:empty) {
        opacity: 1;
        visibility: visible;
        z-index: 1;
        transition: 
            opacity 0.2s ease-in-out, 
            visibility 0.2s ease-in-out;
    }
    .wp-block-post.wx_actuary {
        background-color: var(--wp--preset--color--white);
        outline: 0px solid var(--wp--preset--color--white);
        border-radius: var(--wp--custom--border-radius--medium);
        transition: 
            scale 0.2s ease-in-out,
            outline 0.2s ease-in-out,
            border-color 0.2s ease-in-out,
            box-shadow 0.2s ease-in-out;
    }
    .wp-block-post.wx_actuary:has( .actuary__quote > p:not(:empty)):hover {
        outline-width: 10px;
        box-shadow: 0 12px 24px rgb(214 20 47 / 25%);
        scale: 1.01;
        border-color: var(--wp--preset--color--white);
    }
}
@media (max-width: 750px) {
    .wp-block-post.wx_actuary .actuary__quote > p:not(:empty) {
        position: relative;
        opacity: 1;
        visibility: visible;
        background-color: color-mix(in srgb, var(--wp--preset--color--secondary-2), white 90%);
        margin-top: 1.5em;
        font-size: var(--wp--preset--font-size--small);
        overflow: unset;
    }
    .wp-block-post.wx_actuary .wp-block-quote > p:first-child::before {
        opacity: 0.15;
        left: 0;
        mix-blend-mode: multiply;
    }
}




/* Video Card Container
   ---------------------------------------------------------------------------------------------------- */
.aa-video {
    position: relative;
    outline: 0px solid var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border-radius--medium);
    overflow: hidden;
    transition: 
        scale 0.2s ease-in-out,
        outline 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
}
.aa-video .wp-block-video {
    margin-top: 0;
}
.aa-video video {
    border-radius: var(--wp--custom--border-radius--medium);
}

.aa-video .play-button {
    border: none;
    background: none;
    position: absolute;
    top: calc(50% - 28px);
    left: calc(50% - 28px);
    z-index: 1;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
}
.aa-video .play-button svg {
    transition: transform 0.2s ease-in-out;
}
.aa-video .play-button svg > rect {
    transition: fill 0.2s ease-in-out;
}

.aa-video .video__title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2em 1em;
    background-image: linear-gradient(to top, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 90%) 50%, rgb(0 0 0 / 0%) 100%);
    color: var(--wp--preset--color--white);
    line-height: var(--wp--custom--line-height--small);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    transition: transform 0.5s cubic-bezier(0.6, -0.15, 0.7, 0.6);
}
.aa-video:where(:hover, :focus-within, .video--playing) {
    outline-width: 10px;
    box-shadow: 0 12px 32px rgb(214 20 47 / 25%);
    scale: 1.01;
}

.aa-video .play-button:where(:hover, :focus) svg {
    transform: scale(1.2);
}
.aa-video .play-button:where(:hover, :focus) svg > rect {
    fill: var(--wp--preset--color--secondary-2);
    fill-opacity: 1;
}

.aa-video.video--playing .video__title {
    transform: translateY(200%);
}
.aa-video.video--playing .play-button {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 559px) {
    .aa-video {
        max-width: 70vw;
    }
}

/* On devices without hover, show the overlay/play affordance */
@media (hover: none), (any-hover: none) {
    .aa-video .play-button { 
        opacity: 1;
        visibility: visible;
        pointer-events: auto; 
    }
}

html[data-js="no-js"] {
    .aa-video .video__title {
        position: static;
        background: none;
        color: var(--wp--preset--color--black);
        padding: 0.5em;
        margin: 0;
    }
    .aa-video .play-button {
        display: none;
    }
}