/*
Theme Name: MAG 2026 Theme
Theme URI: https://mag.rochester.edu
Author: Keiran Pillman / MAG Marketing & Engagement
Description: The MAG 2026 WordPress Theme is a full-site editing theme based off the 2025 MAG rebranding by Topos Graphics.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.0
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mag-2026
*/

/* Focus styles */
:where(.wp-site-blocks *:focus) {
  outline-width: 2px;
  outline-style: solid;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1{
  text-wrap: balance;
}
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.wp-block-column{
  &.min-width-40{
    min-width: 40%;
  }
}

@view-transition {
  navigation: auto;
}

@media not ( prefers-reduced-motion ) {
  a{
    transition: background-color var(--wp--custom--transition-length) linear;
  }
  .wp-block-button a {
    transition: var(--wp--custom--transition--button-block);
  }
  nav.main-menu button::after{
    transition: var(--wp--custom--transition--rotation);
  }
  nav.main-menu .sub-menu{
    transition: height 1s linear;
  }
}

@media print{
  .wp-block-button,
  footer{
    display: none !important;
  }
  .wp-block-image img{
    max-width:300px !important;
  }
}

/* 
 * All Menu Styles
 */
body{
  .wp-site-blocks{
    ul[role=menu]{
      padding:0;
      margin:0;
      display: flex;
      gap:var(--wp--preset--spacing--50);
      li{
        list-style: none;
      }
      a{
        display: block;
        text-decoration: none;
        &:hover{
          background-color: transparent;
          text-decoration: underline;
        }
      }
    }
  }
}

/*
 * Header Styles
*/
#site-header{
  nav.main-menu{
    > ul[role=menu] > li > a,
    > ul[role=menu] > li > button{
      padding:0;
      margin:0;
      background: transparent;
      font-family: var(--wp--preset--font-family--body);
      color: var(--wp--preset--color--black);
      font-weight: 700;
    }
    ul[role=menu] button{
      cursor: pointer;
      padding:0;
      margin:0;
      border:0;
      display: flex;
      flex-direction: row;
      align-items:center;
    }
    .sub-menu{
      font-weight: 400;
      color: var(--wp--preset--color--black);
      row-gap:var(--wp--preset--spacing--20);
      display: none;
      height:0px;
      &:not(.hidden){
        height:auto;
        display: block;
        /* flex-direction: column; */
      }
      a{
        border-bottom: var(--wp--custom--border--width) solid transparent;
        text-decoration: none;
        display: inline-block;
        color: var(--wp--preset--color--black);
        &:hover{
          background-color: transparent;
          color: inherit;
          border-color: var(--wp--preset--color--quantum-cobalt);
        }
      }
    }
  }
  nav.eyebrow-links{
    font-weight: 700;
    a{
      border-bottom: var(--wp--custom--border--width) solid transparent;
      display: inline-block;
      &:hover{
        border-color: var(--wp--preset--color--quantum-cobalt);
        text-decoration: none;
      }
      &:focus,
      &:focus-visible{
        border-color: var(--wp--preset--color--quantum-cobalt);
        outline: none;
      }
    }
  }
  .logo{
    img{
      width: clamp( 170px, 37vw, 200px );
    }
  }
  .menu-button{
    padding:0;
    margin:0;
    background-color: transparent;
    border:0;
    cursor: pointer;
    height: clamp( 40px, 10vw, 50px );
    width: clamp( 40px, 10vw, 50px );
    background-repeat: no-repeat;
    background-image: url( './assets/images/menu-open.svg' );
    &.menu-open{
      background-image: url( './assets/images/menu-close.svg' );
    }
  }
  form.wp-block-search{
    .wp-block-search__input{
      border:none;
      border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--black);
      &::placeholder{
        color: var(--wp--preset--color--quantum-cobalt);
      }
    }
    button.wp-block-search__button{
      padding: 0.5em .75em;
      border: 2px solid var(--wp--preset--color--quantum-cobalt);
      border-radius: var(--wp--custom--border-radius);
      &:hover{
        background-color: var(--wp--preset--color--white) !important;
        color: var(--wp--preset--color--quantum-cobalt);
      }
      &:focus{
        border: 2px solid var(--wp--preset--color--black);
      }
    }
  }
  
}

