/* ==========================================================================
   Public customer-service page (/kundservice, #3042). Anonymous CMS sections +
   the two contact forms. Builds on the btj.css design tokens, same house style
   as minasidor.css / sok.css.
   ========================================================================== */

.kundservice { display: grid; gap: var(--sp-5); }

.kundservice h1 { font-size: var(--fs-2xl); margin: 0; }

/* Editor-authored HTML (intro + section bodies) — the one raw-render surface.
   `break-word`, deliberately, not `anywhere`: the two differ only in whether the break opportunities
   they introduce count towards min-content, and that difference decides the label column of every
   two-column table in these texts. Under `anywhere` a cell's min-content is one character, so the auto
   table layout starves the label column against the far longer description beside it and breaks the
   labels mid-word ("Barn/vuxe|n", "Ljudb|öcker", "/genr|e"). `break-word` keeps min-content at the
   longest word — the label column sizes to "Utgivningsdatum" — while still breaking a genuinely
   overlong token (a pasted URL) rather than letting it overflow. */
.ks-html { overflow-wrap: break-word; }
.ks-html :is(h1, h2, h3) { font-size: var(--fs-lg); }
.ks-html img { max-width: 100%; height: auto; }
.ks-html a { color: var(--c-link); }

/* --- editorial content classes (ported from legacy btj_07_customerservice.css) --------------
   So arbitrary authored HTML matches the legacy customer-service pages. Legacy scoped these under
   the body class .Kundtjanst; here they are scoped to the raw-render surface .ks-html. The fixed
   2010 pixel widths and old right-column margins are dropped — the native page is responsive — and
   the two divider.gif hairlines become border rules, so no image assets are needed. */
.ks-html { line-height: 1.5; }                 /* legacy used line-height:140% on these texts */
.ks-html h1, .ks-html h4 { font-size: var(--fs-lg); }
.ks-html h1, .ks-html h2, .ks-html h3, .ks-html h4 { margin: 0 0 var(--sp-2); }
.ks-html p { margin: 0 0 var(--sp-3); }
.ks-html .Indent { margin-left: var(--sp-4); }
.ks-html .InternalLinks { line-height: 1.5; }

/* .Divider was a divider.gif hairline that also cleared floats. */
.ks-html .Divider {
    clear: both;
    margin: var(--sp-4) 0;
    height: 0;
    border-top: 1px solid var(--c-border);
    background: none;
}

/* Floated editorial images (staff portraits, guide illustrations). */
.ks-html img.FloatLeft { float: left; margin: 0 var(--sp-5) var(--sp-3) 0; }
.ks-html img.FloatRight { float: right; margin: 0 0 var(--sp-3) var(--sp-5); }

/* Layout tables (staff grids, guide columns). Legacy: td padding 20px, top-aligned, 140% line.
   No fixed widths — let them reflow; the images inside already cap at 100%, and a too-wide table
   scrolls inside its own box rather than pushing the page sideways. */
.ks-html table { max-width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-3); }
.ks-html table.Indent { display: block; margin-left: var(--sp-4); overflow-x: auto; }
.ks-html td { padding: var(--sp-3); vertical-align: top; line-height: 1.5; }

/* Reference term lists (Söktips: kategorier, film-/musikkategorier, genreämnesord, bandtyper).
   Authored as bare text separated by <br>, so each is a single column of up to 45 lines; the
   kundservice.js term-list pass wraps each run in this <ul>. `columns` takes a width, not a count,
   so the same rule gives four columns in the wide main column and one on a phone, with no media
   query. The tonal panel is the design-system way to set a block apart — the surrounding .ks-box is
   --c-surface, so --c-bg reads as a recessed reference block without drawing a border. */
.ks-html ul.ks-termlist {
    margin: var(--sp-2) 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    list-style: none;
    background: var(--c-bg);
    border-radius: var(--radius-sm);
    columns: 11rem;
    column-gap: var(--sp-5);
}

/* Two rules against the same failure — a reader taking one term for two.
   break-inside keeps a term that wraps from being dealt across a column break; the hanging indent
   makes the wrapped half of it unmistakably a continuation rather than the next entry, which is what
   "Häftad. Blått / konstläderband" otherwise looks like in a list where every entry starts flush
   left. Only a handful of the ~156 terms are long enough to wrap, so this costs nothing elsewhere. */
.ks-html ul.ks-termlist li {
    break-inside: avoid;
    padding: 1px 0 1px 1em;
    text-indent: -1em;
}

/* FAQ accordion (dl.Questions). The answers arrive from the DB with an inline style="display:none"
   that legacy's initCustomerService script toggled. Force them open here so the FAQ is readable
   without JS (beats the inline style); kundservice.js re-collapses them and adds the toggles. The
   bottom rule matches legacy's per-answer divider.gif. */
.ks-html dl.Questions { margin: 0; }
.ks-html dd.Answer {
    display: block !important;
    margin: var(--sp-2) 0 var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
}
.ks-html dt.Question { margin-top: var(--sp-3); font-weight: 600; }
.ks-html.is-accordion dd.Answer[hidden] { display: none !important; }
.ks-html.is-accordion dt.Question {
    cursor: pointer;
    padding-left: 1.25em;
    text-indent: -1.25em;
}
.ks-html.is-accordion dt.Question::before { content: "▸ "; color: var(--c-text-muted); }
.ks-html.is-accordion dt.Question[aria-expanded="true"]::before { content: "▾ "; }
.ks-html.is-accordion dt.Question:hover { color: var(--c-link); }

