/*
 * Dentestika — uzupełnienia do stylu Dentist WP.
 * Kolory główne sekcji ustawia PHP (theme_mod_color_primary), tu tylko tokeny
 * dla elementów, których motyw nie koloruje sam.
 */

:root {
	--dt-graphite: #2b2b2b;
	--dt-orto: #7b3f8c;
	--dt-orto-dark: #5a2e66;
	--dt-orto-light: #f4eef6;
	--dt-stoma: #b5372a;
	--dt-stoma-dark: #8e2a20;
	--dt-stoma-light: #fbefed;
	--dt-accent: var(--dt-graphite);
	--dt-accent-dark: #111;
}

.dt-section--ortodoncja {
	--dt-accent: var(--dt-orto);
	--dt-accent-dark: var(--dt-orto-dark);
}

.dt-section--stomatologia {
	--dt-accent: var(--dt-stoma);
	--dt-accent-dark: var(--dt-stoma-dark);
}

/* ---------- Logo ---------- */

.ct-logo__image {
	/* SVG bez wymiarów w kontenerze flex zwija się do 0 — wysokość musi być jawna. */
	height: 58px;
	width: auto;
	max-width: none;
}

@media (max-width: 767px) {
	.ct-logo__image {
		height: 42px;
	}
}

.ct-footer__logo img {
	height: 64px;
	width: auto;
	max-width: none;
}

/* ---------- Pasek kontaktowy ---------- */

.dt-toolbar__item + .dt-toolbar__item {
	margin-left: 1.5rem;
}

@media (max-width: 767px) {
	/* Na telefonie strona główna ma telefony w kaflach — pasek z dwoma działami byłby nieczytelny. */
	.dt-section--home .ct-header__toolbar {
		display: none;
	}
}

.dt-toolbar__item--ortodoncja strong { color: var(--dt-orto); }
.dt-toolbar__item--stomatologia strong { color: var(--dt-stoma); }

/* ---------- Baner przełączający sekcję (ostatnia pozycja menu) ---------- */

.ct-main-navigation > li.menu-switch > a {
	color: #fff !important;
	border-radius: 2rem;
	padding-left: 1.4em !important;
	padding-right: 1.4em !important;
	transition: background-color .2s ease;
}

.ct-main-navigation > li.menu-switch--ortodoncja > a { background: var(--dt-orto); }
.ct-main-navigation > li.menu-switch--ortodoncja > a:hover { background: var(--dt-orto-dark); }
.ct-main-navigation > li.menu-switch--stomatologia > a { background: var(--dt-stoma); }
.ct-main-navigation > li.menu-switch--stomatologia > a:hover { background: var(--dt-stoma-dark); }

/* ---------- Strona główna: wybór sekcji ---------- */

/* WPBakery nakłada tło z Design Options na .vc_column-inner, więc tam jest nakładka. */
.dt-choice .dt-choice__tile > .vc_column-inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 78vh;
	overflow: hidden;
	padding: 4rem 10% !important;
}

.dt-choice .dt-choice__tile > .vc_column-inner::before {
	content: "";
	display: block; /* nadpisuje clearfix Bootstrapa (display: table) */
	position: absolute;
	inset: 0;
	opacity: .84;
	transition: opacity .35s ease;
}

.dt-choice .dt-choice__tile--ortodoncja > .vc_column-inner::before {
	background: linear-gradient(135deg, var(--dt-orto-dark) 0%, var(--dt-orto) 100%);
}

.dt-choice .dt-choice__tile--stomatologia > .vc_column-inner::before {
	background: linear-gradient(135deg, var(--dt-stoma-dark) 0%, var(--dt-stoma) 100%);
}

.dt-choice .dt-choice__tile:hover > .vc_column-inner::before {
	opacity: .72;
}

.dt-choice .dt-choice__tile > .vc_column-inner > .wpb_wrapper {
	position: relative;
	z-index: 1;
	width: 100%;
}

