/* ==========================================================
   5K Construction - site header (prefix: k-)
   Desktop + mobile navigation, drawer, dropdowns, sticky bar.
   Loaded after site.css.
   ========================================================== */
/* ==========================================================
   5K Construction – modern header v2 (prefix: k-)
   ========================================================== */
:root {
  --k-navy-900: #08122b;
  --k-navy-800: #0c1d42;
  --k-navy-700: #112c60;
  --k-ink: #0d1230;
  --k-gold: #f2b632;
  --k-gold-deep: #e39a12;
  --k-white: #ffffff;
  --k-text-soft: rgba(255, 255, 255, .7);
  --k-line: rgba(255, 255, 255, .11);
  --k-header-h: 74px;
  --k-bar-h: 68px;
  --k-logo-h: 58px;
  --k-font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.k-skip {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--k-gold); color: var(--k-ink); font: 700 .9rem var(--k-font);
  padding: 10px 16px; border-radius: 8px; transition: top .2s;
}
.k-skip:focus { top: 12px; }

/* ---------- Header shell ----------
   Background + blur live on ::before so the header itself has no filter
   (a filter would trap the fixed mobile drawer inside the header). */
.k-header {
  position: sticky; top: 0; z-index: 900;
  font-family: var(--k-font);
  border-bottom: 1px solid var(--k-line);
  /* Nothing here animates or depends on scroll.
     The header used to swap its background, fade in a drop shadow and a gold
     hairline, and shrink its height the instant scroll passed 12px. All of
     those fired together over .25s, and that bundle of simultaneous changes
     is what read as the nav "flashing". The bar now has one appearance. */
}
.k-header::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* Fully opaque, so no frame of the hero video is ever visible through the
     nav and nothing needs to be sampled or blended per frame. There is
     deliberately no backdrop-filter anywhere near this element: blurring a
     live <video> is what produced the original white flash, because Chrome
     repaints the strip every frame and fills it white on the frames where it
     has no valid backdrop sample. */
  background: linear-gradient(180deg, var(--k-navy-800), var(--k-navy-900));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.k-header::after { /* gold hairline: always on, never toggled */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(242, 182, 50, .6) 20%, rgba(242, 182, 50, .6) 80%, transparent);
}

.k-shell {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto; padding: 0 16px;
  height: var(--k-header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

/* ---------- Logo: rounded, framed, prominent ---------- */
.k-brand { display: flex; align-items: center; flex: none; position: relative; z-index: 2; text-decoration: none; }
.k-brand img {
  display: block; width: var(--k-logo-h); height: var(--k-logo-h); max-width: none;
  box-sizing: border-box; padding: 6px; object-fit: contain;
  border-radius: 50%; border: 3px solid var(--k-white);
  background: linear-gradient(180deg, #0d1230, #1b2a52);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  transition: width .25s ease, height .25s ease, box-shadow .25s ease, transform .25s ease;
}
.k-brand:hover img { transform: scale(1.04); box-shadow: 0 0 0 3px rgba(242, 182, 50, .55), 0 12px 26px rgba(0, 0, 0, .45); }

/* ---------- Burger (mobile) ---------- */
.k-burger {
  position: relative; z-index: 2; width: 48px; height: 48px; flex: none;
  display: inline-grid; place-content: center; gap: 5px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--k-line); border-radius: 16px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s;
}
.k-burger[aria-expanded="true"] { background: rgba(242, 182, 50, .16); border-color: rgba(242, 182, 50, .45); }
.k-burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--k-white);
  transition: transform .3s ease, opacity .2s ease, background .2s;
}
.k-burger span:nth-child(2) { width: 14px; margin-left: auto; background: var(--k-gold); }
.k-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.k-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.k-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.k-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Nav: mobile = full-screen drawer ---------- */
.k-nav {
  position: fixed; inset: 0; z-index: 1;
  padding: calc(var(--k-header-h) + 16px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(120% 60% at 90% -10%, rgba(242, 182, 50, .18), transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(30, 80, 170, .4), transparent 60%),
    var(--k-navy-900);
  visibility: hidden; opacity: 0; transform: translateY(-10px);
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.k-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

/* one orchestrated moment: drawer items rise in when it opens */
@keyframes k-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.k-nav.is-open > * { animation: k-rise .4s cubic-bezier(.2, .7, .2, 1) both; }
.k-nav.is-open > *:nth-child(2) { animation-delay: .04s; }
.k-nav.is-open > *:nth-child(3) { animation-delay: .08s; }
.k-nav.is-open > *:nth-child(4) { animation-delay: .12s; }
.k-nav.is-open > *:nth-child(5) { animation-delay: .16s; }
.k-nav.is-open > *:nth-child(6) { animation-delay: .2s; }

.k-link, .k-dd-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 17px 18px; cursor: pointer;
  border: 1px solid var(--k-line); border-radius: 18px; background: rgba(255, 255, 255, .05);
  color: var(--k-white); font: 700 1.2rem/1.1 var(--k-font); letter-spacing: -.01em; text-align: left;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background .2s, border-color .2s;
}
.k-link:active, .k-dd-toggle:active { background: rgba(255, 255, 255, .1); }
.k-link[aria-current="page"], .k-dd-toggle.is-current { color: var(--k-gold); border-color: rgba(242, 182, 50, .45); background: rgba(242, 182, 50, .08); }
.k-dd.is-open > .k-dd-toggle { background: rgba(255, 255, 255, .09); }
.k-caret {
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--k-gold); border-bottom: 2px solid var(--k-gold);
  transform: translateY(-3px) rotate(45deg); transition: transform .25s;
}
.k-dd-toggle[aria-expanded="true"] .k-caret { transform: translateY(2px) rotate(-135deg); }

