/* TQ 5.15 - fixed navigation, sticky company quick view, form validation UX */

/* 1. Header always follows viewport */
:root{
  --tq-fixed-header-height:74px;
  --tq-adminbar-offset:0px;
}
body.admin-bar{--tq-adminbar-offset:32px}
.site-header{
  position:fixed!important;
  top:var(--tq-adminbar-offset)!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:9990!important;
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid rgba(15,23,42,.07)!important;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:0 4px 18px rgba(15,23,42,.035);
  transform:translateZ(0)
}
html{
  scroll-padding-top:calc(var(--tq-fixed-header-height) + 20px)
}
body{
  padding-top:var(--tq-fixed-header-height)!important
}
input,select,textarea,[id]{
  scroll-margin-top:calc(var(--tq-fixed-header-height) + 24px)
}
body.tq-has-scrolled .site-header{
  box-shadow:0 12px 36px rgba(15,23,42,.12)!important
}

/* 2. Company profile sidebar follows the reader */
.tq-profile-grid{
  overflow:visible!important;
  align-items:start!important
}
.tq-profile-grid>.tq-sidecol{
  min-width:0;
  overflow:visible!important;
  align-self:stretch!important
}
.tq-profile-grid>.tq-sidecol>.tq-sticky{
  position:sticky!important;
  top:calc(var(--tq-adminbar-offset) + var(--tq-fixed-header-height) + 22px)!important;
  max-height:calc(100vh - var(--tq-adminbar-offset) - var(--tq-fixed-header-height) - 44px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  z-index:20
}

/* Keep enough breathing room when sidebar is taller than the viewport */
.tq-profile-grid>.tq-sidecol>.tq-sticky::-webkit-scrollbar{width:6px}
.tq-profile-grid>.tq-sidecol>.tq-sticky::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:999px
}

/* 3. Clear, accessible validation feedback */
.tq-form .is-invalid,
form .is-invalid,
.tq-form [aria-invalid="true"],
form [aria-invalid="true"],
.tq-form input:user-invalid,
.tq-form select:user-invalid,
.tq-form textarea:user-invalid,
form input:user-invalid,
form select:user-invalid,
form textarea:user-invalid{
  border-color:#dc2626!important;
  background-color:#fff7f7!important;
  box-shadow:0 0 0 3px rgba(220,38,38,.10)!important;
  outline:none!important
}
.tq-form .is-invalid:focus,
form .is-invalid:focus,
.tq-form [aria-invalid="true"]:focus,
form [aria-invalid="true"]:focus{
  border-color:#b91c1c!important;
  box-shadow:0 0 0 4px rgba(220,38,38,.16)!important
}
.tq-form .is-valid,
form .is-valid{
  border-color:#16a34a!important
}
.tq-field-error{
  display:flex;
  align-items:flex-start;
  gap:6px;
  width:100%;
  margin:6px 0 0;
  color:#b91c1c;
  font-size:12px;
  font-weight:750;
  line-height:1.45
}
.tq-field-error:before{
  content:"!";
  display:grid;
  place-items:center;
  flex:0 0 18px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fee2e2;
  color:#b91c1c;
  font-size:11px;
  font-weight:900
}
.tq-form label.has-error,
form label.has-error{
  color:#991b1b!important
}
.tq-form-validation-summary{
  display:none;
  margin:0 0 18px;
  padding:13px 15px;
  border:1px solid #fecaca;
  border-radius:14px;
  background:#fef2f2;
  color:#991b1b;
  font-size:13px;
  font-weight:750;
  line-height:1.5
}
.tq-form-validation-summary.is-visible{display:block}
.tq-form-validation-summary strong{display:block;margin-bottom:2px}

/* Server-side / plugin error messages */
.tq-error,
.form-error,
.notice-error,
.tq-form-error,
[role="alert"].error{
  border-color:#fecaca!important;
  background:#fef2f2!important;
  color:#991b1b!important
}

@media(max-width:782px){
  :root{--tq-fixed-header-height:68px}
  body.admin-bar{--tq-adminbar-offset:46px}
}

@media(max-width:900px){
  .tq-profile-grid>.tq-sidecol>.tq-sticky{
    position:static!important;
    top:auto!important;
    max-height:none!important;
    overflow:visible!important
  }
}

@media(max-width:600px){
  body.admin-bar{--tq-adminbar-offset:46px}
  html body.admin-bar .site-header{top:var(--tq-adminbar-offset)!important}
}

@media(max-width:480px){
  :root{--tq-fixed-header-height:66px}
}