/* layout */
/* layout declares and defines props for component use and sets defaults, as 
   well as managing state checks (eg mobile/desktop lightmode/darkmode) */
@layer layout {

  
  
  
  

  /* font settings */
  body {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 1rem;
    padding-inline: 0.5rem;
  }




  
  

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  /* direct children of body */
  body > * {
    max-width: var(--page-max-width, 100%);
    margin-inline: auto;
  }




/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* site header */
.site-header {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  /* position context for sire-navigation menu */
  position: relative;
  border-bottom: var(--hr-width, 2px) solid var(--accent-color);
  /* ensure header is above all other elements */
  z-index: 10;
  
  margin-top: 0.5rem;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* .site-header > .header-logo */
.header-logo {
  place-self: center;
  width: 13rem;
  flex: 0 1 auto;
  /* align to bottom with primary nav */
  /* place-self: flex-end; */

  margin-bottom: 0.5rem;
}

@media (min-width: 50rem) {
  .header-logo {
    width: var(--site-header-logo-width, 20rem);
  }
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* .site-navigation > button#mobile-menu */
#mobile-menu {
  display: grid;
  place-items: center;
  margin: 0.25rem;
  padding: 0.5rem;
  line-height: 1;
  background-color: var(--button-light-bg);
  color: var(--button-light-color);
  border: var(--hr-width, 2px) solid transparent;
  border-radius: 0.5rem;
  aspect-ratio: 1;
  font-size: 2rem;
  line-height: 0;
  /* enforce minimum size for touch target */
  min-width: 44px;
  min-height: 44px;
}
/* hide button for desktop */
@media (min-width: 50rem) {
  #mobile-menu {
    display: none;
  }
}
#mobile-menu:is(:hover, :focus-visible) {
  background-color: var(--button-light-focus-bg);
  color: var(--button-light-focus-color);
  /* border-color: var(--button-dark-bg); */
}
#mobile-menu:active {
  background-color: var(--button-light-active-bg);
  color: var(--button-light-active-color);
}
/* hide open/close button text if menu is already opened/closed */
#mobile-menu:has( + .site-navigation[aria-expanded]) .open-menu,
#mobile-menu:has( + .site-navigation:not([aria-expanded])) .close-menu,
#mobile-menu:has( + .site-navigation[aria-expanded="false"]) .close-menu {
  display: none;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* .site-header > site-navigation */    
.site-navigation {
  flex: 1 0 auto;
  display: grid;
  gap: 0.5rem;
  position: absolute;
  top: calc(100% + var(--hr-width));
  right: 0;
  /* min-width: 30ch; */
  width: fit-content;
  max-width: 90vw;

  background-color: var(--text-bg);
  box-shadow: 0 0.25em 1em 0 rgba(0,0,0,0.5);
  border-radius: 0 0 0.5rem 0.5rem;

  align-content: space-between;
}
.site-navigation:not([aria-expanded]) {
  /* display: none; */
  visibility: hidden;
  height: 0;
  overflow-y: clip;
}
@media (min-width: 50rem) {
  .site-navigation[aria-expanded],
  .site-navigation:not([aria-expanded]) {
    /* display: grid; */
    visibility: visible;
    position: static;
    max-width: 100%;
    width: auto;
    height: auto;
    overflow-y: visible;
    /* margin-top: 0.5rem; */

    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
  } 
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* .site-navigation > nav */
.site-navigation nav :is(ul,ol) {
  display: grid;
  list-style: none;
}
@media (min-width: 50rem) {
  .site-navigation nav :is(ul,ol) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  } 
}

/* style menu links */
.site-navigation nav a,
.site-navigation nav button {
  padding: calc(var(--gap) / 2) var(--gap);
  min-height: 44px;
  display: flex;
  place-items: center start;
  text-decoration: none;
  font-weight: bold;
}
@media (min-width: 50rem) {
  .site-navigation nav a,
  .site-navigation nav button {
    min-height: 0;
  }
}
.site-navigation nav a:is(:hover,:focus-visible) {
  background-color: var(--button-focus-bg);
  color: var(--button-focus-color);
}
.site-navigation nav a:active {
  color: var(--accent-light);
}


