/* components/mega-menu/mega-menu.css
 * Styles for the content of the Bricks mega menu dropdown.
 * Bricks handles the trigger, panel wrapper, positioning and open/close.
 * Typography tokens come from ACSS (--h3, --text-m, --text-xs).
 */

/* ── Stacking: keep the mega menu above page content ────────────
   Bricks loop cards (product/case) use hover transforms that create
   stacking contexts and would otherwise paint over the open dropdown.
   Promote the header + the Bricks dropdown panel that holds the menu. */
header:has(.mm-grid),
.brxe-dropdown:has(.mm-grid) {
    position: relative;
    z-index: 1000;
}

.brxe-dropdown:has(.mm-grid) .brx-dropdown-content,
.brx-dropdown-content:has(.mm-grid) {
    z-index: 1000;
}

/* ── INGEN panelskugga här. Läs det här före du lägger till en ──
   Megamenyn har två boxar som är lätta att förväxla, och de är olika breda:

       .brx-dropdown-content   0 → 1783   genomskinlig, hela fönsterbredden
       .brxe-container         62 → 1722  den vita ytan man faktiskt ser

   Panelen är full-bleed och genomskinlig; det vita målas av behållaren, som
   ACSS kapar vid --content-width. Under ~1600px sammanfaller de två, så en
   skugga på panelen SER rätt ut om man bara mäter där.

   Vid 1798 skiljer de 92px åt vänster och 91px åt höger. En skugga på panelen
   ritas då längs fönstrets kanter i stället för runt kortet, och eftersom
   sidan bakom ofta är vit försvinner kortets egen kant — det lästes som en
   vit platta i hela fönsterbredden bakom megamenyn. Precis det felet låg här
   en kort stund.

   Behållaren har dessutom REDAN en skugga: `#brxe-fwoljh { box-shadow: 0 0
   30px rgba(0,0,0,.1) }`, satt i byggaren. Den är en jämn glöd i stället för
   sidhuvudets riktade --hdd-shadow, men den lyfter kortet, och en id-regel
   (1-0-0) slår ändå varje klassregel här. Vill man ha exakt samma skugga som
   de övriga fyra rullgardinerna ska inställningen bort ur elementdatan —
   samma väg som strip-header-submenu-styles.php — inte överstyras härifrån. */


/* ── Grid ───────────────────────────────────────────────────── */
.mm-grid {
    --mm-yellow: #ffd100;
    --mm-border: rgba(0, 0, 0, 0.08);
    --mm-speed:  200ms;
    --mm-ease:   cubic-bezier(0.2, 0, 0.2, 1);

    display:        flex;
    flex-direction: column;
    gap:            0;
    width:          100%;
    padding:        0;
    max-height:     calc(100vh - 100px);
    overflow-y:     auto;
    scrollbar-width: thin;
}

/* Thin scrollbar for webkit browsers */
.mm-grid::-webkit-scrollbar {
    width: 6px;
}

.mm-grid::-webkit-scrollbar-track {
    background: transparent;
}

.mm-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* ── Row ────────────────────────────────────────────────────── */
.mm-row {
    display:     grid;
    gap:         0;
    border-bottom: 1px solid var(--mm-border);
}

.mm-row:last-child { border-bottom: none; }

.mm-row--robots { grid-template-columns: repeat(4, 1fr); }
.mm-row--other  { grid-template-columns: 1fr 1fr; }

/* Full-width heading row for the robot tiers (single title + continuous rule) */
.mm-row__head {
    grid-column:    1 / -1;
    /* Horizontal margin (not padding) so the yellow rule is inset like More Products */
    margin:         var(--space-s) var(--space-s) 0;
    padding-bottom: var(--space-xs);
    border-bottom:  2px solid var(--mm-yellow);
}

.mm-row__head .mm-col__heading {
    margin:         0;
    padding-bottom: 0;
    border-bottom:  none;
}

/* ── Column ─────────────────────────────────────────────────── */
.mm-col {
    padding: var(--space-s);
    border-right: 1px solid var(--mm-border);
}

.mm-col:last-child { border-right: none; }

.mm-row--other .mm-col:first-child {
    border-right: 1px solid var(--mm-border);
}

