/* ---------------------------------------------------------------------------
   Supplement to the vendored v1.16.1 design system.

   The "Gruppesøksmålet mot Riverty" block on the live site uses the
   `illustration-card` component. That component is NOT part of the
   Forbrukerrådet CDN design system (neither v1.16.1 nor v1.19.0) — on the
   live site it ships from the `frgutenberg` WordPress block plugin
   (wp-content/plugins/frgutenberg/dist/style-blocks.css).

   These rules are copied verbatim from that file so the card renders
   identically to forbrukerradet.no. All custom properties referenced
   (--border-radius-md, --spacing-*) and the surface-/text- classes used
   alongside it already exist in the vendored main.css.
--------------------------------------------------------------------------- */

.illustration-card {
  border-radius: var(--border-radius-md);
  display: flex;
  height: 100%;
}

.illustration-card-img {
  align-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
  height: 100%;
  max-width: 200px;
}

.illustration-card-img.photo {
  aspect-ratio: unset;
  height: auto;
}

.illustration-card-img.photo img {
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
  display: flex;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.illustration-card-content {
  align-content: center;
  padding: var(--spacing-8) var(--spacing-7);
  width: calc(100% - 224px);
}

@media screen and (max-width: 1024px) {
  .illustration-card-img {
    max-width: 128px;
  }
  .illustration-card-content {
    padding: var(--spacing-8) var(--spacing-5);
    width: calc(100% - 164px);
  }
}

@media screen and (max-width: 576px) {
  .illustration-card-img {
    max-width: 98px;
  }
  .illustration-card-content {
    width: calc(100% - 124px);
  }
}

/* ---------------------------------------------------------------------------
   KI promo topic block (app/(clone)/forside-ki).

   topic-block is a flex row, and a topic-block-image is a flex item with the
   default min-height:auto — so the near-square, wide source (ki-image.png,
   935x840) both claims more than half the row and imposes its tall intrinsic
   height, making the whole block grow. Pin it to half the width at the same
   3:2 proportions as the other topic-block images (art-fly/art-laan are
   650x433); object-fit:cover (from .topic-block-image) crops the square source
   into that landscape band. Desktop only; below 576px the design system
   already switches the block to a 16/9 stacked column.
--------------------------------------------------------------------------- */
@media screen and (min-width: 577px) {
  .topic-block-image.is-cover {
    width: 50%;
    aspect-ratio: 3 / 2;
    min-height: 0;
  }
}

/* ---------------------------------------------------------------------------
   KI floating action button (app/(clone)/forside-ki, v2+).

   Professional FAB treatment: layered key+ambient shadows, a subtle top-lit
   gradient with an inset highlight, a white ring around the avatar, and
   lift-on-hover / press-on-active micro-interactions. Hover/focus/active
   states are why this lives here rather than in inline styles.
--------------------------------------------------------------------------- */
.ki-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 22px 4px 4px;
  border-radius: 9999px;
  background: #f4e3fa;
  /* Glass outline: a translucent 4px ring that frosts whatever scrolls
     behind it. background-clip keeps the fill inside the ring so the
     backdrop blur shows through the border itself. */
  border: 4px solid rgba(255, 255, 255, 0.35);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #3b1060;
  text-decoration: none;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  box-shadow:
    0 1px 2px rgba(31, 12, 46, 0.08),
    0 6px 16px rgba(124, 58, 173, 0.16);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.ki-fab:hover {
  color: #3b1060;
  text-decoration: none; /* the design system underlines a:hover */
  transform: translateY(-2px);
  background: #f8edfc;
  box-shadow:
    0 2px 4px rgba(31, 12, 46, 0.08),
    0 8px 20px rgba(124, 58, 173, 0.22);
}

.ki-fab:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(31, 12, 46, 0.08),
    0 4px 10px rgba(124, 58, 173, 0.14);
}

.ki-fab:focus-visible {
  outline: 3px solid #7e22ce;
  outline-offset: 2px;
}

.ki-fab-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  display: block;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.85),
    0 1px 3px rgba(31, 12, 46, 0.12);
}

.ki-fab-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ki-fab-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}

.ki-fab-subtitle {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  color: rgba(59, 16, 96, 0.8);
}

/* The avatar art only fills the centre of its square, so zoom in to crop
   out the empty margins on either side. */
.ki-fab-avatar img {
  display: block;
  width: 48px;
  height: 48px;
  transform: scale(1.25);
  transform-origin: center 45%;
}

/* ---------------------------------------------------------------------------
   KI hero CTA (app/(clone)/forside-ki, v3).

   Sits directly under the hero text. A standard design-system .btn — same
   shape, sizing and darken-on-hover behaviour as every other button — with
   the KI brand colours via the .ki-btn modifier.
--------------------------------------------------------------------------- */
/* Mirrors the geometry main.css gives .index-hero .left .hero-text
   (width:100%; max-width:704px; padding:0 64px; margin-left:auto) so the
   CTA's left edge lines up with the hero text above it. */
