/** All responsive logic goes in here */

body::after {
  display: none; /* For visual debugging of breakpoints */
  content: "Debug";
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: red;
  padding: 5px 10px;
  z-index: 5000;
}

:root {
  --navHeight: 100px;
  --gutter: 32px;
  --columnWidth: 68px;
  --margin: 16px;
  --maxWidth: 1168px;
  --verticalSectionPadding: 64px;
  --horizontalSectionPadding: 100px;
  --sectionFullPadding: calc(
    ((100% - (100% - (var(--margin) * 2))) / 2) +
      var(--horizontalSectionPadding)
  );
}

/** X-Large **/
@media only screen and (max-width: 1599px) and (min-width: 1088px) {
  :root {
    --maxWidth: 1024px;
    --horizontalSectionPadding: 88px;
    --gutter: 32px;
    --columnWidth: 56px;
    --margin: 16px;
  }
}

/** Large **/
@media (min-width: 992px) and (max-width: 1087px) {
  body::after {
    content: "L";
  }
  :root {
    --maxWidth: 928px;
    --horizontalSectionPadding: 80px;
    --gutter: 32px;
    --columnWidth: 48px;
    --margin: 16px;
  }
}

/** Medium **/
@media (min-width: 768px) and (max-width: 991px) {
  body::after {
    content: "M";
  }
  :root {
    --horizontalSectionPadding: 0;
    --maxWidth: calc(100% - 80px);
    --sectionFullPadding: 56px;
    --gutter: 32px;
    --columnWidth: 28px;
    --margin: 16px;
  }
}

/** Small **/
@media (min-width: 576px) and (max-width: 767px) {
  body::after {
    content: "S";
  }
  :root {
    --horizontalSectionPadding: 0;
    --sectionFullPadding: 56px;
    --gutter: 0px;
    --columnWidth: 80px;
    --margin: 16px;
    --maxWidth: calc(100% - 80px);
  }
}

/** X-Small **/
@media (max-width: 575px) {
  body::after {
    content: "XS";
  }

  :root {
    --sectionFullPadding: 32px;
    --horizontalSectionPadding: 0;
    --gutter: 32px;
    --columnWidth: 0px;
    --margin: 32px;
    --maxWidth: 100%;
  }
}

/** x-x-small */
@media (max-width: 375px) {
  #nav .links ul a {
    font-size: 34px !important;
    margin-bottom: 24px !important;
  }
}

/** Bigger screens (>=M) **/
@media (min-width: 768px) {
  #nav button.menu-toggle {
    display: none;
  }

  /* Don't display the dumb "Home" link on desktop */
  #menu-main-menu li.menu-item-9055 {
    display: none;
  }
}

/** Smaller Screens (<= M) **/
@media (max-width: 767px) {
  :root {
    --navHeight: 100px;
    --verticalSectionPadding: 64px;
  }

  /** Break rows to columns */
  .flex-row.break-xs {
    flex-direction: column;
  }

  /** Adjust page title size for smaller devices */
  .home .page-title {
    font-size: 34px;
    margin-bottom: 8px;
  }

  /** Nav overrides */
  #nav .links {
    display: block;
    position: relative;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: rgba(28, 34, 41, 0.9905);
    color: white;
    max-height: 0;
    transition: max-height 300ms;
    overflow: hidden;
  }

  #nav .links ul {
    transition: opacity 250ms;
    opacity: 0; 
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  #nav .links ul li {
    height: auto;
  }

  #nav .links ul a {
    font-size: 48px;
    line-height: 1.5em;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 32px;
    display: block;
    transition: opacity 300ms;
    letter-spacing: 0 !important;
    text-transform: capitalize;
  }

  #nav.toggled-on .links {
    transition: max-height 500ms;
    max-height: 100%;
  }

  #nav.toggled-on .links ul {
    transition: opacity 500ms linear 400ms;
    opacity: 1;
  }
  #nav #menu-main-menu {
    padding-inline-start: 0;
    box-sizing: border-box;
    margin: auto;
    width: 100%;
    height: auto;
    margin-top: 170px;
  }

  #nav #menu-main-menu li {
    display: block;
    text-align: center;
  }
}