/* accordion panels on mobile */
.k-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.k-dd.is-open > .k-panel { grid-template-rows: 1fr; }
.k-panel-inner { overflow: hidden; min-height: 0; }
.k-panel-body { padding: 10px 0 6px; display: grid; gap: 8px; }
.k-kicker { display: none; }
.k-intro { margin: 0 0 4px; padding: 0 6px; color: var(--k-text-soft); font-size: .93rem; line-height: 1.5; }

.k-svc-grid { display: grid; gap: 8px; }
.k-ico {
  flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(242, 182, 50, .14); border: 1px solid rgba(242, 182, 50, .35); color: var(--k-gold);
  transition: background .2s, color .2s, transform .2s;
}
.k-ico svg { width: 22px; height: 22px; }
.k-svc {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px;
  text-decoration: none; color: var(--k-white); background: rgba(255, 255, 255, .04);
  -webkit-tap-highlight-color: transparent;
}
.k-svc b { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.2; }
.k-svc small { display: block; margin-top: 2px; font-size: .86rem; color: var(--k-text-soft); line-height: 1.3; }
.k-svc:active { background: rgba(242, 182, 50, .16); }

.k-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.k-area {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 16px; min-height: 52px;
  text-decoration: none; font-weight: 700; font-size: .96rem; line-height: 1.15; color: var(--k-white);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--k-line);
  -webkit-tap-highlight-color: transparent;
}
.k-area .k-ico { width: 32px; height: 32px; border-radius: 10px; }
.k-area .k-ico svg { width: 16px; height: 16px; }
.k-area:active { background: rgba(242, 182, 50, .16); }

.k-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 6px 6px 0; }
.k-all { display: inline-flex; align-items: center; gap: 8px; color: var(--k-gold); font-weight: 700; text-decoration: none; }
.k-all svg { width: 16px; height: 16px; transition: transform .2s; }
.k-foot .k-btn { display: none; }

/* drawer CTAs (mobile only) */
.k-drawer-cta { margin-top: auto; padding-top: 22px; display: grid; gap: 12px; }
.k-drawer-cta .k-call {
  display: flex; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid var(--k-line);
}
.k-drawer-cta .k-btn { min-height: 56px; border-radius: 18px; font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 14px; text-decoration: none;
  font: 800 1rem var(--k-font); letter-spacing: .01em; color: var(--k-ink);
  background: linear-gradient(180deg, var(--k-gold), var(--k-gold-deep));
  box-shadow: 0 8px 22px rgba(227, 154, 18, .28), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s;
}
.k-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(227, 154, 18, .4), inset 0 1px 0 rgba(255, 255, 255, .45); filter: brightness(1.05); }
.k-btn:active { transform: translateY(0); }
.k-btn-sm { min-height: 42px; padding: 0 16px; border-radius: 12px; font-size: .92rem; }

.k-call {
  display: none; align-items: center; gap: 12px; text-decoration: none; color: var(--k-white);
  line-height: 1.15; font-weight: 800; font-size: 1.05rem; white-space: nowrap;
}
.k-call i {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: rgba(242, 182, 50, .14); border: 1px solid rgba(242, 182, 50, .45); color: var(--k-gold);
}
.k-call i svg { width: 18px; height: 18px; }
.k-call small { display: block; font-weight: 500; font-size: .75rem; color: var(--k-text-soft); }
.k-actions { display: none; align-items: center; gap: 18px; }

/* ---------- Mobile sticky action bar removed ---------- */
.k-mobilebar {
  display: none !important;
}
body.k-has-bar {
  padding-bottom: 0 !important;
}

/* ---------- Focus ---------- */
.k-header a:focus-visible, .k-header button:focus-visible {
  outline: 3px solid var(--k-gold); outline-offset: 3px; border-radius: 12px;
}

/* ==========================================================
   Desktop
   ========================================================== */