/* Two columns on wide screens: authored content left, contact rail right. */
.ks-columns { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 60rem) {
    .ks-columns { grid-template-columns: 1fr minmax(20rem, 24rem); }
}

.ks-main { display: grid; gap: var(--sp-4); }
.ks-aside { display: grid; gap: var(--sp-4); }

/* --- content tabs (progressive enhancement) ---------------------------- */

.ks-tabs { display: grid; gap: var(--sp-4); }

/* Layout only. What a tab LOOKS like is the shared pill in btj.css (the .tab block,
   #3340): the strip wraps by design, so nothing here may draw a rule under the whole
   strip or join the current tab to the panel -- with two rows of tabs the rule sits
   under the wrong one. The selected pill marks the selection by itself, which holds
   on one row or three, and without JS (a scroll-to table of contents, nothing
   selected) the same pills are simply links. */
.ks-tablist { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* The active tab already names the panel, so hide the in-panel heading when enhanced —
   kept in the DOM as the panel's accessible name (aria-labelledby). */
.ks-tabs.is-enhanced .ks-panel-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* .ks-box sets display:grid, which would otherwise beat the [hidden] attribute's UA display:none
   (author rule wins) and leave every panel visible — the whole tab switch depends on this. */
.ks-panel[hidden] { display: none; }

.ks-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    display: grid;
    gap: var(--sp-3);
}
.ks-box h2 { font-size: var(--fs-lg); margin: 0; }
.ks-box h3 { font-size: var(--fs-base); margin: 0; }
.ks-box p { margin: 0; }

.ks-info a { color: var(--c-link); }

.ks-box-intro { margin: 0 0 var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-sm); }

.ks-jumplink { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
#mediaforfragan { scroll-margin-top: var(--sp-4); }

/* --- forms ------------------------------------------------------------- */

.ks-form { display: grid; gap: var(--sp-3); }
.ks-field { display: grid; gap: var(--sp-1); }
.ks-field > span { font-size: var(--fs-sm); color: var(--c-text-muted); }

.ks-field input,
.ks-field select,
.ks-field textarea {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-family: var(--font-label);
}
.ks-field textarea { resize: vertical; min-height: 6rem; }

.ks-box button {
    justify-self: start;
    padding: var(--sp-2) var(--sp-5);
    border: none;
    background: var(--c-accent);
    color: #fff;
    font-size: var(--fs-base);
    cursor: pointer;
}
.ks-box button:hover { background: var(--c-accent-dark); }

.ks-error { margin: 0; color: var(--c-danger); font-size: var(--fs-sm); }

.ks-saved {
    background: color-mix(in srgb, var(--c-accent) 12%, transparent);
    border: 1px solid var(--c-accent);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-text);
}

/* Honeypot: kept in the DOM for bots, removed from the layout and a11y tree. */
.ks-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   Robotböcker (/robotbocker, the port of legacy Pages/RobotBooksInfo.aspx).
   Shares this sheet because it shares its content: one editor-authored CMS body
   in .ks-html, plus one list the database supplies.
   ========================================================================== */

/* The page is a body and a list, so it is read at the width prose is read at rather than the width
   the grid allows — the same reason the kundservice sections sit in a column and not across the
   page. `ch` and not a pixel width: what limits a line is how many characters are on it. */
.robot-info { max-width: 70ch; }

/* Legacy draws `list-style: circle; list-style-position: inside` with a 20px top margin
   (btj_17_robotbooksinfo.css, three rules and nothing else). What is kept is that it is a bulleted
   list under the body; what is not is the hollow bullet and the inside position, which were 2010
   defaults rather than decisions — an inside marker puts the bullet in the text column, so a
   publisher long enough to wrap starts its second line under its own bullet. The shop has one list
   idiom and this is it. */
.robot-publishers {
    margin: 0;
    padding-left: var(--sp-5);
    display: grid;
    gap: var(--sp-1);
    line-height: 1.5;
}

/* --- /cookies (#3329, docs/CookieConsent.md) ------------------------------------------------
   The declaration: one table per banner category. Prose runs at reading width; the tables take the
   column, and each scrolls inside its own box on a phone so the page body never scrolls sideways.
   Tone rather than grid lines, the design system's rule: the header row sits on the tonal ground and
   rows are separated by a hairline only. */
.cookie-info { max-width: 60rem; }
.cookie-info > p { max-width: 70ch; margin: 0; line-height: 1.5; }

.cookie-category { display: grid; gap: var(--sp-2); }
.cookie-category h2 { font-size: var(--fs-lg); margin: 0; }
.cookie-category p { max-width: 70ch; margin: 0; line-height: 1.5; }

.cookie-table-wrap { overflow-x: auto; }

.cookie-table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.cookie-table th,
.cookie-table td {
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    vertical-align: top;
}

.cookie-table thead th {
    background: var(--c-surface-2);
    font-family: var(--font-label);
    font-weight: 600;
}

.cookie-table tbody tr + tr > * { border-top: 1px solid var(--c-border); }

.cookie-table tbody th { font-weight: 400; }
/* break-word, not anywhere: `anywhere` collapses a cell's min-content to one character and the auto
   table layout would starve the name column (the .ks-html note at the top of this file). */
.cookie-table code { overflow-wrap: break-word; }