/* Hide header by default, show only on mobile/tablet (< 1024px) */
#common-header {
    display: none !important;
}
@media (max-width: 1023px) {
    #common-header {
        display: block !important;
    }
}

/* CSS Variable for header height - single source of truth */
:root {
    --header-height: 68px; /* Base height */
}
@media (min-width: 640px) {
    :root {
        --header-height: 92px; /* Reduced height without search bar */
    }
}

/* Apply header height variable to main content - only when header is visible (up to lg breakpoint) */
@media (max-width: 1023px) {
    #main-content {
        padding-top: var(--header-height) !important;
    }
}


/* Responsive padding for header wrapper - exact Tailwind equivalents */
/* sm:pt-6 = padding-top: 1.5rem at min-width: 640px */
@media (min-width: 640px) {
    #header-wrapper {
        padding-top: 1.5rem;
    }
}
/* md:px-6 = padding-left/right: 1.5rem at min-width: 768px */
@media (min-width: 768px) {
    #header-wrapper {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    /* md:gap-4 */
    #header-inner {
        gap: 1rem;
    }
    /* md:space-x-3 equivalent */
    #header-logo {
        gap: 0.75rem;
    }
    /* md:text-lg */
    #logo-title {
        font-size: 1.125rem;
    }
    /* md:text-sm - increase font size on larger screens */
    #logo-subtitle {
        font-size: 0.75rem;
    }
    /* md:ml-1 */
    #logo-subtitle-sep {
        margin-left: 0.25rem;
    }
}