/* WDHC imperial / metric unit toggle */
.wdhc-unit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(205, 127, 50, 0.35);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
}

.wdhc-unit-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Roboto Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease, background 0.15s ease;
}

.wdhc-unit-btn:hover {
    color: #fff;
}

.wdhc-unit-btn.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.28), rgba(205, 127, 50, 0.22));
    color: #f5e6b8;
}

nav .wdhc-unit-toggle {
    margin-right: 8px;
}

.hero-lead {
    font-family: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    color: rgba(255, 255, 255, 0.78);
    margin: 6px auto 4px;
    font-weight: 500;
    letter-spacing: 0.4px;
    line-height: 1.45;
    max-width: 720px;
}

.sidebar-unit-toggle {
    width: auto;
    justify-content: center;
    margin: 0;
}

.mobile-header .wdhc-unit-toggle {
    flex-shrink: 0;
}

@media (max-width: 900px) {
  nav .wdhc-unit-toggle,
  .nav-mobile-tools .wdhc-unit-toggle {
    order: unset;
    margin: 0;
  }
    .wdhc-unit-btn {
        font-size: 0.62rem;
        padding: 5px 8px;
    }
}