/*
Theme Name: Vaimupuu
Theme URI: https://vaimupuu.ee
Description: Custom theme for Vaimupuu — MTÜ Vaimupuu official website
Version: 1.0.0
Author: MTÜ Vaimupuu
Text Domain: vaimupuu
*/

/* ==========================================================================
   Design System — CSS Custom Properties
   ========================================================================== */

:root {
  /* Colors */
  --color-green-dark: #144425;
  --color-green-medium: #005e24;
  --color-green-light: #6bc048;
  --color-green-hover: #0d351c;
  --color-green-accent: #0a5c2f;
  /* Text-safe brand orange: the logo's #f36e21 sits at 2.97:1 on white,
     a hair under the 3:1 WCAG floor for large text/graphics, so text and
     icon uses carry #e8600a (≈3.4:1) instead; --color-orange-dark
     (≈5.5:1) is for normal-size text or white-on-orange (a11y sweep F4,
     2026-09-09). The true brand orange lives on in the logo images. */
  --color-orange: #e8600a;
  --color-orange-dark: #b34700;
  --color-lilla: #a5248b; /* ürituste/sündmuste sisu tunnusvärv (Janek, 2026-08) */
  --color-white: #ffffff;
  --color-gray-bg: #f9f9f9;
  --color-gray-bg-dark: #dde1e6;
  --color-gray-border: #eee;
  --color-gray-border-dark: #7f8c8d;
  --color-border-light: #efefef;
  --color-text: #212934;
  --color-text-muted: #666666;
  --color-link-blue: #0a1396;
  --color-widget-blue: #007acc;
  --color-widget-hover: #ee546c;
  --color-footer-bg: #eeeeee;

  /* Typography */
  --font-family: Arial, Helvetica, sans-serif;
  --font-family-heading: "Arial Black", Arial, Gadget, sans-serif;
  --font-size-base: 1.1875rem; /* 19px at default 16px root */
  --font-size-sm: 0.9rem;
  --font-size-xs: 0.8rem;
  --font-size-2xs: 11px;
  --font-size-nav: 15px;
  --font-size-mobile-nav: 20px;
  --font-size-h1: 28px;
  --font-size-h2: 24px;
  --font-size-h3: 1.25rem;
  --font-size-h6: 16px;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 6rem;

  /* Layout */
  --max-width: 72rem;
  --border-radius: 0.5rem;
  --gallery-image-height: 241px;
  /* Where object-fit:cover crops anchor within a photo (gallery tiles,
     article cards). 25% from the top keeps faces in frame — a centered
     crop beheads portrait-format photos of standing people. One knob for
     every cropped context; tune here if editors want more/less headroom. */
  --image-crop-focus: 50% 25%;

  /* Transitions */
  --transition-fast: 0.2s ease;
}

/* ==========================================================================
   Base / Reset
   ========================================================================== */

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

html {
  font-size: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-white);
}

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

a:hover {
  text-decoration: underline;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-family-heading);
  /* Long Estonian compounds ("Sotsiaalkindlustusamet") are wider than a
     320px viewport at heading sizes and forced horizontal scrolling
     (WCAG 1.4.10 reflow — a11y sweep F6, 2026-09-09). Break within the
     word only when nothing else fits. */
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h6 {
  font-size: var(--font-size-h6);
}

ul,
ol {
  padding-left: var(--spacing-lg);
}

/* ==========================================================================
   Accessibility — Font Size Toggle
   ========================================================================== */

html.font-big {
  font-size: 125%;
}

/* ==========================================================================
   Accessibility — Color Theme Modes
   ========================================================================== */

html[data-color-theme="dark"] {
  --color-text: #ffff00;
  --color-text-muted: #e6e600;
  --color-gray-bg: #1a1a1a;
  --color-gray-bg-dark: #2e2e2e;
  --color-gray-border: #444444;
  --color-border-light: #333333;
  --color-footer-bg: #0a0a0a;
  --color-green-accent: #ffff00;
  --color-link-blue: #ffff00;
}

html[data-color-theme="dark"] body {
  background-color: #000000;
  color: #ffff00;
}

html[data-color-theme="dark"] a {
  color: #ffff00;
}

html[data-color-theme="dark"] .top-bar {
  background-color: #000000;
  border-bottom-color: #444444;
}

html[data-color-theme="dark"] .header {
  background-color: #000000;
}

html[data-color-theme="dark"] .header__search-input {
  background-color: #000000;
  color: #ffff00;
  border-color: #ffff00;
}

html[data-color-theme="dark"] .header__search-input::placeholder {
  color: #e6e600;
}

html[data-color-theme="dark"] .header__search-btn {
  background-color: #ffff00;
  color: #000000;
}

html[data-color-theme="dark"] .header__search-btn:hover {
  background-color: #e6e600;
}

html[data-color-theme="dark"] .site-header {
  background-color: #000000;
}

html[data-color-theme="dark"] .main-nav__menu > li + li {
  border-left-color: #444444;
}

