/* ---------------------------------------------- */
/* ------------------- navbar ------------------- */
/* ---------------------------------------------- */


#pageNavBar {
  box-sizing: border-box;
  padding-inline: 0;
  width: 100%;
  background-color: white;
  position: sticky;
  top: 0;
  padding: 0 2em;
  flex-direction: row;
  z-index: 10000; /* keep it above #menuItems (z-index: 10) */
  isolation: isolate;     /* new stacking context boundary */
  transform: translateZ(0); /* layer promotion (helps Safari/iOS) */



}



@media (min-width: 1921px) {
  #pageNavBar {
    /* (100vw - 1920px) / 2 on each side */
    padding-inline: calc((100vw - 1920px) / 2);
  }
}

#pageNavBar, #logoSection, #companyNameText, #companyLogo {
  transition: 0.5s;
}

#pageNavBar, #logoSection, #companyName, #menuItemsSection, #buttonsSection, #menuButtonSection {
  display: flex;
}


/* ------------------- logo section ------------------- */


#logoSection {
  gap: 1em;
  flex: 1;
  padding-top: 2em;
}

#companyName {
  align-items: center;
  gap: 1em;
}

#companyNameText {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.8em;
  line-height: 1;
  color: var(--blue-color);
}

#companyLogo {
  width: 3em;
  background-color: white;
}

.orangeLogo {
  fill: var(--orange-color);
  fill-rule: nonzero;
  paint-order: fill;
}

.blueLogo {
  fill: var(--blue-color);
  fill-rule: nonzero;
  paint-order: fill;
}


/* ------------------- links  ------------------- */


#menuItemsSection {
  flex: 1 70%;
  align-items: end;
  gap: 0.25em;
  justify-content:flex-end;

  margin-right: 4em;
}

#menuItemsSection > a {
  color: var(--blue-color);
  padding: 0.5em;
  cursor: pointer;
  font-size: 1.2em;
}


/* ------------------- buttons  ------------------- */


#buttonsSection {
  flex: 1;
  margin-top: auto;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0.5em;
}


.buttonSectionButton {
  height: 2em;
  width: 5em;
  color: var(--blue-color);

  margin: 0;
  padding: 0;
  border: none;
  background: none;
  text-align: center;
  line-height: normal;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;

  
}



#signUp {
  background-color: white;
  color: var(--blue-color);
  text-align: center;
  border-radius: 1em;
  transition: 0.2s;
}





#menuButtonSection {
  position: relative;
  padding: 0.7em 1em 0 0;
  cursor: pointer;
  display: none;
  align-items: center;

}

#menu:hover b{
  background-color: var(--orange-color);
}

.McButton {
  position: absolute;
  margin-left: -0.6em;
  margin-top: -0.4em;
  width: 1.2em;
  height: 12px;
  cursor: pointer;
}

.McButton b {
  position: absolute;
  left: 0;
  width: 1.2em;
  height: 0.1em;
  background-color: var(--blue-color);
}

.McButton b:nth-child(1) {
  top: 0;
}

.McButton b:nth-child(2) {
  top: 50%;
}

.McButton b:nth-child(3) {
  top: 100%;
}


    /* colapse menu to bar*/
    @keyframes collapse1 {from {top: 0%;}to {top: 50%;}} 
    @keyframes collapse3 {from {top: 100%;}to {top: 50%;}}

    /* make an X */ 
    @keyframes rotateButton {from{transform:rotate(0deg);}to{transform:rotate(135deg);}}
    @keyframes rotate3 {from{transform:rotate(0deg); top:50%}to{transform: rotate(90deg); top:50%;}}

    /* colapse the X */ 
    @keyframes rotateButtonBack {from{transform: rotate(135deg);}to{transform: rotate(180deg);}}
    @keyframes rotate3Back {from{transform:rotate(90deg); top:50%}to{transform:rotate(0deg); top:50%}}

    /* expand back to menu */ 
    @keyframes expand1 {from {top: 50%; }to {top: 0%;}} 
    @keyframes expand3 {from {top:50%;}to {top: 100%;}}


/* ------------------- scroll animations / resizings  ------------------- */


