/* ============================
   ADRASA HEADER (ELEMENTOR WIDGET)
============================ */

.adrasa-header {
    /* 1320 / 1506 ≈ 0.88 */
    --adrasa-scale: 0.88;

    /* Figma padding ~26px top/bottom */
    padding: calc(26px * var(--adrasa-scale)) 0;
    position: relative;
    z-index: 100;
}

/* ===== COLUMNS (Bootstrap handles row, we control content) ===== */

.adrasa-header__col-left,
.adrasa-header__col-logo,
.adrasa-header__col-right {
    display: flex;
}

/* logo column is centered, left/right aligned to container edges */
.adrasa-header__col-left {
    justify-content: flex-start;
}

.adrasa-header__col-logo {
    justify-content: center;
}

.adrasa-header__col-right {
    justify-content: flex-end;
}

/* ===== LOGO ===== */
/* Assume Figma logo width ≈ 250px, height ≈ 52px */
.adrasa-header__logo img {
    display: block;
    width: auto;
    max-width: calc(250px * var(--adrasa-scale));
    max-height: calc(52px * var(--adrasa-scale));
}

/* ===== MENUS ===== */

/* Figma horizontal gap between menu items ≈ 34px */
.adrasa-header__menu {
    display: flex;
    gap: calc(34px * var(--adrasa-scale));
    list-style: none;
    margin: 0;
    padding: 0;
}

.adrasa-header__menu li {
    margin: 0;
    padding: 0;
}

/* MENU TEXT */
/* Figma font size ≈ 16px, NO letter-spacing so words are shorter */
.adrasa-header__menu li a {
    position: relative; /* for underline */
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: calc(16px * var(--adrasa-scale));
    text-transform: uppercase;
    color: #1d2f66;
    text-decoration: none;
    padding-bottom: calc(4px * var(--adrasa-scale)); /* space for underline */
    transition: color 0.2s ease;
}

/* Figma distances around logo:
   INNOVATION → logo ≈ 139px
   logo → RESOURCES ≈ 120px
   We apply them (scaled) as margins on the navs.
*/
.adrasa-header__nav--left {
    margin-right: calc(139px * var(--adrasa-scale));
}

.adrasa-header__nav--right {
    margin-left: calc(120px * var(--adrasa-scale));
}

/* Underline effect */
.adrasa-header__menu li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(2px * var(--adrasa-scale));
    background-color: #3fb6e2;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}

/* Hover: color + underline */
.adrasa-header__menu li a:hover {
    color: #3fb6e2;
}

.adrasa-header__menu li a:hover::after {
    transform: scaleX(1);
}

/* ===== RIGHT SIDE (menu + lang toggle + CTA) ===== */

/* Figma gap ≈ 20px between right menu, toggle, CTA */
.adrasa-header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(20px * var(--adrasa-scale));
    flex-wrap: nowrap;
}

/* ===== CTA ICON (scaled from Figma 14.14 × 14.14) ===== */

.adrasa-header__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    width: calc(24px * var(--adrasa-scale));
    height: calc(24px * var(--adrasa-scale));
}

.adrasa-header__cta-icon img {
    width: calc(14.14px * var(--adrasa-scale));
    height: calc(14.14px * var(--adrasa-scale));
    display: block;
}

/* Fallback arrow when there is no image */
.adrasa-header__cta-icon:not(:has(img)) {
    font-size: calc(14px * var(--adrasa-scale));
    color: #009DD8;
}

/* ===== LANGUAGE TOGGLE ===== */
/* Figma pill: 82 × 44, radius 22, border 1px */

.adrasa-header__lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(82px * var(--adrasa-scale));
    height: calc(44px * var(--adrasa-scale));
    border: calc(1px * var(--adrasa-scale)) solid #1C3066;
    border-radius: calc(22px * var(--adrasa-scale));
    overflow: hidden;
    background: radial-gradient(
        50% 50% at 50% 50%,
        rgba(238, 247, 250, 0.39) 0%,
        rgba(198, 227, 238, 0.39) 100%
    );
    white-space: nowrap;
}

/* Figma inner font ≈ 13px */
.adrasa-header__lang-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: calc(13px * var(--adrasa-scale));
    line-height: 1.13;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #1d2f66 !important;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.adrasa-header__lang-btn:not(.is-active):hover {
    background-color: rgba(255, 255, 255, 0.7);
    color: #1C3066 !important;
}

.adrasa-header__lang-btn.is-active {
    background-color: #1C3066;
    color: #EFF7FA !important;
    border-radius: calc(22px * var(--adrasa-scale));
}

/* ===== CTA BUTTON ===== */
/* Figma: font 16px, height 44px, padding 10/26 approx */