/* menu item with sub menu */
.site-navigation nav li:has( > .sub-menu) {
  display: grid;
  /* grid-template-columns: 1fr auto; */
  position: relative;
}
/* ON MOBILE: hide A, show BUTTON */
.site-navigation nav li:has(> .sub-menu) > a {
  display: none;
}
.site-navigation nav li:has( > .sub-menu) > button {
  color: var(--button-light-color);
  background-color: var(--button-light-bg);
  border: none;
}
@media (min-width: 50rem) {
  /* ON DESKTOP: show A, hide BUTTON */
  .site-navigation nav li:has(> .sub-menu) > a {
    display: flex;
    padding-block: 1rem;
  }
  .site-navigation nav li:has( > .sub-menu) > button {
    display: none;
  }
}
.site-navigation nav li:has( > .sub-menu) > button::after {
  content: '+';
  margin-left: auto;
}
.site-navigation nav li:has( > .sub-menu) > button:is(:focus,:hover) {
  background-color: var(--button-focus-bg);
  color: var(--button-focus-color);
}
.site-navigation nav li:has( > .sub-menu) > button:active {
  background-color: var(--button-active-bg);
  color: var(--button-dark-color);
}

/* sub menu */
.site-navigation nav .sub-menu {
  height: auto;
  transition: height 0.25s;
  
  background-color: var(--accent-light);
  font-weight: normal;
  font-size: 0.8rem;
}
.site-navigation nav .sub-menu:not([aria-expanded]) {
  /* display: none; */
  overflow-y: clip;
  visibility: hidden;
  height: 0;
}
@media (min-width: 50rem) {
  /* hide submenus */
  .site-navigation nav .sub-menu {
    visibility: hidden;
    transition: visibility 0.01s; /* delay visibility change for keyboard navigation */
    display: grid;
  }
  /* show sub menu when hovering over parent LI, focusing on prev sibling A, or focusing inside sub-menu */
  .site-navigation nav li:hover > .sub-menu, 
  .site-navigation nav a:focus-visible ~ .sub-menu, 
  .site-navigation nav .sub-menu:focus-within {
    visibility: visible;
    height: auto;
    box-shadow: 0 0.25em 1em 0 rgba(0,0,0,0.25);
  }
  /* menu/sub-menu needs to be position absolute, display: grid; */
  .site-navigation nav .sub-menu {
    position: absolute;
    top: 0;
    /* position to the right */
    left: 100%;
    display: grid;
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: var(--button-color);
    background-color: var(--button-bg);
    gap: 0;
    /* gap: 0.1rem; */
    /* margin-top: 0.1rem; */
  }
  /* position the first sub-menu beneath the LI instead of to the right */
  .site-navigation nav .menu > li > .sub-menu {
    top: 100%;
    left: 0;
  }
}

.site-navigation nav .sub-menu a {
  font-weight: normal;
  font-size: 0.8rem;
}

/* expanded style */
.site-navigation nav li:has( > .sub-menu[aria-expanded]) {
  background: var(--button-active-bg);
}
.site-navigation nav li:has( > .sub-menu[aria-expanded]) > a {
  color: var(--button-dark-color);
}
.site-navigation nav li:has( > .sub-menu[aria-expanded]) > button {
  color: var(--button-dark-color);
  background-color: var(--button-dark-bg);
}
.site-navigation nav li:has( > .sub-menu[aria-expanded]) > button::after {
  content: '-';
}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* .site-navigation > nav#primary-navigation */
#primary-navigation {
  grid-row: 1;
}
@media (min-width: 50rem) {
  #primary-navigation {
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr var(--primary-nav-search-width);
    justify-content: end;
    align-items: center;
  }
}

#primary-navigation > * {
  grid-row: 1;
}

#primary-navigation ul {
  grid-column: 1;
}

