/*
 * Sommerseth FAQ
 *
 * Stilene er bundet til .sommerseth-faq og kan ikke lekke ut i temaet.
 * Alt som kan arves fra sommerseth-2021, arves: skrifttypene (Sharp Sans på
 * overskrifter, Inter på brødtekst), fargene og innholdsbredden .container.
 * Verdiene under er temaets egne variabler fra inc/css/base/_root.scss, med
 * en fast reserveverdi hvis variabelen skulle forsvinne.
 *
 * Ingen bilder, ingen webfonter og ingen JavaScript: trekkspillet er <details>,
 * og alle svar ligger i servert HTML ved sidelasting.
 */

.sommerseth-faq {
    --sf-line: var(--clr-grey-200, hsl(198, 15%, 87%));
    --sf-accent: var(--clr-brand, #007585);
    --sf-accent-soft: var(--clr-brand-50, #f2f8f9);
    --sf-body: var(--clr-body, hsl(192, 6%, 17%));
    --sf-muted: var(--clr-grey-500, hsl(174, 7%, 42%));
    --sf-radius: var(--card-radius, 0px);
    --sf-row-line-height: 1.4;

    margin-top: var(--section-padding-step, 3em);
    margin-bottom: var(--section-padding-step, 3em);
    color: var(--sf-body);
}

.sommerseth-faq *,
.sommerseth-faq *::before,
.sommerseth-faq *::after {
    box-sizing: border-box;
}

/* Overskrifter ------------------------------------------------------------
   H2-ene får i tillegg temaets .section-title, som gir Sharp Sans, vekt 900,
   merkefargen og responsiv størrelse. Her settes bare avstandene. */

.sommerseth-faq__heading {
    margin: 0 0 1.25rem;
}

.sommerseth-faq__category {
    margin: 0 0 2.5rem;
}

.sommerseth-faq__category:last-of-type {
    margin-bottom: 0;
}

.sommerseth-faq__category-heading {
    margin: 0 0 1rem;
    scroll-margin-top: 1.5rem; /* litt luft ved ankerhopp fra innholdsfortegnelsen */
}

.sommerseth-faq__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sommerseth-faq__updated {
    margin: 0 0 1.5rem;
    font-size: var(--font-size-smaller, 0.875rem);
    color: var(--sf-muted);
}

/* Innholdsfortegnelse ----------------------------------------------------- */

.sommerseth-faq__toc {
    margin: 0 0 2.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--sf-accent-soft);
    border-radius: var(--sf-radius);
}

.sommerseth-faq__toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sommerseth-faq__toc li {
    margin: 0;
    padding: 0;
}

.sommerseth-faq__toc li::before {
    content: none; /* temaets lister har egne kuler – ikke her */
}

.sommerseth-faq__toc a {
    color: var(--sf-accent);
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Listen ------------------------------------------------------------------ */

.sommerseth-faq__list {
    border-top: 1px solid var(--sf-line);
}

.sommerseth-faq__item {
    border-bottom: 1px solid var(--sf-line);
}

/* Spørsmålsraden.
   Fast line-height og fast padding, ingen bilder: raden er nøyaktig like høy
   før og etter at siden er ferdig lastet, så det oppstår ingen forskyvning. */
.sommerseth-faq__summary {
    display: block;
    position: relative;
    margin: 0;
    padding: 1.1rem 3rem 1.1rem 0;
    line-height: var(--sf-row-line-height);
    cursor: pointer;
    list-style: none;
    transition: color 0.15s ease-in-out;
    -webkit-tap-highlight-color: transparent;
}

.sommerseth-faq__summary::-webkit-details-marker {
    display: none;
}

.sommerseth-faq__summary::marker {
    content: "";
}

.sommerseth-faq__summary:hover {
    color: var(--sf-accent);
}

.sommerseth-faq__summary:focus-visible {
    outline: 2px solid var(--sf-accent);
    outline-offset: -2px;
}

/* Sharp Sans og h3-størrelsen kommer fra temaet. Her låses bare linjehøyden,
   slik at raden holder samme høyde uansett hvor langt spørsmålet er. */
.sommerseth-faq__question {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: var(--font-weight-bold, 700);
    line-height: inherit;
    color: inherit;
}

/* Vinkelen er tegnet i CSS – ingen ikonfont og ingen SVG som må lastes. */
.sommerseth-faq__summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 0.55rem;
    height: 0.55rem;
    margin-top: -0.4rem;
    border-right: 2px solid var(--sf-accent);
    border-bottom: 2px solid var(--sf-accent);
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.18s ease-in-out;
}

.sommerseth-faq__item[open] > .sommerseth-faq__summary::after {
    transform: rotate(-135deg);
    margin-top: -0.12rem;
}

@media (prefers-reduced-motion: reduce) {
    .sommerseth-faq__summary,
    .sommerseth-faq__summary::after {
        transition: none;
    }
}

/* Svaret ------------------------------------------------------------------ */

.sommerseth-faq__answer {
    padding: 0 3rem 1.35rem 0;
    max-width: 68ch;
    font-size: var(--font-size-copy, 1rem);
    line-height: 1.6;
}

.sommerseth-faq__answer > *:first-child {
    margin-top: 0;
}

.sommerseth-faq__answer > *:last-child {
    margin-bottom: 0;
}

.sommerseth-faq__answer p {
    margin: 0 0 0.75rem;
}

.sommerseth-faq__answer a {
    color: var(--sf-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Lenken tilbake til huben ------------------------------------------------
   Er temaets knappeklasse .buttn lagt til i innstillingene, skal temaet få
   styre utseendet – derfor :not(.buttn) på reglene under. */

.sommerseth-faq__more {
    margin: 1.75rem 0 0;
}

.sommerseth-faq__more-link:not(.buttn) {
    color: var(--sf-accent);
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.sommerseth-faq__more-link:not(.buttn)::after {
    content: " \2192"; /* → */
    text-decoration: none;
    display: inline-block;
    margin-left: 0.25em;
    transition: transform 0.15s ease-in-out;
}

.sommerseth-faq__more-link:not(.buttn):hover::after {
    transform: translateX(3px);
}

/* Reservebredde hvis container-klassen er tømt i innstillingene. */
.sommerseth-faq__wrap {
    width: 100%;
    max-width: var(--content-max-width, 1240px);
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

@media (max-width: 767px) {
    .sommerseth-faq {
        margin-top: var(--block-padding-step, 1.5em);
        margin-bottom: var(--block-padding-step, 1.5em);
    }

    .sommerseth-faq__summary {
        padding-right: 2.25rem;
    }

    .sommerseth-faq__question {
        font-size: var(--font-size-bigger, 1.125rem);
    }

    .sommerseth-faq__answer {
        padding-right: 0;
    }

    .sommerseth-faq__toc {
        padding: 1rem;
    }
}