/**
 * File: assets/css/frontend/blog/header.css
 * Purpose: Styles the dedicated icon-led HyperDAF Blog identity, navigation, accessible dropdowns and Blog search.
 * Scope: Theme-owned Blog header presentation only; marketplace/product navigation remains HyperDAF Engine-owned.
 * Related PHP: src/Frontend/Blog/BlogHeader.php
 * Related JS: assets/js/frontend/blog/blog.js
 * Package: HyperDAF Pro
 */
.hdf-blog-header {
    --hdf-component-header-nav-surface: var(--hdf-blog-header-surface, var(--hdf-color-surface));
    position: relative;
    z-index: var(--hdf-header-layer-navigation, 10);
    border-top: var(--hdf-border-width-default) solid color-mix(in srgb, var(--hdf-color-surface) var(--hdf-header-navigation-raised-highlight-strength, 20%), transparent);
    border-bottom: var(--hdf-border-width-default) solid color-mix(in srgb, var(--hdf-blog-border, var(--hdf-color-border-strong)) var(--hdf-header-navigation-raised-depth-strength, 14%), transparent);
    background: var(--hdf-component-header-nav-edge-background, var(--hdf-component-header-nav-surface));
    background-clip: padding-box;
}

.hdf-blog-header--top-line {
    border-top-color: color-mix(in srgb, var(--hdf-blog-border, var(--hdf-color-border)) var(--hdf-header-navigation-raised-highlight-strength, 20%), transparent);
}

.hdf-blog-header__inner {
    display: grid;
    width: min(calc(100% - (var(--hdf-blog-horizontal-gutter, 1.5rem) * 2)), var(--hdf-blog-max-width, var(--hdf-layout-site-max)));
    min-height: var(--hdf-blog-header-row-height, 3rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(.75rem, 1.6vw, 1.5rem);
    margin-inline: auto;
}

.hdf-blog-header--with-search .hdf-blog-header__inner {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem);
}

.hdf-blog-header__brand {
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    gap: .55rem;
    color: var(--hdf-blog-text, var(--hdf-color-text-primary));
    font-size: calc(var(--hdf-blog-header-item-font-size, .875rem) + 1px);
    text-decoration: none;
}

.hdf-blog-header__brand:hover,
.hdf-blog-header__brand:focus-visible {
    color: var(--hdf-blog-accent-hover, var(--hdf-color-primary-hover));
}

.hdf-blog-header__brand-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: var(--hdf-radius-md);
    background: var(--hdf-blog-accent, var(--hdf-color-primary-strong));
    color: var(--hdf-color-text-inverse);
}

.hdf-blog-header__brand-icon .hdf-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.hdf-blog-header__nav {
    min-width: 0;
    align-self: stretch;
}

.hdf-blog-menu {
    display: flex;
    min-width: 0;
    height: 100%;
    align-items: stretch;
    gap: .125rem;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: visible;
    list-style: none;
    scrollbar-width: none;
}

.hdf-blog-menu::-webkit-scrollbar { display: none; }

.hdf-blog-menu__item {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
}

.hdf-blog-menu__row {
    position: relative;
    display: flex;
    align-items: stretch;
}

.hdf-blog-menu__link {
    position: relative;
    display: inline-flex;
    min-height: var(--hdf-blog-header-row-height, 3rem);
    align-items: center;
    gap: .42rem;
    padding: 0 .68rem;
    color: var(--hdf-blog-muted, var(--hdf-color-text-muted));
    font-size: var(--hdf-blog-header-item-font-size, .875rem);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease, background-color 160ms ease;
}

.hdf-blog-menu__link::after {
    position: absolute;
    right: .68rem;
    bottom: 0;
    left: .68rem;
    height: .125rem;
    border-radius: var(--hdf-radius-pill) var(--hdf-radius-pill) 0 0;
    background: transparent;
    content: "";
}

.hdf-blog-menu__icon {
    display: inline-grid;
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 1.65rem;
    place-items: center;
    border: var(--hdf-border-width-default) solid transparent;
    border-radius: var(--hdf-radius-md);
    background: transparent;
    color: currentColor;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.hdf-blog-menu__icon .hdf-icon {
    width: var(--hdf-blog-header-icon-size, 1.0625rem);
    height: var(--hdf-blog-header-icon-size, 1.0625rem);
}

.hdf-blog-menu__item:hover > .hdf-blog-menu__row .hdf-blog-menu__link,
.hdf-blog-menu__item:focus-within > .hdf-blog-menu__row .hdf-blog-menu__link,
.hdf-blog-menu__item.is-open > .hdf-blog-menu__row .hdf-blog-menu__link,
.hdf-blog-menu__item.is-active > .hdf-blog-menu__row .hdf-blog-menu__link {
    color: var(--hdf-blog-accent-hover, var(--hdf-color-primary-hover));
}

.hdf-blog-menu__item:hover .hdf-blog-menu__icon,
.hdf-blog-menu__item:focus-within .hdf-blog-menu__icon,
.hdf-blog-menu__item.is-open .hdf-blog-menu__icon,
.hdf-blog-menu__item.is-active .hdf-blog-menu__icon {
    border-color: color-mix(in srgb, var(--hdf-blog-accent, var(--hdf-color-primary-strong)) 28%, transparent);
    background: var(--hdf-blog-surface-soft, var(--hdf-color-surface-selected));
}

.hdf-blog-menu__item.is-active > .hdf-blog-menu__row .hdf-blog-menu__link::after {
    background: var(--hdf-blog-accent, var(--hdf-color-primary-strong));
}

.hdf-blog-menu__toggle {
    display: inline-grid;
    width: 1.65rem;
    min-width: 1.65rem;
    min-height: var(--hdf-blog-header-row-height, 3rem);
    place-items: center;
    margin-left: -.42rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--hdf-blog-muted, var(--hdf-color-text-muted));
    cursor: pointer;
}

