/*
 * Porto ⇄ WordPress blocks compatibility layer.
 *
 * Loaded right after the Porto template CSS (Bootstrap + theme*.css) on the
 * front end and in the editor canvas. Porto styles bare elements (h1, p, li,
 * a:hover…) with fixed pixel values meant for its own HTML; these rules hand
 * those decisions back to theme.json / Global Styles, while every Porto
 * component class (.counters, .testimonial, .pricing-table, .owl-carousel,
 * .text-color-primary, .font-weight-bold…) keeps working as in the template.
 */

/* -------------------------------------------------------------------------
 * Typography: let theme.json and block settings decide.
 * ---------------------------------------------------------------------- */

/* Porto: p { color: var(--default); line-height: 26px; margin: 0 0 20px } */
body p {
	color: inherit;
	line-height: inherit;
}

/* Porto: li { line-height: 24px } */
body li {
	line-height: inherit;
}

/* Porto gives headings/paragraphs bottom margins; block layouts use blockGap. */
body :is(h1, h2, h3, h4, h5, h6, p) {
	margin-block-end: 0;
}

/* Porto underlines every link on hover; buttons and menus should not. */
body .wp-element-button:hover,
body .wp-block-button__link:hover,
body .wp-block-navigation a:hover,
body .wp-block-site-title a:hover,
body .wp-block-post-title a:hover,
body .wp-block-social-link a:hover,
body .wp-block-porto-breadcrumbs a:hover,
body .porto-menu a:hover,
body .nav-link:hover,
body .owl-carousel a:hover {
	text-decoration: none;
}

/* Porto: a:hover { color: var(--primary--100) } outranks theme.json's zero-specificity hover
 * colours, leaving dark-blue text on dark buttons and dark sections. Restate theme.json's
 * values; button styles and components with their own hover rules are more specific. */
body .wp-element-button:hover,
body .wp-block-button__link:hover {
	color: var(--wp--preset--color--base);
}

body a:where(:not(.wp-element-button, .wp-block-button__link)):hover {
	color: var(--wp--preset--color--primary);
}

body :is(.is-style-section-dark, .is-style-section-primary, .wp-block-cover:not(.is-light), footer) a:where(:not(.wp-element-button, .wp-block-button__link)):hover {
	color: var(--wp--preset--color--base);
}

/* Porto: hr { background: rgba(0,0,0,.06); height: 1px } — let core/separator style itself. */
.wp-block-separator {
	height: auto;
	background: none;
}

/* Bootstrap reboot adds a bottom margin to figures; blocks handle spacing. */
.wp-block-image,
.wp-block-gallery {
	margin-bottom: 0;
}

/* Bootstrap: legend/label/button resets that collide with core blocks. */
.wp-block-search__label {
	display: block;
}

/* -------------------------------------------------------------------------
 * Porto sections on blocks.
 *
 * Porto colour utilities (.bg-primary, .bg-dark…) and section styles work on
 * any group via Advanced → Additional CSS class(es). These keep text readable
 * when such a class is used.
 * ---------------------------------------------------------------------- */

:is(.bg-primary, .bg-secondary, .bg-tertiary, .bg-quaternary, .bg-dark, .section-dark, .section-primary, .section-secondary) :is(h1, h2, h3, h4, h5, h6):not([class*="text-color-"]):not(.has-text-color) {
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 * Animations (see inc/block-extensions.php → "Porto animation" panel).
 * ---------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------------
 * Responsive visibility (block sidebar → "Porto: visibility").
 *   mobile  < 768px · tablet 768–991px · desktop ≥ 992px (Bootstrap md/lg).
 * ---------------------------------------------------------------------- */

@media (max-width: 767.98px) {
	.porto-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.porto-hide-tablet {
		display: none !important;
	}
}

@media (min-width: 992px) {
	.porto-hide-desktop {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Owl Carousel inside block layouts.
 * ---------------------------------------------------------------------- */

/* Block layouts add margins between children; owl items must not get them. */
.owl-carousel .owl-stage-outer > .owl-stage > .owl-item > * {
	margin-block: 0;
}

/* Slides that are full-height covers. */
.owl-carousel .owl-item > .wp-block-cover {
	height: 100%;
}

/* Until Owl initialises, show the first slides in a row instead of nothing. */
.wp-block-porto-carousel {
	--porto-carousel-items: var(--porto-carousel-items-mobile, 1);
}

@media (min-width: 768px) {
	.wp-block-porto-carousel {
		--porto-carousel-items: var(--porto-carousel-items-tablet, 2);
	}
}

@media (min-width: 979px) {
	.wp-block-porto-carousel {
		--porto-carousel-items: var(--porto-carousel-items-desktop, 3);
	}
}

.wp-block-porto-carousel .owl-carousel:not(.owl-loaded) {
	display: flex;
	overflow: hidden;
	gap: var(--porto-carousel-gap, 0px);
}

.wp-block-porto-carousel .owl-carousel:not(.owl-loaded) > * {
	flex: 0 0 calc((100% - (var(--porto-carousel-items, 1) - 1) * var(--porto-carousel-gap, 0px)) / var(--porto-carousel-items, 1));
	margin: 0;
}