/*
Theme Name:   Webpsykologen 2026
Theme URI:    https://www.webpsykologen.no/
Description:  Editorial reading theme for the Webpsykologen archive. Child of tagDiv
              Newspaper — the parent and td-composer stay installed purely so that
              17 years of [vc_*] and [td_block_*] shortcodes keep rendering inside
              the_content(). None of the parent's presentation is inherited.
Author:       Veierød Holding
Template:     Newspaper
Version:      0.1.0
Text Domain:  webpsykologen-2026
Requires PHP: 7.4
*/

/* ==========================================================================
   Design tokens

   Copied verbatim from C:\Projects\Hjemmeside\src\pages\ny\theme.css — the
   .ny-theme scope that bebalanced.ai/innsikt runs on. HSL triplets are the
   source of truth; hex in comments is approximate and for orientation only.

   Deliberately NOT the dark .b-theme: functions/_middleware.ts:943 sets
   challengerShare 0.5, so that palette is a live A/B challenger served to
   half of bebalanced.ai's visitors, and abVariant() falls back to 'a'.
   Building an archive on an unresolved experiment would be build-ahead.
   ========================================================================== */

:root {
  /* Core palette */
  --wp-background:      38 45% 95%;   /* cream paper      ~#FAF4EA */
  --wp-foreground:     272 22% 18%;   /* warm plum ink    ~#2D2438 */
  --wp-card:            40 60% 98%;   /* cream card       ~#FFFDF8 */

  --wp-primary:        273 67% 39%;   /* CTA purple       ~#6B21A8 */
  --wp-primary-hover:  273 67% 35%;
  --wp-primary-fg:      38 45% 96%;

  --wp-secondary:       19 88% 45%;   /* display orange   ~#D9530E */

  --wp-muted:           36 38% 89%;   /* sand             ~#F1E8D8 */
  --wp-muted-fg:        27 14% 38%;

  --wp-accent:         278 83% 57%;   /* links / focus    ~#A855F7 */

  --wp-border:          32 22% 80%;
  --wp-ring:           273 67% 39%;

  /* Radii */
  --wp-radius:       1rem;
  --wp-radius-card:  1.5rem;
  --wp-radius-pill:  9999px;

  /* Shadows */
  --wp-shadow-card:    0 16px 40px -20px hsl(273 67% 39% / 0.2);
  --wp-shadow-primary: 0 12px 32px -12px hsl(273 67% 39% / 0.35);

  /* Type */
  --wp-font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --wp-font-body:    'Figtree', 'Poppins', system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --wp-measure:   68ch;   /* article line length */
  --wp-container: 1200px;

  --wp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: hsl(var(--wp-background));
  color: hsl(var(--wp-foreground));
  font-family: var(--wp-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: 'ss01' on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video,
iframe { max-width: 100%; height: auto; }

a { color: hsl(var(--wp-accent)); text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid hsl(var(--wp-ring));
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — visible only on keyboard focus */
.wp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: hsl(var(--wp-primary));
  color: hsl(var(--wp-primary-fg));
  border-radius: 0 0 var(--wp-radius) 0;
  font-weight: 600;
}
.wp-skip:focus { left: 0; }

/* ==========================================================================
   Display type — Fraunces, burnt orange, optical size 72
   ========================================================================== */

.wp-display {
  font-family: var(--wp-font-display);
  font-weight: 580;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 72;
  line-height: 1.1;
  color: hsl(var(--wp-secondary));
  margin: 0;
}

/* ==========================================================================
   Paper grain — keeps the cream from reading as flat white.
   :where() holds specificity at zero so utility classes still win.
   ========================================================================== */

:where(.wp-grain) { position: relative; }

.wp-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(hsl(27 30% 30% / 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wp-container {
  width: 100%;
  max-width: var(--wp-container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.wp-container--reading { max-width: 780px; }

/* ==========================================================================
   Buttons — pill, mirroring .ny-pill
   ========================================================================== */

.wp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding-inline: 2rem;
  border: 0;
  border-radius: var(--wp-radius-pill);
  background-color: hsl(var(--wp-primary));
  color: hsl(var(--wp-primary-fg));
  font-family: var(--wp-font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--wp-ease), box-shadow 0.25s ease, background-color 0.2s ease;
}

.wp-pill:hover {
  transform: scale(1.02);
  box-shadow: var(--wp-shadow-primary);
  background-color: hsl(var(--wp-primary-hover));
  color: hsl(var(--wp-primary-fg));
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .wp-pill { transition: background-color 0.2s ease; }
  .wp-pill:hover { transform: none; }
}

/* Quiet text link with arrow */
.wp-link {
  color: hsl(var(--wp-accent));
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.wp-link:hover {
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==========================================================================
   Eyebrow / meta
   ========================================================================== */

.wp-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--wp-foreground) / 0.55);
}

.wp-meta {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--wp-muted-fg));
}

/* ==========================================================================
   Article card — grid [1fr 220px], mirroring innsikt.tsx
   ========================================================================== */

.wp-card {
  overflow: hidden;
  border: 1px solid hsl(var(--wp-border));
  border-radius: var(--wp-radius-card);
  background-color: hsl(var(--wp-card));
  transition: box-shadow 0.3s ease;
}

.wp-card:hover { box-shadow: var(--wp-shadow-card); }

.wp-card__link {
  display: grid;
  color: inherit;
  text-decoration: none;
}

@media (min-width: 768px) {
  .wp-card__link { grid-template-columns: 1fr 220px; }
}

.wp-card__body { padding: 1.5rem; }

@media (min-width: 768px) {
  .wp-card__body { padding: 1.75rem; }
}

.wp-card__title {
  margin: 0.5rem 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  color: hsl(var(--wp-foreground));
}

@media (min-width: 768px) {
  .wp-card__title { font-size: 1.5rem; }
}

.wp-card__excerpt {
  margin: 0.75rem 0 0;
  color: hsl(var(--wp-muted-fg));
}

.wp-card__more { margin: 1rem 0 0; font-size: 0.875rem; }

.wp-card__media { padding: 0 1.5rem 1.5rem; }

.wp-card__media img {
  width: 100%;
  height: 11rem;
  object-fit: cover;
  border-radius: var(--wp-radius);
  display: block;
}

@media (min-width: 768px) {
  .wp-card__media { padding: 0; }
  .wp-card__media img { height: 100%; border-radius: 0; }
}

/* ==========================================================================
   Article body
   ========================================================================== */

.wp-article__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin-bottom: 1rem;
}

.wp-article__content {
  max-width: var(--wp-measure);
  font-size: 1.125rem;
  line-height: 1.75;
}

.wp-article__content > * + * { margin-top: 1.4em; }

.wp-article__content h2,
.wp-article__content h3,
.wp-article__content h4 {
  font-family: var(--wp-font-display);
  font-weight: 580;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: hsl(var(--wp-foreground));
  margin-top: 2.2em;
  margin-bottom: 0.6em;
}

.wp-article__content h2 { font-size: 1.75rem; }
.wp-article__content h3 { font-size: 1.375rem; }

.wp-article__content blockquote {
  margin-inline: 0;
  padding-left: 1.5rem;
  border-left: 3px solid hsl(var(--wp-secondary));
  font-family: var(--wp-font-display);
  font-size: 1.25rem;
  line-height: 1.5;
  color: hsl(var(--wp-foreground) / 0.85);
}

.wp-article__content img { border-radius: var(--wp-radius); }

.wp-article__content figcaption {
  font-size: 0.875rem;
  color: hsl(var(--wp-muted-fg));
}

/* Legacy shortcode output lives inside .wp-article__content. Do not constrain
   it to the reading measure — WPBakery rows manage their own width. */
.wp-article__content .vc_row,
.wp-article__content .td-block-row,
.wp-article__content [class*='td_block_'] { max-width: none; }

/* ==========================================================================
   Site chrome
   ========================================================================== */

.wp-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid hsl(var(--wp-border));
  background-color: hsl(var(--wp-background) / 0.9);
  backdrop-filter: blur(8px);
}

