/* ---------------------------------------------------------------------------
   Mega menus - the panels behind the Bikes and Workshop items in
   includes/new-header.php. Bikes drops down a column of bikes per category;
   Workshop drops down the picture tiles the /workshop/ page opens with. Both
   use the same full-width panel geometry, which is why the Workshop wrapper
   also carries the bike-mega class.

   It also carries the one other menu rule app-c.css cannot express: .nav-hl,
   a market's own menu link in a colour that market picked.

   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
   plain 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;
}

/* -- A market's own menu link, in a colour of its own --------------------- */

/* One item on the menu bar in a colour the market picked in Website Manager,
   for a sale or an offer it wants noticed. Nothing else about the link
   changes: same size, same weight, same spacing as every other item on the
   bar, because the ask was a different colour and not a badge.

   The colour arrives as --nav-hl on the tag itself; the fallback is the theme
   primary, which is what the picker offers to begin with.

   Under #main-nav on purpose: the anchor still carries hover:text-primary from
   the markup, and a plain class would lose to it on hover - which would drop
   the market's colour for the theme's exactly when the pointer is on it.
   Hover underlines instead, the same answer .mega-view-all gives, and the one
   that cannot fail whatever colour was picked. */
#main-nav .nav-hl {
  color: var(--nav-hl, #daff1c);
}

#main-nav .nav-hl:hover,
#main-nav .nav-hl:focus-visible {
  color: var(--nav-hl, #daff1c);
  text-decoration: underline;
}

/* -- Workshop panel: picture tiles ---------------------------------------- */

/* The eight tiles are the pictures the /workshop/ landing page opens with:
   320x249, English title and green frame baked in. A grid at both
   breakpoints; only the column count differs. */
.workshop-grid {
  display: grid;
  gap: 0.75rem;
}

.workshop-tile {
  display: block;
  /* Outline, not border: it takes no room, so the hover ring cannot nudge the
     grid. The offset clears the green frame inside the picture. */
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color 0.15s;
}

.workshop-tile img {
  display: block;
  width: 100%;
  height: auto;
}

.workshop-tile:hover,
.workshop-tile:focus-visible {
  outline-color: #daff1c;
}

/* Only rendered for a locale other than English - the title is already in the
   picture. See the Workshop block in new-header.php. */
.workshop-caption {
  display: block;
  padding-top: 0.375rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
}

.workshop-tile:hover .workshop-caption {
  color: #daff1c;
}

/* The two links under the tiles are .mega-view-all: same role as the Bikes
   columns' "view all", same colours. */

/* -- 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;
  }

  /* A panel that is visibility:hidden until hover cannot be tabbed into at
     all, so the Workshop tiles are held open while something inside them has
     focus - a panel nobody can tab into is eight links nobody can reach. This
     rule is unlayered, which is what lets it win against the lg:opacity-0 /
     lg:invisible utilities in the markup. */
  #main-nav .workshop-mega:focus-within .mega-panel {
    opacity: 1;
    visibility: visible;
  }

  .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;
  }

  /* The white card, spanning the menu row. The columns inside it are the
     .mega-cols-inner below; this is only the ground they sit on. */
  .mega-cols {
    /* 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);
  }

  /* Columns, not a row that wraps. How many categories there are is the
     market's choice in the DMS, not a fixed three, so they have to be allowed
     not to fit. A wrapping row starts its second line back at the left edge,
     which put a fourth category under the first one and left the space beside
     the tallest column empty - Quad and ATV sat most of a screen below
     Electric Bikes with nothing next to it. Laid out as columns, each category
     is kept whole and the short ones stack under one another until their
     column is as tall as the tallest, so those two now share a column.

     The count is capped at the number of categories the market publishes,
     which new-header.php carries in as --mega-col-count: without it, a market
     with two collections would have them balanced across however many 300px
     columns the window happened to fit, which reads as a half-empty panel.
     Width still decides where it is the smaller of the two, and that is what
     makes the stacking happen at all. */
  .mega-cols-inner {
    column-count: var(--mega-col-count, 3);
    column-width: 300px;
    column-gap: 2.5rem;
    /* Centred under the full-width card, the way the row was. */
    max-width: calc(var(--mega-col-count, 3) * 300px
                    + (var(--mega-col-count, 3) - 1) * 2.5rem);
    margin-inline: auto;
    /* Takes back the gap under the last category in the tallest column, so the
       card keeps its own 1.75rem below the bikes rather than that plus this. */
    margin-bottom: -2.5rem;
  }

  .mega-col {
    /* A category split down the middle would read as two, with a heading
       stranded at the foot of one column. */
    break-inside: avoid;
    /* The gap between stacked categories. Padding rather than a margin: a
       margin at the foot of a column is the browser's to drop at the break,
       and this one has to be there for the negative margin above to cancel. */
    padding-bottom: 2.5rem;
  }

  .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;
  }

  /* The same card as the bikes menu drops: same ground, border, shadow and
     padding, spanning the same menu row. The two panels open from adjacent
     items, so anything narrower here reads as a different component rather
     than the same menu with different contents. The grid fills the row: four
     tiles across at this step, eight from 80rem (below). */
  .workshop-panel {
    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);
  }

  .workshop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }

  /* Gold on the white card, like every other accent on this panel. */
  .workshop-tile:hover,
  .workshop-tile:focus-visible {
    outline-color: #b88632;
  }

  .workshop-tile:hover .workshop-caption {
    color: #b88632;
  }

  .workshop-links {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 0.75rem;
  }
}

/* -- Wide desktop: the eight tiles in one row ----------------------------- */

@media (width >= 80rem) {
  /* The header wrapper is lg:container, so the menu row steps up with
     Tailwind's container: ~1174px inside the card here, ~1430px from 96rem.
     Eight across is 133px a tile at the first and 165px at the second - the
     titles in the pictures stay readable - and the panel becomes a single band
     about 220px tall. At the 64rem step the same eight would be 101px, which is
     why that step keeps four. Tighter gap: it is a strip of pictures now, not
     two rows to separate. */
  .workshop-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1rem;
  }
}

/* -- 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;
  }

  /* Two tiles a row inside the black drawer, indented like the plain submenus.
     No right padding: the phone needs every pixel it can give the titles that
     are inside the pictures. */
  .workshop-panel {
    padding: 0.5rem 0 0.75rem 1.25rem;
  }

  .workshop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .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;
  }
}