:root {
    --content-padding: 4.0625rem;

    --length-stretch: stretch;
    --mz-stretch-fallback: -moz-available;
    --stretch: var(--length-stretch, var(--wk-stretch-fallback, -webkit-fill-available));

    --wrap-pretty: pretty;
    --text-wrap-pretty: var(--wrap-pretty, balance);
}

body {
    font-family: 'trade-gothic-next', Lato, Arial, sans-serif;
    color: #000000;
    margin: 0;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: 1.5rem;

    min-height: 100dvh;

    line-height: 1.5;


    display: grid;
    grid-template-rows: auto 1fr auto;
}

:is(body, :root):has(dialog[open]) {
    overflow: hidden;
}

h1 {
    font-size: clamp(4rem, 7vw, 8.125rem);
    font-weight: 800;
    line-height: 1.2;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    margin-block: 0 3.438rem;

    @media (width <= 576px) {
        margin-block: 0 1.5rem;
    }
}

h2 {
    font-size: 2.625rem;
    font-size: clamp(1.75rem, 2vw, 2.625rem);

    @media (width > 576px) {
        main & + p {
            height: 100px;
        }
    }
}

h3 {
    color: #000;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.075rem;
    margin-block: 1.2rem 0.5rem;
}

h4 {
    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
    margin-block: 0.5rem 0.25rem;
}

h5 {
    font-family: 'Times New Roman', serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    margin-bottom: auto;
}

p, li {
    font-family: 'Times New Roman', serif;
    line-height: 1.5;
    font-size: clamp(1.25rem, 2vw, 1.3rem);
}

header, main, dialog {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: start;
    gap: 3.125rem;
    margin-bottom: 9.375rem;
    max-width: 1920px;

    @media (width <= 576px) {
        display: block;
    }
}

header {
    padding-top: 8.125rem;

    & img {
        width: 100%;
        height: 100%;
        height: var(--stretch);
        max-height: 500px;
        object-fit: cover;

        @media (width <= 576px) {
            max-height: 250px;
        }
    }

    @media (width <= 576px) {
        margin-bottom: 4.375rem;
        padding-top: 4rem;
    }
}

main {
    margin-bottom: 8.3125rem;

    @media (width <= 576px) {
        margin-bottom: 4.375rem;
    }
}

footer {
    margin-inline: calc(calc(-50vw + 50%));
    margin-bottom: -1rem;
}

img {
    border-radius: 1.25rem;
}

ul {
    padding-left: 1rem;
    font-family: 'Times New Roman', serif;

    & strong {
        font-family: 'trade-gothic-next', Lato, Arial, sans-serif;
        font-size: clamp(1.25rem, 2vw, 1.33rem);
    }
}

a {
    color: #B20000;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    font-family: 'trade-gothic-next', Lato, Arial, sans-serif;
}

.header-content {
    max-width: 44.625rem;
}

.content {
    width: 45vw;
    max-width: 810px;
    margin-inline: auto;

    &.column-right {
        padding-right: 0;
    }

    &.column-left {
        padding-left: 0;
    }

    @media (width < 1200px) {
        &:has(.options) {
            justify-content: start;
        }
    }

    @media (width <= 992px) {
        max-width: unset;
        width: 43vw;
    } 

    @media (width <= 768px) {
        padding: 0;
        margin-inline: auto;
        width: 100%;
    }
}

.options {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, fit-content(100%));
    row-gap: 1.875rem;
    column-gap: 30px;
    align-self: stretch;
    list-style: none;
    padding: 0;
    margin: 0;

    @media (width < 1200px) {
        display: inline flex;
        flex-direction: column;
        
        & .card {
            width: 100%;
        }
    }

    @media (width <= 576px) {
        display: block;
    }
}

