/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=childtheme&utm_medium=wp-dash
Description: Child theme for Hello Elementor — EdukacjaplusTerapia redesign.
Author: EdukacjaplusTerapia
Template: hello-elementor
Version: 1.0.7
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor-child
*/

/* Custom styles below */

/* Styleguide:
   - kolory:      assets/css/colors.css
   - typografia:  assets/css/typography.css  (źródło: homepage / 14099)
*/

/* Płynne przejścia na hover / focus typowych elementów interaktywnych. */
:where(
	a,
	button,
	.button-primary,
	.button-secondary,
	.e-button-base,
	.elementor-button,
	.elementor-icon,
	.elementor-nav-menu a,
	.elementor-post,
	input[type="submit"],
	input[type="button"],
	[role="button"]
) {
	transition:
		color 200ms ease,
		background-color 200ms ease,
		border-color 200ms ease,
		opacity 200ms ease,
		transform 200ms ease,
		box-shadow 200ms ease,
		fill 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
	:where(
		a,
		button,
		.button-primary,
		.button-secondary,
		.e-button-base,
		.elementor-button,
		.elementor-icon,
		.elementor-nav-menu a,
		.elementor-post,
		input[type="submit"],
		input[type="button"],
		[role="button"]
	) {
		transition: none;
	}
}

/* Hover buttonów: zawsze dark-blue + biały tekst (nadpisuje kolory z Elementora).
   Wyjątki: .gray-hov / .black-hov (na buttonie albo rodzicu) — własne hovere.
   Overlay karty Kadry (.ept-kadra-modal-trigger) ma być niewidoczny — inaczej
   cały item loopa zamienia się w tealowy kwadrat. */