@media (min-width: 1021px) {
  :root { --k-header-h: 88px; --k-logo-h: 70px; }
  .k-shell { padding: 0 24px; }
  body.k-has-bar { padding-bottom: 0 !important; }
  .k-burger, .k-drawer-cta { display: none; }
  .k-actions { display: flex; }

  .k-nav {
    position: static; inset: auto; z-index: auto; padding: 0; overflow: visible;
    flex-direction: row; align-items: center; gap: 2px; background: none;
    visibility: visible; opacity: 1; transform: none; transition: none; flex: 1; justify-content: center;
  }
  .k-nav.is-open > * { animation: none; }

  .k-link, .k-dd-toggle {
    position: relative; width: auto; padding: 10px 14px; border: 0; border-radius: 12px; background: none;
    font: 600 .98rem var(--k-font); letter-spacing: 0; color: rgba(255, 255, 255, .88); gap: 8px;
    transition: color .2s, background .2s;
  }
  .k-link:hover, .k-dd-toggle:hover, .k-dd.is-open > .k-dd-toggle { color: var(--k-white); background: rgba(255, 255, 255, .07); }
  .k-link[aria-current="page"], .k-dd-toggle.is-current { color: var(--k-white); background: none; }

  /* gold roof-peak, echoing the logo */
  .k-link::after, .k-dd-toggle::after {
    content: ""; position: absolute; left: 50%; bottom: -3px; width: 16px; height: 8px;
    background: linear-gradient(180deg, var(--k-gold), var(--k-gold-deep));
    clip-path: polygon(50% 0, 100% 100%, 82% 100%, 50% 38%, 18% 100%, 0 100%);
    transform: translateX(-50%) scale(0); transform-origin: 50% 100%; transition: transform .22s cubic-bezier(.3, 1.4, .5, 1);
  }
  .k-link:hover::after, .k-dd-toggle:hover::after, .k-dd.is-open > .k-dd-toggle::after,
  .k-link[aria-current="page"]::after, .k-dd-toggle.is-current::after { transform: translateX(-50%) scale(1); }

  .k-caret { width: 7px; height: 7px; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
  .k-dd-toggle[aria-expanded="true"] .k-caret { transform: translateY(1px) rotate(-135deg); }

  /* panels are centred on the header (not on their button), so they never run off-screen */
  .k-nav, .k-dd { position: static; }
  .k-panel {
    position: absolute; top: 100%; left: 50%; display: block; padding-top: 10px; width: max-content; max-width: calc(100vw - 32px);
    transform: translate(-50%, 6px); opacity: 0; visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .k-dd.is-open > .k-panel, .k-dd:focus-within > .k-panel {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
  }
  .k-panel-inner { overflow: visible; }
  .k-panel-body {
    width: 600px; max-width: 100%; padding: 12px; gap: 0; border-radius: 20px;
    background: var(--k-white); color: var(--k-ink);
    box-shadow: 0 24px 60px rgba(3, 8, 24, .35), 0 0 0 1px rgba(13, 18, 48, .06);
  }
  .k-panel-areas .k-panel-body { width: 540px; }
  .k-kicker { display: none; }
  .k-intro { color: #5d6783; padding: 8px 12px 12px; margin: 0; font-size: .9rem; }

  .k-svc-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .k-svc { background: none; color: var(--k-ink); padding: 11px 12px; gap: 12px; border-radius: 12px; transition: background .15s; }
  .k-svc b { font-size: .96rem; }
  .k-svc small { color: #6a7592; font-size: .83rem; }
  .k-ico, .k-area .k-ico { width: 22px; height: 22px; border: 0; border-radius: 0; background: none; color: var(--k-navy-700); transition: color .15s; }
  .k-ico svg, .k-area .k-ico svg { width: 20px; height: 20px; }
  .k-svc:hover, .k-svc:focus-visible { background: #f4f6fb; }
  .k-svc:hover .k-ico, .k-svc:focus-visible .k-ico, .k-area:hover .k-ico { color: var(--k-gold-deep); }

  .k-areas { grid-template-columns: 1fr 1fr 1fr; gap: 2px; }
  .k-area { min-height: 0; padding: 10px 12px; gap: 8px; border: 0; border-radius: 12px; background: none; color: var(--k-ink); font-weight: 600; font-size: .94rem; transition: background .15s; }
  .k-area:hover, .k-area:focus-visible { background: #f4f6fb; }

  .k-foot { margin-top: 6px; padding: 10px 12px 2px; border-top: 1px solid #edf0f7; }
  .k-all { color: var(--k-navy-700); font-size: .92rem; }
  .k-all:hover { color: var(--k-gold-deep); }
  .k-all:hover svg { transform: translateX(3px); }
}

@media (min-width: 1200px) { .k-call { display: flex; } .k-shell { padding: 0 32px; } }

@media (max-width: 380px) {
  :root { --k-logo-h: 52px; }
  .k-link, .k-dd-toggle { font-size: 1.1rem; }
  .k-areas { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .k-header, .k-header::before, .k-shell, .k-nav, .k-panel, .k-btn, .k-burger span, .k-link::after, .k-dd-toggle::after, .k-brand img, .k-ico { transition: none !important; }
  .k-nav.is-open > * { animation: none !important; }
}