/* ==========================================================================
   Selvhjælp Syddjurs — intranet
   Samme farver og skrifter som hjemmesiden (se style.css), men et roligere
   "app-agtigt" layout: topbjælke på computer, bundmenu på telefon.
   ========================================================================== */

@font-face { font-family: 'Literata'; src: url('../fonts/literata-latin-opsz-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('../fonts/literata-latin-opsz-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }

:root {
    --skov: #24401A;
    --skov-2: #33552A;
    --gron: #4C7828;
    --gron-mork: #3B5E1F;
    --lime: #B4C23A;
    --salvie: #E6E8D2;
    --salvie-2: #EEF0DF;
    --creme: #F6F2E9;
    --papir: #FFFDF8;
    --tekst: #24401A;
    --tekst-2: #3F4A3A;
    --tekst-3: #5A6352;
    --lys-tekst: #D3DCC6;
    --streg: #DDD5C3;
    --roed: #A33A2A;
    --roed-lys: #F8E7E2;
    --blaa: #2F5A73;
    --blaa-lys: #E3EDF2;
    --serif: 'Literata', Georgia, serif;
    --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
* { font-variation-settings: "opsz" 40; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--tekst-2);
    background: var(--creme);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
a { color: var(--gron); text-underline-offset: 3px; }
a:hover { color: var(--gron-mork); }
:focus-visible { outline: 3px solid var(--gron); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); color: var(--tekst); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(28px, 4vw, 36px); letter-spacing: -.01em; }
h2 { font-size: 20px; }
p { margin: 0 0 1em; }
.ikon { flex-shrink: 0; }
[hidden] { display: none !important; }

/* ---- Topbjælke ---------------------------------------------------------- */
.in-top { background: var(--skov); color: var(--lys-tekst); position: sticky; top: 0; z-index: 20; }
.in-top-inner { max-width: 1100px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 24px; }
.in-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.in-brand img { border-radius: 50%; background: var(--creme); }
.in-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.in-brand strong { font-family: var(--serif); font-weight: 600; font-size: 16px; }
.in-brand small { color: var(--lime); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.in-brand:hover { color: #fff; }
.in-nav { display: flex; gap: 4px; margin-left: 8px; }
.in-nav a { color: var(--lys-tekst); text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: 15px; }
.in-nav a:hover { color: #fff; background: var(--skov-2); }
.in-nav a.aktiv { background: var(--lime); color: var(--skov); }
.in-bruger { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.in-bruger .in-avatar { background: var(--skov-2); color: var(--lime); }
.in-logud { margin: 0; }
.in-logud button { background: transparent; border: 1px solid #46663A; color: var(--lys-tekst); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.in-logud button:hover { border-color: var(--lime); color: #fff; }

.in-bundmenu { display: none; }

/* ---- Indhold ------------------------------------------------------------ */
.in-main { max-width: 1100px; margin: 0 auto; padding: 32px 20px 64px; }
.in-side-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.in-side-top h1 { margin: 0; }
.in-h-lille { font-size: 24px; }
.in-dim { color: var(--tekst-3); }
.in-lille { font-size: 14px; }
.in-overtitel { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gron); margin-bottom: 6px; }

.in-velkommen { margin-bottom: 28px; }
.in-velkommen h1 { margin-bottom: 4px; }
.in-hurtig { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.in-to-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

.in-kort { background: var(--papir); border: 1px solid var(--streg); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; }
.in-to-kol .in-kort { margin-bottom: 0; }
.in-kort-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.in-kort-top h2 { margin: 0; }
.in-kort-top a { font-size: 14px; font-weight: 500; white-space: nowrap; }
.in-kort-liste { padding: 6px 10px; }
.in-tom { color: var(--tekst-3); margin: 8px 0; }
.in-kort.in-tom { padding: 22px 24px; }

/* ---- Knapper ------------------------------------------------------------ */
.in-knap {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--skov); color: #fff; border: 1px solid var(--skov);
    border-radius: 999px; padding: 10px 20px; font: inherit; font-weight: 600; font-size: 15px;
    text-decoration: none; cursor: pointer; line-height: 1.2;
}
.in-knap:hover { background: var(--gron-mork); border-color: var(--gron-mork); color: #fff; }
.in-knap-lys { background: transparent; color: var(--skov); border-color: var(--streg); }
.in-knap-lys:hover { background: var(--salvie); border-color: var(--salvie); color: var(--skov); }
.in-knap-fuld { width: 100%; margin-top: 8px; }
.in-knap-slet { background: none; border: 1px solid transparent; color: var(--roed); font: inherit; font-size: 15px; font-weight: 500; padding: 10px 14px; border-radius: 999px; cursor: pointer; }
.in-knap-slet:hover { background: var(--roed-lys); }
.in-handlinger { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.in-handlinger form { margin: 0; }

/* ---- Beskeder ----------------------------------------------------------- */
.in-besked { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-weight: 500; }
.in-besked-ok { background: var(--salvie); color: var(--skov); }
.in-besked-fejl { background: var(--roed-lys); color: var(--roed); }

/* ---- Mærker (målgruppe) ------------------------------------------------- */
.in-maerke { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.in-maerke-bestyrelse { background: var(--skov); color: var(--lime); }
.in-maerke-frivillige { background: var(--blaa-lys); color: var(--blaa); }
.in-maerke-alle { background: var(--salvie); color: var(--skov); }
.in-maerke-forbi { background: #EDE8DC; color: var(--tekst-3); }
.in-ny { display: inline-block; background: var(--lime); color: var(--skov); font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; vertical-align: 2px; }

.in-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--salvie); color: var(--skov); font-weight: 600; font-size: 14px; flex-shrink: 0; }

/* ---- Begivenhed i liste ------------------------------------------------- */
.in-beg { display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-radius: 12px; text-decoration: none; color: inherit; }
.in-beg + .in-beg { border-top: 1px solid var(--salvie-2); }
a.in-beg:hover { background: var(--salvie-2); color: inherit; }
.in-beg-dato { width: 52px; height: 56px; border-radius: 12px; background: var(--skov); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }
.in-beg-dato b { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.in-beg-dato small { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--lime); margin-top: 3px; }
.in-beg-dato.forbi { background: #EDE8DC; color: var(--tekst-3); }
.in-beg-dato.forbi small { color: var(--tekst-3); }
.in-beg-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.in-beg-tekst strong { color: var(--tekst); font-weight: 600; }
.in-beg-tekst small { color: var(--tekst-3); font-size: 14px; }

.in-maaned h2 { font-size: 18px; margin: 24px 0 10px; }

/* ---- Opslag i liste ----------------------------------------------------- */
.in-opslag-kort { display: flex; gap: 14px; padding: 14px 10px; border-radius: 12px; text-decoration: none; color: inherit; align-items: flex-start; }
.in-opslag-kort + .in-opslag-kort { border-top: 1px solid var(--salvie-2); }
.in-opslag-kort:hover { background: var(--salvie-2); color: inherit; }
.in-opslag-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.in-opslag-tekst strong { color: var(--tekst); font-weight: 600; }
.in-opslag-kort.ny .in-opslag-tekst strong { font-weight: 700; }
.in-opslag-tekst small { color: var(--tekst-3); font-size: 13px; }
.in-uddrag { color: var(--tekst-2); font-size: 14px; margin-top: 4px; overflow-wrap: anywhere; }
.in-opslag-hoejre { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.in-antal { display: inline-flex; align-items: center; gap: 4px; color: var(--tekst-3); font-size: 13px; }
.in-antal .ikon { width: 16px; height: 16px; }

/* ---- Faner -------------------------------------------------------------- */
.in-faner { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.in-faner a { padding: 7px 16px; border-radius: 999px; text-decoration: none; color: var(--tekst-2); border: 1px solid var(--streg); font-size: 14px; font-weight: 500; background: var(--papir); }
.in-faner a:hover { border-color: var(--gron); color: var(--skov); }
.in-faner a.aktiv { background: var(--skov); color: #fff; border-color: var(--skov); }

/* ---- Detaljevisning ----------------------------------------------------- */
.in-tilbage { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 500; font-size: 15px; margin-bottom: 14px; }
.in-detalje { padding: 28px 32px; }
.in-detalje h1 { margin: 12px 0 14px; }
.in-detalje-top { display: flex; gap: 8px; }
.in-forfatter { display: flex; align-items: center; gap: 12px; }
.in-forfatter > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.in-forfatter strong { color: var(--tekst); }
.in-forfatter small { color: var(--tekst-3); font-size: 13px; }
.in-fakta { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; }
.in-fakta li { display: flex; align-items: center; gap: 10px; color: var(--tekst); font-weight: 500; }
.in-fakta .ikon { color: var(--gron); }
.in-broedtekst { overflow-wrap: anywhere; }
.in-broedtekst p:last-child { margin-bottom: 0; }
.in-detalje .in-broedtekst { font-size: 17px; margin-bottom: 18px; max-width: 70ch; }

.in-kommentarer { max-width: 780px; }
.in-kommentarer > h2 { font-size: 18px; margin: 28px 0 14px; }
.in-kommentar { display: flex; gap: 12px; margin-bottom: 14px; scroll-margin-top: 90px; }
.in-kommentar-krop { background: var(--papir); border: 1px solid var(--streg); border-radius: 4px var(--radius) var(--radius) var(--radius); padding: 12px 16px; flex: 1; min-width: 0; }
.in-kommentar:target .in-kommentar-krop { border-color: var(--gron); box-shadow: 0 0 0 3px var(--salvie); }
.in-kommentar-top { display: flex; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; }
.in-kommentar-top small { flex: 1; min-width: 0; }
.in-kommentar-top strong { color: var(--tekst); }
.in-kommentar-top small { color: var(--tekst-3); font-size: 13px; }
.in-kommentar-slet { margin: 0 0 0 auto; }
.in-kommentar-slet button { background: none; border: 0; color: var(--tekst-3); font: inherit; font-size: 13px; cursor: pointer; padding: 0; }
.in-kommentar-slet button:hover { color: var(--roed); text-decoration: underline; }
.in-svar { background: var(--papir); border: 1px solid var(--streg); border-radius: var(--radius); padding: 18px 20px; margin-top: 8px; scroll-margin-top: 90px; }

/* ---- Formularer --------------------------------------------------------- */
.in-form label { display: block; font-weight: 600; color: var(--tekst); font-size: 14px; margin: 14px 0 6px; }
.in-form label:first-of-type { margin-top: 4px; }
.in-form input[type="text"], .in-form input[type="email"], .in-form input[type="password"],
.in-form input[type="date"], .in-form input[type="time"], .in-form select, .in-form textarea {
    width: 100%; font: inherit; font-size: 16px; color: var(--tekst);
    background: #fff; border: 1px solid var(--streg); border-radius: 10px; padding: 10px 12px;
}
.in-form textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.in-form input:focus, .in-form select:focus, .in-form textarea:focus { outline: none; border-color: var(--gron); box-shadow: 0 0 0 3px var(--salvie); }
.in-form > .in-knap { margin-top: 16px; }
.in-felt-raekke { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }

.in-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 10px; }
.in-dl dt { color: var(--tekst-3); font-size: 14px; }
.in-dl dd { margin: 0; color: var(--tekst); font-weight: 500; overflow-wrap: anywhere; }
.in-kort h2 + .in-dl { margin-top: 6px; }
.in-kort .in-dl + p + h2 { margin-top: 24px; }

/* ---- Login -------------------------------------------------------------- */
body.in-login { background: var(--skov); min-height: 100vh; display: flex; }
body.in-login .in-main { display: flex; align-items: center; justify-content: center; width: 100%; padding: 24px 16px; }
.in-login-boks { background: var(--papir); border-radius: 22px; padding: 36px 32px 28px; width: 100%; max-width: 400px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.in-login-boks .in-form { text-align: left; margin-top: 18px; }
.in-login-logo { border-radius: 50%; margin-bottom: 8px; }
.in-login-boks h1 { margin-bottom: 4px; }
.in-login-boks .in-lille { margin: 14px 0 0; }

/* ---- Tablet og telefon -------------------------------------------------- */
@media (max-width: 900px) {
    .in-to-kol { grid-template-columns: 1fr; }
    .in-to-kol .in-kort { margin-bottom: 0; }
    .in-bruger-navn { display: none; }
}

@media (max-width: 700px) {
    body.in-app { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .in-top-inner { padding: 8px 16px; gap: 12px; }
    .in-nav { display: none; }
    .in-brand strong { font-size: 15px; }
    .in-bundmenu {
        display: grid; grid-template-columns: repeat(4, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        background: var(--papir); border-top: 1px solid var(--streg);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .in-bundmenu a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--tekst-3); font-size: 12px; font-weight: 500; padding: 4px 0; border-radius: 10px; }
    .in-bundmenu a.aktiv { color: var(--skov); }
    .in-bundmenu a.aktiv .ikon { background: var(--salvie); border-radius: 999px; width: 48px; }
    .in-bundmenu .ikon { width: 22px; height: 26px; padding: 2px 0; }
    .in-main { padding: 22px 16px 32px; }
    .in-kort { padding: 18px 16px; border-radius: 14px; }
    .in-kort-liste { padding: 4px 6px; }
    .in-detalje { padding: 20px 18px; }
    .in-side-top .in-knap { padding: 9px 16px; font-size: 14px; }
    .in-opslag-kort { gap: 10px; padding: 12px 6px; }
    .in-opslag-kort > .in-avatar { width: 32px; height: 32px; font-size: 12px; }
    .in-beg { padding: 10px 6px; gap: 12px; }
    .in-beg > .in-maerke { display: none; }
    .in-felt-raekke { grid-template-columns: 1fr 1fr; }
    .in-felt-raekke > div:first-child { grid-column: 1 / -1; }
    .in-kommentar > .in-avatar { width: 30px; height: 30px; font-size: 12px; }
}

/* ---- Profilbilleder ----------------------------------------------------- */
.in-avatar { overflow: hidden; }
.in-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.in-avatar-stor { width: 112px; height: 112px; font-size: 38px; font-family: var(--serif); }
.in-top-avatar { display: inline-flex; border-radius: 50%; text-decoration: none; }
.in-top-avatar:hover .in-avatar { box-shadow: 0 0 0 2px var(--lime); }
.in-profilbillede { display: flex; gap: 24px; align-items: center; }
.in-pb-tekst { flex: 1; min-width: 0; }
.in-pb-tekst h2 { margin-bottom: 4px; }
.in-pb-tekst > p { margin-bottom: 12px; }
.in-pb-form, .in-pb-fjern { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0; vertical-align: middle; }
.in-pb-fjern { margin-left: 4px; }
.in-pb-vaelg { position: relative; overflow: hidden; }
.in-pb-vaelg input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.in-pb-vaelg:focus-within { outline: 3px solid var(--gron); outline-offset: 2px; }
.in-pb-tekst .in-lille { margin: 10px 0 0; }
@media (max-width: 700px) {
    .in-profilbillede { flex-direction: column; text-align: center; gap: 12px; }
    .in-pb-form { justify-content: center; }
    .in-top-avatar .in-avatar { width: 32px; height: 32px; }
}