/* Ensure the menu never causes horizontal scrolling (skew can overflow) */
.main-menu { width: 100%; }

/* Desktop only: clip skew overflow */
@media (min-width: 721px){
  .main-menu { overflow-x: clip; }
}

/* ---------- Desktop menu (your original) ---------- */
.main-menu {
    width: 100%;
    background-color: yellow;

    position: sticky;
    position: -webkit-sticky;
    top: 0;
    margin-bottom: 3em;
    z-index: 50;

    display: flex;
    justify-content: center;
    align-items: end;
    height: 2.5em;
    /* affects sticking position of table header row. see table.css */

    /* box-shadow: 0 1px 5px rgb(0,0,0,.5); */

    transition: .1s;
}

.menu-last {
    height: 100%;
    margin-left: auto;
    /* Push the last element to the right */
    flex-grow: 1;
    /* Make the last element grow to take up available space */
    text-align: right;
    /* Align text to the right */

    background-image: repeating-linear-gradient(90deg,
            yellow 0,
            yellow 1.25em,
            black 1.25em,
            black 2.5em);
    transform: skew(45deg);
}

.menu-first {
    height: 100%;
    margin-right: auto;
    /* Push the first element to the left */
    flex-grow: 1;
    /* Make the first element grow to take up available space */
    text-align: left;
    /* Align text to the left */

    background-image: repeating-linear-gradient(270deg,
            yellow 0,
            yellow 1.25em,
            black 1.25em,
            black 2.5em);

    transform: skew(45deg);
}

.menu-middle {
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: center;
    background-color: yellow;
    margin-right: 7px;
    margin-left: -7px;
}

.main-button {
    height: 100%;
    /* Match button height to menu height */
    padding: 0 .75em;
    /* Horizontal padding for spacing */
    text-align: center;
    font-weight: bold;
    font-size: x-large;
    background: linear-gradient(to bottom, black 50%, white 50%);
    background-size: 100% 200%;
    background-position: 0% 0%;
    color: white;

    border-top: 15px solid white;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transform: skew(45deg);
    transition: .1s ease-in;
}


@media (max-width: 800px) {
    .main-button {
        font-size: medium;
    }
}

.main-button.toggled {
    background-position: 0% -100%;
    color: black;
}

.main-button .button-text {
    display: inline-block;
    transform: skew(-45deg);
}

.menu-filler {
    height: 100%;
    width: .75em;
    background-color: yellow;
    margin-left: 7px;
    transform: skew(45deg);
    transform: .3s;
}

@media (max-width: 800px) {
    .menu-filler {
        width: 0;
    }
}

/* Rightmost black cap */
.menu-cap {
  background-color: black;
  width: 21px;
  height: 100%;
}

/* ---------- Mobile hamburger menu (from your menu.php) ---------- */
.mobile-menu-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 9998;

  width: 100%;
  padding: 20px 10px 10px 10px;
  background: white;
  border-bottom: 2px dashed black;
}

.mobile-menu-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background-image: repeating-linear-gradient(
    45deg,
    black 0,
    black 0.75em,
    yellow 0.75em,
    yellow 1.5em
  );
}

.hamburger-btn {
  appearance: none;
  border: 2px dashed black;
  background: white;
  width: 44px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 10px;
}

.hamburger-lines {
  position: relative;
  width: 20px;
  height: 2px;
  background: black;
  display: block;
}

.hamburger-lines::before,
.hamburger-lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: black;
}

.hamburger-lines::before { top: -6px; }
.hamburger-lines::after  { top:  6px; }

.mobile-menu-title {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0 10px;
  padding: 6px 8px;
}

.mobile-menu-title h3 {
  margin: 0;
  padding: 8px 14px;

  background: black;
  color: white;

  border: 2px dashed black;
  border-radius: 999px;

  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: 0.3px;
  text-align: center;

  box-shadow: inset 0 -6px 0 0 #ffd400;
}

@media (max-width: 380px) {
  .mobile-menu-title h3 {
    font-size: 1.15rem;
    padding: 7px 12px;
  }
}

.mobile-menu-spacer {
  width: 44px;
  margin-top: 10px;
}

/* Fixed dropdown panel: always comes down from bar */
.mobile-menu-panel {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;

  background: white;
  border-bottom: 2px dashed black;

  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.mobile-menu-panel::before {
  content: "";
  display: block;
  height: 10px;
  background-image: repeating-linear-gradient(
    45deg,
    black 0,
    black 0.75em,
    yellow 0.75em,
    yellow 1.5em
  );
  border-bottom: 2px dashed black;
}

.mobile-menu-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-link {
  display: block;
  padding: 12px 10px;
  margin: 10px 10px;

  border: 2px dashed black;
  text-decoration: none;
  color: black;
  font-weight: bold;
  background: white;
}

.mobile-menu-link:hover {
  background: black;
  color: yellow;
}

.mobile-menu-link.active {
  background: black;
  color: yellow;
}

/* Optional: disable page scroll when menu is open */
body.menu-open { overflow: hidden; }

/* Breakpoint switch */
@media (max-width: 720px) {
  .desktop-menu-only { display: none !important; }

  /* Keep the whole menu container sticky */
  .main-menu{
    position: sticky;
    top: 0;
    z-index: 9998;

    height: auto;          /* critical: remove 2.5em constraint */
    display: block;        /* avoid desktop flex height behavior */
    background: transparent;
    margin-bottom: 1.25em;

    overflow: visible;     /* critical: sticky + dropdown must not be clipped */
  }

  /* Mobile bar renders normally inside the sticky container */
  .mobile-menu-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;    /* not sticky */
    top: auto;
  }
}


/* Ensure the mobile bar does not visually bleed upward into the header */
.mobile-menu-bar {
  box-sizing: border-box;
}

/* Ensure the menu container does not paint over previous content */
.main-menu {
  overflow: visible; /* ok on desktop; mobile fixed by height:auto */
}


/* ---------- Desktop: black menu bar + white strip reaching into header ---------- */
/* ---------- Desktop: buttons solid black + white tab extending into header (buttons only) ---------- */
@media (min-width: 721px){

  /* Ensure button can paint outside the menu bar */
  .main-menu { overflow: visible; }

  /* Make the desktop middle area black so the button black reads cleanly */
  .menu-middle { background: black; }

  /* Solid black buttons */
  .main-button{
    position: relative;
    background: black !important;   /* replaces the old gradient */
    color: white;
    border-top: 0;                  /* remove the old white cap that was inside the bar */
    overflow: visible;              /* allow the white tab to extend upward */
    z-index: 2;                     /* sits above the bar and header edge */
  }

  /* White tab that goes upward into the header (ONLY behind buttons) */
  .main-button::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -15px;                     /* how far it goes into the header */
    height: 15px;                   /* thickness of the white tab */
    background: white;
    z-index: -1;                    /* behind the button text, but part of the button */
  }

  /* Keep your active/toggled behavior (optional).
     If you prefer active to remain black, delete this rule. */
  .main-button.toggled{
    background: white !important;
    color: black;
  }
}