html[data-color-theme="dark"] .main-nav__menu > li > a:hover,
html[data-color-theme="dark"] .main-nav__menu > li > a:focus,
html[data-color-theme="dark"] .main-nav__menu > li.current-menu-item > a {
  background-color: #2e2e2e;
}

html[data-color-theme="dark"] .main-nav__menu .sub-menu {
  background-color: #1a1a1a;
}

html[data-color-theme="dark"] .main-nav__menu .sub-menu a {
  color: #ffff00;
  border-bottom-color: #444444;
}

html[data-color-theme="dark"] .footer,
html[data-color-theme="dark"] .info-box,
html[data-color-theme="dark"] .card-article {
  background-color: #0a0a0a;
  border-color: #444444;
}

html[data-color-theme="dark"] .card-article:hover {
  border-color: #ffff00;
  box-shadow:
    0 3px 5px rgba(255, 255, 0, 0.15),
    0 0 0 3px #ffff00;
}

html[data-color-theme="dark"] .read-more,
html[data-color-theme="dark"] .breadcrumbs a:hover {
  color: #ffff00;
}

html[data-color-theme="dark"] .pagination .current {
  background-color: #ffff00;
  color: #000000;
}

html[data-color-theme="dark"] .pagination a:hover {
  background-color: #2e2e2e;
  color: #ffff00;
}

html[data-color-theme="dark"] .color-theme-toggle {
  background-color: #2e2e2e;
  border-color: #ffff00;
  color: #ffff00;
}

html[data-color-theme="dark"] .font-toggle {
  background-color: #2e2e2e;
  border-color: #ffff00;
  color: #ffff00;
}

html[data-color-theme="dark"] .font-toggle.active {
  background-color: #ffff00;
  color: #000000;
  border-color: #ffff00;
}

html[data-color-theme="dark"] .audio-player {
  --audio-player-bg: #000000;
  --audio-player-btn-bg: #2e2e2e;
}

html[data-color-theme="dark"] .audio-player__bar {
  color: #ffff00;
  border: 1px solid #ffff00;
}

html[data-color-theme="gray"] {
  --color-gray-bg: #c8c8c8;
  --color-gray-bg-dark: #b0b0b0;
  --color-gray-border: #9a9a9a;
  --color-border-light: #a8a8a8;
  --color-footer-bg: #b0b0b0;
  /* The gray body paints #c0c0c0, which eats contrast budget: the brand
     link green lands at 4.46:1 and muted text at 3.15:1 there (needs
     4.5:1, a11y sweep F2/F3, 2026-09-09). Darkened only in this theme —
     #084d27 ≈ 5.5:1, #474747 ≈ 5.1:1 on #c0c0c0. */
  --color-green-accent: #084d27;
  --color-text-muted: #474747;
}

html[data-color-theme="gray"] body {
  background-color: #c0c0c0;
  color: var(--color-text);
}

/* Editor palette (theme.json swatches) per color theme. WP paints
   .has-<slug>-color text through --wp--preset--color--<slug> custom
   properties it defines on body, so re-pointing the variable here adapts
   editor-colored content to each theme's background — the theme.json hex
   only guarantees contrast on white (a11y follow-up, 2026-09-09).
   Ratios: gray ground is #c0c0c0, dark ground is black. */
html[data-color-theme="gray"] body {
  --wp--preset--color--vaimupuu-oranz: #7a3000; /* 5.1:1 on gray */
  --wp--preset--color--vaimupuu-lilla: #7d1a69; /* 5.2:1 on gray */
}

html[data-color-theme="dark"] body {
  --wp--preset--color--vaimupuu-tumeroheline: #6bc048; /* 9.3:1 on black */
  --wp--preset--color--vaimupuu-lilla: #d16ab8; /* 6.5:1 on black */
}

html[data-color-theme="gray"] .top-bar {
  background-color: #b5b5b5;
}

html[data-color-theme="gray"] .header {
  background-color: #c0c0c0;
}

html[data-color-theme="gray"] .footer {
  background-color: #b0b0b0;
}

html[data-color-theme="gray"] .info-box {
  background-color: #b8b8b8;
}

html[data-color-theme="gray"] .card-article {
  background-color: #d0d0d0;
}

html[data-color-theme="gray"] .main-nav__menu .sub-menu {
  background-color: #b8b8b8;
}

@media (max-width: 1200px) {
  html[data-color-theme="dark"] .site-header {
    background-color: #000000;
    border-bottom-color: #444444;
  }

  html[data-color-theme="dark"] .main-nav {
    background-color: #000000;
  }

  html[data-color-theme="dark"] .main-nav__menu > li > a {
    color: #ffff00;
  }

  html[data-color-theme="gray"] .site-header {
    background-color: #c0c0c0;
  }

  html[data-color-theme="gray"] .main-nav {
    background-color: #c0c0c0;
  }
}

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

.site-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem;
}

/* ==========================================================================
   Homepage Layout — Content + Sidebar
   ========================================================================== */

.home-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xl);
  max-width: var(--max-width);
  margin: 0 auto;
}

.home-layout__content {
  min-width: 0;
}

