/* ========================================================================
   HEALTHTECH HEADER - CONSOLIDATED FINAL CSS
   Mobile-First Responsive Design with Bilingual Support
   ======================================================================== */

/* ========================================================================
   1. BASE/RESET STYLES
   ======================================================================== */

.htc-header * {
    box-sizing: border-box;
}

.htc-header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    min-height: 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.htc-header .htc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.htc-header__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 0.5rem 0;
    position: relative;
    /* Allow children to shrink without causing horizontal overflow */
    min-width: 0;
}

/* Body scroll prevention when mobile menu is open */
body.htc-no-scroll,
body.htc-scroll-lock { /* htc-scroll-lock kept for backward compatibility */
    overflow: hidden;
    width: 100%;
    /* Position fixed removed to avoid scroll jump; JS now only applies overflow hidden + optional padding-right for scrollbar compensation */
}

/* ========================================================================
   2. LOGO SECTION
   ======================================================================== */

.htc-header__logo {
    flex-shrink: 0;
    z-index: 1001;
}

.htc-header__logo-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.htc-header__logo-image {
    height: 40px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    transition: opacity 0.2s ease-in-out;
}

.htc-header__logo-link:hover .htc-header__logo-image {
    opacity: 0.8;
}

/* ========================================================================
   3. NAVIGATION - MOBILE FIRST (DEFAULT < 768px)
   ======================================================================== */

/* Desktop Navigation - HIDDEN on Mobile */
.htc-header__nav,
.htc-header__nav[data-htc-lang="ro"],
.htc-header__nav[data-htc-lang="en"] {
    display: none;
}

/* Mobile Navigation Panel */
.htc-header__mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    transition: right 0.3s ease-in-out;
    z-index: 1003;
    padding-top: 60px;
}

/* Mobile Navigation List */
.htc-header__mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.htc-header__mobile-nav-list[data-htc-lang] {
    display: none;
}

.htc-header__mobile-nav-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.htc-header__mobile-nav-link {
    display: block;
    padding: 1rem 1.5rem;
    color: #2c3e50;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out;
}

.htc-header__mobile-nav-link:hover,
.htc-header__mobile-nav-link:focus {
    background-color: #f8f9fa;
    color: #007cba;
}

/* ========================================================================
   4. LANGUAGE SWITCHER
   ======================================================================== */

/* Desktop Language Switcher */
.htc-header__language-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 60px; /* Space for hamburger menu */
}

.htc-header__language-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #2c3e50;
    font-size: 14px;
    font-weight: 500;
    min-height: 36px;
}

.htc-header__language-button:hover {
    background-color: #f0f8ff;
    border-color: #007cba;
    transform: translateY(-1px);
}

.htc-header__language-button--active,
.htc-header__language-button.htc-header__language-button--active {
    background-color: #007cba;
    border-color: #007cba;
    color: #ffffff;
}

.htc-header__flag-icon {
    width: 24px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.htc-header__language-text {
    display: none; /* Hidden on mobile */
    font-size: 14px;
}

/* Mobile Language Switcher */
.htc-header__mobile-language-switcher {
    display: flex;
    gap: 8px;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    justify-content: center;
}

.htc-header__mobile-language-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #2c3e50;
    font-size: 14px;
}

.htc-header__mobile-language-button:hover {
    border-color: #007cba;
    background: #f0f8ff;
}

.htc-header__mobile-language-button--active {
    border-color: #007cba;
    background: #007cba;
    color: white;
}

.htc-header__mobile-flag-icon {
    width: 24px;
    height: 16px;
    display: block;
}

.htc-header__mobile-language-text {
    font-size: 14px;
}

/* ========================================================================
   5. MOBILE MENU (HAMBURGER)
   ======================================================================== */

/* Mobile Toggle Button */
.htc-header__mobile-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 36px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    z-index: 1004;
}

.htc-header__mobile-toggle-bar {
    width: 22px;
    height: 2px;
    background-color: #2c3e50;
    margin: 3px 0;
    transition: transform 0.25s ease, opacity 0.2s ease, width 0.2s ease;
    border-radius: 2px;
}

.htc-header__mobile-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile Overlay */
.htc-header__mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1002;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* ========================================================================
   6. MENU OPEN STATES & ANIMATIONS
   ======================================================================== */

/* When mobile menu is open */
.htc-header--menu-open .htc-header__mobile-nav {
    display: block;
    right: 0;
}

.htc-header--menu-open .htc-header__mobile-overlay {
    display: block;
    opacity: 1;
}

/* Hamburger to X animation */
.htc-header--menu-open .htc-header__mobile-toggle-bar--top {
    transform: rotate(45deg) translate(5px, 5px);
}

.htc-header--menu-open .htc-header__mobile-toggle-bar--middle {
    opacity: 0;
}

