/* side-praktik.css — praktikguiderne (hjemmepleje, psykiatri, plejehjem).
   Bygger oven på side-design.css; siderne genereres af _byg/generate-praktik.js. */

/* Kort fortalt: tre trin fra et eksempel */
.sd-kf h3 { display: flex; align-items: center; gap: 8px; }
.sd-kf-nr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-size: .75rem; font-weight: 900; background: var(--problem-color); color: #fff; flex: none; }
.sd-kf-titel { font-weight: 800; font-size: .92rem; color: var(--sd-ink); margin: 2px 0 0; line-height: 1.35; }
.sd-kf-tekst { font-size: .84rem; color: #3b4b63; margin: 0; line-height: 1.5; }

/* Situationer */
.sd-sit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.sd-sit { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--sd-line); background: linear-gradient(180deg, #fff, #fafcff);
  scroll-margin-top: 90px; transition: transform .2s var(--sd-ease), box-shadow .2s, border-color .2s; overflow: hidden; }
.sd-sit::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--problem-color); opacity: .75; }
.sd-sit:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -24px rgba(13, 32, 56, .8); border-color: color-mix(in srgb, var(--problem-color) 45%, #fff); }
.sd-sit-top { display: flex; gap: 11px; align-items: flex-start; }
.sd-sit-ikon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex: none; font-size: 1.3rem; background: color-mix(in srgb, var(--problem-color) 13%, #fff); }
.sd-sit-ikon .pp-icon { width: 1.3rem; height: 1.3rem; color: var(--problem-color); }
.sd-sit h3 { font-size: .98rem; font-weight: 850; letter-spacing: -.01em; color: var(--sd-ink); line-height: 1.3; }
.sd-sit-fsiii { display: block; margin-top: 2px; font-size: .72rem; font-weight: 750; color: color-mix(in srgb, var(--problem-color) 80%, #000); }
.sd-sit > p { font-size: .86rem; line-height: 1.55; color: #3b4b63; }
.sd-sit-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sd-mini { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 750; text-decoration: none;
  color: color-mix(in srgb, var(--problem-color) 75%, #000); background: color-mix(in srgb, var(--problem-color) 10%, #fff); border: 1px solid color-mix(in srgb, var(--problem-color) 22%, #fff); }
a.sd-mini:hover { border-color: var(--problem-color); }
.sd-sit-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 4px; }
.sd-sit-links a { font-size: .82rem; font-weight: 850; color: var(--sd-teal-d); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.sd-sit-links a:first-child { color: var(--sd-navy-2); }
.sd-sit-links a:hover { text-decoration: underline; }

/* Teorier */
.sd-teo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.sd-teo { display: flex; flex-direction: column; gap: 6px; padding: 14px 15px; border-radius: 14px; background: #f6f9fd; border: 1px solid var(--sd-line); }
.sd-teo-tag { align-self: flex-start; font-size: .66rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 8px;
  color: color-mix(in srgb, var(--problem-color) 80%, #000); background: color-mix(in srgb, var(--problem-color) 12%, #fff); }
.sd-teo h3 { font-size: .92rem; font-weight: 850; color: var(--sd-ink); line-height: 1.3; }
.sd-teo p { font-size: .82rem; line-height: 1.55; color: #3b4b63; }
.sd-teo a { margin-top: auto; padding-top: 2px; font-size: .8rem; font-weight: 850; color: var(--sd-teal-d); text-decoration: none; }
.sd-teo a:hover { text-decoration: underline; }

/* Praksis: nummererede trin */
.sd-trin-liste { list-style: none; counter-reset: trin; display: grid; gap: 10px; }
.sd-trin-liste li { counter-increment: trin; position: relative; padding: 14px 16px 14px 60px; border-radius: 14px; background: #f6f9fd; border: 1px solid var(--sd-line); }
.sd-trin-liste li::before { content: counter(trin); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--problem-color), var(--sd-navy-2)); }
.sd-trin-liste h3 { font-size: .95rem; font-weight: 850; color: var(--sd-ink); margin-bottom: 4px; }
.sd-trin-liste p { font-size: .86rem; line-height: 1.6; color: #3b4b63; }

#lovgivning .sd-fold:first-of-type { margin-top: 0; }

@media (max-width: 600px) {
  .sd-sit-grid, .sd-teo-grid { grid-template-columns: 1fr; }
}
/* Kildeafsnit på praktiksiderne (2026-09-28) – mørk tilstand kommer fra side-design.css */
.source-box { background: #f5f8fc; border: 1px solid var(--sd-line, #dbe4ef); border-radius: 12px; padding: 16px 18px; }
.source-box p { font-size: .86rem; color: #475569; margin-bottom: 9px; }
.source-box ul { padding-left: 20px; }
.source-box li { margin: 7px 0; font-size: .9rem; }
.source-box a { color: #1d4ed8; font-weight: 650; }

@media (prefers-color-scheme: dark) {
  .sd-teo a { color: #5fd4c4; } /* 4,3:1 → over 4,5:1 på mørkeblåt (side-praktik.css indlæses efter side-design.css) */
  .sd-sit { background: linear-gradient(180deg, #16294a, #12233b); }
  .sd-sit > p, .sd-teo p, .sd-trin-liste p, .sd-kf-tekst { color: #cfdcec; }
  .sd-sit-ikon { background: #1b3557; }
  .sd-mini { background: #1b3557; border-color: #2a4468; color: #dbe7f5; }
  .sd-teo, .sd-trin-liste li { background: #16294a; }
  .sd-teo-tag { background: #1b3557; color: #dbe7f5; }
  .sd-sit-fsiii { color: #b6c8de; }
  .sd-sit-links a:first-child { color: #9fd9ff; }
}
@media print { .sd-sit, .sd-teo, .sd-trin-liste li { break-inside: avoid; } }