/* =====================================================================
   css/ks-wordcards.css – Ordkort (wordcardsmenu.php och wordcards.php)
   ---------------------------------------------------------------------
   Korten och arken har med flit FASTA färger: de är papper som skrivs
   ut, och ska se likadana ut i alla teman. Allt runt omkring använder
   temavariablerna.
   ===================================================================== */

/* ── Kortet ───────────────────────────────────────────────────────── */
.wc-kort {
    position: relative; box-sizing: border-box; flex-shrink: 0;
    color: #1a1a1a; background: transparent;
    font-family: 'Noto Sans', 'Segoe UI', Arial, 'Noto Sans Ethiopic', 'Noto Sans Devanagari', 'Noto Naskh Arabic', sans-serif;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    break-inside: avoid;
}
.wc-ark .wc-kort { position: absolute; }
.wc-kort.wc-skar { outline: .2mm dashed #9a9a9a; outline-offset: 0; }
.wc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.wc-inne { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wc-mitt { width: 100%; text-align: center; }
.wc-mitt > div { overflow: hidden; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.wc-bild { font-size: 1.45em; line-height: 1.12; margin-bottom: .08em; }
.wc-bild img { height: 1.55em; max-width: 100%; object-fit: contain; vertical-align: middle; }
.wc-ord { font-weight: 700; line-height: 1.15; padding: .02em 0; }
.wc-linje { height: .045em; min-height: .2mm; width: 34%; margin: .22em auto .12em; background: var(--wc-k); border-radius: 1mm; }
.wc-rad { font-size: .62em; line-height: 1.28; margin-top: .12em; color: var(--wc-t); }
.wc-bak .wc-rad { font-size: .9em; margin-top: .2em; }
.wc-kod { display: inline-block; font-size: .62em; font-weight: 700; letter-spacing: .06em; opacity: .7;
          margin: 0 .4em; vertical-align: .12em; font-style: normal; }

.wc-stil-fylld .wc-ord, .wc-stil-lekfull .wc-ord { color: var(--wc-t); }
.wc-stil-fylld .wc-rad { color: #262626; }
.wc-stil-lekfull { font-family: 'Fredoka', 'Noto Sans', 'Segoe UI', Arial, 'Noto Sans Ethiopic', 'Noto Sans Devanagari', sans-serif; }
.wc-stil-lekfull .wc-ord { font-weight: 600; }
.wc-stil-lekfull .wc-linje { width: 18%; height: .09em; border-radius: 9mm; }
.wc-stil-klassisk { font-family: Georgia, 'Noto Serif', 'Times New Roman', 'Noto Sans Ethiopic', 'Noto Sans Devanagari', serif; }
.wc-stil-klassisk .wc-ord { font-weight: 700; letter-spacing: .01em; }
.wc-stil-klassisk .wc-rad { font-style: italic; }
.wc-stil-klassisk .wc-linje { width: 22%; height: .03em; }

/* ── Arket ────────────────────────────────────────────────────────── */
.wc-ark { position: relative; box-sizing: border-box; background: #fff; overflow: hidden;
          -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ── Appsidan (wordcards.php) ─────────────────────────────────────── */
main .wc-panel { background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle); border-radius: 16px;
                 padding: 16px 18px; color: var(--color-text-primary); }
main .wc-panel + .wc-panel { margin-top: 12px; }
main .wc-panel h2 { margin: 0 0 8px; font: 800 1.05rem 'Exo 2', sans-serif; color: var(--color-text-primary); }
main .wc-panel p { margin: 6px 0; line-height: 1.45; color: var(--color-text-secondary); }
main .wc-panel ol { margin: 6px 0 0; padding-left: 1.3em; line-height: 1.45; color: var(--color-text-secondary); }
main .wc-panel ol li + li { margin-top: 4px; }
main .wc-summa { font-size: 1.05rem; color: var(--color-text-primary) !important; }
main button.wc-knapp:not(#wc-x) { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    margin-top: 10px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
    font: 700 1rem 'Exo 2', sans-serif; border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-tertiary); color: var(--color-text-primary); }
main button.wc-knapp.wc-huvud:not(#wc-x) { background: #ffd23f; color: #1a1a1a; border-color: #e0b200; }
main button.wc-knapp:not(#wc-x):hover { filter: brightness(1.06); }
main button.wc-knapp:not(#wc-x):disabled { opacity: .5; cursor: not-allowed; }
main .wc-varning { border-left: 4px solid #e08a00; padding: 8px 10px; border-radius: 8px; background: var(--color-bg-tertiary);
                   color: var(--color-text-primary) !important; font-size: .9rem; }
main .wc-varning b { display: block; }
main .wc-forhand { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 0 30px; }
main .wc-forhand .wc-ark { box-shadow: 0 4px 22px rgba(0, 0, 0, .35); flex-shrink: 0; }
main .wc-sidnr { font: 600 .85rem 'Exo 2', sans-serif; color: var(--color-text-secondary); margin-bottom: -10px; }
main .wc-tomt { text-align: center; padding: 40px 16px; color: var(--color-text-primary); }
main .wc-laddar { text-align: center; padding: 40px; color: var(--color-text-secondary); }

/* ── Utskrift ─────────────────────────────────────────────────────── */
#wc-utskrift { display: none; }
@media print {
    html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    body > *:not(#wc-utskrift) { display: none !important; }
    #wc-utskrift { display: block !important; }
    #wc-utskrift .wc-ark { break-after: page; page-break-after: always; margin: 0; box-shadow: none; }
    #wc-utskrift .wc-ark:last-child { break-after: auto; page-break-after: auto; }
}

/* ── Bilder och memory ─────────────────────────────────────────────── */
.wc-bild.wc-foto img { height: 2.1em; max-width: 100%; border-radius: .12em; }
.wc-bara-bild .wc-mitt { height: 100%; }
.wc-bara-bild .wc-bild { height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }
.wc-bara-bild .wc-bild.wc-foto img { height: 100%; width: 100%; object-fit: contain; border-radius: 1mm; }