/* ---------------------------------------------------------------------------
   Bikes mega menu - the panel behind the Bikes item in includes/new-header.php.

   Everything here is geometry that files/css/app-c.css cannot express. That
   file is a Tailwind build made off-machine and this repo carries no build
   tooling, so it only contains the utilities the markup already used: the ones
   this layout wants (column sizing, a full-width absolute panel, fixed
   thumbnail boxes) are simply absent from it. Behaviour the build DOES cover -
   hidden / lg:block / lg:hidden / lg:group-hover:* / rotate-180 / z-50 - stays
   in the markup as utilities, so show-and-hide keeps working exactly like the
   other four dropdowns.

   These rules are mirrored in files/css/input.css. At the next Tailwind build
   they compile into app-c.css; delete this file and its <link> then.

   Colours are the two theme variables spelled out, since this file is served
   before/outside the @theme block: primary #daff1c, secondary #b88632.

   The shared rules below are the dark ones the rest of the nav is written in.
   The desktop panel then inverts them - white ground, black type - in its own
   media query; the mobile accordion keeps them, because there it renders
   inside the black burger drawer.
--------------------------------------------------------------------------- */

/* -- Shared between both breakpoints -------------------------------------- */

/* A "header:Trail Bikes" separator carried over from the collection. */
.mega-group-label {
  margin: 0;
  padding: 0.875rem 0 0.25rem;
  color: #b88632;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mega-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

/* Fixed box with width/height also on the tag: the product shots come in
   several aspect ratios, and a menu that reflows as its images arrive is
   unusable. The empty <span> a bike with no picture gets keeps its row's text
   in the same column as every other row. */
.mega-thumb {
  display: block;
  flex: 0 0 72px;
  width: 72px;
  height: 48px;
  object-fit: contain;
}

.mega-item-text {
  min-width: 0; /* lets the tagline's ellipsis engage instead of overflowing */
}

.mega-item-name {
  display: block;
  line-height: 1.2;
}

.mega-item:hover .mega-item-name {
  color: #daff1c;
}

/* Taglines are pipe-separated spec lists ("4 Stroke | N1234 | Electric Start")
   and run past any sane menu width, so they are trimmed rather than wrapped to
   three lines. */
.mega-item-sub {
  display: block;
  margin-top: 0.125rem;
  overflow: hidden;
  color: rgb(255 255 255 / 0.6);
  font-size: 0.6875rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.mega-view-all {
  display: block;
  padding: 0.75rem 0 0.25rem;
  color: #daff1c;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.mega-view-all:hover {
  text-decoration: underline;
}

/* -- Desktop: hover panel across the whole menu row ----------------------- */

@media (width >= 64rem) {
  /* Three columns of bikes will not fit under the Bikes link itself - centred
     on the leftmost item, the panel would hang off the left edge of the
     window. It spans the menu row instead, which means the row, not the item,
     has to be the containing block. The panel stays a DOM child of the .group
     wrapper either way, so lg:group-hover:* still opens it. */
  #main-nav {
    position: relative;
  }

  #main-nav .bike-mega {
    position: static;
  }

  .mega-panel {
    top: 100%;
    right: 0;
    left: 0;
    /* The other dropdowns hold their gap with lg:mt-3. Here it has to be
       padding on the panel: a margin is dead space outside the hover target,
       and the panel would close as the pointer crossed it. */
    padding-top: 0.75rem;
    /* The panel is the light one, so the nav's text-white has to stop at its
       edge - everything inside inherits from here instead. */
    color: #000;
  }

  .mega-cols {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    /* A short laptop window must not push the last bikes below the screen. */
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding: 1.75rem 2rem;
    border: 1px solid rgb(0 0 0 / 0.12);
    background: #fff;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);
  }

  .mega-col {
    flex: 0 1 300px;
    min-width: 0;
  }

  .mega-col-title {
    margin-bottom: 0.25rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid rgb(0 0 0 / 0.15);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
  }

  .mega-item {
    font-size: 0.9375rem;
  }

  .mega-item-sub {
    color: rgb(0 0 0 / 0.6);
  }

  /* The accents the dark version paints in primary yellow: #daff1c on white is
     effectively unreadable, so on this panel the secondary gold carries them.
     It is the colour the group labels already use here. */
  .mega-col-title:hover,
  .mega-item:hover .mega-item-name,
  .mega-view-all {
    color: #b88632;
  }
}

/* -- Mobile: second accordion level inside the burger menu ---------------- */

@media (width < 64rem) {
  /* Matches the pl-5 the plain submenu indents its links by. */
  .mega-cols {
    padding-left: 1.25rem;
  }

  .mega-cat-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem 0.75rem 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
  }

  .mega-col + .mega-col .mega-cat-toggle {
    border-top: 1px solid rgb(255 255 255 / 0.12);
  }

  .mega-col-list {
    padding: 0 0 0.5rem 0.5rem;
  }

  /* Room to actually recognise the bike on a phone. */
  .mega-thumb {
    flex-basis: 88px;
    width: 88px;
    height: 58px;
  }

  .mega-item {
    font-size: 1rem;
  }

  .mega-item-sub {
    font-size: 0.75rem;
  }
}