/*
Theme Name: CUJ Theme
Theme URI:
Author: CUJ
Description: Custom theme for Centrum för Undersökande Journalistik (CUJ). Reproduces the studio-designed layout with dynamic Aktuellt and Erbjudande sections powered by WordPress categories.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Private
Text Domain: cuj-theme
Screenshot: screenshot.jpg
*/

/* =============================================================================
   1. CSS Custom Properties
   ============================================================================= */
:root {
  --color-bg:      #f0f7e8;
  --color-text:    #141414;
  --color-accent:  #ff3250;
  --color-link:    #00afff;
  --color-black:   #000000;
  --color-white:   #ffffff;
  --color-border:  rgba(20, 20, 20, 0.15);

  --font-heading:  'Work Sans', sans-serif;
  --font-body:     'Inter', sans-serif;

  --max-width:     1100px;
  --gutter:        1.5rem;
  --section-gap:   2.25rem;
  --logo-width:    160px;   /* ← adjust this to resize the header logo */
}

/* =============================================================================
   2. Reset & Base
   ============================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-y: scroll; /* always reserves scrollbar space — prevents logo/header shift between pages */
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
}

/* Sticky footer: flex on a wrapper div, not on body (avoids breaking WP block layout) */
.site-wrapper {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  display: flex;
  flex-direction: column;
}

#main-content {
  flex: 1 0 auto;
  width: 100%;
}

body.nav-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-text);
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

/* =============================================================================
   3. Typography
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
}

h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

p {
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

/* Category / section label */
.label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.label a {
  color: inherit;
  text-decoration: none;
}

.label a:hover {
  color: var(--color-accent);
}

/* Arrow "Läs mer" link — blue per brand style guide */
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-link);
  text-decoration: none;
}

.read-more:hover {
  opacity: 0.75;
}

/* Brand arrow SVG (output by cuj_arrow_svg()) */
.cuj-arrow {
  display: inline-block;
  height: 0.8em;   /* matches text cap-height; width auto keeps aspect ratio */
  width: auto;
  vertical-align: middle;
  flex-shrink: 0;
}

/* =============================================================================
   4. Layout Utilities
   ============================================================================= */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =============================================================================
   5. Site Header
   ============================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-bg);
  padding: 1rem var(--gutter);
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: var(--max-width);
  margin-inline: auto;
}

/* Logo size — adjust --logo-width in :root or change this value directly */
.site-header__logo img {
  width: var(--logo-width, 110px);
  height: auto;
}

/* Hamburger button */
.site-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 32px;
  height: 32px;
  color: var(--color-text);
}

.site-header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 1px;
}

/* =============================================================================
   6. Nav Overlay
   ============================================================================= */
.site-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: 1rem var(--gutter);

  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.site-nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.site-nav-overlay__top {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.site-nav-overlay__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--color-text);
  line-height: 1;
}

/* Menu list */
.site-nav-overlay .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav-overlay .menu li {
  margin-bottom: 1.25rem;
}

.site-nav-overlay .menu li a {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Arrow prefix on each menu item — dark brand SVG arrow */
.site-nav-overlay .menu li a::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 0.75em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='920 509 78 60'%3E%3Cpolygon fill='%23141414' points='969.16 512.65 966.31 515.51 985.23 534.43 990.06 537.98 923.49 537.98 923.49 542.02 990.06 542.02 985.23 545.57 966.31 564.49 969.16 567.35 996.51 540 969.16 512.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center left;
  flex-shrink: 0;
}

.site-nav-overlay .menu li a:hover {
  color: var(--color-accent);
}

/* =============================================================================
   7. Front Page — Hero
   ============================================================================= */
.front-hero {
  padding: var(--section-gap) var(--gutter);
  padding-bottom: var(--section-gap);
  max-width: var(--max-width);
  margin-inline: auto;
}

.front-hero__text {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  max-width: 640px;
  margin-bottom: 0;
}

/* =============================================================================
   8. Front Page — Section dividers and grid wrappers
   ============================================================================= */

/* Full-width dark horizontal rule between each front-page section */
.front-divider {
  border: none;
  border-top: 1px solid var(--color-text);
  margin: 0;
}

/* Grid wrapper — just provides the gutter and max-width for each section */
.front-grid {
  padding: 0 var(--gutter);
  max-width: var(--max-width);
  margin-inline: auto;
}

/* =============================================================================
   9 & 10. Front Page — Cards (full-width, image+text side by side)
   ============================================================================= */