.dt-choice .dt-choice__tile,
.dt-choice .dt-choice__tile h2,
.dt-choice .dt-choice__tile p,
.dt-choice .dt-choice__tile a:not(.vc_btn3) {
	color: #fff;
}

.dt-choice .dt-choice__tile h2.display-2 {
	font-size: clamp(2.4rem, 4.6vw, 4.6rem);
	line-height: 1.05;
	margin-bottom: 1.5rem;
}

.dt-choice .dt-choice__tile .h6 {
	opacity: .85;
	letter-spacing: .3em;
}

.dt-choice .dt-choice__tile .lead {
	max-width: 32rem;
}

@media (max-width: 767px) {
	.dt-choice .dt-choice__tile > .vc_column-inner {
		min-height: 62vh;
	}
}

/* ---------- Kontakt: dwie kolumny pod mapą ---------- */

.dt-languages {
	text-align: center;
	letter-spacing: .02em;
}

.dt-languages strong {
	color: var(--dt-graphite);
}

.dt-contact {
	text-align: center;
}

.dt-contact h5 {
	display: inline-block;
	padding-bottom: .4rem;
	border-bottom: 3px solid currentColor;
}

.dt-contact--ortodoncja h5 { color: var(--dt-orto); }
.dt-contact--stomatologia h5 { color: var(--dt-stoma); }

.dt-contact .dt-contact__line {
	font-size: 1.15em;
	margin-bottom: .35rem;
}

.dt-contact .dt-contact__line a {
	color: inherit;
}

.dt-map iframe {
	display: block;
	width: 100%;
	border: 0;
	filter: grayscale(.35);
}

/* ---------- Animacje wejścia (WPBakery: parametr "CSS Animation" elementu) ----------
 * WPBakery dodaje .wpb_start_animation, gdy element wjeżdża w widok. Tu łagodniejszy ruch
 * niż domyślny animate.css (przesunięcie o 100%) i kaskadowe opóźnienia: el_class "dt-delay-1…4".
 */

@keyframes dtFadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 2.5rem, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dtFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.wpb_start_animation.fadeInUp,
.wpb_start_animation.fadeIn {
	animation-duration: .9s;
	animation-timing-function: cubic-bezier(.2, .7, .2, 1);
	animation-fill-mode: both;
}

.wpb_start_animation.fadeInUp { animation-name: dtFadeInUp; }
.wpb_start_animation.fadeIn { animation-name: dtFadeIn; animation-duration: 1.2s; }

.wpb_start_animation.dt-delay-1 { animation-delay: .12s; }
.wpb_start_animation.dt-delay-2 { animation-delay: .24s; }
.wpb_start_animation.dt-delay-3 { animation-delay: .36s; }
.wpb_start_animation.dt-delay-4 { animation-delay: .48s; }

/* vc_btn nadaje el_class samemu przyciskowi, a animuje kontener — opóźnienia przez kontekst. */
.dt-choice__tile--ortodoncja .vc_btn3-container.wpb_start_animation { animation-delay: .12s; }
.dt-choice__tile--stomatologia .vc_btn3-container.wpb_start_animation { animation-delay: .24s; }
.dt-contact--ortodoncja .vc_btn3-container.wpb_start_animation { animation-delay: .12s; }
.dt-contact--stomatologia .vc_btn3-container.wpb_start_animation { animation-delay: .24s; }

/* Kafle na starcie: pełny kolor sekcji odsłania zdjęcie gabinetu.
 * fill-mode backwards — po animacji działa zwykła przezroczystość i efekt :hover. */
@keyframes dtTileReveal {
	from { opacity: 1; }
	to { opacity: .84; }
}

.dt-choice .dt-choice__tile > .vc_column-inner::before {
	animation: dtTileReveal 1.4s cubic-bezier(.2, .7, .2, 1) .1s backwards;
}

@media (prefers-reduced-motion: reduce) {
	.wpb_animate_when_almost_visible {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
	}

	.dt-choice .dt-choice__tile > .vc_column-inner::before {
		animation: none;
	}
}