.ki-hero-cta-wrap {
  width: 100%;
  max-width: 704px;
  padding: 0 64px;
  margin-left: auto;
}

@media screen and (max-width: 1024px) {
  /* Below 1024px main.css centers the hero text (max-width:768px;
     margin:64px auto; text-align:center) — follow suit. */
  .ki-hero-cta-wrap {
    max-width: 768px;
    padding: 0;
    margin: -24px auto 48px;
    text-align: center;
  }
}

/* Colour modifier on top of the design-system .btn. The hover/active
   steps darken one shade, mirroring how .button-default behaves on the
   other surfaces. inline-flex (vs .btn's flex) keeps it shrink-wrapped in
   the wrap div and lets text-align center it below 1024px. */
.ki-btn {
  display: inline-flex;
  background-color: #f4e3fa;
  color: #3b1060;
}

/* Hero placement only: breathing room below the hero text. */
.ki-hero-cta-wrap .ki-btn {
  margin-top: 28px;
}

/* On the pink KI promo topic block the button's pink fill would vanish
   into the identical background — rest on white there (the same pattern
   button-default uses on coloured surfaces). Purple text/chevron and the
   .btn.ki-btn hover/active shades still apply. */
.topic-block .ki-btn {
  background-color: #ffffff;
}

/* KI promo topic block: brand pink background (matches the avatar art so
   the image blends into the box) and dark purple text — replaces the
   surface-secondary sand tones. */
.topic-block.ki-promo {
  background-color: #f4e3fa;
  color: #3b1060;
}

/* v5: image-less, single-column promo whose content is centred and ends in
   the assistant prompt. .topic-block is a flex row by default; with the image
   gone, stack and centre the lone content column and cap its width so the
   heading/body/prompt read as a focused entrypoint rather than a full-width
   banner. */
.topic-block.ki-promo-prompt {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Full width so the example chips can flow left-to-right (wrap across the
   block) like on /ki-assistent, instead of being squeezed one-per-row. */
.topic-block.ki-promo-prompt .topic-block-content {
  width: 100%;
  max-width: none;
}

/* Keep the lead-in heading + body narrow and centred even though the column
   is now full width — only the chips below should span the whole block. The
   prompt itself is already capped (kiStyles.promptArea, max-width 720). */
.topic-block.ki-promo-prompt .topic-block-content > span,
.topic-block.ki-promo-prompt .topic-block-content > h2,
.topic-block.ki-promo-prompt .topic-block-content > p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* v3 feedback gateway: drop the design system's fixed 380px min-height so the
   box hugs its content — compact when it's just the Ja/Nei question, and it
   grows naturally once "Nei" reveals the prompt. Tighter vertical padding too. */
.topic-block.ki-feedback {
  min-height: 0;
}

.topic-block.ki-feedback .topic-block-content {
  padding-top: var(--spacing-7);
  padding-bottom: var(--spacing-8);
}

/* Header nav "KI-assistent" item: KI-branded hover/active instead of the
   design system's default grey. Doubled class outranks the
   .button-default state rules. */
.btn.ki-nav-btn:hover {
  background-color: #f4e3fa;
  color: #3b1060;
}

.btn.ki-nav-btn:active {
  background-color: #e9cdf3;
  color: #3b1060;
}

/* Doubled class: main.css's `.btn:hover:not(.button-default, …)` rule
   gains specificity from its :not() list and would otherwise paint the
   default blue hover over ours. */
.btn.ki-btn:hover {
  background-color: #e2bdf2;
  color: #3b1060;
}

.btn.ki-btn:active {
  background-color: #d3a2e9;
}

.ki-btn:focus-visible {
  outline: 3px solid #7e22ce;
  outline-offset: 2px;
}

/* Purple chevron. main.css sets `.btn i:not([class^=text-],...)` to the
   teal --color-icon-primary, and :not() carries its argument's specificity
   — so a plain `.ki-btn i` loses. Double up the class to outrank it. */
.btn.ki-btn i {
  color: #3b1060;
}

@media (prefers-reduced-motion: reduce) {
  .ki-fab {
    transition: none;
  }
  .ki-fab:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   "Chat med oss" launcher + chat window (app/(clone)/forside-ki, v2 & v3).

   A white sticky pill in the bottom-right corner, styled after the live
   site's support-chat widget: a navy avatar with the Forbrukerrådet "F", a
   bold title and an "Åpent" status line. Clicking it toggles a small chat
   window with two routes (KI-assistent / human support). The launcher is a
   <button>, so hover/focus/active states need real CSS.
--------------------------------------------------------------------------- */
.chat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Matches the .ki-fab AI button geometry: 4px border + 4px pad + 48px
     avatar + 4px pad + 4px border = 64px tall. */
  padding: 4px 22px 4px 4px;
  border-radius: 9999px;
  background: #d9eef3;
  /* Same glass outline as .ki-fab: a translucent 4px ring that frosts
     whatever scrolls behind it. background-clip keeps the fill inside the
     ring so the backdrop blur shows through the border itself. */
  border: 4px solid rgba(255, 255, 255, 0.35);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  color: #1a1a1a;
  text-align: left;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow:
    0 1px 2px rgba(3, 25, 35, 0.08),
    0 6px 16px rgba(3, 74, 102, 0.16);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.chat-fab:hover {
  transform: translateY(-2px);
  background: #e4f3f7;
  box-shadow:
    0 2px 4px rgba(3, 25, 35, 0.08),
    0 8px 20px rgba(3, 74, 102, 0.22);
}

.chat-fab:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(3, 25, 35, 0.08),
    0 4px 10px rgba(3, 74, 102, 0.14);
}

.chat-fab:focus-visible {
  outline: 3px solid #034a66;
  outline-offset: 2px;
}

.chat-fab-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  display: block;
  /* White ring around the avatar, same as .ki-fab-avatar. */
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.85),
    0 1px 3px rgba(3, 25, 35, 0.12);
}

