/*
File Name: rwd.css
Package: American Cyanide
Author: David Hernandez
*/

/*Stop screens < 300px*/
@media only screen and (max-width: 300px) {
    html>* {
         display: none;
    }

    html {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100%;
    }

    html::after {
         display: block;
         content: 'The device width is too low, and unfortunately the site will not display properly; yes, size does matter. \00000a Thank you for your interest.';
         white-space: pre-wrap;
         margin: 0 10px;
    }
}

@media only screen and (width < 37.5625rem) {
    .top_posts__item {
        width: 80%;
    }
}

@media only screen and (width < 50rem) {
    .ac_logo_container {
        width: max(12.5rem, 50%);
        margin-inline: 0.5rem 0;
    }

    .ac_logo {
        display: none;
    }

    .ac_logo.stacked {
        display: block;
    }

    .main {
        grid-template-columns: auto;
    }

    .ac_main_content {
        margin-block: 0 2rem;
        margin-inline: 0;
    }

    .ac_podcast {
        display: grid;
        grid-template:
            'header header'
            'cover title'
            'cover more' / 1fr 3fr;
    }

    .ac_podcast__heading {
        grid-area: header;
    }

    .ac_podcast__cover {
        grid-area: cover;
        padding-block: 0.5rem 0;
        padding-inline: 0.5rem 0
    }

    .ac_podcast__title {
        grid-area: title;
    }

    .ac_podcast__more {
        grid-area: more;
        align-self: center;
        margin-block: 0
    }

}

@media only screen and (width < 62.5rem) {
    .hidden {
        display: none;
    }

    .ac_main_header {
        position: sticky;
        inset: 0;
        box-shadow: 0px 2px 4px var(--ac-header-menu-boxshadow-color, lch(20% 0 0 / .5));
        z-index: 999;

    }

    .ac_menu_button_container {
        display: block;
        margin-inline: 0 1.5rem;
    }

    .ac_menu_button {
        display: flex;
        flex-direction: column;
        gap: 8px;
        appearance: none;
        background-color: var(--ac-menu-button-bg-color, transparent);
        border: none;
    }

    .ac_menu_bar {
        width: 32px;
        height: 3px;
        background-color: var(--ac-menu-button-bars-color, var(--ac-color-primary-black));
        border-radius: 10rem;
    }

    [aria-expanded="true"] > .bar1 {
        translate: 0 11px;
    }

    [aria-expanded="true"] > .bar3 {
        translate: 0 -11px;
    }

    .ac_header_section__menu {
        flex-flow: column;
        gap: 1rem;
        align-items: end;
        width: min(16rem, 60%);
        padding-block: 1rem;
        box-shadow: -2px 2px 4px var(--ac-header-menu-boxshadow-color, lch(20% 0 0 / .5));
        position: absolute;
        inset: 100% 0 auto auto;
        scale: 1;
        transform-origin: top right;
    }

    .ac_header_section__menu[data-state="closed"] {
        scale: 0;
    }

    .ac_menu_container {
        width: 100%;
    }

    .ac_menu_list__main {
        flex-direction: column;
        margin-inline: 0;
    }

    .ac_menu_list__main .ac_nav_item {
        text-align: end;
        /* font-size: 1.5rem; */
    }

    .ac_search_container {
        margin-block: 0 1.5rem;
        margin-inline: auto;
    }

    .ac_login_container,
    .ac_menu_list__login {
        flex-direction: column;
    }

    .ac_login_container {
        align-items: end;
    }

    .ac_menu_list__login {
        margin-inline: 1rem;
    }

    .ac_theme_switch__label {
        display: block;
        font-weight: bold;
        font-variant: small-caps;
        color: var(--ac-header-menu-item-text-color, var(--ac-color-black-10));
        width: max-content;
        position: relative;
        left: -185%;
        top: -5%;
    }

}

@media only screen and (width < 100rem) {
    .main {
        padding-inline: 0.5rem;
    }
}

/*Animations handler*/
@media (prefers-reduced-motion: no-preference) {

    .skip_link {
        transition: scale 300ms ease-in-out;
    }

    .ac_theme_switch__slider,
    .ac_theme_switch__slider::before,
    .ac_theme_switch__slider::after {
        transition: translate 200ms ease-in-out;
    }

    .ac_header_section__menu {
        transition: scale 300ms ease-in-out;
    }

    .ac_menu_bar {
        transition: translate 250ms ease-in-out 500ms;
        animation-duration: 500ms;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-delay: 0ms;
    }

    [aria-expanded="true"] > .ac_menu_bar {
        transition: translate 250ms ease-in-out;
        animation-delay: 250ms;
    }

    .bar1,
    .bar3 {
        animation-name: close_1_3;
    }

    .bar2 {
        animation-name: close_2;
    }

    [aria-expanded="true"] > :is(.bar1, .bar3) {
        animation-name: open_1_3;
    }

    [aria-expanded="true"] > .bar2 {
        animation-name: open_2;
    }

    /** KEYFRAMES **/
    @keyframes open_1_3 {
        0% {
             scale: 1;
             rotate: 0deg;
        }

        25% {
             scale: 0 1;
             rotate: 0deg;
        }

        50% {
             scale: 0 1;
             rotate: 45deg;
        }

        100% {
             scale: 1;
             rotate: 45deg;
        }
   }

   @keyframes open_2 {
        0% {
             scale: 1;
             rotate: 0deg
        }

        25% {
             scale: 0 1;
             rotate: 0deg;
        }

        50% {
             scale: 0 1;
             rotate: -45deg;
        }

        100% {
             scale: 1;
             rotate: -45deg;
        }
   }

   @keyframes close_1_3 {
        0% {
             scale: 1;
             rotate: 45deg;
        }

        25% {
             scale: 0 1;
             rotate: 45deg;
        }

        50% {
             scale: 0 1;
             rotate: 0deg;
        }

        100% {
             scale: 1;
             rotate: 0deg;
        }
   }

   @keyframes close_2 {
        0% {
             scale: 1;
             rotate: -45deg;
        }

        25% {
             scale: 0 1;
             rotate: -45deg;
        }

        50% {
             scale: 0 1;
             rotate: 0deg;
        }

        100% {
             scale: 1;
             rotate: 0deg;
        }
   }
}