/* Progress bar */
body.single-techtips .tt-progress{
  position: fixed;
  left: 0;
  top: 0;
  height: 6px;
  width: 100%;
  background: rgba(0,0,0,0.12);
  z-index: 999999;
}
body.single-techtips .tt-progress__bar{
  height: 100%;
  width: 0%;
  background: #F10000;
}
body.admin-bar.single-techtips .tt-progress{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar.single-techtips .tt-progress{ top: 46px; }
}

/* Hero */
body.single-techtips .tt-hero{
  padding: 78px 16px;
  color:#fff;
  text-align:center;
  background:#0d1327 !important;
  position:relative;
  z-index:1;
}
body.single-techtips .tt-hero__inner{ max-width:1200px; margin:0 auto; }
body.single-techtips .tt-hero__kicker{ font-size:14px; letter-spacing:.06em; opacity:.85; margin-bottom:18px; }
body.single-techtips .tt-hero__title{
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-size:40px;
  font-weight:500;
  line-height:56px;
  text-transform:uppercase;
}

/* Layout */
body.single-techtips .tt-wrap{
  position:relative;
  z-index:2;
  margin-top:0;
  padding-top:28px;
  background:#fff;
}
body.single-techtips .tt-layout{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:28px;
  align-items:start;
  max-width:1200px;
  margin:0 auto;
  padding:28px 16px;
}

body.single-techtips .tt-wrap,
body.single-techtips .tt-layout,
body.single-techtips .tt-content,
body.single-techtips main.tt-content,
body.single-techtips .customize-support,
body.single-techtips #page,
body.single-techtips #content,
body.single-techtips #primary,
body.single-techtips .site-content,
body.single-techtips .content-area {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
}


/* TOC box */
body.single-techtips .tt-toc{
  position: sticky !important;
  top: 90px;
  background:#fff;
  border-radius:14px;
  padding:18px 16px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
body.single-techtips .tt-toc__title{
  font-weight:700;
  font-size:20px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:20px;
  opacity:1;
  font-family: 'Space Grotesk';
}

/* Reference-style TOC rows */
body.single-techtips #ttTocNav .js-anchor{
  margin:0 0 5px 0;
  padding-left:22px;
  position:relative;
}
body.single-techtips #ttTocNav .js-anchor::before{
  content:"›";
      color: #f10000;
    font-family: icon3ds;
  position:absolute;
  left:6px;
  font-size: 20px;
  opacity:0;
  top: 0px;
  transform:translateX(-2px);
  transition:opacity .15s ease, transform .15s ease;
}
body.single-techtips #ttTocNav .js-anchor.is-active::before{
  opacity:.7;
  transform:translateX(0);
}
body.single-techtips #ttTocNav a{
  display:block;
  color:#0d1327;
  text-decoration:none;
	font-size:14px;
  line-height:1.35;
  padding:6px 8px;
  border-radius:10px;
  transition:ease-in-out .4s;
}
body.single-techtips #ttTocNav .js-anchor.is-active a{
  font-weight:600;
	color:#f10000;
}
body.single-techtips #ttTocNav a:hover{
  background:rgba(0,0,0,.04);
	color:#f10000;
}

/* Mobile */
@media (max-width: 991px){
  body.single-techtips .tt-layout{ grid-template-columns:1fr; }
  body.single-techtips .tt-toc{ position:relative !important; top:auto; }
	body.single-techtips .tt-hero__title{
		font-size:30px;
	}
	.pd-form .form-block {
    padding-left: 0!important;
    padding-top: 20px;
}
		body.single-techtips .tt-wrap {
    padding-top: 0;
}
}
body.single-techtips .tt-layout {
  align-items: start;
}

body.single-techtips .tt-toc {
  align-self: start;
}
body.single-techtips .tt-layout {
  min-height: 100vh;
}
/* Sticky fix: your theme sets overflow hidden on html/body, which breaks position: sticky */
html.tt-toc-js-on,
body.single-techtips {
  overflow: visible !important;
}

/* If the theme sets overflow-x/y separately, force them too */
html.tt-toc-js-on,
body.single-techtips {
  overflow-x: visible !important;
  overflow-y: visible !important;
}
.pd-form {
    display: block;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #fff;
}
@media(min-width:991px){
body.single-techtips .tt-toc{
  position: sticky !important;
  top: 100px;
}

}
/* TOC social icons (LinkedIn, Facebook, X, YouTube) */
.tt-toc .tt-social{
  display:flex;
  gap:10px;
  margin-top:20px;
}

.tt-toc .tt-social__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.tt-toc .tt-social__btn svg{
  fill:#f10000; /* solid red */
  transition:opacity .2s ease;
}

.tt-toc .tt-social__btn:hover svg{
  opacity:.75;
}