/* ── Column header (heading + optional CTA) ─────────────────────── */
.mm-col__header {
    display:        flex;
    align-items:    baseline;
    justify-content: space-between;
    gap:            var(--space-m);
    padding-bottom: var(--space-xs);
    border-bottom:  2px solid var(--mm-yellow);
    margin-bottom:  var(--space-xs);
}

/* ── Column heading ─────────────────────────────────────────── */
.mm-col__heading {
    margin:         0 0 var(--space-xs);
    font-size:      var(--text-s);
    padding-bottom: var(--space-xs);
    border-bottom:  2px solid var(--mm-yellow);
}

.mm-col:first-child .mm-col__heading {
    margin-top: 0;
}

/* ── Column heading inside header wrapper (full-width border) ─── */
.mm-col__header .mm-col__heading {
    margin:         0;
    padding-bottom: 0;
    border-bottom:  none;
    flex:           1;
}

/* ── List ───────────────────────────────────────────────────── */
.mm-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.mm-list li {
    margin:  0;
    padding: 0;
}

/* ── Product link ───────────────────────────────────────────── */
/* Raden bär hover-plattan, samma som länkarna i sidhuvudets övriga
   rullgardiner. Se blocket vid .mm-prod:hover längre ned.

   Vågrät padding plus lika stor negativ marginal: plattan går 1.2rem utanför
   texten åt båda håll, medan texten står kvar exakt där den stod. Kolumnens
   egen padding är 21,5px, så plattan får plats innanför den och rör aldrig
   kolumnavdelaren. */
.mm-prod {
    display:         flex;
    align-items:     center;
    gap:             var(--space-xs);
    padding:         0.4rem 1.2rem;
    margin:          0 -1.2rem;
    border-radius:   var(--hdd-link-radius, 0.4rem);
    transition:      background-color 120ms var(--mm-ease);
    line-height:     1.35;
    font-size:       var(--text-s);
    font-weight:     500;
    letter-spacing:  1px;
    text-transform:  uppercase;
    color:           var(--text-dark);
    text-decoration: none;
}

.mm-prod,
.mm-prod:visited,
.mm-prod:hover,
.mm-prod:focus {
    color: var(--text-dark);
}

.mm-prod__media {
    flex-shrink:     0;
    width:           48px;
    aspect-ratio:    1 / 1;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.mm-prod__media img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
}

.mm-prod__label {
    position:   relative;
    display:    inline-block;
    font-size:  var(--text-xs);
    transition: color var(--mm-speed) var(--mm-ease), transform 160ms var(--mm-ease);
}

/* Texten puttas in ett par pixlar på hover — samma gest som pilarna som
   flyttar sig i registret och megamenyns knapp. */
.mm-prod:hover .mm-prod__label,
.mm-prod:focus-visible .mm-prod__label {
    transform: translateX(4px);
}

/* ── Hovern: samma platta som sidhuvudets övriga rullgardiner ───
   Här satt tidigare en gul understrykning som växte fram under etiketten
   (scaleX, för att slippa relayout på ~30 träffytor). Den var fin, men den
   var också den enda hovern i hela sidhuvudet som inte var en grå platta —
   fyra rullgardiner sa en sak och megamenyn en annan.

   Plattan är nu den gemensamma signalen. Färgen och radien ärvs ur
   --hdd-* i header-dropdown.css, så alla fem menyerna byter ton tillsammans.

   Vill man ha understrykningen tillbaka som ETT TILLÄGG till plattan finns
   den i git-historiken för den här filen — men då tappar megamenyn igen den
   helhetskänsla det här ändrades för. */
.mm-prod:hover,
.mm-prod:focus-visible {
    background: var(--hdd-link-bg-hover, #f4f2ee);
}

.mm-prod:focus-visible {
    outline:        3px solid var(--hdd-focus-ring, #0b57d0);
    outline-offset: -1px;
}

/* ── CTA ─────────────────────────────────────────────────────── */
.mm-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-xs);
    color:           var(--text-dark);
    text-decoration: none;
    transition:      gap var(--mm-speed) var(--mm-ease);
}

.mm-cta,
.mm-cta:visited,
.mm-cta:hover,
.mm-cta:focus {
    color: var(--text-dark);
}

