/*
Theme Name: Hello Elementor Child Theme
Theme URI: https://elementor.com/themes/hello-theme
Author: dewwwe
Author URI: https://dewwwe.com
Template: hello-elementor
Description: Child theme for Hello Elementor Theme
Version: 1.0
*/

/* ================================================================
   TABLE OF CONTENTS

   1.  Tokens (couleurs)
   2.  Base (body, p)
   3.  Forms
   4.  Utilities (storyline)
   5.  Header — Nav menu (desktop + mobile fullscreen overlay)
   6.  Footer — Nav
   7.  Components — Logos slider, Wave, Team images
   8.  Home — Heading & Cosa Facciamo cards
   9.  Case Study — Header & footer (dark variant)
   10. Case Study — Gutenberg long-form content (typo + tables)
   11. Case Study — Patterns (phase cards & stat grid)
   12. Case Study — Card animations

   NOTES
   - CSS nesting natif utilisé pour les blocs `body.single-case-study`.
     Support requis : Chrome 112+, Safari 16.5+, Firefox 117+ (2023+).
   - Tous les `!important` sont intentionnels : Elementor injecte des styles
     inline ou avec haute spécificité. Les retirer casse les overrides.
   ================================================================ */

/* ================================
   1. TOKENS
   ================================ */

:root {
    --accent-dark: #003d3d;
    --accent: #005959;
    --accent-light: #008f8f;
    --main-dark: #564939;
    --main: #695a46;
    --main-light: #93754e;
    --white-dark: #f7d7c5;
    --white: #ffeadc;
    --white-light: #f9f5f0;
    --text: #000909;
}

/* ================================
   2. BASE
   ================================ */

body {
    font-feature-settings:
        "liga" 1,
        "clig" 1,
        "dlig" 1,
        "calt" 1,
        "rlig" 1;
}

p {
    padding: 0;
    margin: 0;
}

/* ================================
   3. FORMS
   ================================ */

.elementor-form .elementor-field-group > input.elementor-field-textual,
.elementor-form .elementor-field-group > textarea.elementor-field-textual,
.elementor-form .elementor-field-group .elementor-select-wrapper select {
    padding: 16px;
}

/* ================================
   4. UTILITIES
   ================================ */

/* Storyline SVGs (animated path on scroll, see custom.js) */
.storyline {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

/* ================================
   5. HEADER — NAV MENU
   ================================ */

.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CTA = last menu item, pill button */
nav .elementor-nav-menu li:last-child a {
    border-radius: 32px !important;
    padding: 8px 16px !important;
    height: fit-content;
    background-color: var(--accent);
    color: var(--white-light) !important;
}

nav .elementor-nav-menu li:last-child:hover a {
    background-color: var(--accent-dark);
    color: var(--white-light) !important;
}

body header .elementor-sticky--active,
body header .elementor-sticky--active .elementor-motion-effects-container .elementor-motion-effects-layer {
    background-color: var(--white-light) !important;
    background-image: none !important;
}

nav .elementor-nav-menu li:last-child a.elementor-item-active {
    background-color: var(--accent) !important;
    color: var(--white-light) !important;
}

/* Mobile : fullscreen overlay menu + base nav adjustments */
@media (max-width: 1024px) {
    header nav.elementor-nav-menu__container.elementor-nav-menu--dropdown {
        position: fixed !important;
        inset: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        background-color: var(--white-light);
        border-radius: 0 !important;
        overflow: hidden;
        z-index: 9999;

        .elementor-nav-menu li {
            text-align: center;
            padding: 12px 0 !important;
        }

        .elementor-nav-menu li a {
            font-size: 1.5rem;
            color: var(--accent-dark);

            &:hover {
                color: var(--accent);
            }
        }
    }

    nav .elementor-nav-menu li {
        padding: 8px !important;
        border-radius: 32px;
    }

    nav .elementor-nav-menu li a {
        border-radius: 32px !important;
    }

    /* Hamburger above overlay */
    header .elementor-menu-toggle {
        z-index: 10000;
        position: relative;
    }

    header div.elementor-menu-toggle {
        background-color: transparent !important;
    }

    /* Body scroll lock when menu open (toggled via JS) */
    body.menu-open {
        overflow: hidden;
    }
}

/* ================================
   6. FOOTER — NAV
   ================================ */

.footer-nav nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-nav-legal nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 24px;
}

@media (max-width: 767px) {
    .footer-nav nav ul,
    .footer-nav-legal nav ul {
        align-items: center;
    }

    .footer-nav-legal nav ul {
        flex-direction: column;
        gap: 8px;
    }
}

/* ================================
   7. COMPONENTS
   ================================ */

/* Logos slider — grayscale, color on hover */
.logos-slider .swiper-slide-inner img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);

    &:hover {
        filter: none;
    }
}

