.herbie-header { --herbie-header-offset: 0px; position: sticky; top: var(--herbie-header-offset); z-index: 999; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--herbie-border); min-height: 72px; display: flex; align-items: center; }
.herbie-header-inner { display: flex; min-width: 0; gap: 24px; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.herbie-logo { display: inline-flex; min-width: 0; flex-shrink: 0; white-space: nowrap; align-items: center; gap: 10px; text-decoration: none; font-size: 1.25rem; font-weight: 700; color: var(--herbie-text-main); }
.herbie-logo-mark { display: flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #eef2ff; }
.herbie-logo-text strong { color: var(--herbie-primary); }
.herbie-nav { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 20px; margin-left: auto; }
.herbie-menu { display: flex; flex-wrap: wrap; align-items: center; list-style: none; gap: 4px clamp(12px,1.7vw,24px); margin: 0; padding: 0; }
.herbie-menu-link { display: flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: 0.875rem; font-weight: 500; color: #334155; transition: color 0.15s ease; }
.herbie-menu-link:hover { color: var(--herbie-primary); }
.herbie-header-actions { display: none; flex: 0 0 auto; align-items: center; }
.herbie-header-dashboard { flex: 0 0 auto; }
.herbie-btn-dash { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: 6px; padding: 8px 18px; white-space: nowrap; background: #111827; color: #ffffff; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background 0.15s ease; }
.herbie-btn-dash:hover { background: #1f2937; }
.herbie-menu-toggle { display: none; flex: 0 0 44px; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px; }
.herbie-menu-toggle span { display: block; width: 22px; height: 2px; background: #111827; }
.herbie-header :is(a,button):focus-visible { outline: 3px solid var(--herbie-primary); outline-offset: 3px; }
.admin-bar .herbie-header { --herbie-header-offset: 32px; }
@media (min-width: 768px) and (max-width: 1023px) { .herbie-header { height: auto; min-height: 72px; } }
@media (min-width: 768px) and (max-width: 1023px) { .herbie-header-inner { flex-wrap: wrap; row-gap: 4px; padding-top: 8px; padding-bottom: 8px; } }
@media (min-width: 768px) and (max-width: 1023px) { .herbie-nav { flex: 1 1 100%; justify-content: space-between; gap: 12px; } }
@media (min-width: 768px) and (max-width: 1023px) { .herbie-menu { gap: 4px 12px; } }
@media (min-width: 768px) and (max-width: 1023px) { .herbie-menu-link { font-size: 0.8125rem; } }
@media (max-width: 767px) { .herbie-header-inner { gap: 12px; padding-left: 16px; padding-right: 16px; } }
@media (max-width: 767px) { .herbie-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; margin: 0; padding: 16px 20px 24px; background: #ffffff; border-bottom: 1px solid var(--herbie-border); box-shadow: 0 14px 24px rgba(15,23,42,.08); max-height: calc(100vh - 72px - var(--herbie-header-offset)); max-height: calc(100dvh - 72px - var(--herbie-header-offset)); overflow-y: auto; overscroll-behavior: contain; } }
@media (max-width: 767px) { .herbie-nav.is-open { display: block; } }
@media (max-width: 767px) { .herbie-menu { flex-direction: column; align-items: stretch; gap: 0; } }
@media (max-width: 767px) { .herbie-menu-link { padding: 11px 0; } }
@media (max-width: 767px) { .herbie-header-actions, .herbie-menu-toggle { display: flex; } }
@media (max-width: 767px) { .herbie-header-dashboard { padding-top: 18px; margin-top: 12px; border-top: 1px solid var(--herbie-border); } }
@media (max-width: 767px) { .herbie-header-dashboard .herbie-btn-dash { display: flex; width: 100%; padding: 12px 20px; border-radius: 12px; white-space: normal; overflow-wrap: anywhere; } }
@media (max-width: 767px) { .herbie-logo { max-width: calc(100% - 56px); gap: 8px; font-size: clamp(0.875rem,3.8vw,1.125rem); } }
@media (max-width: 767px) { .herbie-logo-mark { width: 32px; height: 32px; flex-basis: 32px; } }
@media (max-width: 782px) { .admin-bar .herbie-header { --herbie-header-offset: 46px; } }
@media (max-width: 600px) { .admin-bar .herbie-header { --herbie-header-offset: 0px; } }