/* ============================================================
   Kana – criteria cards

   Alla utvalda grafiska värden är variabler. Standardvärdena
   nedan ska stämma med kana_get_design_fields() i PHP; värden
   från Our plugins → Kana → Design skrivs ut efter den här filen
   och vinner. Modalen ligger utanför .kana i sidan, därför sätts
   variablerna på båda.
   ============================================================ */
.kana,
.kana-modal {
    --kana-climate: #3b55a5;
    --kana-climate-bg: #e9ecf5;
    --kana-substances: #c03f28;
    --kana-substances-bg: #faeae4;
    --kana-circularity: #c8923a;
    --kana-circularity-bg: #fdfaee;
    --kana-supply-chain: #af658b;
    --kana-supply-chain-bg: #f7ecf3;
    --kana-roadmap: #58ad6e;
    --kana-roadmap-bg: #ffffff;

    --kana-card-radius: 8px;
    --kana-card-padding: 20px;
    --kana-card-border-width: 0px;
    --kana-card-border-color: #dddddd;
    --kana-card-title-size: 20px;
    --kana-card-text-size: 14px;

    --kana-button-color: #000000;
    --kana-button-border-width: 2px;
    --kana-button-font-size: 13px;

    --kana-filter-all: #111111;
    --kana-filter-climate: #111111;
    --kana-filter-substances: #111111;
    --kana-filter-circularity: #111111;
    --kana-filter-supply-chain: #111111;
    --kana-filter-background: #ffffff;
    --kana-filter-border-width: 1px;
    --kana-filter-radius: 999px;
    --kana-filter-font-size: 12px;

    --kana-modal-width: 900px;
    --kana-modal-padding: 48px;
    --kana-modal-radius: 8px;
    --kana-modal-text-size: 15px;
    --kana-modal-heading-size: 18px;
}

/* ============================================================
   Filterknappar – samma som Yomis: konturpiller med bara text,
   som fylls med knappens färg vid hover och när de är aktiva.
   Varje område har en egen filterfärg (svart som standard),
   skild från kortens områdesfärger. På surfplatta och mobil
   fyller knapparna ett grids kolumner.
   ============================================================ */
.kana-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

/* Lika bred som texten, vänsterställd, inte utsträckt över raden.
   Cirka 34 px hög på desktop; mobil höjer till 44 px touchyta. */
.kana-filter {
    --kana-filter-color: var(--kana-filter-all);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 9px 20px;
    border: var(--kana-filter-border-width) solid var(--kana-filter-color);
    border-radius: var(--kana-filter-radius);
    background: var(--kana-filter-background);
    box-shadow: none;
    color: var(--kana-filter-color);
    font-family: "Source Sans 3", sans-serif;
    font-size: var(--kana-filter-font-size);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    white-space: normal;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.kana-filter--climate      { --kana-filter-color: var(--kana-filter-climate); }
.kana-filter--substances   { --kana-filter-color: var(--kana-filter-substances); }
.kana-filter--circularity  { --kana-filter-color: var(--kana-filter-circularity); }
.kana-filter--supply-chain { --kana-filter-color: var(--kana-filter-supply-chain); }

.kana-filter:hover,
.kana-filter:focus-visible,
.kana-filter.is-active {
    border-color: var(--kana-filter-color);
    background: var(--kana-filter-color);
    color: var(--kana-filter-background);
}

.kana-filter:focus {
    outline: none;
}

.kana-filter:focus-visible {
    outline: 2px solid var(--kana-filter-color);
    outline-offset: 2px;
}

@media screen and (max-width: 1024px) {
    .kana-filters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .kana-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .kana-filter {
        min-height: 44px;
    }
}

/* ============================================================
   Grid
   ============================================================ */
.kana-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px auto;
    max-width: 1200px;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    .kana-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .kana-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Kort
   ============================================================ */
.kana-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: var(--kana-card-padding);
    border: var(--kana-card-border-width) solid var(--kana-card-border-color);
    border-radius: var(--kana-card-radius);
    scroll-margin: 120px 0;
    transition: box-shadow 0.3s ease-in-out;
}

.kana-card.is-hidden {
    display: none;
}

.kana-card--climate      { background-color: var(--kana-climate-bg); }
.kana-card--substances   { background-color: var(--kana-substances-bg); }
.kana-card--circularity  { background-color: var(--kana-circularity-bg); }
.kana-card--supply-chain { background-color: var(--kana-supply-chain-bg); }

