/* ==========================================================================
   Header, navigation, mega menu, footer.

   BREAKPOINT WARNING: the desktop-to-mobile switch is 1199px and that number
   lives in THIS file AND in assets/js/site.js. Move both together or the
   hamburger and the panel disagree about which one is on screen.
   ========================================================================== */

.ge-header { position: sticky; top: 0; z-index: 100; }

/* --- Utility bar --------------------------------------------------------- */
.ge-util { background: var(--ge-green-950); color: #b6cdae; font-size: .87rem; }
.ge-util__in { display: flex; align-items: center; gap: 22px; min-height: 40px; flex-wrap: wrap; }
.ge-util__note { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
.ge-util__note .ge-icon { width: 15px; height: 15px; color: var(--ge-green-400); }
.ge-util a { color: #d3e6cc; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.ge-util a:hover { color: #fff; text-decoration: underline; }
.ge-util a .ge-icon { width: 15px; height: 15px; color: var(--ge-gold-400); }
@media (max-width: 720px) { .ge-util__note { display: none; } .ge-util__in { justify-content: space-between; } }

/* --- Main bar ------------------------------------------------------------ */
.ge-bar { background: #fff; box-shadow: 0 1px 0 var(--ge-line), 0 6px 24px -14px rgba(14,43,9,.4); }
.ge-bar__in { display: flex; align-items: center; gap: 26px; min-height: var(--ge-header-h); }
.ge-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.ge-logo .ge-mark { height: 50px; width: auto; }
.ge-logo__txt { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.ge-logo__name {
  font-family: var(--ge-head); font-weight: 600; font-size: 1.44rem;
  color: var(--ge-green-800); letter-spacing: .015em; text-transform: uppercase;
}
.ge-logo__sub { font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ge-gold-700); margin-top: 5px; font-weight: 700; }  /* gold-600 was 4.29:1 on white */

.ge-nav { margin-left: auto; }
.ge-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.ge-nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ge-head); font-weight: 500; font-size: 1.03rem;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ge-ink); text-decoration: none; padding: 30px 12px; border: 0;
  background: none; cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .16s var(--ge-ease), border-color .16s var(--ge-ease);
}
.ge-nav__link:hover, .ge-nav__link[aria-expanded="true"] { color: var(--ge-green-700); border-bottom-color: var(--ge-green-500); }
.ge-nav__link .ge-caret { width: 10px; height: 10px; transition: transform .18s var(--ge-ease); opacity: .6; }
.ge-nav__link[aria-expanded="true"] .ge-caret { transform: rotate(180deg); }
.ge-nav__item { position: relative; }
/* NOT a direct-child selector any more. Splitting the three mega-menu labels
   into a link plus a caret button put .ge-nav__link inside .ge-nav__pair, so a
   `>` combinator stopped reaching it and the current-page indicator silently
   vanished from Services, Industries and Service Areas — the three items it
   mattered most on. Markup moved, selector did not. */
.ge-nav__item--on .ge-nav__link { color: var(--ge-green-700); border-bottom-color: var(--ge-lime); }
@media (min-width: 1200px) and (max-width: 1399px) {
  .ge-bar__in { gap: 16px; }
  .ge-nav__link { font-size: .96rem; padding: 30px 8px; }
}

.ge-bar__cta { flex: none; }
@media (max-width: 1199px) { .ge-bar__cta { display: none; } }

/* --- Mega menu -----------------------------------------------------------
   ANCHORED TO THE BAR, NOT TO THE NAV ITEM. Anchored to its own item, the
   Service Areas panel (`right: 0`, up to 1040px wide) grew leftwards from an
   item sitting two thirds across the bar and ran clean off the left edge of the
   viewport, taking half its city list with it. Centred on the page instead, a
   panel is the same width as the content column and cannot overflow either
   side, whichever of the three items opens it.

   The nav item must therefore NOT be a containing block on desktop. */
.ge-bar { position: relative; }
@media (min-width: 1200px) { .ge-nav__item { position: static; } }

.ge-mega {
  position: absolute; left: 50%; translate: -50% 0; top: 100%;
  width: min(calc(100vw - var(--ge-gut) * 2), var(--ge-wrap));
  /* Nor may anything sit below the fold: Service Areas is the tall one, and on a
     short laptop screen its last row was unreachable. */
  max-height: calc(100vh - var(--ge-header-h) - 52px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--ge-white); color: var(--ge-ink);
  border-top: 4px solid var(--ge-green-600); box-shadow: var(--ge-shadow-lg);
  padding: 26px 28px 22px; display: none; z-index: 120;
}
.ge-mega[data-open="true"] { display: block; animation: ge-drop .16s var(--ge-ease); }
@keyframes ge-drop { from { opacity: 0; translate: -50% -6px; } to { opacity: 1; translate: -50% 0; } }

.ge-mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 20px 26px; }
/* Eight states divide into four columns exactly; auto-fit gave six and left the
   second row two thirds empty. */
