/* ============================================================
   nav-ll.css — navigation on the ll- design footing

   Every rule is written at .main-nav.nav-ll, two classes, so it
   outranks the original nav.css whatever order the two load in.
   nav.css is left in place and untouched; removing this file and
   the nav-ll class returns the old nav exactly.

   The one structural idea: the bar takes its colour from the
   section you are standing in. --acc reads the silo token that
   legilist.css already sets on <body>, so Lobbying is bronze,
   Executive aubergine, the Briefing slate, and anything that has
   not been migrated yet falls back to the site navy. The accent
   appears in exactly two places — the chip on the current section,
   and the mark on the current row in the phone drawer. Nowhere
   decorative.

   The five mega panels are gone and their rules with them. The
   sections are links to their own landing pages: one click from
   anywhere to the front of a section, and nothing opens on the way.
   Moving between the directories inside a section is left to that
   section's own row of tabs, on its own pages.
   ============================================================ */

.main-nav.nav-ll {
  /* the fallback is the base token, for pages that do not load
     legilist.css yet — the nav must not depend on it */
  --acc: var(--ll-accent, #1c335f);

  /* The silo accents are dark and low-chroma by design, which is
     exactly wrong on a dark bar. They are lifted by mixing toward
     white, which raises lightness while keeping the hue and losing
     chroma — not by brightening and saturating, which would turn
     navy into the party blue the palette exists to avoid. The flat
     value on the first line is what browsers without color-mix
     get. */
  --acc-on-dark: #9fb3c8;
  --acc-on-dark: color-mix(in srgb, var(--acc) 42%, #ffffff);

  /* The fill behind the section you are in. Barely lifted — enough to
     separate from the bar and still carry white text — so it stays the
     silo's actual colour rather than the washed-out tint that lifting
     far enough for a hairline produces. */
  --acc-fill: #2c3f5c;
  --acc-fill: color-mix(in srgb, var(--acc) 85%, #ffffff);

  /* Support is the only call to action in the chrome. Warm, so it
     reads as one, and ochre rather than red, which on a politics site
     is a party colour whatever it is meant as. */
  --warm:      #d9a05b;
  --warm-line: #6b4f22;

  --nav-bg:      #121d2b;
  --nav-line:    #243242;
  --nav-ink:     #f4f6f8;
  --nav-ink-2:   #aab6c4;
  --nav-ink-3:   #7d8b9b;
  --nav-surface: #18242f;

  background: var(--nav-bg);
  /* A plain hairline. The section colour used to run along this edge,
     which is the furthest point in the nav from anything anyone reads;
     it has moved onto the current section itself, where the eye goes
     to find out where it is. */
  border-bottom: 1px solid var(--nav-line);
  color: var(--nav-ink);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
}

/* the gradient and the drop shadow both go: a flat band with one
   hairline reads as a masthead rather than as a toolbar */
.main-nav.nav-ll .bar {
  max-width: 1440px;
  height: 66px;
  gap: 26px;
}

/* LOGO — left exactly as it was */

/* --- the sections ------------------------------------------------
   Links now, not triggers that open a panel: they need the layout
   the <button> used to get from the user agent, and they must not
   pick up an underline. Sentence case in the body face, no pill, no
   fill, and no chevron — there is nothing left to disclose, so the
   glyph promising it has gone. */
.main-nav.nav-ll .browse { height: 66px; }

.main-nav.nav-ll .navitem {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 66px;
  padding: 0 15px;
  color: var(--nav-ink-2);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

/* Hovering is a neutral underline — an affordance, not an identity.
   The accent is spent on marking where you already are, so it is not
   also used for "the pointer is currently here". */
.main-nav.nav-ll .navitem::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 0;
  left: 11px;
  height: 2px;
  background: transparent;
  transition: background-color 140ms ease;
}

.main-nav.nav-ll .navitem:hover { color: var(--nav-ink); }
.main-nav.nav-ll .navitem:hover::after { background: var(--nav-ink-3); }

/* The section you are in, in the section's own colour. One block, one
   use of the accent, at the point on the page a reader actually looks
   to orient themselves. */
.main-nav.nav-ll .navitem.cur {
  background: transparent;
  color: #fff;
}

/* The fill is painted by the underline's own pseudo-element, grown
   into a chip and dropped behind the label. Inset rather than full
   height so it sits in the bar rather than cutting it into panels —
   and it keeps both edges, which is what tells a reader which of five
   adjacent words is the selected one. */
.main-nav.nav-ll .navitem.cur::after {
  inset: 14px 5px;
  right: 5px;
  bottom: 14px;
  left: 5px;
  height: auto;
  border-radius: 8px;
  background: var(--acc-fill);
  z-index: -1;
}

/* hovering the section you are standing in is possible now that it is
   a link, and must not repaint the chip in the neutral grey */
.main-nav.nav-ll .navitem.cur:hover::after { background: var(--acc-fill); }

/* --- Learn and the Briefing --------------------------------------
   Learn and the Briefing are a different kind of thing from the five
   directories — places you read rather than records you search — and
   the old nav said so with an invented green and an invented gold.
   The distinction was worth keeping; the two colours were not. A
   filled block against the sections' bare text marks them as a pair,
   using a surface the nav already has. */
.main-nav.nav-ll .hub {
  height: 34px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--nav-surface);
  color: var(--nav-ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.main-nav.nav-ll .hub i,
.main-nav.nav-ll .hub.ln i,
.main-nav.nav-ll .hub.br i {
  color: var(--nav-ink-3);
  font-size: 0.88rem;
}

.main-nav.nav-ll .hub:hover {
  border-color: #3a5068;
  color: #fff;
}

.main-nav.nav-ll .hub:hover i { color: var(--nav-ink-2); }

/* standing in one of them: the same accent fill the sections use */
.main-nav.nav-ll .hub.cur {
  background: var(--acc-fill);
  border-color: transparent;
  color: #fff;
}

.main-nav.nav-ll .hub.cur i { color: rgba(255, 255, 255, 0.72); }

.main-nav.nav-ll .vbar {
  height: 26px;
  background: var(--nav-line);
}

/* --- utility ------------------------------------------------------ */
.main-nav.nav-ll .iconbtn { color: var(--nav-ink-2); }
.main-nav.nav-ll .iconbtn:hover { background: var(--nav-surface); color: var(--nav-ink); }

/* My LegiList, promoted out of the dropdown that used to hold it */
.main-nav.nav-ll .navlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  color: var(--nav-ink-2);
  font-size: 0.89rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.main-nav.nav-ll .navlink i { color: var(--nav-ink-3); font-size: 0.82rem; }

.main-nav.nav-ll .navlink:hover {
  background: var(--nav-surface);
  color: var(--nav-ink);
}

.main-nav.nav-ll .navlink:hover i { color: var(--nav-ink-2); }

/* marked the same way the current section is, for the same reason.
   Grey would now collide with the hubs, which sit on that surface at
   rest. */
.main-nav.nav-ll .navlink.active {
  background: var(--acc-fill);
  color: #fff;
}

.main-nav.nav-ll .navlink.active i { color: rgba(255, 255, 255, 0.72); }

/* The heart was #ff5470 — saturated red in the chrome of every page
   on a politics site, which is a party colour whether it is meant as
   one or not. Grey was the wrong correction: the only call to action
   in the nav, rendered in the same grey as everything else, reads as
   disabled. Ochre keeps it warm and asking without picking a side. */
.main-nav.nav-ll .support {
  height: 34px;
  border: 1px solid var(--warm-line);
  border-radius: 8px;
  background: transparent;
  color: var(--warm);
  font-size: 0.87rem;
  font-weight: 600;
  box-shadow: none;
}

.main-nav.nav-ll .support i { color: var(--warm); }

.main-nav.nav-ll .support:hover {
  background: rgba(217, 160, 91, 0.12);
  border-color: var(--warm);
  color: #f0c893;
}

.main-nav.nav-ll .support:hover i { color: #f0c893; }

/* --- search drawer ------------------------------------------------- */
.main-nav.nav-ll .searchdrawer {
  background: var(--nav-bg);
  border-top: 1px solid var(--nav-line);
}

/* --- focus --------------------------------------------------------- */
.main-nav.nav-ll .navitem:focus-visible,
.main-nav.nav-ll .hub:focus-visible,
.main-nav.nav-ll .navlink:focus-visible,
.main-nav.nav-ll .iconbtn:focus-visible,
.main-nav.nav-ll .support:focus-visible,
.main-nav.nav-ll .sclose:focus-visible,
.main-nav.nav-ll .burger:focus-visible,
.main-nav.nav-ll .mrow:focus-visible,
.main-nav.nav-ll .mx:focus-visible {
  outline: 2px solid #9ec3ff;
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- mobile drawer -------------------------------------------------- */
.main-nav.nav-ll .burger { color: var(--nav-ink); }

.main-nav.nav-ll .mnav {
  background: var(--nav-bg);
  border-left: 1px solid var(--nav-line);
}

.main-nav.nav-ll .mhead { border-bottom: 1px solid var(--nav-line); }
.main-nav.nav-ll .mttl { color: var(--nav-ink); font-weight: 600; letter-spacing: 0; text-transform: none; }
.main-nav.nav-ll .mx { color: var(--nav-ink-2); }

.main-nav.nav-ll .mrow { color: var(--nav-ink-2); font-size: 0.92rem; }

/* One row per section, each one a destination. These were accordion
   headers that opened a list of six; that list lives on the section's
   own page now, so the row goes straight there and the tap it used to
   cost goes with it. Set at the size the accordion header was,
   because that is what it replaces. */
.main-nav.nav-ll .msecs { padding: 10px 16px 8px; }

.main-nav.nav-ll .mrow.msilo {
  padding: 14px 12px;
  border-bottom: 1px solid var(--nav-line);
  border-radius: 0;
  color: var(--nav-ink);
  font-size: 0.97rem;
  font-weight: 600;
}

.main-nav.nav-ll .mrow.msilo:last-child { border-bottom: 0; }

/* nav.css fills these with rgba(47,102,213,.16) — the old blue
   accent again. The fill goes neutral and the accent does its work
   as the marker in the gutter instead. */
.main-nav.nav-ll .mrow:hover,
.main-nav.nav-ll .mrow.active {
  background: var(--nav-surface);
  color: var(--nav-ink);
}

.main-nav.nav-ll .mrow.active {
  position: relative;
  color: #fff;
  font-weight: 600;
}

.main-nav.nav-ll .mrow.active::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--acc-on-dark);
}

.main-nav.nav-ll .mutil a { color: var(--nav-ink-2); }
.main-nav.nav-ll .macts .support { width: 100%; justify-content: center; }

/* --- widths --------------------------------------------------------
   nav.css collapses the bar at 1060px by hiding .browse, .hubs, .vbar,
   .morewrap and Support. My LegiList replaced .morewrap, so it needs
   the same treatment or it sits in the phone bar while also appearing
   in the drawer underneath. */
@media (max-width: 1060px) {
  .main-nav.nav-ll .navlink { display: none; }
}

@media (max-width: 1199px) and (min-width: 1061px) {
  .main-nav.nav-ll .navlink { padding: 0 8px; }
  .main-nav.nav-ll .navitem { padding: 0 10px; }
}