.home-layout__sidebar {
  min-width: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-cta {
  display: inline-block;
  background-color: var(--color-green-medium);
  color: var(--color-white);
  padding: 0.625rem 1.25rem;
  border: none;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  line-height: 1.2;
}

.btn-cta:hover {
  background-color: var(--color-green-hover);
  text-decoration: none;
  color: var(--color-white);
}

/* ==========================================================================
   Info Box (Simple Language notices)
   ========================================================================== */

.info-box {
  background-color: var(--color-gray-bg);
  border-left: 4px solid var(--color-green-medium);
  padding: var(--spacing-lg);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: var(--spacing-lg) 0;
}

/* ==========================================================================
   Category archive intro (partials/category-intro.php)
   .category-intro       — content of the picked "Tutvustuse leht" page
   .category-description — the category "Kirjeldus" field, used as fallback
   Both sit between the archive <h1> and the post grid. Declared after
   .info-box so the Lihtne keel variant (.category-intro.info-box) takes the
   spacing below rather than the box's own symmetric margin.
   ========================================================================== */

.category-intro,
.category-description {
  /* flow-root contains the floated .category-intro__icon so a tall icon
     can't spill into the post grid below. */
  display: flow-root;
  margin: 0 0 var(--spacing-lg);
}

.category-intro > :first-child,
.category-description > :first-child {
  margin-top: 0;
}

.category-intro > :last-child,
.category-description > :last-child {
  margin-bottom: 0;
}

/* Category icon (term-meta upload, inc/category-icon.php) floated in front
   of the intro text — the Galerii-page look, at its 77px inline-icon size.
   contain keeps non-square icons unstretched. Two classes in the selector:
   the intro containers carry .page-content, whose article-image default
   (.page-content img { margin: var(--spacing-lg) 0 }) outranks a lone class
   and would zero the side gap. */
.category-intro .category-intro__icon,
.category-description .category-intro__icon {
  float: left;
  width: 77px;
  height: 77px;
  object-fit: contain;
  /* 20px by editor request — sits between the --spacing-md/lg tokens. */
  margin: 0 20px var(--spacing-xs) 0;
}

/* ==========================================================================
   Read More Link
   ========================================================================== */

.read-more {
  display: inline-block;
  font-weight: 800;
  font-size: var(--font-size-base);
  color: var(--color-green-accent);
  margin-top: var(--spacing-sm);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xl);
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
}

.pagination .current {
  background-color: var(--color-green-dark);
  color: var(--color-white);
}

.pagination a:hover {
  background-color: var(--color-gray-bg);
  text-decoration: none;
}

/* ==========================================================================
   Page Content (wrapper for the_content() output)
   ========================================================================== */

.page-content {
  line-height: 1.8;
}

.page-content p {
  margin-bottom: var(--spacing-md);
}

/* Distinguish in-body links without relying on color alone (WCAG 1.4.1).
   Pill-shaped controls opt out via scoped overrides in their own CSS
   (kokkuvote-jump, sisukord) — do NOT extend :not() exemptions here:
   every :not() argument raises this rule's specificity and silently
   flips those scoped overrides. */
.page-content a:not(.btn-cta) {
  text-decoration: underline;
}

.page-content img {
  border-radius: 0;
  margin: var(--spacing-lg) 0;
  max-width: 100%;
  height: auto;
}

.page-content figure.wp-block-image img,
.page-content figure.magazine-image img {
  display: block;
  margin: 0;
}

/* WP core: img[sizes=auto] { contain-intrinsic-size: 3000px 1500px } (wp-includes/media.php) */
.page-content img:is([sizes="auto"], [sizes^="auto,"]) {
  contain-intrinsic-size: auto !important;
}

/* ----- WP classic alignment classes (global) ----- *
 * Migrated content uses the legacy `class="alignleft"` markup on inline
 * icons to make text flow around them (e.g. /meist/eetikakoodeks/'s leaf
 * bullets). WP normally ships these via the classic-themes stylesheet
 * but vaimupuu doesn't enqueue that bundle. Define them ourselves.
 *
 * Selectors are unscoped (`img.alignleft`, not `.page-content img.alignleft`)
 * so they apply equally on page.php (.page-content), single.php
 * (.single-post__content), the category-lihtne-keel intro box, and any
 * other template that renders the_content() — there's no template
 * outside .page-content that should DISABLE alignment.
 *
 * Specificity (1 class + 1 element = 0,0,1,1) matches `.page-content img
 * { margin: var(--spacing-lg) 0 }` above. The cascade resolves on source
 * order — this block is defined later in the stylesheet, so it wins
 * inside .page-content too. Move-up risk if these rules ever come
 * before .page-content img; keep them after.
 */
img.alignleft,
figure.alignleft {
  float: left;
  margin: 0 1em 0.5em 0;
  max-width: 100%;
  height: auto;
}

img.alignright,
figure.alignright {
  float: right;
  margin: 0 0 0.5em 1em;
  max-width: 100%;
  height: auto;
}

img.aligncenter,
figure.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.alignnone {
  /* default inline behaviour — kept as a no-op for completeness */
}

