:root{
  --brand-500:#0fb8ad;
  --brand-700:#0a7f78;
  --text:#0b1b22;
  --muted:#5a6b73;
  --border:#e6eef2;
  --surface:#fff;
  --navy:#223852;
  --white:#ffffff;
  --solid-scrolled:#80d0c7;

  --sano-gradient: linear-gradient(
    to top right,
    #41889a 0%,
    #4992a0 25%,
    #78c6c1 75%,
    #80d0c7 100%
  );

  --topbar-h: 92px;
}

html, body { overflow-x: hidden; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main{ flex-grow: 1; }

/* Push content below the fixed navbar (all public pages) */
main{
  padding-top: var(--topbar-h);
}

/* Fix: Bootstrap's py-5 uses !important, so override for common layout */
main.container.py-5{
  padding-top: calc(var(--topbar-h) + 3rem) !important;
}

/* Shared container used by landing navbar */
.container-landing{
  max-width:1120px;
  margin:0 auto;
  padding:0 1rem;
}

/* ===== NAVBAR ===== */

nav.tl-topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  transition: background-color .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
  background: var(--solid-scrolled) !important; /* teal everywhere by default */
  border: 0;
  border-bottom: 1px solid #88d0cb !important;
  margin-bottom: 0 !important;
}

nav.tl-topbar.tl-at-top{
  background: var(--solid-scrolled) !important; /* teal at top */
  box-shadow: none !important;
}

nav.tl-topbar.tl-scrolled{
  background: var(--solid-scrolled) !important; /* teal when scrolled */
  box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
}

/* SOLID (for blog + other pages) — make it teal too (same as scrolled) */
nav.tl-topbar.tl-solid{
  background: var(--solid-scrolled) !important;
  border-bottom: 1px solid #88d0cb !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

.tl-topbar-inner{
  display:flex;
  align-items:center;
  gap:2.25rem;
  padding: 1.25rem 0;
}

.tl-nav{
  display:flex;
  align-items:center;
  gap:1.25rem;
  margin-left:.25rem;
}

.tl-actions{
  display:flex;
  align-items:center;
  gap:.65rem;
  margin-left:auto;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* optional tiny alignment nudges */
.brand-nudge{ margin-left: -12px; }
.actions-nudge{ margin-right: -12px; }

@media (max-width: 768px){
  .brand-nudge{ margin-left: -6px; }
  .actions-nudge{ margin-right: -6px; }
}

.tl-link{
  color:#fff;
  text-decoration:none;
  padding:.55rem .85rem;
  border-radius:.5rem;
  font-weight:400;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition: color .15s ease, background-color .15s ease;
}

.tl-link:hover{
  color: var(--navy);
  background: transparent;
  text-decoration: none;
}

/* Keep links white on tl-solid too (since tl-solid is now teal) */
nav.tl-topbar.tl-solid .tl-link{
  color:#fff;
}
nav.tl-topbar.tl-solid .tl-link:hover{
  color: var(--navy);
}

.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
}

.brand-logo{
  display:block;
  height:64px;
  width:auto;
  object-fit:contain;
}

/* If you ever use a dark logo variant, keep the size tweak */
.brand-logo--dark{
  height:44px;
}

.tl-btn-primary,
.tl-btn-outline{
  text-decoration: none !important;
  min-width: 168px;
  text-align: center;
}

.tl-btn-primary{
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.85));
  color: var(--solid-scrolled);
  border:0;
  border-radius:999px;
  padding:.8rem 1.25rem;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}

.tl-btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
  border-radius:999px;
  padding:.8rem 1.25rem;
}

/* Dark variants (still allowed, but with teal navbar you may not need them) */
.tl-btn-outline--dark{
  border: 1px solid rgba(34,56,82,.25);
  color: var(--navy);
}
.tl-btn-outline--dark:hover{
  background: rgba(34,56,82,.06);
}

.tl-btn-primary--dark{
  background: var(--sano-gradient);
  color: #ffffff;
}
.tl-btn-primary--dark:hover{
  filter: brightness(1.03);
  color:#ffffff;
}

.tl-toggle{
  border:0;
  background:transparent;
  font-size:1.6rem;
  color:#fff;
  display:none;
}

/* Toggle stays white on teal */
nav.tl-topbar.tl-solid .tl-toggle{
  color:#fff;
}

@media (max-width: 992px){
  .tl-toggle{ display:block; }
  .tl-nav{ display:none; }
}

/* ===== MOBILE MENU ===== */

.tl-mobile{ border-bottom:0; }

.tl-mobile-inner{
  padding:.6rem 1rem;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

/* Mobile menu background should match teal navbar */
nav.tl-topbar.tl-at-top + .collapse.tl-mobile{ background: var(--solid-scrolled) !important; }
nav.tl-topbar.tl-scrolled + .collapse.tl-mobile{ background: var(--solid-scrolled) !important; }
nav.tl-topbar.tl-solid + .collapse.tl-mobile{
  background: var(--solid-scrolled) !important;
  border-bottom: 1px solid #88d0cb;
}

.tl-mobile-link{
  text-decoration:none;
  padding:.6rem .85rem;
  border-radius:.5rem;
  color:#fff;
}

nav.tl-topbar.tl-solid + .collapse.tl-mobile .tl-mobile-link{
  color:#fff;
}

.tl-mobile-link:hover{
  background: rgba(255,255,255,.10);
}

nav.tl-topbar.tl-solid + .collapse.tl-mobile .tl-mobile-link:hover{
  background: rgba(255,255,255,.10);
}

/* Make the logout button look like a link */
.tl-mobile-link--button{
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
}

/* ===== FOOTER ===== */

.footer-main{
  background-color: #88d0cb;
  padding: 5rem 0 4rem 0;
  color: #ffffff;
}

.footer-content{
  max-width: 1200px;
  margin: 0 auto;
}

.footer-heading{
  font-weight: 600;
  margin-bottom: 14px;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .06em;
}

.footer-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li{ margin-bottom: 8px; }

.footer-list a{
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  opacity: .95;
  transition: opacity .15s ease;
}

.footer-list a:hover{
  opacity: 1;
  text-decoration: underline;
}

.footer-divider{
  height: 1px;
  background: rgba(255,255,255,.35);
  width: 100%;
  margin: 4rem 0 2rem 0;
}

.footer-bottom{
  font-size: 13px;
  opacity: .85;
  text-align: center;
  padding-bottom: 2rem;
}