/* ======================================================
   CQRadio.org — Menu dropdown transitions
   CSS replaces jQuery's .fadeIn() / .fadeOut()
   The vanilla JS menu handler adds/removes .menu-sub-visible
   ====================================================== */
#imHeader_imMenuObject_10_container ul li > ul,
#imHeader_imMenuObject_10_container ul li > .multiple-column,
#imStickyBar_imMenuObject_02_container ul li > ul,
#imStickyBar_imMenuObject_02_container ul li > .multiple-column {
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease, visibility 250ms ease;
}
#imHeader_imMenuObject_10_container ul li > ul.menu-sub-visible,
#imHeader_imMenuObject_10_container ul li > .multiple-column.menu-sub-visible,
#imStickyBar_imMenuObject_02_container ul li > ul.menu-sub-visible,
#imStickyBar_imMenuObject_02_container ul li > .multiple-column.menu-sub-visible {
    opacity: 1;
    visibility: visible;
}

/* ======================================================
   CQRadio.org — Dark Mode
   Ham radio operators work at night — we've got you.
   ====================================================== */

/* ----- Toggle button ----- */
#dm-toggle {
    position: fixed;
    bottom: 72px;
    right: 16px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(72, 93, 153, 0.92);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, transform 0.15s;
}
#dm-toggle:hover { background: rgba(72, 93, 153, 1); transform: scale(1.1); }
#dm-toggle:focus { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }

/* ======================================================
   DARK THEME
   Applied via html[data-theme="dark"] set by JS on load
   (reads localStorage, falls back to prefers-color-scheme)
   ====================================================== */
html[data-theme="dark"] {
    color-scheme: dark;
}

/* --- Body & page background --- */
html[data-theme="dark"] body {
    background-color: #0f1321;
    color: #d4dce8;
}
html[data-theme="dark"] #imPage,
html[data-theme="dark"] #imPageExtContainer {
    background-color: #0f1321;
}

/* --- Header --- */
html[data-theme="dark"] #imHeaderBg,
html[data-theme="dark"] #imHeader {
    background-color: #1e2d5a !important;
    background-image: none !important;
}

/* --- Sticky navigation bar --- */
html[data-theme="dark"] #imStickyBarBg,
html[data-theme="dark"] #imStickyBar {
    background-color: #1a2650 !important;
    background-image: none !important;
}

/* --- Main content area --- */
html[data-theme="dark"] #imContentGraphics {
    background-color: #161d30 !important;
}

/* --- Alternating section row bands --- */
html[data-theme="dark"] #imPageRowGraphics_2,
html[data-theme="dark"] #imPageRowGraphics_5 {
    background-color: #1a2540 !important;
}
html[data-theme="dark"] #imPageRowGraphicsOverlay_3 {
    background-color: rgba(10, 20, 60, 0.75) !important;
}

/* --- Footer --- */
html[data-theme="dark"] #imFooterBg,
html[data-theme="dark"] #imFooter {
    background-color: #0d1830 !important;
    background-image: none !important;
}

/* --- Headings --- */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .imHeading1,
html[data-theme="dark"] .imHeading2,
html[data-theme="dark"] .imHeading3,
html[data-theme="dark"] .imHeading4,
html[data-theme="dark"] .imHeading5,
html[data-theme="dark"] .imHeading6 {
    color: #d4dce8 !important;
}

/* --- White content boxes (.text-container) --- */
html[data-theme="dark"] .text-container {
    background-color: #1c2845 !important;
    border-color: #2e3d65 !important;
}

/* --- Links inside the content area --- */
html[data-theme="dark"] #imContent a {
    color: #ff8a94 !important;
}
html[data-theme="dark"] #imContent a:hover {
    color: #ffaab3 !important;
}
html[data-theme="dark"] #imContent a:visited {
    color: #d97a85 !important;
}

/* --- Contact form inputs --- */
html[data-theme="dark"] #imObjectForm_20_form input[type=email],
html[data-theme="dark"] #imObjectForm_20_form input[type=text],
html[data-theme="dark"] #imObjectForm_20_form textarea {
    background-color: #1c2845 !important;
    color: #d4dce8 !important;
    border-color: #3a4d7a !important;
}
html[data-theme="dark"] #imObjectForm_20_form input[type=email]::placeholder,
html[data-theme="dark"] #imObjectForm_20_form textarea::placeholder,
html[data-theme="dark"] #imObjectForm_20_form :-ms-input-placeholder,
html[data-theme="dark"] #imObjectForm_20_form ::-ms-input-placeholder {
    color: #6a7fa8 !important;
    opacity: 1 !important;
}
html[data-theme="dark"] #imObjectForm_20_form input.imFormFocus,
html[data-theme="dark"] #imObjectForm_20_form textarea.imFormFocus {
    background-color: #253565 !important;
    color: #d4dce8 !important;
    border-color: #4a6090 !important;
}

/* --- Desktop nav: hover & current page indicator --- */
html[data-theme="dark"] #imHeader_imMenuObject_10_container > ul > li.imPage:hover > .label-wrapper,
html[data-theme="dark"] #imHeader_imMenuObject_10_container > ul > .imMnMnCurrent > .label-wrapper,
html[data-theme="dark"] #imStickyBar_imMenuObject_02_container > ul > li.imPage:hover > .label-wrapper,
html[data-theme="dark"] #imStickyBar_imMenuObject_02_container > ul > .imMnMnCurrent > .label-wrapper {
    background-color: #253565 !important;
    border-color: #3a4d7a !important;
}
html[data-theme="dark"] #imHeader_imMenuObject_10_container > ul > li.imPage:hover > .label-wrapper .label,
html[data-theme="dark"] #imStickyBar_imMenuObject_02_container > ul > li.imPage:hover > .label-wrapper .label {
    color: #ff8a94 !important;
}

/* --- Mobile hamburger menu panel --- */
html[data-theme="dark"] #imHeader_imMenuObject_10-menu-opened .hamburger-menu-background,
html[data-theme="dark"] #imHeader_imMenuObject_10-menu-opened #imHeader_imMenuObject_10_container-menu-opened > ul,
html[data-theme="dark"] #imStickyBar_imMenuObject_02-menu-opened .hamburger-menu-background,
html[data-theme="dark"] #imStickyBar_imMenuObject_02-menu-opened #imStickyBar_imMenuObject_02_container-menu-opened > ul {
    background-color: #0d1830 !important;
}
html[data-theme="dark"] #imHeader_imMenuObject_10-menu-opened ul > li:hover:not(.imMnMnSeparator) > .label-wrapper,
html[data-theme="dark"] #imHeader_imMenuObject_10-menu-opened #imHeader_imMenuObject_10_container-menu-opened > ul > .imMnMnCurrent > .label-wrapper,
html[data-theme="dark"] #imHeader_imMenuObject_10-menu-opened .imMnMnCurrent > ul > .imMnMnCurrent > .label-wrapper {
    background-color: #253565 !important;
}
html[data-theme="dark"] .menu-imHeader_imMenuObject_10-opened #imPageExtContainer:after,
html[data-theme="dark"] .menu-imStickyBar_imMenuObject_02-opened #imPageExtContainer:after {
    background-color: #0d1830 !important;
}