/************************************/
/* ABOVE 1700 px (Wide desktops)    */
/************************************/
@media (min-width: 103.125em) {
  .toc {
    display: block;
  }
}

/************************************/
/* BELOW 1920 px (Full HD desktops) */
/************************************/
@media (max-width: 120em) {
  html {
    /* 9px / 16px */
    font-size: 56.25%;
  }
}

/*************************************/
/* BELOW 1200 px (Landscape tablets) */
/*************************************/
@media (max-width: 75em) {
  html {
    /* 8px / 16px */
    font-size: 50%;
  }

  .download-button {
    padding: 0.7rem 1.2rem 0.5rem 1.2rem;
  }

  .toggle-container span {
    padding: 0.7rem 1.2rem 0.5rem 1.2rem;
  }
}

/***********************************/
/* BELOW 944 px (Portrait tablets) */
/***********************************/
@media (max-width: 59em) {
  html {
    font-size: 62.5%;
    scroll-padding-top: 8rem;
  }

  *:focus,
  .download-button:focus,
  .toggle-container:focus {
    outline: none;
    box-shadow: none;
  }

  main {
    grid-template-columns: minmax(0, 1fr);
    box-shadow: none;
  }

  .download-button {
    padding: 0.5rem 1.2rem 0.5rem 1.2rem;
  }

  .download-button:hover .download-button-tooltip {
    visibility: hidden;
  }

  .column-left .heading-tertiary {
    color: var(--color-accent);
  }

  .header-left {
    margin-bottom: 3.2rem;
    background-color: unset;
    background-image: linear-gradient(
      to bottom,
      var(--color-brand-navy) 65%,
      rgba(0, 0, 0, 0) 20%
    );
    box-shadow: none;
  }

  .header-right {
    gap: 3.6rem;
    margin-bottom: 4rem;
  }

  .header-text {
    margin-top: 3.2rem;
  }

  .photo-img-box {
    width: min(50rem, 80%);
  }

  .photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .photo-img-box img {
    border: none;
  }

  .control-panel {
    position: static;
    flex-wrap: wrap;
  }

  .column-left,
  .column-right,
  .header-left,
  .header-right {
    min-width: 0;
  }

  .column-left,
  .column-right {
    padding: 0 3.4rem;
  }

  .column-left {
    background-color: unset;
    color: var(--color-text);
    font-size: 1.4rem;

    box-shadow: none;
  }

  .skill-group {
    font-size: 1.5rem;
    text-transform: uppercase;
  }

  .column-right {
    font-size: 1.4rem;
  }

  .icon {
    color: var(--color-accent);
  }

  .period .icon,
  .place .icon {
    color: var(--color-text-muted);
  }

  .download-button .icon {
    color: var(--color-brand-navy-text);
  }

  address {
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  }

  .address-link:link,
  .address-link:visited {
    font-size: 1.4rem;
    color: var(--color-accent);
  }

  .address-link:hover,
  .address-link:active {
    color: var(--color-accent-hover);
  }

  .list {
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  }

  .section-hobbies {
    display: none;
  }

  /*******************/
  /* MOBILE NAV BAR  */
  /*******************/
  .mobile-nav-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    padding: 1.2rem 2rem;
    background-color: var(--color-brand-navy);
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);

    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }

  .mobile-nav-bar.is-visible {
    transform: translateY(0);
  }

  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-brand-navy-text);
    font-size: 2.8rem;
    cursor: pointer;
  }

  /**************/
  /* MOBILE MENU */
  /**************/
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 600;
    padding: 8rem 3.4rem 3.4rem;
    background-color: var(--color-brand-navy);
    color: var(--color-brand-navy-text);
    overflow-y: auto;

    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .mobile-menu.is-open {
    transform: translateX(0);
  }

  .mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 1.2rem;
    right: 2rem;
    z-index: 601;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-brand-navy-text);
    font-size: 2.8rem;
    cursor: pointer;
  }

  body.menu-open {
    overflow: hidden;
  }

  .mobile-menu .toc {
    display: block;
    position: static;
    width: 100%;
    font-size: 1.6rem;
  }

  .mobile-menu .toc-name:link,
  .mobile-menu .toc-name:visited {
    color: var(--color-brand-navy-text);
  }

  .mobile-menu .toc-link:link,
  .mobile-menu .toc-link:visited {
    color: var(--color-brand-navy-text);
  }

  .mobile-menu .toc-sublink:link,
  .mobile-menu .toc-sublink:visited {
    color: rgba(232, 240, 247, 0.7);
  }

  .mobile-menu .toc-year {
    color: rgba(232, 240, 247, 0.55);
  }
}

/*********************************/
/* BELOW 704px (Smaller tablets) */
/*********************************/
@media (max-width: 44em) {
  .heading-primary {
    font-size: 4rem;
  }

  .heading-secondary {
    font-size: 2.2rem;
  }

  .heading-tertiary {
    font-size: 2.2rem;
  }

  .photo-img-box {
    margin: 0 4.8rem;
  }

  .company-place-period {
    flex-direction: column;
    align-items: start;
  }

  .company-info {
    margin-bottom: 1.2rem;
  }

  .period-place {
    grid-template-columns: auto auto;
    gap: 3.2rem;
    margin-bottom: 2.4rem;
  }
}

/************************/
/* BELOW 544px (Phones) */
/************************/
@media (max-width: 34em) {
  .heading-primary {
    font-size: 3.2rem;
  }

  .heading-secondary {
    font-size: 2rem;
  }

  .heading-tertiary {
    font-size: 2.4rem;
  }

  .download-button {
    font-size: 2.2rem;
    padding: 0.5rem 1.2rem 0.5rem 1.2rem;
    border-radius: 3rem;
    border: 3px solid var(--color-brand-navy);
  }

  .toggle-container {
    border-width: 3px;
  }

  .toggle-container:hover,
  .toggle-container:active {
    border-width: 3px;
  }

  .toggle-container span {
    font-size: 2.2rem;
    padding: 0.5rem 1.2rem 0.5rem 1.2rem;
  }

  .theme-toggle .toggle-container ion-icon {
    font-size: 2.2rem;
  }

  .toggle-container::before {
    border-radius: 1.6rem;
  }

  .download-button .icon {
    font-size: 2rem;
  }

  .column-left {
    font-size: 1.4rem;
  }

  .icon {
    font-size: 1.7rem;
  }

  .address-link:link,
  .address-link:visited {
    font-size: 1.4rem;
  }

  .skill-group {
    font-size: 1.4rem;
    margin-bottom: 1.8rem;
  }

  .skill-group:not(:first-of-type) {
    margin-top: 2rem;
  }

  .column-right {
    font-size: 1.4rem;
  }

  .company-name {
    font-size: 1.7rem;
  }

  .company-name .icon {
    font-size: 1.7rem;
  }

  .period {
    font-size: 1.2rem;
  }

  .period icon {
    font-size: 1.2rem;
  }

  .place {
    font-size: 1.2rem;
  }

  .period icon,
  .place icon {
    font-size: 1.4rem;
  }

  .position {
    font-size: 1.4rem;
  }

  address {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }

  .list {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

/*****************************/
/* BELOW 400px (Small phones) */
/*****************************/
@media (max-width: 25em) {
  .heading-primary {
    font-size: 3.6rem;
  }

  .heading-secondary {
    font-size: 2.2rem;
  }

  .heading-tertiary {
    font-size: 2.2rem;
  }
}