.adrasa-header__cta {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--adrasa-scale));
    background-color: #1d2f66;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: calc(16px * var(--adrasa-scale));
    font-weight: 500;
    /* NO extra letter-spacing here either */
    text-transform: uppercase;
    padding: calc(10px * var(--adrasa-scale)) calc(26px * var(--adrasa-scale));
    border-radius: 999px;
    text-decoration: none;
    height: calc(44px * var(--adrasa-scale));
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.adrasa-header__cta:hover,
.adrasa-header__cta:hover .adrasa-header__cta-text {
    background-color: #3fb6e2 !important;
    color: #132b57 !important;
}

/* Change text color explicitly */
.adrasa-header__cta:hover .adrasa-header__cta-text {
    color: #132b57;
}

/* Change icon color if using inline icon */
.adrasa-header__cta:hover .adrasa-header__cta-icon {
    color: #132b57;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991.98px) {
    .adrasa-header__col-left,
    .adrasa-header__col-logo,
    .adrasa-header__col-right {
        justify-content: center;
        text-align: center;
        margin-bottom: calc(10px * var(--adrasa-scale));
    }

    .adrasa-header__nav--left,
    .adrasa-header__nav--right {
        margin-left: 0;
        margin-right: 0;
    }

    .adrasa-header__menu {
        justify-content: center;
        gap: calc(18px * var(--adrasa-scale));
    }

    .adrasa-header__right {
        justify-content: center;
        flex-wrap: wrap;
        gap: calc(14px * var(--adrasa-scale));
    }
}

@media (max-width: 575.98px) {
    .adrasa-header {
        padding: calc(16px * var(--adrasa-scale)) 0;
    }

    .adrasa-header__menu {
        gap: calc(12px * var(--adrasa-scale));
    }

    .adrasa-header__cta {
        width: 100%;
        justify-content: center;
    }
}
/* ============================
   ADRASA MEGAMENU
============================ */

/* Top-level item that has megamenu */
.adrasa-header__menu-item.has-megamenu {
    position: static; /* panel will be positioned relative to header, not li */
}

/* The full panel (dark blue block) */
.adrasa-megamenu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* just below header */
    margin-top: 0;
    background: #132b57;
    padding: calc(64px * var(--adrasa-scale)) 0 calc(56px * var(--adrasa-scale));
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
    z-index: 90; /* below header (100) but above page */
}

/* Inner container aligns with main container */
.adrasa-megamenu__inner {
    display: block;
}

/* Grid of cards – 4 columns like Figma */
.adrasa-megamenu__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 cols instead of 3 */
    gap: calc(20px * var(--adrasa-scale));
}

@media (min-width: 992px) {

    .adrasa-megamenu__grid {
        grid-auto-rows: auto;
    }

    /* Reset any previous positioning */
    .adrasa-megamenu__item {
        grid-column: auto;
        grid-row: auto;
    }

    /* Order assumed:
       1: Pretreatment
       2: Printing
       3: Dyeing
       4: Process & Quality
       5: Finishing (tall card, has pipes in description => .adrasa-megamenu__item--tall)
       6: Technical Services
       (If you add more items we can extend this mapping)
    */

    /* Col 1: Pretreatment (top) + Dyeing (bottom) */
    .adrasa-megamenu__item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
    .adrasa-megamenu__item:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    /* Col 2: Printing (top) + Process & Quality (bottom) */
    .adrasa-megamenu__item:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }
    .adrasa-megamenu__item:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    /* Col 3: Finishing – tall card spanning 2 rows */
    .adrasa-megamenu__item--tall {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    /* Col 4: Technical Services (top). If later you add
       "Talk to an expert" as item 7, we’ll put it in row 2. */
    .adrasa-megamenu__item:nth-child(6) {
        grid-column: 4;
        grid-row: 1;
    }
    /* Example for future item 7:
    .adrasa-megamenu__item:nth-child(7) {
        grid-column: 4;
        grid-row: 2;
    }
    */
}

/* Each card li */
.adrasa-megamenu__item {
    margin: 0;
    padding: 0;
}

/* Anchor that wraps the card */
.adrasa-megamenu__card-link {
    display: block;
    text-decoration: none;
}