/* Wave divider (homepage section bottom) */
#wave {
    padding: 0;
    margin: 0 0 -4px 0;
    position: relative !important;
    background-color: var(--accent-dark);
    width: 100%;
    aspect-ratio: 6/1;
    clip-path: polygon(
        100% 100%,
        0% 100%,
        0% 55.18%,
        2% 50.34%,
        4% 45.41%,
        6% 40.48%,
        8% 35.62%,
        10% 30.9%,
        12% 26.41%,
        14% 22.21%,
        16% 18.38%,
        18% 14.96%,
        20% 12.01%,
        22% 9.59%,
        24% 7.72%,
        26% 6.44%,
        28% 5.77%,
        30% 5.72%,
        32% 6.29%,
        34% 7.47%,
        36% 9.24%,
        38% 11.57%,
        40% 14.43%,
        42% 17.78%,
        44% 21.55%,
        46% 25.69%,
        48% 30.14%,
        50% 34.82%,
        52% 39.66%,
        54% 44.59%,
        56% 49.52%,
        58% 54.38%,
        60% 59.1%,
        62% 63.59%,
        64% 67.79%,
        66% 71.62%,
        68% 75.04%,
        70% 77.99%,
        72% 80.41%,
        74% 82.28%,
        76% 83.56%,
        78% 84.23%,
        80% 84.28%,
        82% 83.71%,
        84% 82.53%,
        86% 80.76%,
        88% 78.43%,
        90% 75.57%,
        92% 72.22%,
        94% 68.45%,
        96% 64.31%,
        98% 59.86%,
        100% 55.18%
    );
}

/* Team card images — desaturated */
.team-card.elementor-element.e-con img {
    filter: grayscale(80%);
}

/* ================================
   8. HOME
   ================================ */

/* H1 inline span variants */
.home-heading h1 {
    span.overlined {
        text-decoration: line-through;
    }

    span.thin {
        font-weight: 400;
    }
}

/* Cosa Facciamo cards — animated outline on hover */
.cosa-facciamo-card {
    position: relative;
    overflow: hidden;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 1px solid var(--white-light);
        border-radius: 32px;
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        transition: clip-path 0.4s ease-in-out;
        pointer-events: none;
    }

    &:hover::after {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* ================================
   9. CASE STUDY — HEADER & FOOTER (DARK VARIANT)
   ================================ */

body.single-case-study {
    /* Nav links (non-CTA) */
    nav .elementor-nav-menu li:not(.menu-item-type-post_type) a {
        color: var(--white-light) !important;
    }

    nav .elementor-nav-menu li a:hover {
        color: var(--white) !important;
    }

    /* CTA button (last nav item) — inverted */
    nav .elementor-nav-menu li.menu-item-type-post_type a {
        background-color: var(--white-light) !important;
        color: var(--accent-dark) !important;
    }

    nav .elementor-nav-menu .menu-item-type-post_type:hover a {
        background-color: var(--white) !important;
        color: var(--accent-dark) !important;
    }

    nav .elementor-nav-menu li:last-child a.elementor-item-active {
        background-color: var(--white-light) !important;
        color: var(--accent-dark) !important;
    }

    /* Hamburger icon */
    .elementor-menu-toggle {
        color: var(--white-light) !important;
    }

    /* Logo (header + footer) — invert monochrome logo to light */
    header .elementor-widget-theme-site-logo img,
    header .elementor-widget-image img,
    footer .elementor-widget-theme-site-logo img,
    footer .elementor-widget-image img {
        filter: brightness(0) invert(1);
    }

    /* Sticky header background — keep dark */
    header .elementor-sticky--active,
    header .elementor-sticky--active > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-color: var(--accent-dark) !important;
        background-image: none !important;
    }

    /* Footer nav */
    .footer-nav nav ul li a,
    .footer-nav-legal nav ul li a {
        color: var(--white-light) !important;

        &:hover {
            color: var(--white) !important;
        }
    }

    /* Footer text */
    footer,
    footer p,
    footer .elementor-heading-title {
        color: var(--white-light) !important;
    }

    /* Footer social icons */
    footer .elementor-social-icon i {
        color: var(--white-light) !important;
    }

    footer .elementor-social-icon:hover {
        color: var(--white) !important;
        border-color: var(--white) !important;
    }

    /* Footer CTA button */
    footer .elementor-button {
        background-color: var(--white-light) !important;
        color: var(--accent-dark) !important;

        &:hover {
            background-color: var(--white) !important;
        }
    }
}