/* primary nav dropdown menus */
#primary-navigation li {
  /* position: relative; */
  /* display: grid; */
}
@media (min-width: 50rem) {
  /* styling for sub-menu links */
  #primary-navigation .sub-menu a {
    padding: calc(var(--gap) / 2) var(--gap);
    padding: 0.5rem 1rem;
    min-width: 20ch;
    background-color: var(--button-bg);
    color: var(--button-color);
    border-top: var(--hr-width) solid var(--accent-medium);
  }

  /* hover/focus menu link */
  #primary-navigation :is(.menu,.sub-menu) a:is(:hover,:focus-visible) /* hover/focus A inside menu/submenu */
  {
    background-color: var(--accent-dark);
    color: var(--button-focus-color);
    text-decoration: none;
  }

  #primary-navigation :is(.menu,.sub-menu) a:active /* hover/focus A inside menu/submenu */
  {
    color: var(--accent-light);
  }

  /* highlight the top menu item if child is hovered/focused */
  #primary-navigation :is(.menu,.sub-menu) a:has( ~ .sub-menu a:is(:hover,:focus-visible)), /* hover/focus inside child submenu */
  #primary-navigation :is(.menu,.sub-menu) a:has( ~ .sub-menu:hover) /* hover/focus inside child submenu */
  {
    background-color: var(--accent-dark);
    color: var(--button-color);
    text-decoration: none;
  }
}



/* primary nav search */
#primary-navigation form {
  --primary-nav-search-button-width: 3rem;
  display: grid;
  grid-template-columns: 1fr auto;
  /* special spacing to line up with other menu items */
  padding: 0.5rem;
}
#primary-navigation form:focus-within {
  background: var(--accent-dark);
}
@media (min-width: 50rem) {
  #primary-navigation form {
    position: relative;
    grid-column: 1 / -1;

    margin-left: auto;
    margin-block: calc(2 * var(--hr-width));
    padding: 0;
    width: var(--primary-nav-search-width);
    height: 2rem;

    transition: width 500ms;
  }
  /* on focus, expand form width */
  #primary-navigation form:focus-within {
    width: 100%;
    background: transparent;
  }
}

/* force all children to be in the same row */
#primary-navigation form > * {
  grid-row: 1;
}
#primary-navigation form input {
  /* span the entire grid */
  /* grid-column: 1 / 3; */
  grid-row: 1;
  /* special spacing to line up with other menu items */
  padding-inline: 0.5rem;
  border-radius: 0.5rem 0rem 0rem 0.5rem;
  border: var(--hr-width) solid var(--accent-medium);
  border-right: 0;
  background-color: var(--text-bg);
}
@media (min-width: 50rem){
  #primary-navigation form input {
    width: 100%;
    margin-left: var(--hr-width);
    padding-left: 1rem;
    /* padding-block: 0.5rem; */
  }
}
#primary-navigation form input:is(:focus,:focus-visible) {

}
#primary-navigation form button {
  /* sit in just the last column */
  grid-column: 2;
  grid-row: 1;

  line-height: 0;
  font-weight: bold;
  background-color: var(--text-bg);
  border-radius: 0 0.5rem 0.5rem 0;
  border: var(--hr-width) solid var(--accent-medium);
  border-left: 0;
  padding: 0.5rem;
}
#primary-navigation form button:is(:focus,:hover) {
  background-color: var(--button-focus-bg);
  color: var(--button-focus-color);
}
#primary-navigation form button:active {
  background-color: var(--button-active-bg);
  color: var(--button-active-color);
}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* .site-navigation > nav#secondary-navigation */
#secondary-navigation {
  grid-row: 2;
}
@media (min-width: 50rem) {
  #secondary-navigation {
    grid-row: 1;
    font-size: 0.8rem;
  }
}

#secondary-navigation ul {
  display: flex;
  flex-wrap: wrap;

  border-top: var(--hr-width) solid var(--accent-color);
  /* margin-top: 0.5rem; */
  /* padding-top: 0.5rem; */
}
@media (min-width: 50rem) {
  #secondary-navigation ul {
    border-top: none;
    /* force children to all be same height */
    align-items: stretch;
  }
}

#secondary-navigation ul > * {
  flex-basis: 100%;
}
@media (min-width: 50rem) {
  #secondary-navigation ul > * {
    flex-basis: auto;
    display: grid;
  }  
}

/* underline links on focus, not bg color */
@media (min-width: 50rem) {
  #secondary-navigation a {
    padding: 0;
  }
  #secondary-navigation a:is(:hover,:focus-visible) {
    background-color: transparent;
    color: var(--accent-dark);
    text-decoration: underline;
  }
  #secondary-navigation a:active {
    color: var(--accent-light);
  }
}


