/* ==========================================================================
   ATO navigation 2.0: pill nav, mega menu, rich dropdowns, mobile accordion
   ========================================================================== */

/* Header shell ------------------------------------------------------------ */
.site-header { background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(227,235,231,.9); }
.site-header .wrap { position: relative; min-height: 82px; transition: min-height .25s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(1,38,27,.18); }
.site-header.is-scrolled .wrap { min-height: 68px; }
.site-header .site-branding img, .site-header .site-branding svg { transition: transform .25s ease; transform-origin: left center; }
.site-header.is-scrolled .site-branding img, .site-header.is-scrolled .site-branding svg { transform: scale(.92); }

/* Top-level pill nav ------------------------------------------------------ */
@media (min-width: 981px) {
	.main-nav > ul { gap: 2px; padding: 5px; background: rgba(245,248,247,.9); border: 1px solid var(--ato-line); border-radius: 999px; }
	.main-nav > ul > li > a { position: relative; padding: 9px 15px; border-radius: 999px; font-size: .9rem; font-weight: 700; color: var(--ato-ink); transition: background .2s ease, color .2s ease, box-shadow .2s ease; white-space: nowrap; }
	.main-nav > ul > li > a:hover, .main-nav > ul > li:has(:focus-visible) > a, .main-nav > ul > li.is-hover > a { background: #fff; color: var(--ato-800); box-shadow: 0 1px 2px rgba(1,38,27,.08), 0 4px 12px rgba(1,38,27,.06); }
	.main-nav > ul > li.current-menu-item > a,
	.main-nav > ul > li.current_page_item > a,
	.main-nav > ul > li.current-menu-ancestor > a,
	.main-nav > ul > li.current-menu-parent > a { background: var(--ato-900); color: #fff; box-shadow: 0 6px 16px -6px rgba(1,38,27,.5); }
	.main-nav > ul > li.current-menu-item > a::after, .main-nav > ul > li.current_page_item > a::after { display: none; }
	.main-nav > ul > li.menu-item-has-children > a::after { width: 6px; height: 6px; margin-left: 8px; transition: transform .25s ease; transform: rotate(45deg) translateY(-3px); }
	.main-nav:not(.js-nav) > ul > li.menu-item-has-children:hover > a::after, .main-nav > ul > li.menu-item-has-children.is-hover > a::after,
	.main-nav > ul > li.menu-item-has-children:has(:focus-visible) > a::after { transform: rotate(225deg) translate(-1px, -1px); }
	.main-nav > ul > li.current-menu-ancestor > a::after,
	.main-nav > ul > li.current-menu-parent > a::after { display: inline-block !important; width: 6px; height: 6px; background: none; margin: 0 0 0 8px; border-radius: 0; }

	/* Standard dropdown */
	.main-nav .sub-menu { top: calc(100% + 14px); left: 50%; min-width: 320px; padding: 10px; border: 1px solid var(--ato-line); border-radius: 18px; background: #fff; box-shadow: 0 24px 60px -18px rgba(1,38,27,.28), 0 2px 6px rgba(1,38,27,.05); transform: translate(-50%, 10px) scale(.98); transform-origin: top center; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; display: grid; gap: 2px; }
	.main-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
	.main-nav .sub-menu::after { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--ato-line); border-top: 1px solid var(--ato-line); transform: translateX(-50%) rotate(45deg); }
	.main-nav:not(.js-nav) li:hover > .sub-menu, .main-nav li:has(:focus-visible) > .sub-menu, .main-nav li.is-hover > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
	.main-nav .sub-menu .sub-menu { left: 100%; top: 0; transform: translateX(8px); }
	.main-nav .sub-menu .sub-menu::after { display: none; }
}

/* Rich sub-menu items ----------------------------------------------------- */
.main-nav .sub-menu a { gap: 14px; padding: 10px 12px; border-radius: 12px; font-weight: 600; color: var(--ato-ink); transition: background .18s ease, transform .18s ease; }
.main-nav .sub-menu a:hover { background: var(--ato-bg); }
.main-nav .sub-menu a:hover .submenu-label { color: var(--ato-800); }
.submenu-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, #e9f7f1, #d7f3e8); box-shadow: inset 0 0 0 1px rgba(6,106,76,.08); }
.submenu-icon svg { width: 19px; height: 19px; }
.submenu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.submenu-label { font-weight: 700; font-size: .93rem; display: inline-flex; align-items: center; gap: 8px; }
.submenu-desc { font-family: var(--ato-font); font-weight: 400; font-size: .8rem; line-height: 1.35; color: var(--ato-muted); }
.has-badge .submenu-label::after, .menu-badge { content: "New"; display: inline-block; font: 800 .62rem/1 var(--ato-font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ato-950); background: var(--ato-yellow); padding: 4px 7px; border-radius: 999px; }

/* Mega menu ---------------------------------------------------------------- */
@media (min-width: 981px) {
	.main-nav > ul > li.mega { position: static; }
	.main-nav .mega-panel { position: absolute; top: calc(100% - 4px); left: 50%; width: min(980px, calc(100vw - 40px)); padding-top: 14px; opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; z-index: 100; }
	.main-nav:not(.js-nav) li.mega:hover > .mega-panel, .main-nav li.mega:has(:focus-visible) > .mega-panel, .main-nav li.mega.is-hover > .mega-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
	.mega-inner { display: grid; grid-template-columns: 1fr 300px; background: #fff; border: 1px solid var(--ato-line); border-radius: 22px; box-shadow: 0 30px 80px -24px rgba(1,38,27,.35), 0 2px 6px rgba(1,38,27,.05); overflow: hidden; }
	.mega-main { padding: 22px 22px 18px; }
	.mega-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 10px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--ato-line); }
	.mega-head span { font: 800 .72rem/1 var(--ato-font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--ato-700); }
	.main-nav .mega-head a { display: inline-flex; align-items: center; gap: 6px; padding: 0; font-size: .85rem; font-weight: 700; color: var(--ato-700); background: none; }
	.main-nav .mega-head a:hover { color: var(--ato-900); background: none; }
	.mega-head a svg { width: 15px; height: 15px; transition: transform .2s; }
	.mega-head a:hover svg { transform: translateX(3px); }
	.main-nav .mega-panel .sub-menu { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; transition: none; }
	.main-nav .mega-panel .sub-menu::before, .main-nav .mega-panel .sub-menu::after { display: none; }
	.main-nav .mega-panel .sub-menu a { align-items: flex-start; padding: 12px; }
	.main-nav .mega-panel .sub-menu a:hover { transform: translateY(-1px); }
	.main-nav .mega-panel .submenu-icon { margin-top: 1px; }
}
.mega-promo { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 26px; color: rgba(255,255,255,.8); background: radial-gradient(420px 260px at 100% 0%, rgba(6,214,160,.28), transparent 60%), linear-gradient(160deg, var(--ato-900), var(--ato-950)); overflow: hidden; }
.mega-promo::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; border: 28px solid rgba(6,214,160,.08); }
.mega-promo-tag { align-self: flex-start; font: 800 .66rem/1 var(--ato-font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--ato-950); background: var(--ato-mint); padding: 6px 10px; border-radius: 999px; }
.mega-promo h3 { margin: 12px 0 8px; color: #fff; font-size: 1.35rem; line-height: 1.2; }
.mega-promo h3 em { font-style: normal; color: var(--ato-mint); }
.mega-promo p { margin: 0; font-size: .88rem; line-height: 1.5; }
.mega-promo ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.mega-promo li { display: flex; gap: 8px; align-items: center; font-size: .84rem; color: rgba(255,255,255,.88); }
.mega-promo li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: rgba(6,214,160,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2306d6a0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; }
.main-nav .mega-promo a.mega-promo-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 12px; background: var(--ato-mint); color: var(--ato-950); font-weight: 800; font-size: .9rem; transition: background .2s, transform .2s; }
.main-nav .mega-promo a.mega-promo-btn:hover { background: #fff; color: var(--ato-950); transform: translateY(-1px); }
.mega-promo-btn svg { width: 16px; height: 16px; }

/* Header CTA --------------------------------------------------------------- */
.header-cta { display: flex; align-items: center; gap: 12px; }
.btn-nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--ato-mint); color: var(--ato-950); font: 800 .88rem/1 var(--ato-font-head); white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(6,214,160,.8); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn-nav-cta svg { width: 16px; height: 16px; transition: transform .2s ease; }
.btn-nav-cta:hover { background: var(--ato-mint-d); color: var(--ato-950); transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(6,214,160,.9); }
.btn-nav-cta:hover svg { transform: translateX(3px); }
.btn-nav-cta .cta-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ato-950); box-shadow: 0 0 0 0 rgba(1,26,18,.5); animation: atoPulse 2.2s infinite; }
@keyframes atoPulse { 0% { box-shadow: 0 0 0 0 rgba(1,26,18,.45); } 70% { box-shadow: 0 0 0 7px rgba(1,26,18,0); } 100% { box-shadow: 0 0 0 0 rgba(1,26,18,0); } }
.sub-toggle { display: none; }
@media (max-width: 1480px) and (min-width: 981px) { .site-header .header-cta .header-social { display: none !important; } }
@media (max-width: 1240px) and (min-width: 981px) { .site-header .wrap { gap: 16px; } .main-nav > ul > li > a { padding: 9px 11px; font-size: .86rem; } .btn-nav-cta { padding: 10px 14px; } .btn-nav-cta .cta-dot { display: none; } }
@media (max-width: 1100px) and (min-width: 981px) { .main-nav > ul > li > a { padding: 8px 9px; font-size: .83rem; } .btn-nav-cta { display: none; } }

