/*
Theme Name: Warszawa z Palestyną
Theme URI: https://warszawazpalestyna.org
Author: jp
Description: Motyw blokowy dla polskiej organizacji non-profit. Dwa warianty kolorystyczne: Papier (jasny) i Czerń (ciemny) — do przełączania w Edytorze witryny.
Version: 2.2.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: solidarnosc-z-palestyna
*/

/* === Base === */
.wp-site-blocks > footer { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

body { -webkit-font-smoothing: antialiased; }

/* === Eyebrow labels (small wide-tracked uppercase) === */
.eyebrow {
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.75rem !important;
}

/* === Wordmark: two lines, second in red === */
.wordmark { line-height: 1.15; }
.wordmark p {
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

/* === Sticky header === */
/* The first template-part in the page is the header; make that wrapper
   the sticky element. A plain selector first so browsers without :has()
   still stick, then :has() to scope it precisely where supported. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}
.wp-site-blocks > header.wp-block-template-part:has(.site-header) {
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header {
  border-bottom: 1px solid currentColor;
  border-bottom-color: color-mix(in srgb, currentColor 12%, transparent);
}

/* === Nav links === */
.site-header .wp-block-navigation {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-header .wp-block-navigation a { color: var(--wp--preset--color--white); text-decoration: none; }
.site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--red); }

/* === Hero headline: oversized, very tight === */
.hero-title {
  line-height: 0.9 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  font-weight: 800 !important;
}
.hero-sub {
  font-size: 0.8rem !important;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
}

/* === Photo placeholder with red underline accent === */
.hero-media {
  background:
    linear-gradient(135deg, color-mix(in srgb, currentColor 8%, transparent) 0%, color-mix(in srgb, currentColor 3%, transparent) 100%),
    repeating-linear-gradient(45deg, color-mix(in srgb, currentColor 5%, transparent) 0 12px, transparent 12px 24px);
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 14%, transparent);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-media::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 92px;
  height: 4px;
  background: var(--wp--preset--color--red);
}
.hero-media .placeholder-note {
  color: var(--wp--preset--color--muted);
  color: color-mix(in srgb, currentColor 42%, transparent);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

/* === Outlined button variant === */
.btn-outline .wp-block-button__link,
.wp-block-button.btn-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--wp--preset--color--white) !important;
  border: 2px solid currentColor;
}
.btn-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--white) !important;
  color: var(--wp--preset--color--ink) !important;
}
.btn-dark .wp-block-button__link {
  background: var(--wp--preset--color--card) !important;
  color: var(--wp--preset--color--card-text) !important;
}
.btn-dark .wp-block-button__link:hover { background: color-mix(in srgb, var(--wp--preset--color--card) 86%, var(--wp--preset--color--muted)) !important; }/* === Cards === */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.equal-cards .cta-bottom {
  margin-top: auto;
  justify-content: center;
}
.info-card { text-align: center; }
.info-card h3 {
  font-size: 1.05rem !important;
  letter-spacing: 0.06em;
  margin-bottom: 0.9rem !important;
}
.info-card p { font-size: 0.9rem; line-height: 1.65; }/* === Footer === */
.footer-col h3 {
  font-size: 0.75rem !important;
  letter-spacing: 0.2em;
  margin-bottom: 1.1rem !important;
}
.footer-col p, .footer-col li { font-size: 0.88rem; }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--wp--preset--color--red); }
.footer-bottom {
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 12%, transparent);
  font-size: 0.78rem;
}

/* === Animations === */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.7s ease forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.hover-lift { transition: transform 0.2s ease; }
.hover-lift:hover { transform: translateY(-4px); }

