/* =========================================================
   HFDXARC Header + Main Menu Polish v1.2.3
   Forces the site header/menu to match the black/gold/blue
   master mockup, forces a curated top menu, and keeps long dropdown text inside its panel.
   ========================================================= */

:root {
  --hfdx-header-max: 1500px;
  --hfdx-header-black: #020305;
  --hfdx-nav-black: #090d13;
  --hfdx-nav-soft: #131b26;
  --hfdx-gold: #ffd200;
  --hfdx-blue: #1677c8;
}

body #header-wrap {
  position: relative !important;
  z-index: 1000 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.035), transparent 36%),
    linear-gradient(180deg, #000 0%, #020407 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.72) !important;
  overflow: visible !important;
}

body #header.hfdxarc-site-header,
body #header.container.hfdxarc-site-header {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body .hfdxarc-site-identity {
  display: grid !important;
  grid-template-columns: minmax(205px, 255px) minmax(420px, 1fr) minmax(105px, 190px) !important;
  align-items: center !important;
  gap: clamp(14px, 2.2vw, 42px) !important;
  width: min(calc(100vw - 28px), var(--hfdx-header-max)) !important;
  max-width: var(--hfdx-header-max) !important;
  min-height: 108px !important;
  margin: 0 auto !important;
  padding: 16px 14px 14px !important;
  box-sizing: border-box !important;
}

body .hfdxarc-rsgb-affiliation {
  justify-self: start !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  color: #fff !important;
}

body .hfdxarc-rsgb-affiliation-logo {
  width: 62px !important;
  max-width: 62px !important;
  height: auto !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8)) !important;
}

body .hfdxarc-rsgb-affiliation-copy {
  display: grid !important;
  gap: 3px !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 9px rgba(0,0,0,0.9) !important;
}

body #logo.hfdxarc-brand-centre,
body #logo {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  background: transparent !important;
}

body #logo .hfdxarc-brand-link,
body .hfdxarc-brand-link {
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
  color: #fff !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
}

body #logo .site-title.hfdxarc-brand-title,
body .hfdxarc-brand-title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: clamp(25px, 2.05vw, 34px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.015em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.95) !important;
}

body .hfdxarc-brand-callsigns {
  display: block !important;
  color: var(--hfdx-gold) !important;
  font-size: clamp(22px, 1.55vw, 30px) !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 0 18px rgba(255,210,0,0.24), 0 2px 9px rgba(0,0,0,0.9) !important;
}

body #logo .site-description.hfdxarc-brand-meta,
body .hfdxarc-brand-meta {
  display: block !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.94) !important;
  font-size: clamp(12px, 0.82vw, 15px) !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.82) !important;
}

body .hfdxarc-club-header-badge {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

body .hfdxarc-club-header-logo {
  width: 90px !important;
  max-width: 90px !important;
  height: 90px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.86)) !important;
}

/* The main navigation is full-width, but the menu itself uses the same centred width as the header. */
body #mainnav {
  display: block !important;
  float: none !important;
  clear: both !important;
  position: relative !important;
  z-index: 1001 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  background:
    linear-gradient(180deg, rgba(26,31,38,0.98) 0%, rgba(10,14,20,0.99) 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.13) !important;
  border-bottom: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 22px rgba(0,0,0,0.42) !important;
  overflow: visible !important;
}