.wp-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 1rem;
}

.wp-header__brand { margin: 0; }

.wp-header__brand a {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  color: inherit;
  text-decoration: none;
}

.wp-header__name {
  font-family: var(--wp-font-display);
  font-weight: 580;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: hsl(var(--wp-secondary));
}

.wp-header__tagline {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: hsl(var(--wp-muted-fg));
}

.wp-nav__list {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 500;
}

.wp-nav__list a { color: hsl(var(--wp-foreground)); text-decoration: none; }
.wp-nav__list a:hover { color: hsl(var(--wp-accent)); }

.wp-header__search { margin-left: auto; }

.wp-header__search input,
.wp-hero__search input {
  border: 1px solid hsl(var(--wp-border));
  border-radius: var(--wp-radius-pill);
  background-color: hsl(var(--wp-card));
  font: inherit;
  color: inherit;
}

.wp-header__search input {
  width: 15rem;
  max-width: 40vw;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
}

/* Mobile nav is not built yet; the toggle stays hidden rather than shipping a
   button that does nothing. */
.wp-header__toggle { display: none; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Front page
   ========================================================================== */

.wp-hero { padding-block: 5rem 3rem; text-align: center; }
.wp-hero__title { font-size: clamp(2.4rem, 6vw, 4rem); }

.wp-hero__lead {
  max-width: 36rem;
  margin: 1.25rem auto 0;
  font-size: 1.125rem;
  color: hsl(var(--wp-muted-fg));
}

.wp-hero__search { margin-top: 2rem; }
.wp-hero__search input { width: 100%; max-width: 32rem; padding: 1rem 1.5rem; }

.wp-section { padding-block: 3.5rem; }
.wp-section__more { margin-top: 1.5rem; }

.wp-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.wp-topics__list a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid hsl(var(--wp-border));
  border-radius: var(--wp-radius-pill);
  background-color: hsl(var(--wp-card));
  color: hsl(var(--wp-foreground));
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.wp-topics__list a:hover { border-color: hsl(var(--wp-accent)); color: hsl(var(--wp-accent)); }
.wp-topics__n { font-size: 0.75rem; color: hsl(var(--wp-muted-fg)); }

.wp-about__inner { display: flex; gap: 1.5rem; align-items: flex-start; margin-top: 1.25rem; }
.wp-about__name { margin: 0; font-weight: 700; }
.wp-about__bio { margin: 0.5rem 0 1rem; color: hsl(var(--wp-muted-fg)); }

/* The one conversion band on the page. Sand, not a second palette. */
.wp-corpus { padding-block: 4rem; background-color: hsl(var(--wp-muted)); text-align: center; }

.wp-corpus__title {
  margin: 0;
  font-family: var(--wp-font-display);
  font-weight: 580;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: hsl(var(--wp-foreground));
}

.wp-corpus__body { max-width: 34rem; margin: 0 auto; color: hsl(var(--wp-muted-fg)); }
.wp-corpus__action { margin: 1.75rem 0 0; }
.wp-corpus__trust { margin: 0.85rem 0 0; font-size: 0.8125rem; color: hsl(var(--wp-muted-fg)); }

/* Quieter than the trust line, but present. See the note in front-page.php. */
.wp-corpus__price { margin: 0.3rem 0 0; font-size: 0.75rem; color: hsl(var(--wp-muted-fg) / 0.8); }

.wp-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 3rem; margin: 2rem 0; }
.wp-stat { display: flex; flex-direction: column; }

