/*
Theme Name: MarketNet 2026
Theme URI: https://marketnetdiv.com
Author: Vlatko Zdrale
Author URI: https://interlinegroup.com/
Description: MarketNet theme on Bootstrap 5.3. Classic editor, no jQuery.
Version: 2.1.1
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: marketnet
*/

/* Brand: the original colours and Open Sans, fed into Bootstrap's variables.
   Layout and spacing live in the templates as Bootstrap utilities. */
:root {
	--mn-dark: #343a40;
	--mn-dark-hover: #23272b;
	--mn-accent: #839ca0;
	--bs-body-font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bs-primary: #343a40;
	--bs-primary-rgb: 52, 58, 64;
	--bs-dark: #343a40;
	--bs-dark-rgb: 52, 58, 64;
	--bs-link-color: #839ca0;
	--bs-link-color-rgb: 131, 156, 160;
	--bs-link-hover-color: #b7c5c8;
	--bs-link-hover-color-rgb: 183, 197, 200;
}

a { text-decoration: none; }
.entry-content a { text-decoration: underline; text-underline-offset: .2em; }

.btn-primary { --bs-btn-bg: var(--mn-dark); --bs-btn-border-color: var(--mn-dark); --bs-btn-hover-bg: var(--mn-dark-hover); --bs-btn-hover-border-color: var(--mn-dark-hover); --bs-btn-active-bg: var(--mn-dark-hover); --bs-btn-active-border-color: var(--mn-dark-hover); }
.btn-outline-dark { --bs-btn-color: var(--mn-dark); --bs-btn-border-color: var(--mn-dark); --bs-btn-hover-bg: var(--mn-dark); --bs-btn-hover-border-color: var(--mn-dark); --bs-btn-active-bg: var(--mn-dark); --bs-btn-active-border-color: var(--mn-dark); }
.pagination { --bs-pagination-active-bg: var(--mn-dark); --bs-pagination-active-border-color: var(--mn-dark); }
.btn-icon { width: 2.5rem; height: 2.5rem; }
.text-accent { color: var(--mn-accent); }
.bg-alice { background-color: aliceblue; }

/* Motion */
:root { --mn-ease: cubic-bezier(.2, .7, .2, 1); }
@keyframes mn-fade-up { from { opacity: 0; transform: translateY(var(--mn-rise, 1.5rem)); } }
@keyframes mn-zoom { from { transform: scale(1); } to { transform: scale(var(--mn-zoom, 1.12)); } }
@keyframes mn-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mn-drop { from { opacity: 0; transform: translateY(.5rem); } }
@keyframes mn-shrink { to { width: 140px; height: 51px; } }
.btn { transition: color .15s, background-color .25s, border-color .25s, box-shadow .25s, transform .25s var(--mn-ease); }
.btn.rounded-pill:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgb(0 0 0 / .15); }

/* Header: logo shrinks as the page scrolls, links get a sliding underline */
.admin-bar .sticky-top { top: var(--wp-admin--admin-bar--height, 0); }
.dropdown-item { transition: padding-left .2s, background-color .2s; }
.dropdown-item:hover { padding-left: 1.5rem; }
@media (min-width: 768px) {
	.navbar .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
	.navbar .dropdown:hover > .dropdown-menu, .navbar .dropdown-menu.show { animation: mn-drop .25s var(--mn-ease); }
	.navbar .nav-link { position: relative; }
	.navbar .nav-link::before { content: ""; position: absolute; inset: auto .5rem .3rem; height: 2px; background: var(--mn-accent); transform: scaleX(0); transition: transform .3s var(--mn-ease); }
	.navbar .nav-link:hover::before, .navbar .nav-link.active::before { transform: scaleX(1); }
}
@supports (animation-timeline: scroll()) {
	.navbar-brand img { animation: mn-shrink linear both; animation-timeline: scroll(); animation-range: 0 200px; }
}

