/* ============================================================
   Vulcan7 navigation — desktop mega menu + mobile drawer
   Pairs with class-v7-mega-menu-walker.php and v7-nav.js
   ============================================================ */

:root {
  --v7-bar-h: 64px;
  --v7-dark: #161616;
  --v7-panel: #1C1C1C;
  --v7-panel-deep: #141110;
  --v7-orange: #FF4000;
  --v7-orange-hover: #FF5C26;
  --v7-orange-bright: #FF4000;
  --v7-text: #F2EEE9;
  --v7-text-soft: #E6E2DD;
  --v7-muted: #968F87;
  --v7-muted-2: #9A938B;
  --v7-line: rgba(255, 255, 255, 0.08);
  --v7-font: 'Montserrat', -apple-system, sans-serif;
  --v7-max-w: 1380px;
}

/* ── Bar ────────────────────────────────────────────────── */

/* Defensive resets so the bar sits flush inside a Beaver Themer / page-builder
   row regardless of that row's default padding, margin or max-width. */
.v7-header {
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
.v7-header * { box-sizing: border-box; }

/* Neutralize the wrapping builder row/column when it carries this class
   (add "v7-header-row" as a CSS class on the Themer row — see README). */
.v7-header-row,
.v7-header-row .fl-row-content-wrap,
.v7-header-row .fl-row-content,
.v7-header-row .fl-col-group,
.v7-header-row .fl-col,
.v7-header-row .fl-col-content,
.v7-header-row .fl-module,
.v7-header-row .fl-module-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
.v7-header-row .fl-row-content-wrap { box-shadow: none !important; border: 0 !important; }

.v7-header {
  position: relative;
  z-index: 1000; /* keep the bar above hero/page content on every viewport */
  background: var(--v7-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--v7-font);
}

/* Link hover — no underline anywhere in the header (beats theme a:hover),
   accent color on hover for all nav links. */
.v7-header a { text-decoration: none; }
.v7-header a:hover,
.v7-header a:focus-visible { text-decoration: none !important; }
.v7-item a:hover .v7-item-title,
.v7-item a:hover .v7-item-desc,
.v7-item a:focus-visible .v7-item-title,
.v7-item a:focus-visible .v7-item-desc { color: var(--v7-orange-bright); }

.v7-header-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: var(--v7-bar-h);
  max-width: var(--v7-max-w);
  margin: 0 auto;
  padding: 0 32px;
}

.v7-logo img { display: block; height: 51px; width: auto; }

.v7-nav { display: flex; align-self: center; }

.v7-menu-missing { margin: 0; padding: 0 14px; font: 500 12.5px var(--v7-font); color: var(--v7-muted); }

.v7-menu {
  display: flex;
  align-items: center;
  height: 51px; /* menu text centers against the logo's height */
  list-style: none;
  margin: 0;
  padding: 0;
}

.v7-top { display: flex; align-items: center; height: 100%; position: relative; }
.v7-top--mega { position: static; } /* full-width panel anchors to .v7-header */

.v7-top-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  background: none;
  border: 0;
  font: 600 12.5px var(--v7-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.v7-top-link:hover,
.v7-top-link:focus-visible,
.v7-top-link[aria-expanded="true"] { color: var(--v7-orange-bright); }

.v7-caret {
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--v7-orange);
  transition: transform 0.15s;
}

[aria-expanded="true"] > .v7-caret { transform: rotate(180deg); }

/* ── Panels (shared) ────────────────────────────────────── */

.v7-panel { display: none; position: absolute; z-index: 50; }
.is-open > .v7-panel { display: block; }

/* Full-width mega panel */
.v7-panel--mega {
  left: 0;
  right: 0;
  top: 100%; /* = bottom of the 64px bar */
  background: var(--v7-panel);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 48px 96px rgba(0, 0, 0, 0.55);
}

.v7-panel-grid {
  max-width: var(--v7-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 360px;
  gap: 48px;
  padding: 30px 44px 22px;
}

/* Anchored single-column dropdown (Resources) */
.v7-panel--list {
  top: calc(100% + 13px);
  left: 0;
  width: 300px;
  background: var(--v7-panel);
  border: 1px solid var(--v7-line);
  border-radius: 14px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
  padding: 18px 14px 14px;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Columns & link rows ────────────────────────────────── */

.v7-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--v7-line);
  margin-bottom: 10px;
  font: 700 11px var(--v7-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v7-orange-bright);
}

