/* ==========================================================================
   Past Events year dropdown  —  shared by every edition page (/YYYY/)

   ---------------------------------------------------------------------------
   SCOPE CONTRACT — read before adding anything here
   ---------------------------------------------------------------------------
   Every edition looks different (its own palette, its own hero, its own
   sections); only the navbar STRUCTURE is shared. So this file may contain:

     * layout / positioning / behaviour of the year dropdown, and
     * rules whose selector starts at `header` — nothing outside the header.

   It must NOT contain:

     * a colour literal anywhere except as a var() fallback, and
     * any rule targeting page furniture (`#back-to-top`, `.mobile-cta`,
       `.container` outside the header, sections, buttons, …).

   Page-level fixes that the nav happens to depend on live in each edition's
   own <style> block, tagged `nav dependency`. Two of them exist today:
   #back-to-top pointer-events, and the mobile #mainmenu max-height. They were
   moved out of here because both are keyed to that edition's fixed bottom
   furniture, which changes year to year.

   ---------------------------------------------------------------------------
   THEME TOKENS — set these in the edition's own :root, not here
   ---------------------------------------------------------------------------
     --nav-accent            panel top border, hover/current marker, mobile dash
     --nav-panel-bg          desktop dropdown panel background
     --nav-panel-shadow      desktop dropdown panel shadow
     --nav-panel-link        year link colour (desktop panel)
     --nav-panel-link-hover  year link colour on hover/focus
     --nav-panel-hover-bg    year link hover background (desktop panel)

   Every one has a fallback below, so a new edition renders correctly before it
   defines anything. Mobile deliberately inherits the theme's own link colour
   (see the note at the bottom) and therefore uses no colour token at all.

   ---------------------------------------------------------------------------
   MARKUP CONTRACT
   ---------------------------------------------------------------------------

     <li class="menu-years">
         <a href="/archive">Past Events</a>
         <ul>
             <li><a href="/2025/">2025</a></li>
         </ul>
     </li>

   Desktop: hovering (or keyboard-focusing) the parent reveals the year panel.
   Mobile:  the years render as a static indented list, always visible.

   Desktop vs mobile is keyed off the `header-mobile` class that
   designesia-custom.js toggles via enquire.js at 993px — NOT off a media
   query of our own. Hard-coding a breakpoint here drifts out of sync with the
   theme (a 768px guess leaves iPad portrait rendering a hover panel inside the
   mobile slide-down menu).

   Link every edition page to this file so the nav stays identical across
   years. When a new edition is archived, add one <li> to the year list in
   each page's nav — see "Rolling over to a new year" in README.md.
   ========================================================================== */

/* The header's .container is subject to an unscoped
   `.container { overflow-x: hidden }` (added to stop horizontal page scroll).
   overflow-x:hidden forces the computed overflow-y to `auto`, which clipped
   the absolutely-positioned panel below down to just its 2px top border.
   Page-level horizontal scroll is already prevented by `overflow-x: hidden` on
   html and body, so the header container does not need to clip anything.

   Deliberately NOT narrowed to `header:not(.header-mobile)`. It looks like only
   the desktop hover panel needs to escape, but in mobile mode #mainmenu is
   `position: fixed` inside a header that carries `backdrop-filter` — which
   makes the header its containing block — so whether an edition's mobile
   `.container { overflow-x: hidden }` clips the open menu depends on subtle
   containing-block rules. It stays unconditional, matching the behaviour this
   nav was tested against. It is still header-scoped, so it reaches no page
   content. */
header .container {
    overflow: visible;
}

#mainmenu li.menu-years {
    position: relative;
}

/* designesia-custom.js menu_arrow() injects a <span> after any link that has a
   sibling <ul>, and binds a height animation to it. That fights the models
   below, so it is suppressed. */
#mainmenu li.menu-years > span {
    display: none !important;
}

/* ---------- desktop: hover panel ---------- */

/* Caret hinting there is more under here. Uses currentColor, so it tracks
   whatever link colour the edition's own theme sets — no token needed.
   NOTE: this goes on the <li>, not the <a>. The theme already uses
   `#mainmenu li a:after` for its floated separator dot, so styling the link's
   ::after hijacks that and lands the caret in the wrong place. */
