/* =============================================================================
   ZAZTEK HEADER, ON ITS OWN
   -----------------------------------------------------------------------------
   The header's rules lifted out of css/style.css, so a module can mount the
   site header without inheriting the whole stylesheet.

   Loading all of style.css here would bring .btn and .card with it, nine rules
   each against the module's own, plus rules on body, a, h1 and main. That is
   what broke investment-genie.php when I tried it.

   The first attempt at this file missed .container and .header-inner, which
   carry the width and the flex row, and missed the media queries that decide
   between the desktop nav and the mobile one. Without those the header had no
   layout at all and fell back to a stacked column with the hamburger showing on
   a desktop. Both are included now.
   ============================================================================= */
:root{--primary: #ff0000;
  --primary-dark: #cc0000;
  --secondary: #001f3f;
  --secondary-light: #002d5a;
  --bg: #ffffff;
  --fg: #001f3f;
  --muted: #f1f5f9;
  --muted-fg: #64748b;
  --border: #e2e8f0;
  --card: #ffffff;
  --radius: 1rem;
  --font: 'DM Sans', sans-serif;
  --font-heading: 'Sora', sans-serif;}

/* LAYOUT */
.container{max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;}
/* HEADER */
header{position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); transition: box-shadow 0.3s;}
header.scrolled{box-shadow: 0 4px 20px rgba(0,0,0,0.08);}
.header-inner{display: flex; align-items: center; justify-content: space-between; height: 5rem;}
.logo img{height: 3rem; width: auto;}
nav{display: flex; align-items: center; gap: 2rem;}
nav a{font-size: 0.9rem; font-weight: 500; color: var(--fg); transition: color 0.2s;}
nav a:hover, nav a.active{color: var(--primary);}
nav a.active{position: relative;}
nav a.active::after{content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: var(--primary); border-radius: 2px;}
/* More dropdown in nav */
.nav-more{position: relative;}
.nav-more-btn{display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; cursor: pointer; font-family: var(--font); font-size: 0.9rem; font-weight: 500; color: var(--fg); padding: 0;}
.nav-more-btn:hover{color: var(--primary);}
.nav-more-menu{position: absolute; top: calc(100% + 0.75rem); right: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 0.75rem; box-shadow: 0 12px 30px rgba(0,31,63,0.12); padding: 0.5rem; min-width: 180px; display: none; flex-direction: column; z-index: 200;}
.nav-more-menu.open{display: flex;}
.nav-more-menu a{padding: 0.6rem 0.85rem; border-radius: 0.5rem; font-size: 0.9rem; color: var(--fg); white-space: nowrap;}
.nav-more-menu a:hover{background: var(--muted); color: var(--primary);}
.hamburger{display: none; background: none; border: none; cursor: pointer; padding: 0.5rem;}
.hamburger span{display: block; width: 24px; height: 2px; background: var(--fg); margin: 5px 0; transition: 0.3s;}
.mobile-menu{display: none; position: fixed; top: 5rem; right: 0; bottom: 0; width: 300px; background: var(--bg); border-left: 1px solid var(--border); padding: 2rem; z-index: 99; transform: translateX(100%); transition: transform 0.3s; overflow-y: auto;}
.mobile-menu.open{transform: translateX(0);}
.mobile-menu nav{flex-direction: column; align-items: flex-start; gap: 1.5rem;}
.mobile-menu nav a{font-size: 1.1rem;}
.btn-outline{background: transparent; border: 1.5px solid var(--border); color: var(--fg);}
.btn-outline:hover{border-color: var(--primary); color: var(--primary);}
.logo-item{display: flex; align-items: center; gap: 0.75rem; opacity: 0.6; filter: grayscale(1); transition: all 0.3s;}
.logo-item:hover{opacity: 1; filter: grayscale(0);}
.logo-item span{font-weight: 700; font-size: 0.95rem; color: var(--secondary);}
.page-hero .container{position: relative; z-index: 1;}
/* --- Responsiveness for all new features --- */