.v7-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--v7-orange); }

.v7-col-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v7-item a {
  display: block;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  text-decoration: none;
}

.v7-panel--list .v7-item a { margin: 0; border-radius: 8px; }

.v7-item a:hover,
.v7-item a:focus-visible { background: rgba(255, 255, 255, 0.05); }

.v7-item-title { display: block; font: 600 14.5px var(--v7-font); color: var(--v7-text); }
.v7-panel--list .v7-item-title { font: 500 14px var(--v7-font); color: var(--v7-text-soft); }
.v7-item-desc { display: block; font: 500 12.5px/1.5 var(--v7-font); color: var(--v7-muted); margin-top: 2px; }

.v7-sub-links { list-style: none; margin: 2px 0 6px 12px; padding: 0; }

.v7-subitem a {
  display: block;
  border-left: 2px solid rgba(255, 64, 0, 0.35);
  padding: 4px 0 4px 12px;
  font: 600 12.5px var(--v7-font);
  color: var(--v7-orange-bright);
  text-decoration: none;
}

.v7-subitem a:hover { color: #FFB286; }

/* ── Promo card (3rd grid column) ───────────────────────── */

.v7-promo {
  background: var(--v7-panel-deep);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}

.v7-promo-eyebrow { font: 700 10.5px var(--v7-font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--v7-orange-bright); }
.v7-promo-title { font: 700 19px/1.3 var(--v7-font); color: #fff; }
.v7-promo-title-link { text-decoration: none; }
.v7-promo-title-link:hover .v7-promo-title,
.v7-promo-title-link:focus-visible .v7-promo-title { color: var(--v7-orange-bright); }

.v7-promo-media-link { display: block; border-radius: 10px; overflow: hidden; }
.v7-promo-media-link .v7-promo-media { transition: opacity 0.15s; }
.v7-promo-media-link:hover .v7-promo-media,
.v7-promo-media-link:focus-visible .v7-promo-media { opacity: 0.9; }

.v7-promo-media { width: 100%; height: 132px; border-radius: 10px; object-fit: cover; }

.v7-promo-media--placeholder {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 10px, rgba(255, 255, 255, 0.02) 10px 20px);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.v7-promo-media--placeholder span { font: 500 11px ui-monospace, monospace; color: rgba(255, 255, 255, 0.55); }

.v7-promo-text { font: 500 12.5px/1.6 var(--v7-font); color: #A89F96; }

.v7-promo-btn {
  align-self: flex-start;
  background: var(--v7-orange);
  color: #fff;
  font: 700 12.5px var(--v7-font);
  letter-spacing: 0.04em;
  padding: 11px 20px;
  border-radius: 8px;
  text-decoration: none;
}

.v7-promo-btn:hover { background: var(--v7-orange-hover); }

/* ── Utility strip ──────────────────────────────────────── */

.v7-utility { border-top: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); }

.v7-utility-inner {
  max-width: var(--v7-max-w);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 13px 44px;
  font: 500 12.5px var(--v7-font);
  color: var(--v7-muted-2);
}

.v7-utility-right { display: flex; align-items: center; gap: 28px; }

.v7-utility-brokers { font-weight: 600; color: #CFC9C2; text-decoration: none; }
.v7-utility-brokers:hover { color: #fff; }
.v7-utility-login { font-weight: 700; color: var(--v7-orange-bright); text-decoration: none; }
.v7-utility-phone { font-weight: 700; color: var(--v7-text); text-decoration: none; }

/* ── Visible phone link (Variant B) ─────────────────────── */

.v7-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: #fff;
  font: 700 13px var(--v7-font);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.v7-phone:hover { color: var(--v7-orange); }

/* ── Member login — secondary (outline) button ──────────── */

.v7-login-btn {
  display: flex;
  align-items: center;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font: 700 12.5px var(--v7-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8.5px 20px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

.v7-login-btn:hover,
.v7-login-btn:focus-visible { border-color: var(--v7-orange); color: var(--v7-orange); }

/* ── Primary CTA — Get Started (solid pill link) ────────── */

.v7-cta-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--v7-orange);
  border: 0;
  color: #fff;
  font: 700 12.5px var(--v7-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.v7-cta-btn:hover { background: var(--v7-orange-hover); }

.v7-cta-panel {
  top: calc(100% + 12px);
  right: 0;
  left: auto;
  width: 312px;
  background: var(--v7-panel);
  border: 1px solid var(--v7-line);
  border-radius: 14px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.v7-cta-primary { display: block; padding: 16px 20px; background: var(--v7-orange); text-decoration: none; }
.v7-cta-primary:hover { background: var(--v7-orange-hover); }
.v7-cta-primary-title { display: flex; justify-content: space-between; align-items: center; font: 700 14px var(--v7-font); color: #fff; }
.v7-cta-primary-desc { display: block; font: 500 12px/1.5 var(--v7-font); color: rgba(255, 255, 255, 0.85); margin-top: 3px; }

.v7-cta-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; text-decoration: none; }
.v7-cta-row:hover { background: rgba(255, 64, 0, 0.13); }
.v7-cta-row--login { border-top: 1px solid var(--v7-line); background: rgba(255, 255, 255, 0.025); }

.v7-cta-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 64, 0, 0.16);
  color: var(--v7-orange-bright);
  display: flex;
  align-items: center;
  justify-content: center;
}

.v7-cta-row-title { display: block; font: 600 13.5px var(--v7-font); color: var(--v7-text); }
.v7-cta-row-desc { display: block; font: 500 11.5px var(--v7-font); color: var(--v7-muted-2); margin-top: 2px; }

/* ── Burger (mobile only) ───────────────────────────────── */

.v7-burger { display: none; }

/* ── Mobile drawer ──────────────────────────────────────── */

@media (max-width: 1023px) {

  /* Tighter side gutters + keep the burger pinned right (phone/CTA are hidden,
     and they were what pushed things right on desktop). */
  .v7-header-inner { padding: 0 20px; gap: 12px; }
  .v7-burger { margin-left: auto; }

  .v7-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    cursor: pointer;
  }

  .v7-burger { border-color: rgba(255, 255, 255, 0.35); }
  .v7-burger span { display: block; height: 2px; background: #fff !important; border-radius: 2px; }

  .v7-cta-btn { display: none; } /* Get Started moves into the drawer footer */
  .v7-login-btn { display: none; } /* member login repeats in the drawer footer */
  .v7-phone { display: none; } /* phone repeats in the drawer footer */

  /* Header stays above page content; the header-to-hero gap is set from the
     Customizer as inline CSS (see nav-setup.php). */
  .v7-header { position: relative; z-index: 1000; }

  /* Drawer anchors to the header's real bottom (top: 100% of the relatively
     positioned .v7-header), so it never leaves a gap when the header isn't
     flush to the top of the viewport (Themer wrappers, admin bar, etc.). */
  .v7-nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    max-height: calc(100vh - 100%);
    background: #141414;
    overflow-y: auto;
    padding: 8px 20px 32px;
    flex-direction: column;
  }

  .v7-drawer-open .v7-nav { display: flex; }

  .v7-menu { display: block; height: auto; }

  .v7-top { display: block; height: auto; position: static; }

  .v7-top-link {
    width: 100%;
    justify-content: space-between;
    min-height: 54px;
    padding: 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  /* Panels become inline accordions */
  .v7-panel,
  .v7-panel--mega,
  .v7-panel--list {
    position: static;
    width: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    padding: 12px 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .v7-panel-grid { display: block; padding: 0; }

  .v7-col { margin-bottom: 14px; }
  .v7-eyebrow { border-bottom: 0; padding: 6px 12px 8px; margin: 0; font-size: 10.5px; }

  .v7-item a { margin: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  .v7-item-desc { display: none; } /* keep the drawer scannable */

  .v7-promo, .v7-utility { display: none; } /* CTA block below covers these */

  .v7-drawer-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

  .v7-drawer-start,
  .v7-drawer-login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 10px;
    font: 700 13.5px var(--v7-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
  }

  .v7-drawer-start { background: var(--v7-orange); }
  .v7-drawer-login { border: 1.5px solid rgba(255, 255, 255, 0.5); }

  .v7-drawer-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font: 700 13px var(--v7-font);
    color: var(--v7-orange-bright);
    text-decoration: none;
  }
}

@media (min-width: 1024px) {
  .v7-drawer-cta { display: none; }
}