/* =============================================================
   DENUMB HEADER  v1.0.0
   denumb.com
   ─────────────────────────────────────────────────────────────
   Styles for the Denumb site header:
   • CSS variables (light + dark mode)
   • Theme toggle button
   • Nav bar + logo
   • Locale selector + popover
   • Calculators CTA button + dropdown
   • Mobile locale bar
   • Responsive breakpoints
============================================================= */
/*
#dn-header * { box-sizing: border-box; margin: 0; padding: 0; }
#dn-header {
  --clay:         #E8643A;
  --clay-dk:      #C44A22;
  --ink:          #1A1612;
  --smoke:        #2E2822;
  --stone:        #7A6E65;
  --fog:          #C4BAB2;
  --cream:        #F7F3EE;
  --white:        #FDFAF7;
  --ink-surface:  #1A1612;
  --shadow-pop:   0 20px 48px rgba(26,22,18,.12), 0 4px 12px rgba(26,22,18,.07);
  --shadow-hover: rgba(26,22,18,.06);
  --ff-d: 'Fraunces', Georgia, serif;
  --ff-b: 'DM Sans', sans-serif;
  font-family: var(--ff-b);
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index: 1000;
}
@media (prefers-color-scheme: dark) {
  #dn-header {
    --ink:         #F0EBE4;
    --smoke:       #D6CFC7;
    --stone:       #9A8E84;
    --fog:         #4A4038;
    --cream:       #2A2520;
    --white:       #1E1A16;
    --ink-surface: #0E0C0A;
    --shadow-pop:  0 20px 48px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.25);
    --shadow-hover: rgba(240,235,228,.07);
  }
}
html.dn-dark #dn-header {
  --ink:         #F0EBE4;
  --smoke:       #D6CFC7;
  --stone:       #9A8E84;
  --fog:         #4A4038;
  --cream:       #2A2520;
  --white:       #1E1A16;
  --ink-surface: #0E0C0A;
  --shadow-pop:  0 20px 48px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.25);
  --shadow-hover: rgba(240,235,228,.07);
}
@media (prefers-color-scheme: dark) {
  html.dn-light #dn-header {
    --ink:         #1A1612;
    --smoke:       #2E2822;
    --stone:       #7A6E65;
    --fog:         #C4BAB2;
    --cream:       #F7F3EE;
    --white:       #FDFAF7;
    --ink-surface: #1A1612;
    --shadow-pop:  0 20px 48px rgba(26,22,18,.12), 0 4px 12px rgba(26,22,18,.07);
    --shadow-hover: rgba(26,22,18,.06);
  }
}

/* ── THEME TOGGLE BUTTON ── 
#dn-header .dn-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--cream); border: 1.5px solid var(--fog); border-radius: 12px;
  color: var(--stone); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  outline: none;
}
#dn-header .dn-theme-btn:hover {
  border-color: var(--clay); background: var(--white); color: var(--ink);
}
#dn-header .dn-theme-btn .dn-icon-moon { display: block; }
#dn-header .dn-theme-btn .dn-icon-sun  { display: none; }
html.dn-dark #dn-header .dn-theme-btn .dn-icon-moon { display: none; }
html.dn-dark #dn-header .dn-theme-btn .dn-icon-sun  { display: block; }
@media (prefers-color-scheme: dark) {
  html:not(.dn-light):not(.dn-dark) #dn-header .dn-theme-btn .dn-icon-moon { display: none; }
  html:not(.dn-light):not(.dn-dark) #dn-header .dn-theme-btn .dn-icon-sun  { display: block; }
}

/* ── NAV BAR ── 
#dn-header nav {
  width: 100%;
  background: var(--white);
  border-bottom: 1.5px solid var(--fog);
  position: relative;
  z-index: 10;
}
#dn-header .dn-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── LOGO ── 
#dn-header .dn-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
#dn-header .dn-mark {
  width: 36px; height: 36px; background: var(--clay);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
#dn-header .dn-logo:hover .dn-mark { background: var(--clay-dk); }
#dn-header .dn-word {
  font-family: var(--ff-d); font-size: 22px; font-weight: 600;
  letter-spacing: -.025em; color: var(--ink);
}

/* ── RIGHT SIDE ── 
#dn-header .dn-nav-right {
  display: flex; align-items: center; gap: 10px;
}

/* ── LOCALE SELECTOR ── 
#dn-header .dn-locale-wrap {
  position: relative;
}
#dn-header .dn-locale-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 14px;
  background: var(--cream); border: 1.5px solid var(--fog); border-radius: 12px;
  font-family: var(--ff-b); font-size: 13px; font-weight: 500; color: var(--stone);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap; outline: none;
}
#dn-header .dn-locale-btn:hover {
  border-color: var(--clay); background: var(--white); color: var(--ink);
}
#dn-header .dn-locale-btn.is-open {
  border-color: var(--clay); background: var(--white); color: var(--ink);
  box-shadow: 0 0 0 3px rgba(232,100,58,.1);
}
#dn-header .dn-locale-flag { font-size: 16px; line-height: 1; }
#dn-header .dn-locale-code { font-size: 12px; font-weight: 500; letter-spacing: .04em; }
#dn-header .dn-locale-caret { color: var(--fog); transition: transform .2s; }
#dn-header .dn-locale-btn.is-open .dn-locale-caret { transform: rotate(180deg); }

/* ── LOCALE POPOVER ── 
#dn-header .dn-locale-pop {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 290px;
  background: var(--white); border: 1.5px solid var(--fog); border-radius: 16px;
  box-shadow: var(--shadow-pop);
  z-index: 200;
}
#dn-header .dn-loc-head {
  padding: 14px 16px 11px; border-bottom: 1px solid var(--fog);
}
#dn-header .dn-loc-eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone);
}
#dn-header .dn-loc-title {
  font-family: var(--ff-d); font-size: 15px; font-weight: 400;
  color: var(--ink); margin-top: 3px; letter-spacing: -.01em;
}
#dn-header .dn-loc-body { padding: 8px 8px 0; overflow: hidden; }
#dn-header .dn-loc-section-label {
  font-size: 10px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fog);
  padding: 4px 10px 2px;
}
#dn-header .dn-loc-divider {
  height: 1px; background: var(--fog); margin: 6px 8px;
}
#dn-header .dn-loc-search-wrap { padding: 6px 0 2px; }
#dn-header .dn-loc-search {
  width: 100%; font-family: var(--ff-b); font-size: 13px; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--fog); border-radius: 8px;
  padding: 7px 12px; outline: none; transition: border-color .15s;
}
#dn-header .dn-loc-search:focus { border-color: var(--clay); }
#dn-header .dn-loc-search::placeholder { color: var(--fog); }
#dn-header .dn-loc-list {
  max-height: 186px; overflow-y: auto; padding-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: var(--fog) transparent;
}

/* Country row 
#dn-header .dn-cur-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px; border-radius: 9px;
  cursor: pointer; transition: background .12s;
}
#dn-header .dn-cur-item:hover { background: var(--cream); }
#dn-header .dn-cur-item.active { background: rgba(232,100,58,.07); }
#dn-header .dn-cur-flag  { font-size: 15px; flex-shrink: 0; }
#dn-header .dn-cur-info  { flex: 1; min-width: 0; }
#dn-header .dn-cur-code  { font-size: 13px; font-weight: 500; color: var(--ink); }
#dn-header .dn-cur-name  { font-size: 11px; color: var(--stone); margin-top: 0; }
#dn-header .dn-cur-check { color: var(--clay); font-size: 12px; opacity: 0; }
#dn-header .dn-cur-item.active .dn-cur-check { opacity: 1; }

/* Privacy footer 
#dn-header .dn-loc-foot {
  margin: 6px 8px 8px; padding: 10px 12px;
  background: var(--cream); border-radius: 9px;
  display: flex; align-items: flex-start; gap: 8px;
}
#dn-header .dn-loc-foot-text {
  font-size: 11px; color: var(--stone); line-height: 1.5; font-weight: 400;
}

/* ── CTA BUTTON + DROPDOWN ── 
#dn-header .dn-cta-wrap { position: relative; }
#dn-header .dn-cta {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; background: var(--clay); color: #FDFAF7;
  border-radius: 12px; padding: 0 18px; height: 44px;
  font-family: var(--ff-d); font-size: 15px; font-weight: 600;
  letter-spacing: -.015em; transition: background .18s;
  position: relative; z-index: 2; white-space: nowrap; user-select: none;
}
#dn-header .dn-cta .dn-chevron { transition: transform .22s cubic-bezier(.4,0,.2,1); }
#dn-header .dn-cta-wrap.is-open .dn-cta { background: var(--clay-dk); }
#dn-header .dn-cta-wrap.is-open .dn-chevron { transform: rotate(180deg); }
#dn-header .dn-drop {
  position: absolute; top: calc(100% + 8px); right: 0; width: 300px;
  background: var(--white); border: 1.5px solid var(--fog); border-radius: 16px;
  box-shadow: var(--shadow-pop);
  overflow: hidden; opacity: 0; transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1);
}
#dn-header .dn-cta-wrap.is-open .dn-drop {
  opacity: 1; transform: translateY(0); pointer-events: all;
}
#dn-header .dn-drop-head {
  padding: 12px 16px 10px; border-bottom: 1px solid var(--fog);
}
#dn-header .dn-drop-title {
  font-size: 10px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone);
}
#dn-header .dn-calc-list { padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; }
#dn-header .dn-calc-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: 9px; text-decoration: none; transition: background .13s;
}
#dn-header .dn-calc-item:hover { background: var(--cream); }
#dn-header .dn-calc-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#dn-header .dn-calc-text { flex: 1; min-width: 0; }
#dn-header .dn-calc-name {
  font-family: var(--ff-d); font-size: 14px; font-weight: 500;
  color: var(--ink); letter-spacing: -.01em; line-height: 1.2;
}
#dn-header .dn-calc-desc { font-size: 11px; color: var(--stone); margin-top: 1px; line-height: 1.3; }
#dn-header .dn-calc-arrow {
  color: var(--fog); flex-shrink: 0; transition: color .13s, transform .15s;
}
#dn-header .dn-calc-item:hover .dn-calc-arrow { color: var(--clay); transform: translateX(2px); }
#dn-header .dn-drop-foot {
  margin: 0 8px 8px; background: var(--ink-surface); border-radius: 9px;
  padding: 11px 14px; display: flex; align-items: center; justify-content: space-between;
  text-decoration: none; transition: background .15s;
}
#dn-header .dn-drop-foot:hover { background: #2E2822; }
#dn-header .dn-drop-foot-text {
  font-family: var(--ff-d); font-size: 13px; font-weight: 500;
  color: #FDFAF7; letter-spacing: -.01em;
}
#dn-header .dn-drop-foot-sub { font-size: 10px; color: rgba(196,186,178,.5); margin-top: 2px; }
#dn-header .dn-drop-foot-arrow {
  width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
#dn-header .dn-drop-foot:hover .dn-drop-foot-arrow {
  background: rgba(255,255,255,.15); transform: translateX(2px);
}

/* ── CALC ICON BACKGROUNDS ── 
#dn-header .dn-calc-icon-neutral {
  background: var(--shadow-hover);
}

/* ── MOBILE LOCALE BAR ──
   Desktop: hidden.
   Mobile: displayed as its own sticky strip that always stays at the top.
   The nav scrolls away naturally — no tricks needed.
────────────────────────────────────────────────────────────────────────── 
#dn-header .dn-mobile-locale-bar {
  display: none;
}

/* ── DESKTOP ── 
@media (min-width: 601px) {
  #dn-header nav {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

/* ── MOBILE ── 
@media (max-width: 600px) {
  /* Nav scrolls away normally — no sticky, no z-index tricks 
  #dn-header nav {
    position: relative;
    z-index: 10;
  }
  #dn-header .dn-nav-inner { padding: 0 20px; }
  #dn-header .dn-loc-search { font-size: 16px; }
  #dn-header .dn-locale-wrap { display: none; }
  #dn-header .dn-theme-btn { display: none; } /* shown inside locale bar instead 
  #dn-header .dn-drop { width: calc(100vw - 40px); }
  /* The locale bar sticks independently at the very top 
  #dn-header .dn-mobile-locale-bar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--white);
    border-bottom: 1.5px solid var(--fog);
    padding: 0 20px;
    height: 44px;
    align-items: center;
    justify-content: space-between;
    /* Subtle shadow so it reads clearly above page content when stuck 
    box-shadow: 0 2px 8px rgba(26,22,18,.06);
  }
  #dn-header .dn-mobile-locale-label {
    font-size: 11px; color: var(--stone); font-weight: 400;
  }
  #dn-header .dn-mobile-locale-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 10px;
    background: var(--cream); border: 1.5px solid var(--fog); border-radius: 8px;
    font-family: var(--ff-b); font-size: 12px; font-weight: 500; color: var(--stone);
    cursor: pointer; transition: border-color .15s, color .15s; outline: none;
  }
  #dn-header .dn-mobile-locale-btn:hover,
  #dn-header .dn-mobile-locale-btn.is-open { border-color: var(--clay); color: var(--ink); }
  #dn-header .dn-mobile-locale-btn.is-open .dn-mobile-locale-caret { transform: rotate(180deg); }
  #dn-header .dn-mobile-locale-caret { color: var(--fog); transition: transform .2s; }
  /* Theme toggle inside the bar 
  #dn-header .dn-mobile-locale-bar .dn-theme-btn {
    display: inline-flex;
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  }
  #dn-header .dn-mobile-locale-bar .dn-theme-btn .dn-icon-moon,
  #dn-header .dn-mobile-locale-bar .dn-theme-btn .dn-icon-sun {
    width: 13px; height: 13px;
  }
  /* Dark mode: deepen shadow so bar still separates from page 
  @media (prefers-color-scheme: dark) {
    html:not(.dn-light) #dn-header .dn-mobile-locale-bar {
      box-shadow: 0 2px 8px rgba(0,0,0,.3);
    }
  }
}