/**
 * ============================================================================
 * @file        header-cms-sync.css
 * @version     1.0.0
 * @date        2025-10-16
 * @description Styles du header CMS Swiss-Green adaptés pour PrestaShop 1.6
 * ============================================================================
 * 
 * @source-cms    I:\XAMPP\htdocs\ufk-workspace\projects\cms.swiss-green.ch
 * @source-file   public/assets/css/core.css
 * @source-lines  Lines 1-850 (Header section)
 * 
 * @target-presta I:\XAMPP56\htdocs\Swiss-Green\shop\themes\sg_theme
 * @target-file   css/header-cms-sync.css
 * 
 * @sync-workflow
 *   1. Check differences:  ..\docs\SYNC_HEADER_CMS.ps1 -Mode Check (from sg_theme/)
 *   2. Generate report:    ..\docs\SYNC_HEADER_CMS.ps1 -Mode Report
 *   3. Apply changes:      Manual edit of this file
 *   4. Clear cache:        ..\..\..\..\..\CLEAR_ALL_CACHES.ps1
 *   5. Test:               http://localhost:80/Swiss-Green/shop/
 * 
 * @conversion-formula
 *   PrestaShop base: html { font-size: 62.5%; } → 1rem = 10px
 *   CMS base: html { font-size: 100%; } → 1rem = 16px
 *   Formula: px_value = rem_value × 16
 * 
 * @conversion-examples
 *   CMS Value   →  PrestaShop Value
 *   0.9rem      →  14.4px  (text-secondary)
 *   0.9375rem   →  15px    (nav-link)
 *   1rem        →  16px    (base, padding)
 *   1.25rem     →  20px    (logo text)
 *   1.5rem      →  24px    (gaps)
 *   2rem        →  32px    (large gaps)
 * 
 * @important-usage
 *   All font-size and padding properties use !important to override
 *   PrestaShop's aggressive CSS resets (html { font-size: 62.5%; })
 * 
 * @last-sync     2025-10-16
 * @last-changes  - Initial extraction from inline styles
 *                - Fixed hamburger box-sizing issue
 *                - Aligned HTML structure with CMS
 *                - Added PrestaShop user info links (login/logout/username)
 *                - Refactored header-secondary layout (space-between)
 * ============================================================================
 */

/* ============================================================================
   @section Reset et Base
   @source-cms core.css lines 1-50
   ========================================================================== */

