/**
 * blog-nav.css — Isolated styles for Header.astro and Footer.astro
 *
 * All class names are prefixed with "bh-" (blog header) or "bf-" (blog footer)
 * to prevent any collision with the parent site's CSS or the blog's own CSS.
 *
 * Matches the exact visual design of salnly.com header and footer.
 * Font: "Proxima Nova", sans-serif (falls back to system sans-serif).
 * Colors:
 *   Primary blue:   #3474ff
 *   Green:          #11c979
 *   Dark text:      #293443
 *   Footer dark bg: #333333
 *   Light gray text:#c3c3bf
 */

/* ─────────────────────────────────────────────────────────────────────────────
   RESET / BASE
───────────────────────────────────────────────────────────────────────────── */
.bh-header *,
.bh-header *::before,
.bh-header *::after,
.bf-footer *,
.bf-footer *::before,
.bf-footer *::after,
.bf-cta-wrap *,
.bf-cta-wrap *::before,
.bf-cta-wrap *::after {
  box-sizing: border-box;
}

.bh-header a,
.bf-footer a,
.bf-cta-wrap a {
  text-decoration: none;
}

.bh-header ul,
.bf-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED BUTTON STYLES
───────────────────────────────────────────────────────────────────────────── */
.bh-btn,
.bf-btn {
  display: inline-block;
  font-family: "Proxima Nova", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

/* Blue outline button (LOGIN) */
.bh-btn-outline-blue {
  color: #3474ff;
  border: 1px solid #3474ff;
  background-color: transparent;
}
.bh-btn-outline-blue:hover {
  background-color: #3474ff;
  color: #ffffff;
}

/* White outline button (LOGIN in CTA band) */
.bf-btn-outline-white {
  color: #ffffff;
  border: 1px solid #ffffff;
  background-color: transparent;
}
.bf-btn-outline-white:hover {
  background-color: rgba(255,255,255,0.15);
  color: #ffffff;
}

/* Green button (SIGN UP) */
.bh-btn-green,
.bf-btn-green {
  color: #ffffff;
  border: 1px solid #11c979;
  background-color: #11c979;
}
.bh-btn-green:hover,
.bf-btn-green:hover {
  background-color: #0db36a;
  border-color: #0db36a;
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER — MOBILE TOP BAR (always visible, shown below 992px)
───────────────────────────────────────────────────────────────────────────── */
.bh-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  font-family: "Proxima Nova", sans-serif;
}

/* Mobile bar: white background with subtle shadow */
.bh-mobile-top-bar {
  background-color: #ffffff;
  box-shadow: 0 7px 10px -12px rgba(52, 116, 255, 1);
  display: block;
}

@media (min-width: 992px) {
  .bh-mobile-top-bar {
    display: none;
  }
}

.bh-mobile-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  min-height: 52px;
}

.bh-mobile-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bh-mobile-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bh-mobile-logo-link img {
  width: 30px;
  height: auto;
  display: block;
}

.bh-mobile-login-icon img {
  width: 24px;
  height: 24px;
  display: block;
}