/* Header Media Queries */
@media (min-width:782px) and (max-width:899px){
  #site-header{
    & > .wp-block-columns{
      flex-wrap: wrap !important;
      & > .wp-block-column {
        flex-basis: 100% !important;
      }
    }
  }
}
@media (max-width:330px) {
  #site-header{
    #mobile-tools{
      .wp-block-buttons{
        display: none;
      }
    }
  }
}
@media (max-width: 899px){
  /* mobile menu styles */
  body:not(.javascript-movement-loaded){
    #site-header{
      #menu-content{
        #menu-inner{
          flex-direction: column-reverse;
        }
      }
    }
  }
  #site-header{
    & > .wp-block-group {
      border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--black);
      > .wp-block-columns{
        flex-direction: column;
      }
    }
    &:has( .menu-button.menu-open ){
      position: relative;
      padding-bottom:var(--wp--preset--spacing--40) !important;
      & > .wp-block-group{
        border-color: transparent;
      }
      #menu-content{
        position: absolute;
        top:94%;
        right:0;
        left:0;
        z-index:3;
        background-color: var(--wp--preset--color--white);
        padding:0;
        border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--quantum-cobalt);
        border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--quantum-cobalt);
        #menu-inner{
          padding-top:var(--wp--preset--spacing--30);
          padding-left:var(--wp--custom--spacing--padding);
          padding-right:var(--wp--custom--spacing--padding);
          padding-bottom:var(--wp--preset--spacing--60);
          position: relative;
          &::before{
            content:"";
            background-color: var(--wp--preset--color--quantum-cobalt);
            height:var(--wp--custom--spacing--padding);
            width: var(--wp--custom--spacing--padding);
            display: block;
            position: absolute;
            bottom:-1px;
            right:0;
            z-index:4;
            clip-path:polygon( 0 100%, 100% 100%, 100% 0 );
          }
        }
      }
    }
    .logo{
      img{
        width: clamp( 100px, 28vw, 175px );
      }
    }
    #menu-content{
      &.mobile-hidden{
        display: none;
      }
      & > *{
        width: 100%;
      }
      #menu-inner{
        nav.eyebrow-links{
          ul[role=menu]{
            flex-direction: column;
            gap:0;
            font-size: var(--wp--preset--font-size--normal) !important;
            li:has( a[href*="tickets"] ){
              display: none;
            }
          }
        }
        nav.main-menu{
          width: 100%;
          margin-top:var(--wp--preset--spacing--30);
          > ul[role=menu]{
            flex-direction: column;
            gap:var(--wp--preset--spacing--30);
          }
          > ul[role=menu] > li > a,
          > ul[role=menu] > li > button {
            font-size: var(--wp--preset--font-size--medium-large);
          }
          > ul[role=menu] > li{
            padding:0 0 var(--wp--preset--spacing--30) 0;
            border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--black);
          }
          ul[role=menu]{
            button{
              width: 100%;
              justify-content:space-between;
              &::after{
                content: url( './assets/images/menu-mobile-open.svg' );
                width: 1rem;
              }
              &[aria-expanded=true]::after{
                content: url( './assets/images/menu-mobile-close.svg' );
              }
            }
            .sub-menu{
              font-size: var(--wp--preset--font-size--normal);
              row-gap:0;
              margin-top:var(--wp--preset--spacing--20);
              a{
                padding-top:var(--wp--preset--spacing--20);

              }
            }
          }
        }
        #top-bar, #bottom-bar{
          flex-direction: column;
          align-items: stretch;
        }
      }
      .wp-block-mag-extension-search.desktop-search{
        display: none;
      }
      .wp-block-mag-extension-search.mobile-search{
        max-width:calc(100vw - 48px);
        form{
          width: 100%;
        }
      }
    }
  }
}
@media (min-width: 900px){
  /* tablet and up menu styles */
  #site-header{
    position: relative;
    .wp-block-column:has(#mobile-tools){
      flex-basis:clamp(175px, 15vw, 300px);
      max-width:clamp(175px, 15vw, 300px);
    }
    #mobile-tools{
      display: none;
    }
    #menu-content{
      .wp-block-mag-extension-search.mobile-search{
        display: none;
      }
      #bottom-bar{
        align-items: end;
        position: unset;
      }
    }
    nav.main-menu{
      position: unset;
      > ul[role=menu] {
        flex-wrap: wrap;
        row-gap:var(--wp-preset--spacing--20);
        position: unset;
      }
      > ul[role=menu] > li > a,
      > ul[role=menu] > li > button {
        font-size: var(--wp--preset--font-size--medium-large);
      }
      ul[role=menu]{
        .menu-item-has-children:has( .sub-menu:not(.hidden) ){
          button{
            border-color: var(--wp--preset--color--black);
          }
        }
        button{
          gap:.5rem;
          border-bottom: var(--wp--custom--border--width) solid transparent;
          &::after{
            content: url( './assets/images/arrow-down-cobalt.svg' );
            width: 1rem;
          }
          &[aria-expanded=true]::after{
            transform: rotate(180deg);
          }
          &:hover,
          &:focus,
          &:focus-visible{
            border-color: var(--wp--preset--color--quantum-cobalt);
            outline: none;
          }
        }
        li:has( .sub-menu ){
          position: unset;
        }
        .sub-menu{
          background: var(--wp--preset--color--white);
          color:var(--wp--preset--color--black);
          padding: var(--wp--preset--spacing--60) var(--wp--custom--spacing--padding) var(--wp--preset--spacing--60);
          position: absolute;
          top:100%;
          border-top:var(--wp--custom--border--width) solid var(--wp--preset--color--quantum-cobalt);
          border-bottom:var(--wp--custom--border--width) solid var(--wp--preset--color--quantum-cobalt);
          left:0;
          right:0;
          z-index: 100;
          column-count:3;
          &:not(.hidden){
            &::before{
              content:"";
              background-color: var(--wp--preset--color--quantum-cobalt);
              height:var(--wp--custom--spacing--padding);
              width: var(--wp--custom--spacing--padding);
              display: block;
              position: absolute;
              bottom:0;
              right:0;
              z-index:4;
              clip-path:polygon( 0 100%, 100% 100%, 100% 0 );
            }
          }
          li{
            margin-bottom: var(--wp--preset--spacing--30);
            a{
              border-bottom: var(--wp--custom--border--width) solid transparent;
              display: inline;
              &:hover,
              &:focus,
              &:focus-visible{
                border-color: var(--wp--preset--color--quantum-cobalt);
                outline: none;
              }
            }
          }
        }
      }
    }
  }
}