.ge-mega--areas .ge-mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1320px) { .ge-mega--areas .ge-mega__grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.ge-mega__col > h3 {
  font-family: var(--ge-head); font-size: .84rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ge-green-700); margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--ge-green-200);
}
.ge-mega__col > h3 a { color: inherit; text-decoration: none; }
.ge-mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.ge-mega__col a {
  display: block; padding: 5px 8px; margin-left: -8px; border-radius: var(--ge-r);
  color: var(--ge-ink-2); text-decoration: none; font-size: .93rem; line-height: 1.34;
  transition: background .14s var(--ge-ease), color .14s var(--ge-ease);
}
.ge-mega__col a:hover { background: var(--ge-green-100); color: var(--ge-green-800); }
.ge-mega__foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ge-line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ge-mega__foot p { margin: 0; font-size: .92rem; color: var(--ge-ink-3); max-width: 58ch; }

/* --- Hamburger + mobile panel -------------------------------------------- */
.ge-burger {
  display: none; margin-left: auto; align-items: center; gap: 8px;
  background: var(--ge-green-600); border: 0; color: #fff;
  font-family: var(--ge-head); font-weight: 500; font-size: 1rem;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 11px 16px; border-radius: var(--ge-r); cursor: pointer;
}
.ge-burger:hover { background: var(--ge-green-700); }
@media (max-width: 1199px) {
  .ge-nav { display: none; }
  .ge-burger { display: inline-flex; }
  .ge-bar__in { min-height: 70px; }
  .ge-logo .ge-mark { height: 40px; }
}
@media (max-width: 520px) {
  .ge-bar__in { gap: 12px; }
  .ge-logo { min-width: 0; }
  .ge-logo__name { font-size: 1.2rem; white-space: nowrap; }
  .ge-logo__sub { display: none; }
  .ge-burger { padding: 10px 13px; flex: none; }
}
@media (max-width: 380px) {
  .ge-burger { padding: 11px; }
  .ge-burger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ge-burger .ge-icon { width: 22px; height: 22px; }
}

