/* -------------------------------------------------------------
   BEESNASS STYLE SHEET (lean, consolidated)
   Dark theme + gold accent, responsive, mobile overlay nav
-------------------------------------------------------------- */

/* === Theme Variables === */
:root{
  --bg:#0b0c10;        /* Deep black-blue */
  --gold:#f0c040;      /* Brand gold */
  --muted:#b3b3b3;     /* Secondary text */
  --accent:#ff3b30;    /* Red accent for teaser line */
}

/* === Base Page Setup === */
html, body{
  height:100%;
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--gold);
}
body{ display:flex; flex-direction:column; }

/* Utility container */
.container{ width:min(1100px, 92%); margin:0 auto; }

/* Accessibility helper */
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ============================================================
   HEADER / NAV (Desktop defaults)
============================================================ */
header{ background:#1f1f1f; }
.header-inner{
  display:flex; align-items:center; justify-content:flex-start;
  gap:40px; padding:10px 0;
}

/* Brand (logo + name) */
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo{ width:40px; height:auto; }
.brand-name{ font-size:22px; font-weight:700; letter-spacing:1px; color:var(--gold); }

/* Top-level nav */
nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:20px; }
nav ul li{ position:relative; }
nav a{ color:var(--gold); text-decoration:none; font-size:16px; }
nav a:hover{ color:#ffffff; }

/* Top-level items that open submenus (desktop label) */
.menu-item.has-children > .submenu-toggle{
  background:transparent; border:0; color:var(--gold); font-size:16px; cursor:pointer; padding:0;
}

/* Hamburger (hidden on desktop) */
.nav-toggle{ display:none; background:transparent; border:0; padding:8px; cursor:pointer; }
.nav-toggle-bar{ display:block; width:24px; height:2px; background:var(--gold); margin:5px 0; }

/* Desktop hover dropdowns */
@media (hover:hover) and (pointer:fine){
  .menu.level-2{
    display:none; position:absolute; top:100%; left:0;
    background:#2c2c2c; padding:8px 0; min-width:220px; z-index:10; border:1px solid #333;
  }
  .menu-item.has-children:hover > .menu.level-2{ display:block; }
  .menu.level-2 li a{ display:block; padding:10px 14px; color:var(--gold); }
  .menu.level-2 li a:hover{ color:#fff; background:#3a3a3a; }
}

/* Keep brand + nav grouped left; push hamburger right when visible */
.nav{ order:2; }
.nav-toggle{ order:3; margin-left:auto; }

/* ============================================================
   MAIN / HERO
============================================================ */
main{ flex:1; padding:40px; }

.hero h2{ font-size:32px; margin-bottom:10px; }
.hero h1{
  font-size: clamp(28px, 4.2vw, 52px);
  line-height:1.05; margin:0 0 12px; color:var(--gold); letter-spacing:0.5px;
}
.lead{ margin:0 0 24px; color:var(--muted); font-size:clamp(16px, 1.4vw, 18px); }

.btn{
  display:inline-block; padding:12px 18px; border-radius:10px;
  text-decoration:none; font-weight:600; border:1px solid var(--gold);
  color:#111; background:var(--gold);
}
.btn.secondary{ color:var(--gold); background:transparent; border-color:var(--gold); }
.btn:focus{ outline:2px dashed var(--gold); outline-offset:2px; }

.hero{
  position:relative; overflow:hidden;
  padding: clamp(48px, 8vw, 96px) 0;
  display:grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 5vw, 48px); align-items:center;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-start; }

.hero-visual{ position:relative; min-height:300px; display:grid; place-items:center; }
.logo-wrap{ position:relative; z-index:2; }
.logo-wrap picture, .logo-wrap img{
  width: clamp(160px, 30vw, 280px);
  height:auto; display:block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}

/* Mobile hero adjustments */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .hero-ctas{ justify-content:center; }
  .hero-copy{ text-align:center; margin:0 auto; }
  .hero-visual{ justify-self:center; margin-top:10px; }
  .logo-wrap picture, .logo-wrap img{ max-width:60vw; width:auto; }
}

/* Optional teaser line (kept) */
.teaser-wrap{ display:flex; align-items:center; gap:12px; margin-top:18px; justify-content:flex-start; }
@media (max-width:900px){ .teaser-wrap{ justify-content:center; } }

/* ============================================================
   FOOTER
============================================================ */
footer{ background:#1f1f1f; padding:20px; font-size:14px; text-align:center; color:#ccc; }
footer a{ color:var(--gold); text-decoration:none; margin:0 10px; }

/* ============================================================
   MOBILE (≤900px) — Slide-down Overlay Menu (single block)
============================================================ */
@media (max-width: 900px){
  /* Show the hamburger on mobile */
  .nav-toggle{ display:inline-block; }

  /* Overlay panel covering the viewport */
  .nav .menu.level-1{
    position: fixed; top:0; left:0; right:0; bottom:0;
    background:#ffffff; color:#222;
    display:flex; flex-direction:column; gap:0;
    padding:72px 20px 24px; /* space for header row */
    border:0; transform:translateY(-100%); transition:transform 280ms ease;
    overflow-y:auto; z-index:2000;
  }
  .nav.open .menu.level-1{ transform:translateY(0); }

  /* Lock page scroll under overlay */
  body.nav-open{ overflow:hidden; }

  /* Keep the toggle visible above overlay (top-right) and morph to X */
  .nav-toggle{
    position:fixed; top:14px; right:16px; z-index:3000;
  }
  .nav-toggle-bar{
    transition: transform 200ms ease, opacity 200ms ease; transform-origin:50% 50%;
  }
  body.nav-open .nav-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle-bar:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* Overlay menu items */
  .menu-item{ border-bottom:1px solid #eee; }
  .menu-item a, .submenu-toggle{ color:#222; padding:14px 6px; font-size:18px; }
  .menu-item a:hover, .submenu-toggle:hover{ color:var(--gold); }

  /* Submenus act as accordions in overlay */
  .menu.level-2{
    display:none; position:static; background:#f5f5f5; border-top:1px solid #e9e9e9; padding:6px 0;
  }
  .menu-item.open > .menu.level-2{ display:block; }
  .menu.level-2 li a{ padding:10px 10px; font-size:16px; color:#222; }
  .menu.level-2 li a:hover{ color:var(--gold); }

  /* Overlay-specific colors: Home gold/bold; others black/bold */
  .nav.open .menu.level-1 > .menu-item > a{ color:#000; font-weight:700; }
  .nav.open .menu.level-1 > .menu-item > a.nav-home{ color:var(--gold) !important; font-weight:700; }
  .nav.open .menu.level-1 > .menu-item > .submenu-toggle{ color:#000 !important; font-weight:700; }
  .nav.open .menu.level-1 > .menu-item > .submenu-toggle:hover{ color:var(--gold) !important; }
}

/* === Canada Emoji Flag === */
.emoji-flag{
  font-family: "Segoe UI Emoji","Segoe UI Symbol","Apple Color Emoji","Noto Color Emoji",sans-serif;
}


/* === Early Access Form Only === */
.ea-form input,
.ea-form select,
.ea-form textarea {
  background:#ffffff !important;
  color:#000000 !important;
  border:1px solid #ccc !important;
}

.ea-form input:focus,
.ea-form select:focus,
.ea-form textarea:focus {
  outline:2px solid var(--gold);
  border-color:var(--gold);
}