.bh-mobile-signup {
  font-size: 12px;
  padding: 8px 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HAMBURGER BUTTON
───────────────────────────────────────────────────────────────────────────── */
.bh-hamburger {
  background: none;
  border: 1px solid rgba(52, 116, 255, 0.3);
  border-radius: 3px;
  cursor: pointer;
  width: 33px;
  height: 33px;
  padding: 8px 6px;
  position: relative;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.bh-hamburger span {
  display: block;
  position: absolute;
  height: 3px;
  left: 6px;
  right: 6px;
  background: #3474ff;
  border-radius: 0;
  opacity: 1;
  transform: rotate(0deg);
  transition: all 0.25s ease-in-out;
}

.bh-hamburger span:nth-child(1) { top: 8px; }
.bh-hamburger span:nth-child(2) { top: 50%; margin-top: -1.5px; }
.bh-hamburger span:nth-child(3) { top: 50%; margin-top: -1.5px; }
.bh-hamburger span:nth-child(4) { bottom: 8px; }

/* Active (X) state */
.bh-hamburger.bh-active span:nth-child(1) {
  top: 15px;
  width: 0%;
  left: 50%;
  opacity: 0;
}
.bh-hamburger.bh-active span:nth-child(2) {
  transform: rotate(45deg);
}
.bh-hamburger.bh-active span:nth-child(3) {
  transform: rotate(-45deg);
}
.bh-hamburger.bh-active span:nth-child(4) {
  bottom: 15px;
  width: 0%;
  left: 50%;
  opacity: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE SLIDE-DOWN NAV
───────────────────────────────────────────────────────────────────────────── */
.bh-mobile-nav {
  display: none;
  background-color: #ffffff;
  border-top: 1px solid #e0e7ef;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bh-mobile-nav.bh-open {
  display: block;
}

.bh-mobile-nav-list {
  padding: 0;
}

.bh-mobile-item {
  border-bottom: 1px solid #e0e7ef;
}

.bh-mobile-separator {
  display: none; /* separators handled by border-bottom on items */
}

.bh-mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-family: "Proxima Nova", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #293443;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bh-mobile-nav-link:hover {
  background-color: #3474ff;
  color: #ffffff;
}

.bh-mobile-arrow {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.25s ease;
  display: inline-block;
}

.bh-mobile-dropdown.bh-open > .bh-mobile-toggle .bh-mobile-arrow {
  transform: rotate(90deg);
}

/* Mobile sub-menu (accordion) */
.bh-mobile-sub {
  display: none;
  background-color: #f5f8ff;
  border-top: 1px solid #e0e7ef;
}

.bh-mobile-dropdown.bh-open > .bh-mobile-sub {
  display: block;
}

.bh-mobile-sub-link {
  display: block;
  padding: 12px 32px;
  font-family: "Proxima Nova", sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: #293443;
  border-bottom: 1px solid #e0e7ef;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bh-mobile-sub-link:last-child {
  border-bottom: none;
}

.bh-mobile-sub-link:hover {
  background-color: #3474ff;
  color: #ffffff;
}

/* Mobile bottom CTA buttons */
.bh-mobile-cta-wrap {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background-color: #ffffff;
  border-top: 1px solid #e0e7ef;
}

.bh-mobile-cta-wrap .bh-btn {
  flex: 1;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER — DESKTOP BAR (visible at 992px+)
───────────────────────────────────────────────────────────────────────────── */
.bh-desktop-bar {
  display: none;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

@media (min-width: 992px) {
  .bh-desktop-bar {
    display: block;
  }
}

/* When scrolled — white background */
.bh-header.bh-active .bh-desktop-bar {
  background-color: #ffffff;
  border-bottom: 1px solid transparent;
  box-shadow: 0 2px 12px -4px rgba(52, 116, 255, 0.18);
}

.bh-desktop-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.bh-desktop-nav-list {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.bh-desktop-left,
.bh-desktop-right {
  display: flex;
  align-items: center;
}

.bh-desktop-left-list,
.bh-desktop-right-list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
}

/* Logo */
.bh-desktop-logo-item {
  margin-right: 8px;
  padding: 16px 8px 16px 0;
}

.bh-desktop-logo-item a {
  display: block;
  line-height: 0;
}

.bh-logo {
  width: 55px;
  height: auto;
  display: block;
}

/* Transparent logo shown by default; solid logo hidden */
.bh-logo-normal  { display: block; }
.bh-logo-scrolled { display: none; }

/* On scroll: swap logos */
.bh-header.bh-active .bh-logo-normal  { display: none; }
.bh-header.bh-active .bh-logo-scrolled { display: block; }

/* Desktop nav items */
.bh-desktop-item {
  position: relative;
  float: left;
  padding: 20px 0 0;
}

.bh-desktop-nav-link {
  display: block;
  padding: 0 14px 20px;
  font-family: "Proxima Nova", sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 14px;
  color: #ffffff;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.bh-no-link {
  cursor: default;
}

/* On scroll: nav links turn dark */
.bh-header.bh-active .bh-desktop-nav-link {
  color: #293443;
}

.bh-desktop-nav-link:hover {
  color: #3474ff;
}

/* Caret */
.bh-caret {
  font-size: 14px;
  margin-left: 3px;
  vertical-align: middle;
  display: inline-block;
  transition: transform 0.2s ease;
}

.bh-desktop-dropdown:hover .bh-caret {
  transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   DESKTOP DROPDOWN MENU
───────────────────────────────────────────────────────────────────────────── */
.bh-desktop-dropdown-menu {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  min-width: 160px;
  background-color: #ffffff;
  box-shadow: 0 0 30px -12px rgba(41, 52, 67, 1);
  padding: 20px;
  z-index: 200;
}

/* Right-aligned dropdown (for items on the right side of nav) */
.bh-dropdown-right {
  left: auto;
  right: 0;
}

.bh-desktop-dropdown:hover .bh-desktop-dropdown-menu {
  display: block;
}

.bh-dropdown-link {
  display: block;
  padding: 8px 0;
  font-family: "Proxima Nova", sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: #293443;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.bh-dropdown-link:hover {
  color: #3474ff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DESKTOP LOGIN ICON
───────────────────────────────────────────────────────────────────────────── */
.bh-desktop-login-icon-item {
  padding-top: 10px;
}

.bh-desktop-login-icon-item a {
  display: block;
  padding: 0 8px 10px;
  line-height: 0;
}

.bh-login-icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* White icon shown on transparent header; blue icon shown on white header */
.bh-login-icon-white { display: block; }
.bh-login-icon-blue  { display: none; }

.bh-header.bh-active .bh-login-icon-white { display: none; }
.bh-header.bh-active .bh-login-icon-blue  { display: block; }

/* ─────────────────────────────────────────────────────────────────────────────
   DESKTOP LOGIN BUTTON
───────────────────────────────────────────────────────────────────────────── */
.bh-desktop-login-btn-item {
  padding: 10px 0 0 8px;
}

/* On transparent header, LOGIN button is white-outlined */
.bh-desktop-login-btn-item .bh-btn-outline-blue {
  color: #ffffff;
  border-color: #ffffff;
}

.bh-desktop-login-btn-item .bh-btn-outline-blue:hover {
  background-color: rgba(255,255,255,0.15);
  color: #ffffff;
}

/* On scrolled (white) header, LOGIN button turns blue */
.bh-header.bh-active .bh-desktop-login-btn-item .bh-btn-outline-blue {
  color: #3474ff;
  border-color: #3474ff;
}

.bh-header.bh-active .bh-desktop-login-btn-item .bh-btn-outline-blue:hover {
  background-color: #3474ff;
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER — CTA BAND
───────────────────────────────────────────────────────────────────────────── */
.bf-cta-wrap {
  position: relative;
  z-index: 1;
}

.bf-cta-band {
  position: relative;
  overflow: hidden;
  background-color: #333333;
  background-image: url('/images/footer-cta-ribbon-bg.png');
  background-size: cover;
  background-position: center;
  padding: 40px 0 80px;
}

/* Angled dark overlay at bottom (matches salnly.com :after pseudo) */
.bf-cta-band::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('/images/darkGray-angle-background.png');
  height: 193px;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

.bf-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.bf-cta-text {
  flex: 1 1 300px;
}

.bf-cta-headline {
  font-family: "Proxima Nova", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.4;
}

.bf-cta-subtext {
  font-family: "Proxima Nova", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #ffffff;
  margin: 0;
  line-height: 1.5;
}

.bf-cta-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .bf-cta-inner {
    flex-direction: column;
    text-align: center;
  }
  .bf-cta-buttons {
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER — MAIN DARK SECTION
───────────────────────────────────────────────────────────────────────────── */
.bf-footer {
  background-color: #333333;
  font-family: "Proxima Nova", sans-serif;
  color: #c3c3bf;
}

.bf-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER — TOP COLUMNS
───────────────────────────────────────────────────────────────────────────── */
.bf-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.bf-footer-col {
  flex: 1 1 140px;
  min-width: 120px;
}

.bf-footer-col-brand {
  flex: 1 1 180px;
  min-width: 160px;
}

/* Logo */
.bf-footer-logo-link {
  display: inline-block;
  margin-bottom: 12px;
}

.bf-footer-logo {
  width: 55px;
  height: auto;
  display: block;
}

/* Tagline */
.bf-footer-tagline {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

/* Column heading */
.bf-footer-col-title {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}

.bf-footer-heading {
  margin-bottom: 4px;
}

/* Footer links */
.bf-footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bf-footer-link-item {
  padding: 6px 0;
}

.bf-footer-link {
  font-size: 13px;
  font-weight: 300;
  color: #c3c3bf;
  transition: color 0.15s ease;
}

.bf-footer-link:hover {
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER — SOFTWORKS ECOSYSTEM LINKS
───────────────────────────────────────────────────────────────────────────── */
.bf-footer-ecosystem {
  text-align: center;
  padding: 16px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.bf-footer-ecosystem > div {
  margin-bottom: 6px;
}

.bf-ecosystem-text {
  font-size: 13px;
  color: #c3c3bf;
}

.bf-ecosystem-link {
  font-size: 13px;
  color: #c3c3bf;
  transition: color 0.15s ease;
}

.bf-ecosystem-link:hover {
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER — BOTTOM BAR
───────────────────────────────────────────────────────────────────────────── */
.bf-footer-bottom {
  padding: 20px 0;
}

.bf-footer-bottom-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bf-footer-policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.bf-footer-policy-link {
  font-size: 12px;
  font-weight: 300;
  color: #c3c3bf;
  transition: color 0.15s ease;
}

.bf-footer-policy-link:hover {
  color: #ffffff;
}

.bf-footer-copyright {
  font-size: 12px;
  font-weight: 300;
  color: #c3c3bf;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE ADJUSTMENTS
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .bf-footer-top {
    flex-direction: column;
    gap: 24px;
  }

  .bf-footer-bottom-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .bf-footer-policy-links {
    gap: 12px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .bf-footer-top {
    flex-wrap: wrap;
    gap: 24px;
  }
  .bf-footer-col {
    flex: 1 1 calc(50% - 24px);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BODY OFFSET — push content below fixed header
   When a hero banner is present it acts as the spacer; padding-top handles
   pages where the banner is hidden (heroBannerImage='').
───────────────────────────────────────────────────────────────────────────── */
.bh-body-offset {
  padding-top: 52px; /* mobile: only used when hero banner is hidden */
}
@media (min-width: 992px) {
  .bh-body-offset {
    padding-top: 72px; /* desktop: only used when hero banner is hidden */
  }
}
/* When a hero banner is present, the <main> needs no extra top padding */
.bh-has-banner .bh-body-offset {
  padding-top: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BLOG HERO BANNER — narrow dark banner below fixed nav
───────────────────────────────────────────────────────────────────────────── */
.bh-hero-banner {
  position: relative;
  width: 100%;
  height: 110px;           /* narrow band — fixed height regardless of source image size */
  background-size: cover;
  background-position: center 40%;  /* show upper portion of image where text/subject is */
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 0;
}

/* Dark overlay so white nav text is always readable */
.bh-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 30, 0.55);
  z-index: 1;
}

/* Text content centered over the overlay */
.bh-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.bh-hero-label {
  font-family: "Proxima Nova", "Inter", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1;
}

.bh-hero-subtitle {
  font-family: "Proxima Nova", "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
}

/* Slightly taller on desktop */
@media (min-width: 992px) {
  .bh-hero-banner {
    height: 120px;
  }
  .bh-hero-label {
    font-size: 2.4rem;
  }
  .bh-hero-subtitle {
    font-size: 0.9rem;
  }
}