/* subscribe button */
#secondary-navigation .subscribe-button {
  justify-content: start;
  padding-inline: 0.5rem;
  
  /* subscribe on same line as socials? */
  flex-grow: 0;
  flex-basis: auto;
}
@media (min-width: 50rem) {
  #secondary-navigation .subscribe-button {
    padding-inline: 0;
  }
}
#secondary-navigation .subscribe-button a {
  /* adjust padding/margin so button doesn't touch side of menu */
  margin-inline: var(--hr-width);
  padding-block: 0.5rem;
  padding-inline: 1rem;
  border-radius: 0.5rem;
  background-color: var(--button-bg);
  color: var(--button-color);
}
@media (min-width: 50rem) {
  #secondary-navigation .subscribe-button a {
    /* extra spacing between "contact" and "subscribe"  */
    margin-left: 0.5rem;
  }
}
#secondary-navigation .subscribe-button a:is(:hover, :focus-visible) {
  background-color: var(--button-focus-bg);
  color: var(--button-focus-color);
  text-decoration: none;
}
#secondary-navigation .subscribe-button a:active {
  background-color: var(--button-active-bg);
  color: var(--button-active-color);
  text-decoration: none;
}


/* social icons should be on one line */
#secondary-navigation .nav-icon-x,
#secondary-navigation .nav-icon-linkedin,
#secondary-navigation .nav-icon-ig {
  flex-grow: 0;
  flex-basis: auto;
}
#secondary-navigation :is(.nav-icon-x,.nav-icon-linkedin,.nav-icon-ig) {
  display: grid;
}
#secondary-navigation :is(.nav-icon-x,.nav-icon-linkedin,.nav-icon-ig) a {
  padding-inline: 1em;
  border-radius: 0.5rem;
  /* grid-area: 1/1/2/2; */
  line-height: 0;
  display: grid;
  align-content: center;
}

#secondary-navigation .nav-icon > a:is(:hover, :focus-visible) {
  background-color: var(--button-focus-bg);
  color: var(--button-focus-color);
  text-decoration: none;
}
#secondary-navigation .nav-icon > a:active {
  background-color: var(--button-active-bg);
  color: var(--button-active-color);
  text-decoration: none;
}

#secondary-navigation .nav-icon-linkedin {
  /* squeeze social links closer together */
  margin-inline: -0.5rem;
}


/* un-needed for production */
#secondary-navigation :is(.nav-icon-x,.nav-icon-linkedin,.nav-icon-IG) a::before {
  font-size: 0.8rem;
}




