/* MGK Pools header + navigation, 10/2026. Scoped to .mgk-nav-on / .mgk-nav. */
:root {
	--mgk-nav-surface: #ffffff;
	--mgk-nav-text: #17252d;
	--mgk-nav-muted: #52616b;
	--mgk-nav-border: #dce5ea;
	--mgk-nav-hover: #eef6fa;
	--mgk-nav-accent: #0068a8;
	--mgk-nav-accent-hover: #005487;
	--mgk-nav-focus: #005487;
	--mgk-nav-radius: 6px;
	--mgk-nav-panel-radius: 8px;
	--mgk-nav-shadow: 0 12px 28px rgba(23, 37, 45, 0.12);
	--mgk-nav-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--mgk-nav-main-h: 80px;
	--mgk-nav-utility-h: 32px;
	--mgk-nav-offset: 0px;
	--mgk-nav-t: 150ms;
}
body.admin-bar { --mgk-nav-offset: 32px; }
@media (max-width: 782px) { body.admin-bar { --mgk-nav-offset: 46px; } }
@media (prefers-reduced-motion: reduce) { :root { --mgk-nav-t: 0ms; } }

/* Neutralise the theme header shell when our header is on. */
body.mgk-nav-on .site-header .main-header,
body.mgk-nav-on .site-header .site-branding { height: auto; padding: 0; margin: 0; max-width: none; display: block; }
body.mgk-nav-on .site-header { background: var(--mgk-nav-surface); }
body.mgk-nav-on .col-full-nav,
body.mgk-nav-on .menu-overlay,
body.mgk-nav-on .mobile-overlay,
body.mgk-nav-on .sticky-header { display: none !important; }

.mgk-nav, .mgk-nav * { box-sizing: border-box; }
.mgk-nav { font-family: var(--mgk-nav-font); color: var(--mgk-nav-text); line-height: 1.4; background: var(--mgk-nav-surface); }
.mgk-nav a { text-decoration: none; color: inherit; }
.mgk-nav button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mgk-nav ul { list-style: none; margin: 0; padding: 0; }
.mgk-nav :focus { outline: none; }
.mgk-nav :focus-visible { outline: 2px solid var(--mgk-nav-focus); outline-offset: 2px; border-radius: var(--mgk-nav-radius); }
.mgk-ico { display: inline-block; vertical-align: middle; flex: none; }

.mgk-nav__inner { max-width: 1360px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; }
@media (min-width: 1200px) { .mgk-nav__inner { padding: 0 32px; } }

/* Utility row */
.mgk-nav__utility { border-bottom: 1px solid var(--mgk-nav-border); font-size: 13px; color: var(--mgk-nav-muted); }
.mgk-nav__utility .mgk-nav__inner { height: var(--mgk-nav-utility-h); justify-content: flex-end; gap: 24px; }
.mgk-nav__utility-list { display: flex; gap: 20px; }
.mgk-nav__utility-link, .mgk-nav__phone { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 2px; color: var(--mgk-nav-muted); }
.mgk-nav__utility-link:hover, .mgk-nav__phone:hover { color: var(--mgk-nav-accent); }
.mgk-nav__phone { font-weight: 600; color: var(--mgk-nav-text); }
.mgk-nav__utility-link[aria-current="page"] { color: var(--mgk-nav-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1199px) { .mgk-nav__utility { display: none; } }

/* Main row */
.mgk-nav__main { position: relative; z-index: 1000; background: var(--mgk-nav-surface); border-bottom: 1px solid var(--mgk-nav-border); }
.mgk-nav__main.is-stuck { position: fixed; top: var(--mgk-nav-offset); left: 0; right: 0; box-shadow: 0 4px 16px rgba(23, 37, 45, 0.08); }
.mgk-nav__spacer { height: 0; }
.mgk-nav__main > .mgk-nav__inner { height: var(--mgk-nav-main-h); gap: 16px; }
@media (max-width: 1199px) { .mgk-nav__main > .mgk-nav__inner { height: 72px; gap: 8px; } }

.mgk-nav__brand { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; }
.mgk-nav__mark { width: 48px; height: 48px; border-radius: 50%; display: block; }
.mgk-nav__wordmark { width: 152px; height: auto; display: block; }
@media (max-width: 1199px) { .mgk-nav__mark { width: 40px; height: 40px; } .mgk-nav__wordmark { width: 127px; } }
@media (max-width: 359px) { .mgk-nav__wordmark { width: 110px; } }

.mgk-nav__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--mgk-nav-radius); margin-left: -8px; }
.mgk-nav__burger:hover { background: var(--mgk-nav-hover); }
@media (max-width: 1199px) { .mgk-nav__burger { display: inline-flex; } }

