/*
Theme Name: Laurent Rochetta
Theme URI: https://rochetta.fr
Author: Laurent Rochetta
Author URI: https://oveanet.fr
Description: A Luxury Tech theme for High-End Consulting & AI Strategy.
Version: 1.0.5
*/

:root {
    --color-bg: #050510;
    --color-bg-alt: #0a0a1f;
    --color-text: #ffffff;
    --color-text-muted: #a0a0b0;
    --color-accent-blue: #00f0ff;
    --color-accent-neon: #00f0ff;
    --color-accent-gold: #d4af37;
    --gradient-glow: linear-gradient(135deg, #00f0ff 0%, #0077ff 100%);
    --gradient-text: linear-gradient(90deg, #ffffff 0%, #a0a0b0 100%);
}

/* Base Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Manrope', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-text);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header */
.site-header {
    padding: 1.5rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(5, 5, 16, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container img {
    height: 60px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.custom-logo-link img {
    height: 60px;
    width: auto;
    max-width: 200px;
}

.header-cta {
    background: transparent;
    border: 1px solid var(--color-accent-neon);
    color: var(--color-accent-neon);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.3s ease;
}

.header-cta:hover {
    background: var(--color-accent-neon);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

/* MAIN NAVIGATION - ULTIMATE FIX */
.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.main-navigation>ul>li {
    position: relative;
    padding: 1rem 0;
}

.main-navigation a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.main-navigation a:hover {
    color: var(--color-accent-neon);
}

/* Level 1 Submenu */
.main-navigation ul .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(5, 5, 16, 0.98);
    min-width: 260px;
    padding: 1rem 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    z-index: 1001;
    backdrop-filter: blur(20px);
}

.main-navigation ul li:hover>.sub-menu {
    display: block;
}

.main-navigation ul .sub-menu li {
    display: block;
    position: relative;
    /* Essential for nested positioning */
}

.main-navigation ul .sub-menu a {
    display: block;
    padding: 0.8rem 1.5rem;
    text-transform: none;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.main-navigation ul .sub-menu a:hover {
    color: var(--color-accent-neon);
    background: rgba(255, 255, 255, 0.03);
    padding-left: 1.8rem;
    /* Slide effect */
}

/* Level 2 Submenus (Nested) - The Fix */
.main-navigation ul ul ul {
    left: 100%;
    /* Move completely to the right */
    top: -10px;
    /* Slight offset up */
    margin-left: 5px;
    /* Gap */
    border-left: 2px solid var(--color-accent-neon);
    /* Visual separator */
}

/* Hover Bridge for Level 2 */
.main-navigation ul ul ul::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 0;
    width: 20px;
    /* Bridge the gap */
    height: 100%;
    background: transparent;
}

/* Indicators */
.menu-item-has-children>a::after {
    content: " ›";
    float: right;
    font-size: 1.2em;
    line-height: 1;
    margin-left: 10px;
    color: var(--color-accent-blue);
}

.main-navigation>ul>.menu-item-has-children>a::after {
    content: " ▾";
    float: none;
    vertical-align: middle;
    font-size: 0.8em;
}

/* Footer Fixes */
.site-footer {
    padding: 4rem 0;
    background: #020205;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.site-footer ul,
.site-footer li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.footer-navigation ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem !important;
}

.footer-navigation a {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
}

.footer-navigation a:hover {
    color: var(--color-accent-neon);
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 100px;
    background: url('assets/images/hero_bg.jpg') no-repeat center center/cover;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(5, 5, 16, 0.95) 0%, rgba(5, 5, 16, 0.7) 50%, rgba(5, 5, 16, 0.95) 100%);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 50%;
}

/* Luxury Card Grid (Archive) */
.luxury-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 3rem;
}

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Carousel Scrollbar */
.carousel-container::-webkit-scrollbar {
    height: 4px;
}

.carousel-container::-webkit-scrollbar-thumb {
    background: var(--color-accent-blue);
}

/* FORCE HERO CENTER without Image */
.hero-content {
    width: 100% !important;
    text-align: center !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* Fix Article Title Color (Blue issue) */
.post-content h3 {
    color: white !important;
    /* Force white title */
}

.luxury-card .entry-title a {
    color: white !important;
}

/* Footer Fix ROCHETTA.FR */
.site-footer p {
    text-transform: uppercase;
    letter-spacing: 2px;
}




/* HEADER RE-LAYOUT: CONTACT BUTTON RIGHT */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Move Nav to Center/Left */
.main-navigation {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    /* or flex-end to push near button */
    padding: 0 2rem;
}

/* Header Buttons container */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Ensure Sign-in is visible */
.sign-in-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7rem;
    color: var(--color-accent-gold);
    text-transform: uppercase;
}

/* Move Contact Button to right of Sign-in logic */
/* Logic: Logo | Menu | Sign-in + Contact */


/* FORCE HEADER LAYOUT UPDATE */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-navigation {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-cta {
    order: 2;
    /* Ensure Right */
}

/* ELEVATE SECTION: Full Screen & Face Visible */
.luxury-lifestyle-section {
    min-height: 100vh;
    background-size: cover;
    background-position: center top;
    /* Focus on face usually at top */
    background-attachment: fixed;
    /* Parallax effect for grandeur */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.luxury-lifestyle-section h2,
.luxury-lifestyle-section p {
    background: rgba(0, 0, 0, 0.4);
    /* Better readability over image */
    padding: 10px 20px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

/* EXPERTISE SECTION: REVEAL ON SCROLL */
.services-section {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.services-section.visible {
    opacity: 1;
    transform: translateY(0);
}


/* --- PREMIUM HEADER REDESIGN (OVERRIDE) --- */
.site-header {
    background: rgba(5, 5, 16, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.navbar {
    display: grid !important;
    grid-template-columns: 250px 1fr 250px !important;
    /* Fixed Logo | Fluid Menu | Fixed Actions */
    align-items: center !important;
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

.logo-container {
    display: flex !important;
    justify-content: flex-start !important;
}

.logo-container img,
.custom-logo-link img {
    height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
}

.main-navigation {
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
}

.main-navigation ul {
    gap: 3rem !important;
    /* Wide spacing */
    margin: 0 !important;
}

.main-navigation a {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    padding: 20px 0 !important;
    opacity: 0.8;
}

.main-navigation a:hover {
    opacity: 1;
    color: var(--color-accent-neon) !important;
}

.header-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 20px !important;
}

/* New Button Style */
.header-cta {
    background: white !important;
    color: black !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    /* Square tech look */
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.1) !important;
}

.header-cta:hover {
    background: var(--color-accent-neon) !important;
    box-shadow: 0 5px 30px rgba(0, 240, 255, 0.3) !important;
    transform: translateY(-2px);
}

/* HERO UI FIX */
.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    margin-bottom: 2rem !important;
}

.hero-desc {
    font-size: 1.3rem !important;
    font-weight: 300 !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #e2e8f0 !important;
}

/* Adjust gradients */
.gradient-text {
    background: linear-gradient(90deg, #fff, #00f0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* --- EMERGENCY UI FIXES --- */

/* 1. Header is too short and items are squashed */
.site-header {
    height: auto !important;
    /* Let it grow */
    padding: 15px 0 !important;
}

.navbar {
    display: flex !important;
    /* Revert to flex for safety */
    height: auto !important;
    max-width: 1400px !important;
    padding: 0 40px !important;
    flex-wrap: wrap !important;
    /* Allow wrapping on small screens */
    gap: 20px;
}

/* 2. Logo visibility */
.logo-container {
    flex: 0 0 auto;
    margin-right: auto;
    /* Push everything else right */
}

.logo-container img {
    height: 60px !important;
    max-width: none !important;
}

/* 3. Menu Visibility */
.main-navigation {
    flex: 1 1 auto;
    order: 2;
    display: flex;
    justify-content: center;
    margin: 0 20px;
}

.main-navigation ul {
    gap: 20px !important;
}

/* 4. Contact Button positioning (It was floating weirdly) */
.header-actions {
    flex: 0 0 auto;
    order: 3;
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-cta {
    margin-top: 0 !important;
    transform: none !important;
    position: relative !important;
    top: auto !important;
}

/* 5. Hero Text is overlapping or weird */
.luxury-lifestyle-section {
    padding-top: 150px !important;
    /* Clear the header */
}

.hero-title {
    font-size: 3.5rem !important;
    /* Scale down a bit to prevent overflow */
}

/* Fix button contrast */
.btn-secondary {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(0, 0, 0, 0.3) !important;
}


/* --- ULTIMATE ALIGNMENT FIX (SINGLE LINE) --- */

.site-header {
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.navbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* CRITICAL: No wrapping */
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 40px !important;
    gap: 0 !important;
}

/* 1. LOGO: Fixed Left */
.logo-container {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-right: 20px !important;
}

.logo-container img {
    height: 60px !important;
    /* Force Logo Size */
    width: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    display: block !important;
}

/* 2. MENU: Fluid Center */
.main-navigation {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.main-navigation ul {
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. ACTIONS: Fixed Right (Sign In + Contact) */
.header-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    /* Align vertically */
    gap: 25px !important;
    margin-left: 20px !important;
}

/* Sign In adjustments */
.menu-item-login,
.sign-in-link {
    margin: 0 !important;
    line-height: 1 !important;
}

/* CONTACT BUTTON: White & Clean */
.header-cta {
    display: inline-block !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15) !important;
    vertical-align: middle !important;
}

/* RESET any previous offsets */
body.home .luxury-lifestyle-section {
    padding-top: 100px !important;
    /* Adjust hero margin to match header */
}


/* --- HERO IMAGE POSITION FIX --- */
.luxury-lifestyle-section {
    /* Move background image DOWN by 50px or use 'center 20%' to lower the focal point */
    background-position: center 30% !important;
    /* Alternatively, for more control if it's 'cover', we can try shifting the y-axis */
}

/* If the image is the background of the section: */
/* Let's push the 'face' down by adjusting background-position-y */
/* Currently likely 'center center' or 'center top'. */
/* Setting it to 'center 100px' (meaning x=center, y=100px from top) might not work with cover in intended way. */
/* Better approach: 'center 40%' usually lowers the image content relative to the viewport. */

.luxury-lifestyle-section {
    background-position: center 60px !important;
    /* Push image down 60px from top */
}

/* Also ensure the text doesn't overlap the face if the face moves down. */
/* We might want to push the text down a bit more too if needed. */


/* --- CRITICAL LOGO FIX --- */
/* The issue is likely Flexbox wrapping because of element widths or the 'admin bar' pushing things */

.site-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100vw !important;
    /* Full screen width */
    max-width: 100vw !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
}

.header-inner {
    /* WAS .navbar - FIXED to match header.php */
    display: flex !important;
    flex-direction: row !important;
    /* STRICT ROW */
    flex-wrap: nowrap !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Force specific order */
.logo-container {
    order: 1 !important;
    flex: 0 0 150px !important;
    /* Fixed width reserved for logo */
    margin-right: 0 !important;
    background: transparent !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

.main-navigation {
    order: 2 !important;
    flex: 1 !important;
    /* Take remaining space */
    justify-content: center !important;
}

.header-actions {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
}

/* Ensure no margins are pushing it up */
.site-branding,
.custom-logo-link {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix CONTACT button weird float */
.header-cta {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
}

/* HIDE Top Grey Bar if needed (sometimes causes offsets) */
/* .logo-container { margin-top: 0 !important; } */
/* CASE STUDIES STYLES */
.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.case-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 15px;
    overflow: hidden;
    transition: 0.3s;
}
.case-card:hover { transform: translateY(-5px); border-color: var(--color-accent-neon); }
.case-content { padding: 1.5rem; }
.case-content h4 { margin-bottom: 1rem; font-size: 1.2rem; }
.case-stats { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; color: #ccc; }
.case-stats li { margin-bottom: 0.5rem; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.5rem; }
.case-stats li:last-child { border: none; }
.case-stats span { opacity: 0.7; }



/* MINI ICONS FOR PRODUCTS GRID */
.mini-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.products-mini-grid {
    align-items: stretch;
}
.mini-prod {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 180px; /* Uniform height */
}
.special-card-bio {
    text-align: left !important;
    align-items: flex-start !important;
    padding: 2rem !important;
}
.special-card-blog {
    text-align: left !important;
    align-items: flex-start !important;
    padding: 2rem !important;
    border-color: var(--color-accent-gold) !important;
}


/* BLOG CAROUSEL STYLES */
.blog-carousel::-webkit-scrollbar {
    height: 5px;
}
.blog-carousel::-webkit-scrollbar-thumb {
    background: var(--color-accent-neon);
    border-radius: 10px;
}
.blog-carousel::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}
.blog-card {
    transition: transform 0.3s;
    border: 1px solid rgba(255,255,255,0.05);
}
.blog-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent-neon);
}


/* LARGE BLOG CARD HOVER */
.blog-card-large:hover {
    transform: translateY(-10px);
    border-color: var(--color-accent-neon) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}