/* Heroes: slow zoom on the image, text fades up */
.page-hero { min-height: 33vh; }
.page-hero img { animation: mn-zoom 14s ease-out both; }
.page-hero h1, .page-hero .lead { animation: mn-fade-up .8s var(--mn-ease) both; }
.page-hero .lead { animation-delay: .15s; }
.hero-slide { height: min(85vh, 760px); min-height: 26rem; }
.hero-slide img { transform-origin: 60% 40%; }
.hero-slide.active img { animation: mn-zoom 9s ease-out both; }
.hero-shade { background: linear-gradient(to top, rgb(0 0 0 / .75), rgb(0 0 0 / .1) 70%); }
.carousel-item-next .hero-caption > *, .carousel-item-prev .hero-caption > * { opacity: 0; }
.carousel-item.active .hero-caption > * { animation: mn-fade-up .8s var(--mn-ease) both; }
.carousel-item.active .hero-caption > :nth-child(2) { animation-delay: .15s; }
.carousel-item.active .hero-caption > :nth-child(3) { animation-delay: .3s; }

/* Slider indicators fill up like progress bars; arrows are glass circles */
.carousel { --mn-interval: 5s; }
#caseStudies { --mn-interval: 6s; }
.carousel-indicators [data-bs-target] { position: relative; width: 2.5rem; opacity: 1; background-color: rgb(255 255 255 / .35); }
[data-bs-theme="dark"] .carousel-indicators [data-bs-target] { background-color: rgb(0 0 0 / .15); }
.carousel-indicators .active::after { content: ""; position: absolute; inset: 0; background: var(--bs-carousel-indicator-active-bg); transform-origin: left; animation: mn-progress var(--mn-interval) linear both; }
.carousel:hover .carousel-indicators .active::after { animation-play-state: paused; }
.carousel-control-prev-icon, .carousel-control-next-icon { width: 3rem; height: 3rem; border-radius: 50%; background-size: 40%; background-color: rgb(0 0 0 / .25); backdrop-filter: blur(4px); transition: transform .3s var(--mn-ease), background-color .3s; }
[data-bs-theme="dark"] .carousel-control-prev-icon, [data-bs-theme="dark"] .carousel-control-next-icon { background-color: rgb(0 0 0 / .06); }
.carousel-control-prev:hover > span, .carousel-control-next:hover > span { transform: scale(1.12); background-color: rgb(0 0 0 / .45); }
#caseStudies .carousel-control-prev, #caseStudies .carousel-control-next { width: 3.5rem; }
@media (hover: hover) {
	#heroCarousel .carousel-control-prev, #heroCarousel .carousel-control-next { opacity: 0; }
	#heroCarousel:hover .carousel-control-prev, #heroCarousel:hover .carousel-control-next { opacity: 1; }
}

/* Cards: lift, image zoom, arrow nudge, glowing glass */
.card-lift { transition: transform .35s var(--mn-ease), box-shadow .35s, background-color .35s, border-color .35s; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .14) !important; }
.card-lift img, .card-lift .fa-solid { transition: transform .6s var(--mn-ease), color .3s; }
.card-lift:hover .ratio img { transform: scale(1.07); }
.card-lift:hover .fa-arrow-right { transform: translateX(.35rem); }
.card-lift:hover .fa-quote-left { transform: scale(1.15) rotate(-8deg); color: var(--mn-dark); }
.card-glass { backdrop-filter: blur(6px); }
.card-glass:hover { --bs-bg-opacity: .2; --bs-border-opacity: .7; }
.card-glass:hover img { transform: scale(1.08); }

/* Content fades up as it scrolls into view (CSS only; other browsers just show it) */
@supports (animation-timeline: view()) {
	.reveal { animation: mn-fade-up linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
}

/* Reduced motion (e.g. Windows "Animation effects" off): keep fades and hover effects,
   drop the zoom and the slide-up distance, and keep Bootstrap's slider cross-fade. */
@media (prefers-reduced-motion: reduce) {
	:root { --mn-rise: 0; --mn-zoom: 1; }
	.carousel-fade .carousel-item { transition: opacity .6s ease-in-out; }
	.carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end { transition: opacity 0s .6s; }
}

/* Footer widgets */
.site-footer a:hover { color: #fff; }
.site-footer li a { display: inline-block; transition: color .2s, transform .2s var(--mn-ease); }
.site-footer li a:hover { transform: translateX(4px); }
.site-footer .btn-icon:hover { transform: translateY(-3px) rotate(8deg); }
.footer-brand img { filter: invert(1); }

/* Editor content */
.entry-content img { max-width: 100%; height: auto; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .875rem; color: var(--bs-secondary-color); text-align: center; }

/* Bootstrap 4 classes still used in the Contact Form 7 form */
.form-group { margin-bottom: 1rem; }
.btn-block { width: 100%; }