.card {
    width: min(100%, 24.39063rem);
    height: 15.65256rem;
    position: relative;
    isolation: isolate;

    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;

    color: #FFF;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05625rem;
    border-radius: 1.25rem;
    border: none;
    cursor: pointer;
    view-transition-class: card-thumbnail;
    padding-inline: 0;

    &.system {
        --bg-image: url('https://as.sdsu.edu/images/advocacykit/tile-system.avif');
        view-transition-name: transition-system;
    }
    &.sdsu {
        --bg-image: url('https://as.sdsu.edu/images/advocacykit/tile-sdsu.avif');
        view-transition-name: transition-sdsu;
    }
    &.city {
        --bg-image: url('https://as.sdsu.edu/images/advocacykit/tile-city.avif');
        view-transition-name: transition-city;
        background-position: top;
    }
    &.state {
        --bg-image: url('https://as.sdsu.edu/images/advocacykit/tile-state.avif');
        view-transition-name: transition-state;
    }
    &.encounters {
        --bg-image: url('https://as.sdsu.edu/images/advocacykit/tile-encounters.avif');
        view-transition-name: transition-encounters;
    }
    &.expression {
        --bg-image: url('https://as.sdsu.edu/images/advocacykit/tile-expression.avif');
        view-transition-name: transition-expression;
    }
    &.voting {
        --bg-image: url('https://as.sdsu.edu/images/advocacykit/tile-voting.avif');
        view-transition-name: transition-voting;
        background-position: top;
    }

    & .card-icon {
        position: absolute;
        top: 0;
        left: 0;
        translate: 0.856rem 0.97rem;
        width: 63.84px;
        aspect-ratio: 1 / 1;
        fill: #FFFFFF;
        pointer-events: none;
        z-index: 1;
    }

    & .card-title {
        display: block;
        align-content: end;
        text-wrap: var(--text-wrap-pretty);
        pointer-events: none;
        z-index: 2;
        position: absolute;
        /* bottom: 0;
        left: 50%;
        width: 95%;
        translate: -50%; */
        background-color: #4d0000;
        padding-block: 10px;
        border-radius: 0 0 20px 20px;
        /* filter: drop-shadow(0px -20px 10px #4d0000); */
        color: white;
        inset: auto 0 0 0;
    }

    main & {
        overflow: clip;
    }

    @media (width <= 576px) {
        width: 100%;
        /* margin-bottom: 1.5rem; */
    }
}

dialog .card {
    width: 100%;
    /* height: 297.94px; */
    height: var(--stretch);
    background-image: var(--bg-image);
    /* margin-bottom: 2.5rem; */
    pointer-events: none;
    cursor: default;


    & .card-icon {
        position: absolute;
        top: unset;
        bottom: 0;
        left: 50%;
        translate: -50% 50%;
        width: 100.63px;
        aspect-ratio: 1 / 1;
        fill: #000000;
        background-color: white;
        border-radius: 100px;
        padding: 7px;
    }

    @media (width <= 576px) {
        max-height: 200px;
    }
}

dialog details {
    padding-block: 1.69rem;
    border-bottom: solid black 1px;
    

    --marker-spacing: 3.75rem;

    /* Active state maintained through JS */
    &[open] summary.active {
        scroll-snap-align: start;
    }

    &::details-content {
        content-visibility: visible;
        display: block;
    }

    .details-content
    {

        height: 0;
        opacity: 0;
        padding-top: 0;

        overflow: hidden;
        padding-left: var(--marker-spacing);

        interactivity: inert;

        transition-property: 
            height,
            opacity,
            padding-top;
        transition-duration: 
            var(--transition-speed), 
            calc(var(--transition-speed) / 2), 
            100ms;
        transition-timing-function: linear, ease-out;
        transition-delay: 0.1ms, 0.1ms, var(--transition-speed);
    }

    & .details-content :is(p, h3):first-child {
        margin-top: 0;
    }

    &[open] .details-content
    {
        height: var(--content-height);
        opacity: 1;
        padding-top: 1rem;
        transition-delay: 0.1ms;

        interactivity: auto;
    }

    details :where(p) {
        font-size: 18px;
        font-family: 'Times New Roman', serif;
        margin-top: 0.25rem;
    }

    @media (width <= 576px) {
        &::details-content {
            padding-left: 0;
        }
    }
}