.wp-stat__n {
  font-family: var(--wp-font-display);
  font-weight: 580;
  font-size: 2.4rem;
  line-height: 1;
  color: hsl(var(--wp-secondary));
}

.wp-stat__l {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: hsl(var(--wp-muted-fg));
}

/* ==========================================================================
   Archives and article furniture
   ========================================================================== */

.wp-archive__header,
.wp-article__header,
.wp-page__header { padding-block: 3.5rem 2rem; }

.wp-archive__title { font-size: clamp(2rem, 5vw, 3rem); }
.wp-archive__intro { color: hsl(var(--wp-muted-fg)); }

.wp-archive__list,
.wp-related__list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.25rem; }

.wp-article__meta { margin-top: 1rem; }
.wp-article__figure { margin: 0 0 2rem; }
.wp-article__figure img { border-radius: var(--wp-radius-card); }

.wp-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }

.wp-tags a {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid hsl(var(--wp-border));
  border-radius: var(--wp-radius-pill);
  font-size: 0.8125rem;
  color: hsl(var(--wp-muted-fg));
  text-decoration: none;
}

.wp-tags a:hover { border-color: hsl(var(--wp-accent)); color: hsl(var(--wp-accent)); }

.wp-authorbox { margin-top: 3rem; }
.wp-authorbox .wp-container { display: flex; gap: 1.25rem; align-items: flex-start; }
.wp-authorbox__avatar { border-radius: var(--wp-radius-pill); flex: 0 0 auto; }
.wp-authorbox__name { margin: 0; font-weight: 700; }
.wp-authorbox__bio { margin: 0.4rem 0 0; font-size: 0.9375rem; color: hsl(var(--wp-muted-fg)); }