/* Mobile off-canvas -------------------------------------------------------- */
.nav-backdrop { position: fixed; inset: 0; background: rgba(1,26,18,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; z-index: 94; }
@media (max-width: 980px) {
	.nav-open .nav-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
	.btn-nav-cta { padding: 10px 14px; font-size: .82rem; }
	.btn-nav-cta .cta-dot, .btn-nav-cta .cta-text-long { display: none; }
	.main-nav { width: min(380px, 92vw); padding: 84px 18px 28px; background: #fff; border-radius: 22px 0 0 22px; }
	.main-nav > ul { gap: 4px; }
	.main-nav > ul > li { border-radius: 14px; }
	.main-nav > ul > li > a { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px; border: 0; border-radius: 14px; font-size: 1.02rem; font-weight: 700; }
	.main-nav > ul > li > a:hover { background: var(--ato-bg); }
	.main-nav > ul > li.current-menu-item > a, .main-nav > ul > li.current_page_item > a, .main-nav > ul > li.current-menu-ancestor > a { background: #e9f7f1; color: var(--ato-800); }
	.main-nav .menu-item-has-children > a::after { display: none !important; }
	.main-nav li.menu-item-has-children { position: relative; }
	.sub-toggle { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--ato-bg); color: var(--ato-800); cursor: pointer; display: grid; place-items: center; }
	.sub-toggle::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s; }
	.is-open > .sub-toggle { background: var(--ato-900); color: var(--ato-mint); }
	.is-open > .sub-toggle::before { transform: rotate(225deg) translate(-2px, -2px); }
	.main-nav li.menu-item-has-children > a { padding-right: 56px; }
	.main-nav .sub-menu, .main-nav .mega-panel { display: none; }
	.main-nav .is-open > .sub-menu, .main-nav .is-open > .mega-panel { display: block; animation: atoDrop .25s ease; }
	.main-nav .mega-panel .sub-menu { display: block; }
	.mega-inner { display: block; }
	.mega-main { padding: 0; }
	.mega-head { display: none; }
	.main-nav .sub-menu { padding: 4px 0 8px 6px; }
	.main-nav .sub-menu a { padding: 9px 8px; align-items: center; }
	.submenu-icon { width: 36px; height: 36px; border-radius: 10px; }
	.submenu-desc { display: none; }
	.mega-promo { margin: 6px 0 10px; padding: 18px; border-radius: 16px; gap: 12px; }
	.mega-promo ul, .mega-promo p { display: none; }
	.mega-promo h3 { font-size: 1.05rem; margin: 10px 0 0; }
	.mobile-actions { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ato-line); }
}
@keyframes atoDrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.main-nav *, .site-header *, .btn-nav-cta .cta-dot { animation: none !important; transition: none !important; }
}

/* A closed dropdown must never catch the pointer: children inherit the panel's
   hidden state, and pointer events only work while the panel is open. */
@media (min-width: 981px) {
	.main-nav .mega-panel .sub-menu { visibility: inherit; }
	.main-nav .mega-panel, .main-nav .sub-menu { pointer-events: none; }
	.main-nav li.is-hover > .mega-panel, .main-nav li.is-hover > .sub-menu,
	.main-nav li:has(:focus-visible) > .mega-panel, .main-nav li:has(:focus-visible) > .sub-menu,
	.main-nav:not(.js-nav) li:hover > .mega-panel, .main-nav:not(.js-nav) li:hover > .sub-menu,
	.main-nav li.is-hover > .mega-panel .sub-menu { pointer-events: auto; }
}