/* ============================================================
   douglasniedt.com site header: banner + sticky mega-menu nav.
   Ported verbatim from the homepage so the look stays in sync.
   Self-contained — pairs with /js/site-header.js.
   ============================================================ */

:root{
  /* Header bar colors (gray-600/700 look) */
  --hdr-bg:#4b5563;      /* gray-600 */
  --hdr-border:#374151;  /* gray-700 */
  --hdr-text:#ffffff;

  /* Amber/gold/orange highlights used in TremoloMASTER label */
  --amber-300:#fbbf24;
  --orange-500:#ea580c;
  --gold-500:#ea580c;    /* homepage never defines this; mirror the orange override */

  /* Xmas button */
  --xmas-bg:#dc2626;       /* red-600 */
  --xmas-bg-hover:#b91c1c; /* red-700 */

  /* Mega styles */
  --mega-bg:#ffffff;
  --mega-border:#f0f0f0;
  --mega-accent:#f59e0b;   /* amber-500 */
}

/* ===== Header layout ===== */
.hdr{position:relative;z-index:50;background:#000}
.hdr-banner{background:#000}
.hdr-banner-img{display:block;margin:0 auto;max-width:1000px;width:100%;height:auto}

.hdr-bar{position:sticky;top:0;z-index:40;background:var(--hdr-bg);border-bottom:1px solid var(--hdr-border);box-shadow:0 4px 10px rgba(0,0,0,.25)}
/* Below lg only brand + hamburger are visible: center them as one cluster
   (matches the centered banner/flow strip; space-between left them stranded
   at opposite edges on iPad). On lg the sole visible child is the full-width
   .nav-desktop, so centering changes nothing there. */
.hdr-container{max-width:1400px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:20px}

/* Mobile brand (hidden on lg) — an <a> that links home, like a logo */
.brand-mobile{display:flex;align-items:center;gap:12px;color:#fff;padding:8px 0;text-decoration:none}
.brand-mobile:hover .brand-title{color:#fde68a}
.brand-mark{background:linear-gradient(135deg,#d97706,#b45309);padding:8px;border-radius:10px}
.brand-title{font-weight:700}
.brand-sub{font-size:12px;color:#fde68a}

/* Desktop nav */
.nav-desktop{display:none;align-items:center;justify-content:center;width:100%}
.nav-btn{
  display:flex;align-items:center;gap:8px;
  padding:16px 24px;font-weight:700;font-size:14px;
  color:var(--hdr-text);text-decoration:none;background:transparent;border:none;cursor:pointer;
  border-right:1px solid var(--hdr-border);
}
.nav-btn:hover{background:#6b7280}
.nav-btn.-trigger .chev{margin-left:2px;font-size:26px;line-height:1;transition:transform .15s ease}
.nav-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-btn.-xmas{background:var(--xmas-bg)}
.nav-btn.-xmas:hover{background:var(--xmas-bg-hover)}
/* display:flex on .nav-btn beats the UA [hidden] rule, which kept the
   seasonal Christmas button visible year-round — force it */
.nav-btn[hidden],.m-link[hidden]{display:none}

.ml{margin-left:4px}
.pill-new{
  margin-left:8px;display:inline-flex;align-items:center;gap:6px;
  padding:2px 6px;border-radius:999px;text-transform:uppercase;
  font-size:10px;font-weight:800;background:var(--amber-300);color:#000
}
.highlight-amber{color:var(--amber-300);font-weight:700}
.highlight-gold{color:var(--gold-500);font-weight:700}

/* Lucide icon sizing/alignment */
.icon-16{width:16px;height:16px;display:inline-block;vertical-align:middle}

/* Solid lightning bolt (matches mega menu ⚡) */
.bolt-emoji{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
  color:var(--orange-500);
}

/* Mobile toggle */
.nav-mobile-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:8px;background:transparent;color:#fff;
  /* Deliberate rounded-rectangle outline — a bordered button reads as
     tappable; three bare lines can pass for decoration */
  border:1.5px solid rgba(255,255,255,.5);
}
.nav-mobile-btn:hover{background:#6b7280}
.nav-mobile-btn .icon-burger{display:block}

/* Mobile menu */
/* .nav-mobile sits OUTSIDE .hdr-container, so it needs its own horizontal
   padding (matching the container's 16px) or the links hug the screen edge */
.nav-mobile{border-top:1px solid var(--hdr-border);padding:12px 16px}
.m-heading{color:#fde68a;font-weight:800;font-size:14px;margin:12px 0 6px}
.m-section{border-top:1px solid var(--hdr-border);padding-top:12px;margin-top:12px}
.m-sec-title{color:#fde68a;font-weight:800;font-size:14px;margin:0 0 8px}
.m-item{display:block;padding:4px 0 4px 24px;font-size:14px;color:#d1d5db;text-decoration:none}
.m-item:hover{color:#fff}
.m-item.-special{color:#fdba74;font-weight:800}
.m-link{display:block;color:#fff;text-decoration:none;padding:8px 0}
.m-link:hover{color:#fde68a}
.m-link.strong{font-weight:700}
.m-link.-xmas{font-weight:700}

/* Mega menu */
.mega{position:absolute;left:0;top:100%;width:100vw;background:var(--mega-bg);border-top:4px solid var(--mega-accent);box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:50}
.mega-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding:24px;max-width:1400px;margin:0 auto}
.mega-sec-title{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;color:#1f2937;border-bottom:1px solid var(--mega-border);padding-bottom:8px;margin:0 0 12px}
.mega-link{display:block;text-decoration:none;border-radius:10px;padding:8px}
.mega-link .title{font-weight:700;color:#1f2937}
.mega-link .desc{font-size:13px;color:#6b7280;margin-top:4px}
.mega-link:hover .title{color:#b91c1c}
.mega-link.-featured{background:linear-gradient(90deg,#faf5ff,#eff6ff);border:1px solid #e9d5ff}
.mega-link.-featured .title{color:#6b21a8}
.mega-badge{margin-left:8px;font-size:11px;background:#7c3aed;color:#fff;padding:2px 8px;border-radius:999px}

/* Backdrop to close mega on outside hover/click */
.mega-backdrop{position:fixed;inset:0;z-index:30;background:transparent}

/* Special styling for AI Classical Guitar Technique Wizard (isSpecial) */
.mega-link.-special .title{
  color:#ea580c;                 /* orange-600 */
  font-family:ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing:1px;
}
.mega-link.-special:hover .title{
  color:#c2410c;                 /* orange-700 */
}

/* Nav bar TremoloMASTER highlights */
.nav-btn .highlight-amber{
  color:var(--amber-300);
  font-weight:700;
}
.nav-btn .highlight-gold{
  color:var(--orange-500);
  font-weight:700;
}

/* Make only selected nav icons orange (e.g., the zap bolt) */
.nav-btn .icon-accent-orange,
.m-link .icon-accent-orange{
  color:var(--orange-500);
}

/* ===== Responsive ===== */

/* Tablet-width hamburger menu: lay the five sections out in three columns
   (desktop-mega feel) instead of one long vertical scroll. The standalone
   links after the sections stay stacked full-width below. Phones keep the
   single column; ≥1024px uses the real mega menu. */
@media (min-width:700px) and (max-width:1023.98px){
  .m-sections{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;align-items:start}
  /* Tablet has room — larger type for the heading, section titles, and links.
     The standalone .m-link rows below the sections deliberately keep their size. */
  .m-heading{font-size:17px}
  .m-sec-title{font-size:17px}
  .m-item{font-size:16px;padding-top:6px;padding-bottom:6px}
}

@media (min-width:1024px){
  .brand-mobile{display:none}
  .nav-desktop{display:flex}
  .nav-mobile-btn{display:none}
  .nav-mobile{display:none !important}
}

/* pull the nav-bar lightning bolts closer to their labels (2026-08-02) */
.nav-btn .bolt-emoji{margin-right:-7px}

/* the bolt emoji carries ~6px of blank left side bearing - pull it back so it
   sits tight against the wizard name (matches douglasniedt.com pages) */
.zapgap{margin-left:-3px}