/*
 * hw-header.css - the site header, as the IoT pages draw it.
 *
 * The main site's header comes from the WordPress theme (astra-child). The IoT
 * pages are not WordPress pages, so they draw their own with Bootstrap, and this
 * file makes it look like the theme's: the same near-black bar, the HW monogram
 * and green monospace wordmark with a blinking cursor, the same nav with Notes
 * and IoT as outlined app buttons, and the GitHub and YouTube icons.
 *
 * The values are copied from the theme's functions.php. Change one there and
 * change it here too, or the two headers drift apart again.
 */

.hw-bar {
    background: #080a0f;
    border-bottom: 1px solid #1c2431;
    min-height: 80px;
    padding: 0;
    /* Bootstrap's fixed-header level: above .sticky-top (1020), so the Demo
       dropdown opens over a page's sticky sidebar instead of under it. */
    z-index: 1030;
}
.hw-bar__in { padding-left: 20px; padding-right: 20px; }

/* Wordmark: monogram, name, cursor */
.hw-bar__brand {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: #7ee0a0;
    display: inline-flex;
    align-items: center;
    padding: 0;
}
.hw-bar__brand:hover, .hw-bar__brand:focus { color: #a8f0c0; }
.hw-bar__mark {
    display: inline-block;
    width: 2em;
    height: 1.27em;
    margin-right: .55em;
    border-radius: 5px;
    background: #fff url(/wp-content/uploads/images_home/hw-logo.png) center/cover no-repeat;
    box-shadow: 0 0 0 1px #2b3446;
}
.hw-bar__caret {
    display: inline-block;
    width: .52em;
    height: 1.02em;
    margin-left: 5px;
    background: #7ee0a0;
    animation: hw-bar-caret 1.1s steps(1) infinite;
}
@keyframes hw-bar-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hw-bar__caret { animation: none; } }

/* Nav links */
.hw-bar .nav-link { color: #eaf2ff; font-size: 16px; }
.hw-bar .nav-link:hover, .hw-bar .nav-link:focus,
.hw-bar .nav-link.show { color: #7ee0a0; }

/* Notes and IoT open applications, so they are outlined buttons with a
   "launch" arrow, set apart from the reading links by a thin divider. */
.hw-bar .hw-bar__app {
    min-width: 78px;
    text-align: center;
    line-height: 1.5;
    padding: 6px 14px;
    margin: 0 4px;
    border: 1px solid #1d4ed8;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}
.hw-bar .hw-bar__app::after { content: " \2197"; font-size: .82em; opacity: .7; }
.hw-bar .hw-bar__app:hover, .hw-bar .hw-bar__app:focus,
.hw-bar .hw-bar__app.is-current { background: #1d4ed8; color: #fff; }

/* GitHub and YouTube */
.hw-bar__social { display: flex; align-items: center; gap: 28px; }
.hw-bar__social img { width: 28px; height: 28px; object-fit: contain; display: block; border-radius: 20%; }
.hw-bar__social .hw-bar__gh img { filter: invert(1); }

/* Signed-in name and Login / Logout, IoT pages only */
.hw-bar__user { display: flex; align-items: center; gap: 10px; }
.hw-bar__hello { color: #8b97a8; font-size: 14px; white-space: nowrap; }
.hw-bar__hello b { color: #eaf2ff; font-weight: 500; }

/* The Demo menu keeps its original light look inside the dark bar */
.hw-bar .dropdown-menu { width: 250px; }

/* Desktop: one row, divider before the app buttons */
@media (min-width: 992px) {
    .hw-bar__nav { align-items: center; }
    .hw-bar__nav > .nav-item { margin-left: 6px; }
    .hw-bar__apps { position: relative; margin-left: 22px !important; }
    .hw-bar__apps::before {
        content: "";
        position: absolute;
        left: -13px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 20px;
        background: #2b3446;
    }
    .hw-bar__social { margin-left: 22px; }
    .hw-bar__user { margin-left: 24px; }
}

/* Phone and tablet: the collapsed menu stacks, left-aligned */
@media (max-width: 991.98px) {
    .hw-bar { min-height: 64px; }
    .hw-bar__brand { font-size: 20px; }
    .hw-bar .navbar-toggler { border-color: #2b3446; }
    .hw-bar__nav { padding: 8px 0 16px; }
    .hw-bar .hw-bar__app { display: inline-block; margin: 6px 0; }
    .hw-bar__social { padding: 10px 0 6px; }
    .hw-bar__user { padding-top: 6px; }
}