:is(
	button,
	.button-primary,
	.button-secondary,
	.e-button-base,
	.elementor-button,
	.ept-button,
	input[type="submit"],
	input[type="button"]
):is(:hover, :focus-visible):not(
	.elementor-item,
	.elementor-sub-item,
	.menu-link,
	.elementor-menu-toggle,
	.gray-hov,
	.black-hov,
	:is(.gray-hov, .black-hov) *,
	.ept-kadra-modal-trigger,
	:is(.ept-kadra-modal-trigger) *
) {
	background-color: var(--ept-color-brand-dark, #00889d) !important;
	background-image: none !important;
	border-color: var(--ept-color-brand-dark, #00889d) !important;
	color: var(--ept-color-white, #fff) !important;
}

:is(
	button,
	.button-primary,
	.button-secondary,
	.e-button-base,
	.elementor-button,
	.ept-button,
	input[type="submit"],
	input[type="button"]
):is(:hover, :focus-visible):not(
	.elementor-item,
	.elementor-sub-item,
	.menu-link,
	.elementor-menu-toggle,
	.gray-hov,
	.black-hov,
	:is(.gray-hov, .black-hov) *,
	.ept-kadra-modal-trigger,
	:is(.ept-kadra-modal-trigger) *
) :where(.elementor-button-text, .elementor-button-content-wrapper, span, i, svg) {
	color: var(--ept-color-white, #fff) !important;
	fill: var(--ept-color-white, #fff) !important;
}

/* Bazowy kolor linków przeniesiony z Custom CSS Elementora. Selektor `:root body a`
	ma dość wagi, aby nadpisać Site Settings, ale nie wymaga !important i
	pozwala komponentom oraz nawigacji ustawiać własne, bardziej szczegółowe kolory. */
:root body a {
	color: #000;
}

a:is(:hover, :focus-visible, :active) {
	color: var(--ept-color-link-hover, #007a8c);
}

/* Link opakowujący całą kartę / blok nie przekolorowuje swojej zawartości —
   inaczej jeden hover zmieniałby kolor wszystkich akapitów, ikon i badge'y
   w środku. `color: inherit` cofa link do koloru kontekstu, więc dzieci nic
   nie dziedziczą. Reguła stoi po poprzedniej i ma tę samą specyficzność
   (`:has(:where(...))` nie dodaje wagi), dlatego wygrywa kolejnością. */
a:has(:where(p, div, section, article, aside, ul, ol, li, figure, picture, img, table, form, button)):is(:hover, :focus-visible, :active) {
	color: inherit;
}

/* Nagłówki w środku linku reagują zawsze — także w linkach-kartach. */
a:is(:hover, :focus-visible, :active) :where(h1, h2, h3, h4, h5, h6) {
	color: var(--ept-color-link-hover, #007a8c);
}

/* Nawigacja rządzi się własnymi kolorami z Elementora (menu główne, dropdown,
   menu mobilne, paginacja), więc globalny hover jej nie dotyczy. `inherit`
   cofa link do koloru kontekstu. Reguła jest ostatnia i ma tę samą
   specyficzność co poprzednie, dlatego wygrywa kolejnością. */
:where(
	nav,
	[role="navigation"],
	.site-navigation,
	.nav-bottom,
	.elementor-nav-menu,
	.elementor-nav-menu--main,
	.elementor-nav-menu--dropdown,
	.elementor-menu-toggle,
	.mobile-menu-view
) a:is(:hover, :focus-visible, :active),
:where(
	nav,
	[role="navigation"],
	.site-navigation,
	.nav-bottom,
	.elementor-nav-menu,
	.elementor-nav-menu--main,
	.elementor-nav-menu--dropdown,
	.elementor-menu-toggle,
	.mobile-menu-view
) a:is(:hover, :focus-visible, :active) :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* Odstęp między nazwą kategorii a licznikiem w menu archiwum Aktualności. */
.ept-cat-count {
	margin-inline-start: 0.4em;
}

/* Białe kafle wpisów na archiwum Aktualności (i filtrach sekcji). */
body.blog .elementor-widget-archive-posts .elementor-post {
	background-color: #fff;
	border-radius: 14px;
	overflow: hidden;
}

body.blog .elementor-widget-archive-posts .elementor-post__text {
	padding: 0 1rem 1.25rem;
}

body.blog .elementor-widget-archive-posts .elementor-posts-container .elementor-post__thumbnail {
	border-radius: 14px 14px 0 0;
}

/* „Czytaj więcej” + strzałka jak na stronie głównej */
body.blog .elementor-widget-archive-posts .elementor-post__read-more-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 0.75rem;
}

body.blog .elementor-widget-archive-posts .elementor-post__read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
}

body.blog .elementor-widget-archive-posts .elementor-post__read-more .elementor-icon {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	line-height: 1;
}

ul li, ol li {
	font-size: 14px !important;
}

/* /terapia — full-bleed partner-logo hero (Figma crop, no copy overlay). */
.ept-terapia-hero {
	min-height: 60vh;
}

@media (max-width: 1024px) {
	.ept-terapia-hero {
		min-height: 70vh;
	}
}

/* .e-button-base {
	padding: 8px 24px !important;
} */

/* Strona główna — natywna karuzela partnerów Elementora. */
.ept-sponsors-carousel {
	width: 100%;
	padding-block: 34px;
	overflow: hidden;
}

.ept-sponsors-carousel .swiper-wrapper {
	align-items: center;
	transition-timing-function: linear !important;
}

.ept-sponsors-carousel .swiper-slide {
	display: flex;
	height: 126px;
	align-items: center;
	justify-content: center;
}

.ept-sponsors-carousel .swiper-slide-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 767px) {
	.ept-sponsors-carousel {
		padding-block: 24px;
	}

	.ept-sponsors-carousel .swiper-slide {
		height: 108px;
	}
}

/* -------------------------------------------------------------------------
   Warianty przycisków dla redaktorów.
   Domyślny wygląd pochodzi z Elementor Site Settings → Theme Style → Buttons.
   Klasę wariantu dodaje się w Advanced → CSS Classes na widżecie przycisku.
   ------------------------------------------------------------------------- */
.ept-button--dark :is(.elementor-button, .e-button),
:is(.elementor-button, .e-button).ept-button--dark {
	background-color: var(--ept-color-ink);
	color: var(--ept-color-white);
}

.ept-button--dark :is(.elementor-button, .e-button):is(:hover, :focus-visible),
:is(.elementor-button, .e-button).ept-button--dark:is(:hover, :focus-visible) {
	background-color: var(--ept-color-brand-dark);
	color: var(--ept-color-white);
}

.ept-button--outline :is(.elementor-button, .e-button),
:is(.elementor-button, .e-button).ept-button--outline {
	border: 2px solid var(--ept-color-brand-dark);
	background: transparent;
	color: var(--ept-color-brand-dark);
}

.ept-button--outline :is(.elementor-button, .e-button):is(:hover, :focus-visible),
:is(.elementor-button, .e-button).ept-button--outline:is(:hover, :focus-visible) {
	background-color: var(--ept-color-brand-dark);
	color: var(--ept-color-white);
}

.ept-button--on-dark :is(.elementor-button, .e-button),
:is(.elementor-button, .e-button).ept-button--on-dark {
	border: 2px solid var(--ept-color-brand);
	background-color: var(--ept-color-brand);
	color: var(--ept-color-ink);
}

.ept-button--on-dark :is(.elementor-button, .e-button):is(:hover, :focus-visible),
:is(.elementor-button, .e-button).ept-button--on-dark:is(:hover, :focus-visible) {
	border-color: var(--ept-color-white);
	background-color: transparent;
	color: var(--ept-color-white);
}

.ept-button--text :is(.elementor-button, .e-button),
:is(.elementor-button, .e-button).ept-button--text {
	padding-inline: 0;
	border: 0;
	background: transparent;
	color: var(--ept-color-brand-dark);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ept-button--text :is(.elementor-button, .e-button):is(:hover, :focus-visible),
:is(.elementor-button, .e-button).ept-button--text:is(:hover, :focus-visible) {
	background: transparent;
	color: var(--ept-color-ink);
}

/* Reguły przeniesione z Custom CSS Elementora. */
.mobile-menu-view,
#elementor-popup-modal-17605 {
	z-index: 99999 !important;
}

.about-cards__item {
	border-radius: 14px !important;
}

.who-we-are__icon {
	width: 100px !important;
	max-height: 80px !important;
}

.bgc-two-colors {
	background: linear-gradient(90deg, #19cbe1 50%, #211e1f 50%);
}

.search-modal {
	z-index: 999999999 !important;
}

.search-modal .dialog-close-button svg {
	position: absolute !important;
	top: 30px !important;
	right: 30px !important;
	fill: #fff !important;
	font-size: 21px !important;
}

.top-nav {
	justify-content: center !important;
}

.mobile-menu-canvas nav {
	overflow-x: hidden !important;
}

/* Tytuł strony jest częścią banera Elementora; nie powielaj go nad treścią. */
body.page main.site-main > article.page > .page-header {
	display: none;
}

/* Oddech pomiędzy starszymi sekcjami podstron projektów Fundacji. */
body.ept-fundacja-detail .page-content > .elementor {
	--ept-project-section-space: clamp(1.5rem, 3.5vw, 4rem);
}

body.ept-fundacja-detail .page-content > .elementor > .e-parent + .e-parent {
	margin-top: var(--ept-project-section-space);
}

@media (max-width: 767px) {
	body.ept-fundacja-detail .page-content > .elementor {
		--ept-project-section-space: 1.5rem;
	}
}