/* ==========================================================================
   Nyhedsbrev og footer
   --------------------------------------------------------------------------
   Farverne genbruger de samme variabler som headeren (header-ny.css), saa
   lilla og pink kun er defineret ét sted. Skriften er Nunito ligesom menuen;
   overskrifterne i 700 som i designet.
   ========================================================================== */

/* --- Nyhedsbrevet ("Læsebrevet") ----------------------------------------- */

.alk-nyhedsbrev {
    /* Den varme offwhite bag kassen er designets sidefarve. Den ligger her paa
       afsnittet og ikke paa hele siden, saa resten af butikken staar uroert. */
    background: var(--alk-flade-varm, #fffdf8);
    font-family: "Nunito", "Open Sans", sans-serif;
}

.alk-nyhedsbrev-indre {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 20px;
}

.alk-nyhedsbrev-kasse {
    display: grid;
    /* Tekstspalten er bredere end formularens. Overskriften skal kunne staa
       paa EN linje — den fylder 575 px, og to lige spalter gav kun 536, saa
       den braekkede midt i saetningen. Formularen har rigeligt i resten. */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
    gap: 32px;
    padding: 48px;
    border-radius: 28px;
    background: var(--alk-accent, #e0459b);
    color: #fff;
}

.alk-nyhedsbrev-maerkat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 13px;
    border-radius: 7px;
    /* Gennemsigtig hvid i stedet for en fast farve: saa foelger maerkatet
       med, hvis kassens farve aendres. */
    background: rgba(255, 255, 255, .22);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* Farven skal staa her. Temaet har et globalt `p { color: #373737 }`, og
       maerkatet er et p — uden denne linje arver det ikke kassens hvide. */
    color: #fff;
}

.alk-nyhedsbrev h2 {
    margin: 18px 0 0;
    font-family: "Nunito", "Open Sans", sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

.alk-nyhedsbrev-under {
    /* Samme maal som designet (max-w-md). Underteksten braekker med vilje paa
       to linjer — det er den, der maa fylde to, ikke overskriften. */
    max-width: 28rem;
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

.alk-nyhedsbrev-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Etiketten skal vaere der for skaermlaesere, men designet har den ikke. */
.alk-nyhedsbrev-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.alk-nyhedsbrev-form input[type="email"] {
    flex: 1 1 220px;
    height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: var(--alk-tekst, #2a2135);
}

.alk-nyhedsbrev-form input[type="email"]:focus {
    outline: 3px solid rgba(255, 255, 255, .55);
    outline-offset: 1px;
}

.alk-nyhedsbrev-form button {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: 10px;
    background: var(--alk-primary, #8b3fd4);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: filter .15s ease;
}

.alk-nyhedsbrev-form button:hover { filter: brightness(1.08); }

/* Beskedlinjen ligger under feltet og fylder kun, naar der staar noget.
   Med en fast minimumshoejde tog den 20 px plus mellemrum, og da formularen er
   bundjusteret mod teksten, skubbede de 32 px selve feltet tilsvarende op. */
.alk-nyhedsbrev .newsletter-messages {
    flex: 1 0 100%;
    font-size: 14px;
    font-weight: 600;
}

.alk-nyhedsbrev .newsletter-messages:empty {
    display: none;
}

.alk-nyhedsbrev .newsletter-messages.venter  { color: rgba(255, 255, 255, .8); }
.alk-nyhedsbrev .newsletter-messages.klaret  { color: #fff; }
.alk-nyhedsbrev .newsletter-messages.fejlet  { color: #ffe08a; }

/* --- Footeren ------------------------------------------------------------ */

.alk-footer {
    font-family: "Nunito", "Open Sans", sans-serif;
    background: var(--alk-flade, #f4eefc);
    border-top: 1px solid var(--alk-kant, #e6dcf3);
    color: var(--alk-tekst, #2a2135);
    text-align: left;
}

.alk-footer-indhold {
    display: grid;
    /* Navnespalten er bredere end linkspalterne; resten deler pladsen. De
       falder selv om paa en smal skaerm, fordi hver spalte har en mindstebredde. */
    grid-template-columns: minmax(260px, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: 36px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 20px;
}

.alk-footer-logo {
    display: inline-block;
    font-family: "Fredoka One", "Nunito", sans-serif;
    font-size: 30px;
    line-height: 1;
    color: var(--alk-primary, #8b3fd4);
    text-decoration: none;
}

.alk-footer-logo span { color: var(--alk-accent, #e0459b); }

.alk-footer-om {
    max-width: 30em;
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: #5d5470;
}

.alk-footer-kontakt {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: #5d5470;
}

.alk-footer-kontakt li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 9px;
}

.alk-footer-kontakt .fa {
    width: 16px;
    color: var(--alk-primary, #8b3fd4);
    text-align: center;
}

.alk-footer-kontakt a { color: inherit; text-decoration: none; }
.alk-footer-kontakt a:hover { color: var(--alk-primary, #8b3fd4); }

.alk-footer-sociale {
    display: flex;
    gap: 9px;
    margin-top: 20px;
}

.alk-footer-sociale a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--alk-kant, #e6dcf3);
    border-radius: 10px;
    background: #fff;
    color: var(--alk-tekst, #2a2135);
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}

.alk-footer-sociale a:hover {
    color: var(--alk-primary, #8b3fd4);
    border-color: var(--alk-primary, #8b3fd4);
}

.alk-footer-overskrift {
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--alk-primary, #8b3fd4);
}

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

.alk-footer-spalte li { margin: 0 0 9px; }

.alk-footer-spalte a {
    font-size: 14px;
    line-height: 1.4;
    color: #453c58;
    text-decoration: none;
}

.alk-footer-spalte a:hover { color: var(--alk-primary, #8b3fd4); }

.alk-footer-maerkater {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.alk-footer-maerkater span {
    padding: 4px 9px;
    border: 1px solid var(--alk-kant, #e6dcf3);
    border-radius: 7px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: #5d5470;
}

.alk-footer-bund {
    border-top: 1px solid var(--alk-kant, #e6dcf3);
}

.alk-footer-bund-indhold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 20px;
    font-size: 12px;
    color: #6c6380;
}

.alk-footer-bund-indhold p { margin: 0; }

.alk-footer-bund-links {
    display: flex;
    gap: 24px;
}

.alk-footer-bund-links a { color: inherit; text-decoration: none; }
.alk-footer-bund-links a:hover { color: var(--alk-primary, #8b3fd4); }

/* --- Smalle skærme ------------------------------------------------------- */

@media (max-width: 767px) {
    .alk-nyhedsbrev { padding: 32px 16px; }

    .alk-nyhedsbrev-kasse {
        grid-template-columns: 1fr;
        align-items: start;
        padding: 30px 24px;
        border-radius: 20px;
    }

    .alk-nyhedsbrev h2 { font-size: 27px; }

    .alk-footer-indhold {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 28px;
        padding: 40px 16px;
    }

    .alk-footer-navn { grid-column: 1 / -1; }
}