/* One header for every page on dkre.ca.
   Each page still carries its own header styles, and they had drifted: the
   homepage centred a bigger logo, Council Watch shrank it on phones, and the
   Route A draft had a black header of its own. So the logo moved every time
   you changed page. This file loads last on every page and wins by
   specificity, so the header is identical everywhere. Change it here only.
   2026-09-28 cleanup (Dan: "the header is ugly, use all caps"): brokerage line
   on one tidy line under the wordmark, nav in small spaced capitals with a red
   rule for the current page, phone as a quiet outlined pill. */
header#hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid #E6E4E0}
header#hdr .bar,header#hdr>.wrap{max-width:1120px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:22px;height:76px}
header#hdr a.brand{display:flex;flex-direction:column;align-items:flex-start;gap:0;text-decoration:none;color:#141414;margin:0;flex:0 0 auto}
header#hdr .brand .wordmark{font-family:'Montserrat',system-ui,sans-serif;font-weight:800;font-size:2rem;letter-spacing:-.055em;color:#CE2027;line-height:.82;text-align:left}
header#hdr .brand .wordmark i,header#hdr .brand .wordmark span{font-style:normal;color:inherit}
header#hdr .brand .brand-bkg{font-size:.56rem;font-weight:600;letter-spacing:.07em;color:#6a6e73;text-transform:uppercase;line-height:1;max-width:none;white-space:nowrap;margin-top:7px;text-align:left}
header#hdr .nav-links{display:flex;gap:20px;align-items:center;margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
header#hdr .nav-links a{position:relative;text-decoration:none;color:#141414;padding:6px 0;white-space:nowrap}
header#hdr .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#CE2027;transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
header#hdr .nav-links a:hover{color:#CE2027}
header#hdr .nav-links a:hover::after,header#hdr .nav-links a[aria-current]::after{transform:scaleX(1)}
header#hdr .nav-links a[aria-current]{color:#141414}
header#hdr .nav-phone{margin-left:4px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-decoration:none;white-space:nowrap;color:#141414;border:1.5px solid #141414;border-radius:999px;padding:9px 16px;font-variant-numeric:tabular-nums;transition:background .18s ease,color .18s ease}
header#hdr .nav-phone:hover{background:#141414;color:#fff}
@media(max-width:1180px){header#hdr .nav-phone{display:none}}
@media(max-width:1000px){header#hdr .nav-links{gap:12px;letter-spacing:.05em}header#hdr .bar,header#hdr>.wrap{gap:18px}}
@media(max-width:860px){header#hdr .nav-links{display:none}header#hdr .bar,header#hdr>.wrap{height:68px}}
@media(max-width:860px){header#hdr .nav-links.is-open a{text-transform:uppercase;letter-spacing:.12em;font-size:.9rem}header#hdr .nav-links.is-open a::after{display:none}}
@media(max-width:380px){header#hdr .brand .brand-bkg{font-size:.46rem;letter-spacing:.1em}}
@media(prefers-reduced-motion:reduce){header#hdr .nav-links a::after{transition:none}}

/* Two-tone wordmark and the brokerage lockup (Dan, 2026-09-28: "should be two tone
   dkre", and the brokerage line under the logo "I don't love"). DK red, RE ink, the
   same red-plus-black split as the official DKREG red.black logo files. The brokerage
   name stays in the header, because the house rule is brokerage name in every page
   header (RECO Bulletin 5.3), but it now sits beside the mark behind a hairline,
   the way the official secondary lockup is built, instead of hanging underneath. */
header#hdr a.brand{flex-direction:row;align-items:center;gap:13px}
header#hdr .brand .wordmark{color:#CE2027}
header#hdr .brand .wordmark i,header#hdr .brand .wordmark span{color:#141414}
header#hdr .brand .brand-bkg{white-space:normal;max-width:178px;margin:0;padding:2px 0 2px 13px;border-left:1px solid #CFCCC6;font-size:.54rem;letter-spacing:.09em;line-height:1.45}

/* AREAS menu */
header#hdr .nav-drop{position:relative}
header#hdr .nav-drop-btn{font:inherit;letter-spacing:inherit;text-transform:inherit;color:#141414;background:none;border:0;padding:6px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;position:relative}
header#hdr .nav-drop-btn::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
header#hdr .nav-drop.is-current .nav-drop-btn{box-shadow:inset 0 -2px 0 #CE2027}
header#hdr .nav-drop-btn:hover,header#hdr .nav-drop:focus-within .nav-drop-btn{color:#CE2027}
header#hdr .nav-menu{position:absolute;left:-18px;top:calc(100% + 14px);min-width:230px;background:#fff;border:1px solid #E6E4E0;border-radius:12px;box-shadow:0 18px 40px rgba(20,20,20,.12);padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility 0s .15s}
header#hdr .nav-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
header#hdr .nav-drop:hover .nav-menu,header#hdr .nav-drop.is-open .nav-menu,header#hdr .nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:none;transition:opacity .15s ease,transform .15s ease}
header#hdr .nav-drop:hover .nav-drop-btn::after,header#hdr .nav-drop.is-open .nav-drop-btn::after{transform:translateY(1px) rotate(-135deg)}
header#hdr .nav-menu a{padding:11px 12px;border-radius:8px;letter-spacing:.08em}
header#hdr .nav-menu a::after{display:none}
header#hdr .nav-menu a:hover,header#hdr .nav-menu a[aria-current]{background:#F7F5F1;color:#CE2027}
@media(max-width:860px){
  header#hdr .nav-links.is-open .nav-drop-btn{display:flex;width:100%;min-height:48px;font-size:.72rem;letter-spacing:.16em;color:#6a6e73;padding:18px 0 4px;cursor:default}
  header#hdr .nav-links.is-open .nav-drop-btn::after{display:none}
  header#hdr .nav-links.is-open .nav-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:0;min-width:0}
  header#hdr .nav-links.is-open .nav-menu a{padding:10px 0 10px 14px;border-radius:0;background:none}
  header#hdr .nav-menu::before{display:none}
}
@media(max-width:380px){header#hdr .brand .brand-bkg{font-size:.48rem}}
@media(prefers-reduced-motion:reduce){header#hdr .nav-menu,header#hdr .nav-drop-btn::after{transition:none}}
@media(max-width:380px){header#hdr a.brand{gap:10px}header#hdr .brand .wordmark{font-size:1.7rem}header#hdr .brand .brand-bkg{font-size:.46rem;max-width:150px;padding-left:10px}}