/* Base card: stacks vertically when no image */
.front-card {
  padding: var(--section-gap) 0;
}

/* Two-column layout when image is present */
.front-card--has-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: start;
}

/* Aktuellt: image on left, so HTML order is image → content.
   Erbjudande: content on left, image on right (HTML order: content → image). */

.front-card__media img {
  width: 100%;
  height: auto;
  display: block;
}

.front-card__content {
  display: flex;
  flex-direction: column;
}

.front-card__title {
  margin-bottom: 0.75rem;
}

.front-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.front-card__title a:hover {
  color: var(--color-accent);
}

.front-card__excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 680px) {
  .front-card--has-image {
    grid-template-columns: 1fr;
  }

  /* On mobile, image always comes first regardless of HTML order */
  .front-card__media {
    order: -1;
  }
}

/* =============================================================================
   11. Front Page — Om CUJ Teaser (full-width below grid)
   ============================================================================= */
.front-om {
  padding: var(--section-gap) var(--gutter) var(--section-gap);
  max-width: var(--max-width);
  margin-inline: auto;
}

.front-om--has-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: start;
}

.front-om__content {
  display: flex;
  flex-direction: column;
}

.front-om__media img {
  width: 100%;
  height: auto;
  display: block;
}

.front-om__title {
  margin-bottom: 0.75rem;
  max-width: 640px;
}

.front-om__title a {
  color: var(--color-text);
  text-decoration: none;
}

.front-om__title a:hover {
  color: var(--color-accent);
}

.front-om__excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 620px;
}

@media (max-width: 680px) {
  .front-om--has-image {
    grid-template-columns: 1fr;
  }

  /* On mobile, image always comes first regardless of HTML order */
  .front-om__media {
    order: -1;
  }
}

/* =============================================================================
   12. Archive Page
   ============================================================================= */
.archive-page {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--section-gap);
}

.archive-header {
  padding: var(--section-gap) 0 2rem;
}

.archive-header__title {
  margin-top: 0.5rem;
}

.archive-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.archive-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  padding-bottom: 1.75rem;
}

@media (max-width: 640px) {
  .archive-card {
    grid-template-columns: 1fr;
  }
}

.archive-card__image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.archive-card__image-link {
  display: block;
}

.archive-card__body {
  display: flex;
  flex-direction: column;
}

.archive-card__title {
  margin-bottom: 0.75rem;
}

.archive-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.archive-card__title a:hover {
  color: var(--color-accent);
}

.archive-card__excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Pagination */
.archive-pagination {
  margin-top: 2rem;
}

.archive-pagination .nav-links {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.9rem;
}

.archive-pagination a {
  color: var(--color-link);
}

/* =============================================================================
   13. Single Post
   ============================================================================= */
main.single-post {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--section-gap);
}

/* Single-column by default; two-column when a featured image is present */
.single-article__header {
  padding-top: var(--section-gap);
  margin-bottom: 1.5rem;
}

.single-article__header--has-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 768px) {
  .single-article__header--has-image {
    grid-template-columns: 1fr;
  }

  /* On mobile, image comes first (above title) */
  .single-article__featured-image {
    order: -1;
  }
}

.single-article__title {
  margin-bottom: 1rem;
}

.single-article__intro {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.single-article__featured-image img {
  width: 100%;
  height: auto;
}

/* Post body content */
.post-content {
  max-width: 680px;
  line-height: 1.7;
}

/* In-content headings follow the site's heading style: Work Sans Medium,
   normal case, with a clear size hierarchy (no flat uppercase treatment). */
.post-content h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.25;
  margin: 2.5rem 0 1rem;
}

.post-content h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.3;
  margin: 1.75rem 0 0.5rem;
}

.post-content h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 1.5rem 0 0.5rem;
}

.post-content p {
  margin-bottom: 1rem;
}