.team-page__intro {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.team-page__intro-media {
  flex: 0 0 auto;
  max-width: min(40%, 280px);
}

.team-page__intro-media img {
  display: block;
  width: 100%;
  height: auto;
}

.team-page__intro-text {
  flex: 1;
  min-width: 0;
}

.team-page__intro-text > *:last-child {
  margin-bottom: 0;
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-lg);
}

.page-content .team-grid .vaimupuu-team-member {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: 0;
}

.page-content .team-grid .vaimupuu-team-member .card-team__photo {
  flex: 0 0 auto;
  width: 10rem;
  max-width: 45%;
}

.page-content .team-grid .vaimupuu-team-member .card-team__name {
  font-size: var(--font-size-lg);
}

.page-content .team-grid .card-team__photo figure.vaimupuu-migrated-figure {
  margin: 0;
  line-height: 0;
}

.page-content .team-grid .card-team__photo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  contain-intrinsic-size: 160px 160px !important;
}

.page-content .team-grid .card-team__photo img:is([sizes="auto"], [sizes^="auto,"]) {
  contain-intrinsic-size: 160px 160px !important;
}

.page-content .card-team__photo figure.vaimupuu-migrated-figure {
  margin: 0;
}

.page-content .card-team__photo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.page-content .card-team__info .vaimupuu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-content .card-team__info .vaimupuu-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.page-content .card-team__info .team-contact__icon {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  color: var(--color-green-light);
}

.page-content .card-team__info .team-contact__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.page-content .card-team__info .team-contact__text {
  flex: 1;
  min-width: 0;
  line-height: 1.5;
}

.page-content .card-team__info .vaimupuu-list p {
  margin: 0;
}

.page-content .card-team__info .team-contact__text strong {
  font-weight: 700;
}

.page-content .card-team__info .team-contact__text a {
  color: var(--color-green-medium);
  text-decoration: underline;
}

.page-content .card-team__info .team-contact__text a:hover,
.page-content .card-team__info .team-contact__text a:focus-visible {
  color: var(--color-green-hover);
}

/* ==========================================================================
   Gallery Card
   ========================================================================== */

.card-gallery {
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  transition: transform var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-gallery:hover {
  transform: translateY(-4px);
}

.card-gallery > a {
  display: block;
  position: relative;
}

.card-gallery img {
  width: 100%;
  height: var(--gallery-image-height);
  object-fit: cover;
  display: block;
}

.card-gallery__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-green-medium);
  color: var(--color-white);
  padding: 10px;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.card-gallery:hover .card-gallery__overlay {
  opacity: 1;
}

/* ==========================================================================
   Team Card
   ========================================================================== */

.card-team {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.card-team__photo {
  flex: 0 0 40%;
}

.card-team__photo img {
  width: 100%;
  height: auto;
}

.card-team__info {
  flex: 1;
}

.card-team__name {
  margin-bottom: var(--spacing-xs);
}

.card-team__role {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.card-team__info a {
  display: block;
  margin-bottom: var(--spacing-xs);
}

/* ==========================================================================
   Sponsor Card
   ========================================================================== */

.card-sponsor {
  border: 1px solid var(--color-gray-border);
  border-radius: var(--border-radius);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-fast);
}

.card-sponsor--linked:hover {
  opacity: 0.5;
}

.card-sponsor img {
  max-width: 100%;
  height: auto;
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--card-gap);
}

/* Koostööpartnerid: small site icon + partner name per row */
.sponsor-grid--partners {
  display: block;
}

.page-content--koostoopartnerid .koostoopartner-row,
.sponsor-grid--partners.page-content > p,
.sponsor-grid--partners.page-content .koostoopartner-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35em 0.5em;
  margin-bottom: var(--spacing-sm);
}

.page-content--koostoopartnerid .koostoopartner-row img,
.sponsor-grid--partners.page-content > p img,
.sponsor-grid--partners.page-content .koostoopartner-row img {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  width: 37px;
  height: 37px;
  min-width: 37px;
  min-height: 37px;
  max-width: 37px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ==========================================================================
   Single Post
   ========================================================================== */

.single-post {
  margin: 0 auto;
}

/* Image frame styles live in assets/css/single-post.css. */

.single-post__content figure.wp-block-image,
.single-post__content figure.vaimupuu-image-with-description,
.single-post__content figure.magazine-image,
.single-post__content .wp-caption {
  margin: var(--spacing-lg) 0;
  max-width: 100%;
}

.single-post__content figure:not(:has(figcaption)):not(.gallery-item) {
  margin: var(--spacing-lg) 0;
}

.single-post__content {
  margin-bottom: var(--spacing-xl);
}

.single-post__content p {
  margin-bottom: var(--spacing-md);
}

.single-post__content a {
  text-decoration: underline;
}

.single-post__content img {
  border-radius: 0;
  margin: 0;
}

/* Eraldusjooned (wp:separator ja paljas <hr>) joonistuvad vaikimisi teksti
   värviga (currentColor) ehk peaaegu mustana. Heledam toon tokenist, et
   kontrastiskeemid saaksid oma väärtuse; redaktoris käsitsi valitud värv on
   inline-stiil ja jääb ikkagi peale. :where() hoiab spetsiifilisuse madalal,
   et sihitud joonestiilid (nt .pictogram-downloads__grid-divider) võidaksid. */
:where(.single-post__content, .page-content) hr {
  border: none;
  border-top: 2px solid;
  color: var(--color-border-light);
}

/* WP core: img[sizes=auto] { contain-intrinsic-size: 3000px 1500px } (wp-includes/media.php) */
.single-post img:is([sizes="auto"], [sizes^="auto,"]) {
  contain-intrinsic-size: auto !important;
}

/* .single-post — gallery may sit outside __content when post HTML has extra </div> */
.single-post .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--spacing-sm);
  margin: var(--spacing-lg) 0;
  width: 100%;
}