dialog details summary {
    display: flex;
    align-items: start;
    color: #B20000;
    font-size: clamp(1.5rem, 2.5vw, 1.8125rem);
    font-style: normal;
    font-weight: 300;
    line-height: 1.34;
    letter-spacing: 0.09063rem;
    cursor: pointer;
    padding-left: var(--marker-spacing);
    position: relative;
    text-wrap: var(--text-wrap-pretty);

    & span {
        pointer-events: none;
    }

    &::marker {
        content: '';
        display: none;
        font-size: 0;
    }

    &::before {
        content: '';
        display: inline-block;
        width: 1.9rem;
        aspect-ratio: 1 / 1;
        background-color: currentColor;
        translate: 0 7px;
        mask: url(https://as.sdsu.edu/images/advocacykit/icon-chevron.svg) no-repeat center / contain;
        position: absolute;
        top: 0;
        left: 0;
        transition: rotate 300ms ease-out;
    }

    details[open] &::before {
        rotate: 180deg;
    }
}

@container dialog-container (width > 992px) {
    .content {
        width: 47cqw;
        margin-inline: auto;
    }
}

@container dialog-container (width <= 992px) {
    .content {
        width: 100%;
    }
}


.text-red {
    color: #B20000;
}

.bg-red {
    background-color: #B20000;
    height: 8rem;
    width: 100%;
}

#logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.125rem;
    padding: 2.5rem 0;

    & a:has(img) {
        display: contents;
    }

    & img {
        width: min(var(--logo-width, 20%), 251px);
        max-width: var(--logo-max-width, 100%);
        border-radius: 0;
    }

    & #as { 
        --logo-width: 25%;
    }
    & #rtv { 
        --logo-width: 15%; 
        --logo-max-width: 170px;
    }
    & #yvm { 
        --logo-width: 20%; 
        --logo-max-width: 195px;
    }
}

.closer {
    text-align: right;
    height: min-content;
    position: sticky;
    top: 0;
    z-index: 999;
    padding-block: 2rem 4rem;
    background-image: linear-gradient(to bottom, white 80%, transparent);
    width: var(--stretch);
    grid-column: 1 / -1;;

    & button {
        background: black;
        border: none;
        width: clamp(3.125rem, 4vw, 5.125rem);
        aspect-ratio: 1 / 1;
        border-radius: 100px;
        cursor: pointer;
        transition: scale 100ms ease-out;

        display: inline grid;
        place-content: center;

        padding: clamp(0.5rem, 1vw, 1rem);
    }

    & button svg {
        width: 100%;
        aspect-ratio: 1 / 1;
        fill: white;
        pointer-events: none;
        interactivity: inert;
    }

    & button:hover {
        scale: 1.1;
    }

    @media (width <= 576px) {
        padding-bottom: 2rem;
    }
}

.flex-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Need to disable the first state to transition to the second */
html:has(dialog[open]) main .card {
    view-transition-name: none;
    display: none;
}

::view-transition-group(.card-thumbnail) {
    overflow: hidden;
    z-index: 100;
}

::view-transition-old(.card-thumbnail),
::view-transition-new(.card-thumbnail) {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 99;
}

#skipnav {
    position: absolute;
    top: 0;
    left: 0;
    padding-block: 1rem;
    padding-left: var(--content-padding);
    display: flex;
    column-gap: 2rem;

    & .access {
        position: absolute;
        top: -9999px;
    }

    & .access:is(:focus, :focus-visible) {
        position: static;
    }
}

.dialog-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: white;
    view-transition-name: var(--transition-name, dialog-background);
    view-transition-class: background-dialog-transition;
    z-index: -2;

    .system & {
        --transition-name: dialog-background-system;
    }
    .sdsu  & {
        --transition-name: dialog-background-sdsu;
    }
    .city  & {
        --transition-name: dialog-background-city;
    }
    .state  & {
        --transition-name: dialog-background-state;
    }
    .encounters & {
        --transition-name: dialog-background-encounters;
    }
    .expression & {
        --transition-name: dialog-background-expression;
    }
    .voting & {
        --transition-name: dialog-background-voting;
    }
}


