/*
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;
  /* All sizes are rem (relative to the 16px root) so they scale together
     with the root — the A+ toggle raises the root,
     and everything follows. px values here used to stay frozen in those
     modes (headings/nav didn't grow with A+); converting them to their rem
     equivalents (28px = 1.75rem at a 16px root, etc.) is visually identical
     at the default root but lets them scale. The small-text tokens (sm/xs/
     2xs) also got a modest bump: card excerpts, meta and captions read too
     small on the card-heavy pages (Janek + Kerttu, 2026-09-15). */
  --font-size-base: 1.1875rem;  /* 19px at 16px; ~20.2px at the 106.25% root */
  --font-size-sm: 1.045rem;     /* supporting text (adopted from the chosen experiment) */
  --font-size-xs: 0.935rem;
  --font-size-2xs: 0.792rem;
  --font-size-nav: 0.9375rem;   /* 15px, now rem */
  --font-size-mobile-nav: 1.25rem; /* 20px, now rem */
  --font-size-h1: 1.75rem;      /* 28px, now rem */
  --font-size-h2: 1.5rem;       /* 24px, now rem */
  --font-size-h3: 1.25rem;      /* 20px */
  --font-size-h6: 1rem;         /* 16px, now rem */

  /* 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 {
  /* Base type size for the whole site. Raised from 100% (16px) after Janek
     + Kerttu compared the larger-type experiment (2026-09-15): they chose
     the "test" scheme (110%) but a notch smaller, so 106.25% = 17px. Every
     rem size (text and spacing) scales from here, and the A+ toggle
     composes on top (125% of this). */
  font-size: 106.25%;
}

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"] .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"] .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);
}

/* ==========================================================================
   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.
   ========================================================================== */

.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%;
}

/* A center-aligned image (align: center) must stay centered in article and
   page bodies. The rule above zeroes the horizontal margins of every content
   figure (margin: var(--spacing-lg) 0), which outranks core's
   .wp-block-image.aligncenter { margin-inline: auto } and left-pins centered
   images — the "centered in the editor preview, jammed into the corner once
   saved" bug (Janek, 2026-09-23: Vägivallast loobumise tugiliin). Restore the
   auto side margins at higher specificity; the vertical spacing still applies. */
.single-post__content figure.wp-block-image.aligncenter,
.page-content figure.wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* Right-aligned article images each take their own line, flush to the content
   edge. Without this, consecutive float:right images pack onto shared lines
   whenever two fit — so some sit inset from the right while others are flush.
   The block editor shows every one flush right (it lays blocks out singly),
   the front end runs the real float algorithm and staggers them (Janek,
   2026-09-24: the Inim-kaubandus illustrations). clear:right drops each onto a
   fresh line at the right edge, matching the editor. */
.single-post__content figure.wp-block-image.alignright,
.page-content figure.wp-block-image.alignright {
  clear: right;
}

.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;
  }
}

/* ----- Lõik: Taandega (core/paragraph .is-style-taandega) ----------------- *
 * Whole-paragraph indent, picked in the paragraph block's Styles tab.
 * Registered in functions.php > vaimupuu_register_block_styles(). Core's
 * "Rea taane" control stays available for genuine first-line indents;
 * this style is for the lihtne keel pattern of several short
 * <br>-separated lines that must all move together. --spacing-lg (2rem)
 * lands close to the 28-31px editors were dialing in by hand. */
p.is-style-taandega {
  padding-left: var(--spacing-lg);
}

/* ----- 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;
  }
}