/* UNITEHPC.com · 003D · CANONICAL PUBLIC THEME */
/* CSS unification: these tokens now resolve to the canonical palette in
   unite-shell.css instead of holding a second, slightly different brand red
   (#e4003b vs the correct Unite #d71920). Remapping here re-colours every
   rule in this file at once, with no rule-by-rule edits. Literal fallbacks
   keep the sheet standalone if the shell is ever absent. */
:root{
  --u-red:var(--unite-red,#d71920);
  --u-red-dark:var(--unite-red-dark,#a50f15);
  --u-red-deep:#790020;
  --u-red-soft:var(--unite-red-light,#fce8e6);
  /* --u-green stays a genuine success/positive colour, but it is no longer
     used for action buttons — see the actions block below. */
  --u-green:var(--unite-green-mid,#2e7d32);
  --u-green-dark:var(--unite-green-dark,#14351a);
  --u-green-soft:var(--unite-green-light,#e6f4ea);
  --u-ink:#111b38;
  --u-muted:#506074;
  --u-line:#dfe4ea;
  --u-canvas:#fbfcfe;
  --u-white:#fff;
  --u-content:1260px;
  --u-shadow:0 14px 36px rgba(17,27,56,.09);
  --u-shadow-hover:0 20px 50px rgba(17,27,56,.15);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0!important;
  color:var(--u-ink)!important;
  background:
    radial-gradient(circle at 8% 5%,rgba(228,0,59,.04),transparent 30rem),
    radial-gradient(circle at 92% 8%,rgba(24,133,61,.035),transparent 28rem),
    var(--u-canvas)!important;
  font-family:'Roboto',Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased;
}
body,p,a,button,input,select,textarea{font-family:'Roboto',Arial,sans-serif}
h1,h2,h3,h4,strong,.u-brand,.u-nav,.u-card-title{font-family:'Poppins','Roboto',Arial,sans-serif}
a{color:var(--u-red-dark)}
img{max-width:100%}
::selection{background:var(--u-red);color:#fff}

/* Remove every old page-specific public header/footer. The canonical shell
   inserts one. .unite-topbar IS that canonical header — it did not exist when
   this rule was written, so the rule was hiding the very thing it exists to
   protect, leaving legacy pages with no red header bar at all. */
body>header:not(.u-global-header):not(.unite-topbar),
body>footer:not(.u-global-footer),
body>.unite-premium-header,
body>.mh-footer,
body>.unite-premium-footer{display:none!important}

/* Accessible skip link must remain invisible until focused. */
.u-skip{
  position:fixed!important;
  left:12px!important;
  top:-100px!important;
  z-index:100000!important;
  padding:12px 16px!important;
  border:3px solid var(--u-red)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:var(--u-red-dark)!important;
  font-weight:900!important;
}
.u-skip:focus{top:12px!important}

/* CANONICAL HEADER */
.u-global-header{
  position:sticky;
  top:0;
  z-index:9500;
  width:100%;
  background:linear-gradient(135deg,var(--u-red-dark),var(--u-red));
  border-bottom:4px solid var(--u-red-deep);
  box-shadow:0 8px 25px rgba(90,0,24,.23);
}
.u-header-inner{
  width:min(var(--u-content),calc(100% - 32px));
  min-height:92px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:24px;
}
.u-brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  color:#fff!important;
  text-decoration:none!important;
}
.u-brand img{
  width:50px;
  height:50px;
  object-fit:contain;
  padding:4px;
  border-radius:10px;
  background:#fff;
}
.u-brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1.04;
}
.u-brand-copy strong{
  color:#fff;
  font-size:1.28rem;
  letter-spacing:-.025em;
}
.u-brand-copy span{
  margin-top:6px;
  color:rgba(255,255,255,.84);
  font-size:.75rem;
  font-weight:800;
}
.u-menu-toggle{
  display:none!important;
  margin-left:auto!important;
  min-height:44px!important;
  padding:10px 15px!important;
  border:2px solid rgba(255,255,255,.74)!important;
  border-radius:11px!important;
  background:transparent!important;
  color:#fff!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.u-nav{margin-left:auto}
.u-nav>ul{
  display:flex;
  align-items:center;
  gap:3px;
  margin:0;
  padding:0;
  list-style:none;
}
.u-nav-item{position:relative}
.u-nav-link,.u-nav-button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:46px!important;
  padding:10px 11px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#fff!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  font-size:.91rem!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.u-nav-link:hover,.u-nav-link:focus-visible,
.u-nav-button:hover,.u-nav-button:focus-visible,
.u-nav-link[aria-current="page"],.u-nav-button.is-active{
  background:rgba(91,0,24,.43)!important;
  outline:none!important;
}
.u-caret{
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.u-report{
  margin-left:8px!important;
  padding-inline:18px!important;
  background:var(--u-green)!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.17);
}
.u-report:hover,.u-report:focus-visible,.u-report[aria-current="page"]{
  background:var(--u-green-dark)!important;
}
.u-submenu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:9600;
  display:none;
  width:310px;
  max-height:min(620px,calc(100vh - 120px));
  overflow:auto;
  margin:0;
  padding:10px;
  list-style:none;
  background:#fff;
  border:1px solid rgba(17,27,56,.10);
  border-radius:17px;
  box-shadow:0 20px 48px rgba(17,27,56,.20);
}
.u-submenu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:14px;
}
.u-nav-item:hover>.u-submenu,
.u-nav-item:focus-within>.u-submenu,
.u-nav-item.open>.u-submenu{display:block}
.u-submenu a{
  display:grid!important;
  gap:3px!important;
  padding:12px 13px!important;
  border-radius:11px!important;
  color:var(--u-ink)!important;
  text-decoration:none!important;
}
.u-submenu a:hover,.u-submenu a:focus-visible{
  background:var(--u-red-soft)!important;
  outline:none!important;
}
.u-submenu strong{font-size:.94rem}
.u-submenu span{
  color:var(--u-muted);
  font-size:.79rem;
  line-height:1.35;
}

/* GLOBAL ACTIONS — Unite red.
   Was "GLOBAL GREEN ACTIONS", painting every button green. Actions are Unite
   red across the site, so this now uses the red tokens.
   The :not() list also excludes the canonical shell's own controls: this rule
   is `!important` and was overriding the sidebar toggles, turning their text
   white-on-green and making menu items vanish under the cursor. Shell
   components own their own appearance. */
button:not(.u-nav-button):not(.u-menu-toggle):not(.unite-nav-toggle):not(.unite-nav-link):not(.unite-burger):not(.unite-btn),
input[type="submit"],input[type="button"],
.btn,.button,.cta,.mh-btn,.uc-button,.ecsa-btn,
a[class*="button"]:not(.unite-btn),a[class*="btn"]:not(.unite-btn){
  background:var(--u-red)!important;
  border-color:var(--u-red)!important;
  color:#fff!important;
}
button:not(.u-nav-button):not(.u-menu-toggle):not(.unite-nav-toggle):not(.unite-nav-link):not(.unite-burger):not(.unite-btn):hover,
input[type="submit"]:hover,input[type="button"]:hover,
.btn:hover,.button:hover,.cta:hover,.mh-btn:hover,.uc-button:hover,.ecsa-btn:hover,
a[class*="button"]:not(.unite-btn):hover,a[class*="btn"]:not(.unite-btn):hover{
  background:var(--u-red-dark)!important;
  border-color:var(--u-red-dark)!important;
  color:#fff!important;
}

/* HOMEPAGE */
.u-main{
  width:min(var(--u-content),calc(100% - 32px));
  margin:0 auto;
  padding:28px 0 64px;
}
.u-search-wrap{max-width:1026px;margin:0 auto 38px}
.u-search{position:relative;display:flex;align-items:center}
.u-search>svg{
  position:absolute;
  left:24px;
  width:22px;
  height:22px;
  stroke:#3b4756;
}
.u-search input{
  width:100%;
  height:60px;
  padding:0 24px 0 66px;
  border:1px solid #cfd5dc;
  border-radius:999px;
  background:#fff;
  color:var(--u-ink);
  font-size:1rem;
  outline:none;
}
.u-search input:focus{
  border-color:var(--u-red);
  box-shadow:0 0 0 4px rgba(228,0,59,.10);
}
.u-search-results,.mh-search-results{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:500;
  display:none;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--u-line);
  border-radius:16px;
  box-shadow:var(--u-shadow);
}
.u-search-results.open,.mh-search-results.open{display:block}
.u-home-head{margin-bottom:26px}
.u-home-head h1{
  margin:0 0 8px;
  color:var(--u-ink);
  font-size:clamp(2rem,3.6vw,3.25rem);
  line-height:1.04;
  letter-spacing:-.04em;
}
.u-home-head p{margin:0;color:var(--u-muted);font-size:1.08rem}
.u-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.u-hub-card{
  display:grid;
  grid-template-columns:54px 1fr 18px;
  gap:15px;
  align-items:center;
  min-height:120px;
  padding:19px;
  border:1px solid rgba(17,27,56,.09);
  border-radius:22px;
  color:var(--u-ink)!important;
  text-decoration:none!important;
  box-shadow:0 8px 23px rgba(17,27,56,.05);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.u-hub-card:hover,.u-hub-card:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--u-shadow-hover);
  border-color:rgba(17,27,56,.17);
  outline:none;
}
.u-icon{
  width:52px!important;
  height:52px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:15px!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(17,27,56,.14);
}
.u-icon svg{width:25px!important;height:25px!important;stroke:currentColor}
.u-card-title{
  display:block;
  margin-bottom:5px;
  color:var(--u-ink);
  font-size:1.12rem;
  line-height:1.15;
}
.u-card-text{color:var(--u-muted);font-size:.89rem;line-height:1.45}
.u-arrow{
  width:13px;
  height:13px;
  border-top:2px solid #111;
  border-right:2px solid #111;
  transform:rotate(45deg);
}
.u-tone-red{background:linear-gradient(135deg,#fff3f5,#fff)}
.u-tone-green{background:linear-gradient(135deg,#f2fff4,#fff)}
.u-tone-purple{background:linear-gradient(135deg,#f8f3ff,#fff)}
.u-tone-orange{background:linear-gradient(135deg,#fff8ef,#fff)}
.u-tone-blue{background:linear-gradient(135deg,#f1f6ff,#fff)}
.u-tone-teal{background:linear-gradient(135deg,#f1fffe,#fff)}
.u-tone-yellow{background:linear-gradient(135deg,#fff9e8,#fff)}
.u-tone-indigo{background:linear-gradient(135deg,#f4f3ff,#fff)}
.u-tone-pink{background:linear-gradient(135deg,#fff3f5,#fff)}
.u-icon-red{background:linear-gradient(135deg,#ff587a,#ff2957)}
.u-icon-green{background:linear-gradient(135deg,#57cf66,#2fac46)}
.u-icon-purple{background:linear-gradient(135deg,#a56bff,#8244ef)}
.u-icon-orange{background:linear-gradient(135deg,#ff941a,#ff6400)}
.u-icon-blue{background:linear-gradient(135deg,#4386ff,#1657e9)}
.u-icon-teal{background:linear-gradient(135deg,#22d2c0,#00a99a)}
.u-icon-yellow{background:linear-gradient(135deg,#ffbd1a,#ff9400)}
.u-icon-indigo{background:linear-gradient(135deg,#6759ff,#3e35e7)}
.u-icon-pink{background:linear-gradient(135deg,#ff788a,#ff5068)}
.u-urgent{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:26px;
  padding:18px 22px;
  background:#fff;
  border:1px solid var(--u-line);
  border-radius:22px;
  box-shadow:0 8px 22px rgba(17,27,56,.05);
}
.u-urgent svg{width:25px;height:25px;fill:var(--u-red)}
.u-urgent strong{color:var(--u-red);white-space:nowrap}
.u-urgent-line{width:1px;height:28px;background:#cfd5dc}
.u-urgent p{margin:0;color:#313b49;flex:1}
.u-urgent a{color:var(--u-red-dark);font-weight:900;text-decoration:none;white-space:nowrap}
.u-quick-footer{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:28px;
  padding:18px 0;
}
.u-quick-footer>a{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px;
  align-items:center;
  padding:8px 24px;
  color:var(--u-ink)!important;
  text-decoration:none!important;
  border-right:1px solid var(--u-line);
}
.u-quick-footer>a:last-child{border-right:0}
.u-quick-footer svg{width:36px;height:36px;stroke:var(--u-red)}
.u-quick-footer strong{display:block}
.u-quick-footer span span{color:var(--u-muted);font-size:.84rem}

/* HUB / SCAFFOLD PAGES */
.u-page{
  width:min(var(--u-content),calc(100% - 32px))!important;
  margin:0 auto!important;
  padding:38px 0 66px!important;
}
.u-hero{
  margin:0 0 25px!important;
  padding:clamp(24px,4vw,40px)!important;
  background:linear-gradient(115deg,rgba(228,0,59,.10),#fff 48%,rgba(24,133,61,.07))!important;
  border:1px solid #efc8d3!important;
  border-radius:26px!important;
  box-shadow:var(--u-shadow)!important;
}
.u-eye{
  display:block!important;
  margin:0 0 10px!important;
  color:var(--u-red-dark)!important;
  font-size:.8rem!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.u-page h1{
  margin:0!important;
  color:var(--u-ink)!important;
  font-size:clamp(2rem,4vw,3.1rem)!important;
  line-height:1.04!important;
  letter-spacing:-.035em!important;
}
.u-hero>p:not(.u-eye){
  max-width:790px!important;
  margin:16px 0 0!important;
  color:var(--u-muted)!important;
  font-size:clamp(1rem,2vw,1.22rem)!important;
  line-height:1.56!important;
}
.u-section{
  margin:24px 0 0!important;
  padding:clamp(24px,4vw,38px)!important;
  background:#fff!important;
  border:1px solid var(--u-line)!important;
  border-radius:24px!important;
  box-shadow:0 10px 28px rgba(17,27,56,.07)!important;
}
.u-section-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:22px!important;
  margin-bottom:22px!important;
}
.u-section-head h2{
  margin:0!important;
  color:var(--u-ink)!important;
  font-size:clamp(1.55rem,2.5vw,2.2rem)!important;
}
.u-section-head p{max-width:560px!important;margin:0!important;color:var(--u-muted)!important}
.u-grid{
  display:grid!important;
  grid-template-columns:repeat(12,1fr)!important;
  gap:16px!important;
}
.u-card{
  grid-column:span 4!important;
  padding:22px!important;
  background:#fff!important;
  border:1px solid var(--u-line)!important;
  border-top:5px solid var(--u-red)!important;
  border-radius:18px!important;
  box-shadow:0 7px 18px rgba(17,27,56,.06)!important;
}
.u-card.green{border-top-color:var(--u-green)!important}
.u-card.wide{grid-column:span 6!important}
.u-card h3{margin:0 0 9px!important;color:var(--u-ink)!important}
.u-card p{margin:0!important;color:var(--u-muted)!important;line-height:1.52!important}
.u-card a{display:inline-flex!important;margin-top:14px!important;font-weight:900!important}

/* CALENDAR AND PAY: red union structural chrome, preserving semantic day colours */
.title-box,.month-title,.earn-header,
table.sched thead th,table.sched tbody td.lbl{
  background:var(--u-red)!important;
}
table.sched thead th.lbl{background:var(--u-red-dark)!important}
.screen-help{background:var(--u-red-dark)!important;color:#fff!important}
.screen-help a,.screen-help button{color:#fff!important}
.month:hover{box-shadow:0 0 0 2px var(--u-red)!important}
.month-grid th{background:#fff1f5!important;color:var(--u-red-dark)!important}
.month-grid th.wk,.month-grid .wk-num{background:#f9dce5!important;color:var(--u-red-dark)!important}
.key-label{color:var(--u-red-dark)!important}
.swatch.pattern,.month-grid td.pattern{background:var(--u-red)!important}
table.earn-tbl th{background:#f9dce5!important;color:var(--u-red-dark)!important}
table.earn-tbl th.total-h{background:var(--u-red)!important;color:#fff!important}
table.earn-tbl tr:last-child td,table.earn-tbl td.total-c,.earn-protect{
  background:#fff3f6!important;
  color:var(--u-red-dark)!important;
}
.page-wrap{
  width:min(1200px,calc(100% - 28px))!important;
  margin:0 auto!important;
  padding:16px 0 42px!important;
}

/* COOKIE AND FLOATING SUPPORT */
.nav-cookie-settings{display:none!important}
.uc-cookie-open{
  position:fixed!important;
  left:18px!important;
  bottom:18px!important;
  z-index:99990!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:10px 15px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--u-green)!important;
  color:#fff!important;
  font-weight:900!important;
  box-shadow:0 12px 30px rgba(15,100,44,.28)!important;
}
.uc-cookie-open:hover,.uc-cookie-open:focus{
  background:var(--u-green-dark)!important;
  color:#fff!important;
  outline:3px solid rgba(24,133,61,.22)!important;
}
body.cookie-banner-open .uc-cookie-open{display:none!important}

/* CANONICAL FOOTER */
.u-global-footer{
  margin-top:40px;
  background:var(--u-ink);
  color:#fff;
  border-top:5px solid var(--u-red);
}
.u-footer-inner{
  width:min(var(--u-content),calc(100% - 32px));
  margin:0 auto;
  padding:36px 0;
}
.u-footer-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:30px;
}
.u-global-footer h2,.u-global-footer h3{margin-top:0;color:#fff}
.u-global-footer p{color:rgba(255,255,255,.73);line-height:1.55}
.u-global-footer ul{margin:0;padding:0;list-style:none}
.u-global-footer li+li{margin-top:9px}
.u-global-footer a{color:#fff;text-decoration-color:rgba(255,255,255,.4)}

/* TABLET / MOBILE */
@media(max-width:1180px){
  .u-header-inner{flex-wrap:wrap;padding:12px 0}
  .u-menu-toggle{display:inline-flex!important}
  .u-nav{display:none;width:100%;margin:0}
  .u-nav.open{display:block}
  .u-nav>ul{align-items:stretch;flex-direction:column;padding-top:7px}
  .u-nav-link,.u-nav-button{width:100%!important;justify-content:space-between!important}
  .u-report{margin-left:0!important}
  .u-submenu{
    position:static;
    width:100%;
    max-height:none;
    display:none;
    margin:4px 0 8px;
    box-shadow:none;
  }
  .u-nav-item:hover>.u-submenu{display:none}
  .u-nav-item.open>.u-submenu,
  .u-nav-item.open:hover>.u-submenu{display:block}
  .u-card-grid{grid-template-columns:repeat(2,1fr)}
  .u-grid .u-card{grid-column:span 6!important}
  .u-quick-footer{grid-template-columns:repeat(2,1fr)}
  .u-quick-footer>a:nth-child(2){border-right:0}
  .u-footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .u-header-inner,.u-main,.u-page,.u-footer-inner{
    width:calc(100% - 20px)!important;
  }
  .u-brand img{width:44px;height:44px}
  .u-brand-copy strong{font-size:1.08rem}
  .u-brand-copy span{display:none}
  .u-search-wrap{margin-bottom:26px}
  .u-search input{height:54px;padding-left:56px;font-size:.92rem}
  .u-search>svg{left:20px;width:20px;height:20px}
  .u-card-grid{grid-template-columns:1fr;gap:14px}
  .u-hub-card{
    grid-template-columns:44px 1fr 14px;
    min-height:98px;
    padding:15px;
    gap:12px;
    border-radius:18px;
  }
  .u-icon{width:43px!important;height:43px!important;border-radius:12px!important}
  .u-icon svg{width:21px!important;height:21px!important}
  .u-card-title{font-size:1rem}
  .u-card-text{font-size:.82rem}
  .u-urgent{align-items:flex-start;flex-wrap:wrap;padding:16px}
  .u-urgent-line{display:none}
  .u-quick-footer{grid-template-columns:1fr}
  .u-quick-footer>a{border-right:0;border-bottom:1px solid var(--u-line);padding:13px 8px}
  .u-quick-footer>a:last-child{border-bottom:0}
  .u-page{padding:22px 0 46px!important}
  .u-hero,.u-section{padding:20px!important;border-radius:18px!important}
  .u-section-head{align-items:flex-start!important;flex-direction:column!important}
  .u-grid .u-card,.u-grid .u-card.wide{grid-column:1/-1!important}
  .page-wrap{width:calc(100% - 14px)!important;padding:10px 0 30px!important}
  .u-footer-grid{grid-template-columns:1fr}
  .uc-cookie-open{left:10px!important;bottom:12px!important;min-height:38px!important;padding:8px 12px!important;font-size:12px!important}
}
@media print{
  .u-global-header,.u-global-footer,.u-skip,.uc-cookie-open{display:none!important}
}