body #mainnav-menu,
body #mainnav-menu ul,
body #mainnav-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 981px) {
  body #mainnav-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    width: min(calc(100vw - 28px), var(--hfdx-header-max)) !important;
    max-width: var(--hfdx-header-max) !important;
    min-height: 48px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body #mainnav-menu > li {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
  }

  body #mainnav-menu > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    width: auto !important;
    padding: 0 23px !important;
    color: rgba(255,255,255,0.96) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.018em !important;
    text-shadow: 0 1px 7px rgba(0,0,0,0.82) !important;
    transition: background 0.18s ease, color 0.18s ease !important;
  }

  body #mainnav-menu > li > a::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 4px !important;
    background: transparent !important;
    opacity: 0 !important;
    transform: scaleX(0.35) !important;
    transform-origin: center !important;
    box-shadow: none !important;
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease !important;
  }

  body #mainnav-menu > li:hover > a,
  body #mainnav-menu > li:focus-within > a,
  body #mainnav-menu > li.current-menu-item > a,
  body #mainnav-menu > li.current_page_item > a,
  body #mainnav-menu > li.current-menu-ancestor > a,
  body #mainnav-menu > li.current_page_ancestor > a {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)) !important;
  }

  body #mainnav-menu > li:hover > a::after,
  body #mainnav-menu > li:focus-within > a::after,
  body #mainnav-menu > li.current-menu-item > a::after,
  body #mainnav-menu > li.current_page_item > a::after,
  body #mainnav-menu > li.current-menu-ancestor > a::after,
  body #mainnav-menu > li.current_page_ancestor > a::after {
    background: var(--hfdx-gold) !important;
    box-shadow: 0 0 15px rgba(255,210,0,0.5) !important;
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }

  body #mainnav-menu a[href*="live"],
  body #mainnav-menu a[href*="on-air"],
  body #mainnav-menu a[href*="onair"] {
    color: #fff8be !important;
  }

  body #mainnav-menu ul,
  body #mainnav-menu li > ul,
  body #mainnav-menu li > ul ul {
    position: absolute !important;
    z-index: 100000 !important;
    top: 100% !important;
    left: 0 !important;
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    min-width: 230px !important;
    width: max-content !important;
    max-width: min(330px, calc(100vw - 24px)) !important;
    max-height: none !important;
    height: auto !important;
    padding: 8px !important;
    background: linear-gradient(180deg, rgba(9,18,29,0.985), rgba(2,7,13,0.985)) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 22px 48px rgba(0,0,0,0.64) !important;
    overflow: visible !important;
    transform: translateY(8px) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease !important;
  }

  body #mainnav-menu li:hover > ul,
  body #mainnav-menu li:focus-within > ul,
  body #mainnav-menu li.hfdxarc-submenu-open > ul {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  body #mainnav-menu ul li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    background: transparent !important;
  }

  body #mainnav-menu ul a,
  body #mainnav-menu ul li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 38px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    color: rgba(229,238,249,0.94) !important;
    background: transparent !important;
    border-radius: 8px !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
  }

  body #mainnav-menu ul a:hover,
  body #mainnav-menu ul li.current-menu-item > a,
  body #mainnav-menu ul li.current_page_item > a {
    color: #fff !important;
    background: rgba(36,151,255,0.18) !important;
  }

  body #mainnav-menu ul ul {
    top: -8px !important;
    left: 100% !important;
    border-radius: 12px !important;
  }

  body #mainnav-menu .hfdxarc-submenu-toggle {
    display: none !important;
  }

  body #mainnav-icon {
    display: none !important;
  }
}

