/*MOBILE-FIRST STYLING*/
html {
    font-size: 12px;
    scrollbar-color: var(--wp--preset--color--accent-2) var(--wp--preset--color--base);
}
a {
    text-decoration: none;
}
/*Smooth Transitions everywhere*/
a:hover {
    transition: ease-in-out 300ms;
    color: var(--wp--preset--color--accent-1);
}
/*No white blocks around clicked links*/
:where(.wp-site-blocks :focus) {
    outline-width: 0 !important;
    outline-style: none !important;
}

/* Header */
.wp-site-blocks > header {
    position: sticky;
    top: 0;
    z-index: 9999;
    height: 70px;
    width: 100%;
    max-width: 100%;
    border-bottom: 10px solid transparent;
    border-image: url(/wp-content/uploads/2026/05/tornpaper-edge.webp) 20 round;
    border-image-width: 1.5;
    filter: drop-shadow(0 20px 1em rgba(0, 0, 0, 0.5));
    margin-bottom: 1rem;
}
.eroding-header-main-row {
    height: 100%;
    justify-content: space-between;
    padding-left: 0.5rem;
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
}
.eroding-header-logo-row {
    gap: 1rem;
}
.eroding-header-title-stack {
    gap: 0;
    padding-bottom: 3px;
}
.eroding-header-logo-row .eroding-header-title-stack h1 {
    font-size: 2.2rem;
    font-weight: 400;
}
.eroding-header-logo-row .eroding-header-title-stack h1 a:hover {
    text-decoration: none;
}
.eroding-header-events-row {
    padding-right: 1rem;
}
.eroding-header-events-submit#submit-event {
    padding: calc(0.5rem + 3px) 1rem 0.5rem 1rem;
    margin: 0 1rem;
    background-color: var(--wp--preset--color--accent-2);
    color: var(--wp--preset--color--contrast);
    font-family: 'Crass';
    font-size: 1.6rem;
    border-radius: 10px;
}
.eroding-header-events-submit#submit-event a:hover {
    color: var(--wp--preset--color--contrast);
}
.eroding-header-user-stack{
  gap: 0;
}
.eroding-header-user-stack .eroding-header-user-icon {
    font-size: 2.4rem;
}
.eroding-header-user-stack .eroding-header-user-icon:hover {
  color: var(--wp--preset--color--accent-2);
  transition: ease-in-out 300ms;
}
.eroding-header-user-stack .eroding-header-user-item {
    display: none;
}

/* Move Header down when logged in */
.admin-bar header {
  top: 46px;
}

/* Ensure sticky footer always stays at the bottom */
main{
    min-height: calc(100vh - 144px);
}

/* Footer */
footer {
position: sticky;
bottom: 0px;
z-index: 9998;
height: 65px;
width: 100%;
max-width: 100%;
border-right: none;
filter: drop-shadow(0 -20px 1em rgba(0, 0, 0, 0.5));
}
.eroding-footer-nav-row {
flex-direction: row;
height: 65px;
width: 100%;
gap: 0;
border-top: 2px solid var(--wp--preset--color--accent-1);
background-color: var(--wp--preset--color--accent-3) !important;
}
.eroding-nav-item {
    display: flex;
    flex-basis: 20%;
    flex-shrink: 1;
    flex-grow: 0;
    font-family: 'White on Black';
    justify-content: center;
    height: 100%;
    align-items: center;
}
.eroding-nav-item#submit-event {
    padding: calc(0.5rem + 3px) 0 0.5rem 0;
    margin: 0 1rem;
    background-color: var(--wp--preset--color--accent-2);
    color: var(--wp--preset--color--contrast);
    font-family: 'Crass';
    font-size: 1.2rem;
    border-radius: 10px;
    text-align: center;
    height: 60%;
}
.eroding-nav-item#submit-event a:hover {
    color: var(--wp--preset--color--contrast);
}
.eroding-nav-item.more-menu:hover {
    color: var(--wp--preset--color--accent-1);
}
.desktop-only {
display: none;
}

/* Mobile Pop-up Menus */
@media only screen and (max-width: 767px){
.eroding-footer-nav-row .desktop-only {
visibility: hidden;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(  --wp--preset--color--accent-3);
height: 65px;
width: 18.18%;
/*box-shadow: 0 -4px 10px -3px var(--wp--preset--color--contrast);*/
filter: drop-shadow(0 0px 1em rgba(0, 0, 0, 0.5));
}
.eroding-footer-nav-row .eroding-nav-item:nth-of-type(6) {
    right: 0px;
    border-left: 2px solid var(--wp--preset--color--accent-1);
    border-right: 2px solid var(--wp--preset--color--accent-1);
}
.eroding-footer-nav-row .eroding-nav-item:nth-of-type(7) {
    right: 0px;
    border-left: 2px solid var(--wp--preset--color--accent-1);
    border-right: 2px solid var(--wp--preset--color--accent-1);
}
.eroding-footer-nav-row .eroding-nav-item:nth-of-type(8) {
    right: 0px;
    border-left: 2px solid var(--wp--preset--color--accent-1);
    border-right: 2px solid var(--wp--preset--color--accent-1);
    border-top: 2px solid var(--wp--preset--color--accent-1);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
/*Create the classes and transitions for the script*/
.first-menu-item {
    visibility: visible !important;
    transform: translateY(-64px);
    transition: 300ms ease-in-out;
}
.second-menu-item {
    visibility: visible !important;
    transform: translateY(-128px);
    transition: 300ms ease-in-out;
}
.third-menu-item {
    visibility: visible !important;
    transform: translateY(-192px);
    transition: 300ms ease-in-out;
}
}

/*TABLET STYLING*/
@media only screen and (min-width: 767px) {
    .mobile-only {
        display: none ;
    }
    .desktop-only {
        display: flex;
    }
} 

/*DESKTOP STYLING*/
@media only screen and (min-width: 1024px){
html {
    font-size: 14px;
}
/* Move Header and Footer Down when logged in */
@media only screen and (min-width: 782px) {
.admin-bar header {
  top: 32px;
  }
.admin-bar footer {
  top: 102px;
  }
}

/* Header */
.wp-site-blocks > header {
    margin-bottom: 2rem;
}
.eroding-header-events-row {
    padding-right: calc(200px + 3rem);
    position: absolute;
    left: 50%;
    transform: translateX(-25%);
}

/* Limit the main content to not go behind the footer menu */
main, .ajde_evcal_calendar .evotax_term_card, .ajde_evcal_calendar .evo_location_card, .evo_card_wrapper {
  margin-left: calc(200px + 2rem) !important;
  margin-right: calc(200px + 2rem) !important;
}

/* Footer */
footer {
position: fixed;
top: 70px;
bottom: unset;
z-index: 9998;
height: calc(100vh - 70px);
width: 200px;
}
.eroding-footer-nav-row {
padding-top: calc(10px + 1rem);
padding-left: 0;
padding-right: 0;
width: 200px;
height: 100%;
flex-direction: column;
justify-content: flex-start;
gap: 1rem;
border-right: 2px solid var(--wp--preset--color--accent-1);
border-top: none;
}
.eroding-nav-item {
flex-basis: 10%;
width: 100%;
font-size: 2rem;
align-items: center;
text-align: center;
}
}