/* =============================================================================
   WMD GLOBAL HEADER — lifted from the new product template (single-product.php)
   and NAMESPACED so it can coexist with Porto / Bootstrap / Elementor CSS.

   Why the rename: the product template runs on a self-contained page with ZERO
   theme CSS, so it could safely use .nav / .logo / .search / .cart / .wrap and
   global resets on * / body / a / img / h1-h4. Site-wide those collide both ways
   (porto theme.css alone: .nav x49, .search x48, .logo x21, plus bootstrap .nav).
   Every class here is prefixed `wmdh-`; every reset is scoped to `.wmdh`.
   Visual output is byte-for-byte the same design as the product page header.
   ============================================================================= */

/* ---------- scoped base / reset ---------- */
.wmdh{
  --wmdh-accent:#006cff;
  /* Full-bleed, matching product-demo/assets/wmd-shell.css (--maxw:none) — NOT the
     live mu-plugin product template, which caps at 1340/1600 because its page body
     is only 1340px wide. Site-wide the content is full width, so a capped header
     reads as narrow on large monitors (at 2400px: 1340 vs 2160 = 820px difference). */
  --wmdh-maxw:none;
  --wmdh-ff-body:"Poppins",sans-serif;
  --wmdh-ff-head:"Montserrat","Poppins",sans-serif;
  font-family:var(--wmdh-ff-body);
  font-size:14px;
  line-height:25px;
}
/* Reset specificity is deliberate — there are three tiers here, don't flatten them:
     (0,0,1)  :where(.wmdh) button   — MUST stay weak. The component button rules
              (.wmdh .wmdh-m-search-close etc.) are class-only (0,2,0); a stronger
              reset would beat them and did (the close "x" rendered at 14px not 30px).
     (0,1,1)  .wmdh a / ul / li / h6 / img — MUST be this strong. Porto's inline CSS
              and bootstrap.css both set a{color:#0c2328} at (0,0,1); :where() zeroes
              our specificity, so it tied and Porto won on source order (nav links came
              out teal instead of inheriting #222). Component rules are all (0,2,x)+,
              so they still override these.
   Anything targeting a bare element inside the header needs to clear Porto's own
   type/attribute selectors, which sit at (0,0,1)-(0,1,1). */
.wmdh,:where(.wmdh) *{box-sizing:border-box}
.wmdh a,.wmdh a:hover,.wmdh a:focus{color:inherit;text-decoration:none}
.wmdh img{max-width:100%;display:block}
.wmdh ul,.wmdh li{list-style:none;margin:0;padding:0}
:where(.wmdh) button{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}
.wmdh h6{margin:0}
.wmdh .wmdh-wrap{width:90%;max-width:var(--wmdh-maxw);margin:0 auto}

/* Porto prints <div class="header-wrapper header-reveal"> around the header
   template part. Left as a normal block it becomes the containing block for our
   position:sticky header (~128px tall) and the header would unstick after ~40px
   of scroll. display:contents removes that box from layout so the sticky header
   is contained by .page-wrapper instead = sticky for the whole page. */
body.wmdh-on .header-wrapper{display:contents}

/* ---------- topbar ---------- */
/* position+z-index are load-bearing: Porto's .header-wrapper carried z-index:100
   and display:contents above throws that box away, so a static topbar gets
   painted over by anything the page positions near the top (the homepage
   #heroVideo does exactly that). Sit just under the sticky bar's z-index 60. */