.htc-header--menu-open .htc-header__mobile-toggle-bar--bottom {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ========================================================================
   7. BILINGUAL NAVIGATION STATES
   ======================================================================== */

/* Language-specific navigation visibility */
.htc-header__nav[data-htc-lang="ro"],
.htc-header__nav[data-htc-lang="en"] {
    display: none;
}

.htc-header__nav[data-htc-lang="ro"].htc-header__nav--active,
.htc-header__nav[data-htc-lang="en"].htc-header__nav--active {
    display: flex !important;
}

/* Default: Show Romanian navigation if no language is set */
body:not([data-htc-current-lang]) .htc-header__nav[data-htc-lang="ro"] {
    display: none; /* Will be overridden by media queries on desktop */
}

/* Mobile language-specific lists */
.htc-header__mobile-nav-list[data-htc-lang="ro"],
.htc-header__mobile-nav-list[data-htc-lang="en"] {
    display: none;
}

.htc-header__mobile-nav-list[data-htc-lang="ro"].htc-mobile-nav-list--active,
.htc-header__mobile-nav-list[data-htc-lang="en"].htc-mobile-nav-list--active {
    display: block !important;
}

/* Default: Show Romanian mobile nav if no language is set */
body:not([data-htc-current-lang]) .htc-header__mobile-nav-list[data-htc-lang="ro"] {
    display: block;
}

/* Default language visibility */
body[data-htc-current-lang="ro"] .htc-header__nav[data-htc-lang="ro"],
body[data-htc-current-lang="en"] .htc-header__nav[data-htc-lang="en"] {
    display: none; /* Will be overridden by media queries */
}

body[data-htc-current-lang="ro"] .htc-header__nav[data-htc-lang="en"],
body[data-htc-current-lang="en"] .htc-header__nav[data-htc-lang="ro"] {
    display: none !important;
}

body[data-htc-current-lang="ro"] .htc-header__mobile-nav-list[data-htc-lang="ro"],
body[data-htc-current-lang="en"] .htc-header__mobile-nav-list[data-htc-lang="en"] {
    display: block;
}

body[data-htc-current-lang="ro"] .htc-header__mobile-nav-list[data-htc-lang="en"],
body[data-htc-current-lang="en"] .htc-header__mobile-nav-list[data-htc-lang="ro"] {
    display: none !important;
}

/* ========================================================================
   8. RESPONSIVE BREAKPOINTS
   ======================================================================== */

/* Tablet (576px - 1023.98px) */
@media (min-width: 576px) and (max-width: 1023.98px) {
    .htc-header {
        min-height: 70px;
    }
    
    .htc-header__content {
        min-height: 70px;
    }
    
    .htc-header__logo-image {
        height: 50px;
        max-width: 150px;
    }
    
    /* Show language text on tablet */
    .htc-header__language-text {
        display: inline;
    }
    
    /* Better spacing for language switcher */
    .htc-header__language-switcher {
        margin-right: 60px;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    /* Prevent content overflow at narrower desktop widths (1024–1319px) */
    .htc-header__language-switcher { flex: 0 0 auto; }
    .htc-header__nav { flex: 1 1 auto; min-width: 0; }
    /* Keep items in a single row on desktop and distribute them nicely */
    .htc-header__nav-list { flex-wrap: nowrap; justify-content: space-between; }
    .htc-header {
        min-height: 80px;
    }
    
    .htc-header__content {
        min-height: 80px;
    }
    
    .htc-header__logo-image {
        height: 60px;
        max-width: 180px;
    }
    
    /* Show desktop navigation (robust fallbacks) */
    .htc-header__nav[data-htc-lang="ro"].htc-header__nav--active,
    .htc-header__nav[data-htc-lang="en"].htc-header__nav--active,
    body[data-htc-current-lang="ro"] .htc-header__nav[data-htc-lang="ro"],
    body[data-htc-current-lang="en"] .htc-header__nav[data-htc-lang="en"],
    body:not([data-htc-current-lang]) .htc-header__nav[data-htc-lang="ro"],
    /* Fallback to html[lang] when JS/body attr not present */
    html[lang^="ro"] .htc-header__nav[data-htc-lang="ro"],
    html[lang|="ro"] .htc-header__nav[data-htc-lang="ro"],
    html[lang^="en"] .htc-header__nav[data-htc-lang="en"],
    html[lang|="en"] .htc-header__nav[data-htc-lang="en"] {
        display: flex !important;
        align-items: center;
        margin-left: auto;
        margin-right: 20px;
    }
    
    /* Hide inactive language navigation */
    body[data-htc-current-lang="ro"] .htc-header__nav[data-htc-lang="en"],
    body[data-htc-current-lang="en"] .htc-header__nav[data-htc-lang="ro"],
    body:not([data-htc-current-lang]) .htc-header__nav[data-htc-lang="en"] {
        display: none !important;
    }
    
    .htc-header__nav-list {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        /* Slight default gap; main spacing comes from space-between */
        gap: 0.5rem;
        width: 100%;
    }
    
    .htc-header__nav-item {
        position: relative;
    }
    
    .htc-header__nav-link {
        display: inline-block;
        padding: 0.5rem 1rem;
        color: #2c3e50;
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 500;
        transition: color 0.2s ease-in-out;
        position: relative;
    }
    
    .htc-header__nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background-color: #007cba;
        transition: width 0.3s ease-in-out;
    }
    
    .htc-header__nav-link:hover {
        color: #007cba;
    }
    
    .htc-header__nav-link:hover::after {
        width: 80%;
    }
    
    /* Hide mobile menu on desktop */
    .htc-header__mobile-toggle {
        display: none !important;
    }
    
    .htc-header__mobile-nav {
        display: none !important;
    }
    
    .htc-header__mobile-overlay {
        display: none !important;
    }
    
    /* Adjust language switcher position */
    .htc-header__language-switcher {
        margin-left: 20px;
        margin-right: 0;
    }
}

/* Note: Large-desktop-only rules removed to keep 3 viewports */

/* ========================================================================
   9. WORDPRESS/BRICKS COMPATIBILITY
   ======================================================================== */

/* Ensure hamburger shows on tablet/mobile regardless of other theme CSS */
@media (max-width: 1023.98px) {
    .htc-header__mobile-toggle {
        display: inline-flex !important;
    }
    /* Keep mobile panel hidden until opened */
    .htc-header__mobile-nav {
        display: none;
    }
    .htc-header--menu-open .htc-header__mobile-nav {
        display: block;
    }
    /* Force-hide desktop navs on mobile/tablet even if inline styles set */
    .htc-header__nav[data-htc-lang] {
        display: none !important;
    }
    .htc-header__nav-list {
        display: none !important;
    }
    /* Move flags into hamburger: hide desktop switcher */
    .htc-header__language-switcher {
        display: none !important;
    }
}

/* Bricks Builder specific fixes */
.brx-body .htc-header {
    position: sticky;
    top: var(--bricks-header-height, 0);
}

.admin-bar .htc-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .htc-header {
        top: 46px;
    }
}

