/*
 * Tyso Scale unified site header — v10.1.1
 * Home is the geometry source of truth.
 * This file intentionally loads LAST so public pages and authenticated PHP pages
 * use the same header dimensions, spacing and responsive behavior.
 */
html{scrollbar-gutter:stable}
@view-transition{navigation:auto}
.header{
  view-transition-name:tyso-site-header;
  background:rgba(21,25,30,.97)!important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
::view-transition-old(tyso-site-header),
::view-transition-new(tyso-site-header){animation-duration:0s}

/* Home action-button appearance is authoritative in every auth state. */
.header .customer-action,
.header .employee-action{
  background:#E10F24!important;
  color:#FFFFFF!important;
  border-color:#E10F24!important;
}
.header .customer-action:hover,
.header .employee-action:hover{
  background:#E10F24!important;
  border-color:#E10F24!important;
  transform:translateY(-1px);
}
.header .phone-action{
  background:#f3f5f6!important;
  color:#000C0C!important;
  border-color:#f3f5f6!important;
}
.header .phone-action:hover{background:#FFFFFF!important;transform:translateY(-1px)}

/* Desktop: exact current Home geometry. */
@media (min-width:1181px){
  .header .container.nav{
    width:min(calc(100% - 30px),1440px)!important;
    max-width:1440px!important;
    min-height:78px!important;
    height:78px!important;
    margin:0 auto!important;
    padding-left:4px!important;
    padding-right:4px!important;
    gap:12px!important;
    flex-wrap:nowrap!important;
    box-sizing:border-box!important;
  }
  .header .brand{
    width:60px!important;
    min-width:60px!important;
    height:60px!important;
    margin-right:0!important;
    flex:0 0 60px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .header .brandbox,
  .header .brand-box{
    background:transparent!important;
    box-shadow:none!important;
    width:60px!important;
    min-width:60px!important;
    height:60px!important;
    padding:0!important;
    border-radius:14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
  }
  .header .brandbox img,
  .header .brand-box img{
    width:56px!important;
    height:56px!important;
    max-width:56px!important;
    max-height:56px!important;
    object-fit:contain!important;
    display:block!important;
  }
  .header .brandcopy,
  .header .brand-copy{display:none!important}
  .header .navlinks{
    flex:1 1 auto!important;
    align-self:stretch!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:0!important;
    margin:0 30px 0 24px!important;
    min-width:0!important;
    height:78px!important;
    flex-wrap:nowrap!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
  .header .navlinks > a:not(.mobile-portal-link){
    height:78px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    line-height:1!important;
    padding:0 6px!important;
    font-size:1rem!important;
    letter-spacing:.005em!important;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    word-break:keep-all!important;
  }
  .header .navlinks > a:not(.mobile-portal-link):after{bottom:18px!important}
  .header .header-actions-triad{
    height:78px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    flex:0 0 auto!important;
  }
  .header .header-action{
    height:40px!important;
    min-width:136px!important;
    padding:0 14px!important;
    border-radius:999px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:.82rem!important;
    font-weight:900!important;
    white-space:nowrap!important;
    line-height:1!important;
    box-sizing:border-box!important;
  }
  .header .phone-action{min-width:136px!important}
  .header .menu{display:none!important}
  .header .mobile-portal-link{display:none!important}
}

/* Same Home compression behavior on narrower desktops. */
@media (min-width:1181px) and (max-width:1360px){
  .header .navlinks{margin:0 16px!important}
  .header .navlinks > a:not(.mobile-portal-link){font-size:.88rem!important;padding:0 4px!important}
  .header .brand,
  .header .brandbox,
  .header .brand-box{width:56px!important;min-width:56px!important;height:56px!important;flex-basis:56px!important}
  .header .brandbox img,
  .header .brand-box img{width:52px!important;height:52px!important;max-width:52px!important;max-height:52px!important}
}

/* Tablet: one shared layout for public, customer and employee states. */
@media (max-width:1180px){
  .header .container.nav{
    width:min(calc(100% - 30px),1440px)!important;
    min-height:82px!important;
    margin:0 auto!important;
    padding:0!important;
    gap:14px!important;
    position:relative!important;
    flex-wrap:nowrap!important;
  }
  .header .brand{margin-right:8px!important;flex:0 0 auto!important;min-width:auto!important}
  .header .brandbox,
  .header .brand-box{
    background:transparent!important;
    box-shadow:none!important;
    width:54px!important;
    height:54px!important;
    padding:0!important;
    border-radius:0!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
  }
  .header .brandbox img,
  .header .brand-box img{width:50px!important;height:50px!important;max-width:50px!important;max-height:50px!important;object-fit:contain!important}
  .header .brandcopy,
  .header .brand-copy{display:none!important}
  .header .menu{display:block!important}
  .header .navlinks{
    display:none!important;
    position:absolute!important;
    left:15px!important;
    right:15px!important;
    top:76px!important;
    margin:0!important;
    background:#000C0C!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:18px!important;
    padding:14px!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
    white-space:normal!important;
    z-index:150!important;
  }
  .header .navlinks.open{display:flex!important}
  .header .navlinks a{padding:0!important;font-size:.9rem!important;white-space:normal!important}
  .header .navlinks a:after{bottom:-6px!important}
  .header .header-actions-triad{display:flex!important;align-items:center!important;gap:8px!important;margin-left:auto!important}
  .header .header-action{min-width:112px!important;height:38px!important;padding:0 10px!important;font-size:.73rem!important}
  .header .mobile-portal-link{display:none!important}
}

/* Phone / compact tablet: exact same collapsed header regardless of login state. */
@media (max-width:850px){
  .header .container.nav{width:min(calc(100% - 24px),1440px)!important;min-height:76px!important;height:76px!important}
  .header .brand{margin-right:0!important;flex:0 0 auto!important}
  .header .brandbox,
  .header .brand-box{width:46px!important;height:46px!important}
  .header .brandbox img,
  .header .brand-box img{width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important}
  .header .menu{
    display:grid!important;
    place-items:center!important;
    margin-left:auto!important;
    order:90!important;
    width:42px!important;
    height:42px!important;
    padding:0!important;
    border-radius:12px!important;
    background:#000C0C!important;
    border:1px solid rgba(255,255,255,.10)!important;
    line-height:1!important;
    flex:0 0 42px!important;
    color:#FFFFFF!important;
  }
  .header .header-actions-triad{display:none!important}
  .header .navlinks{
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    top:calc(100% + 1px)!important;
    margin:0!important;
    z-index:150!important;
  }
  .header .navlinks .mobile-portal-link{
    display:block!important;
    width:100%!important;
    padding:10px 12px!important;
    border-radius:10px!important;
    background:#E10F24!important;
    color:#FFFFFF!important;
  }
}