/* Mobile fullscreen menu — dark variant (case study) */
/* Flat selectors + !important to avoid nesting parser issues and Elementor inline overrides */
@media (max-width: 1024px) {
    body.single-case-study header nav.elementor-nav-menu__container.elementor-nav-menu--dropdown {
        background-color: var(--accent-dark) !important;
    }

    body.single-case-study .elementor-nav-menu li a {
        color: var(--white-light) !important;
    }

    body.single-case-study .elementor-nav-menu li a:last-child {
        color: var(--accent-dark) !important;
    }

    body.single-case-study .elementor-nav-menu li a:hover {
        color: var(--white) !important;
    }

    /* X close icon (SVG fill, in case `color` doesn't reach the icon) */
    body.single-case-study .elementor-menu-toggle,
    body.single-case-study .elementor-menu-toggle svg {
        color: var(--white-light) !important;
        fill: var(--white-light) !important;
    }
}

/* ================================
   10. CASE STUDY — GUTENBERG LONG-FORM CONTENT
   ================================ */

body.single-case-study {
    /* --- Typography --- */

    p {
        color: var(--white-light);
    }

    h2 {
        font-size: clamp(2rem, 4vw, 2.75rem);
        line-height: 1.2;
        margin-block: 48px 16px;
        font-weight: 500;
    }

    h3 {
        font-size: clamp(1.25rem, 2.2vw, 1.5rem);
        line-height: 1.3;
        margin-block: 32px 12px;
        font-weight: 500;
    }

    /* H5 = section eyebrow "01 · IL CONTESTO" */
    h5 {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding-top: 4em;
        margin-block: 32px 16px;
        font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--white-dark);

        &::before {
            content: "";
            width: 32px;
            height: 1px;
            background-color: currentColor;
        }

        &:empty {
            display: none !important;
        }
    }

    :is(h2, h3, h5):first-child {
        margin-top: 0;
    }

    a {
        color: var(--main);
        display: flex;
        flex-direction: row;
        gap: 4px;
        align-items: center;
        font-weight: 600;

        &[rel~="nofollow"]::after {
            content: "";
            width: 0.5em;
            height: 0.5em;
            margin-left: 0.4em;
            background-color: currentColor;
            mask-image: url("/wp-content/uploads/2026/04/arrow.svg");
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
        }
    }

    /* --- Tables --- */

    .wp-block-table {
        margin-block: 32px;
        overflow: visible;
    }

    table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.95rem;
    }

    th {
        padding: 14px 16px;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--white-light);
        border-bottom: 2px solid var(--white-light);
    }

    td {
        padding: 14px 16px;
        color: var(--white-light);
        border-bottom: 1px solid color-mix(in srgb, var(--white-light) 10%, transparent);
    }

    td small {
        display: block;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid color-mix(in srgb, var(--white-light) 20%, transparent);
        font-size: 0.875rem;
        line-height: 1.6;
        color: var(--white-light);
        font-style: normal;
    }

    tbody tr:last-child td {
        border-bottom: 1px solid color-mix(in srgb, var(--white-light) 20%, transparent);
    }

    /* Collapsible long tables (see custom.js) */
    tr.is-row-collapsed {
        display: none;
    }

    .table-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        padding: 8px 18px;
        border-radius: 32px;
        background: transparent;
        color: var(--white-light);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition:
            background-color 0.15s ease,
            color 0.15s ease;

        &:hover {
            background-color: var(--main-light);
            color: var(--accent-dark);
        }
    }

    /* Mobile : horizontal scroll + sticky first column */
    @media (max-width: 768px) {
        h2 {
            margin-block: 48px 12px;
        }

        /* Make the wrapper a horizontal scroll container so the sticky
           first column has something to stick to. Card wrappers (single-row)
           keep overflow:visible — they need it for the hover lift/shadow. */
        .wp-block-table:not(:has(tbody tr:only-child)) {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Multi-row data tables only — single-row tables render as cards
           (see §11) and must NOT inherit min-width / sticky column. */
        .wp-block-table table:not(:has(tbody tr:only-child)) {
            min-width: 600px;
        }

        :is(th, td) {
            padding: 10px 8px;
            font-size: 0.85rem;
        }

        .wp-block-table table:not(:has(tbody tr:only-child)) :is(th, td):first-child {
            position: sticky;
            left: 0;
            background-color: var(--accent-dark);
            border: 1px solid var(--white-light);
            z-index: 1;
        }

        .table-toggle {
            position: sticky;
            left: 0;
        }
    }
}

/* ================================
   11. CASE STUDY — PATTERNS
   ================================ */