.wmdh.wmdh-topbar{background:#000;color:#fff;font-size:14px;position:relative;z-index:59}
.wmdh .wmdh-topbar-inner{position:relative}
.wmdh.wmdh-topbar .wmdh-wrap{display:flex;align-items:center;height:40px}
.wmdh.wmdh-topbar .wmdh-mid{flex:1;text-align:center;font-weight:400}
.wmdh.wmdh-topbar a{color:#fff;display:flex;flex:1;justify-content:center;gap:8px;align-items:center;font-weight:500;font-size:14px}
.wmdh.wmdh-topbar a svg{width:16px;height:16px}

/* ---------- sticky header bar ---------- */
header.wmdh.wmdh-site{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid #f0f0f0}
header.wmdh.wmdh-site .wmdh-hd{width:95%;max-width:none}
.wmdh .wmdh-hd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:88px}
.wmdh .wmdh-logo{display:flex;justify-content:center}
/* width:auto (not a fixed 168px) so the logo keeps its own aspect ratio — the
   WMD-Black.svg is 198x69 (~2.87), a fixed 168x58 box (~2.90) would stretch it.
   The SVG carries intrinsic width/height so there's no layout shift. */
.wmdh .wmdh-logo img{height:58px;width:auto;display:block}
.wmdh .wmdh-tools{display:flex;align-items:center;gap:18px;justify-content:flex-end}
.wmdh .wmdh-search-btn{background:none;border:none;padding:0;cursor:pointer;color:#1a1a1a;display:grid;place-items:center}
.wmdh .wmdh-search-btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---------- desktop nav ---------- */
.wmdh .wmdh-nav{display:flex;align-items:center;gap:0;margin:0;padding:0;font-family:var(--wmdh-ff-body);font-size:14px;font-weight:400;color:#222}
.wmdh .wmdh-nav>li{list-style:none;position:static}
.wmdh .wmdh-nav>li>a{display:inline-flex;align-items:center;gap:5px;padding:0 7px;line-height:88px;cursor:pointer;white-space:nowrap}
.wmdh .wmdh-nav>li:first-child>a{padding-left:0}
.wmdh .wmdh-nav .wmdh-ca{font-size:10px;font-weight:400;color:#222;transition:transform .2s}
.wmdh .wmdh-nav>li>a:hover{color:#000}
.wmdh .wmdh-nav>li.wmdh-has:hover>a .wmdh-ca{transform:rotate(180deg)}
.wmdh .wmdh-nav>li.wmdh-has:hover>a,.wmdh .wmdh-nav>li.wmdh-open>a{color:#000;background:#f1f1f1}
.wmdh .wmdh-nav>li:first-child.wmdh-has:hover>a,.wmdh .wmdh-nav>li:first-child.wmdh-open>a{padding-left:9px;margin-left:-9px}

/* mega panel */
.wmdh .wmdh-nav>li .wmdh-panel{position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 24px 40px rgba(0,0,0,.10);border-top:1px solid #eee;padding:42px 30px 48px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;z-index:70}
.wmdh .wmdh-nav>li.wmdh-has:hover .wmdh-panel,.wmdh .wmdh-nav>li.wmdh-open .wmdh-panel{opacity:1;visibility:visible;transform:translateY(0)}
.wmdh .wmdh-megacols{display:grid;gap:34px}
.wmdh .wmdh-megacols.c4{grid-template-columns:repeat(4,1fr)}
.wmdh .wmdh-megacols.c5{grid-template-columns:repeat(5,1fr)}
.wmdh .wmdh-megacols.c6{grid-template-columns:repeat(6,1fr)}
.wmdh .wmdh-megacols.c7{grid-template-columns:repeat(7,1fr)}
.wmdh .wmdh-megacols.c6,.wmdh .wmdh-megacols.c7{gap:22px}
.wmdh .wmdh-mcol li.wmdh-mcol-title{margin:0 0 16px;list-style:none}
.wmdh .wmdh-mcol li.wmdh-mcol-title a{font-family:var(--wmdh-ff-body);font-size:16px;font-weight:700;text-transform:uppercase;color:#222;padding:0;margin:0;line-height:1.3;display:block;cursor:default;border-radius:0}
.wmdh .wmdh-mcol li.wmdh-mcol-title a:hover{background:none;color:#222}
.wmdh .wmdh-mcol li.wmdh-mcol-title a[href]{cursor:pointer}
.wmdh .wmdh-mcol li.wmdh-mcol-title a[href]:hover{color:var(--wmdh-accent)}
.wmdh .wmdh-mcol ul{list-style:none;margin:0;padding:0}
.wmdh .wmdh-mcol li a{display:block;font-family:var(--wmdh-ff-body);font-size:14px;font-weight:400;color:#444;padding:0 10px;margin:0 -10px;line-height:1.6;border-radius:4px;transition:background .15s ease}
.wmdh .wmdh-mcol li a:hover{background:#f5f5f5;color:#1a1a1a}
.wmdh .wmdh-mcol li.wmdh-subitem a{padding-left:30px;font-size:14px;color:#666}

/* simple dropdown */
.wmdh .wmdh-nav>li:has(.wmdh-drop){position:relative}
.wmdh .wmdh-nav>li .wmdh-drop{position:absolute;left:0;top:100%;min-width:240px;background:#fff;box-shadow:0 20px 36px rgba(0,0,0,.12);border-top:1px solid #eee;padding:10px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:70}
.wmdh .wmdh-nav>li.wmdh-has:hover .wmdh-drop,.wmdh .wmdh-nav>li.wmdh-open .wmdh-drop{opacity:1;visibility:visible;transform:translateY(0)}
.wmdh .wmdh-nav>li .wmdh-drop a{display:block;font-family:var(--wmdh-ff-body);font-size:14px;font-weight:400;color:#444;padding:0 10px}
.wmdh .wmdh-nav>li .wmdh-drop a:hover{background:#f7f7f7;color:var(--wmdh-accent)}

/* ---------- mobile icons / search overlay / drawer ---------- */
.wmdh .wmdh-m-left{display:none;align-items:center;gap:18px;flex:0 0 auto}
.wmdh .wmdh-m-icon{background:none;border:none;padding:0;cursor:pointer;color:#1a1a1a;display:grid;place-items:center}
.wmdh .wmdh-m-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8}
.wmdh.wmdh-m-search{position:fixed;top:0;left:0;right:0;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.12);padding:26px 0 42px;transform:translateY(-100%);opacity:0;visibility:hidden;transition:transform .3s ease,opacity .3s ease;z-index:120}
.wmdh.wmdh-m-search.wmdh-open{transform:translateY(0);opacity:1;visibility:visible}
.wmdh .wmdh-m-search-inner{display:flex;align-items:center;background:#f4f4f4;border-radius:40px;overflow:hidden;height:60px}
.wmdh .wmdh-m-search-inner input{flex:1;border:0;outline:0;background:none;padding:0 26px;font-family:var(--wmdh-ff-body);font-size:18px;color:#555;min-width:0;height:auto;box-shadow:none}
.wmdh .wmdh-m-search-inner button{border:0;padding:0;background:#111;color:#fff;width:74px;height:60px;border-radius:40px;display:grid;place-items:center;cursor:pointer}
.wmdh .wmdh-m-search-inner button svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}
.wmdh .wmdh-m-search-close{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);background:none;border:none;font-size:30px;color:#777;cursor:pointer;line-height:1}
.wmdh.wmdh-m-drawer{position:fixed;inset:0;background:#fff;z-index:130;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .3s ease;overflow-y:auto}
.wmdh.wmdh-m-drawer.wmdh-open{transform:translateX(0)}
.wmdh .wmdh-m-drawer-top{display:flex;align-items:center;height:74px;border-bottom:1px solid #eee;flex:0 0 auto}
.wmdh.wmdh-m-drawer .wmdh-m-left{display:flex}
.wmdh .wmdh-m-drawer-top .wmdh-tools{margin-left:auto}
.wmdh .wmdh-m-menu{padding:6px 24px}
.wmdh .wmdh-m-item{border-bottom:1px solid #f0f0f0}
.wmdh .wmdh-m-row{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;padding:20px 0;font-family:var(--wmdh-ff-head);font-size:16px;font-weight:600;color:#1a1a1a;cursor:pointer;text-align:left}
.wmdh .wmdh-m-row .wmdh-chev{font-size:13px;color:#333;transition:transform .25s ease}
.wmdh .wmdh-m-item.wmdh-open .wmdh-chev{transform:rotate(180deg)}
.wmdh .wmdh-m-sub{display:none;padding:0 4px 18px}
.wmdh .wmdh-m-item.wmdh-open .wmdh-m-sub{display:block}
.wmdh .wmdh-m-sub h6{font-family:var(--wmdh-ff-head);font-size:12px;font-weight:700;text-transform:uppercase;color:#9a9a9a;letter-spacing:.05em;margin:16px 0 4px}
.wmdh .wmdh-m-sub a{display:block;padding:8px 0;font-family:var(--wmdh-ff-body);font-size:14px;line-height:1.8;color:#555}
.wmdh .wmdh-m-sub a:active{color:var(--wmdh-accent)}
.wmdh .wmdh-m-social{display:flex;justify-content:center;gap:14px;padding:34px 24px 50px}
.wmdh .wmdh-m-social a{width:48px;height:48px;border-radius:8px;display:grid;place-items:center}
.wmdh .wmdh-m-social svg{width:22px;height:22px;fill:#fff}
body.wmdh-locked{overflow:hidden}

/* ---------- responsive (same breakpoints as the product template) ---------- */
@media(max-width:1100px){
  .wmdh .wmdh-nav{display:none}
  .wmdh .wmdh-search-btn{display:none}
  .wmdh .wmdh-m-left{display:flex}
  .wmdh.wmdh-topbar .wmdh-wrap{justify-content:space-between}
  .wmdh.wmdh-topbar .wmdh-mid{position:static;transform:none}
  .wmdh .wmdh-hd{height:74px}
}