.single-post .gallery .gallery-item {
  margin: 0;
  float: none;
  width: 100%;
}

.single-post .gallery .gallery-icon {
  width: 100%;
}

.single-post .gallery .gallery-icon a {
  display: block;
  text-decoration: none;
  cursor: zoom-in;
}

.single-post .gallery .gallery-icon img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  /* Top-biased crop, see --image-crop-focus in :root. Pairs with the
     shortcode_atts_gallery filter (functions.php) that serves these tiles
     from medium_large — the default `thumbnail` size is already
     hard-cropped square on the server, so no CSS could recover the head. */
  object-position: var(--image-crop-focus);
  border-radius: 0;
}

.single-post__content figure:not(:has(figcaption)) img {
  margin: 0;
}

/* Data tables in articles — bordered grid, zebra rows */
.single-post__content .wp-block-table {
  margin: var(--spacing-lg) 0;
  overflow-x: auto;
}

.single-post__content .wp-block-table table,
.single-post__content table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-gray-border-dark);
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.5;
}

.single-post__content .wp-block-table table th,
.single-post__content .wp-block-table table td,
.single-post__content table th,
.single-post__content table td {
  border: 1px solid var(--color-gray-border-dark);
  padding: 0.875rem 1rem;
  text-align: left;
  vertical-align: top;
}

/* Zebra by row index in the full table (thead + tbody each reset :nth-child otherwise). */
.single-post__content .wp-block-table table thead tr,
.single-post__content table thead tr {
  background-color: var(--color-gray-bg);
}

.single-post__content .wp-block-table table:has(thead) tbody tr:nth-child(odd),
.single-post__content table:has(thead) tbody tr:nth-child(odd) {
  background-color: var(--color-white);
}

.single-post__content .wp-block-table table:has(thead) tbody tr:nth-child(even),
.single-post__content table:has(thead) tbody tr:nth-child(even) {
  background-color: var(--color-gray-bg);
}

.single-post__content .wp-block-table table:not(:has(thead)) > tbody > tr:nth-child(odd),
.single-post__content .wp-block-table table:not(:has(thead)) > tr:nth-child(odd),
.single-post__content table:not(:has(thead)) > tbody > tr:nth-child(odd),
.single-post__content table:not(:has(thead)) > tr:nth-child(odd) {
  background-color: var(--color-gray-bg);
}

.single-post__content .wp-block-table table:not(:has(thead)) > tbody > tr:nth-child(even),
.single-post__content .wp-block-table table:not(:has(thead)) > tr:nth-child(even),
.single-post__content table:not(:has(thead)) > tbody > tr:nth-child(even),
.single-post__content table:not(:has(thead)) > tr:nth-child(even) {
  background-color: var(--color-white);
}

/* ----- Akordion + Üksikasjad (core/accordion, core/details) -------------- *
 * Native blocks ship unstyled. Blue outline per the unified info-box
 * decision (Janek + Kerttu, 2026-09-12): every neutral info box wears
 * exactly the sisukord pills' widget-blue border on a plain ground
 * (outline only, no fill — Janek's näidis), the same family as the
 * tekstikast block's sinine default (assets/blocks/tekstikast/
 * style.css). --color-widget-blue is not remapped by the dark/gray
 * themes, so no per-theme overrides are needed; the hover fill uses an
 * adaptive token. Mirrored in editor-style.css. */
