/*
Theme Name: Poczucia
Theme URI: https://poczucia.pl
Author: Ewa Anszperger
Author URI: https://poczucia.pl
Description: Poczucia — autorski blokowy motyw WordPress dla przestrzeni pracy somatycznej Ewy Anszperger. Ciepła, redakcyjna estetyka oparta na czuciu, ciszy i obecności. Pełne wsparcie edytora bloków (Full Site Editing).
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: poczucia
Tags: full-site-editing, block-styles, blog, portfolio, one-column, two-columns, custom-colors, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, wellness
*/

/*
 * Stylowanie odbywa się przede wszystkim przez theme.json.
 * Ten plik zawiera dopełniające reguły, których theme.json nie obejmuje:
 * subtelne animacje, ziarno na zdjęciach, akcenty pisma odręcznego.
 */

/* ---------- Reduce-motion respect ---------- */
@media (prefers-reduced-motion: no-preference) {
  .poczucia-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .poczucia-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Edytor blokowy: wyłącz animacje reveal ---------- */
.editor-styles-wrapper .poczucia-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---------- Linki w stopce i ciemnych sekcjach ---------- */
.poczucia-site-footer a {
  color: var(--wp--preset--color--warm-cream);
  text-decoration: none;
  transition: color 0.3s ease;
}
.poczucia-site-footer a:hover {
  color: var(--wp--preset--color--sand-gold);
}
/* Linki wewnątrz ciemnych sekcji dziedziczą jasny kolor tekstu rodzica */
.has-near-black-background-color a,
.has-charcoal-background-color a {
  color: inherit;
}
.has-near-black-background-color a:hover,
.has-charcoal-background-color a:hover {
  color: var(--wp--preset--color--sand-gold);
}

/* ---------- Akcent pisma odręcznego ---------- */
.poczucia-script {
  font-family: var(--wp--preset--font-family--script);
  font-style: italic;
  color: var(--wp--preset--color--sand-gold);
  font-weight: 400;
  letter-spacing: 0;
}

/* ---------- Etykieta / kicker ---------- */
.poczucia-kicker {
  font-family: var(--wp--preset--font-family--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--wp--preset--color--mocha);
}

/* ---------- Ziarno / klimat zdjęć ---------- */
.poczucia-photo img,
.wp-block-cover.poczucia-photo .wp-block-cover__image-background {
  filter: grayscale(100%) contrast(1.02);
}

/* Kadrowanie 4:3 dla zdjęć w blokach obrazu (zamiast stylów inline, by
   uniknąć błędu walidacji bloku w WordPress 7.0) */
.wp-block-image.poczucia-photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Delikatny vignette + grain overlay na cover hero */
.poczucia-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Linki w treści ---------- */
.poczucia-content a:not(.wp-element-button) {
  color: var(--wp--preset--color--deep-umber);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--wp--preset--color--sand-gold);
  transition: text-decoration-color 0.3s ease, color 0.3s ease;
}
.poczucia-content a:not(.wp-element-button):hover {
  text-decoration-color: var(--wp--preset--color--deep-umber);
}

/* ---------- Przyciski — mikro-interakcja ---------- */
.wp-element-button,
.wp-block-button__link {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.4s ease, color 0.4s ease, opacity 0.4s ease;
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
}

/* Strzałka w linkach-CTA */
.poczucia-arrow a::after,
a.poczucia-arrow::after {
  content: " →";
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.poczucia-arrow a:hover::after,
a.poczucia-arrow:hover::after {
  transform: translateX(6px);
}

/* ---------- Wyrównanie obrazów w kartach warsztatów ---------- */
.poczucia-path-card .wp-block-image,
.poczucia-path-card .wp-block-image.poczucia-photo {
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 3 / 2;
}
.poczucia-path-card .wp-block-image img,
.poczucia-path-card .wp-block-image.poczucia-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: unset !important;
  display: block;
  border-radius: 0;
}

/* ---------- Karty: brak ramki, brak cienia (zgodnie z DS) ---------- */
.poczucia-card {
  box-shadow: none !important;
  border: 0 !important;
}

/* Hover na kartach ścieżek */
.poczucia-path-card {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.poczucia-path-card:hover {
  transform: translateY(-6px);
}

/* ---------- Cienka linia-separator ---------- */
.poczucia-rule {
  border: 0;
  height: 1px;
  background: var(--wp--preset--color--sand-gold);
  opacity: 0.5;
}

/* ---------- Duża litera inicjalna w manifeście ---------- */
.poczucia-lead p:first-of-type::first-letter {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 3.4em;
  line-height: 0.8;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--wp--preset--color--sand-gold);
}

/* ---------- Nawigacja: podkreślenie hover ---------- */
.wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after {
  width: 100%;
}

/* ---------- Responsywne dopasowanie hero ---------- */
@media (max-width: 781px) {
  .poczucia-hero-title {
    font-size: clamp(2.4rem, 11vw, 3.6rem) !important;
  }
}