.wp-related { padding-block: 1rem 3rem; }
.wp-empty { padding-block: 4rem; text-align: center; color: hsl(var(--wp-muted-fg)); }

.wp-pagination,
.wp-article__pages { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2.5rem; }

.wp-pagination .page-numbers {
  padding: 0.5rem 1rem;
  border: 1px solid hsl(var(--wp-border));
  border-radius: var(--wp-radius-pill);
  background-color: hsl(var(--wp-card));
  color: hsl(var(--wp-foreground));
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.wp-pagination .page-numbers.current {
  border-color: transparent;
  background-color: hsl(var(--wp-primary));
  color: hsl(var(--wp-primary-fg));
}

/* ==========================================================================
   Footer — band order is a safety requirement, see footer.php
   ========================================================================== */

.wp-footer__rule { margin: 0; border: 0; border-top: 1px solid hsl(var(--wp-border)); }

.wp-crisis { padding-block: 2.5rem; }

.wp-crisis__title {
  margin: 0 0 0.6rem;
  font-family: var(--wp-font-display);
  font-weight: 580;
  font-size: 1.25rem;
  color: hsl(var(--wp-foreground));
}

.wp-crisis__body { margin: 0; font-size: 0.9375rem; color: hsl(var(--wp-muted-fg)); }
.wp-crisis__more { margin: 0.75rem 0 0; font-size: 0.9375rem; }

.wp-footer__base { padding-block: 2rem 3rem; border-top: 1px solid hsl(var(--wp-border)); }

.wp-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.wp-footer__list a { color: hsl(var(--wp-foreground)); text-decoration: none; }

.wp-footer__disclosure {
  max-width: 44rem;
  margin: 1.5rem 0 0;
  font-size: 0.8125rem;
  color: hsl(var(--wp-muted-fg));
}

.wp-footer__legal { margin: 1rem 0 0; font-size: 0.8125rem; color: hsl(var(--wp-muted-fg)); }

@media (max-width: 760px) {
  .wp-header__inner { gap: 0.75rem; }
  .wp-nav__list { gap: 1rem; font-size: 0.875rem; }
  .wp-header__search { margin-left: 0; width: 100%; }
  .wp-header__search input { width: 100%; max-width: none; }
  .wp-hero { padding-block: 3rem 2rem; }
  .wp-stats { gap: 1.75rem; }
}

/* ==========================================================================
   Search
   ========================================================================== */

.wp-search__again { margin-top: 1.5rem; }
.wp-search__again input { max-width: 28rem; }

.wp-noresults { padding-block: 3rem 4rem; }

.wp-noresults__title {
  margin: 0;
  font-family: var(--wp-font-display);
  font-weight: 580;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: hsl(var(--wp-foreground));
}

.wp-noresults__body { margin: 0.75rem 0 1.75rem; max-width: 34rem; color: hsl(var(--wp-muted-fg)); }
.wp-noresults__topics { margin-top: 0; }

/* ==========================================================================
   The conversation

   2 275 replies over 17 years. This is the part of the archive nothing can
   fake, so it gets real typographic weight rather than utility styling.
   ========================================================================== */

.wp-article__replies { color: inherit; text-decoration: none; border-bottom: 1px solid hsl(var(--wp-border)); }
.wp-article__replies:hover { color: hsl(var(--wp-accent)); border-color: currentColor; text-decoration: none; }

/* Old and still discussed — stated only where both are true. */
.wp-article__endures {
  margin: 1rem 0 0;
  font-family: var(--wp-font-display);
  font-size: 0.9375rem;
  font-style: italic;
  color: hsl(var(--wp-secondary));
}

.wp-comments { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid hsl(var(--wp-border)); }

.wp-comments__title {
  margin: 0 0 2rem;
  font-family: var(--wp-font-display);
  font-weight: 580;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: hsl(var(--wp-foreground));
}

.wp-comments__list,
.wp-comments__list .children { margin: 0; padding: 0; list-style: none; }
.wp-comments__list .children { margin-top: 1.25rem; padding-left: 1.5rem; border-left: 2px solid hsl(var(--wp-border)); }
.wp-comments__list > li + li { margin-top: 1.75rem; }

.wp-comment__inner {
  padding: 1.25rem 1.5rem;
  border: 1px solid hsl(var(--wp-border));
  border-radius: var(--wp-radius-card);
  background-color: hsl(var(--wp-card));
}

/* The author answering in his own thread is the whole point — mark it. */
.wp-comment--author > .wp-comment__inner {
  border-color: hsl(var(--wp-secondary) / 0.45);
  background-color: hsl(var(--wp-secondary) / 0.05);
}

.wp-comment__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.wp-comment__avatar { border-radius: var(--wp-radius-pill); flex: 0 0 auto; }
.wp-comment__author { font-weight: 700; }

.wp-comment__badge {
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--wp-radius-pill);
  background-color: hsl(var(--wp-secondary) / 0.15);
  color: hsl(var(--wp-secondary));
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wp-comment__date {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: hsl(var(--wp-muted-fg));
  text-decoration: none;
}
.wp-comment__date:hover { color: hsl(var(--wp-accent)); }

.wp-comment__body { font-size: 1rem; line-height: 1.65; }
.wp-comment__body > * + * { margin-top: 0.9em; }
.wp-comment__pending { font-style: italic; color: hsl(var(--wp-muted-fg)); }

.wp-comment__foot { margin-top: 0.75rem; }
.wp-comment__reply a { font-size: 0.8125rem; font-weight: 600; color: hsl(var(--wp-accent)); text-decoration: none; }
.wp-comment__reply a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Route to a human, above the box rather than below it. */
.wp-comments__note {
  margin: 2.5rem 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid hsl(var(--wp-secondary));
  background-color: hsl(var(--wp-muted) / 0.6);
  font-size: 0.9375rem;
  color: hsl(var(--wp-muted-fg));
}

.wp-comments__closed { margin-top: 2rem; font-size: 0.9375rem; color: hsl(var(--wp-muted-fg)); }

.comment-respond { margin-top: 1rem; }

.comment-reply-title {
  margin: 0 0 1rem;
  font-family: var(--wp-font-display);
  font-weight: 580;
  font-size: 1.25rem;
  color: hsl(var(--wp-foreground));
}

.comment-form p { margin: 0 0 1rem; }

.comment-form textarea,
.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'] {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid hsl(var(--wp-border));
  border-radius: var(--wp-radius);
  background-color: hsl(var(--wp-card));
  font: inherit;
  font-size: 1rem;
  color: inherit;
}