.chat-fab-avatar img {
  display: block;
  width: 48px;
  height: 48px;
}

/* Typography mirrors the .ki-fab AI button (gap 4px, 15px/500 title,
   12.5px/500 subtitle) so the two launchers read as a set. */
.chat-fab-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-fab-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  color: #1a1a1a;
}

.chat-fab-status {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  color: #6b6b6b;
}

/* Chat window — anchored above the launcher. */
.chat-window {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 61;
  width: 360px;
  max-width: calc(100vw - 48px);
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow:
    0 2px 6px rgba(3, 25, 35, 0.1),
    0 16px 40px rgba(3, 74, 102, 0.22);
  animation: chat-window-in 0.18s ease;
}

@keyframes chat-window-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-window-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
  background: #034a66;
  color: #ffffff;
}

.chat-window-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  display: block;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.chat-window-avatar img {
  display: block;
  width: 40px;
  height: 40px;
}

.chat-window-heading {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
}

.chat-window-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.chat-window-status {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.8);
}

.chat-window-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.chat-window-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.chat-window-close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

.chat-window-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-window-intro {
  margin: 0 0 4px;
  font-size: 15px;
  color: #1a1a1a;
}

.chat-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f4f6f7;
  text-decoration: none;
  color: #1a1a1a;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.chat-choice:hover {
  background: #e7edef;
  text-decoration: none;
  color: #1a1a1a;
  transform: translateX(2px);
}

.chat-choice:focus-visible {
  outline: 3px solid #034a66;
  outline-offset: 2px;
}

/* AI row: KI brand pink/purple, matching the .ki-fab / .ki-promo treatment. */
.chat-choice-ai {
  background: #f4e3fa;
  color: #3b1060;
}

.chat-choice-ai:hover {
  background: #ecd3f7;
  color: #3b1060;
}

.chat-choice-ai .chat-choice-subtitle,
.chat-choice-ai .chat-choice-chevron {
  color: rgba(59, 16, 96, 0.75);
}

/* AI avatar — reuse the ki-avatar art. It only fills the centre of its
   square, so zoom in to crop the empty margins (same as .ki-fab-avatar). */
.chat-choice-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  display: block;
}

.chat-choice-avatar img {
  display: block;
  width: 40px;
  height: 40px;
  transform: scale(1.25);
  transform-origin: center 45%;
}

/* Support row: navy/blue, the counterpart to the pink/purple AI row. */
.chat-choice-support {
  background: #d9eef3;
  color: #034a66;
}

.chat-choice-support:hover {
  background: #c7e6ee;
  color: #034a66;
}

.chat-choice-support .chat-choice-subtitle,
.chat-choice-support .chat-choice-chevron {
  color: rgba(3, 74, 102, 0.75);
}

.chat-choice-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 17px;
}

/* Navy chip with a white glyph for contrast against the light-blue row. */
.chat-choice-icon-support {
  background: #034a66;
  color: #ffffff;
}

.chat-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.chat-choice-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.chat-choice-subtitle {
  font-size: 13px;
  line-height: 1.25;
  color: #6b6b6b;
}

.chat-choice-chevron {
  flex-shrink: 0;
  color: #6b6b6b;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .chat-fab,
  .chat-choice {
    transition: none;
  }
  .chat-fab:hover,
  .chat-choice:hover {
    transform: none;
  }
  .chat-window {
    animation: none;
  }
}