/**
 * File: assets/css/frontend/header/top-bar.css
 * Purpose: Styles the screenshot-matched utility row and icon-aware Appearance menus.
 * Scope: Header row one layout only; utility controls are styled in utilities.css.
 * Related PHP: src/Frontend/Header/Components/TopBar.php
 * Related CSS: assets/css/frontend/header/header.css, assets/css/frontend/header/utilities.css
 * Related JS: assets/js/frontend/header/utilities.js
 * Package: HyperDAF Pro
 */

.hdf-site-header__top-row {
    height: var(--hdf-header-top-height, 1.625rem);
    min-height: var(--hdf-header-top-height, 1.625rem);
    overflow: visible;
    background: var(--hdf-color-surface);
    font-size: .75rem;
}

.hdf-site-header__top-grid {
    display: grid;
    height: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "top-left top-right";
    align-items: center;
    gap: var(--hdf-spacing-4);
}

.hdf-site-header__top-left { grid-area: top-left; min-width: 0; overflow: hidden; }
.hdf-site-header__top-right { grid-area: top-right; min-width: 0; justify-self: end; }

.hdf-top-menu {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: clamp(.8rem, 1.25vw, 1.55rem);
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    white-space: nowrap;
}

.hdf-top-menu li { flex: 0 0 auto; margin: 0; }
.hdf-top-menu a {
    display: inline-flex;
    min-height: 1.375rem;
    align-items: center;
    gap: .4rem;
    padding: 0 .08rem;
    border-radius: var(--hdf-radius-sm);
    color: var(--hdf-color-text-secondary);
    font-weight: var(--hdf-typography-weight-medium);
    text-decoration: none;
    transition: color 180ms ease, background-color 180ms ease;
}
.hdf-top-menu a:hover,
.hdf-top-menu a:focus-visible { color: var(--hdf-color-primary-strong); }
.hdf-top-menu__icon,
.hdf-top-menu--right .hdf-top-menu__icon { display: inline-flex; color: var(--hdf-color-primary-strong); }
.hdf-top-menu__icon .hdf-icon { width: .9rem; height: .9rem; }
.hdf-top-menu__label { line-height: 1.2; }

.hdf-top-menu__item--icon-refresh .hdf-top-menu__icon { color: var(--hdf-color-primary-strong); }