/*
  UU SITEWIDE SLIM HEADER. Namespaced, self contained, inert until switched on.

  Generated from assets/uu-funnel.css by build-sitewide-css.mjs, which renames
  every class to a uus- prefix so nothing here can collide with Divi, Bloom,
  Monarch or any plugin. If the funnel header design changes, regenerate rather
  than hand edit. The generator refuses to write a file that still contains an
  un-namespaced class or a corrupted custom property.

  Two deliberate differences from the funnel header:
    1. position:fixed instead of sticky, so it renders correctly whether it is
       injected at wp_body_open or at the wp_footer fallback
    2. the brand tokens are scoped to .uus-hdr instead of :root, so they cannot
       leak into a Divi page

  It is switched on by the UU_SITEWIDE_HEADER constant. See
  inc/uu-sitewide-header.php and the redesign folder's RELEASE-FLIP.md.
*/

/* brand tokens, scoped. Descendants inherit them, the rest of the page cannot. */
.uus-hdr{
  --uu-bg:#0B1A26;
  --uu-fg:#F3EFE3;
  --uu-card:#12222f;
  --uu-border:rgba(255,255,255,.10);
  --uu-primary:#4282D8;
  --uu-accent:#C1652E;
  --uu-muted:rgba(243,239,227,.72);
  --uu-font-display:"Bebas Neue","Oswald",sans-serif;
  --uu-font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --uu-font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  --wrap:1120px;
  font-family:var(--uu-font-sans);
  font-size:17px;
  line-height:1.6;
  color:var(--uu-fg);
  text-align:left;
}

/* Defensive base. Divi styles bare a, button and ul, so neutralise those inside
   the component before the real rules land.

   :where() is load bearing. A plain .uus-hdr button selector scores 0,1,1 and
   beats the component's own .uus-trigger at 0,1,0, so font:inherit here
   silently overrode the mono face on the two dropdown buttons. Measured on the
   staging rig 2026-08-10: Free Tools and Guides rendered in Inter instead of
   JetBrains Mono. :where() contributes zero specificity, so these reset Divi
   without ever outranking the rules below. */
:where(.uus-hdr),:where(.uus-hdr) *,:where(.uus-hdr) *:before,:where(.uus-hdr) *:after{box-sizing:border-box}
:where(.uus-hdr) a{text-decoration:none;box-shadow:none;border:0}
:where(.uus-hdr) a:hover{text-decoration:none}
:where(.uus-hdr) button{
  font:inherit;color:inherit;margin:0;padding:0;background:transparent;border:0;
  text-transform:none;letter-spacing:normal;line-height:normal;border-radius:0;
  -webkit-appearance:none;appearance:none;box-shadow:none;
}
:where(.uus-hdr) ul{margin:0;padding:0;list-style:none}
:where(.uus-hdr) img{max-width:100%;height:auto;display:block}
.uus-logo{
  display:block;
  background:url(https://uncommittedu.com/wp-content/uploads/2026/08/uu-logo-256.png) center/contain no-repeat;
}

/* ---------- slim sticky header, Backlinko style dropdown panels ---------- */
.uus-hdr{
  position:fixed;top:0;left:0;right:0;z-index:99990;background:rgba(11,26,38,.94);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--uu-border);
}
.uus-in{max-width:var(--wrap);margin:0 auto;padding:0 22px;height:62px;display:flex;align-items:center;gap:16px;position:relative}
.uus-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--uu-fg);margin-right:auto}
.uus-brand .uus-logo{width:44px;height:44px;flex:0 0 44px}
.uus-brand .uus-wordmark{font-family:var(--uu-font-display);font-size:1.2rem;letter-spacing:.03em;line-height:1;text-transform:uppercase}

.uus-nav{display:flex;align-items:center;gap:6px}
.uus-item{position:relative}
.uus-trigger,.uus-link{
  font-family:var(--uu-font-mono);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--uu-muted);text-decoration:none;cursor:pointer;
  background:transparent;border:0;padding:9px 12px;border-radius:8px;
  display:inline-flex;align-items:center;gap:7px;line-height:1;white-space:nowrap;
  transition:color .15s ease,background-color .15s ease;
}
.uus-trigger:hover,.uus-link:hover,.uus-item.uus-open .uus-trigger{color:var(--uu-fg);background:rgba(255,255,255,.05)}
.uus-trigger .uus-caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform .18s ease;
}
.uus-item.uus-open .uus-trigger .uus-caret{transform:rotate(180deg)}
.uus-trigger:focus-visible,.uus-link:focus-visible,.uus-burger:focus-visible{outline:2px solid var(--uu-primary);outline-offset:2px}

