/* EcoNexus — shared styles that sit alongside Tailwind utilities */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; }

/* image placeholder while photos load / if blocked */
.media-bg { background: linear-gradient(135deg, #0B4D3B 0%, #12604A 45%, #1F4E9E 100%); }

/* hero overlays */
.shade-hero { background: linear-gradient(90deg, rgba(4,27,20,.90) 0%, rgba(4,27,20,.66) 42%, rgba(4,27,20,.20) 100%), linear-gradient(0deg, rgba(4,27,20,.70) 0%, transparent 45%); }
.shade-bottom { background: linear-gradient(0deg, rgba(4,27,20,.92) 0%, rgba(4,27,20,.45) 50%, rgba(4,27,20,.05) 100%); }
.grad-text { background: linear-gradient(95deg, #5FD68A, #5BB8E6 60%, #9CC0FF); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* header states */
#siteHeader { transition: background-color .3s, box-shadow .3s; }
#siteHeader .topbar { transition: max-height .3s, opacity .3s; max-height: 72px; overflow: hidden; }
#siteHeader.is-solid { background: rgba(255,255,255,.97); backdrop-filter: blur(10px); box-shadow: 0 1px 0 #DCE6D8, 0 8px 24px -16px rgba(4,27,20,.25); }
#siteHeader.is-solid .topbar { max-height: 0; opacity: 0; }
#siteHeader.is-solid .main-logo { display: flex; } /* top-bar logo collapses on scroll, so bring the header logo back */
/* header logo: light mark + white wordmark over the dark hero; full-colour SVG logo on the white scrolled header */
#siteHeader .main-logo .logo-solid { display: none; }
#siteHeader.is-solid .main-logo .logo-light { display: none; }
#siteHeader.is-solid .main-logo .logo-solid { display: block; }
#siteHeader.is-solid .nav-link { color: #000; }
#siteHeader.is-solid .nav-link:hover, #siteHeader.is-solid .nav-link[aria-current="page"] { color: #0A7F3B; }
#siteHeader.is-solid .wm-eco { color: #10A34A; }
#siteHeader.is-solid .wm-nexus, #siteHeader.is-solid .wm-sub { color: #1F4E9E; }
#siteHeader.is-solid .menu-btn { color: #000; border-color: #DCE6D8; }
.nav-link[aria-current="page"] { color: #5FD68A; }

/* main menu: type grows with the screen (page + header width is 1600px, set as max-w-site in tailwind-config.js).
   Sizes were measured in Chrome so the menu + logo (after scroll) + Contact button never overflow. */
nav[aria-label="Main"] { font-size: 18px; }
nav[aria-label="Main"] .nav-link { padding-left: 8px; padding-right: 8px; }
@media (min-width: 1340px) { nav[aria-label="Main"] { font-size: 20px; } }
@media (min-width: 1480px) { nav[aria-label="Main"] { font-size: 21px; } nav[aria-label="Main"] .nav-link { padding-left: 10px; padding-right: 10px; } }
@media (min-width: 1580px) { nav[aria-label="Main"] { font-size: 22px; } }
/* dropdown panels keep their own size - they shouldn't grow with the top-level menu text */
nav[aria-label="Main"] .dd-panel { font-size: 17px; }

/* dropdowns: hover on desktop, focus-within for keyboard */
.dd { position: relative; }
/* slide-in uses `translate`, not `transform`, so Tailwind's translate utilities on the panel are never overridden */
.dd-panel { visibility: hidden; opacity: 0; translate: 0 6px; transition: opacity .18s, translate .18s, visibility .18s; }
.dd:hover .dd-panel, .dd:focus-within .dd-panel { visibility: visible; opacity: 1; translate: 0 0; }

/* wide Services / Solutions panels hang from the right edge of the menu, so they never leave the screen */
nav[aria-label="Main"] { position: relative; }
/* (matched by the wide panel itself, not menu position, so adding/removing menu items can't break it) */
nav[aria-label="Main"] > .dd:has(> .dd-panel.left-1\/2) { position: static; }
nav[aria-label="Main"] > .dd > .dd-panel.left-1\/2 { left: auto; right: 0; --tw-translate-x: 0; }

/* never taller than the window: below the header (top bar 65px + header 78px + 12px gap), scroll inside if needed */
.dd-panel > div { max-height: calc(100vh - 175px); overflow-y: auto; overscroll-behavior: contain; }
#siteHeader.is-solid .dd-panel > div { max-height: calc(100vh - 110px); }

/* short screens (e.g. 1366x768 laptops): tighter mega-menu rows so most of it fits without scrolling */
@media (max-height: 820px) {
  .dd-panel .p-4 { padding: 10px; }
  .dd-panel a.flex.gap-3 { padding-top: 7px; padding-bottom: 7px; }
  .dd-panel a.min-h-\[260px\] { min-height: 0; }
}

/* reveal on scroll (visible by default; JS adds .pre only to off-screen items) */
.reveal { transition: opacity .8s ease, transform .8s ease; }
.reveal.pre { opacity: 0; transform: translateY(22px); }

/* lifecycle */
.stage-tab[aria-selected="true"] { background: #0A7F3B; color: #fff; border-color: #0A7F3B; } /* = bg-eco */
.stage-tab[aria-selected="true"]:hover { background: #055A2C; border-color: #055A2C; } /* = hover:bg-eco-600 */
.stage-tab[aria-selected="true"] .n { color: rgba(255,255,255,.75); }

/* inquiry chips */
.area input:checked + span { background: #0A7F3B; color: #fff; border-color: #0A7F3B; } /* = bg-eco */
.area input:focus-visible + span { outline: 3px solid #5BB8E6; outline-offset: 2px; }

/* marquee */
.marquee { animation: marq 45s linear infinite; }
@keyframes marq { to { transform: translateX(-50%); } }

/* accordions */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }

/* low-carbon mode + reduced motion */
body.eco video { display: none !important; }
body.eco .marquee, body.eco .reveal { animation: none !important; transition: none !important; }
body.eco .reveal.pre { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee { animation: none; }
  .reveal, .reveal.pre { opacity: 1 !important; transform: none !important; transition: none; }
}

:focus-visible { outline: 3px solid #5BB8E6; outline-offset: 2px; }

/* keep the hidden attribute authoritative over Tailwind display utilities */
[hidden] { display: none !important; }

/* header, page body + footer share one side padding so their edges line up.
   Grows with the screen: 16px on phones, ~68px on a 1366 laptop, 96px max on wide screens. */
#siteHeader .max-w-site, main .max-w-site, footer .max-w-site { padding-left: clamp(16px, 5vw, 96px); padding-right: clamp(16px, 5vw, 96px); }