/* ===== HEADER + NAV CORE ===== */

/* ===== Dropdown styling ===== */
.nav__dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.dropdown-btn:hover,
.dropdown-btn:focus {
  background: var(--fls-red, #c61a1a);
  color: #fff;
}

.dropdown-btn i {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

/* Dropdown content */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 180px;
  z-index: 10;
  padding: 0.5rem 0;
    border: 2px solid var(--fls-red, #c61a1a);

}

.dropdown-menu a {
  display: block;
  padding: 0.6rem 1rem;
  color: var(--fls-gray-900, #1d1f23);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.2s ease;
    white-space: nowrap;    /* prevents wrapping */

}

.dropdown-menu a:hover {
  background: rgba(198,26,26,0.08);
  color: var(--fls-red, #c61a1a);
}

/* Hover + focus logic */
.nav__dropdown:hover .dropdown-menu,
.nav__dropdown:focus-within .dropdown-menu {
  display: block;
}

.nav__dropdown:hover .dropdown-btn i {
  transform: rotate(180deg);
}


/* Header should always stay above hero banner */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.brand_logo {
  height: 70px;
  width: auto;
  object-fit: contain;
}

/* Top strip above the header */
.topbar {
  width: 100%;
  background: #f5f5f5;
  padding: 0.25rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
}

.topbar .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.topbar__right {
  color: #b91c1c;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


*{box-sizing:border-box} 
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:#F9FAFB;color:#111827}
:root{--primary:#0F62FE;--muted:#6B7280}
.section{padding:64px 0}
/* Container (shared) */
.container{ max-width:1200px; margin:0 auto; padding:0 16px; }

/* --- Header / Topbar --- */
.topbar { background:#fff; position:sticky; top:0; z-index:100; }
.topbar__inner{ display:flex; align-items:center; justify-content:flex-start; height:100px; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.85rem; text-decoration:none; margin-right: auto; }
.brand__logo{ height:100px; width:auto; mix-blend-mode: multiply; }
.brand__text{display:flex; flex-direction:column; line-height:1.05;}
.brand__title{ font-weight:800; font-size:1.6rem; color:#b91c1c; } /* same bold red as your dock app */
.brand__subtitle{font-weight:600; font-size:.8rem; color:#6b7280;}

/* Top-right badge */
.header-badge{
  position: absolute;
  top: 6px;                /* nudge down from the very top */
  right: 16px;             /* stick to right edge */
  font-size: .80rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: #b91c1c;          /* brand red */
  text-transform: uppercase;
  pointer-events: none;    /* don’t steal clicks from nav */
}

/* Pill nav (right side) */
.nav{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.nav__pill{
  display:inline-block; padding:.55rem 1rem; border-radius:999px;
  border:2px solid #b91c1c; color:#b91c1c; text-decoration:none; font-weight:700;
  background:#fff;
}
.nav__pill:hover{ background:#fee2e2; }
.nav__pill--primary{ background:#b91c1c; color:#fff; border-color:#b91c1c; }
.nav__pill--primary:hover{ filter:brightness(.95); }
.nav__pill.is-active{ background:#b91c1c; color:#fff; }


.nav__link{
  padding:.55rem .9rem; border-radius:999px; text-decoration:none;
  color:#b91c1c; border:1.5px solid #b91c1c; font-weight:600;
}
.nav__link:hover{background:#fee2e2;}

/* Login button styled like the red pill buttons */
.btn--pill{border-radius:999px; padding:.55rem 1rem; font-weight:700;}
.btn--outline-red{border:1.5px solid #b91c1c; color:#b91c1c; background:#fff; text-decoration:none;}
.btn--outline-red:hover{background:#b91c1c; color:#fff;}

/* Accent bar identical vibe */
.accent-bar{ height:10px; background:linear-gradient(90deg,#b91c1c 0%,#b91c1c 60%,#6b7280 100%); }

/* Responsive tweaks */
@media (max-width: 860px){
  .brand__title{font-size:1.1rem;}
  .nav{gap:.4rem;}
  .nav__link{padding:.45rem .75rem;}
}


body { background:#b7b7b7; }






/* ===========================
   Mobile Header Navigation
   =========================== */

/* Hamburger toggle */
.nav__toggle{
  display:none;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:10px;
  border-radius:12px;
}

.nav__toggleIcon{
  width:22px;
  height:2px;
  background:#b91c1c;
  position:relative;
  display:block;
}
.nav__toggleIcon::before,
.nav__toggleIcon::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:#b91c1c;
}
.nav__toggleIcon::before{ top:-7px; }
.nav__toggleIcon::after{ top:7px; }

/* Wrap nav items */
.nav__menu{
  display:flex;
  align-items:center;
  gap:.6rem;
}

/* -------- MOBILE -------- */
@media (max-width: 860px){

  /* Show hamburger */
  .nav__toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* Hide menu by default */
  .nav__menu{
    display:none;
    position:absolute;
    top:100px; /* matches .topbar__inner height */
    left:16px;
    right:16px;
    background:#fff;
    border:2px solid #b91c1c;
    border-radius:16px;
    padding:12px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    z-index:2000;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
  }

  .nav__menu[data-open="true"]{
    display:flex;
  }

  /* Pills become full-width */
  .nav__pill{
    width:100%;
    text-align:center;
  }

  /* Dropdown fixes */
  .nav__dropdown{
    width:100%;
  }

  .dropdown-menu{
    position:static;
    width:100%;
    margin-top:8px;
    box-shadow:none;
  }
}


/* Hide "Menu" text visually but keep it for screen readers */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}


/* Mobile header toggle (restore) */
.nav__toggle{
  display:none;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:10px;
  border-radius:12px;
}
.nav__toggleIcon{
  display:block;
  width:22px;height:2px;
  background:currentColor;
  position:relative;
}
.nav__toggleIcon::before,
.nav__toggleIcon::after{
  content:"";
  position:absolute;left:0;
  width:22px;height:2px;
  background:currentColor;
}
.nav__toggleIcon::before{ top:-7px; }
.nav__toggleIcon::after{ top:7px; }

.nav__menu{ display:flex; gap:.6rem; align-items:center; }

@media (max-width: 860px){
  .nav__toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav__menu{
    display:none;
    position:absolute;
    left:16px; right:16px;
    top:100px;
    background:#fff;
    border:2px solid #b91c1c;
    border-radius:16px;
    padding:12px;
    flex-direction:column;
    gap:10px;
    z-index:2000;
  }
  .nav__menu[data-open="true"]{ display:flex; }
  .nav__pill{ width:100%; text-align:center; }
  .dropdown-menu{ position:static; width:100%; margin-top:8px; }
}