/* Primary bar */
.mgk-nav__primary { flex: 1 1 auto; min-width: 0; margin-left: 16px; }
@media (max-width: 1199px) { .mgk-nav__primary { display: none; } }
.mgk-nav__bar { display: flex; align-items: center; gap: 4px; }
.mgk-nav__item { position: relative; }
.mgk-nav__trigger { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: var(--mgk-nav-radius); font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--mgk-nav-text); transition: background-color var(--mgk-nav-t), color var(--mgk-nav-t); }
@media (min-width: 1360px) { .mgk-nav__trigger { font-size: 16px; padding: 0 14px; } }
.mgk-nav__trigger .mgk-ico { transition: transform var(--mgk-nav-t); color: var(--mgk-nav-muted); }
.mgk-nav__trigger:hover, .mgk-nav__trigger[aria-expanded="true"] { background: var(--mgk-nav-hover); color: var(--mgk-nav-accent); }
.mgk-nav__trigger[aria-expanded="true"] .mgk-ico { transform: rotate(180deg); color: var(--mgk-nav-accent); }
.mgk-nav__item.is-current > .mgk-nav__trigger { box-shadow: inset 0 -3px 0 var(--mgk-nav-accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Panels */
.mgk-nav__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1001; background: var(--mgk-nav-surface); border: 1px solid var(--mgk-nav-border); border-radius: var(--mgk-nav-panel-radius); box-shadow: var(--mgk-nav-shadow); padding: 12px; min-width: 260px; }
.mgk-nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.mgk-nav__panel[hidden] { display: none; }
.mgk-nav__panel--mega { left: 0; width: min(1000px, calc(100vw - 48px)); padding: 28px 32px; }
.mgk-nav__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.mgk-nav__heading { font-family: var(--mgk-nav-font); font-size: 15px; font-weight: 700; color: var(--mgk-nav-text); margin: 0 0 8px; padding: 0 10px; line-height: 1.4; }
.mgk-nav__list { display: flex; flex-direction: column; gap: 2px; }
.mgk-nav__link { display: flex; align-items: center; min-height: 40px; padding: 8px 10px; border-radius: var(--mgk-nav-radius); font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--mgk-nav-text); transition: background-color var(--mgk-nav-t), color var(--mgk-nav-t); }
.mgk-nav__link:hover, .mgk-nav__link:focus-visible { background: var(--mgk-nav-hover); color: var(--mgk-nav-accent); }
.mgk-nav__link[aria-current="page"] { color: var(--mgk-nav-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mgk-nav__link--all { color: var(--mgk-nav-accent); font-weight: 600; }
.mgk-nav__li--guide { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--mgk-nav-border); }
.mgk-nav__li--guide ~ .mgk-nav__li--guide { margin-top: 0; padding-top: 0; border-top: 0; }
.mgk-nav__link--guide { color: var(--mgk-nav-muted); font-weight: 400; }

/* Actions */
.mgk-nav__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.mgk-nav__cta { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; margin-right: 8px; border-radius: var(--mgk-nav-radius); background: var(--mgk-nav-accent); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background-color var(--mgk-nav-t); }
.mgk-nav__cta:hover { background: var(--mgk-nav-accent-hover); color: #fff; }
.mgk-nav__cta:focus-visible { outline-offset: 3px; }
/* Theme link rules outrank a single class; keep the button text white in every state. */
.mgk-nav a.mgk-nav__cta, .mgk-nav a.mgk-nav__cta:link, .mgk-nav a.mgk-nav__cta:visited, .mgk-nav a.mgk-nav__cta:hover, .mgk-nav a.mgk-nav__cta:focus, .mgk-nav a.mgk-nav__cta:active { color: #fff !important; }

@media (max-width: 1199px) { .mgk-nav__actions .mgk-nav__cta { display: none; } }
.mgk-nav__iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--mgk-nav-radius); color: var(--mgk-nav-text); transition: background-color var(--mgk-nav-t), color var(--mgk-nav-t); }
.mgk-nav__iconbtn:hover, .mgk-nav__iconbtn[aria-expanded="true"] { background: var(--mgk-nav-hover); color: var(--mgk-nav-accent); }

/* Cart: reuse Shoptimizer markup, restyle as an icon control. */
.mgk-nav__cart { display: flex; align-items: center; }
.mgk-nav__cart .shoptimizer-cart { margin: 0; }
.mgk-nav__cart a.cart-contents { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: var(--mgk-nav-radius); position: relative; color: var(--mgk-nav-text); background: none; }
.mgk-nav__cart a.cart-contents:hover { background: var(--mgk-nav-hover); color: var(--mgk-nav-accent); }
.mgk-nav__cart a.cart-contents .amount { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mgk-nav__cart a.cart-contents svg { width: 24px; height: 24px; display: block; }
/* Bag icon drawn by CSS so it survives WooCommerce fragment refreshes of div.shoptimizer-cart. */
.mgk-nav__cart a.cart-contents::before { content: ""; display: block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 7h12l1 14H5L6 7z'/><path d='M9 10V6a3 3 0 0 1 6 0v4'/></svg>") center / 24px 24px no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 7h12l1 14H5L6 7z'/><path d='M9 10V6a3 3 0 0 1 6 0v4'/></svg>") center / 24px 24px no-repeat; }
.mgk-nav__cart a.cart-contents::after { display: none !important; }
.mgk-nav .mgk-nav__cart .shoptimizer-cart a.cart-contents .count, .mgk-nav .mgk-nav__cart .shoptimizer-cart a.cart-contents:hover .count { background-color: var(--mgk-nav-accent) !important; color: #fff !important; }
.mgk-nav__cart a.cart-contents .count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mgk-nav-accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--mgk-nav-surface); box-sizing: content-box; }

/* Search panel */
.mgk-nav__search { border-top: 1px solid var(--mgk-nav-border); background: var(--mgk-nav-surface); }
.mgk-nav__search[hidden] { display: none; }
.mgk-nav__search .mgk-nav__inner { padding-top: 12px; padding-bottom: 12px; gap: 8px; }
.mgk-nav__search form, .mgk-drawer__search form { flex: 1 1 auto; display: flex; gap: 8px; margin: 0; position: relative; }
.mgk-nav__search form label, .mgk-drawer__search form label { flex: 1 1 auto; margin: 0; }
.mgk-nav__search form label > span, .mgk-drawer__search form label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mgk-nav__search form input[type="search"], .mgk-drawer__search form input[type="search"] { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--mgk-nav-border); border-radius: var(--mgk-nav-radius); background: #fff none; font: inherit; font-size: 16px; color: var(--mgk-nav-text); box-shadow: none; -webkit-appearance: none; appearance: none; }
.mgk-nav__search form input[type="search"]::-webkit-search-decoration, .mgk-drawer__search form input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.mgk-nav__search form::before, .mgk-drawer__search form::before, .mgk-nav__search form label::before, .mgk-drawer__search form label::before { display: none !important; content: none !important; }
.mgk-nav__search form input[type="search"]:focus, .mgk-drawer__search form input[type="search"]:focus { border-color: var(--mgk-nav-accent); outline: 2px solid var(--mgk-nav-focus); outline-offset: 1px; }
.mgk-nav__search form button, .mgk-drawer__search form button { height: 46px; padding: 0 18px; border: 0; border-radius: var(--mgk-nav-radius); background: var(--mgk-nav-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.mgk-nav__search form button:hover, .mgk-drawer__search form button:hover { background: var(--mgk-nav-accent-hover); }

/* Drawer (mobile / tablet) */
.mgk-drawer__backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(23, 37, 45, 0.45); }
.mgk-drawer__backdrop[hidden] { display: none; }
.mgk-drawer { position: fixed; top: var(--mgk-nav-offset); bottom: 0; left: 0; width: 100%; max-width: 100%; z-index: 1101; background: var(--mgk-nav-surface); display: flex; flex-direction: column; transform: translateX(0); }
.mgk-drawer[hidden] { display: none; }
@media (min-width: 640px) { .mgk-drawer { width: 420px; max-width: 90vw; box-shadow: var(--mgk-nav-shadow); } }
.mgk-drawer__head { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--mgk-nav-border); flex: none; }
.mgk-drawer__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.mgk-drawer__search { margin-bottom: 12px; }
.mgk-drawer__cta { margin-bottom: 16px; }
.mgk-drawer__cta .mgk-nav__cta { display: flex; justify-content: center; width: 100%; margin: 0; height: 48px; font-size: 16px; }
.mgk-drawer__list { border-top: 1px solid var(--mgk-nav-border); }
.mgk-drawer__group { border-bottom: 1px solid var(--mgk-nav-border); }
.mgk-drawer__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 10px 4px; font-size: 16px; font-weight: 600; color: var(--mgk-nav-text); text-align: left; border-radius: var(--mgk-nav-radius); }
.mgk-drawer__trigger .mgk-ico { color: var(--mgk-nav-muted); transition: transform var(--mgk-nav-t); }
.mgk-drawer__trigger[aria-expanded="true"] .mgk-ico { transform: rotate(180deg); }
.mgk-drawer__trigger[aria-expanded="true"], .mgk-drawer__group.is-current > .mgk-drawer__trigger { color: var(--mgk-nav-accent); }
.mgk-drawer__sub { padding: 0 0 8px 16px; }
.mgk-drawer__sub[hidden] { display: none; }
.mgk-drawer__link { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 8px; border-radius: var(--mgk-nav-radius); font-size: 16px; font-weight: 400; color: var(--mgk-nav-text); }
.mgk-drawer__link:hover, .mgk-drawer__link:focus-visible { background: var(--mgk-nav-hover); color: var(--mgk-nav-accent); }
.mgk-drawer__link[aria-current="page"] { color: var(--mgk-nav-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mgk-drawer__link--all { color: var(--mgk-nav-accent); font-weight: 600; }
.mgk-drawer__utility { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--mgk-nav-border); }
.mgk-drawer__utility .mgk-drawer__link { font-size: 15px; color: var(--mgk-nav-muted); }
.mgk-drawer__phone { font-weight: 600; color: var(--mgk-nav-text) !important; }
body.mgk-drawer-open { overflow: hidden; }

/* Page anchors below the sticky bar */
body.mgk-nav-on { scroll-padding-top: calc(var(--mgk-nav-main-h) + var(--mgk-nav-offset) + 8px); }
@media (max-width: 1199px) { body.mgk-nav-on { scroll-padding-top: calc(72px + var(--mgk-nav-offset) + 8px); } }