.comment-form textarea { resize: vertical; min-height: 8rem; }

.comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; }
.comment-form .comment-form-cookies-consent input { margin-top: 0.3rem; }
.comment-form .comment-notes,
.comment-form .logged-in-as { font-size: 0.875rem; color: hsl(var(--wp-muted-fg)); }

@media (max-width: 600px) {
  .wp-comments__list .children { padding-left: 0.9rem; }
  .wp-comment__inner { padding: 1rem 1.1rem; }
}

/* ==========================================================================
   Contents list on long articles

   Sits inside the prose rather than floating beside it: on a reading surface a
   sticky rail competes with the text it is meant to serve, and most of this
   archive is read on a phone where there is no rail to sit in.
   ========================================================================== */

.wp-toc {
  margin-block: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid hsl(var(--wp-secondary));
  background-color: hsl(var(--wp-muted) / 0.55);
  border-radius: 0 var(--wp-radius) var(--wp-radius) 0;
}

.wp-toc__title {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: hsl(var(--wp-foreground) / 0.55);
}

.wp-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wp-toc;
}

.wp-toc__list li {
  counter-increment: wp-toc;
  position: relative;
  padding-left: 1.9rem;
}

.wp-toc__list li + li { margin-top: 0.5rem; }

.wp-toc__list li::before {
  content: counter(wp-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--wp-font-display);
  font-size: 0.8125rem;
  font-weight: 580;
  color: hsl(var(--wp-secondary) / 0.7);
}

.wp-toc__list a {
  color: hsl(var(--wp-foreground));
  font-weight: 500;
  text-decoration: none;
  line-height: 1.45;
}