/* Roadmap är ofta vit mot vit sida och har därför alltid en tunn kant i sin färg */
.kana-card--roadmap {
    --kana-button-color: var(--kana-roadmap);
    background-color: var(--kana-roadmap-bg);
    border: max(1px, var(--kana-card-border-width)) solid #cfe6d6;
    border-color: color-mix(in srgb, var(--kana-roadmap) 40%, #fff);
}

/* Kortet som en länk pekar på (#kortets-slug) */
.kana-card.is-highlighted {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
}

.kana-card__header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.kana-card__icon {
    margin-right: 10px;
    max-width: 50px;
    max-height: 50px;
}

.kana-card__title {
    margin: 0;
    font-family: "Source Sans 3", sans-serif;
    font-weight: 700;
    font-size: var(--kana-card-title-size);
    line-height: 1.4;
}

.kana-card__content {
    margin-top: 10px;
    font-family: "Source Sans 3", sans-serif;
    font-weight: 400;
    font-size: var(--kana-card-text-size);
    line-height: 1.4;
}

.kana-card__actions {
    margin-top: auto;
    padding-top: 10px;
}

/* ============================================================
   Knapp – Avadas "icon position"-hover, samma lösning som i
   The Hero. Vid hover byter vänster och höger padding plats
   (knappen ändrar aldrig storlek), utgående ikon glider ut åt
   höger och inkommande glider in till vänster om texten.
   Retur efter hover fördröjs så att ikonerna aldrig överlappar.
   ============================================================ */
.kana-button {
    --kana-button-icon-size: var(--kana-button-font-size);
    --kana-button-pad-y: calc(9px - var(--kana-button-border-width));
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    padding: var(--kana-button-pad-y) 37px var(--kana-button-pad-y) 15px;
    border: var(--kana-button-border-width) solid var(--kana-button-color);
    border-radius: 30px;
    background: transparent;
    color: var(--kana-button-color);
    font-family: "Source Sans 3", sans-serif;
    font-size: var(--kana-button-font-size);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 17px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.2s, border-color 0.3s,
                padding 0.4s cubic-bezier(0.21, 0.6, 0.35, 1) 125ms;
}

.kana-button:hover,
.kana-button:focus-visible {
    padding: var(--kana-button-pad-y) 15px var(--kana-button-pad-y) 37px;
    background-color: var(--kana-button-color);
    color: #fff;
    text-decoration: none;
}

.kana-button:focus-visible {
    outline: 2px solid var(--kana-button-color);
    outline-offset: 2px;
}

/* Ikonerna är Font Awesome (kommer med Avada). Båda ligger absolut
   positionerade, så de påverkar aldrig knappens storlek. */
.kana-button__icon {
    position: absolute;
    top: 50%;
    width: var(--kana-button-icon-size);
    font-size: var(--kana-button-icon-size);
    line-height: 1;
    text-align: center;
    pointer-events: none;
}

/* Utgående ikon – till höger om texten, lämnar vid hover */
.kana-button__icon--out {
    right: 15px;
    transform: translate(0, -50%);
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.21, 0.6, 0.35, 1) 0.25s,
                transform 0.4s cubic-bezier(0.21, 0.6, 0.35, 1) 0.25s;
}

/* Inkommande ikon – väntar utanför till vänster, kommer in vid hover */
.kana-button__icon--in {
    left: 15px;
    transform: translate(calc(-1 * var(--kana-button-icon-size)), -50%);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.21, 0.6, 0.35, 1),
                transform 0.4s cubic-bezier(0.21, 0.6, 0.35, 1);
}

.kana-button:hover .kana-button__icon--out,
.kana-button:focus-visible .kana-button__icon--out {
    transform: translate(var(--kana-button-icon-size), -50%);
    opacity: 0;
    transition-delay: 0s;
}

.kana-button:hover .kana-button__icon--in,
.kana-button:focus-visible .kana-button__icon--in {
    transform: translate(0, -50%);
    opacity: 1;
    transition-delay: 0.25s;
}

/* Utan ikon: symmetrisk padding och ingen förskjutning vid hover */
.kana-button--no-icon,
.kana-button--no-icon:hover,
.kana-button--no-icon:focus-visible {
    padding: var(--kana-button-pad-y) 15px;
}

@media (prefers-reduced-motion: reduce) {
    .kana-filter,
    .kana-button,
    .kana-button__icon,
    .kana-card {
        transition-duration: 0s;
        transition-delay: 0s;
    }
}

/* ============================================================
   Modal
   ============================================================ */
html.kana-modal-open {
    overflow: hidden;
}

.kana-modal {
    width: var(--kana-modal-width);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    padding: 0;
    border: 0;
    border-radius: var(--kana-modal-radius);
    background: #fff;
    color: #333;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.kana-modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.kana-modal__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
}

.kana-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: 36px;
    height: 36px;
    padding: 9px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    cursor: pointer;
}

.kana-modal__close:hover,
.kana-modal__close:focus-visible {
    background: #f0f0f0;
}

.kana-modal__close:focus {
    outline: none;
}

.kana-modal__close:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.kana-modal__close svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Titeln visas inte (som Avada-modalerna) men läses upp av skärmläsare */
.kana-modal__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Överkanten lämnar alltid plats för stängknappen */
.kana-modal__body {
    overflow-y: auto;
    padding: max(56px, var(--kana-modal-padding)) var(--kana-modal-padding) calc(var(--kana-modal-padding) * 0.85);
    font-family: "Source Sans 3", sans-serif;
    font-size: var(--kana-modal-text-size);
    line-height: 1.55;
}

.kana-modal__body > :first-child {
    margin-top: 0;
}

.kana-modal__body h2,
.kana-modal__body h3,
.kana-modal__body h4 {
    margin: 0;
    padding: 24px 0 6px;
    font-family: "Source Sans 3", sans-serif;
    font-weight: 700;
    font-size: var(--kana-modal-heading-size);
    line-height: 1.25;
}

.kana-modal__body h2 {
    font-size: calc(var(--kana-modal-heading-size) * 1.2);
}

.kana-modal__body p {
    margin: 0;
    padding: 0 0 12px;
}

/* Video eller bild överst, i 16:9 som de gamla modalerna */
.kana-modal__media {
    margin-bottom: 8px;
}

.kana-modal__video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    background: #000;
}

.kana-modal__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.kana-modal__image {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 640px) {
    .kana-modal {
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 32px);
    }
    .kana-modal__inner {
        max-height: calc(100vh - 32px);
    }
    .kana-modal__body {
        padding: 52px 20px 28px;
    }
}