/* ==========================================================================
   PAconnect — primary navigation and Services mega menu.
   Loads after styles.css.

   Dark by default, because the header is (see styles.css). There is no
   light/dark skin split: the prototype had one so both could be compared,
   and that comparison is settled.

   Structure: Services and Company are <button> triggers that open a
   full-width panel; Why PAconnect is a plain link. Below 1025px the panels
   are never shown and the mobile accordion takes over.
   ========================================================================== */

/* --------------------------------------------------- trigger buttons --- */

/* Matches .site-nav a exactly, so a trigger and a plain link are
   indistinguishable until you interact with them. */
.site-nav .nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-200);
  padding: 0 0 3px;
  border-bottom: 2px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.site-nav .nav-trigger:hover,
.site-nav .nav-trigger[aria-expanded="true"] {
  color: var(--green-400);
  border-bottom-color: var(--gold-500);
}
.nav-trigger__caret { transition: transform 200ms var(--ease); }
.nav-trigger[aria-expanded="true"] .nav-trigger__caret { transform: rotate(180deg); }

/* ------------------------------------------------------- the panel ----- */

/* The header is sticky and therefore positioned, so the panel hangs off it
   full-bleed with no extra wrapper. */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ink-950);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 3px solid var(--gold-500);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
  z-index: 45;
  animation: megaIn 180ms var(--ease) both;
}
.mega[hidden] { display: none; }

@keyframes megaIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.mega__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 34px 20px 4px;
}

.mega__grid {
  display: grid; gap: 32px;
  grid-template-columns: repeat(4, 1fr);
}

.mega__col { min-width: 0; }

/* The column head is a plain label, not a link — the four category pages
   don't exist yet, and a head with link affordance that goes nowhere
   invites a click and does nothing.

   What was the hover state is now the resting state: green headline over a
   gold rule. Nothing responds to the pointer, so nothing implies a click,
   and the green does the work of setting the header off from the white
   service names beneath it.

   If category pages are built later this becomes an <a> again — note the
   URL would need a real name (/managed-services.html), since "run" is a
   good label and a poor page. */
.mega__head {
  display: flex; flex-direction: column; gap: 6px;
  cursor: default;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 2px solid var(--gold-500);
}
.mega__head .eyebrow { color: var(--gold-400); }
.mega__head-line {
  font-family: 'Oswald', sans-serif;
  font-size: 17px; font-weight: 500; letter-spacing: .01em;
  color: var(--green-400);
}

.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li + li { margin-top: 2px; }

.mega__list a {
  display: block;
  padding: 9px 10px;
  margin-left: -10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 150ms var(--ease);
}
.mega__list a:hover { background: rgba(255, 255, 255, .07); }

.mega__item {
  display: block;
  font-size: 15px; font-weight: 700;
  color: var(--white);
  margin-bottom: 2px;
}
.mega__list a:hover .mega__item { color: var(--green-400); }
.mega__list a[aria-current="page"] .mega__item { color: var(--green-400); }

.mega__desc {
  display: block;
  font-size: 13px; line-height: 1.5;
  color: var(--ink-300);
}

/* The single-source argument, stated once where the breadth is visible.
   Sits outside .mega__inner so the band runs edge to edge while its text
   still lines up with the columns above. */
.mega__foot {
  margin-top: 26px;
  background: var(--ink-900);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.mega__foot-inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
}
.mega__foot-text { font-size: 14px; color: var(--ink-300); }
.mega__foot-text strong { color: var(--white); }
.mega__foot-cta {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--gold-400); text-decoration: none;
  white-space: nowrap;
}
.mega__foot-cta:hover { color: var(--gold-500); text-decoration: underline; }

/* The Company panel used to be a narrow block hugging the right, on the theory
   that four short links spanning the full shell would leave a wide gap. Two
   problems with that: .mega is `left: 0; right: 0`, so `margin-right: 0` pinned
   it to the VIEWPORT edge rather than the shell — at 1920px it finished 373px
   past where the header's own content ends — and the gap it avoided on the
   right simply reappeared, larger, on the left.

   It now runs four across on the same grid as the Services panel, one item per
   column, so it inherits the centred shell and lines up with everything else.
   The alignment problem disappears rather than being corrected.

   It carries no .mega__foot band, and .mega__inner's 4px bottom padding assumes
   one follows, so it needs its own. */
#mega-company .mega__inner { padding-bottom: 26px; }

/* ------------------------------------------------ mobile accordion ----- */

.m-acc__trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--white);
  padding: 14px 0;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.m-acc__trigger::after {
  content: ""; flex: none; width: 12px; height: 12px;
  background:
    linear-gradient(var(--gold-500), var(--gold-500)) center / 12px 2px no-repeat,
    linear-gradient(var(--gold-500), var(--gold-500)) center / 2px 12px no-repeat;
}
.m-acc__trigger[aria-expanded="true"]::after {
  background: linear-gradient(var(--gold-500), var(--gold-500)) center / 12px 2px no-repeat;
}
.m-acc__panel {
  padding: 4px 0 12px 12px;
  border-left: 2px solid rgba(255, 255, 255, .16);
}
.m-acc__panel[hidden] { display: none; }
.m-acc__panel .eyebrow {
  display: block; margin: 14px 0 4px;
  color: var(--gold-400);
}
.m-acc__panel .eyebrow:first-child { margin-top: 6px; }
/* Sentence case here: fifteen uppercase items in a column is a wall. */
.m-acc__panel a {
  min-height: 42px;
  font-size: 14px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  border-bottom: 0;
}

/* Below the header breakpoint the desktop panels never show. */
/* Below this the mobile accordion takes over, so the panels must not exist.
   Boundary is shared with the header collapse in styles.css — the two are one
   decision, not two. See the note there. */
@media (max-width: 819px) {
  .mega { display: none !important; }
}

/* Density band. Extended down to 820 when the header breakpoint moved, so the
   four columns keep their tighter gap and descriptor size all the way to the
   narrowest width the panel now has to survive. */
@media (max-width: 1150px) and (min-width: 820px) {
  .mega__grid { gap: 22px; }
  .mega__desc { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .mega { animation: none; }
  .nav-trigger__caret { transition: none; }
}