/* ========================================================================
   10. ACCESSIBILITY & UTILITIES
   ======================================================================== */

/* Focus states for keyboard navigation */
.htc-header__nav-link:focus,
.htc-header__mobile-nav-link:focus,
.htc-header__language-button:focus,
.htc-header__mobile-language-button:focus,
.htc-header__mobile-toggle:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Screen reader only text */
.htc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .htc-header * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .htc-header {
        border-bottom: 2px solid currentColor;
    }
    
    .htc-header__nav-link,
    .htc-header__mobile-nav-link {
        text-decoration: underline;
    }
}

/* Print styles */
@media print {
    .htc-header {
        position: static;
        box-shadow: none;
        border-bottom: 1px solid #000;
    }
    
    .htc-header__mobile-toggle,
    .htc-header__language-switcher,
    .htc-header__mobile-language-switcher {
        display: none !important;
    }
}

/* Debug utility (remove in production) */
.htc-header--debug * {
    outline: 1px solid red !important;
}

/* ========================================================================
   11. PAGE TRANSITION OVERLAY (Language switch)
   ======================================================================== */

.htc-page-transition { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; }
.htc-page-transition.is-active { display: flex; }
.htc-page-transition { pointer-events: none; opacity: 0; transition: opacity 220ms ease; }
.htc-page-transition.is-active { pointer-events: auto; opacity: 1; }

.htc-page-transition__backdrop {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.98) 100%);
    backdrop-filter: blur(4px);
}

.htc-page-transition__content { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,0.8); box-shadow: 0 10px 30px rgba(0,0,0,0.08); transform: translateY(10px); opacity: 0; transition: transform 260ms ease, opacity 260ms ease; }

.htc-page-transition.is-active .htc-page-transition__content {
    transform: translateY(0);
    opacity: 1;
}

.htc-page-transition__spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #007cba;
    border-top-color: transparent;
    animation: htc-spin 0.8s linear infinite;
}

.htc-page-transition__label {
    color: #2c3e50;
    font-size: 14px;
    font-weight: 600;
}

@keyframes htc-spin {
    to { transform: rotate(360deg); }
}

/* Disable animations for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    .htc-page-transition,
    .htc-page-transition__content {
        transition: none !important;
    }
    .htc-page-transition__spinner {
        animation: none !important;
        border-right-color: #007cba;
    }
}

/* Body lock while transition is active to avoid flash and scrolling */
body.htc-page-transition--active {
    overflow: hidden;
}