.swiss-green-header,
.swiss-green-header * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.swiss-green-header {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px; /* Base identique au CMS (1rem = 16px) */
    font-weight: 500;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   @section Variables CSS
   @source-cms core.css lines 10-40
   @description Couleurs, espacements, transitions du design system
   ========================================================================== */

:root {
    /* @color-primary Swiss-Green brand colors */
    --primary-color: #58A333;
    --primary-hover: #4a8c2a;
    --primary-light: #e8f5e0;
    --primary-dark: #3d7322;
    
    /* @color-background Background layers */
    --bg-primary: #ffffff;
    --bg-secondary: #f7fafc;
    --bg-tertiary: #f8f9fa;
    
    /* @color-text Text hierarchy (Tailwind gray-600, gray-500, gray-400) */
    --text-primary: #4b5563;
    --text-secondary: #4b5563;
    --text-tertiary: #9ca3af;
    
    /* @color-ui UI elements */
    --border: #e5e7eb;
    --shadow: rgba(0, 0, 0, 0.1);
    
    /* @animation Transitions */
    --transition-speed: 0.2s;
}

/* ============================================================================
   @section Container
   @source-cms core.css lines 100-120
   @map navbar-content → .container (PrestaShop)
   ========================================================================== */

.swiss-green-header .container {
    max-width: 1440px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 16px !important;   /* @cms 1rem */
    padding-right: 16px !important;  /* @cms 1rem */
}

@media (min-width: 640px) {
    .swiss-green-header .container {
        padding-left: 24px !important;   /* @cms 1.5rem */
        padding-right: 24px !important;  /* @cms 1.5rem */
    }
}

@media (min-width: 1024px) {
    .swiss-green-header .container {
        padding-left: 1.6rem !important;   /* Reduced to prevent overflow */
        padding-right: 1.6rem !important;  /* Reduced to prevent overflow */
    }
}

/* ============================================================================
   @section Utilities
   @source-cms core.css lines 50-80
   ========================================================================== */

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

/* ============================================================================
   @section Header Secondary (Shop/Support/Phone bar)
   @source-cms core.css lines 150-200
   @source-html header.php lines 37-50
   ========================================================================== */

.header-secondary {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    padding: 8px 0;  /* @cms 0.5rem 0 */
}

.header-secondary-content {
    display: flex;
    justify-content: right; 
    align-items: center;
    gap: 24px;        /* @cms 1.5rem */
    font-size: 14.4px !important;  /* @cms 0.9rem */
    flex-wrap: wrap;  /* Allow wrapping on very small screens */
}

/* Compense le gap sur le dernier élément pour coller au bord droit */
.header-secondary-content > *:last-child {
    margin-right: -24px;
}

.header-secondary-link {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6.4px;  /* @cms 0.3rem (rounded) */
    transition: color var(--transition-speed) ease;
}

.header-secondary-link:hover {
    color: var(--primary-color);
}

.header-secondary-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ============================================================================
   @section User Info Links (PrestaShop integration)
   @description Login/Logout/Username links displayed in header-secondary
   @added 2025-10-16
   ========================================================================== */

/* Group containers for left/right layout */
.header-user-links,
.header-external-links {
    display: flex;
    align-items: center;
    gap: 24px; /* Space between links within each group */
}

/* User account link (logged in) */
.header-user-account {
    font-weight: 500;
}

.header-user-account:hover {
    color: var(--primary-color);
}

/* Logout link styling */
.header-user-logout {
    /* Inherits .header-secondary-link styles */
}

/* Login link styling (not logged in) */
.header-user-login {
    /* Inherits .header-secondary-link styles */
}

/* Mobile: Reduce gap and truncate long names */
@media (max-width: 768px) {
    .header-user-links,
    .header-external-links {
        gap: 12px; /* Smaller gap on mobile */
    }
    
    .header-user-account span {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Very small screens: Stack vertically if needed */
@media (max-width: 480px) {
    .header-secondary-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .header-user-links,
    .header-external-links {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ============================================================================
   @section Navbar (Main navigation bar)
   @source-cms core.css lines 200-250
   @source-html header.php lines 52-133
   ========================================================================== */

.navbar {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px var(--shadow);
}

.navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 !important;  /* @cms 1rem 0 */
    padding-right: 0 !important;  /* Pas de padding à droite */
}

/* ============================================================================
   @section Logo
   @source-cms core.css lines 260-280
   @dimensions Height: 56px (CMS), Font-size: 1.25rem (20px)
   ========================================================================== */

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;  /* @cms 0.75rem */
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 20px !important;  /* @cms 1.25rem */
    transition: opacity var(--transition-speed) ease;
    flex-shrink: 0;  /* Logo never shrinks */
    margin-right: 80px !important;  /* Gap entre logo et menu */
    margin-left:0px !important;
}

.navbar-brand:hover {
    opacity: 0.8;
}

.navbar-brand img {
    display: block;
    height: 56px;
    width: auto;
}

.site-name {
    font-weight: 600;
    color: var(--text-primary);
    display: none;
}

/* ============================================================================
   @section Menu Principal (Horizontal navigation menu)
   @source-cms core.css lines 300-380
   @source-html header.php lines 80-133
   ========================================================================== */

.navbar-menu {
    display: flex;
    align-items: center;
    gap: 8px;  /* Reduced for compactness */
    flex: 1 1 auto;  /* Allows menu to shrink */
    margin-right: 16px;  /* Gap entre menu et actions */
    min-width: 0;  /* Allows flexbox to shrink below natural size */
}

/* ============================================================================
   @section Nav Links
   @source-cms core.css lines 320-360
   @state default, hover, active
   ========================================================================== */

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px !important;  /* Slightly reduced */
    padding: 8px 20px !important;  /* Compacted */
    border-radius: 8px;  /* @cms var(--radius-md) */
    transition: all var(--transition-speed) ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;  /* @cms 0.25rem */
    position: relative;
    overflow: hidden;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

/* @animation Animated bar on hover */
.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;  /* At the very bottom (CMS) */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;  /* @cms 3px (not 2px) */
    background: var(--primary-color);
    transition: width var(--transition-speed) ease;
}

.nav-link:hover {
    background-color: rgba(243, 244, 246, 0.5);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.nav-link:hover::before {
    width: 80%;
}

/* @state active Current page indicator */
.nav-link.active {
    background-color: var(--primary-light) !important;  /* #e8f5e0 green */
    color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(88, 163, 51, 0.1) !important;  /* Adapted green shadow */
}

.nav-link.active::before {
    width: 100% !important;
}

/* ============================================================================
   @section Dropdowns (Sub-menus)
   @source-cms core.css lines 400-540
   @behavior Hover on desktop, Click on mobile (accordion)
   ========================================================================== */

.nav-dropdown {
    position: relative;
    display: inline-block;
}

/* @ux Buffer zone to prevent accidental menu closing */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -10px;
    right: -10px;
    height: 10px;
    z-index: 999;
    pointer-events: none;
}

.nav-dropdown.active::before {
    pointer-events: auto;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;  /* @cms 0.25rem */
    position: relative;
}

.nav-dropdown-toggle:hover {
    text-decoration: none;
}

.nav-dropdown-arrow {
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.nav-dropdown.active .nav-dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;  /* @cms var(--radius-lg) */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all var(--transition-speed) ease;
    z-index: 1001 !important;
    padding: 8px 0 !important;  /* @cms 0.5rem 0 */
}

/* @state active Visible dropdown */
.nav-dropdown.active .nav-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;  /* @cms 0.75rem */
    padding: 10px 16px !important;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14.4px !important;  /* @cms 0.9rem */
    font-weight: 450;
    transition: all var(--transition-speed) ease;
    white-space: nowrap;
    position: relative;
}

.nav-dropdown-item:hover {
    background: var(--bg-secondary);
    color: var(--primary-color);
}

/* @state active Current page in dropdown */
.nav-dropdown-item.active {
    background: var(--primary-light) !important;  /* #e8f5e0 */
    color: var(--primary-color) !important;
    font-weight: 600 !important;
}

.nav-dropdown-item.active::before {
    width: 100% !important;
    background: var(--primary-color) !important;
}

/* @animation Selection bar on hover */
.nav-dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--primary-color);
    transition: height var(--transition-speed) ease;
    border-radius: 0 2px 2px 0;
}

