/*
 * Sensorem site footer.
 *
 * Rendered by Sensorem_Footer (classes/class-sensorem-footer.php), which
 * replaced five Beaver Builder Themer footer layouts. Two bands:
 *
 *   Main band   #155a8c   4 link columns · newsletter · social · legal lines
 *   Brand bar   #0e2f4a   payment and partner badges
 *
 * The palette is the header's, not the old footer's: #155a8c is the header's
 * utility row, #de7541 its CTA, and the type scale and 32px gutter are the same
 * custom properties. The old footer's #2795d0 sat between the header's two
 * blues and its brand bar was #26170d, a brown that belonged to nothing.
 *
 * Everything is prefixed .sc- so nothing bleeds into Beaver Builder layouts,
 * and this file is enqueued with a `fl-child-theme` dependency so it loads
 * after style.css — whose `footer …`, `.footer-link`, `.footer-socials` and
 * `.newsletter` blocks were written for the Themer markup and would otherwise
 * win on source order at equal specificity.
 */

.sc-footer {
    --sc-footer-bg: #155a8c;
    --sc-footer-bar-bg: #0e2f4a;
    --sc-footer-ink: #ffffff;
    --sc-footer-muted: #b9d9ef;
    --sc-footer-rule: rgba(255, 255, 255, 0.16);
    --sc-footer-accent: #de7541;
    --sc-footer-accent-ink: #0e1b22;
    --sc-footer-gutter: 32px;
    --sc-footer-max: 1320px;

    background: var(--sc-footer-bg);
    color: var(--sc-footer-ink);
}

.sc-footer *,
.sc-footer *::before,
.sc-footer *::after {
    box-sizing: border-box;
}

.sc-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sc-footer a {
    color: inherit;
    text-decoration: none;
}

.sc-footer__inner {
    margin: 0 auto;
    max-width: var(--sc-footer-max);
    padding: 56px var(--sc-footer-gutter) 40px;
}

/* ── Columns ──────────────────────────────────────────────────────────────── */

.sc-footer__cols {
    display: grid;
    gap: 40px 32px;
    grid-template-columns: 1fr;
}

/*
 * The newsletter and social blocks share one grid cell on desktop. Below 768px
 * the wrapper becomes `display: contents`, so both become grid items of their
 * own and can be ordered independently — the newsletter to the top, social to
 * the bottom. That is what the Beaver Builder footer achieved by rendering the
 * Formidable form *twice*, once per breakpoint, with the other copy hidden.
 */
.sc-footer__aside {
    display: contents;
}

.sc-footer__newsletter {
    order: -1;
}

.sc-footer__social {
    order: 1;
}

