.elementor-8 .elementor-element.elementor-element-6d7a82b{--display:flex;--overlay-opacity:0;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-6d7a82b::before, .elementor-8 .elementor-element.elementor-element-6d7a82b > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-6d7a82b > .e-con-inner > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-6d7a82b > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-6d7a82b > .e-con-inner > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-6d7a82b > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-8 .elementor-element.elementor-element-12db5f5{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS */<!-- ============================================================
     BARC Site Header — Elementor Theme Builder HTML Widget
     
     HOW TO INSTALL:
     1. Theme Builder → Header → edit BARC Header
     2. Delete ALL existing containers
     3. Add ONE HTML widget — zero padding, zero margin
     4. Paste this entire file
     5. Publish → Display Conditions → Entire Site
     
     LOGO: Replace the badge div with an <img> tag when ready:
     <img src="YOUR-LOGO-URL" alt="BARC Logo" 
          style="width:36px;height:36px;border-radius:50%;object-fit:cover">
     ============================================================ -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,700;1,400&family=Source+Sans+3:wght@400;600;700&display=swap');

:root{
  --navy-900:#042C53;--navy-800:#0C447C;--navy-600:#185FA5;
  --navy-400:#378ADD;--navy-200:#85B7EB;--navy-100:#B5D4F4;--navy-50:#E6F1FB;
  --amber-500:#BA7517;--amber-400:#EF9F27;--amber-200:#FAC775;
  --teal-700:#0F6E56;--teal-500:#1D9E75;
  --gray-text:#3D3D3D;--white:#fff;
  --font-sans:'Source Sans 3',sans-serif;
  --font-serif:'Source Serif 4',serif;
}

/* ── RESET ── */
.bh-header *{box-sizing:border-box;margin:0;padding:0}
.bh-header a{text-decoration:none}
.bh-header ul{list-style:none}

/* ── HEADER BAR ── */
.bh-header{
  background:var(--navy-900);
  font-family:var(--font-sans);
  width:100%;
  position:relative;
  z-index:1000;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.bh-header-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  height:54px;
  display:flex;
  align-items:center;
  gap:0;
}

/* ── LOGO — compact ── */
.bh-logo{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;flex-shrink:0;margin-right:20px;
}
.bh-logo-badge{
  width:34px;height:34px;border-radius:50%;
  background:var(--amber-500);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
}
.bh-logo-badge img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.bh-logo-badge-text{
  font-size:8px;font-weight:700;color:var(--navy-900);
  text-align:center;line-height:1.2;letter-spacing:0.02em;
}
.bh-logo-name{
  font-family:var(--font-sans);font-size:14px;font-weight:700;
  color:var(--white);line-height:1.1;white-space:nowrap;
}
.bh-logo-sub{
  font-size:9px;color:var(--navy-200);
  letter-spacing:0.06em;text-transform:uppercase;
}

/* ── NAV ── */
.bh-nav{
  display:flex;align-items:center;gap:0;flex:1;
}
.bh-nav-item{position:relative}
.bh-nav-link{
  display:flex;align-items:center;gap:3px;
  padding:0 10px;height:54px;
  font-size:13px;font-weight:600;
  color:var(--navy-100);
  cursor:pointer;white-space:nowrap;
  transition:color 0.15s,background 0.15s;
  border:none;background:none;font-family:var(--font-sans);
}
.bh-nav-link:hover,.bh-nav-item:hover>.bh-nav-link{
  color:var(--white);background:rgba(255,255,255,0.06);
}
.bh-nav-link.amber{color:var(--amber-400)}
.bh-nav-link.amber:hover{color:var(--amber-200)}
.bh-nav-link svg{
  width:11px;height:11px;stroke:currentColor;fill:none;
  stroke-width:2.5;flex-shrink:0;opacity:0.7;
  transition:transform 0.2s;
}
.bh-nav-item:hover>.bh-nav-link svg{transform:rotate(180deg)}

/* ── STANDARD DROPDOWN ── */
.bh-dropdown{
  display:none;position:absolute;top:100%;left:0;
  background:var(--white);min-width:200px;
  box-shadow:0 6px 24px rgba(0,0,0,0.14);
  border-top:3px solid var(--navy-400);z-index:999;
}
.bh-nav-item:hover .bh-dropdown{display:block}
.bh-dropdown a{
  display:block;padding:8px 15px;
  font-size:13px;font-weight:500;color:var(--gray-text);
  border-bottom:1px solid #F0F0F0;
  transition:background 0.12s,color 0.12s;
}
.bh-dropdown a:last-child{border-bottom:none}
.bh-dropdown a:hover{background:var(--navy-50);color:var(--navy-800)}

/* ── MEGA DROPDOWN — Events & Programs ── */
.bh-mega{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%);
  background:var(--white);width:420px;
  box-shadow:0 6px 24px rgba(0,0,0,0.14);
  border-top:3px solid var(--navy-400);z-index:999;
  display:none;
}
.bh-nav-item:hover .bh-mega{display:flex}
.bh-mega-col{flex:1;padding:0}

/* ON THE AIR column header — dark navy */
.bh-mega-head{
  padding:7px 15px 6px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1em;
}
.bh-mega-head.on-air{
  background:var(--navy-800);color:var(--navy-200);
}
/* CLUB PROGRAMS column header — teal */
.bh-mega-head.club-prog{
  background:var(--teal-700);color:rgba(255,255,255,0.9);
}
.bh-mega-col a{
  display:block;padding:7px 15px;
  font-size:13px;font-weight:500;color:var(--gray-text);
  border-bottom:1px solid #F0F0F0;
  transition:background 0.12s,color 0.12s;
}
.bh-mega-col a:last-child{border-bottom:none}
.bh-mega-col.on-air a:hover{background:var(--navy-50);color:var(--navy-800)}
.bh-mega-col.club-prog a:hover{background:#E1F5EE;color:var(--teal-700)}
.bh-mega-col.on-air{border-right:1px solid #E0E0E0}

/* ── RIGHT SIDE ── */
.bh-header-right{
  margin-left:auto;display:flex;align-items:center;flex-shrink:0;
}
.bh-btn-members{
  background:transparent;color:var(--amber-400);border:none;
  padding:6px 12px;
  font-size:13px;font-weight:700;cursor:pointer;
  font-family:var(--font-sans);text-decoration:none;
  transition:color 0.15s;white-space:nowrap;
}
.bh-btn-members:hover{color:var(--amber-200);text-decoration:none}

/* ── MOBILE HAMBURGER ── */
.bh-hamburger{
  display:none;flex-direction:column;justify-content:center;
  gap:5px;cursor:pointer;padding:8px;margin-left:6px;
  background:none;border:none;
}
.bh-hamburger span{
  display:block;width:22px;height:2px;
  background:var(--navy-100);border-radius:2px;transition:all 0.25s;
}
.bh-mobile-nav{
  display:none;background:var(--navy-800);
  border-top:1px solid var(--navy-600);
}
.bh-mobile-nav.open{display:block}
.bh-mobile-nav a{
  display:block;padding:11px 24px;font-size:14px;font-weight:500;
  color:var(--navy-100);border-bottom:1px solid rgba(255,255,255,0.07);
  font-family:var(--font-sans);
}
.bh-mobile-nav a:hover{background:rgba(255,255,255,0.06);color:var(--white)}
.bh-mobile-section{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.09em;padding:10px 24px 4px;
  color:var(--navy-200);
}
.bh-mobile-section.teal{color:#5DCAA5}

/* ── BREAKPOINTS ──
   Menu stays visible down to 768px (tablet portrait)
   Below 768px switches to hamburger
── */
@media(max-width:768px){
  .bh-nav{display:none}
  .bh-hamburger{display:flex}
  .bh-logo-name{font-size:13px}
}
@media(max-width:480px){
  .bh-logo-sub{display:none}
  .bh-header-inner{padding:0 14px}
}

/* ── MEMBERS MODAL ── */
.bh-modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(4,44,83,0.72);z-index:9000;
  align-items:center;justify-content:center;
}
.bh-modal-overlay.open{display:flex}
.bh-modal{
  background:var(--white);width:100%;max-width:400px;
  margin:20px;padding:32px;position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.bh-modal-close{
  position:absolute;top:14px;right:16px;font-size:22px;
  cursor:pointer;color:#999;background:none;border:none;
  font-family:var(--font-sans);line-height:1;
}
.bh-modal-close:hover{color:var(--gray-text)}
.bh-modal h2{
  font-size:18px;color:var(--navy-800);margin-bottom:6px;
  font-family:var(--font-serif);
}
.bh-modal-sub{font-size:13px;color:#777;margin-bottom:20px}
.bh-modal-links{display:flex;flex-direction:column;gap:10px}
.bh-modal-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border:1px solid #E0E0E0;
  font-size:13px;font-weight:600;color:var(--navy-800);
  transition:background 0.15s,border-color 0.15s;
}
.bh-modal-link:hover{background:var(--navy-50);border-color:var(--navy-400)}
.bh-modal-link span{font-size:18px;color:var(--navy-400)}
.bh-modal-divider{text-align:center;font-size:12px;color:#aaa;margin:4px 0}
.bh-modal-join{
  display:block;text-align:center;
  padding:11px;background:var(--navy-400);
  color:var(--white);font-size:13px;font-weight:700;
  margin-top:6px;transition:background 0.15s;
  text-decoration:none;
}
.bh-modal-join:hover{background:var(--navy-600);text-decoration:none}
</style>

<!-- ═══════════════════════════════════════════════════════════
     HEADER
═══════════════════════════════════════════════════════════ -->
<header class="bh-header">
  <div class="bh-header-inner">

    <!-- LOGO -->
    <a class="bh-logo" href="/">
      <div class="bh-logo-badge">
        <!-- To use a real logo image, replace the div below with:
             <img src="YOUR-LOGO-URL" alt="BARC Logo"> -->
        <div class="bh-logo-badge-text">W8DGN<br>BARC</div>
      </div>
      <div class="bh-logo-text">
        <div class="bh-logo-name">Bellbrook Amateur Radio Club</div>
        <div class="bh-logo-sub">W8DGN · Bellbrook, Ohio</div>
      </div>
    </a>

    <!-- NAV -->
    <nav class="bh-nav">

      <!-- Home + About sub-items -->
      <div class="bh-nav-item">
        <a class="bh-nav-link" href="/">Home
          <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
        </a>
        <div class="bh-dropdown">
          <a href="/about">About BARC</a>
          <a href="/officers">Officers &amp; Coordinators</a>
          <a href="/bylaws">Bylaws</a>
          <a href="/other-documents">Other Club Documents</a>
        </div>
      </div>

      <!-- Repeaters & Nets -->
      <div class="bh-nav-item">
        <a class="bh-nav-link" href="/repeaters-nets">Repeaters &amp; Nets</a>
      </div>

      <!-- Events & Programs — mega dropdown -->
      <div class="bh-nav-item">
        <a class="bh-nav-link" href="/events-programs">Events &amp; Programs
          <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
        </a>
        <div class="bh-mega">
          <div class="bh-mega-col on-air">
            <div class="bh-mega-head on-air">On the Air</div>
            <a href="/repeaters-nets">Repeaters &amp; Nets</a>
            <a href="/pota">Parks on the Air</a>
            <a href="/digital-radio">Digital Radio</a>
            <a href="/contesting">Contesting</a>
          </div>
          <div class="bh-mega-col club-prog">
            <div class="bh-mega-head club-prog">Club Programs</div>
            <a href="/field-day">Field Day</a>
            <a href="/tech-night">Tech Night</a>
            <a href="/public-service">Public Service &amp; EmComm</a>
            <a href="/presentations">Presentations</a>
            <a href="/educational">Educational Programs</a>
            <a href="/other-events">Other Club Events</a>
            <a href="/hamfests">Hamfests</a>
          </div>
        </div>
      </div>

      <!-- Newsletter — amber -->
      <div class="bh-nav-item">
        <a class="bh-nav-link amber" href="/newsletter">Newsletter</a>
      </div>

      <!-- Calendar — amber -->
      <div class="bh-nav-item">
        <a class="bh-nav-link amber" href="/calendar">Calendar</a>
      </div>

      <!-- Resources -->
      <div class="bh-nav-item">
        <a class="bh-nav-link" href="/resources">Resources
          <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
        </a>
        <div class="bh-dropdown">
          <a href="/archives">Archives</a>
          <a href="/photo-gallery">Photo Gallery</a>
          <a href="/field-day-logs">Field Day Logs</a>
          <a href="/ham-links">Ham Radio Links</a>
          <a href="/ham-news">Ham Radio News</a>
        </div>
      </div>

    </nav>

    <!-- RIGHT: Members + hamburger -->
    <div class="bh-header-right">
      <button class="bh-btn-members"
        onclick="document.getElementById('bh-members-modal').classList.add('open')">
        Members
      </button>
      <button class="bh-hamburger"
        onclick="document.getElementById('bh-mobile-nav').classList.toggle('open')"
        aria-label="Open menu">
        <span></span><span></span><span></span>
      </button>
    </div>

  </div>

  <!-- MOBILE NAV -->
  <div class="bh-mobile-nav" id="bh-mobile-nav">
    <a href="/">Home</a>
    <div class="bh-mobile-section">About</div>
    <a href="/about">About BARC</a>
    <a href="/officers">Officers &amp; Coordinators</a>
    <a href="/bylaws">Bylaws</a>
    <a href="/other-documents">Other Club Documents</a>
    <a href="/repeaters-nets">Repeaters &amp; Nets</a>
    <div class="bh-mobile-section">On the Air</div>
    <a href="/repeaters-nets">Repeaters &amp; Nets</a>
    <a href="/pota">Parks on the Air</a>
    <a href="/digital-radio">Digital Radio</a>
    <a href="/contesting">Contesting</a>
    <div class="bh-mobile-section teal">Club Programs</div>
    <a href="/field-day">Field Day</a>
    <a href="/tech-night">Tech Night</a>
    <a href="/public-service">Public Service &amp; EmComm</a>
    <a href="/presentations">Presentations</a>
    <a href="/educational">Educational Programs</a>
    <a href="/other-events">Other Club Events</a>
    <a href="/hamfests">Hamfests</a>
    <a href="/newsletter" style="color:#EF9F27">Newsletter</a>
    <a href="/calendar" style="color:#EF9F27">Calendar</a>
    <div class="bh-mobile-section">Resources</div>
    <a href="/archives">Archives</a>
    <a href="/photo-gallery">Photo Gallery</a>
    <a href="/field-day-logs">Field Day Logs</a>
    <a href="/ham-links">Ham Radio Links</a>
    <a href="/ham-news">Ham Radio News</a>
    <a href="/members" style="color:#EF9F27;font-weight:700">Members Area</a>
    <a href="/contact">Contact Us</a>
  </div>

</header>

<!-- ═══════════════════════════════════════════════════════════
     MEMBERS MODAL
═══════════════════════════════════════════════════════════ -->
<div class="bh-modal-overlay" id="bh-members-modal"
  onclick="if(event.target===this)this.classList.remove('open')">
  <div class="bh-modal">
    <button class="bh-modal-close"
      onclick="document.getElementById('bh-members-modal').classList.remove('open')">×</button>
    <h2>Members Area</h2>
    <div class="bh-modal-sub">BARC W8DGN · Member resources and account access</div>
    <div class="bh-modal-links">
      <a class="bh-modal-link" href="/members">Member Portal <span>→</span></a>
      <a class="bh-modal-link" href="/login">Log In <span>→</span></a>
      <a class="bh-modal-link" href="/member-directory">Member Directory <span>→</span></a>
      <a class="bh-modal-link" href="/member-profile">My Profile <span>→</span></a>
    </div>
    <div class="bh-modal-divider">— not a member? —</div>
    <a class="bh-modal-join" href="/registration">Join BARC →</a>
  </div>
</div>/* End custom CSS */