dialog {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
    inset: 1rem;
    width: auto;
    height: auto;
    padding: 0 4rem;
    border-radius: 1.25rem;
    border: none;
    justify-content: space-between;
    container: dialog-container / inline-size;
    view-transition-name: var(--transition-name, dialog-background);
    view-transition-class: dialog-background-transition;
    scroll-padding-top: 180px;
    row-gap: 0;
    transition: padding-bottom 600ms ease-out 600ms;

    /* These properties help keep a selected dropdown in view */
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    scroll-behavior: smooth;

    &:not([open]) {
        display: none;
    }

    & h2 {
        margin: 0;
    }

    & article {
        display: contents;
    }

    & header.content {
        padding: 0;
        margin-bottom: 4.375rem;
        grid-column: 1 / -1;
        max-width: unset;
        width: var(--stretch);
        height: clamp(200px, 25vw, 500px);
    }

    & .column-left {
        grid-column: 1 / 2;
        margin-bottom: 3rem;
    }

    & .column-right {
        grid-column: 2 / 3;
    }

    .column-left img {
        width: 100%;
    }

    &::after {
        content: '';
        position: sticky;
        bottom: 0px;
        background-image: linear-gradient(to top, white 80%, transparent);
        width: 100%;
        height: 5rem;
        right: 0;
        grid-column: 2;
    }

    &::backdrop {
        background-color: rgb(0 0 0 / 0.75);
    }

    & .content:has(h2) > div {
        position: sticky;
        top: 160px;
    }

    & :where(.content:has(h2), .content details) {
        opacity: 1;
        transition: opacity 0.8s ease-out 0.3s;

        @starting-style {
            opacity: 0;
        }
    }

    & h2 {
        font-size: 3.75rem;
        font-size: clamp(2.382rem, 3vw, 3.75rem);
        font-weight: 800;
        letter-spacing: 0.1875rem;
        text-wrap: var(--text-wrap-pretty);

        &:has(+ p) {
            margin-bottom: 0;
        }

        @media (width <= 576px) {
            margin-top: 0;
        }
    }

    @media (width < 1200px) {
        padding-inline: 2rem;
    }

    @media (width <= 768px) {
        padding-inline: 1rem;
        grid-template-columns: 1fr;

        & :is(.column-left, .column-right){
            grid-column: 1 / -1;
        }

        &::after {
            grid-column: 1;
        }
    }

    &:has(.system) {
        --transition-name: dialog-background-system;
    }
    &:has(.sdsu) {
        --transition-name: dialog-background-sdsu;
    }
    &:has(.city) {
        --transition-name: dialog-background-city;
    }
    &:has(.state) {
        --transition-name: dialog-background-state;
    }
    &:has(.encounters) {
        --transition-name: dialog-background-encounters;
    }
    &:has(.expression) {
        --transition-name: dialog-background-expression;
    }
    &:has(.voting) {
        --transition-name: dialog-background-voting;
    }
}

:root:has(dialog[open]) .dialog-bg {
    view-transition-name: none;
    animation: reveal 0.1s ease-out forwards;
}

.tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-size: cover;
    background-position: center;
    z-index: -1;

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* object-position: top; */
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        /* background-image: linear-gradient(180deg, rgb(178 0 0 / 0.25) 50%, rgb(77 0 0 / .95) 75%); */
        background-image: linear-gradient(180deg, rgb(178 0 0 / 0.25) 50%, rgb(77 0 0 / 1) 70%);
        border-radius: inherit;
    }
}

ol.step-list, ul.tip-list {
    counter-set: step tips;
    list-style-position: inside;
    padding-left: 0;

    & > li::marker {
        font-weight: 700;
        font-size: 1.15rem;
        font-family: 'trade-gothic-next', Lato, Arial, sans-serif;
    }

    & li > ul {
        margin-bottom: 1.2rem;
    }

    & li > strong:first-child {
        font-size: 1.15rem;
        color: black !important;
    }
}

ol.step-list {
    & > li::marker { content: 'Step ' counter(step) ': '; }
    & > li { counter-increment: step; }
}

ul.tip-list {
    & > li::marker { content: 'Tip ' counter(tips) ': '; }
    & > li { counter-increment: tips; }
}

ol.script-list {
    & > li > strong:first-child { font-size: 1.15rem; }
    & li::marker {
        font-weight: 700;
        color: #B20000;
        font-size: 1.15rem;
    }
}

.list-style-disc {
    list-style: disc;
}

.mt-0 {
    margin-top: 0;
}

.take-action {
    margin-top: 1rem;
}

@media (width <= 576px) {
    section[aria-labelledby="rights"] {
        margin-top: 4.375rem;
    }
}






dialog {

    .column-left { position: relative;}

    .column-left img {
        opacity: 0;
        translate: 0 -100%;
        position: absolute;
        transition-property: 
            opacity,
            translate;
        transition-duration: 0.6s;
        transition-timing-function: ease-out;
    }

    &:has(details[open]) .column-left img {
        opacity: 1;
        translate: 0 0;
        position: static;
    }
}