/* ==========================================================================
   Kakle – knapper

   Knappene hadde vokst fram ett sted om gangen: noen gronne med morkeblaa
   tekst, noen morkeblaa med hvit, noen gronne med hvit. Det gjorde det
   umulig aa se hva som er hovedhandlingen paa en side - og nar alt roper
   like hoyt, roper ingenting.

   Ett system, tre nivaaer:

     primar     gronn flate, hvit tekst   - det vi vil at folk skal gjore
     sekundar   hvit flate, morkeblaa     - et reelt alternativ
     rolig      bare tekst og ramme       - utveier og justeringer

   Gronnen er den samme som i logoen.

   Denne filen lastes SIST, etter alle de andre. Da trenger vi ikke !important
   for aa vinne over gamle regler spredt rundt i temaet - kildeorden holder.
   Unntaket er den gamle Tilleggs-CSS-en, som skrives inline etter alle
   stilark og bruker !important selv. Den maa vi matche.
   ========================================================================== */

:root {
    --knapp-h: 52px;
    --knapp-radius: 100px;
}

/* --------------------------------------------------------------------------
   1. Felles boksmodell

   Alle knapper deler form. Bare fargen skiller nivaaene, saa en knapp ikke
   kan havne i en annen stoerrelse enn naboen.
   -------------------------------------------------------------------------- */
.knapp,
.kurvknapp,
.oppfordring a,
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.woocommerce .kjopskort .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-account .woocommerce button[type="submit"],
.woocommerce-account .woocommerce .woocommerce-Button,
.kurskort__knapp .button,
.topp form.sok button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--r2);
    min-height: var(--knapp-h);
    padding: 0 var(--r6);
    border: 1.5px solid transparent;
    border-radius: var(--knapp-radius);
    font-family: var(--ui);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--fart), border-color var(--fart),
                color var(--fart), transform var(--fart), box-shadow var(--fart);
}

/* --------------------------------------------------------------------------
   2. Primar - gronn flate, hvit tekst
   -------------------------------------------------------------------------- */
.knapp--primar,
.kurvknapp--kasse,
.oppfordring a:not(.er-rolig),
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.woocommerce .kjopskort .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-account .woocommerce button[type="submit"],
.woocommerce-account .woocommerce .woocommerce-Button,
.kurskort__knapp .button,
.knapp--kjop,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--gronn) !important;
    background-image: none !important;
    border-color: var(--gronn) !important;
    color: var(--tekst-hvit) !important;
    box-shadow: 0 2px 8px rgba(110, 131, 33, .22);
}
.knapp--primar:hover,
.kurvknapp--kasse:hover,
.oppfordring a:not(.er-rolig):hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover,
.woocommerce .kjopskort .single_add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-account .woocommerce button[type="submit"]:hover,
.kurskort__knapp .button:hover,
.knapp--kjop:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background-color: var(--gronn-hover) !important;
    border-color: var(--gronn-hover) !important;
    color: var(--tekst-hvit) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(110, 131, 33, .3);
}
.knapp--primar:active,
.kurvknapp--kasse:active,
.knapp--kjop:active { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. Sekundar - hvit flate, morkeblaa tekst og ramme
   -------------------------------------------------------------------------- */
.knapp--sekundar,
.knapp--kontur,
.kurvknapp--kurv,
.woocommerce-cart .kurvhandlinger .button,
.woocommerce-cart .kurvhandlinger button {
    background-color: var(--hvit) !important;
    background-image: none !important;
    border-color: var(--kant-sterk) !important;
    color: var(--navy) !important;
    box-shadow: none;
}
.knapp--sekundar:hover,
.knapp--kontur:hover,
.kurvknapp--kurv:hover,
.woocommerce-cart .kurvhandlinger .button:hover:not(:disabled),
.woocommerce-cart .kurvhandlinger button:hover:not(:disabled) {
    background-color: var(--navy) !important;
    border-color: var(--navy) !important;
    color: var(--tekst-hvit) !important;
}

/* --------------------------------------------------------------------------
   4. Rolig - en utvei, ikke en handling
   -------------------------------------------------------------------------- */
.kurvknapp--videre,
.oppfordring a.er-rolig {
    background-color: transparent !important;
    border-color: var(--kant) !important;
    color: var(--tekst-svak) !important;
    font-weight: 500;
    box-shadow: none;
}
.kurvknapp--videre:hover {
    background-color: var(--krem) !important;
    border-color: var(--kant-sterk) !important;
    color: var(--navy) !important;
}
.oppfordring a.er-rolig {
    border-color: rgba(255, 255, 255, .35) !important;
    color: var(--tekst-hvit) !important;
}
.oppfordring a.er-rolig:hover {
    background-color: rgba(255, 255, 255, .12) !important;
    border-color: var(--hvit) !important;
    color: var(--tekst-hvit) !important;
}

/* Paa morke flater snur sekundaernivaet: hvit flate mot morkeblaa bakgrunn. */
.knapp--lys {
    background-color: var(--hvit) !important;
    border-color: var(--hvit) !important;
    color: var(--navy) !important;
}
.knapp--lys:hover {
    background-color: var(--krem) !important;
    border-color: var(--krem) !important;
    color: var(--navy) !important;
}
.knapp--kontur-lys {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, .4) !important;
    color: var(--tekst-hvit) !important;
}
.knapp--kontur-lys:hover {
    background-color: rgba(255, 255, 255, .12) !important;
    border-color: var(--hvit) !important;
    color: var(--tekst-hvit) !important;
}

/* --------------------------------------------------------------------------
   5. Soekeknappen i headeren

   Den var morkeblaa. Soek ER hovedhandlingen i en butikk med 2 000 varer,
   saa den hoerer til paa primaernivaet som alt annet vi vil at folk skal
   gjore.
   -------------------------------------------------------------------------- */
.topp form.sok button,
.topp form.sok button[type="submit"] {
    min-height: 0;
    padding: 11px 26px;
    font-size: .9rem;
    background-color: var(--gronn) !important;
    border-color: var(--gronn) !important;
    color: var(--tekst-hvit) !important;
    box-shadow: none;
}
.topp form.sok button:hover,
.topp form.sok button[type="submit"]:hover {
    background-color: var(--gronn-hover) !important;
    border-color: var(--gronn-hover) !important;
    color: var(--tekst-hvit) !important;
    transform: none;
}

/* --------------------------------------------------------------------------
   6. Tilstander
   -------------------------------------------------------------------------- */
.knapp:disabled,
.kurvknapp:disabled,
.woocommerce button.button:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.knapp:focus-visible,
.kurvknapp:focus-visible,
.oppfordring a:focus-visible,
.topp form.sok button:focus-visible,
.woocommerce button.button:focus-visible {
    outline: 3px solid var(--gronn-dyp);
    outline-offset: 2px;
}

/* Kjopsknappen paa produktsiden skal fylle bredden den har faatt. */
.woocommerce .kjopskort .single_add_to_cart_button { flex: 1; min-width: 180px; }

@media (max-width: 600px) {
    :root { --knapp-h: 50px; }
    .knapp,
    .kurvknapp { padding-inline: var(--r5); }
}