body.single-case-study {
    /* --- Shared card base --- */

    :is(.cs-phase-card, .cs-stat-grid .cs-card, .cs-cta, .wp-block-table table:has(tbody tr:only-child) tbody td) {
        border: 1px solid color-mix(in srgb, var(--white-light) 25%, transparent);
        border-radius: 24px;
        background-color: color-mix(in srgb, var(--accent) 50%, transparent);
        transition:
            transform 300ms ease-out,
            box-shadow 300ms ease-out,
            border-color 300ms ease-out;

        &:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.35);
            border-color: color-mix(in srgb, var(--white-light) 40%, transparent);
        }
    }

    /* --- 1-row table → card layout --- */

    .wp-block-table table:has(tbody tr:only-child) {
        display: block;
        border: none;
        background: none;
    }

    .wp-block-table table:has(tbody tr:only-child) thead,
    .wp-block-table table:has(tbody tr:only-child) tfoot {
        display: none;
    }

    .wp-block-table table:has(tbody tr:only-child) tbody {
        display: flex;
        gap: 1.5rem;
    }

    .wp-block-table table:has(tbody tr:only-child) tbody tr {
        display: contents;
    }

    .wp-block-table table:has(tbody tr:only-child) tbody td {
        flex: 1;
        padding: 24px;
    }

    /* Card label (strong) — eyebrow style matching h5 */
    .wp-block-table table:has(tbody tr:only-child) td strong {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--white-dark);
        margin-bottom: 16px;

        &::before {
            content: "";
            width: 32px;
            height: 1px;
            background-color: currentColor;
            flex-shrink: 0;
        }
    }

    /* Card subtitle (em) — h3 style */
    .wp-block-table table:has(tbody tr:only-child) td em {
        display: block;
        font-size: clamp(1.25rem, 2.2vw, 1.5rem);
        font-weight: 500;
        font-style: normal;
        line-height: 1.25;
        color: var(--white-light);
        margin-bottom: 12px;
    }

    /* Mobile: stack cards vertically */
    @media (max-width: 768px) {
        .wp-block-table table:has(tbody tr:only-child) tbody {
            flex-direction: column;
        }
    }

    /* --- Phase cards (cs-phase-cards grid) --- */

    .cs-phase-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-block: 48px;

        @media (max-width: 1024px) {
            grid-template-columns: 1fr;
        }
    }

    .cs-phase-card {
        padding: 24px;

        h5 {
            padding-top: 0;
            margin-block: 0 16px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.2em;
        }

        h3 {
            margin: 0 0 16px;
            font-size: 1.5rem;
            line-height: 1.25;
        }
    }

    .cs-phase-card__kpis {
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid color-mix(in srgb, var(--white-light) 20%, transparent);
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .cs-cta {
        padding: 32px;
    }

    /* --- Stat grid --- */

    .cs-stat-grid {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 32px;
        flex-wrap: nowrap;
        overflow-x: auto;
        height: 100%;

        .cs-card {
            display: flex;
            flex-direction: column;
            gap: 32px;
            padding: 24px;
            margin: 0;
            height: 100%;
            min-width: 200px;

            h3 {
                margin: 0;
                font-size: clamp(2rem, 4.5vw, 3rem);
                line-height: 1;
            }

            p {
                margin: 0;
                font-size: 0.875rem;
                line-height: 1.4;
            }
        }

        @media (max-width: 768px) {
            gap: 24px;
            margin-block: 32px;
        }
    }
}

/* ================================
   12. CASE STUDY — CARD ANIMATIONS
   ================================ */

body.single-case-study :is(.cs-phase-card, .cs-stat-grid .cs-card) {
    opacity: 0;
    transform: translateY(20px);

    &.is-visible {
        animation: cs-card-entry 500ms ease-out forwards;
        animation-delay: calc(var(--card-index, 0) * 100ms);
        overflow: visible;
    }
}

@keyframes cs-card-entry {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.single-case-study :is(.cs-phase-card, .cs-stat-grid .cs-card) {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }
}

/* ================================
   13. CASE STUDY — LOOP CARD HOVER
   ================================ */

.e-loop-item.case-study > a {
    transition: background-color 400ms ease;

    /* Tout ce qui doit s'éclaircir au hover */
    .elementor-heading-title,
    .elementor-widget-text-editor,
    .elementor-widget-text-editor .elementor-widget-container {
        transition: color 400ms ease;
    }

    .elementor-icon {
        transition: color 400ms ease;
    }

    .elementor-widget-theme-post-featured-image img {
        transition: filter 500ms ease;
    }

    &:hover {
        background-color: var(--accent-dark) !important;

        .elementor-heading-title,
        .elementor-widget-text-editor,
        .elementor-widget-text-editor .elementor-widget-container {
            color: var(--white-light) !important;
        }

        .elementor-icon {
            color: var(--white-light) !important;
        }

        .elementor-widget-theme-post-featured-image img {
            filter: none;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .e-loop-item.case-study > a,
    .e-loop-item.case-study > a * {
        transition: none !important;
    }
}