.wp-toc__list a:hover {
  color: hsl(var(--wp-accent));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Anchored headings must clear the sticky header when jumped to. */
.wp-article__content h2,
.wp-article__content h3 { scroll-margin-top: 6rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.wp-section__lead {
  margin: -0.25rem 0 0;
  color: hsl(var(--wp-muted-fg));
  font-size: 0.9375rem;
}

/* ==========================================================================
   Header corrections (from looking at the rendered page)
   ========================================================================== */

/*
 * The masthead needs more room than the reading container.
 *
 * Logo (165px) + seven nav items (~800px) + a 15rem search field is ~1205px,
 * against 1160px of usable width inside the 1200px container. It wrapped, and
 * the search dropped onto a row of its own — leaving a tall empty band under
 * the nav on every single page.
 */
.wp-header .wp-container {
  max-width: 1440px;
}

@media (min-width: 1024px) {
  .wp-header__inner { flex-wrap: nowrap; }
}

.wp-nav__list { gap: 1.25rem; }
.wp-header__search input { width: 11rem; }

/*
 * The category eyebrow is a link, so it inherited the purple accent and an
 * underline — loud, and competing with the headline directly beneath it. An
 * eyebrow is a label; it should sit back and only colour on hover.
 */
.wp-eyebrow a {
  color: inherit;
  text-decoration: none;
}

.wp-eyebrow a:hover {
  color: hsl(var(--wp-accent));
  text-decoration: none;
}

/* ==========================================================================
   Corrections from the 390px render
   ========================================================================== */

/* Let the browser balance display lines instead of a hardcoded <br>. */
.wp-display,
.wp-hero__title,
.wp-corpus__title,
.wp-card__title { text-wrap: balance; }

.wp-hero__lead { text-wrap: pretty; }

/*
 * Mobile navigation.
 *
 * At 390px the seven menu items overflowed the viewport and "OM WEBPSYKOLOGEN"
 * was simply cut off at the right edge — items existed but could not be
 * reached. Until a real disclosure menu is built, the row scrolls horizontally:
 * nothing is clipped, it needs no JavaScript, and the fade on the right edge
 * says there is more.
 */
@media (max-width: 760px) {
  .wp-header__inner {
    gap: 0.6rem;
    padding-block: 0.75rem;
  }

  .wp-nav {
    position: relative;
    width: 100%;
    min-width: 0;
  }

  .wp-nav__list {
    flex-wrap: nowrap;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 1.5rem;
    scroll-snap-type: x proximity;
  }

  .wp-nav__list::-webkit-scrollbar { display: none; }
  .wp-nav__list > li { flex: 0 0 auto; scroll-snap-align: start; }

  /* Affordance: the row continues past the edge. */
  .wp-nav::after {
    content: '';
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 2rem;
    pointer-events: none;
    background: linear-gradient(to right, transparent, hsl(var(--wp-background)));
  }

  .wp-hero__lead { font-size: 1rem; }
  .wp-hero__search input { padding: 0.85rem 1.15rem; font-size: 0.9375rem; }
}

/* ==========================================================================
   Front page density

   The single 780px column is right for reading an article and wrong for
   scanning a landing page: fifteen stacked cards made the front page 7 934px
   tall, and the corpus band — the only conversion surface on it — landed around
   5 500px, below where almost nobody scrolls.

   Two columns on desktop roughly halves the page and pulls that band up into
   reach. Scoped to .home so archives and search keep the single reading column,
   where a list of results genuinely is a list.
   ========================================================================== */

@media (min-width: 900px) {
  .home .wp-section .wp-container--reading,
  .home .wp-hero .wp-container--reading { max-width: 1080px; }

  /* The hero and the corpus band stay narrow — they are read, not scanned. */
  .home .wp-hero__lead { max-width: 36rem; }

  .home .wp-archive__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  /*
   * Inside the grid the card turns vertical: at ~520px wide the side-by-side
   * 220px thumbnail leaves too little room for a title plus an excerpt.
   */
  .home .wp-archive__list .wp-card__link {
    grid-template-columns: 1fr;
    height: 100%;
    align-content: start;
  }

  .home .wp-archive__list .wp-card__media { order: -1; padding: 0; }

  .home .wp-archive__list .wp-card__media img {
    height: 11rem;
    border-radius: 0;
  }

  .home .wp-archive__list .wp-card__body { padding: 1.4rem 1.5rem; }
}

.wp-about__avatar {
  border-radius: var(--wp-radius-pill);
  flex: 0 0 auto;
}

/* ==========================================================================
   Compact archive index

   Used where a category holds hundreds of posts — the former members-only
   archives. Cards are for browsing; this is for finding.
   ========================================================================== */

.wp-archive__note {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: hsl(var(--wp-muted-fg));
}

.wp-archive__count {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--wp-muted-fg));
}

.wp-index { margin-top: 1rem; }

.wp-index__year {
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid hsl(var(--wp-border));
  font-family: var(--wp-font-display);
  font-weight: 580;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: hsl(var(--wp-secondary));
}

.wp-index__year:first-child { margin-top: 0.5rem; }