.post-content ul,
.post-content ol {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.post-content li {
  margin-bottom: 0.4rem;
}

.post-content a {
  color: var(--color-link);
  text-decoration: underline;
}

/* =============================================================================
   13b. Article Layout (full-width hero image → full-width heading → two-column text)
   ============================================================================= */

/* Hero image: spans the full container width */
.article-hero {
  margin-bottom: 2rem;
}

.article-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Heading area: category label + h1 + intro, single full-width column */
.article-header {
  padding-top: var(--section-gap);
  margin-bottom: 1.5rem;
}

.article-header__title {
  margin-bottom: 1rem;
}

/* Two-column body text */
.article-columns .post-content {
  max-width: none;
  columns: 2;
  column-gap: 2.5rem;
}

@media (max-width: 680px) {
  .article-columns .post-content {
    columns: 1;
  }
}

/* =============================================================================
   14. Accordion (native <details>/<summary> via Gutenberg Details block)
   Applies to both single posts (.post-content) and static pages (.page-article__body).
   No separator lines — style is purely typographic.
   ============================================================================= */
.post-content details,
.page-article__body details {
  /* No border — clean typographic look */
}

.post-content summary,
.page-article__body summary {
  list-style: none;
  cursor: pointer;
  padding: 0.5rem 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--color-text);
  user-select: none;
  gap: 0.5rem;
}

/* The summary text itself is styled by Gutenberg's block controls,
   so you can set bold/italic/size directly in the block editor. */

/* Remove default browser triangle */
.post-content summary::marker,
.post-content summary::-webkit-details-marker,
.page-article__body summary::marker,
.page-article__body summary::-webkit-details-marker {
  display: none;
}

/* Arrow indicator — blue brand SVG arrow, rotates 90° when open */
.post-content summary::after,
.page-article__body summary::after {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 0.85em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='920 509 78 60'%3E%3Cpolygon fill='%2300afff' points='969.16 512.65 966.31 515.51 985.23 534.43 990.06 537.98 923.49 537.98 923.49 542.02 990.06 542.02 985.23 545.57 966.31 564.49 969.16 567.35 996.51 540 969.16 512.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.post-content details[open] > summary::after,
.page-article__body details[open] > summary::after {
  transform: rotate(90deg);
}

/* Content inside details */
.post-content details > *:not(summary),
.page-article__body details > *:not(summary) {
  padding-bottom: 1rem;
}

/* Details block — "Rubrikstil" style variant
   Apply via: select Details block → Styles panel → Rubrikstil.
   The summary is rendered in the heading font at a larger size,
   giving it the feel of a small section heading rather than bold body text.
   The <strong> override is needed because Gutenberg wraps summary text in
   <strong> by default, which would otherwise force font-weight back to 700. */
.post-content details.is-style-rubrikstil > summary,
.page-article__body details.is-style-rubrikstil > summary {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
}
.post-content details.is-style-rubrikstil > summary strong,
.page-article__body details.is-style-rubrikstil > summary strong {
  font-weight: 500;
}

/* =============================================================================
   15. Static Pages (page.php — Om CUJ etc.)
   ============================================================================= */
.page-content {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) var(--section-gap);
}

.page-article__inner {
  max-width: var(--max-width);
}

.page-article__title {
  margin-bottom: 1.5rem;
  max-width: 760px;
}

/* Two-column layout when featured image is present: image left, body right */
.page-article__columns {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 680px) {
  .page-article__columns {
    grid-template-columns: 1fr;
  }
}

.page-article__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* In-content headings follow the site's heading style: Work Sans Medium,
   normal case, with a clear size hierarchy (no flat uppercase treatment). */
.page-article__body h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.25;
  margin: 2.5rem 0 1rem;
}

.page-article__body h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.3;
  margin: 1.75rem 0 0.5rem;
}

.page-article__body h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 1.5rem 0 0.5rem;
}

.page-article__body p {
  margin-bottom: 1rem;
}

.page-article__body ul,
.page-article__body ol {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.page-article__body li {
  margin-bottom: 0.4rem;
}

.page-article__body a {
  color: var(--color-link);
  text-decoration: underline;
}

/* =============================================================================
   16. Site Footer
   ============================================================================= */
.site-footer {
  padding: 0;
}

/* Full-bleed SVG wordmark — spans the full viewport width */
.site-footer__logo {
  width: 100%;
  height: auto;
  display: block;
}

.site-footer p {
  font-size: 0.85rem;
  line-height: 1.5;
}

.site-footer a {
  color: var(--color-text);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-accent);
}

/* =============================================================================
   17. Utilities & WordPress Block Overrides
   ============================================================================= */

/* WordPress alignment classes */
.aligncenter {
  display: block;
  margin-inline: auto;
}

.alignleft {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

.alignright {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

/* Remove WordPress default block spacing resets that may conflict */
.wp-block-image img {
  height: auto;
}

/* Further reading / related links: allow multi-column blocks to break out
   of the narrow .post-content (680px) so 3-column grids have enough room */
.post-content .wp-block-columns,
.post-content .wp-block-query {
  max-width: none;
}

/* Screen-reader utility */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}