.nav-dropdown-item:hover::before {
    height: 60%;
}

.nav-dropdown-item svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    transition: opacity var(--transition-speed) ease;
}

.nav-dropdown-item:hover svg {
    opacity: 1;
}

/* ============================================================================
   @section Navbar Actions (Language + Theme)
   @source-cms core.css lines 550-650
   ========================================================================== */

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;  /* Reduced */
    flex-shrink: 0;  /* Actions never shrink */
}

.navbar-actions-mobile {
    display: none;
}

/* ============================================================================
   @section Mobile Hamburger Button
   @source-cms core.css lines 545-582
   @fix Added box-sizing: border-box to ensure 40x40px exact dimensions
   ========================================================================== */

.swiss-green-header .navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    box-sizing: border-box;  /* @fix Padding INCLUDED in width/height */
}

.swiss-green-header .navbar-toggle:hover {
    background-color: var(--bg-tertiary);
}

.swiss-green-header .navbar-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 10px;
    transition: all var(--transition-speed);
}

/* @animation X animation when active */
.swiss-green-header .navbar-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.swiss-green-header .navbar-toggle.active span:nth-child(2) {
    opacity: 0;
}

.swiss-green-header .navbar-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* ============================================================================
   @section Mobile Overlay
   @source-cms core.css lines 600-620
   ========================================================================== */

.navbar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}

.navbar-overlay.active {
    display: block;
    opacity: 1;
}

/* ============================================================================
   @section Language Selector
   @source-cms core.css lines 630-680
   ========================================================================== */

.language-selector {
    position: relative;
}

.language-toggle {
    display: flex;
    align-items: center;
    gap: 4px;  /* Reduced */
    background: none;
    border: 1px solid var(--border);
    border-radius: 12px;  /* @cms 0.375rem */
    padding: 6px 14px;  /* Reduced for compactness */
    cursor: pointer;
    color: var(--text-primary);
    transition: border-color var(--transition-speed) ease, background var(--transition-speed) ease;
    flex-shrink: 0;  /* Language button never shrinks */
}

.language-toggle:hover {
    border-color: var(--primary-color);
    background: var(--bg-secondary);
}

.language-code {
    font-weight: 600;
    font-size: 14.4px !important;  /* @cms 0.9rem */
}

.language-arrow {
    transition: transform var(--transition-speed) ease;
}

.language-toggle[aria-expanded="true"] .language-arrow {
    transform: rotate(180deg);
}

.language-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);  /* @cms 0.5rem */
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;  /* @cms 0.375rem */
    box-shadow: 0 4px 6px var(--shadow);
    min-width: 150px;
    z-index: 1001;
}

.language-dropdown.active {
    display: block;
}

.language-item {
    display: block;
    padding: 12px 16px;  /* @cms 0.75rem 1rem */
    color: var(--text-primary);
    text-decoration: none;
    transition: background var(--transition-speed) ease, color var(--transition-speed) ease;
}

.language-item:hover {
    background: var(--bg-secondary);
    color: var(--primary-color);
}