.wp-block-accordion {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.wp-block-accordion-item {
  border: 2px solid var(--color-widget-blue);
  border-radius: 1rem;
  overflow: hidden;
}

/* Scoped so `margin: 0` outranks content-area heading rules
   (`.single-post__content h3 { margin ... }`). */
.wp-block-accordion-item .wp-block-accordion-heading {
  margin: 0;
}

.wp-block-accordion-heading__toggle {
  width: 100%;
  padding: 0.75rem 1.25rem;
  background-color: transparent; /* kill the UA button-face gray */
  cursor: pointer;
}

/* Hover/focus feedback: the sisukord pills' gray fill instead of core's
   underline — the toggle is a button, not a link, so the underline
   affordance the core inline style paints on the title span is wrong
   here. That rule must be overridden with its selector repeated
   verbatim: equal specificity, and theme style.css is enqueued after
   core's inline block styles, so our declaration wins the tie (same
   mechanism as the chevron flip below). */
.wp-block-accordion-heading__toggle:hover,
.wp-block-accordion-heading__toggle:focus-visible {
  background-color: var(--color-gray-bg);
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
  text-decoration: none;
}

/* ----- Toggle icon: chevron instead of core's "+"/"×" glyph --------------- *
 * How this works, for future reference:
 *
 * 1. Core markup renders a literal "+" text character inside the
 *    __toggle-icon span and rotates the span 45deg when the item opens,
 *    turning "+" into "×". We keep the span and its text node (no markup
 *    or PHP filter needed) but hide the glyph with font-size: 0.
 *
 * 2. The chevron is drawn with the span's own borders: only the right and
 *    bottom edges get a 3px border, which makes an "L" shape. Rotated
 *    45deg the L points down (closed state); rotated 225deg it points up
 *    (open state). The borders use currentColor, so the chevron inherits
 *    the heading text color and adapts to the dark/gray color themes with
 *    no extra rules.
 *
 * 3. Open state: core's own stylesheet already rotates the icon via
 *    `.wp-block-accordion-item.is-open > .wp-block-accordion-heading
 *    .wp-block-accordion-heading__toggle-icon`. That selector outranks a
 *    plain [aria-expanded] selector, so our override must repeat it
 *    verbatim — equal specificity, and theme style.css is enqueued after
 *    core's inline block styles, so our declaration wins the tie. The
 *    [aria-expanded="true"] variant below it is a fallback for surfaces
 *    that toggle the button state without the is-open class.
 *
 * 4. The flip animates through core's existing 0.2s transform transition;
 *    we only change the transform end values, never the transition.
 *
 * Mirrored in assets/css/editor-style.css so editor previews match. */
.wp-block-accordion-heading__toggle-icon {
  font-size: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 0 solid currentColor;
  border-right-width: 3px;
  border-bottom-width: 3px;
  transform: rotate(45deg);
}

/* Open state — selector must mirror core's exactly; see explainer above. */
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon,
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon {
  transform: rotate(225deg);
}

.wp-block-accordion-panel {
  padding: 0.75rem 1.25rem 0.25rem;
}

.wp-block-details {
  border: 2px solid var(--color-widget-blue);
  border-radius: 1rem;
  overflow: hidden;
}

.wp-block-details summary {
  padding: 0.75rem 1.25rem;
  cursor: pointer;
}

.wp-block-details summary:hover,
.wp-block-details summary:focus-visible {
  background-color: var(--color-gray-bg);
}

.wp-block-details > :not(summary) {
  margin-top: 0.75rem;
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.wp-block-details[open] {
  padding-bottom: 0.75rem;
}

/* ----- Video: play cue (core/video) --------------------------------------- *
 * Big centered play button injected by assets/js/video-play-cue.js — shown
 * until the first `play` event, then faded out. Only the SVG circle is
 * clickable (starts playback via JS — Chrome/Edge don't toggle on video-body
 * clicks); the surrounding overlay passes clicks through so the native
 * control bar stays usable. The hidden state also sets visibility so the
 * invisible circle can't swallow clicks. Centered with inset:0 over the
 * whole figure: on videos with a figcaption the cue sits a caption-height's
 * half too low — rare enough that we accept it over a wrapper-element
 * dance. */
figure.wp-block-video {
  position: relative;
}

.video-play-cue {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: rgba(0, 0, 0, 0.6); /* circle fill via currentColor */
  transition: opacity 0.3s ease;
}

.video-play-cue svg {
  width: 88px;
  height: 88px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
  pointer-events: auto;
  cursor: pointer;
}

figure.wp-block-video:hover .video-play-cue svg {
  transform: scale(1.08);
  transition: transform 0.15s ease;
}

figure.wp-block-video.is-video-playing .video-play-cue {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

@media (max-width: 600px) {
  .video-play-cue svg {
    width: 64px;
    height: 64px;
  }
}

/* ----- Galerii: Üks pilt (core/gallery .is-style-uks-pilt) ---------------- *
 * Delfi-style gallery presentation: the page shows only the first image,
 * with a "+N fotot" badge; clicking opens core's lightbox, which browses
 * ALL the images (prev/next arrows, arrow keys, swipe). Registered in
 * functions.php > vaimupuu_register_block_styles(); editors pick it in the
 * gallery block's Styles tab, and "Enlarge on click" must be chosen in the
 * gallery's toolbar link menu for the lightbox to work.
 *
 * How this works, for future reference:
 *
 * 1. Images 2..N are NOT display:none — core's lightbox reads
 *    naturalWidth/offsetWidth from the on-page <img> to size the enlarged
 *    view, so an image with no layout box (or one the browser never
 *    loaded) opens as a blank white overlay. They are instead stretched
 *    invisibly (visibility:hidden) over the cover image, giving each a
 *    real full-size box, and a render_block filter in functions.php
 *    (vaimupuu_uks_pilt_eager_images) strips loading="lazy" and the
 *    sizes="auto, …" prefix so they always load at proper resolution.
 *    visibility:hidden (not opacity:0) also keeps their lightbox-trigger
 *    buttons out of the keyboard tab order.
 *
 * 2. The "Vaata galeriid · +N fotot" badge is real server-rendered markup
 *    (functions.php > vaimupuu_uks_pilt_badge) — icon + text, injected only
 *    when the gallery has 2+ images. It replaced an earlier pure-CSS
 *    counter badge after editor testing showed text alone wasn't understood
 *    as "this opens"; the photo-stack icon is the cue. pointer-events:none
 *    keeps clicks falling through to the cover image → lightbox.
 *
 * 3. Core sizes gallery figures with `figure.wp-block-image
 *    :not(#individual-image)` selectors — an intentional ID-level
 *    specificity hack in wp-includes/blocks/gallery/style.css. Our
 *    overrides repeat the same :not(#individual-image) trick so they
 *    outrank every per-column-count core rule without !important.
 *
 * The editor deliberately does NOT mirror the one-image collapse: editors
 * need the grid to add/remove/reorder photos. editor-style.css instead
 * shows a hint badge on the gallery. */
/* Cropped block-gallery tiles ("Kärbi pildid" toggle): top-biased crop, see
   --image-crop-focus in :root. Core only sets object-fit, never
   object-position, so no specificity fight. */
.wp-block-gallery.is-cropped figure.wp-block-image img {
  object-position: var(--image-crop-focus);
}

.wp-block-gallery.is-style-uks-pilt {
  position: relative;
}

.wp-block-gallery.is-style-uks-pilt figure.wp-block-image:not(#individual-image):first-child {
  width: 100%;
}

.wp-block-gallery.is-style-uks-pilt figure.wp-block-image:not(#individual-image):not(:first-child) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  visibility: hidden;
}

/* Üks pilt covers: core overlays each figcaption on the photo (white 13px
   text on a faint gradient), where it is unreadable and collides with the
   "Vaata galeriid" badge. Captions show in the lightbox instead — see
   .vaimupuu-lightbox-caption below and assets/js/lightbox-caption.js. */
.wp-block-gallery.is-style-uks-pilt figure.wp-block-image figcaption {
  display: none;
}

/* Caption bar for the core image lightbox. Core renders no figcaption in
   its overlay; lightbox-caption.js mirrors the expanded image's caption
   into this bar. Sits above core's overlay (z-index 100000); on narrow
   screens core's prev/next buttons live at the bottom edge, so the bar
   floats higher there. Vasakus nurgas ja suuremana toimetuse soovil
   (Discord 2026-08-17). */
.vaimupuu-lightbox-caption {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
  max-width: min(90vw, 60rem);
  padding: 0.6rem 1.1rem;
  background: rgba(0, 0, 0, 0.72);
  color: var(--color-white);
  border-radius: 6px;
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: left;
  z-index: 100001;
  pointer-events: none;
}

@media (min-width: 960px) {
  .vaimupuu-lightbox-caption {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
}

/* Photo description tooltip — alt-text-hover.js shows a content image's
   alt text in this bubble, following the cursor while it hovers the image
   (mouse-only by editorial decision 2026-09-01; no touch affordance).
   One shared element on <body>; [hidden] keeps it display:none. */
.vaimupuu-alt-tooltip {
  position: fixed;
  max-width: min(28rem, 80vw);
  padding: 0.45rem 0.8rem;
  background: rgba(0, 0, 0, 0.85);
  color: var(--color-white);
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1.4;
  text-align: left;
  pointer-events: none;
  z-index: 10000;
}

.wp-block-gallery.is-style-uks-pilt .uks-pilt-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  background-color: rgba(0, 0, 0, 0.72);
  color: #ffffff;
  border-radius: 2rem;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  pointer-events: none; /* clicks fall through to the image → lightbox */
}

.uks-pilt-badge svg {
  flex-shrink: 0;
}

/* Short label ("Galerii +N") only on narrow screens; the long one is what
   screen readers hear (the short span is aria-hidden in the markup). */
.uks-pilt-badge__short {
  display: none;
}

@media (max-width: 600px) {
  .wp-block-gallery.is-style-uks-pilt .uks-pilt-badge {
    left: 0.75rem;
    bottom: 0.75rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.95rem;
  }

  .uks-pilt-badge__long {
    display: none;
  }

  .uks-pilt-badge__short {
    display: inline;
  }
}

.single-post__content .wp-block-table table th,
.single-post__content table th {
  font-weight: 700;
}

html[data-color-theme="dark"] .single-post__content .wp-block-table table,
html[data-color-theme="dark"] .single-post__content table {
  border-color: #444444;
  color: #ffff00;
}

html[data-color-theme="dark"] .single-post__content .wp-block-table table th,
html[data-color-theme="dark"] .single-post__content .wp-block-table table td,
html[data-color-theme="dark"] .single-post__content table th,
html[data-color-theme="dark"] .single-post__content table td {
  border-color: #444444;
}

html[data-color-theme="dark"] .single-post__content .wp-block-table table thead tr,
html[data-color-theme="dark"] .single-post__content table thead tr {
  background-color: #1a1a1a;
}

html[data-color-theme="dark"] .single-post__content .wp-block-table table:has(thead) tbody tr:nth-child(odd),
html[data-color-theme="dark"] .single-post__content table:has(thead) tbody tr:nth-child(odd) {
  background-color: #000000;
}

html[data-color-theme="dark"] .single-post__content .wp-block-table table:has(thead) tbody tr:nth-child(even),
html[data-color-theme="dark"] .single-post__content table:has(thead) tbody tr:nth-child(even) {
  background-color: #1a1a1a;
}

html[data-color-theme="dark"] .single-post__content .wp-block-table table:not(:has(thead)) > tbody > tr:nth-child(odd),
html[data-color-theme="dark"] .single-post__content .wp-block-table table:not(:has(thead)) > tr:nth-child(odd),
html[data-color-theme="dark"] .single-post__content table:not(:has(thead)) > tbody > tr:nth-child(odd),
html[data-color-theme="dark"] .single-post__content table:not(:has(thead)) > tr:nth-child(odd) {
  background-color: #1a1a1a;
}

html[data-color-theme="dark"] .single-post__content .wp-block-table table:not(:has(thead)) > tbody > tr:nth-child(even),
html[data-color-theme="dark"] .single-post__content .wp-block-table table:not(:has(thead)) > tr:nth-child(even),
html[data-color-theme="dark"] .single-post__content table:not(:has(thead)) > tbody > tr:nth-child(even),
html[data-color-theme="dark"] .single-post__content table:not(:has(thead)) > tr:nth-child(even) {
  background-color: #000000;
}

.single-post__footer {
  margin-top: var(--spacing-md);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.breadcrumbs a {
  color: var(--color-text-muted);
}

.breadcrumbs__home {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.12em;
}

.breadcrumbs__home-icon {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
}

.breadcrumbs__home-icon svg {
  width: 100%;
  height: 100%;
}

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

.breadcrumbs__sep {
  margin: 0 var(--spacing-xs);
}

.breadcrumbs__current {
  color: var(--color-text);
}

/* ==========================================================================
   Back to top (vana lehe "Go to Top" vaste; nähtavuse lülitab
   assets/js/back-to-top.js)
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: var(--spacing-md);
  bottom: var(--spacing-md);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--color-green-medium);
  color: var(--color-white);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast),
    background var(--transition-fast);
  /* Below the cookie-consent bar (1000): pending consent covers the button. */
  z-index: 990;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--color-green-hover);
}

/* ==========================================================================
   Cookie Consent Banner
   ========================================================================== */

.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-green-dark);
  color: var(--color-white);
  padding: var(--spacing-lg);
  display: flex;
  /* Text + buttons cannot shrink below their min-content width; without
     wrapping the fixed banner overflows the viewport on very narrow
     screens (325px at a 320px viewport, WCAG 1.4.10 reflow — a11y sweep
     F6, 2026-09-09). */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.cookie-consent p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.cookie-consent__buttons {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.cookie-consent .btn-cta {
  padding: 8px 20px;
  font-size: var(--font-size-sm);
}

.cookie-consent__decline {
  background-color: transparent;
  border: 1px solid var(--color-white);
}

.cookie-consent__decline:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Screen Reader Only
   ========================================================================== */

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal;
}

.skip-link {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal;
}

.skip-link:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  overflow: visible;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--color-green-dark);
  color: var(--color-white);
  font-size: var(--font-size-base);
  text-decoration: none;
}

