/*!
 * WSP Chat – Bageri design: the FAQ pages (list, category, question). Figma "Bageri" →
 * 13:2093 (blue / yellow Anton tiles beside a Roboto title, intro and pill button) and
 * 71:3388 (white card, soft shadow, cream panels with Anton labels).
 * Loads only on FAQ pages, after WSP Chat's faq.css; fonts and the --wsp-chat-* tokens come
 * from bageri.css. Icons: assets/images/icon-*.svg (Figma exports), used as masks so they take
 * the tile's text colour.
 */

/* ── Tokens + page surface ──────────────────────────────────────────────────── */
.wsp-faq-list, .wsp-faq-detail {
  --bageri-yellow: #fcbc00;
  --bageri-ink-on-yellow: #06477a;  /* the blue, darkened to 5.4:1 on the yellow for small text */
  --bageri-card: #ffffff;
  --bageri-shadow: 4px 4px 10px rgba(0, 0, 0, 0.05);
  --bageri-shadow-hover: 0 14px 28px rgba(9, 92, 154, 0.16);
  --_radius: 0px;                   /* the Figma tiles and cards are square; buttons are pills */
  background: var(--wsp-chat-surface);
  color: var(--wsp-chat-text);
  font-family: var(--wsp-chat-font);
  font-size: 17px;
  line-height: 1.5;
}
.wsp-faq-list__inner, .wsp-faq-detail__inner { padding: 40px 20px 64px; }
@media (min-width: 768px) { .wsp-faq-list__inner, .wsp-faq-detail__inner { padding: 64px 32px 88px; } }
@media (min-width: 1200px) { .wsp-faq-list__inner, .wsp-faq-detail__inner { padding: 72px 40px 96px; } }