.language-item.active {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
}

/* ============================================================================
   @section Theme Toggle (Hidden in PrestaShop)
   @note Not used in PrestaShop version
   ========================================================================== */

.theme-toggle {
    display: none !important;
}

/* ============================================================================
   @section Responsive - Tablet & Medium Screens
   @source-cms core.css lines 700-750
   @breakpoint max-width: 1200px
   ========================================================================== */

@media (max-width: 1200px) {
    .navbar-menu {
        gap: 4px;  /* Further reduce to prevent overflow */
        margin-left: 8px;
    }
    
    .nav-link {
        padding: 8px 10px !important;
        font-size: 14px !important;
    }
}

/* ============================================================================
   @section Responsive - Mobile
   @source-cms core.css lines 585-850
   @breakpoint max-width: 768px
   @behavior Sidebar menu, accordion dropdowns
   ========================================================================== */

@media (max-width: 768px) {
    .header-secondary-content {
        gap: 16px;  /* @cms 1rem */
        font-size: 13.6px;  /* @cms 0.85rem */
    }
    
    .header-secondary-link span {
        display: none;
    }
    
    .header-secondary-icon {
        width: 20px;
        height: 20px;
    }
    
    .swiss-green-header .navbar-toggle {
        display: flex !important;
    }
    
    /* @component Mobile Sidebar Menu */
    .navbar-menu {
        position: fixed;
        top: 72px;  /* @cms Below header (header-secondary + navbar) */
        right: -100%;
        width: 280px;
        height: calc(100vh - 72px);
        background: var(--bg-primary);
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;  /* @cms 0.5rem */
        margin: 0;
        padding: 16px;  /* @cms 1rem */
        box-shadow: -2px 0 8px var(--shadow);
        transition: right 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
    }
    
    .navbar-menu.active {
        right: 0;
    }
    
    .nav-link {
        width: 100%;
        padding: 16px 8px;  /* @cms 1rem 0.5rem */
        margin: 0 !important;
    }
    
    /* @component Mobile Actions (Languages + Theme inside sidebar) */
    .navbar-actions-mobile {
        display: block;
        width: 100%;
        margin-top: 16px;  /* @cms 1rem */
        padding-top: 16px;  /* @cms 1rem */
        border-top: 1px solid var(--border);
    }
    
    .mobile-actions-row {
        display: flex;
        gap: 16px;  /* @cms 1rem */
        flex-wrap: wrap;
    }
    
    .navbar-actions {
        display: none;
    }
    
    body.menu-open {
        overflow: hidden;
    }
    
    /* @component Language Dropdown in Mobile */
    .language-dropdown {
        position: static;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--border);
        margin-top: 8px;  /* @cms 0.5rem */
    }
    
    /* @component Accordion Dropdowns in Mobile */
    .nav-dropdown {
        width: 100%;
        margin: 0 !important;
    }
    
    .nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        text-align: left;
        padding: 16px 8px !important;  /* @cms 1rem 0.5rem */
        outline: none !important;
        border: none !important;
    }
    
    .nav-dropdown-toggle:focus {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* @state active Dropdown toggle active state (gray background like CMS) */
    .nav-dropdown.active .nav-dropdown-toggle {
        background: var(--bg-secondary) !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    /* @animation :active feedback (temporary green flash like CMS) */
    .nav-dropdown-toggle:active {
        background: var(--primary-light) !important;
        transition: background 0.1s ease !important;
    }
    
    .nav-dropdown-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease !important;
        background: var(--bg-secondary) !important;
        margin-left: 16px !important;  /* @cms 1rem indentation */
    }
    
    .nav-dropdown.active .nav-dropdown-menu {
        max-height: 300px !important;
        padding: 8px 0 !important;  /* @cms 0.5rem 0 */
    }
    
    .nav-dropdown-item {
        padding: 10px 16px !important;  /* @cms 0.625rem 1rem */
        font-size: 14px !important;     /* @cms 0.875rem */
        width: 100% !important;
        text-align: left !important;
    }
    
    .nav-dropdown-item::before {
        display: none !important;  /* No side bar on mobile sub-items */
    }
}

/* ============================================================================
   @section Responsive - Tablet Only
   @source-cms core.css lines 750-850
   @breakpoint min-width: 769px AND max-width: 1024px
   @note Specific to tablet, not mobile
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    .navbar-menu {
        gap: 24px;  /* @cms 1.5rem */
        margin-left: 16px;  /* @cms 1rem */
    }
    
    .nav-link {
        font-size: 14.4px !important;  /* @cms 0.9rem */
    }
}