/* Card look (light gradient, rounded corners…) */
.adrasa-megamenu__card {
    height: 100%;
    padding:
        calc(31px * var(--adrasa-scale))   /* top */
        calc(53px * var(--adrasa-scale))   /* right */
        calc(59px * var(--adrasa-scale))   /* bottom */
        calc(53px * var(--adrasa-scale));  /* left */
    border-radius: 40px; /* sube si ves que Figma tiene más curvatura */
    background: linear-gradient(
        136deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.04) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Card title & text (white / light text) */
.adrasa-megamenu__card-title {
    margin: 0 0 calc(8px * var(--adrasa-scale));
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: calc(24px * var(--adrasa-scale));
    line-height: 0.92;
    color: #ffffff;
    text-transform: none; /* importante: no mayúsculas */
}

.adrasa-megamenu__card-text {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: calc(18.066px * var(--adrasa-scale));
    line-height: 1;
    color: #C6E3EE;
    text-transform: none;
}

/* Cuando el walker genera lista (<ul>) */
.adrasa-megamenu__card-list {
    margin: calc(8px * var(--adrasa-scale)) 0 0;
    padding-left: calc(24px * var(--adrasa-scale));
    list-style: disc;
}

.adrasa-megamenu__card-list li {
    margin-bottom: calc(4px * var(--adrasa-scale));
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: calc(18.066px * var(--adrasa-scale));
    line-height: 1.1;
    color: #C6E3EE;
}

/* Remove any underline from the card link itself */
.adrasa-megamenu__card-link {
    text-decoration: none;
}

/* Figma-like hover: metal background + stronger shadow */
.adrasa-megamenu__card-link:hover .adrasa-megamenu__card {
    border-color: #3fb6e2;
    background:
        linear-gradient(rgba(255,255,255,0.37), rgba(255,255,255,0.37)),
        url('../img/background-hover-image.jpg');
    background-size: 220% 135%;   /* adjust to taste */
    background-position: 60% 30%; /* adjust to taste */
    background-repeat: no-repeat;
    box-shadow: 15px 17px 25.7px -5px rgba(28, 52, 99, 0.06);
}

/* ---------- Show / hide logic (desktop) ---------- */

/* Header already positioned; panel is absolute relative to header */
.adrasa-header {
    position: relative;
}

/* Show megamenu on hover/focus (desktop behaviour) */
@media (min-width: 992px) {
    .adrasa-header__menu-item.has-megamenu:hover > .adrasa-megamenu,
    .adrasa-header__menu-item.has-megamenu:focus-within > .adrasa-megamenu,
    .adrasa-header__menu-item.has-megamenu.is-open > .adrasa-megamenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* ---------- Mobile behaviour ---------- */

@media (max-width: 991.98px) {
    .adrasa-megamenu {
        position: static;
        margin-top: 0;
        transform: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        padding: calc(24px * var(--adrasa-scale)) 0 calc(32px * var(--adrasa-scale));
    }

    .adrasa-header__menu-item.has-megamenu.is-open > .adrasa-megamenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .adrasa-megamenu__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
}

/* Featured card – right column, lighter gradient, bigger look */

.adrasa-megamenu__item--featured {
    grid-column: span 1;
}

@media (min-width: 992px) {
    .adrasa-megamenu__item--featured {
        grid-column: span 2; /* make it wider if you want */
    }
}

.adrasa-megamenu__item--featured .adrasa-megamenu__card {
    background: linear-gradient(
        135deg,
        #4ab9e5 0%,
        #c7e2f1 100%
    );
    border-color: transparent;
    color: #132b57;
}

.adrasa-megamenu__item--featured .adrasa-megamenu__card-title {
    color: #132b57;
}

.adrasa-megamenu__item--featured .adrasa-megamenu__card-text {
    color: rgba(19, 43, 87, 0.9);
}


/* Header style when megamenu is open */
.adrasa-header--megamenu-open {
    background-color: #132b57;
}

/* Menu links turn light */
.adrasa-header--megamenu-open .adrasa-header__menu li a {
    color: #eff7fa;
}

.adrasa-header--megamenu-open .adrasa-header__menu li a::after {
    background-color: #3fb6e2;
}

/* CTA becomes light on dark */
.adrasa-header--megamenu-open .adrasa-header__cta,
.adrasa-header--megamenu-open .adrasa-header__cta-text {
    background-color: #eff7fa !important;
    color: #132b57 !important;
}
.adrasa-header--megamenu-open .adrasa-header__cta-text {
    color: #132b57;
}
.adrasa-header--megamenu-open .adrasa-header__cta:hover,
.adrasa-header--megamenu-open .adrasa-header__cta:hover .adrasa-header__cta-text {
    background-color: #eff7fa !important;
    color: #132b57 !important;
}

/* Keep SOLUTIONS underlined while mega is open */
.adrasa-header--megamenu-open
.adrasa-header__menu-item.has-megamenu > .adrasa-header__menu-link::after {
    transform: scaleX(1);
}
.adrasa-megamenu__card-title,
.adrasa-megamenu__card-text {
    text-transform: none;
}

/* Language toggle on dark */
.adrasa-header--megamenu-open .adrasa-header__lang {
    border-color: #eff7fa;
    background: rgba(15, 33, 70, 0.8);
}

.adrasa-header--megamenu-open .adrasa-header__lang-btn {
    color: #eff7fa !important;
}

.adrasa-header--megamenu-open .adrasa-header__lang-btn.is-active {
    background-color: #eff7fa;
    color: #132b57 !important;
}

/* TEMP: fake inverted logo until we add a second image field */
.adrasa-header--megamenu-open .adrasa-header__logo img {
    filter: brightness(0) invert(1);
}

/* Disable underline style inside grid items */
.adrasa-header__menu li.adrasa-megamenu__item a::after {
    display: none;
}