/**
 * Footer fixes — EFKA theme.
 *
 * Our footer.phtml lays the child blocks out in a CSS **grid**, where Hyvä's original used a
 * flex row. The newsletter and currency-switcher blocks still carry Hyvä's flex width classes
 * (`lg:w-1/4 md:w-1/2`), and inside a grid item those percentages resolve against the CELL, not
 * the row: 25% of a 354 px cell = 89 px. That is why the newsletter input showed as a stub
 * reading "Enter y" and the currency dropdown wrapped "USD - US Dollar" over three lines.
 *
 * Rather than edit the two blocks (they are Hyvä's, and would need re-patching on every update),
 * the grid neutralises the width utilities for its own direct children — which is the correct
 * scope: they are only wrong *because* this container is a grid.
 */

.efka-footer-grid > * {
    width: 100%;
    max-width: none;
}

/* The currency block nests one more column wrapper carrying the same kind of utility. */
.efka-footer-grid > * > [x-data] {
    width: 100%;
}

/* Newsletter: input and button on one line, the input taking the slack. `min-width: 0` because
   a flex item will not shrink below its intrinsic width without it. */
.efka-footer-grid form.subscribe .field.newsletter,
.efka-footer-grid form.subscribe .control {
    flex: 1 1 auto;
    min-width: 0;
}

.efka-footer-grid form.subscribe input {
    width: 100%;
}

/* The currency dropdown's trigger should fill its column and read on one line. */
.efka-footer-grid .relative.inline-block {
    display: block;
}

.efka-footer-grid .relative.inline-block > div > button {
    width: 100%;
    justify-content: space-between;
    white-space: nowrap;
}

/* Hyvä pushes the subscribe button right with `ml-auto`, which made sense in a cramped flex
   row; with the column at its proper width it just strands the button. Align it under the
   field it belongs to. */
.efka-footer-grid form.subscribe button {
    margin-left: 0;
}