.hdf-blog-menu__toggle .hdf-icon {
    width: .72rem;
    height: .72rem;
    transition: transform 160ms ease;
}

.hdf-blog-menu__item.is-open .hdf-blog-menu__toggle .hdf-icon,
.hdf-blog-menu__item:focus-within .hdf-blog-menu__toggle .hdf-icon {
    transform: rotate(180deg);
}

.hdf-blog-submenu {
    position: absolute;
    z-index: var(--hdf-z-index-dropdown);
    top: calc(100% - 1px);
    left: 0;
    display: grid;
    width: var(--hdf-blog-header-submenu-width, 16.25rem);
    gap: .2rem;
    margin: 0;
    padding: .55rem;
    visibility: hidden;
    border: var(--hdf-border-width-default) solid var(--hdf-blog-border, var(--hdf-color-border));
    border-radius: 0 0 var(--hdf-blog-radius, var(--hdf-radius-lg)) var(--hdf-blog-radius, var(--hdf-radius-lg));
    opacity: 0;
    background: var(--hdf-blog-surface, var(--hdf-color-surface));
    box-shadow: none;
    list-style: none;
    transform: translateY(-.25rem);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.hdf-blog-menu__item:hover > .hdf-blog-submenu,
.hdf-blog-menu__item:focus-within > .hdf-blog-submenu,
.hdf-blog-menu__item.is-open > .hdf-blog-submenu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.hdf-blog-submenu a {
    display: grid;
    min-height: 2.6rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: var(--hdf-radius-md);
    color: var(--hdf-blog-text, var(--hdf-color-text-primary));
    font-size: max(.8rem, calc(var(--hdf-blog-header-item-font-size, .875rem) - 1px));
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}

.hdf-blog-submenu a > span:first-child {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: var(--hdf-radius-md);
    background: var(--hdf-blog-surface-soft, var(--hdf-color-surface-selected));
    color: var(--hdf-blog-accent, var(--hdf-color-primary-strong));
}

.hdf-blog-submenu a .hdf-icon { width: .9rem; height: .9rem; }
.hdf-blog-submenu a > .hdf-icon:last-child { width: .7rem; height: .7rem; color: var(--hdf-blog-muted, var(--hdf-color-text-muted)); }

.hdf-blog-submenu a:hover,
.hdf-blog-submenu a:focus-visible,
.hdf-blog-submenu .is-active > a {
    background: var(--hdf-blog-surface-soft, var(--hdf-color-surface-selected));
    color: var(--hdf-blog-accent-hover, var(--hdf-color-primary-hover));
}

.hdf-blog-header__search {
    position: relative;
    min-width: 0;
}

.hdf-blog-header__search input[type="search"] {
    width: 100%;
    height: 2.6rem;
    padding: 0 3rem 0 .9rem;
    border: var(--hdf-border-width-default) solid var(--hdf-blog-border, var(--hdf-color-border));
    border-radius: var(--hdf-radius-pill);
    background: var(--hdf-blog-surface, var(--hdf-color-surface));
    color: var(--hdf-blog-text, var(--hdf-color-text-primary));
    font-size: var(--hdf-blog-header-item-font-size, .875rem);
}

.hdf-blog-header__search input[type="search"]:focus {
    outline: 2px solid color-mix(in srgb, var(--hdf-blog-accent, var(--hdf-color-primary-strong)) 32%, transparent);
    outline-offset: 1px;
    border-color: var(--hdf-blog-accent, var(--hdf-color-primary-strong));
}

.hdf-blog-header__search button {
    position: absolute;
    top: 50%;
    right: .3rem;
    display: inline-grid;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--hdf-blog-accent, var(--hdf-color-primary-strong));
    color: var(--hdf-color-text-inverse);
    cursor: pointer;
    transform: translateY(-50%);
}

.hdf-blog-header__search button:hover,
.hdf-blog-header__search button:focus-visible {
    background: var(--hdf-blog-accent-hover, var(--hdf-color-primary-hover));
}

.hdf-blog-header__search button .hdf-icon { width: .95rem; height: .95rem; }

.hdf-blog-menu__link:focus-visible,
.hdf-blog-menu__toggle:focus-visible,
.hdf-blog-header__brand:focus-visible,
.hdf-blog-submenu a:focus-visible {
    outline: 2px solid var(--hdf-blog-accent, var(--hdf-color-primary-strong));
    outline-offset: 2px;
}

@media (min-width: 74.0625rem) {
    .hdf-blog-menu { overflow: visible; }
    .hdf-blog-menu__item:nth-last-child(-n + 3) .hdf-blog-submenu { right: 0; left: auto; }
}