#pageNavBar.scrolled {
  box-shadow: 0 5px 8px 0 rgb(0 0 0 / 10%), 0 3px 10px 0 rgb(0 0 0 / 8%);
}


#pageNavBar.scrolled #logoSection{
  padding: 0.4em 0 ;
}

#pageNavBar.scrolled #companyNameText {
  font-size: 1.5em;
}

#pageNavBar.scrolled #companyLogo {
  width: 1.8em;
}

#pageNavBar.scrolled #signUp {
  border: 2px solid var(--blue-color);
}




@media screen and (max-width: 1000px){
  #menuItemsSection > a {
    display: none;
  }

  #pageNavBar {
    padding: 0 0.5em;
    border-bottom: 1px solid var(--grey-color);
  }

  #buttonsSection {
    display: none;
  }

  #menuButtonSection {
    display: flex;
  }


  #pageNavBar #logoSection{
    padding: 0.5em 0 ;
  }

  #pageNavBar #companyNameText {
    font-size: 1.5em;
  }

  #pageNavBar #companyLogo {
    width: 1.8em;
  }



}  





    :root {
      --bg: #ffffff;          /* white background */
      --card: #f9f9f9;        /* light grey card */
      --text: #1a1a1a;        /* dark text */
      --muted: #777777;       /* muted grey */
      --line: #e0e0e0;        /* light divider */
      --accent: #3b82f6;      /* blue highlight */
      --radius: 16px;
    }

    html, body {
      min-height: 100%;
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }

    
#menuItems {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nav-h, 46px);      /* will be set from JS; 56px is a safe fallback */
  bottom: 0;
  z-index: 10;                   /* below navbar, above page */
  
  /* layout/appearance */
  overflow-x: hidden;                /* scroll the panel itself if content is tall */
  padding: 12px;
  background: var(--bg);

  /* animation (collapsed) */
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    max-height 300ms ease,
    opacity 220ms ease,
    transform 300ms ease;

  pointer-events: none;          /* no interaction when hidden */
}


#mobileMenuLoginButtons {
  position: absolute;
  bottom: 0;  
  width: 100vw;
}

#mobileMenuLoginButtonsFlex {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 2em;
}





.buttonSectionButton2 {
  height: 2em;
  width: 5em;
  color: var(--blue-color);

  margin: 0;
  padding: 0;
  border: none;
  background: none;
  text-align: center;
  line-height: normal;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;

  
}



#signUp2 {
  background-color: var(--blue-color);
  color: white;
  text-align: center;
  border-radius: 1em;
}

body.menu-open #menuItems {
  max-height: 100dvh;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* while menu is open */
html.menu-open #pageNavBar {
  position: fixed;
  top: 0; left: 0; right: 0;
}


    .McButton.active + #menuItems {
      display: flex;
    }

    #menuItemsList {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }

    .menuItemsLinks {
      background: var(--card);
      border: 1px solid var(--line);
      overflow: hidden;
    }

    .menuCard {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 16px 16px;
      cursor: pointer;
      user-select: none;
    }

    .menuCard:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: calc(var(--radius) - 2px);
    }

    .menuCard::after {
      content: "";
      width: 10px;
      height: 10px;
      border-right: 2px solid var(--muted);
      border-bottom: 2px solid var(--muted);
      transform: rotate(-45deg);
      transition: transform 220ms ease;
      justify-self: end;
    }

    .menuItemsLinks[aria-expanded="true"] > .menuCard::after {
      transform: rotate(45deg);
    }

    .menuCardList {
      list-style: none;
      margin: 0;
      padding: 0 12px 0 12px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 260ms ease;
      border-top: 1px solid transparent;
    }

    .menuItemsLinks[aria-expanded="true"] > .menuCardList {
      border-top-color: var(--line);
      padding-bottom: 10px;
      max-height: 500px; /* large enough to reveal items */
    }

    .menuCardList li { margin: 0; }

    .menuCardLink {
      display: block;
      padding: 12px;
      text-decoration: none;
      color: var(--text);
      transition: background 0.2s;
    }

    .menuCardLink:hover { background: rgba(0,0,0,0.05); }

    .menuCardLink:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
      .menuCardList { transition: none; }
      .menuCard::after { transition: none; }
    }