/* Shared site header — full brand title; compact nav/icons when space is tight */
header.sticky {
    overflow: visible;
}
#header-brand-lockup {
    flex-shrink: 0;
}
#header-brand-title,
.header-brand-title {
    white-space: nowrap;
}
#header-desktop-nav {
    flex-shrink: 1;
    min-width: 0;
}
#header-action-icons {
    flex-shrink: 1;
    min-width: 0;
}
.header-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    position: relative;
}

/* Hover/focus tooltip from aria-label (icon-only buttons). Shown below so it
   stays inside the viewport under the sticky header. */
.header-icon-btn[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 50%;
    z-index: 20;
    padding: 0.28rem 0.55rem;
    border-radius: 0.5rem;
    background: var(--ink, #3d2a1f);
    color: var(--flour, #fffbf5);
    font-family: var(--font-label, "Nunito", system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 2px 0 var(--dough, #f5d9c4);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0.15s ease-out;
}

.header-icon-btn[aria-label]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    .header-icon-btn[aria-label]:hover::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

/* Keep the rightmost label (About) from overflowing the viewport. */
#header-action-icons .header-icon-btn:last-child[aria-label]::after {
    left: auto;
    right: 0;
    transform: translateY(-2px);
}

#header-action-icons .header-icon-btn:last-child[aria-label]:focus-visible::after {
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    #header-action-icons .header-icon-btn:last-child[aria-label]:hover::after {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-icon-btn[aria-label]::after {
        transition: none;
    }
}
@media (max-width: 767px) {
    #header-action-icons {
        gap: 0.25rem;
    }
    .header-icon-btn {
        width: 2rem;
        height: 2rem;
        border-width: 1px;
    }
    .header-icon-btn i {
        font-size: 0.8rem;
    }
    #header-mobile-subnav {
        gap: 0.75rem;
    }
    #header-mobile-subnav a {
        font-size: 0.65rem;
        letter-spacing: 0.04em;
    }
}
@media (max-width: 399px) {
    #header-brand-lockup img {
        width: 2.25rem;
        height: 2.25rem;
    }
    .header-icon-btn {
        width: 1.75rem;
        height: 1.75rem;
    }
    .header-icon-btn i {
        font-size: 0.7rem;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    #header-desktop-nav {
        gap: 0.5rem;
    }
    #header-desktop-nav .hearth-nav-link {
        font-size: 12px;
        letter-spacing: 0.01em;
    }
}