.sc-footer__heading {
    color: var(--sc-footer-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.sc-footer__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-footer__link {
    border-radius: 3px;
    display: block;
    font-size: 16px;
    line-height: 1.4;
    padding: 6px 0;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.sc-footer__link:hover,
.sc-footer__link:focus-visible {
    color: var(--sc-footer-ink);
    text-decoration: underline;
}

.sc-footer .sc-footer__link[aria-current='page'] {
    text-decoration: underline;
}

.sc-footer :focus-visible {
    outline: 2px solid var(--sc-footer-ink);
    outline-offset: 2px;
}

/* ── Newsletter ───────────────────────────────────────────────────────────── */

.sc-footer__lede {
    color: var(--sc-footer-muted);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 14px;
    max-width: 34ch;
}

/*
 * Formidable's own markup, restyled here.
 *
 * ⚠ Deliberately keyed off Formidable's structural classes only — never the
 * per-field container ids. The old rules in style.css named
 * `#frm_field_108_container`, `#frm_field_110_container`, `#frm_submiit_btn`
 * (sic) and four more, so they applied to exactly the two Swedish forms and
 * silently stopped applying to the English ones, which is why English had a
 * bare ">" submit button. The form id is an editor setting now, so nothing
 * here may depend on which form is embedded.
 *
 * ⚠ Two things here have to fight, and the `.sc-footer` prefix on some
 * selectors below is not decoration:
 *
 *  - **Formidable's stylesheet loads after this file.** It is pulled in by the
 *    shortcode as a `<link>` to `admin-ajax.php?action=frmpro_css`, in the body,
 *    so it is later in source order than anything enqueued in <head>. At equal
 *    specificity it wins, which is why the layout rules carry an extra
 *    `.sc-footer` to beat `.frm_form_fields .frm_fields_container`.
 *  - **style.css styles every `.frm_button_submit` as the site's orange pill,
 *    with `!important`** (`a.button, …, .frm_button_submit`, twice over). That
 *    is deliberate site-wide styling, so the button stays a pill here — it
 *    matches the header's CTA — but the size has to be reclaimed with
 *    `!important` of its own. There is no specificity that beats `!important`.
 */
.sc-footer__form .frm_forms,
.sc-footer__form .frm_form_fields,
.sc-footer__form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.sc-footer__form .frm_primary_label,
.sc-footer__form .frm_error_style {
    /* The label is replaced by the placeholder; the red "required" asterisk
       block is Formidable's own styling advice to the editor, not content. */
    display: none !important;
}

.sc-footer__form .frm_form_field {
    margin: 0 0 12px;
    padding: 0;
}

.sc-footer__form input[type='email'],
.sc-footer__form input[type='text']:not(.frm_verify) {
    background: #ffffff;
    border: 0;
    border-radius: 4px;
    color: #17303f;
    flex: 1 1 auto;
    font-family: inherit;
    font-size: 15px;
    height: 44px;
    margin: 0;
    min-width: 0;
    padding: 0 14px;
    width: 100%;
}

.sc-footer__form .frm_submit {
    margin: 0;
}

.sc-footer .sc-footer__form .frm_submit button {
    background-color: var(--sc-footer-accent) !important;
    /* Formidable's `.frm_style_…-style.with_frm_style .frm_submit button` adds
       a 1px #579AF6 border and `box-shadow: 0 1px 1px #eeeeee` — the thin light
       edge under the pill. Same specificity as this rule and loaded later. */
    border: 0 !important;
    box-shadow: none !important;
    /* Keeps style.css's site-wide pill, at a size that fits beside a 44px
       input rather than the 1.1em/1.94em padding a hero button wants. */
    border-radius: 300px !important;
    color: var(--sc-footer-accent-ink);
    cursor: pointer;
    font-family: inherit;
    /* !important because style.css forces `font-size: calc(… + 1rem)` and
       `font-weight: 500` on every .frm_button_submit with !important — too big
       and heavy beside a 15px input. */
    font-size: 14px !important;
    font-weight: 400 !important;
    /* `height` needs !important too: Formidable's
       `.frm_style_…-style.with_frm_style … .frm_button_submit` sets
       `height: auto` at (0,4,1). */
    height: 44px !important;
    line-height: 44px;
    padding: 0 22px !important;
    transition: filter 0.2s ease;
    white-space: nowrap;
    width: auto;
}

.sc-footer .sc-footer__form .frm_submit button:hover {
    filter: brightness(1.08);
}

/*
 * Email input and submit button on one row — the same row before and after
 * the form's script runs.
 *
 * ⚠ **Formidable's JavaScript moves the submit button out of its own field
 * container and into the email field's** once the page is interactive. Server
 * side the button sits in a container of its own *after* the consent checkbox;
 * a second later that container is empty and the button is a child of the
 * email field's. So any layout of the *containers* is right in one state and
 * wrong in the other: gridding them collapsed after the move, and a flex row
 * per container (the previous version) rendered the button on its own row
 * under the checkbox until the script ran, then flipped it up beside the input.
 *
 * The fix is to lay out the *controls*, not their containers. The containers
 * holding the email input or the button are `display: contents`, which makes
 * the input and the button direct grid items of `.frm_fields_container`
 * wherever they are in the DOM, and both are pinned to row 1. Everything else
 * spans the full width below. Nothing depends on the move happening at all.
 *
 * The rules this replaced in style.css named `#frm_field_108_container` and
 * `#frm_submiit_btn` directly, so they applied to two forms only. `:has()`
 * asks the same question without naming a form.
 */
@supports selector(:has(*)) {
    .sc-footer .sc-footer__form .frm_fields_container {
        align-items: center;
        column-gap: 10px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 12px;
    }

    .sc-footer .sc-footer__form .frm_fields_container > * {
        grid-column: 1 / -1;
        margin: 0;
    }

    /* Whichever container the button is in, before or after the move. */
    .sc-footer .sc-footer__form .frm_form_field:has(input[type='email']),
    .sc-footer .sc-footer__form .frm_form_field:has(.frm_submit),
    .sc-footer .sc-footer__form .frm_submit {
        display: contents;
    }

    .sc-footer .sc-footer__form .frm_fields_container input[type='email'] {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
    }

    .sc-footer .sc-footer__form .frm_fields_container .frm_submit button {
        grid-column: 2;
        grid-row: 1;
    }

    /* A validation message inside the email container becomes a grid item too;
       put it under the row rather than in a column. */
    .sc-footer .sc-footer__form .frm_fields_container .frm_error {
        grid-column: 1 / -1;
    }

    /* The container Formidable empties when it moves the button. It still
       holds whitespace, so `:empty` never matched it; it has no elements. */
    .sc-footer .sc-footer__form .frm_form_field:not(:has(*)) {
        display: none;
    }

    /* The honeypot container is a visible, labelled field Formidable expects to
       stay empty — out of flow entirely, not `display: none`, which a bot reads
       as "do not fill this in". */
    .sc-footer .sc-footer__form .frm_fields_container > *:has(.frm_verify) {
        left: -9999px;
        position: absolute;
    }
}

/*
 * The consent label.
 *
 * `!important` throughout because Formidable ships
 * `.with_frm_style .vertical_radio .frm_checkbox label { display: block }`,
 * `.with_frm_style .frm_checkbox label { color: var(--check-label-color) }` and
 * a `text-indent: -20px` — all at (0,3,1), the same specificity as the
 * strongest selector that can be written here, and loaded after this file.
 * Without them the label renders #444444 on #155a8c with the checkbox printed
 * over the first letter: legible only if you knew it was there.
 *
 * The indent-plus-absolute pattern is Formidable's own. Flex and grid were both
 * tried first and neither held, because the consent text is a bare text node
 * with no element around it — an anonymous item, which would not stay in its
 * track.
 */
.sc-footer .sc-footer__form .frm_checkbox label,
.sc-footer .sc-footer__form .frm_opt_container label {
    color: var(--sc-footer-muted) !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    padding-left: 27px !important;
    position: relative;
    text-indent: 0 !important;
}

.sc-footer .sc-footer__form .frm_checkbox input[type='checkbox'] {
    accent-color: var(--sc-footer-accent);
    height: 17px !important;
    left: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    position: absolute !important;
    top: 2px !important;
    width: 17px !important;
}

.sc-footer__form .frm_message,
.sc-footer__form .frm_error {
    color: var(--sc-footer-ink);
    font-size: 14px;
    padding: 0;
    text-align: left;
}

/* Formidable's honeypot — a real, labelled field it expects to stay empty. */
.sc-footer__form .frm_verify,
.sc-footer__form .frm_verify + label,
.sc-footer__form label[for*='field_'] .frm_screen_reader {
    position: absolute !important;
    left: -9999px;
}

/* ── Social ───────────────────────────────────────────────────────────────── */

.sc-footer__social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sc-footer__social-link {
    align-items: center;
    border: 1px solid var(--sc-footer-rule);
    border-radius: 50%;
    color: var(--sc-footer-ink);
    display: flex;
    height: 40px;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    width: 40px;
}

.sc-footer__social-link:hover,
.sc-footer__social-link:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}

.sc-footer__social-link svg {
    display: block;
    height: 19px;
    width: 19px;
}

/* ── Legal lines ──────────────────────────────────────────────────────────── */

.sc-footer__legal {
    border-top: 1px solid var(--sc-footer-rule);
    margin-top: 48px;
    padding-top: 28px;
    text-align: center;
}

.sc-footer__company,
.sc-footer__company p {
    color: var(--sc-footer-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.sc-footer__company a {
    text-decoration: underline;
}

.sc-footer__company a:hover {
    color: var(--sc-footer-ink);
}

.sc-footer__cookie {
    margin: 16px 0 0;
}

/*
 * A real <button>: it opens Cookiebot's dialog on this page and navigates
 * nowhere. The old markup was an <a href="#"> with an inline click handler,
 * which announced itself to a keyboard user as a link to the top of the page.
 */
.sc-footer__cookie-btn {
    background: none;
    border: 0;
    color: var(--sc-footer-muted);
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    padding: 4px 2px;
    text-decoration: underline;
}

/* No hover effect, on purpose. The Beaver Builder skin's global `button:hover`
   (0,1,1) outranks the class above and paints a blue box with a border on
   hover, so every state is pinned back to the resting look here. */
.sc-footer .sc-footer__cookie-btn:hover,
.sc-footer .sc-footer__cookie-btn:focus,
.sc-footer .sc-footer__cookie-btn:active {
    background: none;
    border: 0;
    color: var(--sc-footer-muted);
    text-decoration: underline;
}

.sc-footer .sc-footer__cookie-btn:focus-visible {
    outline: 2px solid var(--sc-footer-ink);
    outline-offset: 2px;
}

.sc-footer__copyright {
    color: var(--sc-footer-muted);
    font-size: 13px;
    letter-spacing: 0.02em;
    margin: 18px 0 0;
}

/* ── Brand bar ────────────────────────────────────────────────────────────── */

.sc-footer__brandbar {
    background: var(--sc-footer-bar-bg);
    padding: 18px var(--sc-footer-gutter);
    text-align: center;
}

/*
 * ⚠ The aspect ratio is declared, not inherited from the width/height
 * attributes. The desktop and mobile strips are different shapes (one row of
 * badges versus two), and <source> carries no dimensions — so the attributes on
 * the <img> would squash the mobile image into the desktop's 599:23 and print
 * its two rows over each other. Sensorem_Footer::ratio_vars() publishes both
 * ratios on the element; these two rules pick one per breakpoint, which also
 * reserves the right height before the image loads.
 */
.sc-footer__brandbar-img {
    aspect-ratio: var(--sc-bb-ratio, auto);
    display: inline-block;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .sc-footer__brandbar-img {
        aspect-ratio: var(--sc-bb-ratio-mobile, var(--sc-bb-ratio, auto));
    }
}

/* ── Hiding per customer type ─────────────────────────────────────────────── */

/*
 * "Dölj för …", set per menu item in Appearance -> Menus and per social account
 * and for the newsletter on Appearance -> Sidfot. Emitted as `data-ct-hide`.
 *
 * ⚠ This has to be CSS, not PHP — the same constraint as the header's copy of
 * these rules in menu.css, where the reasoning is written out in full. WP
 * Rocket serves cached HTML before WordPress boots, so no cacheable page may
 * vary its markup on the sensorem_ct cookie: every visitor of a URL gets
 * byte-identical HTML and the browser decides, off the `data-ct-pref` the
 * customer-type head script puts on <html> before first paint.
 *
 * ⚠ These selectors are also invisible to WP Rocket's Remove Unused CSS, which
 * scans the page *as served* and finds no element carrying `data-ct-pref`.
 * They survive only because Sensorem_Customer_Type::rucss_safelist() safelists
 * `[data-ct-pref]` / `[data-ct-hide]` / `[data-ct-set]`. Adding a rule here
 * with a new attribute of that shape means adding it there too — and clearing
 * Used CSS after the deploy, because the safelist only applies to jobs
 * generated after it ships.
 *
 * Two properties that follow, and are not bugs: the items ship to everyone, so
 * this is tidying the footer and never concealment of anything sensitive; and
 * with JavaScript off no data-ct-pref is set and everyone sees everything.
 */
html[data-ct-pref='privat'] .sc-footer [data-ct-hide~='privat'],
html[data-ct-pref='foretag'] .sc-footer [data-ct-hide~='foretag'],
html[data-ct-pref='kommun'] .sc-footer [data-ct-hide~='kommun'] {
    display: none;
}

/*
 * A column whose every link is hidden hides itself, heading and all —
 * otherwise a heading floats over an empty space, which reads as a broken
 * page rather than a shorter footer.
 *
 * In a browser without `:has()` the whole selector is invalid and dropped, so
 * the column stays visible. That is the safe direction.
 */
html[data-ct-pref='privat'] .sc-footer__col--nav:not(:has(li:not([data-ct-hide~='privat']))),
html[data-ct-pref='foretag'] .sc-footer__col--nav:not(:has(li:not([data-ct-hide~='foretag']))),
html[data-ct-pref='kommun'] .sc-footer__col--nav:not(:has(li:not([data-ct-hide~='kommun']))) {
    display: none;
}

/* ── Breakpoints ──────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .sc-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
     * Back to one cell for the pair. `display: contents` above is the mobile
     * arrangement; from here up the newsletter sits over the social links in a
     * column of their own, so `order` on the children stops meaning anything.
     */
    .sc-footer__aside {
        display: flex;
        flex-direction: column;
        gap: 32px;
        grid-column: 1 / -1;
    }

    .sc-footer__newsletter,
    .sc-footer__social {
        order: 0;
    }

    .sc-footer__aside .sc-footer__social-list {
        justify-content: flex-start;
    }
}

@media (min-width: 1024px) {
    .sc-footer__cols {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sc-footer__aside {
        flex-direction: row;
        gap: 48px;
    }

    .sc-footer__newsletter {
        flex: 1 1 420px;
    }

    .sc-footer__social {
        flex: 0 1 auto;
    }
}

@media (min-width: 1280px) {
    .sc-footer__cols {
        /*
         * Four link columns and the aside on one row. The aside gets more room
         * than a link column because it holds a form: at an even fifth it
         * wrapped the submit button under the input.
         */
        grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(340px, 1.4fr);
    }

    .sc-footer__aside {
        flex-direction: column;
        gap: 32px;
        grid-column: auto;
    }

    .sc-footer__newsletter {
        flex: 0 0 auto;
    }
}

@media (max-width: 599px) {
    .sc-footer {
        --sc-footer-gutter: 20px;
    }

    .sc-footer__inner {
        padding-top: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-footer * {
        transition: none !important;
    }
}