/* ------------------------------ */
/*
/*      Block: Group
/*
/* ------------------------------ */

/* No top-level block-gap */
.wp-site-blocks > *,
:has(+ .dvo-gapless),
.single-issue .entry-content {
    margin-block-start: 0;
}

/* Layout adjustments for single item templates */
@media only screen and (min-width: 1000px) {
    .seventy__single-wrapper > .wp-block-group {
        padding-right: var(--wp--style--root--padding-right);
        padding-left: var(--wp--style--root--padding-left);
    }
}

/* Group layout adjustments when "inset padding" goes away on small screens */
/* important to override editor-applied styles. */
@media only screen and (max-width: 999px) {
    .seventy__page-intro > .wp-block-group,
    .is-style-seventy__group-goddard-right > .wp-block-group {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* ------------------------------ */
/* Responsive Behavior for Grids
/* and other non-responsive WP blocks.
/* ------------------------------ */
/* Importants to override WP's very-specific selectors for grid layouts,
/* which are sadly not responsive.   */
@media only screen and (max-width: 1000px) {
    .is-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media only screen and (max-width: 700px) {
    .is-layout-grid {
        grid-template-columns: 1fr !important;
        & > * {
            grid-column: span 1 !important;
            grid-row: span 1 !important;
        }
    }
}
/* Stack "row" groups on smaller screens */
@media only screen and (max-width: 1000px) {
    .wp-block-group.is-nowrap.is-layout-flex {
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--wp--preset--spacing--small);

        /* unset anything justified right in editor */
        .is-content-justification-right {
            justify-content: flex-start;
            align-items: flex-start;
        }
    }
}


/* ------------------------------------------------ */
/* Style Variants for Groups:
/*      - Rounded
/*      - Rounded Small
/*      - Goddard Pattern Right
/*      - Goddard Pattern Left
/*      - Goddard Pattern all over + Gradient
/*      - Gradient Only
/*
/*      For each texture option there is a corresponding -rounded variant.
/* ------------------------------------------------ */

/* All Seventy group variants get large padding unless overwritten by specific variant. */
.wp-block-group[class*="seventy__group"] {
    padding-top: var(--wp--preset--spacing--five-x-large);
    padding-bottom: var(--wp--preset--spacing--five-x-large);
    padding-left: var(--wp--preset--spacing--four-x-large);
    padding-right: var(--wp--preset--spacing--four-x-large);
}

/* Rounded Groups */
.wp-block-group[class*="seventy__group-rounded"] {
    border-radius: var(--wp--preset--border-radius--extra-large);
}

/* Small Rounded */
.wp-block-group[class*="seventy__group-rounded-small"] {
    border-radius: var(--wp--preset--border-radius--medium);
    padding-top: var(--wp--preset--spacing--extra-large);
    padding-bottom: var(--wp--preset--spacing--extra-large);
    padding-left: var(--wp--preset--spacing--extra-large);
    padding-right: var(--wp--preset--spacing--extra-large);
}

/* Small Rounded with Stroke */
.wp-block-group[class*="seventy__group-rounded-small-stroke"] {
    border-width: var(--wp--custom--border-width--thin);
    border-style: solid;
}


.wp-block-group.is-style-seventy__group-rounded-small-stroke-neutral {
    border-color: var(--wp--preset--color--neutral-light);
}

.wp-block-group.is-style-seventy__group-rounded-small-stroke-rainbow {
    &:first-child,
    &:nth-child(7n) {
        border-color: var(--wp--preset--color--blue-lighter);
    }
    &:nth-child(2n) {
        border-color: var(--wp--preset--color--blue-default);
    }
    &:nth-child(3n) {
        border-color: var(--wp--preset--color--teal-default);
    }
    &:nth-child(4n) {
        border-color: var(--wp--preset--color--red-default);
    }
    &:nth-child(5n) {
        border-color: var(--wp--preset--color--yellow-default);
    }
    &:nth-child(6n) {
        border-color: var(--wp--preset--color--violet-default);
    }
}

/* Goddard Texture Groups */
/* All feature a repeating texture from the Declaration of Independence */
/* See https://www.nypl.org/blog/2016/06/29/mary-katherine-goddard-declaration */
.wp-block-group[class*="goddard"],
.seventy__home-hero {
    position: relative;
    /* Keep pattern inside row */
    overflow: hidden;

    /* Keep content above texture */
    & > * {
        position: relative;
        z-index: 2;
    }

    /* Leverage :before instead of :after to prevent conflicts with WP block editor. */
    &::before {
        display: block;
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-repeat: no-repeat;
    }
}

/* Cyan Goddard texture on right side */
.wp-block-group[class*="goddard-right"]::before {
    background-image: url(/app/themes/seventy/assets/images/texture-seventy-goddard-cyan.svg);
    background-position: top right;
    background-size: 30vw;
}

/* Blue Goddard texture on left side */
.wp-block-group[class*="goddard-left"]::before {
    background-image: url(/app/themes/seventy/assets/images/texture-seventy-goddard-blue.svg);
    background-position: center left;
    background-size: contain;
}

/* Light Gray Goddard texture on entire block, with animated gradient background */
.wp-block-group[class*="goddard-gradient"]::before {
    background-image: url(/app/themes/seventy/assets/images/texture-seventy-goddard-gray.svg);
    background-position: center center;
    background-size: cover;
}
.wp-block-group[class*="goddard-gradient"],
.seventy__home-hero {
    background: radial-gradient(100% 100% at var(--g4-1-x-position) var(--g4-1-y-position),
            #FE915E -100%,
            transparent),
        radial-gradient(100% 100% at var(--g4-2-x-position) var(--g4-2-y-position),
            #D09ED1 -100%,
            transparent),
        radial-gradient(100% 100% at var(--g4-3-x-position) var(--g4-3-y-position),
            #7D93FF -100%,
            transparent),
        radial-gradient(100% 100% at var(--g4-4-x-position) var(--g4-4-y-position),
            #8FCAFF -100%,
            transparent),
        #ffffff;

    animation-name: four-point-gradient;
    animation-iteration-count: infinite;
    animation-duration: 14s;
    transition-timing-function: ease-in-out;
}

/* Basic gradient has a blue animated bg and no Goddard texture */
.wp-block-group[class*="gradient-blue"] {
    background: radial-gradient(100% 100% at var(--g4-1-x-position) var(--g4-1-y-position),
            #85CFFE -100%,
            transparent),
        radial-gradient(100% 100% at var(--g4-2-x-position) var(--g4-2-y-position),
            #6BA2FF -100%,
            transparent),
        radial-gradient(100% 100% at var(--g4-3-x-position) var(--g4-3-y-position),
            #D1E2F3 -100%,
            transparent),
        radial-gradient(100% 100% at var(--g4-4-x-position) var(--g4-4-y-position),
            #9DBEFF -100%,
            transparent),
        #ffffff;

    animation-name: four-point-gradient;
    animation-iteration-count: infinite;
    animation-duration: 14s;
    transition-timing-function: ease-in-out;
}


/* ------------------------------------------------ */
/* CTA Patterns
/* ------------------------------------------------ */

/* Row CTA with Icon + Button */
.seventy__cta-row-icon-button.is-layout-grid {
    /* Override default WP inline from block */
    grid-template-columns: max-content minmax(10rem, var(--wp--style--global--content-size)) minmax(20%, auto) !important;
    gap: var(--wp--preset--spacing--extra-large);
}
/* On smaller screens, the button wraps to a second line,
/* but is vertically aligned with the headline/content.  */
@media only screen and (max-width: 781px) {
    .seventy__cta-row-icon-button {
        .wp-block-buttons {
            grid-row-start: 2;
            grid-column-start: 2;
            justify-content: flex-start;
        }
    }
}

/* Keep icon at top,
/* maintain consistent gap across all simple row CTAs */
.seventy__cta-row-icon-button.is-layout-grid,
.seventy__cta-row-simple-icon.is-layout-flex {
    gap: var(--wp--preset--spacing--extra-large);

    .wp-block-outermost-icon-block,
    .wp-block-icon {
        align-items: flex-start;
    }
}
.seventy__cta-row-simple-icon.is-layout-flex {
    align-items: flex-start;
}


/* ------------------------------------------------ */
/* Routing Patterns
/* ------------------------------------------------ */

/* Single routing item with icon on left (grid layout) */
/* Document routing button */
.seventy__routing-icon-left.is-layout-grid,
.seventy__routing-document-button.is-layout-grid {
    /* Scale columns to content */
    grid-template-columns: max-content auto;

    /* Keep icon at top */
    .wp-block-outermost-icon-block,
    .wp-block-icon {
        align-items: flex-start;
    }
}

/* Scale down icon on very small screens */
@media only screen and (max-width: 400px) {
    .seventy__routing-icon-left.is-layout-grid {
        gap: var(--wp--preset--spacing--large);
        .icon-container {
            width: 2.5rem !important;
        }
        figure {
            max-width: 2.5rem;
        }
    }
}

.seventy__routing-document-button .is-style-seventy__button-simple-new-window .wp-block-button__link {
    text-decoration: none;
    color: var(--wp--custom--color-semantic--text-secondary);
    background-image: url(/app/themes/seventy/assets/images/icon-arrow-square-out-neutral-darker.svg);
}

/* Tighter gap on Document Button + icon pair */
.seventy__routing-document-button.is-layout-grid {
    gap: var(--wp--preset--spacing--medium);
}

/* ------------------------------------------------ */
/* Icon Definition Pattern
/* Category: Text
/* ------------------------------------------------ */

.seventy__text-definition-icon.is-layout-grid {
    /* Scale columns to content */
    grid-template-columns: max-content auto;

    /* Keep icon at top */
    .wp-block-outermost-icon-block,
    .wp-block-icon {
        align-items: flex-start;
    }
}
/* Scale down icon on very small screens */
@media only screen and (max-width: 400px) {
    .seventy__text-definition-icon.is-layout-grid {
        gap: var(--wp--preset--spacing--large);

        .icon-container {
            width: 2.5rem !important;
        }

        figure {
            max-width: 2.5rem;
        }
    }
}


/* ------------------------------------------------ */
/* Page Headers moved to assets/blocks/seventy-page-header.css,
/* now that seventy/page-header is a block rather than a pattern.
/* The shared `simple-gradient-shift` keyframes below is still used
/* by that stylesheet, so it stays defined here.
/* ------------------------------------------------ */


/* ------------------------------------------------ */
/* Home Hero
/*      This pattern also shares styles with the
/*      Goddard gradient variants for groups,
/*      which are styled above.
/* ------------------------------------------------ */
.seventy__home-hero {
    &::before {
        background-image: url(/app/themes/seventy/assets/images/texture-seventy-solid-light-blue.svg);
        background-position: center center;
        background-size: cover;
    }

    .has-neutral-white-background-color {
        border-radius: var(--wp--preset--border-radius--extra-large);
        margin-top: var(--wp--preset--spacing--eight-x-large);
        margin-bottom: var(--wp--preset--spacing--eight-x-large);
    }
}
@media only screen and (min-width: 782px) {
    /* Before the stackpoint, flatten the right side corners of the text area that touch the image */
    .seventy__home-hero .has-neutral-white-background-color {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}
@media only screen and (max-width: 781px) {
    .seventy__home-hero .has-neutral-white-background-color {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* Control the position (apparent bleed) of the image at various screen sizes... */
@media screen and (min-width: 782px) {
    .seventy__home-hero .wp-block-column:last-child {
        position: relative;
        align-self: flex-start;
    }
    .seventy__home-hero figure {
        position: absolute;
        top: 0;
        bottom: 0;
    }
}
@media screen and (min-width: 782px) and (max-width: 1000px) {
    .seventy__home-hero figure {
        margin-right: -55vw;
    }
}
@media screen and (min-width: 1001px) and (max-width: 1200px) {
    .seventy__home-hero figure {
        margin-right: -30vw;
    }
}
@media screen and (min-width: 1201px) and (max-width: 1400px) {
    .seventy__home-hero figure {
        margin-right: -22vw;
    }
}
@media screen and (min-width: 1401px) and (max-width: 1600px) {
    .seventy__home-hero figure {
        margin-right: -18vw;
    }
}
@media screen and (min-width: 1601px) and (max-width: 1800px) {
    .seventy__home-hero figure {
        margin-right: -14vw;
    }
}
@media screen and (min-width: 1801px) and (max-width: 2000px) {
    .seventy__home-hero figure {
        margin-right: -10vw;
    }
}
@media screen and (min-width: 2001px) {
    .seventy__home-hero figure {
        margin-right: -8vw;
    }
}
@media only screen and (max-width: 781px) {
    .seventy__home-hero figure {
        margin-right: calc(var(--wp--style--root--padding-right) * -1);
        margin-left: calc(var(--wp--style--root--padding-right) * -1);
    }
}


/* ------------------------------------------------ */
/* Section Styling / Color Theming
/* Modify children when parent group gets a bg color
/* ------------------------------------------------ */

/* On-dark behavior: automatically swap to light text */
.has-blue-light-background-color,
.has-blue-default-background-color,
.has-blue-dark-background-color,
.has-blue-darker-background-color,
.has-blue-darkest-background-color,
.has-red-dark-background-color,
.has-red-darker-background-color,
.has-red-darkest-background-color,
.has-teal-dark-background-color,
.has-teal-darker-background-color,
.has-teal-darkest-background-color,
.has-violet-default-background-color,
.has-violet-dark-background-color,
.has-violet-darker-background-color,
.has-violet-darkest-background-color,
.has-yellow-darker-background-color,
.has-yellow-darkest-background-color,
.has-neutral-dark-background-color,
.has-neutral-darker-background-color,
.has-neutral-darkest-background-color {

    /* Basic text & headlines */
    color: var(--wp--preset--color--neutral-white);

    h1, h2, h3, h4, h5, h6 {
        color: var(--wp--preset--color--neutral-white);
    }

    a {
        color: var(--wp--preset--color--teal-lighter);
        &:hover,
        &:active,
        &:focus,
        &:focus-visible {
            color: var(--wp--preset--color--yellow-default);
        }
    }

    /* Buttons */
    .wp-block-button .wp-block-button__link {
        background-color: var(--wp--preset--color--neutral-white);
        border-color: var(--wp--preset--color--neutral-white);
        color: var(--wp--custom--color-semantic--button-background-default);
        &:hover,
        &:active,
        &:focus,
        &:focus-visible {
            background-color: transparent;
            border-color: var(--wp--preset--color--neutral-white);
            color: var(--wp--preset--color--neutral-white);
        }
    }
    .wp-block-button.is-style-outline .wp-block-button__link {
        background-color: transparent;
        border-color: var(--wp--preset--color--neutral-white);
        color: var(--wp--preset--color--neutral-white);
        &:hover,
        &:active,
        &:focus,
        &:focus-visible {
            background-color: var(--wp--preset--color--neutral-white);;
            border-color: var(--wp--preset--color--neutral-white);
            color: var(--wp--custom--color-semantic--button-background-default);
        }
    }
    .wp-block-button.is-style-seventy__button-simple .wp-block-button__link,
    .wp-block-button.is-style-seventy__button-simple-new-window .wp-block-button__link,
    .wp-block-button.is-style-seventy__button-simple-mail .wp-block-button__link {
        background-color: transparent;
        border-color: transparent;
        color: var(--wp--preset--color--neutral-white);
        &:hover,
        &:active,
        &:focus,
        &:focus-visible {
            color: var(--wp--preset--color--yellow-default);
        }
    }
    .wp-block-button.is-style-seventy__button-simple .wp-block-button__link {
        background-image: url(/app/themes/seventy/assets/images/icon-arrow-right-white.svg);
    }
    .wp-block-button.is-style-seventy__button-simple-new-window .wp-block-button__link {
        background-image: url(/app/themes/seventy/assets/images/icon-arrow-square-out-white.svg);
    }
    .wp-block-button.is-style-seventy__button-simple-mail .wp-block-button__link {
        background-image: url(/app/themes/seventy/assets/images/icon-envelope-simple-white.svg);
    }
}


/* ------------------------------------------------ */
/* CSS Animations
/* ------------------------------------------------ */

/* Simple Animation used in Page Headers */
@keyframes simple-gradient-shift {
    0% {
        background-position: 0 0, 0% 50%;
    }

    50% {
        background-position: 0 0, 100% 50%;
    }

    100% {
        background-position: 0 0, 0% 50%;
    }
}

/* Four-point Gradient Animation used in Group Backgrounds */
@property --g4-1-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 87.23379629629622%;
}

@property --g4-1-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 83.08008213552361%;
}

@property --g4-2-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 18.900462962962923%;
}

@property --g4-2-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 78.15195071868584%;
}

@property --g4-3-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 88.62268518518512%;
}