/* ============================================================
   Grouped header navigation
   ------------------------------------------------------------
   Replaces a 25-item flat row. Five labelled groups, each item
   carrying a one-line description so the panel can be scanned
   instead of read.
   ============================================================ */

.mega-nav{display: flex; align-items: center; gap: 1.75rem;}
.mega{position: relative;}
.mega-btn{display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font); font-size: 0.9rem; font-weight: 500; color: var(--fg);
  transition: color 0.2s;}
.mega-btn svg{transition: transform 0.2s; opacity: 0.55;}
.mega-btn:hover{color: var(--primary);}
.mega-btn.active{color: var(--primary);}
.mega[data-open="1"] .mega-btn{color: var(--primary);}
.mega[data-open="1"] .mega-btn svg{transform: rotate(180deg);}
.mega-btn:focus-visible{outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 3px;}
.mega-panel{position: absolute; top: calc(100% + 1.15rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: max-content; max-width: min(620px, calc(100vw - 3rem));
  background: var(--bg); border: 1px solid var(--border); border-radius: 1rem;
  box-shadow: 0 18px 46px rgba(0,31,63,0.16);
  padding: 1.15rem 1.15rem 1rem;
  opacity: 0; visibility: hidden; z-index: 300;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;}
.mega[data-open="1"] .mega-panel{opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);}
/* keep the last panels from running off the right edge */
.mega:nth-last-child(2) .mega-panel,
.mega:nth-last-child(3) .mega-panel{left: auto; right: 0; transform: translateY(-6px);}
.mega:nth-last-child(2)[data-open="1"] .mega-panel,
.mega:nth-last-child(3)[data-open="1"] .mega-panel{transform: translateY(0);}
.mega-panel::before{content: ''; position: absolute; top: -1.15rem; left: 0; right: 0; height: 1.15rem;}
.mega-blurb{margin: 0 0 0.85rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--border);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-fg);}
.mega-grid{display: grid; gap: 0.15rem; grid-template-columns: 1fr;}
.mega-grid a{display: block; padding: 0.6rem 0.7rem; border-radius: 0.6rem;
  color: var(--fg); text-decoration: none; transition: background 0.15s;}
.mega-grid a:hover{background: var(--muted);}
.mega-grid a b{display: block; font-family: var(--font-heading); font-size: 0.9rem;
  font-weight: 600; line-height: 1.3;}
.mega-grid a:hover b{color: var(--primary);}
.mega-grid a span{display: block; font-size: 0.775rem; line-height: 1.45; color: var(--muted-fg); margin-top: 0.1rem;}
.mega-grid a.here{background: var(--muted);}
.mega-grid a.here b{color: var(--primary);}
.mega-grid a:focus-visible{outline: 2px solid var(--primary); outline-offset: 2px;}
/* ---------- mobile: same groups, as an accordion ---------- */
.mobile-menu nav{gap: 0.2rem; align-items: stretch;}
.m-sec{display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  padding: 0.95rem 0.15rem; cursor: pointer;
  font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--fg);}
.m-sec svg{opacity: 0.5; transition: transform 0.2s;}
.m-sec[aria-expanded="true"]{color: var(--primary);}
.m-sec[aria-expanded="true"] svg{transform: rotate(180deg);}
.m-list{display: none; padding: 0.35rem 0 0.7rem 0.15rem;}
.m-list.open{display: block;}
.m-list a{display: block; padding: 0.5rem 0.15rem; font-size: 0.95rem; color: var(--muted-fg);}
.m-list a:hover, .m-list a.here{color: var(--primary);}
.m-flat{display: block; padding: 0.95rem 0.15rem; border-bottom: 1px solid var(--border);
  font-family: var(--font-heading); font-size: 1rem; font-weight: 600;}

@media (max-width: 768px){.header-inner > nav{display: none;}.hamburger{display: block;}.mobile-menu{display: block;}.mobile-menu nav{display: flex;}}
@media (min-width: 640px){.mega-grid{grid-template-columns: 1fr 1fr; gap: 0.15rem 0.5rem;}}
@media (prefers-reduced-motion: reduce){.mega-panel, .mega-btn svg, .m-sec svg, .mega-grid a{transition: none;}}