.uus-panel{
  position:absolute;left:-10px;top:calc(100% + 14px);min-width:330px;
  background:var(--uu-card);border:1px solid var(--uu-border);border-radius:12px;
  padding:10px;box-shadow:0 26px 60px -28px rgba(0,0,0,.92);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  /* Belt and braces only. It stops a future child that switches visibility
     back on without thinking about hit testing. It does NOT stop a child that
     sets pointer-events:auto itself, because both properties are overridable
     downward, which is exactly how the pill-pane bug below happened. */
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.uus-item.uus-open .uus-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
/* invisible bridge so the pointer can travel from the trigger into the panel */
.uus-panel:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.uus-plink{
  display:block;padding:11px 13px;border-radius:9px;text-decoration:none;
  transition:background-color .13s ease;
}
.uus-plink:hover,.uus-plink:focus-visible{background:rgba(66,130,216,.14);outline:none}
.uus-plt{display:block;font-size:.95rem;color:var(--uu-fg);font-weight:600;line-height:1.25}
.uus-pld{display:block;font-size:.8rem;color:var(--uu-muted);margin-top:3px;line-height:1.35}
.uus-plink.uus-accent .uus-plt{color:var(--uu-accent)}
.uus-psep{height:1px;background:var(--uu-border);margin:8px 6px}

/* ----- two level panel: pillars on the left, that pillar's articles on the right ----- */
.uus-item.uus-wide{position:static}
.uus-panel-wide{
  left:auto;right:22px;top:calc(100% - 1px);
  width:min(760px,calc(100vw - 44px));min-width:0;padding:14px;
}
.uus-lvl2{position:relative;min-height:322px}
.uus-lvl2-left{width:250px}
.uus-pill-row{display:flex;align-items:center;border-radius:9px;transition:background-color .13s ease}
.uus-pill.uus-active .uus-pill-row,.uus-pill-row:hover{background:rgba(66,130,216,.14)}
.uus-pill-link{
  flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 12px;text-decoration:none;color:var(--uu-fg);font-size:.97rem;font-weight:600;line-height:1.2;
}
.uus-pill-link .uus-chev{
  width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:6px solid var(--uu-muted);flex:0 0 auto;transition:border-color .13s ease,transform .18s ease;
}
.uus-pill.uus-active .uus-pill-link .uus-chev{border-left-color:var(--uu-primary)}
.uus-pill-count{display:none} /* Wayne 2026-08-10: counts read as clutter and the thin pillar undersold itself; spans kept in markup in case counts ever return */
.uus-pill-toggle{display:none}

.uus-pill-pane{
  position:absolute;left:266px;right:0;top:0;
  padding-left:22px;border-left:1px solid var(--uu-border);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .14s ease;
}
/* 🔴 The `.uus-item.uus-open` prefix is load bearing, do not drop it back to
   `.uus-pill.uus-active .uus-pill-pane`. Twin of the fix in uu-funnel.css,
   Wayne 2026-08-11: hovering page content popped the Guides menu open.

   The closed Guides panel is `visibility:hidden; opacity:0`, but visibility
   and pointer-events are both OVERRIDABLE BY A DESCENDANT, and this rule was
   overriding both. One pillar is always active, so its pane sat there
   permanently hit testable: a large box under a sticky header, invisible only
   because an ancestor carries opacity:0. The pane is a DOM child of the Guides
   item, so touching it fired that item's mouseenter and opened the menu.

   Hiding the CONTAINER harder cannot fix this. Keep the two files in step. */
.uus-item.uus-open .uus-pill.uus-active .uus-pill-pane{opacity:1;visibility:visible;pointer-events:auto}
.uus-pane-label{
  font-family:var(--uu-font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--uu-muted);padding:4px 10px 8px;
}
.uus-art{
  display:block;padding:8px 10px;border-radius:8px;text-decoration:none;
  color:var(--uu-fg);font-size:.9rem;line-height:1.3;transition:background-color .12s ease;
}
.uus-art:hover,.uus-art:focus-visible{background:rgba(66,130,216,.14);outline:none}
.uus-viewall{
  display:block;margin-top:8px;padding:10px;border-top:1px solid var(--uu-border);
  font-family:var(--uu-font-mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--uu-primary);text-decoration:none;
}
.uus-viewall:hover{color:var(--uu-fg)}

.uus-burger{
  display:none;background:transparent;border:1px solid var(--uu-border);border-radius:8px;
  width:40px;height:36px;cursor:pointer;padding:0;position:relative;
}
.uus-burger span{
  display:block;position:absolute;left:10px;right:10px;height:2px;background:var(--uu-fg);
  transition:transform .2s ease,opacity .2s ease;
}
.uus-burger span:nth-child(1){top:11px}
.uus-burger span:nth-child(2){top:17px}
.uus-burger span:nth-child(3){top:23px}
.uus-hdr.uus-mobile-open .uus-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.uus-hdr.uus-mobile-open .uus-burger span:nth-child(2){opacity:0}
.uus-hdr.uus-mobile-open .uus-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* the wordmark goes before the menu does, so the full nav survives at 815px,
   which is the width Wayne actually judges at */
@media (max-width:1010px){ .uus-brand .uus-wordmark{display:none} }

@media (max-width:760px){
  .uus-burger{display:block}
  .uus-nav{
    display:none;position:absolute;left:0;right:0;top:62px;flex-direction:column;
    align-items:stretch;gap:2px;background:var(--uu-bg);border-bottom:1px solid var(--uu-border);
    padding:12px 16px 20px;max-height:calc(100vh - 62px);overflow-y:auto;
  }
  .uus-hdr.uus-mobile-open .uus-nav{display:flex}
  .uus-trigger,.uus-link{
    width:100%;justify-content:space-between;padding:14px 10px;font-size:.8rem;
    border-bottom:1px solid var(--uu-border);border-radius:0;
  }
  .uus-item{position:static}
  .uus-panel{
    position:static;opacity:1;visibility:hidden;transform:none;min-width:0;
    box-shadow:none;border:0;background:transparent;padding:0 0 0 8px;
    height:0;overflow:hidden;transition:none;
  }
  .uus-item.uus-open .uus-panel{visibility:visible;height:auto;padding:6px 0 12px 8px}
  .uus-panel:before{display:none}
  .uus-cta{width:100%;margin-top:14px}

  /* level two becomes nested accordions inside the hamburger sheet */
  .uus-item.uus-wide{position:relative}
  .uus-panel-wide{width:auto;padding:6px 0 12px 8px}
  .uus-lvl2{min-height:0}
  .uus-lvl2-left{width:auto}
  .uus-pill{border-bottom:1px solid var(--uu-border)}
  .uus-pill:last-child{border-bottom:0}
  .uus-pill-row{border-radius:0}
  .uus-pill.uus-active .uus-pill-row{background:transparent}
  .uus-pill-link .uus-chev{display:none}
  .uus-pill-count{display:none}
  .uus-pill-toggle{
    display:flex;align-items:center;justify-content:center;width:46px;align-self:stretch;
    background:transparent;border:0;border-left:1px solid var(--uu-border);cursor:pointer;padding:0;
  }
  .uus-pill-toggle .uus-chev2{
    width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:6px solid var(--uu-muted);transition:transform .18s ease;
  }
  .uus-pill.uus-active .uus-pill-toggle .uus-chev2{transform:rotate(180deg);border-top-color:var(--uu-primary)}
  .uus-pill-pane{
    position:static;padding-left:10px;border-left:2px solid var(--uu-border);
    margin:0 0 10px 12px;height:0;overflow:hidden;opacity:1;visibility:hidden;transition:none;
  }
  .uus-pill.uus-active .uus-pill-pane{height:auto;visibility:visible;pointer-events:auto}
  .uus-art{padding:10px}
}


/* The CTA pill. Written out rather than reusing the funnel's button classes,
   whose names half the plugin world also uses. */
.uus-cta{
  font-family:var(--uu-font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  padding:10px 16px;border-radius:8px;background:var(--uu-accent);color:#fff;
  display:inline-block;border:1px solid transparent;text-align:center;white-space:nowrap;
  transition:filter .15s ease;
}
.uus-cta:hover{filter:brightness(1.1);color:#fff}

/* ---------- taking the place of Divi's header ---------- */
/* Divi's own header stays in the DOM and is hidden, rather than being removed
   by overriding header.php. That keeps every wrapper div Divi opens and
   footer.php later closes exactly where it was, which is the failure mode a
   header.php override would have introduced. */
body.uus-on #main-header,
body.uus-on #top-header,
body.uus-on #et-top-navigation,
body.uus-on .et_slide_in_menu_container{display:none !important}
body.uus-on #page-container{padding-top:62px !important;margin-top:0 !important}

/* the admin bar owns the top of the screen when it is there */
body.uus-on.admin-bar .uus-hdr{top:32px}
@media screen and (max-width:782px){
  body.uus-on.admin-bar .uus-hdr{top:46px}
}