/* Keyboard focus: a blue ring clear of the element, readable on cream, white, blue and yellow. */
.wsp-faq-list a:focus-visible, .wsp-faq-detail a:focus-visible,
.wsp-faq-list button:focus-visible, .wsp-faq-detail button:focus-visible { outline: 3px solid var(--wsp-chat-primary); outline-offset: 3px; }

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */
.wsp-faq-breadcrumb { margin: 0 0 16px; }
.wsp-faq-breadcrumb__list { font-size: 15px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.wsp-faq-breadcrumb__link {
  color: var(--wsp-chat-primary);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 6px;
  transition: text-decoration-color 0.15s;
}
.wsp-faq-breadcrumb__link:hover { text-decoration: underline; text-decoration-color: var(--bageri-yellow); text-decoration-thickness: 3px; }
.wsp-faq-breadcrumb__item + .wsp-faq-breadcrumb__item::before { color: var(--wsp-chat-primary); font-size: 18px; }
.wsp-faq-breadcrumb__current { color: var(--wsp-chat-muted); font-size: 15px; }

/* ── Page head: title (Figma 13:2085 — Roboto, blue, up to 51 px), intro, count, date ── */
.wsp-faq-list__heading, .wsp-faq-detail__question {
  font-family: var(--wsp-chat-font); font-weight: 700; color: var(--wsp-chat-primary);
  font-size: clamp(34px, 1.6rem + 2.2vw, 51px); line-height: 1.15; letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.wsp-faq-detail__question { font-size: clamp(30px, 1.4rem + 1.7vw, 46px); }
/* No head band here: the cream page and the yellow rule mark the head instead. */
.wsp-faq-list__hero, .wsp-faq-list--category .wsp-faq-list__header, .wsp-faq-detail__header { background: none; box-shadow: none; clip-path: none; padding: 0; }
.wsp-faq-list__header, .wsp-faq-list--category .wsp-faq-list__header, .wsp-faq-detail__header { margin: 0 0 48px; }
.wsp-faq-list__total::before { content: none; }
.wsp-faq-list__intro + .wsp-faq-list__total { margin-top: 0; }
.wsp-faq-detail__header { max-width: 920px; }
/* A short yellow rule closes the head, like the tiles' accent colour. */
.wsp-faq-list__header::after { content: ""; display: block; width: 72px; height: 6px; margin-top: 24px; background: var(--bageri-yellow); }
.wsp-faq-list__intro { color: var(--wsp-chat-text); font-size: 17px; line-height: 1.5; max-width: 36em; margin: 0 0 12px; }
.wsp-faq-list__total { display: block; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; color: var(--wsp-chat-primary); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.wsp-faq-detail__meta {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 6px 14px; border: 0; border-radius: 99px; background: var(--bageri-card); box-shadow: var(--bageri-shadow);
  color: var(--wsp-chat-muted); font-size: 14px;
}
.wsp-faq-detail__meta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bageri-yellow); }

/* ── List page hero: title + intro beside the category tiles (Figma 13:2093) ──── */
.wsp-faq-list__hero { margin: 0 0 72px; }
.wsp-faq-list__hero .wsp-faq-list__header { margin: 0; }
.wsp-faq-list__hero .wsp-faq-categories { margin-top: 40px; }
@media (min-width: 1024px) {
  .wsp-faq-list__hero:has(.wsp-faq-categories) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
  .wsp-faq-list__hero .wsp-faq-categories { margin-top: 0; }
}

/* ── Category tiles ("Bläddra efter kategori") ──────────────────────────────── */
.wsp-faq-categories { margin-top: 80px; padding-top: 0; border-top: 0; }
.wsp-faq-categories__heading { font-family: var(--wsp-chat-font); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--wsp-chat-primary); margin: 0 0 16px; }
.wsp-faq-categories__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 480px) { .wsp-faq-categories__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 900px) { .wsp-faq-categories__list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } }
@media (min-width: 1024px) { .wsp-faq-list__hero .wsp-faq-categories__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wsp-faq-categories__list > li { display: flex; }

.wsp-faq-categories .wsp-faq-categories__link {
  position: relative; flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px;
  min-height: 176px; padding: 28px 56px 28px 28px;
  border: 0; border-radius: 0;
  background: var(--wsp-chat-primary); color: var(--wsp-chat-on-primary);
  font-family: var(--wsp-chat-heading-font); font-weight: 400; font-size: 24px; line-height: 1.2;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (min-width: 1024px) { .wsp-faq-list__hero .wsp-faq-categories .wsp-faq-categories__link { min-height: 220px; padding: 40px 56px 40px 36px; } }
.wsp-faq-categories__list > li:nth-child(even) > .wsp-faq-categories__link { background: var(--bageri-yellow); color: var(--bageri-ink-on-yellow); }
/* Two columns: a checkerboard, as in the Figma (blue, yellow / yellow, blue). */
@media (min-width: 480px) and (max-width: 899px) {
  .wsp-faq-categories__list > li:nth-child(4n + 3) > .wsp-faq-categories__link { background: var(--bageri-yellow); color: var(--bageri-ink-on-yellow); }
  .wsp-faq-categories__list > li:nth-child(4n + 4) > .wsp-faq-categories__link { background: var(--wsp-chat-primary); color: var(--wsp-chat-on-primary); }
}
@media (min-width: 1024px) {
  .wsp-faq-list__hero .wsp-faq-categories__list > li:nth-child(4n + 3) > .wsp-faq-categories__link { background: var(--bageri-yellow); color: var(--bageri-ink-on-yellow); }
  .wsp-faq-list__hero .wsp-faq-categories__list > li:nth-child(4n + 4) > .wsp-faq-categories__link { background: var(--wsp-chat-primary); color: var(--wsp-chat-on-primary); }
}
/* Figma tile icons, in turn: badge, list, speech bubble, cake. */
.wsp-faq-categories__link::before {
  content: ""; flex: none; width: 46px; height: 46px; margin-bottom: 14px;
  background-color: currentColor;
  -webkit-mask: url("../images/icon-badge.svg") left bottom / contain no-repeat;
  mask: url("../images/icon-badge.svg") left bottom / contain no-repeat;
}
.wsp-faq-categories__list > li:nth-child(4n + 2) > .wsp-faq-categories__link::before { -webkit-mask-image: url("../images/icon-list-check.svg"); mask-image: url("../images/icon-list-check.svg"); width: 40px; height: 42px; }
.wsp-faq-categories__list > li:nth-child(4n + 3) > .wsp-faq-categories__link::before { -webkit-mask-image: url("../images/icon-comment-alt.svg"); mask-image: url("../images/icon-comment-alt.svg"); }
.wsp-faq-categories__list > li:nth-child(4n + 4) > .wsp-faq-categories__link::before { -webkit-mask-image: url("../images/icon-cake-wedding.svg"); mask-image: url("../images/icon-cake-wedding.svg"); }
/* Arrow in the top right corner: the whole tile is the link. */
.wsp-faq-categories__link::after {
  content: ""; position: absolute; top: 32px; right: 30px; width: 12px; height: 12px;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.wsp-faq-categories__name { overflow-wrap: anywhere; }
.wsp-faq-categories .wsp-faq-categories__count { display: none; }
/* The worded total ("14 frågor") is visible on the tiles. */
.wsp-faq-categories .wsp-faq-categories__total {
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
  font-family: var(--wsp-chat-font); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.wsp-faq-categories .wsp-faq-categories__link:hover { transform: translateY(-4px); box-shadow: var(--bageri-shadow-hover); }
.wsp-faq-categories .wsp-faq-categories__link:hover::after { transform: translateX(4px) rotate(-45deg); }
/* "You are here": a blue ring with a cream gap, so it reads on both tile colours. */
.wsp-faq-categories .wsp-faq-categories__link[aria-current] { box-shadow: 0 0 0 4px var(--wsp-chat-surface), 0 0 0 7px var(--wsp-chat-primary); }

/* Phones: compact tiles, so the questions start sooner. */
@media (max-width: 479px) {
  .wsp-faq-categories .wsp-faq-categories__link { min-height: 0; padding: 20px 52px 20px 20px; font-size: 22px; }
  .wsp-faq-categories__link::before { width: 34px; height: 34px; margin-bottom: 8px; }
  .wsp-faq-categories__list > li:nth-child(4n + 2) > .wsp-faq-categories__link::before { width: 30px; height: 31px; }
  .wsp-faq-categories__link::after { top: 24px; right: 24px; }
}

/* ── Question rows (list + category) ────────────────────────────────────────── */
.wsp-faq-list__groups { display: grid; gap: 64px; }
.wsp-faq-list__group { margin: 0; }
.wsp-faq-list__group-heading {
  justify-content: space-between;
  font-family: var(--wsp-chat-heading-font); font-weight: 400; color: var(--wsp-chat-primary);
  font-size: clamp(28px, 1.4rem + 1.1vw, 35px); line-height: 1.2;
  margin: 0 0 24px; padding: 0 0 14px; border-bottom: 4px solid var(--bageri-yellow);
}
.wsp-faq-list__group-link { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.wsp-faq-list__group-link:hover { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 3px; }
.wsp-faq-list__group-count { font-family: var(--wsp-chat-font); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wsp-chat-muted); }

.wsp-faq-list__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .wsp-faq-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } }
.wsp-faq-list__item { display: flex; }
.wsp-faq-list .wsp-faq-list__link {
  flex: 1 1 auto; min-height: 76px; gap: 20px;
  padding: 18px 20px 18px 22px;
  background: var(--bageri-card); box-shadow: var(--bageri-shadow);
  border: 0; border-left: 6px solid transparent; border-radius: 0;
  color: var(--wsp-chat-text); font-weight: 400; font-size: 17px; line-height: 1.4;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.wsp-faq-list .wsp-faq-list__link:hover, .wsp-faq-list .wsp-faq-list__link:focus-visible { transform: none; border-left-color: var(--bageri-yellow); color: var(--wsp-chat-primary); box-shadow: var(--bageri-shadow-hover); }
/* The arrow becomes a round button: cream with a blue chevron, blue on hover. */
.wsp-faq-list .wsp-faq-list__arrow {
  position: relative; width: 36px; height: 36px; border: 0; border-radius: 50%; transform: none;
  background: var(--wsp-chat-surface); transition: background-color 0.15s;
}
.wsp-faq-list .wsp-faq-list__arrow::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -5px 0 0 -7px;
  border-right: 2.5px solid var(--wsp-chat-primary); border-bottom: 2.5px solid var(--wsp-chat-primary); transform: rotate(-45deg);
}
.wsp-faq-list .wsp-faq-list__link:hover .wsp-faq-list__arrow, .wsp-faq-list .wsp-faq-list__link:focus-visible .wsp-faq-list__arrow { background: var(--wsp-chat-primary); }
.wsp-faq-list .wsp-faq-list__link:hover .wsp-faq-list__arrow::before, .wsp-faq-list .wsp-faq-list__link:focus-visible .wsp-faq-list__arrow::before { border-color: var(--wsp-chat-on-primary); }

/* "Visa fler frågor": an outlined pill. */
.wsp-faq-list__more { margin: 40px 0 0; gap: 14px; }
.wsp-faq-list__status { color: var(--wsp-chat-muted); font-size: 15px; }
.wsp-faq-list .wsp-faq-list__more-btn {
  height: auto; padding: 16px 36px; border: 2px solid var(--wsp-chat-primary); border-radius: 99px;
  background: transparent; color: var(--wsp-chat-primary);
  font-family: var(--wsp-chat-font); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: background-color 0.15s, color 0.15s;
}
.wsp-faq-list .wsp-faq-list__more-btn:hover { background: var(--wsp-chat-primary); color: var(--wsp-chat-on-primary); }

/* ── Question page: the answer card (Figma 71:3388) ─────────────────────────── */
@media (min-width: 1024px) { .wsp-faq-detail__layout--aside { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 48px; } }
.wsp-faq-detail .wsp-faq-detail__answer {
  background: var(--bageri-card); box-shadow: var(--bageri-shadow); border-radius: 0;
  border: 0; border-top: 6px solid var(--bageri-yellow);
  padding: 32px 24px; font-size: 18px; line-height: 1.65; color: var(--wsp-chat-text);
}
@media (min-width: 768px) { .wsp-faq-detail .wsp-faq-detail__answer { padding: 48px 56px; } }
.wsp-faq-detail__answer p { margin: 0 0 1.1em; }
/* The first paragraph is the short answer: a little larger, in blue (when more follows). */
.wsp-faq-detail__answer > p:first-child:not(:only-child) { font-size: 1.12em; line-height: 1.55; color: var(--wsp-chat-primary); }
.wsp-faq-detail__answer h2, .wsp-faq-detail__answer h3, .wsp-faq-detail__answer h4 {
  font-family: var(--wsp-chat-heading-font); font-weight: 400; color: var(--wsp-chat-primary); line-height: 1.2; margin: 1.6em 0 0.5em;
}
.wsp-faq-detail__answer h2 { font-size: 26px; }
.wsp-faq-detail__answer h3 { font-size: 22px; }
.wsp-faq-detail__answer h4 { font-size: 19px; }
.wsp-faq-detail__answer ul, .wsp-faq-detail__answer ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.wsp-faq-detail__answer li { margin: 0 0 0.45em; padding-left: 0.2em; }
.wsp-faq-detail__answer li::marker { color: var(--wsp-chat-primary); font-weight: 700; }
.wsp-faq-detail .wsp-faq-detail__answer a { color: var(--wsp-chat-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wsp-faq-detail .wsp-faq-detail__answer a:hover { text-decoration-color: var(--bageri-yellow); text-decoration-thickness: 3px; }
.wsp-faq-detail__answer blockquote { margin: 0 0 1.1em; padding: 16px 20px; background: var(--wsp-chat-surface); border-left: 6px solid var(--bageri-yellow); }
.wsp-faq-detail__answer th { background: var(--wsp-chat-surface); color: var(--wsp-chat-primary); }
.wsp-faq-detail__answer table { display: block; overflow-x: auto; }

/* ── Related questions: the card with cream panels (Figma 71:3395) ─────────── */
.wsp-faq-detail .wsp-faq-related { background: var(--bageri-card); box-shadow: var(--bageri-shadow); border-radius: 0; padding: 28px 24px; top: 32px; }
.wsp-faq-related__heading {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--wsp-chat-heading-font); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--wsp-chat-primary);
  margin: 0 0 20px;
}
/* The croissant in a cream circle (Figma 71:3390). */
.wsp-faq-related__heading::before { content: ""; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--wsp-chat-surface) url("../images/icon-croissant.svg") center / 26px auto no-repeat; }
.wsp-faq-related__list { gap: 10px; }
.wsp-faq-detail .wsp-faq-related__link {
  background: var(--wsp-chat-surface); border-radius: 0; border-left: 4px solid transparent;
  padding: 14px 14px 14px 16px; color: var(--wsp-chat-primary); font-size: 16px; line-height: 1.35;
  transition: border-color 0.15s, background-color 0.15s;
}
.wsp-faq-detail .wsp-faq-related__link:hover { border-left-color: var(--bageri-yellow); background: var(--wsp-chat-bg); }
/* "Visa alla 14 frågor": the blue pill (Figma 13:2091). */
.wsp-faq-detail .wsp-faq-related__all {
  display: flex; justify-content: center; gap: 12px; margin-top: 20px; padding: 16px 24px;
  border-radius: 99px; background: var(--wsp-chat-primary); color: var(--wsp-chat-on-primary);
  font-family: var(--wsp-chat-font); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
  transition: background-color 0.15s;
}
.wsp-faq-detail .wsp-faq-related__all:hover { background: #0a6ab2; }
.wsp-faq-detail .wsp-faq-related__all[hidden] { display: none; }
.wsp-faq-related__all .wsp-faq-related__arrow { border-color: currentColor; }

/* ── "Hittade du inte svaret?" — a blue tile with the croissant and a yellow pill ── */
.wsp-faq-list .wsp-faq-ask, .wsp-faq-detail .wsp-faq-ask {
  margin-top: 48px; padding: 32px 28px; gap: 20px 28px;
  background: var(--wsp-chat-primary); color: var(--wsp-chat-on-primary); border: 0; border-radius: 0;
}
@media (min-width: 768px) { .wsp-faq-list .wsp-faq-ask, .wsp-faq-detail .wsp-faq-ask { padding: 40px; } }
.wsp-faq-ask::before { content: ""; flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--wsp-chat-surface) url("../images/icon-croissant.svg") center / 36px auto no-repeat; }
.wsp-faq-ask__heading { font-family: var(--wsp-chat-heading-font); font-weight: 400; font-size: 28px; line-height: 1.2; color: inherit; margin: 0 0 8px; }
.wsp-faq-ask__intro { color: inherit; font-size: 17px; line-height: 1.5; }
.wsp-faq-ask .wsp-faq-ask__btn {
  padding: 18px 36px; background: var(--bageri-yellow); color: var(--bageri-ink-on-yellow);
  font-family: var(--wsp-chat-font); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background-color 0.15s;
}
.wsp-faq-ask .wsp-faq-ask__btn:hover { filter: none; background: var(--wsp-chat-surface); }
.wsp-faq-ask .wsp-faq-ask__btn:focus-visible { outline-color: var(--bageri-yellow); }

/* ── Motion ─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wsp-faq-categories .wsp-faq-categories__link, .wsp-faq-categories__link::after,
  .wsp-faq-list .wsp-faq-list__link, .wsp-faq-list .wsp-faq-list__arrow { transition: none; }
  .wsp-faq-categories .wsp-faq-categories__link:hover, .wsp-faq-categories .wsp-faq-categories__link:hover::after { transform: none; }
  .wsp-faq-categories .wsp-faq-categories__link:hover::after { transform: rotate(-45deg); }
}