.wp-index__list { margin: 0; padding: 0; list-style: none; }

.wp-index__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid hsl(var(--wp-border) / 0.5);
  color: hsl(var(--wp-foreground));
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.wp-index__link:hover {
  color: hsl(var(--wp-accent));
  background-color: hsl(var(--wp-card));
  text-decoration: none;
}

.wp-index__title { flex: 1 1 auto; line-height: 1.4; }

.wp-index__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.8125rem;
  color: hsl(var(--wp-muted-fg));
  font-variant-numeric: tabular-nums;
}

/* Reply count as a quiet chip — on this archive it is the only signal of which
   of six hundred texts actually landed. */
.wp-index__replies {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--wp-radius-pill);
  background-color: hsl(var(--wp-muted));
  text-align: center;
  font-size: 0.75rem;
}

@media (max-width: 600px) {
  .wp-index__link { gap: 0.75rem; padding-block: 0.7rem; }
  .wp-index__meta { font-size: 0.75rem; }
}

/* Year jump-nav for the full-length archives. */
.wp-index__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  position: sticky;
  top: 4.5rem;
  z-index: 5;
  margin: 1.5rem 0 0.5rem;
  padding: 0.6rem 0;
  background-color: hsl(var(--wp-background) / 0.94);
  backdrop-filter: blur(6px);
}

