/* ==========================================================================
   cr-nav.css — dropdown header nav + 3-way "Schedule" menu (2026-10-16).
   Shared by every page's .cx-nav (eco-chrome.js markup) and the homepage's
   .hx-nav. Top level is now: Services ▾ · What we accept · Sell hardware ·
   Company ▾, plus phone + Schedule ▾ (Pickup / Recycling Event / Collection
   Bins). Behaviour: assets/js/cr-nav.js (click, hover, Esc, outside click).
   Before the script runs, :hover / :focus-within still open the panels.
   ========================================================================== */
.crn-dd { position: relative; display: inline-flex; align-items: center; }
.crn-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 10px 13px; border: 0; border-radius: 999px;
  background: transparent; color: #26352b; font: 600 15px/1 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  white-space: nowrap; cursor: pointer; transition: background .2s, color .2s;
}
.crn-car { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.crn-dd.is-open > :is(.crn-btn, .crn-btn--book) .crn-car { transform: rotate(180deg); }

/* Triggers inside the sitewide header */
.cx-links .crn-btn:hover, .cx-links .crn-dd.is-open > .crn-btn { background: #f3f7f0; color: #07130b; }
.cx-links .crn-btn.has-current { color: #087a35; }
[data-theme="dark"] .cx-links .crn-btn { color: rgba(255, 255, 255, .82); }
[data-theme="dark"] .cx-links .crn-btn:hover, [data-theme="dark"] .cx-links .crn-dd.is-open > .crn-btn { background: rgba(255, 255, 255, .08); color: #fff; }
[data-theme="dark"] .cx-links .crn-btn.has-current { color: #b9f24a; }
/* "Schedule ▾" keeps the green .cx-book look */
button.cx-book.crn-btn--book { border: 0; gap: 8px; cursor: pointer; font: 700 15px/1 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
button.cx-book.crn-btn--book:hover, .crn-dd.is-open > button.cx-book.crn-btn--book { background: #066a2d; color: #fff; }
/* Fewer links now, so the phone number fits again down to the burger breakpoint */
@media (min-width: 1081px) { .cx-nav .cx-phone { display: inline-flex !important; } .cx-nav .cx-burger { display: none; } }

/* Triggers inside the homepage header (transparent over the hero, light once stuck) */
.hx-links .crn-btn { padding: 10px 14px; color: rgba(255, 255, 255, .9); }
.hx-links .crn-btn:hover, .hx-links .crn-dd.is-open > .crn-btn { background: rgba(255, 255, 255, .12); color: #fff; }
.hx-nav.is-stuck .hx-links .crn-btn { color: #26352b; }
.hx-nav.is-stuck .hx-links .crn-btn:hover, .hx-nav.is-stuck .hx-links .crn-dd.is-open > .crn-btn { background: #f3f7f0; color: #07130b; }
html[data-theme="dark"] .hx-nav.is-stuck .hx-links .crn-btn { color: rgba(255, 255, 255, .84); }
html[data-theme="dark"] .hx-nav.is-stuck .hx-links .crn-btn:hover, html[data-theme="dark"] .hx-nav.is-stuck .hx-links .crn-dd.is-open > .crn-btn { background: rgba(255, 255, 255, .08); color: #fff; }
button.hx-btn.crn-btn--book { border: 0; gap: 8px; cursor: pointer; }

/* ─── Panels ───────────────────────────────────────────────────────────── */
.crn-panel {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 1001; width: 300px; padding: 10px;
  border-radius: 22px; background: #fff; border: 1px solid #e2e8df; text-align: left;
  box-shadow: 0 30px 70px -24px rgba(7, 19, 11, .38), 0 2px 6px rgba(7, 19, 11, .06);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .18s, transform .25s cubic-bezier(.2, .8, .2, 1), visibility .18s;
}
.crn-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.crn-panel--wide { width: 620px; left: -14px; transform: translateY(8px); }
.crn-panel--end { left: auto; right: 0; width: 330px; transform: translateY(8px); }
.crn-dd.is-open > .crn-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.crn-dd.is-open > .crn-panel--wide, .crn-dd.is-open > .crn-panel--end { transform: none; }
html:not(.crn-js) .crn-dd:hover > .crn-panel, html:not(.crn-js) .crn-dd:focus-within > .crn-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
html:not(.crn-js) .crn-dd:hover > :is(.crn-panel--wide, .crn-panel--end), html:not(.crn-js) .crn-dd:focus-within > :is(.crn-panel--wide, .crn-panel--end) { transform: none; }

.crn-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.crn-h { margin: 8px 12px 6px !important; font: 700 11.5px/1 'DM Sans', system-ui, sans-serif !important; letter-spacing: .14em; text-transform: uppercase; color: #5b6b60 !important; }
:is(.cx-links, .hx-links, .cx-cta, .hx-nav-cta) .crn-panel a.crn-item {
  display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 10px 12px; border-radius: 14px;
  background: transparent; color: #07130b !important; text-decoration: none !important; white-space: normal;
  font: 500 14px/1.3 'DM Sans', system-ui, sans-serif; box-shadow: none; transform: none; transition: background .15s;
}
:is(.cx-links, .hx-links, .cx-cta, .hx-nav-cta) .crn-panel a.crn-item:hover { background: #f3f7f0; }
:is(.cx-links, .hx-links, .cx-cta, .hx-nav-cta) .crn-panel a.crn-item[aria-current="page"] { background: #e9f6e6; }
.crn-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #eaf6e6; color: #087a35; }
.crn-ic svg { width: 20px; height: 20px; }
.crn-item > span:last-child { display: block; min-width: 0; padding-top: 1px; }
.crn-item b { display: block; font: 700 15px/1.2 'Outfit', 'DM Sans', system-ui, sans-serif; letter-spacing: -.01em; color: inherit; }
.crn-item small { display: block; margin-top: 3px; font: 500 13px/1.35 'DM Sans', system-ui, sans-serif; color: #5b6b60; }
.crn-new { display: inline-block; margin-left: 7px; padding: 3px 7px; border-radius: 99px; background: #b9f24a; color: #05200d; font: 800 10px/1 'DM Sans', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.crn-panel--plain a.crn-item { padding: 11px 14px; }
.crn-panel--book .crn-ic { width: 42px; height: 42px; background: #087a35; color: #fff; }
.crn-panel--book a.crn-item:hover .crn-ic { background: #0fa24a; }
.crn-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 6px; padding: 12px 12px 4px; border-top: 1px solid #e2e8df; }
:is(.cx-links, .hx-links, .cx-cta, .hx-nav-cta) .crn-foot a {
  margin: 0; padding: 0; border-radius: 0; background: none !important; box-shadow: none;
  color: #087a35 !important; text-decoration: none !important; font: 700 14px/1.2 'DM Sans', system-ui, sans-serif;
}
:is(.cx-links, .hx-links, .cx-cta, .hx-nav-cta) .crn-foot a:hover { text-decoration: underline !important; }

/* Dark theme panels */
[data-theme="dark"] .crn-panel { background: #0b1d12; border-color: rgba(255, 255, 255, .1); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .8); }
[data-theme="dark"] .crn-h { color: rgba(255, 255, 255, .5) !important; }
[data-theme="dark"] :is(.cx-links, .hx-links, .cx-cta, .hx-nav-cta) .crn-panel a.crn-item { color: #fff !important; }
[data-theme="dark"] :is(.cx-links, .hx-links, .cx-cta, .hx-nav-cta) .crn-panel a.crn-item:hover { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] :is(.cx-links, .hx-links, .cx-cta, .hx-nav-cta) .crn-panel a.crn-item[aria-current="page"] { background: rgba(185, 242, 74, .1); }
[data-theme="dark"] .crn-item small { color: rgba(255, 255, 255, .6); }
[data-theme="dark"] .crn-ic { background: rgba(185, 242, 74, .12); color: #b9f24a; }
[data-theme="dark"] .crn-panel--book .crn-ic { background: #b9f24a; color: #05200d; }
[data-theme="dark"] .crn-foot { border-color: rgba(255, 255, 255, .1); }
[data-theme="dark"] :is(.cx-links, .hx-links, .cx-cta, .hx-nav-cta) .crn-foot a { color: #b9f24a !important; }

/* ─── Mobile menu ──────────────────────────────────────────────────────── */
.crn-mh { margin: 0 4px 10px !important; font: 700 12px/1 'DM Sans', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #5b6b60; }
.crn-mbook { display: grid; gap: 8px; margin-bottom: 10px; }
a.crn-mb {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; border: 1.5px solid #e2e8df; background: #fff;
  color: #07130b !important; text-decoration: none !important; transition: border-color .2s, background .2s;
}
a.crn-mb:hover, a.crn-mb:focus-visible { border-color: #0fa24a; }
a.crn-mb[aria-current="page"] { border-color: #0fa24a; background: #f3f7f0; }
.crn-mb .crn-ic { width: 46px; height: 46px; border-radius: 14px; background: #087a35; color: #fff; }
.crn-mb .crn-ic svg { width: 22px; height: 22px; }
.crn-mb > span:nth-child(2) { flex: 1; min-width: 0; }
.crn-mb b { display: block; font: 800 18px/1.15 'Outfit', 'DM Sans', system-ui, sans-serif; letter-spacing: -.01em; }
.crn-mb small { display: block; margin-top: 3px; font: 500 13.5px/1.3 'DM Sans', system-ui, sans-serif; color: #5b6b60; }
.crn-mb::after, .crn-acc > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; transform: rotate(45deg); opacity: .55; }
.crn-acc { border-bottom: 1px solid #e2e8df; }
.crn-acc > summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; list-style: none; cursor: pointer; color: #07130b; font: 700 21px/1.2 'Outfit', 'DM Sans', system-ui, sans-serif; letter-spacing: -.01em; }
.crn-acc > summary::-webkit-details-marker { display: none; }
.crn-acc > summary::after { transform: rotate(135deg); transition: transform .25s; }
.crn-acc[open] > summary::after { transform: rotate(-45deg); }
.crn-acc-in { display: grid; padding: 0 4px 12px; }
.crn-acc-in a { display: flex; align-items: center; gap: 8px; padding: 11px 0; color: #26352b !important; text-decoration: none !important; font: 600 16.5px/1.2 'DM Sans', system-ui, sans-serif; }
.crn-acc-in a[aria-current="page"] { color: #087a35 !important; }
.crn-acc-in .crn-new { margin-left: 0; }
/* homepage menu uses a 22px link size */
.hx-menu-in .crn-acc > summary { font-size: 22px; }

[data-theme="dark"] .crn-mh { color: rgba(255, 255, 255, .55); }
[data-theme="dark"] a.crn-mb { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #fff !important; }
[data-theme="dark"] a.crn-mb[aria-current="page"] { border-color: #b9f24a; background: rgba(185, 242, 74, .08); }
[data-theme="dark"] .crn-mb .crn-ic { background: #b9f24a; color: #05200d; }
[data-theme="dark"] .crn-mb small { color: rgba(255, 255, 255, .6); }
[data-theme="dark"] .crn-acc { border-color: rgba(255, 255, 255, .1); }
[data-theme="dark"] .crn-acc > summary { color: #fff; }
[data-theme="dark"] .crn-acc-in a { color: rgba(255, 255, 255, .8) !important; }
[data-theme="dark"] .crn-acc-in a[aria-current="page"] { color: #b9f24a !important; }

/* ─── Footer: new "Book a service" column (5 columns) ─────────────────── */
.cx-foot-grid, .hx-foot-grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1080px) { .cx-foot-grid, .hx-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cx-foot-grid, .hx-foot-grid { grid-template-columns: 1fr; gap: 30px; } }

@media (prefers-reduced-motion: reduce) { .crn-panel, .crn-car, .crn-acc > summary::after { transition: none; } }
@media print { .crn-panel { display: none !important; } }