.mm-cta:hover {
    gap: 10px;
}

/* ── More Products CTA (in heading row) ───────────────────────── */
.mm-col__header .mm-cta {
    font-size:      var(--text-xs);
    font-weight:    500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top:     0;
    padding-top:    0;
    white-space:    nowrap;
}

/* ── More-products column (single col when placed in row 1) ─── */
.mm-col--more {
    display:        flex;
    flex-direction: column;
    position:       relative;
}

/* ── Two-column list (e.g. By Industry on row 2) ────────────── */
.mm-list--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-s);
}

/* ── Promo card ─────────────────────────────────────────────── */
/* Kortet fyller kolumnens höjd (kolumnen sträcks av More Products bredvid):
   bilden går ända ner, så luften under blir lika stor som ovanför. Rubrik och
   text överst, knappen nertill i linje med bildens underkant; tredje raden
   är utfyllnaden. */
.mm-promo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "media title"
        "media desc"
        "media ."
        "media button";
    gap: var(--space-s, 0.75rem) var(--space-m, 1.25rem);
    align-items: start;
    height: 100%;
}

.mm-promo__media {
    grid-area:    media;
    align-self:   stretch;
    position:     relative;
    width:        100%;
    margin:       0;
    overflow:     hidden;
    min-height:   0;
}

.mm-promo__media img {
    position:     absolute;
    inset:        0;
    width:        100%;
    height:       100%;
    display:      block;
    object-fit:   cover;
}

.mm-promo h3 {
    grid-area: title;
    font-size: var(--h4);
    margin:    0;
}

.mm-promo p {
    grid-area:  desc;
    color:      var(--text-dark-muted);
    font-size:  var(--text-s);
    margin:     0;
}

.mm-promo__button {
    font-family: var(--font-condensed);
    grid-area:  button;
    align-self: end;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between; /* text vänster, pil längst till höger */
    gap: 1rem;
}

.mm-promo__button-arrow {
    width: 1.8rem;
    height: 1.8rem; /* pilknuffen: style.css (plan 079) */
}

/* ── Narrow desktop (1024–1279px) — hide thumbs to avoid tightness ── */
@media (min-width: 1024px) and (max-width: 1279px) {
    .mm-prod__media {
        display: none;
    }
    .mm-prod {
        gap: 0;
        min-height: 44px;       /* WCAG 2.2 touch target */
        line-height: 1.4;
        /* Mindre padding än på bred skärm, men samma princip: marginalen tar
           tillbaka paddingen så texten linjerar med rubrikerna och hover-
           plattan ändå har luft runt texten. */
        padding: 0.5rem 0.8rem;
        margin: 0 -0.8rem;
    }
    .mm-col__header .mm-cta {
        font-size: 11px;
    }
}

/* ── Mobile (< 1024px) — stack ──────────────────────────────── */
@media (max-width: 1023px) {

    .mm-row--robots,
    .mm-row--other {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mm-col {
        padding: var(--space-m) var(--space-m) var(--space-s);
        border-bottom:  1px solid var(--mm-border);
    }

    .mm-col:last-child {
        border-bottom: none;
    }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mm-prod__label,
    .mm-cta {
        transition: none;
    }
    .mm-prod:hover .mm-prod__label {
        transform: none;
    }
}

/* ── Panelens glidning ─────────────────────────────────────────
   Bricks öppnar panelen med translateY(27px), en elementinställning i
   sidhuvudsmallen (#brxe-byapzw.open > .brx-dropdown-content), och stängt
   läge hade ingen transform: panelen gled alltså 27 px varje gång. Det
   stängda läget ligger nu 0.4rem ovanför det öppna, samma glidning som
   marknadsväljaren. Slutpositionen är orörd.
   Ändras 27px i byggaren måste värdet här följa med, annars blir
   glidningen längre eller kortare — ingenting går sönder.
   Med reducerad rörelse: ingen glidning, bara panelens toning. */
@media (prefers-reduced-motion: no-preference) {
    .brxe-dropdown.brx-has-megamenu:not(.open) > .brx-dropdown-content {
        transform: translateY(calc(27px - 0.4rem));
    }
}