/* === Editor: keep animated content visible while editing === */
.editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .fade-up {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll, .fade-up {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === Responsive === */
@media (max-width: 781px) {
  .hero-media { min-height: 220px; }
}/* === Page title accent rule === */
.wp-block-separator.has-red-background-color {
  max-width: 92px;
  margin-left: 0;
  border: none;
  height: 4px;
}

/* ============================================
   Variation-aware refinements
   The "Papier" variation redefines `ink` as a light
   tone, so surfaces that assumed a dark ground need
   their contrast rebuilt from the palette instead.
   ============================================ */

/* Outline button: on a light ground a white outline is invisible,
   so key it to the text color, which flips with the variation. */
.btn-outline .wp-block-button__link,
.wp-block-button.btn-outline .wp-block-button__link {
  border-color: currentColor;
}/* Hero photo placeholder note stays legible on either ground. */
.hero-media .placeholder-note {
  color: var(--wp--preset--color--muted);
}

/* === Manifesto section ===
   A single measured column meant to be read, not scanned.
   Lead sets the argument, body carries it, close lands it. */
.manifesto { max-width: 68ch; }

.manifesto-lead {
  font-size: 1.0625rem;
  line-height: 1.72;
  margin: 0 0 1.35rem;
  max-width: 62ch;
}

.manifesto-body {
  font-size: 1.0625rem;
  line-height: 1.72;
  margin: 0 0 1.35rem;
  max-width: 62ch;
}

.manifesto-close {
  font-size: 1.0625rem;
  line-height: 1.72;
  margin: 0;
  max-width: 62ch;
}

@media (max-width: 600px) {
  .manifesto-body { font-size: 1rem; line-height: 1.68; }
}/* === "Jak możesz być częścią zmiany?" cover ===
   Background photo goes on the Cover block itself (Site Editor →
   select the cover → Replace → upload). Until then this gradient
   plus the ink overlay keeps the section looking intentional. */
.change-cover {
  background-color: var(--wp--preset--color--card);
  background-image:
    radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--wp--preset--color--red) 30%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, #1b1512 0%, #0c0a09 70%);
}
.change-cover .wp-block-cover__inner-container { width: 100%; }

.change-title {
  margin: 0 0 2rem;
  text-wrap: balance;
}

/* Numbered steps: large, spaced, red numerals */
.change-steps {
  list-style: none;
  counter-reset: change;
  padding: 0;
  margin: 0;
  max-width: 34ch;
}
.change-steps > li {
  counter-increment: change;
  position: relative;
  padding-left: 3.25rem;
  margin: 0 0 1.15rem;
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.change-steps > li:last-child { margin-bottom: 0; }
.change-steps > li::before {
  content: counter(change);
  position: absolute;
  left: 0;
  top: 0.02em;
  width: 2.35rem;
  text-align: right;
  font-size: 0.95em;
  font-weight: 800;
  color: var(--wp--preset--color--red);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .change-steps > li { padding-left: 2.6rem; }
  .change-steps > li::before { width: 1.8rem; }
}

/* === Header brand lockup === */
.brand { align-items: center; }
.brand-mark { margin: 0; line-height: 0; flex: 0 0 auto; }
.brand-mark img {
  display: block;
  width: 48px;
  height: auto;
}
@media (max-width: 600px) {
  .brand-mark img { width: 40px; }
}

/* Steps are links now: keep them white over the photo, with the
   underline appearing on hover so the list still reads as a list. */
.change-steps > li a {
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--wp--preset--color--red) 70%, transparent);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.change-steps > li a:hover,
.change-steps > li a:focus-visible {
  color: #fff;
  border-bottom-color: var(--wp--preset--color--red);
}
.change-steps > li a:focus-visible {
  outline: 2px solid var(--wp--preset--color--red);
  outline-offset: 3px;
}

/* === Newsletter slot ===
   Styles both the interim note and a MailPoet form dropped in here,
   so the plugin's default form inherits the section's look. */
.newsletter-slot {
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 46ch;
}

.newsletter-wrap input[type="email"],
.newsletter-wrap input[type="text"] {
  background: var(--wp--preset--color--paper-alt);
  border: none;
  border-radius: 0;
  color: var(--wp--preset--color--white);
  padding: 0.95rem 1.1rem;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.9rem;
  width: 100%;
  max-width: 22rem;
}
.newsletter-wrap input::placeholder { color: var(--wp--preset--color--muted); }
.newsletter-wrap input:focus {
  outline: 2px solid var(--wp--preset--color--red);
  outline-offset: -2px;
}
.newsletter-wrap input[type="submit"],
.newsletter-wrap button[type="submit"] {
  background: var(--wp--preset--color--red);
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 0.95rem 1.5rem;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  width: auto;
}
.newsletter-wrap input[type="submit"]:hover,
.newsletter-wrap button[type="submit"]:hover {
  background: color-mix(in srgb, var(--wp--preset--color--red) 82%, #000);
}

/* === Sticky header: compact on scroll ===
   .is-compact is toggled by the scroll listener in functions.php.
   Everything animates off padding and logo size so the nav never reflows. */
.site-header {
  transition: padding 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
  background-color: var(--wp--preset--color--ink);
}
.site-header.is-compact {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  box-shadow: 0 1px 0 color-mix(in srgb, currentColor 14%, transparent),
              0 6px 24px rgba(0, 0, 0, 0.28);
}

/* Logo shrinks with the bar */
.brand-mark img {
  transition: width 0.22s ease;
}
.site-header.is-compact .brand-mark img {
  width: 34px;
}

/* Second wordmark line folds away, leaving a single compact line */
.wordmark p {
  transition: font-size 0.22s ease, opacity 0.18s ease, max-height 0.22s ease;
  overflow: hidden;
}
.site-header.is-compact .wordmark p {
  font-size: 0.85rem;
}
.site-header.is-compact .wordmark p:last-child {
  opacity: 0;
  max-height: 0;
}

@media (max-width: 600px) {
  .site-header.is-compact .brand-mark img { width: 30px; }
}

/* Respect reduced-motion: state still changes, just without the tween */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .brand-mark img,
  .site-header .wordmark p {
    transition: none !important;
  }
}

/* Editor: never show the compact state while editing the header */
.editor-styles-wrapper header.wp-block-template-part,
.editor-styles-wrapper .site-header {
  position: static;
}

/* === Manifesto: heading, rule, statement === */
.manifesto-heading {
  margin: 0 0 1.5rem;
  text-transform: none;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.manifesto-rule.wp-block-separator {
  max-width: 100%;
  width: 100%;
  height: 3px;
  border: none;
  margin: 1.75rem 0 1.5rem;
  opacity: 1;
}

/* The bolded passage below the red line — larger and heavier than body,
   lighter than the lead, so it reads as the section's turning point. */
.manifesto-statement {
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 1.5rem;
  max-width: 58ch;
  text-wrap: balance;
}

/* === Joining steps (dołącz section) === */
.join-steps {
  list-style: none;
  counter-reset: join;
  padding: 0;
  margin: 1.25rem 0 1.5rem;
  max-width: 56ch;
}
.join-steps > li {
  counter-increment: join;
  position: relative;
  padding-left: 2.5rem;
  margin: 0 0 0.85rem;
  line-height: 1.6;
}
.join-steps > li:last-child { margin-bottom: 0; }
.join-steps > li::before {
  content: counter(join);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--red);
  color: #fff;
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
}

/* Cover: cap the height on short/landscape viewports so the section
   never exceeds the screen on laptops. */
@media (max-height: 800px) and (min-width: 782px) {
  .change-cover { min-height: 620px !important; }
}

/* ============================================
   Blog: archives, cards, single posts
   ============================================ */

/* --- Meta row: category chip + date --- */
.post-meta-row {
  align-items: center;
  margin-bottom: 0.9rem;
}
.post-category a {
  display: inline-block;
  background: var(--wp--preset--color--red);
  color: #fff;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  line-height: 1;
}
.post-category a:hover {
  background: color-mix(in srgb, var(--wp--preset--color--red) 82%, #000);
  text-decoration: none;
}
.post-date {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin: 0;
}

/* --- Archive header --- */
.archive-title {
  margin: 0;
  text-wrap: balance;
}
.archive-desc {
  font-size: 1rem;
  line-height: 1.65;
  max-width: 58ch;
  margin: 0.75rem 0 0;
}
.archive-rule.wp-block-separator {
  max-width: 92px;
  margin-left: 0;
  border: none;
  height: 4px;
  opacity: 1;
}

/* --- Post list --- */
.post-list { margin: 0; }
.post-card {
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 30%, transparent);
  max-width: 760px;
}
.post-card:last-child { border-bottom: none; }
.post-card-title {
  margin: 0 0 0.6rem;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.post-card-title a {
  color: inherit;
  text-decoration: none;
}
.post-card-title a:hover {
  color: var(--wp--preset--color--red);
  text-decoration: none;
}
.post-card-excerpt {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  max-width: 62ch;
}
.post-card-excerpt .wp-block-post-excerpt__more-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--red);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

/* --- Pagination --- */
.post-pagination {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 30%, transparent);
  padding-top: var(--wp--preset--spacing--40);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.post-pagination a { text-decoration: none; }
.post-pagination a:hover { text-decoration: underline; }
.post-pagination .wp-block-query-pagination-numbers { letter-spacing: 0.04em; }

/* --- Single post --- */
.post-title-single {
  margin: 0;
  text-transform: none;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.post-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Article body: comfortable long-form reading */
.post-body {
  font-size: 1.0625rem;
  line-height: 1.75;
}
.post-body > * { margin-block: 0 1.35rem; }
.post-body > *:last-child { margin-bottom: 0; }
.post-body h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  text-transform: none;
  font-weight: 700;
  line-height: 1.22;
  margin-top: 2.5rem;
}
.post-body h3 {
  font-size: 1.2rem;
  text-transform: none;
  font-weight: 700;
  margin-top: 2rem;
}
.post-body a {
  color: var(--wp--preset--color--red);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.post-body blockquote {
  border-left: 4px solid var(--wp--preset--color--red);
  padding-left: 1.25rem;
  margin-left: 0;
  font-style: normal;
}
.post-body img { height: auto; }
.post-body figcaption {
  font-size: 0.85rem;
  color: var(--wp--preset--color--muted);
  margin-top: 0.5rem;
}
.post-body ul, .post-body ol { padding-left: 1.3rem; }
.post-body li { margin-bottom: 0.5rem; }

/* --- Prev/next --- */
.post-nav {
  gap: 1.5rem;
  font-size: 0.85rem;
}
.post-nav a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.post-nav a:hover { color: var(--wp--preset--color--red); }

@media (max-width: 600px) {
  .post-nav { flex-direction: column; gap: 0.75rem; }
}

/* ============================================
   Hero: narrow-viewport fixes
   ============================================ */

/* The hero words must never break mid-word. `clamp()` alone can't prevent
   this — its floor (2.75rem) is still wider than a 360px column — so the
   lines get their own smaller floor on narrow screens, plus a hard
   no-break rule as a backstop at any width. */
.hero-title {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

@media (max-width: 900px) {
  .hero-title {
    font-size: clamp(2rem, 9vw, 4rem) !important;
  }
}
@media (min-width: 782px) and (max-width: 900px) {
  .hero-title {
    font-size: clamp(2rem, 6vw, 3.25rem) !important;
  }
}
@media (max-width: 520px) {
  .hero-title {
    font-size: clamp(1.75rem, 11vw, 2.75rem) !important;
    letter-spacing: -0.015em !important;
  }
}
@media (max-width: 380px) {
  .hero-title {
    font-size: 1.6rem !important;
  }
}

/* The striped fill was a placeholder for the empty photo box. Once a real
   image sits inside, the stripes show through wherever the image does not
   reach — so drop the decoration and the fixed height when an image is
   present, and let the picture define the box. */
.hero-media:has(img) {
  background: none;
  border: none;
  min-height: 0;
  display: block;
}
.hero-media:has(img)::after {
  left: 0;
  bottom: -14px;
}
.hero-media img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-media figure { margin: 0; }

/* Fallback for browsers without :has() — if the placeholder note is gone,
   the stripes are the only thing left, so keep them subtle at small sizes. */
@media (max-width: 781px) {
  .hero-media { min-height: 0; }
}

/* ============================================
   Header on mobile: keep it to one row
   ============================================ */
@media (max-width: 781px) {
  /* The outer row wraps by default, dropping nav + CTA onto a second line.
     Everything fits on one row once the nav is a hamburger, so stop it
     wrapping and let the brand shrink instead. */
  .site-header > .wp-block-group > .wp-block-group {
    flex-wrap: nowrap !important;
    gap: 0.75rem;
  }

  .site-header .brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* Right cluster: nav + CTA, tightened and pulled clear of the edge */
  .site-header .brand + .wp-block-group {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    gap: 0.6rem !important;
    align-items: center;
  }

  /* The hamburger sat flush against the container edge */
  .site-header .wp-block-navigation__responsive-container-open {
    padding: 0.35rem;
    margin-right: 0.15rem;
  }

  /* Keep the CTA compact so the row never overflows */
  .site-header .wp-block-button__link {
    padding: 0.7rem 0.9rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }

  /* Wordmark shrinks rather than forcing a wrap */
  .site-header .wordmark p {
    font-size: 0.8rem;
    white-space: nowrap;
  }
}

/* Very narrow: drop the wordmark text, keep the logo as the brand mark */
@media (max-width: 400px) {
  .site-header .wordmark { display: none; }
  .site-header .wp-block-button__link {
    padding: 0.65rem 0.75rem;
    font-size: 0.66rem;
  }
}

/* The open hamburger overlay should clear the sticky bar */
.wp-block-navigation__responsive-container.is-menu-open {
  padding-top: 4.5rem;
}