@charset "UTF-8";
/* --- Topbar --- */
.site-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2045;                 /* above navbar */
  background: rgba(7,118,186,0.92); /* slight transparency */
  color: #fff;
  font-size: 13px;
  line-height: 1;
  backdrop-filter: saturate(140%) blur(2px); /* optional nice-ity; safe to keep */
}
.site-topbar__inner{
  max-width: 1300px; /* match your layout if different */
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-topbar a{ color:#fff; opacity:.95; text-decoration: none; }
.site-topbar a:hover{ opacity:1; text-decoration: none; }
.site-topbar__left a{ margin-right: 10px; font-size: 14px; }
.site-topbar__right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.site-topbar__right i{ margin-right:6px; }
.site-topbar__right .sep{ opacity:.6; }
.site-topbar__right .cta{
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 3px;
  margin-left: 4px;
}

/* Shift the existing fixed navbar down below the new topbar */
.navbar-fixed-top{ top: 36px; }    /* topbar height ~= 36px */

/* Make the current menu slightly transparent as requested */
.navbar-fixed-top,
.navbar-static-top{
  background: rgba(255,255,255,0.95) !important;  /* subtle transparency */
  backdrop-filter: saturate(120%) blur(2px);       /* optional */
}

/* Keep dropdowns looking solid on top of transparency */
.navbar .dropdown-menu{
  background: #fff;
}

/* Small screens: tighten spacing and hide some text if needed */
@media (max-width: 768px){
  .site-topbar__inner{ padding: 6px 10px; }
  .site-topbar__right span { display:none; }          /* hide phone/email text on very small screens */
  .site-topbar__right .cta{ padding: 3px 6px; }
}

/* Utility: add extra page offset if you rely on fixed nav layout spacing */
body{ padding-top: 36px; }          /* ensures content doesn’t sit under the topbar */

:root{
  --primary: #0776BA;
  --secondary: #86C442;
}

/* --- Social icons: circle + animated bottom->top fill --- */
.site-topbar__left .social-link{
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
  margin-right: 8px;
}
.site-topbar__left .social-link i{ position: relative; z-index: 1; }
.site-topbar__left .social-link::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: var(--secondary);
  transition: height .25s ease;
}
.site-topbar__left .social-link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.site-topbar__left .social-link:hover::before{ height: 100%; }

/* --- "Criar conta" CTA: animated fill from bottom to top --- */
.site-topbar__right .cta{
  position: relative;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  padding: 4px 10px;
  text-decoration: none;
  color: #fff;
  background-image: linear-gradient(to top, var(--secondary), var(--secondary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0%;
  transition: background-size .3s ease, color .3s ease, border-color .25s ease, transform .2s ease;
  will-change: background-size;
}
.site-topbar__right .cta:hover{
  background-size: 100% 100%;        /* fill from bottom to top */
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
}


/* Keep right side pinned to the right even if the left side is empty */
.site-topbar__inner{
  justify-content: flex-start; /* override the earlier space-between */
}
.site-topbar__right{
  margin-left: auto;           /* pushes it to the far right */
}

/* (optional) keep the left wrapper flexible even when empty */
.site-topbar__left{
  display: flex;
  gap: 8px;
  min-height: 34px;            /* keeps bar height consistent */
}


/* Smaller social icons */
.site-topbar__left .social-link{
  width: 26px;          /* was 34px */
  height: 26px;         /* was 34px */
  margin-right: 6px;    /* tighten spacing */
}
.site-topbar__left .social-link i{
  font-size: 12px;      /* was ~14px from FA default */
}

/* Optional: make them even smaller on mobile */
@media (max-width: 768px){
  .site-topbar__left .social-link{ width: 24px; height: 24px; margin-right: 5px; }
  .site-topbar__left .social-link i{ font-size: 11px; }
}

/* === Compact top bar === */
:root{ --topbar-h: 34px; }                 /* <- adjust this number to taste */

.site-topbar{
  height: var(--topbar-h);
}
.site-topbar__inner{
  min-height: var(--topbar-h);
  padding: 0 12px;                         /* tighter vertical padding */
}

/* slightly smaller text in the bar */
.site-topbar span,
.site-topbar a{ font-size: 12px; }

/* smaller social pills (keeps your hover fill) */
.site-topbar__left .social-link{
  width: 22px;
  height: 22px;
  margin-right: 6px;
}
.site-topbar__left .social-link i{ font-size: 11px; }

/* keep the navbar parked right under the topbar */
.navbar-fixed-top{
  top: var(--topbar-h);
}

/* if you offset page content with padding, keep it in sync */
body{
  padding-top: calc(var(--topbar-h) + 54px); /* 44px ≈ typical navbar height; tweak if yours differs */
}

/* Center the social icons vertically inside the top bar */
.site-topbar__left{
  display: flex;            /* already there, but keep */
  align-items: center;      /* <-- centers children vertically */
  height: var(--topbar-h);  /* match the bar height */
}

/* Make each icon circle center its glyph perfectly */
.site-topbar__left .social-link{
  display: inline-flex;           /* already there, but keep */
  align-items: center;
  justify-content: center;
  height: calc(var(--topbar-h) - 8px);  /* circle size relative to bar */
  width:  calc(var(--topbar-h) - 8px);
  line-height: 1;                 /* no baseline shift */
  box-sizing: border-box;         /* include the 1px border in the size */
}

.site-topbar__left .social-link i{
  display: block;                 /* avoids inline baseline quirks */
  line-height: 1;
  font-size: 12px;                /* keep your chosen size */
}