/*
    ADHD Norge (org 58) — the design's compact steps (plan.md rev 3). Every rule sits under `.inn-body` and an
    `adhd-` class only ADHD's views render, so the file is inert for every other tenant and for the legacy
    shell. Colours come from the semantic layer, which Cust/58/58.css tints.
*/

.inn-body .adhd-heading {
    margin: 0 0 6px;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-fg);
}

.inn-body .adhd-lead {
    max-width: 88ch;
    margin: 0 0 16px;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--c-fg-muted);
}

/* kompaktSkjema: groups lose their frame and keep their legend. */
.inn-body .adhd-skjema .inn-fieldgroup {
    margin: 0 0 18px;
    padding: 0;
    border: none;
    background: transparent;
}

/* Om deg only: legends stay in the DOM for screen readers, and the help lines go — except the Lokallag hint,
   which the design keeps because it says whether the chosen Fylkeslag has any. */
.inn-body .adhd-skjema--personalia .inn-fieldgroup > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.inn-body .adhd-skjema--personalia .form-text:not([data-lokallag-help]) {
    display: none;
}

/* ------------------------------------------------------------------ Start */

.inn-body .adhd-starttekst {
    max-width: 88ch;
    margin: 0 0 24px;
    font-size: 1.0625rem;
    line-height: 1.55;
}

/* Intro is tenant HTML; its own heading takes the page heading's size. */
.inn-body .adhd-starttekst :is(h1, h2) {
    margin: 0 0 12px;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-fg);
}

.inn-body .adhd-starttekst h3 {
    margin: 18px 0 10px;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
}

.inn-body .adhd-starttekst p {
    margin: 0 0 10px;
}

/* One static card (design profile adhd): a check mark, the title and the price, with the selected look always on —
   border and tint, no outer ring, so it reads as information rather than as a control. Capped at 30rem (owner,
   2026-10-19): title and price stay one row, and a long tenant title wraps to two or three lines (five at the
   design's 360 px). */
.inn-body .adhd-medlemskap-tittel {
    margin: 0 0 12px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-fg);
}

.inn-body .adhd-kort {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 30rem;
    padding: 12px 16px;
    border: 2px solid var(--c-primary);
    border-radius: 9px;
    background: var(--c-primary-tint);
}

.inn-body .adhd-kort-ikon {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--c-primary);
}

.inn-body .adhd-kort-tittel {
    flex: 1;
    min-width: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-fg);
}

/* The title's Standardtext arrives wrapped in the editor's <p>. */
.inn-body .adhd-kort-tittel :is(p, h2, h3) {
    margin: 0;
    font: inherit;
}

.inn-body .adhd-kort-pris {
    flex: none;
    padding-left: 8px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--c-fg);
}

@media (forced-colors: active) {
    .inn-body .adhd-kort {
        border-color: CanvasText;
    }

    .inn-body .adhd-kort-ikon circle {
        fill: CanvasText;
    }

    .inn-body .adhd-kort-ikon path {
        stroke: Canvas;
    }
}

/* ------------------------------------------------------------------ Tilleggsspørsmål */

/* The question keeps its frame even in the compact layout, as the design has it. */
.inn-body .adhd-sporsmal {
    min-width: 0;
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-bg);
}

/* Border only: the message inside is Bootstrap's .text-danger, which holds 4.5:1 on white but not on --c-err-bg. */
.inn-body .adhd-sporsmal:has(#StartCdError:not(:empty)) {
    border: 2px solid var(--c-err);
}

.inn-body .adhd-sporsmal > legend {
    float: none;
    width: auto;
    margin-left: -8px;
    padding: 0 8px;
    font-size: 1.125rem;
    font-weight: 700;
}

.inn-body .form-body .form-check.adhd-valg {
    gap: 12px;
    min-height: 48px;
    margin: 0 0 10px;
    padding: 10px 16px;
    border: 2px solid var(--c-border-strong);
    border-radius: 8px;
    background: var(--c-bg);
}

.inn-body .form-body .form-check.adhd-valg:has(.form-check-input:checked) {
    border-color: var(--c-primary);
    background: var(--c-primary-tint);
}

.inn-body .form-body .adhd-valg .form-check-input {
    width: 22px;
    height: 22px;
    border-color: var(--c-border-strong);
}

/* Bootstrap paints its own checked radio, so accent-color has no effect here; the tenant colour is set directly. */
.inn-body .form-body .adhd-valg .form-check-input:checked {
    border-color: var(--c-primary);
    background-color: var(--c-primary);
}

.inn-body .form-body .adhd-valg .form-check-label {
    flex: 1;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
}

/* ------------------------------------------------------------------ Husstandsmedlemmer */

.inn-body .adhd-skjema .inn-repeat-item {
    margin: 0 0 18px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.inn-body .adhd-skjema #addFamilyMemberBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 2px dashed var(--c-border-strong);
    border-radius: 8px;
    background: var(--c-bg);
    color: var(--c-primary);
    font-weight: 700;
}

.inn-body .adhd-skjema #addFamilyMemberBtn:hover {
    border-color: var(--c-primary);
    background: var(--c-primary-tint);
}

/* ------------------------------------------------------------------ Kontroll: Betalingsmåte */

.inn-body .adhd-betaling {
    min-width: 0;
    margin: 40px 0 0;
    padding: 28px 0 0;
    border: none;
    border-top: 2px solid var(--c-border);
}

.inn-body .adhd-betaling > legend {
    float: none;
    width: 100%;
    margin: 0 0 4px;
    padding: 0;
    font-size: 1.3125rem;
    font-weight: 700;
}

.inn-body .adhd-betaling-lead {
    margin: 0 0 12px;
    color: var(--c-fg-muted);
}

.inn-body .adhd-betaling-valg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 12px;
}

.inn-body .form-body label.adhd-betaling-kort {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    padding: 14px 16px;
    border: 2px solid var(--c-border-strong);
    border-radius: 8px;
    background: var(--c-bg);
    font-weight: 400;
    cursor: pointer;
}

.inn-body .form-body label.adhd-betaling-kort:has(input:checked) {
    border-color: var(--c-primary);
    background: var(--c-primary-tint);
}

.inn-body .adhd-betaling-kort input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--c-primary);
}

.inn-body .adhd-betaling-navn {
    display: block;
    font-weight: 700;
    color: var(--c-fg);
}

.inn-body .adhd-betaling-tekst {
    display: block;
    color: var(--c-fg-muted);
}