@property --g4-3-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 15.071868583162217%;
}

@property --g4-4-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 11.712962962962967%;
}

@property --g4-4-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 16.550308008213555%;
}

:root {
    --g4-1-x-position: 87.23379629629622%;
    --g4-1-y-position: 83.08008213552361%;
    --g4-2-x-position: 18.900462962962923%;
    --g4-2-y-position: 78.15195071868584%;
    --g4-3-x-position: 88.62268518518512%;
    --g4-3-y-position: 15.071868583162217%;
    --g4-4-x-position: 11.712962962962967%;
    --g4-4-y-position: 16.550308008213555%;
}

@keyframes four-point-gradient {
    25% {
        --g4-1-x-position: 88.11342592592592%;
        --g4-1-y-position: 17.74127310061603%;
        --g4-2-x-position: 86.99074074074056%;
        --g4-2-y-position: 80.29774127310063%;
        --g4-3-x-position: 11.157407407407389%;
        --g4-3-y-position: 18.80903490759754%;
        --g4-4-x-position: 15.543981481481403%;
        --g4-4-y-position: 78.31622176591377%;
    }

    50% {
        --g4-1-x-position: 13.888888888888834%;
        --g4-1-y-position: 18.891170431211524%;
        --g4-2-x-position: 85.20833333333329%;
        --g4-2-y-position: 17.874743326488705%;
        --g4-3-x-position: 15%;
        --g4-3-y-position: 85%;
        --g4-4-x-position: 100%;
        --g4-4-y-position: 100%;
    }

    75% {
        --g4-1-x-position: 17.071759259259224%;
        --g4-1-y-position: 75.56468172484597%;
        --g4-2-x-position: 13.136574074074%;
        --g4-2-y-position: 20.739219712525706%;
        --g4-3-x-position: 84.25925925925932%;
        --g4-3-y-position: 74.94866529774129%;
        --g4-4-x-position: 81.82870370370377%;
        --g4-4-y-position: 16.837782340862468%;
    }
}