@media (max-width: 1280px) and (min-width: 981px) {
  body .hfdxarc-site-identity {
    grid-template-columns: minmax(180px, 220px) minmax(360px, 1fr) minmax(88px, 140px) !important;
    min-height: 96px !important;
  }

  body .hfdxarc-rsgb-affiliation-logo {
    width: 54px !important;
  }

  body .hfdxarc-rsgb-affiliation-copy {
    font-size: 13px !important;
  }

  body .hfdxarc-club-header-logo {
    width: 76px !important;
    height: 76px !important;
  }

  body #mainnav-menu > li > a {
    padding-left: 15px !important;
    padding-right: 15px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 980px) {
  body .hfdxarc-site-identity {
    width: 100% !important;
    grid-template-columns: 54px minmax(0, 1fr) 58px !important;
    gap: 8px !important;
    min-height: 82px !important;
    padding: 10px 12px !important;
  }

  body .hfdxarc-rsgb-affiliation {
    justify-content: center !important;
    gap: 0 !important;
  }

  body .hfdxarc-rsgb-affiliation-logo {
    width: 45px !important;
  }

  body .hfdxarc-rsgb-affiliation-copy {
    display: none !important;
  }

  body .hfdxarc-club-header-logo {
    width: 50px !important;
    height: 50px !important;
  }

  body #logo .site-title.hfdxarc-brand-title,
  body .hfdxarc-brand-title {
    font-size: clamp(15px, 4.4vw, 23px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }

  body .hfdxarc-brand-callsigns {
    font-size: clamp(14px, 4vw, 20px) !important;
    white-space: nowrap !important;
  }

  body #logo .site-description.hfdxarc-brand-meta,
  body .hfdxarc-brand-meta {
    font-size: clamp(8px, 2.35vw, 11px) !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
  }

  body #mainnav {
    min-height: 48px !important;
    padding: 0 10px 10px !important;
    background: linear-gradient(180deg, rgba(18,26,37,0.98), rgba(5,9,15,0.99)) !important;
  }

  body #mainnav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100vw - 24px) !important;
    min-height: 44px !important;
    margin: 0 auto !important;
    padding: 0 14px !important;
    color: #fff !important;
    background: linear-gradient(180deg, rgba(25,132,214,0.92), rgba(13,82,143,0.96)) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 0 0 8px 8px !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }

  body #mainnav-menu {
    display: none;
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    margin: 8px auto 0 !important;
    padding: 8px !important;
    background: rgba(4,10,18,0.96) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.54) !important;
  }

  body #mainnav-icon.active + #mainnav #mainnav-menu,
  body #mainnav.open #mainnav-menu,
  body #mainnav-menu[style*="display: block"],
  body #mainnav-menu[style*="display:block"] {
    display: block !important;
  }

  body #mainnav-menu li,
  body #mainnav-menu > li {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    float: none !important;
    margin: 0 !important;
  }

  body #mainnav-menu a,
  body #mainnav-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 11px 44px 11px 13px !important;
    color: rgba(255,255,255,0.94) !important;
    background: transparent !important;
    border-radius: 8px !important;
    text-align: left !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.02em !important;
  }

  body #mainnav-menu a:hover,
  body #mainnav-menu > li.current_page_item > a,
  body #mainnav-menu > li.current-menu-item > a {
    color: #fff !important;
    background: rgba(36,151,255,0.17) !important;
  }

  body #mainnav-menu ul,
  body #mainnav-menu li > ul,
  body #mainnav-menu li > ul ul {
    position: static !important;
    display: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 2px 0 7px !important;
    padding: 6px 0 6px 12px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 0 !important;
    border-left: 2px solid rgba(255,210,0,0.62) !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body #mainnav-menu li.hfdxarc-submenu-open > ul {
    display: block !important;
  }

  body #mainnav-menu ul a,
  body #mainnav-menu ul li > a {
    min-height: 36px !important;
    padding: 9px 12px !important;
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }

  body #mainnav-menu .hfdxarc-submenu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.07) !important;
    color: #fff !important;
  }

  body #mainnav-menu .hfdxarc-submenu-toggle::before {
    content: "+" !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  body #mainnav-menu li.hfdxarc-submenu-open > .hfdxarc-submenu-toggle::before {
    content: "−" !important;
  }
}

@media (max-width: 440px) {
  body .hfdxarc-site-identity {
    grid-template-columns: 42px minmax(0, 1fr) 44px !important;
    gap: 6px !important;
    min-height: 76px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  body .hfdxarc-rsgb-affiliation-logo {
    width: 36px !important;
  }

  body .hfdxarc-club-header-logo {
    width: 40px !important;
    height: 40px !important;
  }
}

/* =========================================================
   v1.2.3 dropdown containment + curated menu safety
   Keeps long page names inside the dark dropdown panel.
   ========================================================= */
@media (min-width: 981px) {
  body #mainnav-menu > li {
    isolation: isolate !important;
  }

  body #mainnav-menu > li > ul.sub-menu,
  body #mainnav-menu > li > ul.children,
  body #mainnav-menu > li > ul {
    box-sizing: border-box !important;
    min-width: 330px !important;
    width: 360px !important;
    max-width: min(420px, calc(100vw - 32px)) !important;
    overflow: hidden !important;
  }

  body #mainnav-menu > li:last-child > ul,
  body #mainnav-menu > li:nth-last-child(2) > ul,
  body #mainnav-menu > li:nth-last-child(3) > ul {
    left: auto !important;
    right: 0 !important;
  }

  body #mainnav-menu ul li,
  body #mainnav-menu ul li.menu-item,
  body #mainnav-menu ul li.page_item {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body #mainnav-menu ul a,
  body #mainnav-menu ul li > a,
  body #mainnav-menu ul li.page_item > a,
  body #mainnav-menu ul li.menu-item > a {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 11px 13px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.26 !important;
    text-overflow: clip !important;
    overflow: hidden !important;
  }

  body #mainnav-menu ul ul,
  body #mainnav-menu li > ul ul {
    width: 340px !important;
    max-width: min(390px, calc(100vw - 32px)) !important;
    overflow: hidden !important;
  }
}