/***************************************************************
  0) TOKENS / DESIGN VARIABLES
***************************************************************/
:root{
  --brand: #1fa2c1;
  --brand-rgb: 31,162,193;

  --text: #102a43;
  --muted: #595959;

  --bg: #ffffff;
  --border: rgba(0,0,0,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.08);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;

  --container: 1200px;
}

/***************************************************************
  1) BASE / GLOBALS
***************************************************************/
*{ -webkit-font-smoothing: antialiased; }

html, body{ overflow-x: hidden; }

body{
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  color: var(--text);
}

/* Default link style (safe + neutral). If you want bold links in content,
   do it in a .content scope instead of globally. */
a{
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}
a:hover{ color: #444; text-decoration: none; }

p{ color:#777; font-size:15px; }
h1,h2,h3,h4{ font-weight:800; color: var(--brand); }
label{ color: var(--brand); }

.cursorPointer{ cursor: pointer; }
.displayNone{ display: none; }

/***************************************************************
  2) LAYOUT HELPERS
***************************************************************/
.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/***************************************************************
  3) HEADER (UTILITY + MAIN)
***************************************************************/
.site-header{
  position: relative;
  width:100%;
  z-index:1000;
}

/* Utility (top) bar */
.header-utility{
  background: var(--brand);
  color:#fff;
  padding:10px 0;
}
.utility-left, .utility-right{
  display:flex;
  align-items:center;
  gap:12px;
}
.utility-link{
  color:#fff;
  font-size:14px;
  opacity:.95;
  text-decoration:none;
}
.utility-link:hover{
  opacity:1;
  text-decoration: underline;
}
.utility-sep{ opacity:.6; }

/* Sentinel + spacer for JS fixed header */
#stickySentinel{ height:1px; }
#headerSpacer{ display:none; height:0; }

/* Main header */
.header-main{
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  width:100%;
  transition: background-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
}

.header-main.fixed{
  position: fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:1100;
}

/* “Glass” sticky look */
.header-main.is-stuck{
  background: rgba(255,255,255,1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  border-bottom-color: transparent;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand-logo{
  height:44px;
  width:auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

/***************************************************************
  4) HEADER NAV (BEATS BOOTSTRAP + GLOBAL a:hover)
***************************************************************/
.header-main .nav{
  display:flex;
  align-items:center;
  gap:18px;
}

/* Lock header nav link styles in ALL states */
.header-main .nav a.nav-link,
.header-main .nav a.nav-link:visited{
  color: var(--text);
  font-weight: 600;       /* overrides any global bold link rules */
  font-size: 14px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  text-decoration:none;
  transition: color .2s ease, background-color .2s ease;
}

.header-main .nav a.nav-link:hover,
.header-main .nav a.nav-link:focus{
  color: var(--brand);
  background: rgba(var(--brand-rgb), .10);
  text-decoration:none;
}

.header-main .nav a.nav-link:active{
  color: var(--brand);
}

/* Optional “active section/page” state */
.header-main .nav a.nav-link.active{
  color: var(--brand);
  background: rgba(var(--brand-rgb), .14);
}

/* CTA button */
.btn-cta{
  background: var(--brand);
  color:#fff;
  padding:10px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.btn-cta:hover{ filter: brightness(.95); text-decoration:none; }

/***************************************************************
  5) HEADER DROPDOWN (SCOPED — DOES NOT AFFECT OTHER DROPDOWNS)
***************************************************************/
.utility-right{ position: relative; }

#headerDropdownContent{
  display:none; /* toggled by your loginDrop() */
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: 320px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding:14px;
  z-index: 2000;
}

/* Make dropdown links not inherit global hover gray */
#headerDropdownContent a{
  color: var(--text);
  font-weight: 600;
  text-decoration:none;
}
#headerDropdownContent a:hover{
  color: var(--brand);
  text-decoration: underline;
  background: transparent;
}

/***************************************************************
  6) MOBILE NAV
***************************************************************/
.nav-toggle{ display:none; background:none; border:0; padding:10px; }
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:#1a1a1a;
  margin:4px 0;
  border-radius:2px;
}

.nav-mobile{
  display:none;
  padding: 10px 18px 18px 18px;
  border-top: 1px solid var(--border);
}
.nav-mobile.show{ display:block; }
.nav-mobile a.nav-link{ display:block; padding:12px 10px; }

@media (max-width: 900px){
  .header-main .nav{ display:none; }
  .nav-toggle{ display:block; }
}