/* 
 * Footer styles
*/
footer{
  img{
    max-width:220px;
  }
  a:hover{
    background-color: transparent;
  }
  nav#social{
    a:hover{
      outline: 2px solid black;
    }
  }
  #footer-column-3{
    min-width:300px;
  }
}
/* Footer Menu Styles */
#footer {
  #footer-column-1{
    &> .wp-block-columns{
      row-gap:var(--wp--preset--spacing--40);
    }
  }
  nav{
    ul[role=menu]{
      display: block;
      font-size: var(--wp--preset--font-size--small);
      column-count: 2;
      width: fit-content;
    }
  }
  #social{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
  }
}
@media (max-width:600px) {
  #footer-column-1{
    &> .wp-block-columns{
      column-gap:var(--wp--preset--spacing--50);
    }
  }
  #footer{
    .footer-logos{
      flex-wrap: wrap;
      row-gap:var(--wp--preset--spacing--30);
    }
  }
}
@media (min-width: 782px) {
  #footer{
    #footer-column-1{
      &> .wp-block-columns{
        flex-direction: column;
      }
    }
  }
}
@media (min-width:782px) and (max-width:1039px){
  #footer{
    & > .wp-block-columns{
      display: grid;
      grid-template-columns: 220px 40% 1fr;
      #footer-column-1{
        grid-column: 1;
        grid-row: 2;
      }
      #footer-column-2{
        grid-column: 2;
        grid-row: 2;
      }
      #footer-column-3{
        grid-column: 1/3;
        grid-row: 1;
      }

    }
  }
}