/* MARKER_MOBILE_STYLES_START */
#mobileNav {
  display: none;
}

@media screen and (min-width: 769px) {
  #mobileNavModal {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .navbar img {
    transition: all ease 0.2s;
    max-inline-size: clamp(50vw, 10vh, 50vw);
  }

  #nav-body-section {
    display: none;
  }

  .navbar h3 {
    display: none;
  }

  nav#navbar {
    inline-size: 100%;
  }

  #mobileNav {
    display: block;
    position: fixed;
    inset-block-start: 2vh;
    inset-inline-end: 2vh;
    z-index: 1000;
  }

  #mobileNavToggle {
    display: none;
  }

  .mobileNavIcon {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    block-size: clamp(3vh, 3.5vw, 4vh);
    inline-size: clamp(4vh, 4.5vw, 5vh);
    position: relative;
    z-index: 1001;
  }

  .mobileNavIcon::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    inline-size: clamp(5vh, 6vw, 6.5vh);
    block-size: clamp(5vh, 6vw, 6.5vh);
    background: var(--navbg);
    border-radius: 50%;
    z-index: -1;
  }

  .mobileNavIcon .bar {
    background: var(--text);
    display: block;
    block-size: clamp(0.2vh, 0.3vw, 0.4vh);
    transition: all 0.3s ease-in-out;
    inline-size: 100%;
  }

  #mobileNavToggle:checked ~ #mobileNavModal {
    display: block;
  }

  #mobileNavToggle:checked + .mobileNavIcon .bar:nth-child(1) {
    transform: translateY(clamp(1.5vh, 1.7vw, 1.8vh)) rotate(45deg);
  }

  #mobileNavToggle:checked + .mobileNavIcon .bar:nth-child(2) {
    opacity: 0;
  }

  #mobileNavToggle:checked + .mobileNavIcon .bar:nth-child(3) {
    transform: translateY(clamp(-1.5vh, -1.7vw, -1.8vh)) rotate(-45deg);
  }

  #mobileNavModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    justify-content: flex-end;
    align-items: center;
    padding-block-end: clamp(5vh, 10vw, 10vh);
  }

  #mobileNavModal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--dark);
    opacity: 0.5;
  }

  #mobileNavMenu {
    inset-block-start: 100vh;
    background: var(--navbg);
    padding: clamp(1.5vh, 2.5vw, 2vh) clamp(1.5vh, 2.5vw, 2vh)
      clamp(10vh, 20vw, 25vh);
    border-radius: clamp(0.5vh, 0.6vw, 0.7vh);
    box-shadow: 0 clamp(0.5vh, 0.6vw, 0.7vh) clamp(0.8vh, 0.9vw, 1vh)
      var(--shadow-color);
    block-size: fit-content;
    max-block-size: 80vh;
    overflow-y: auto;
    position: relative;
    inline-size: 100%;
    z-index: 1001;
    margin-block-start: auto;
    /* Align to bottom */
    /* Adjusted to ensure visibility and correct alignment */
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
  }

  #mobileNavToggle:checked ~ #mobileNavModal #mobileNavMenu {
    transform: translateY(0);
    /* Adjust modal position when visible */
  }

  .mobileNavHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(5vh, 4vw, 10vw);
  }

  .mobileNavHeader img {
    max-inline-size: 50%;
    max-block-size: clamp(25vw, 15vh, 50vw);
  }

  .mobileNavClose {
    color: var(--navtext);
    cursor: pointer;
    font-size: clamp(3vh, 5vw, 5vh);
  }

  .mobileNavLinks {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mobileNavLinks a {
    margin-block-end: clamp(1.5vh, 2.5vw, 2vh);
    inline-size: 100%;
    max-inline-size: clamp(25vh, 90vw, 45vh);
    position: relative; /* Added to position arrow */
  }

  .mobileNavLinks a:last-child {
    margin-block-end: 0;
  }

  .mobileNavLinks .navlink-primary {
    background-color: var(--primary);
    color: var(--on-primary);
    padding: clamp(1vh, 1.5vw, 1.5vh) clamp(2vh, 3vw, 2.5vh);
    border-radius: clamp(0.5vh, 0.6vw, 0.7vh);
  }

  .mobileNavLinks .navlink-secondary {
    background-color: var(--secondary);
    color: var(--on-secondary);
    padding: clamp(1vh, 1.5vw, 1.5vh) clamp(2vh, 3vw, 2.5vh);
    border-radius: clamp(0.5vh, 0.6vw, 0.7vh);
  }

  #mobileNavMenu a {
    color: var(--navtext);
    display: block;
    font-size: clamp(2.3vh, 3.3vw, 2.8vh);
    text-decoration: none;
    transition: all 0.3s ease-in-out;
  }

  #mobileNavMenu a:hover {
    color: var(--hover);
  }

  #mobileNavMenu a:active {
    color: var(--active);
  }

  /* Added styles for arrow */
  .mobileNavArrow {
    position: absolute;
    inset-inline-end: clamp(1.5vh, 1.5vw, 2vh);
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-size: clamp(2.5vh, 3.5vw, 3vh);
  }
}