.ge-panel {
  position: fixed; inset: 0; z-index: 150; background: var(--ge-green-900);
  overflow-y: auto; overscroll-behavior: contain; display: none; padding-bottom: 40px;
}
.ge-panel[data-open="true"] { display: block; }
.ge-panel__top {
  position: sticky; top: 0; background: #fff; z-index: 2;
  display: flex; align-items: center; min-height: 70px;
  box-shadow: 0 1px 0 var(--ge-line);
}
.ge-panel__close {
  margin-left: auto; background: var(--ge-green-600); border: 0; color: #fff;
  border-radius: var(--ge-r); padding: 11px 16px; cursor: pointer;
  font-family: var(--ge-head); font-weight: 500; font-size: 1rem;
  letter-spacing: .07em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.ge-panel__body { padding-top: 20px; }
.ge-acc { border-bottom: 1px solid rgba(255,255,255,.14); }
.ge-acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: 0; color: #fff; cursor: pointer; text-align: left;
  font-family: var(--ge-head); font-weight: 500; font-size: 1.28rem;
  letter-spacing: .05em; text-transform: uppercase; padding: 16px 2px;
}
.ge-acc__btn .ge-icon { width: 20px; height: 20px; color: var(--ge-green-300); transition: transform .2s var(--ge-ease); }
.ge-acc__btn[aria-expanded="true"] .ge-icon { transform: rotate(45deg); }
.ge-acc__panel { display: none; padding: 0 0 14px; }
.ge-acc__panel[data-open="true"] { display: block; }
.ge-acc__panel ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 1px; }
.ge-acc__panel h4 {
  font-family: var(--ge-head); font-size: .76rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ge-gold-400); margin: 12px 0 7px;
}
.ge-acc__panel a { display: block; padding: 8px 12px; color: #c4dabb; text-decoration: none; border-radius: var(--ge-r); font-size: .96rem; }
.ge-acc__panel a:hover { background: rgba(255,255,255,.1); color: #fff; }
.ge-panel__cta { margin-top: 24px; display: grid; gap: 10px; }
body.ge-locked { overflow: hidden; }

/* --- Footer -------------------------------------------------------------- */
.ge-foot { background: var(--ge-green-950); color: #a3bd9a; padding-block: clamp(44px, 5vw, 70px) 0; }
/* THIS was the "reflow 320" finding carried in the notes from round 3 onward,
   and it was misdiagnosed the whole time as the mobile nav panel — the text
   "Waste Management / All waste management" appears in both the footer and the
   panel, and I matched the wrong one. It is the footer: a 230px track plus a
   150px track plus a 28px gap needs 408px, against roughly 288px of content
   width at a 320px viewport, so the page scrolled sideways on a small phone.
   One column below 600px. */
.ge-foot__grid { display: grid; grid-template-columns: minmax(230px, 1.2fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 34px 28px; }
@media (max-width: 600px) { .ge-foot__grid { grid-template-columns: 1fr; gap: 26px; } }
.ge-foot h3 {
  font-family: var(--ge-head); font-size: .8rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ge-gold-400); margin: 0 0 12px;
}
.ge-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ge-foot a { color: #b4cbab; text-decoration: none; font-size: .93rem; }
.ge-foot a:hover { color: #fff; text-decoration: underline; }
/*
 * The division link carries an icon. site.css sets `img, svg, video, iframe
 * { display: block }`, which is right everywhere else because every other icon
 * in the theme sits inside a flex container; here the anchor is plain inline,
 * so the block svg took its own line. inline-flex puts the mark back beside
 * the word, and the icon is sized to the 0.93rem footer text rather than the
 * 24px grid, which is drawn for buttons and badges.
 */
.ge-foot__ext { display: inline-flex; align-items: center; gap: 6px; }
.ge-foot__ext .ge-icon { width: 15px; height: 15px; stroke-width: 2; }
.ge-foot__brand p { font-size: .93rem; line-height: 1.58; max-width: 42ch; }
.ge-foot__logo { margin-bottom: 14px; }
.ge-foot__offices { display: grid; gap: 16px; margin-top: 18px; }
.ge-foot__office { padding-left: 14px; border-left: 3px solid var(--ge-green-600); }
.ge-foot__office strong { color: #fff; display: block; font-family: var(--ge-head); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }
.ge-foot__office span { display: block; font-size: .9rem; line-height: 1.5; }
.ge-foot__office a { font-weight: 700; color: var(--ge-green-300); }
.ge-foot__bar {
  margin-top: clamp(32px, 4vw, 50px); padding-block: 20px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-size: .86rem;
}
.ge-foot__bar p { margin: 0; }
.ge-foot__bar nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 18px; }

/* The label navigates, the caret discloses — see the note in header.php.
   They have to read as one item, so the pair carries the hover and current
   states that the single button used to. */
.ge-nav__pair { display: inline-flex; align-items: center; }
.ge-nav__pair .ge-nav__link { padding-right: 4px; }
.ge-nav__caret {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: inherit;
  padding: 6px 8px 6px 2px; line-height: 0;
}
.ge-nav__caret .ge-caret { transition: transform .18s var(--ge-ease); }
.ge-nav__caret[aria-expanded="true"] .ge-caret { transform: rotate(180deg); }