header:not(.header-mobile) #mainmenu li.menu-years::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -2px;
    pointer-events: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.65;
    transition: opacity 0.18s ease;
}
header:not(.header-mobile) #mainmenu li.menu-years:hover::after,
header:not(.header-mobile) #mainmenu li.menu-years:focus-within::after {
    opacity: 1;
}
/* leave room for the caret so it never sits on the label */
header:not(.header-mobile) #mainmenu li.menu-years > a {
    padding-right: 16px;
}

header:not(.header-mobile) #mainmenu li.menu-years > ul {
    width: 168px;
    height: auto;
    top: 100%;
    /* Right-aligned, not left. "Past Events" is the last item in the nav, so a
       left-anchored 168px panel runs past the viewport on narrower desktops
       (22px of horizontal overflow at 1024px). */
    left: auto;
    right: 0;
    margin-top: 0;
    padding: 6px 0;
    background: var(--nav-panel-bg, #1c1c1c);
    border-top: 2px solid var(--nav-accent, #027fd8);
    border-radius: 0 0 4px 4px;
    box-shadow: var(--nav-panel-shadow, 0 12px 30px rgba(0, 0, 0, 0.38));
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
header:not(.header-mobile) #mainmenu li.menu-years:hover > ul,
header:not(.header-mobile) #mainmenu li.menu-years:focus-within > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

header:not(.header-mobile) #mainmenu li.menu-years > ul > li {
    display: block;
    float: none;
    width: 100%;
    text-transform: none;
    border: 0;
}
header:not(.header-mobile) #mainmenu li.menu-years > ul > li > a {
    display: block;
    padding: 9px 18px;
    color: var(--nav-panel-link, rgba(255, 255, 255, 0.82));
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    border-left: 3px solid transparent;
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
header:not(.header-mobile) #mainmenu li.menu-years > ul > li > a:hover,
header:not(.header-mobile) #mainmenu li.menu-years > ul > li > a:focus {
    color: var(--nav-panel-link-hover, #fff);
    background: var(--nav-panel-hover-bg, rgba(2, 127, 216, 0.16));
    border-left-color: var(--nav-accent, #027fd8);
}
/* the edition you are currently looking at */
header:not(.header-mobile) #mainmenu li.menu-years > ul > li > a.is-current {
    color: var(--nav-panel-link-hover, #fff);
    border-left-color: var(--nav-accent, #027fd8);
}

/* ---------- mobile: static indented list ---------- */

/* The theme floats #mainmenu items left for the desktop bar and only clears
   that in the page's own `@media (max-width: 768px)` block — but header-mobile
   engages at 993px. Between 769px and 993px (iPad portrait) the floats survive,
   #mainmenu collapses to height 0 and the whole menu is unusable. Un-float
   whenever the theme is in mobile mode; below 768px this is already the
   effective layout, so it changes nothing there. */
header.header-mobile #mainmenu li {
    float: none !important;
}

header.header-mobile #mainmenu li.menu-years > ul {
    position: static;
    /* the theme floats submenu <ul>s right for the desktop bar; left as-is the
       year list becomes a ~118px box pinned to the right of "Past Events" */
    float: none;
    width: 100%;
    height: auto !important;
    margin: 0;
    padding: 0;
    background: transparent;
    border-top: 0;
    border-radius: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    overflow: visible;
}
header.header-mobile #mainmenu li.menu-years > ul > li {
    border-bottom: 0 !important;
    padding-left: 0 !important;
}
/* Deliberately no `color` here. The menu panel is dark below 768px (the page
   paints it rgba(20,20,20,.98)) but light between 769px and 993px, so a
   hardcoded white — or a --nav-panel-link token tuned for the dark desktop
   panel — would be invisible on iPad portrait. Inheriting lets the edition's
   own `#mainmenu li a` colour apply correctly in both modes.
   !important on the metrics because editions declare `#mainmenu li a` padding
   and font-size with !important in their own later <style> blocks. */
header.header-mobile #mainmenu li.menu-years > ul > li > a {
    padding: 12px 20px 12px 40px !important;
    font-size: 15px !important;
    border-left: 0;
    border-bottom: 0;
}
header.header-mobile #mainmenu li.menu-years > ul > li > a::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 1px;
    margin-right: 10px;
    vertical-align: middle;
    background: var(--nav-accent, #027fd8);
    /* the accent token is opaque; the dash has always rendered at 90% */
    opacity: 0.9;
}