.not-found,
.landing-page {
  text-align: center;
  padding: var(--spacing-2xl) 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  .home-layout {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sponsor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1201px) {
  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .site-main {
    padding: 1rem;
  }

  .sponsor-grid {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .team-page__intro {
    flex-direction: column;
  }

  .team-page__intro-media {
    max-width: 200px;
  }

  .page-content .team-grid .vaimupuu-team-member {
    flex-direction: column;
  }

  .page-content .team-grid .vaimupuu-team-member .card-team__photo {
    flex: none;
    max-width: 200px;
    width: 100%;
  }

  .page-content .team-grid .card-team__photo img {
    max-width: 200px;
    margin-inline: auto;
  }

  .cookie-consent {
    flex-direction: column;
    text-align: center;
  }
}

.external-link-cue {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25em;
  color: var(--color-orange);
}

.external-link-cue svg {
  width: 1.25em;
  height: 1.25em;
}

/* ==========================================================================
   Autor profile intro (single-autor.php) — small header above the post grid
   ========================================================================== */

.autor-intro {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  margin: 0 0 var(--spacing-xl);
}

.autor-intro__photo img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
}

.autor-intro__text {
  flex: 1 1 auto;
  min-width: 0;
}

.autor-intro__title {
  margin: 0 0 0.5em;
  font-style: italic;
  color: var(--color-text-muted, #555);
}

.autor-intro__bio {
  margin: 0 0 0.5em;
}

.autor-intro__bio > :last-child {
  margin-bottom: 0;
}

.autor-intro__contact {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em 1em;
  font-size: 0.95em;
}

@media (max-width: 640px) {
  .autor-intro {
    flex-direction: column;
    align-items: flex-start;
  }
}