/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  /* main */

  main {
    margin-block: 1rem;
  }
  @media (min-width: 50rem) {
    main {
      margin-block: 2rem;
    }
  }

  main > header {
    /* margin-block: 1rem; */
  }
 
  
  /* unclassed lists inside content should have indent and markers */
  article :is(ul,ol):not([class]),
  article :is(ul,ol).margin-10 {
    padding-inline-start: 2rem;
    /* list-style: initial; */
  }

  /* article children should be spaced apart by 1em */
  article > * + * {
    margin-block-start: 1em;
  }








  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  /* main sidebar */


  /* hide sidebar on mobile */
  /* @media (width <= 770px) { */
    .left-nav {
      display: none;
    }


    .right-nav {
      display: grid;
      background-color: var(--accent-light);
    }

    /* show button */
    .right-nav > button,
    .right-nav summary {
      display: flex;
      /* place-items: center start; */
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem;
      background: none;
      border: none;
      font-weight: bold;
    }

    .right-nav > button[aria-expanded],
    .right-nav > details[open] summary {
      background-color: var(--button-light-focus-bg);
      color: var(--button-light-focus-color);
    }
    
    .right-nav > button::after {
      content: '+'; 
      margin-inline-end: 1ch;
    }
    .right-nav > button[aria-expanded]::after,
    .right-nav > button:has( +*[aria-expanded])::after {
      content: '-'; 
    }
    
    /* hide menu */
    /* if .right-nav does NOT contain a button that has been expanded, hide all non-buttons */
    .right-nav:not(:has(button[aria-expanded])) > :not(button) {
      /* display: none; */
    }
    

    .right-nav .side-menu-button {
      min-height: 44px;
    }
    /* hide menu until expanded */
    /* .right-nav .menu,
    .right-nav {
      display: none;
    } */
  /* } */

  

   @media (min-width: 50rem){
    /* if main has sidebar treat as grid-container */
    main {
      display: grid;
      gap: 1rem 0;
      grid-template-rows: auto 1fr;
      grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
      /* grid-auto-rows: auto; */
      grid-template-areas: "header header header" "content content content"; 
    }

    main:has(.left-nav,.right-nav) {
      /* display: grid; */
      /* gap: 1rem 0; */
      /* grid-template-rows: auto auto; */
      /* grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width); */
      /* grid-auto-rows: auto; */
      /* grid-template-areas: "aside header aside" "aside content aside";  */
    }

    /* declare grid area where sidebar should be placed */
    main:has(.left-nav) {
      /* grid-template-columns: [aside-start] 1fr [aside-end content-start] 3fr [content-end]; */
      /* grid-template-columns: [aside-start] var(--sidebar-width) [aside-end content-start] 3fr [content-end]; */
      grid-template-areas: "aside header header" "aside content content"; 
    }
  
    main:has(.right-nav) {
      /* grid-template-columns: [content-start] 3fr [content-end aside-start] 1fr [aside-end]; */
      /* grid-template-columns: [content-start] 3fr [content-end aside-start] var(--sidebar-width) [aside-end]; */
      grid-template-areas: "header header aside" "content content aside"; 
    }


    /* place header */
    main header {
      grid-area: header;
    }

    /* place content */
    main article {
      grid-area: content;
    }

    /* place sidebar */
    .left-nav, .right-nav {
      display: block;
      grid-area: aside;
    }

    /* set left/right border */
    .left-nav {
      margin-right: 2rem;
      padding-right: 2rem;
      border-right: var(--hr-width) solid var(--accent-color);
    }

    .right-nav {
      margin-left: 2rem;
      padding-left: 2rem;
      border-left: var(--hr-width) solid var(--accent-color);
    }

    /* hide button */
    /* .left-nav > button { display:none; }   */
    :is(.left-nav,.right-nav) > span,
    :is(.left-nav,.right-nav) > button{ 
      /* pointer-events: none; */
      display: grid;
      place-items: center start;
      background: none;
      padding: 0.5rem;
      border: none;
      font-weight: bold;
    }  
  }
  
  
 
  
  :is(.left-nav,.right-nav) :is(ol,ul) {
    display: grid;
    /* gap: calc(var(--hr-width) / 2); */
    list-style: none;
  }


  :is(.left-nav,.right-nav) .sub-menu li {
    padding-left: 1rem;
    font-size: 0.8rem;
  }

  :is(.left-nav,.right-nav) a {
    padding: 0.5em 1em;
    font-weight: bold;
    display: grid;
    align-items: center;
    /* color: var(--button-light-color); */
  }
  /* hover/focus */
  :is(.left-nav,.right-nav) a:is(:hover,:focus-visible) {
    background-color: var(--button-light-focus-bg);
    color: var(--button-light-focus-color, white);
    text-decoration: none;
  }
  /* active */
  :is(.left-nav,.right-nav) a:active {
    color: var(--button-light-active-color);
  }
  

  /* nav-icon links need two columns */
  :is(.left-nav,.right-nav) .nav-icon > a {
    grid-template-columns: 2rem 1fr;
    gap: 0.5em;
  }
  /* icons need to be a little bigger than link text */
  :is(.left-nav,.right-nav) .nav-icon > a::before {
    font-size: 1.2em;
  }


  
  
  :is(.left-nav,.right-nav) .menu[aria-expanded] {
     display: grid;
  }
  
  :is(.left-nav,.right-nav) .menu {
    list-style: none;
    gap: 1px;
  }

    :is(.left-nav,.right-nav) .menu li {
    display: grid;
    /* min-height: 44px; */
  }



  





    


  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  /* site footer */
  body > footer,
  .site-footer {
    display: grid;
    place-items: center;
    border-top: var(--hr-width) solid var(--accent-color);
    padding-block-start: 1rem;
  }

  body > footer a:not(:hover,:focus-visible),
  .site-footer a:not(:hover,:focus-visible) {
    opacity:0;
  }













}