.wp-index__jump a {
  padding: 0.3rem 0.7rem;
  border: 1px solid hsl(var(--wp-border));
  border-radius: var(--wp-radius-pill);
  background-color: hsl(var(--wp-card));
  color: hsl(var(--wp-foreground));
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.wp-index__jump a:hover { border-color: hsl(var(--wp-accent)); color: hsl(var(--wp-accent)); }

.wp-index__year { scroll-margin-top: 8rem; }

/* The crisis band's link follows the same rule as the help box: ink, never the
   accent purple. Crisis information must not wear the product's colour. */
.wp-crisis__more a {
  color: hsl(var(--wp-foreground));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.wp-crisis__more a:hover {
  color: hsl(var(--wp-foreground));
  opacity: 0.7;
}

/* Same rule for the footer crisis band: 113 and 116 123 are ink, never accent. */
.wp-crisis__body a {
  color: hsl(var(--wp-foreground));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wp-crisis__body a:hover {
  color: hsl(var(--wp-foreground));
  opacity: 0.7;
}

/* And in the comment-form note, which carries 116 123 too. */
.wp-comments__note a {
  color: hsl(var(--wp-foreground));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The author bio holds three paragraphs; wpautop turns them into real <p>s. */
.wp-authorbox__bio p { margin: 0 0 0.6em; }
.wp-authorbox__bio p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Classic editor alignment

   419 published posts use .alignleft, 255 .alignright, 182 .aligncenter — some
   856 in all, roughly 45% of the archive. The theme styled none of them, so
   every one of those images sat as an unstyled block with the text stranded
   beneath it.

   Floats are dropped entirely below 600px: a 288px image floated inside a
   390px viewport leaves a text column about a hundred pixels wide.
   ========================================================================== */

.wp-article__content .alignleft,
.wp-article__content .alignright,
.wp-article__content .aligncenter,
.wp-article__content .alignnone { border-radius: var(--wp-radius); }

.wp-article__content .alignleft {
  float: left;
  margin: 0.4rem 1.75rem 1.25rem 0;
  max-width: 45%;
}

.wp-article__content .alignright {
  float: right;
  margin: 0.4rem 0 1.25rem 1.75rem;
  max-width: 45%;
}

.wp-article__content .aligncenter {
  display: block;
  margin-inline: auto;
  margin-block: 1.5rem;
}

.wp-article__content .alignnone { display: block; margin-block: 1.5rem; }

/* Captions travel with the image, not with the paragraph. */
.wp-article__content .wp-caption { max-width: 100%; }
.wp-article__content .wp-caption img { border-radius: var(--wp-radius); }

.wp-article__content .wp-caption-text {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: hsl(var(--wp-muted-fg));
}

/* Headings and the author box must not wrap around a float left hanging. */
.wp-article__content h2,
.wp-article__content h3,
.wp-article__content h4 { clear: both; }
.wp-authorbox { clear: both; }

@media (max-width: 600px) {
  .wp-article__content .alignleft,
  .wp-article__content .alignright {
    float: none;
    max-width: 100%;
    margin: 1.5rem 0;
  }
}

/* ==========================================================================
   Callout inside page content

   Used for routing a reader somewhere urgent — crisis numbers on /kontakt/ and
   /finn-hjelp/. Sand ground and an orange rule so it reads as set apart from
   the prose without borrowing the CTA purple, which belongs to the product.
   ========================================================================== */

.wp-article__content .wp-callout {
  margin-block: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid hsl(var(--wp-secondary));
  border-radius: 0 var(--wp-radius) var(--wp-radius) 0;
  background-color: hsl(var(--wp-muted) / 0.6);
  clear: both;
}

.wp-article__content .wp-callout__title {
  margin: 0 0 0.5rem;
  font-family: var(--wp-font-display);
  font-weight: 580;
  font-size: 1.125rem;
  color: hsl(var(--wp-foreground));
}

.wp-article__content .wp-callout p { margin: 0; }
.wp-article__content .wp-callout p + p { margin-top: 0.6em; }

.wp-article__content .wp-callout a {
  color: hsl(var(--wp-foreground));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Short answer

   The editor-written lede. Larger than body text and set in the display face so
   it reads as an answer rather than a first paragraph — a person arriving from
   a search needs to know within one line that they are in the right place.
   ========================================================================== */

.wp-answer {
  margin: 0 0 2rem;
  padding-left: 1.25rem;
  border-left: 3px solid hsl(var(--wp-secondary));
  font-family: var(--wp-font-display);
  font-weight: 500;
  font-size: 1.3125rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: hsl(var(--wp-foreground) / 0.88);
  text-wrap: pretty;
}

@media (max-width: 600px) {
  .wp-answer { font-size: 1.1875rem; padding-left: 1rem; }
}

/* ==========================================================================
   Card provenance

   Sentence case, no tracking, small — the opposite of the uppercase meta line
   used elsewhere. On a card the date is context the reader wants AFTER the
   subject, not a label that outranks it.
   ========================================================================== */

.wp-card__title { margin-top: 0; }

.wp-card__meta {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: hsl(var(--wp-muted-fg) / 0.85);
  letter-spacing: 0;
  text-transform: none;
}

.wp-card__excerpt { margin-top: 0.85rem; }

/* Colophon — provenance at the foot of the article, deliberately quiet. */
.wp-colophon {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid hsl(var(--wp-border));
  font-size: 0.8125rem;
  color: hsl(var(--wp-muted-fg) / 0.85);
}

/* ==========================================================================
   Topic menu in the header

   <details>, not a hover dropdown: it opens on tap, is keyboard-operable and
   is announced by screen readers. A :hover menu does none of that on a phone.
   ========================================================================== */

.wp-topicmenu { position: relative; }

.wp-topicmenu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: hsl(var(--wp-foreground));
  user-select: none;
}

.wp-topicmenu__toggle::-webkit-details-marker { display: none; }

.wp-topicmenu__toggle::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  transition: transform 0.2s ease;
}

.wp-topicmenu[open] > .wp-topicmenu__toggle::after { transform: rotate(-135deg) translateY(-0.1em); }
.wp-topicmenu__toggle:hover { color: hsl(var(--wp-accent)); }

.wp-topicmenu__panel {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: min(46rem, calc(100vw - 2.5rem));
  max-height: min(30rem, 70vh);
  overflow-y: auto;
  padding: 1.25rem;
  border: 1px solid hsl(var(--wp-border));
  border-radius: var(--wp-radius-card);
  background-color: hsl(var(--wp-card));
  box-shadow: 0 24px 50px -24px hsl(272 22% 18% / 0.28);
}

.wp-topicmenu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 1.75rem;
}

@media (min-width: 900px) {
  .wp-topicmenu__list { columns: 3; }
}

.wp-topicmenu__list li { break-inside: avoid; }

.wp-topicmenu__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  color: hsl(var(--wp-foreground));
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
}

.wp-topicmenu__list a:hover {
  background-color: hsl(var(--wp-muted) / 0.7);
  color: hsl(var(--wp-accent));
  text-decoration: none;
}

.wp-topicmenu__n {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--wp-muted-fg));
}

@media (max-width: 760px) {
  /* Anchored to the viewport, not the toggle — inside a horizontally scrolling
     nav an absolutely positioned panel would scroll off with it. */
  .wp-topicmenu { position: static; }
  .wp-topicmenu__panel {
    left: 1.25rem;
    right: 1.25rem;
    width: auto;
    transform: none;
  }
  .wp-topicmenu__list { columns: 1; }
}