/* =============================================================
   BlueCherry Framework 5.0 — modern 2026 front-end layer
   Additive enhancements (cards, carousels, titles, buttons).
   by Daniel Marku | LightCast
   ============================================================= */

/* =============================================================
   Global buttons, forms (Contact Form 7) & pagination — modern
   ============================================================= */
/* Generic buttons (Bootstrap .btn-default, .button, cherry read-more). */
.site-content .btn,
.site-content .btn-default,
.site-content .button,
.cherry-posts-list .btn,
.entry-permalink .btn {
	border-radius: 8px;
	border: 0;
	background: linear-gradient(135deg, #3b82f6, #1e3a8a);
	color: #fff;
	font-weight: 600;
	padding: 9px 20px;
	box-shadow: 0 2px 8px rgba(30, 58, 138, .18);
	transition: filter .2s ease, box-shadow .2s ease, transform .12s ease;
}
.site-content .btn:hover,
.site-content .btn-default:hover,
.site-content .button:hover,
.cherry-posts-list .btn:hover,
.entry-permalink .btn:hover {
	color: #fff;
	filter: brightness(1.08);
	box-shadow: 0 6px 16px rgba(30, 58, 138, .28);
	transform: translateY(-1px);
}

/* Form fields: inputs / textarea / select with a blue focus ring. */
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form textarea,
.wpcf7-form select,
.site-content .search-field,
.site-content input[type="text"]:not(.cherry-ui-text),
.site-content input[type="email"],
.site-content input[type="url"],
.site-content input[type="tel"],
.site-content textarea {
	border: 1px solid #d7dfeb;
	border-radius: 10px;
	padding: 11px 15px;
	font-size: 15px;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
	max-width: 100%;
	box-sizing: border-box;
}
.wpcf7-form input:not([type="submit"]):focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus,
.site-content input[type="text"]:focus,
.site-content input[type="email"]:focus,
.site-content input[type="url"]:focus,
.site-content input[type="tel"]:focus,
.site-content textarea:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
	outline: none;
}

/* CF7 submit button — modern blue pill. */
.wpcf7-form .wpcf7-submit {
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #3b82f6, #1e3a8a);
	color: #fff;
	font-weight: 600;
	letter-spacing: .3px;
	padding: 12px 30px;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(30, 58, 138, .25);
	transition: filter .2s ease, box-shadow .2s ease, transform .12s ease;
}
.wpcf7-form .wpcf7-submit:hover {
	filter: brightness(1.08);
	box-shadow: 0 7px 20px rgba(30, 58, 138, .35);
	transform: translateY(-1px);
}

/* Pagination -> modern pills. */
.navigation.pagination .page-numbers,
.posts-navigation .page-numbers,
.paging-navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	margin: 0 3px;
	border-radius: 10px;
	background: #eef2f8;
	color: #1e293b;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.navigation.pagination a.page-numbers:hover,
.posts-navigation a.page-numbers:hover {
	background: #dbe7fb;
	color: #1e3a8a;
}
.navigation.pagination .page-numbers.current,
.posts-navigation .page-numbers.current {
	background: linear-gradient(135deg, #3b82f6, #1e3a8a);
	color: #fff;
}

/* ---------- Swiper carousel cards (shows / docs) ---------- */
.cherry-swiper-carousel .post-thumbnail {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(15, 27, 45, 0.12);
	transition: box-shadow .3s ease, transform .3s ease;
	margin: 0;
}
.cherry-swiper-carousel .swiper-slide { padding: 6px; }
.cherry-swiper-carousel .swiper-slide:hover .post-thumbnail {
	transform: translateY(-5px);
	/* Outer blue ring (NOT inset) so the image zoom can't cover it; the slide's
	   6px padding leaves room and overflow:hidden never clips an outer shadow. */
	box-shadow: 0 14px 32px rgba(30, 58, 138, 0.28), 0 0 0 2px #3b82f6;
}
.cherry-swiper-carousel .post-thumbnail_link {
	display: block;
	position: relative;
	line-height: 0;
}
.cherry-swiper-carousel .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.cherry-swiper-carousel .swiper-slide:hover .post-thumbnail img {
	transform: scale(1.07);
}
/* gradient veil + title revealed on hover (title comes from the link's title attr) */
.cherry-swiper-carousel .post-thumbnail_link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 20, 40, .88) 0%, rgba(10, 20, 40, .25) 45%, rgba(10, 20, 40, 0) 70%);
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 1;
}
.cherry-swiper-carousel .post-thumbnail_link::after {
	content: attr(title);
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .2px;
	text-shadow: 0 1px 4px rgba(0,0,0,.4);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease;
	z-index: 2;
}
.cherry-swiper-carousel .swiper-slide:hover .post-thumbnail_link::before { opacity: 1; }
.cherry-swiper-carousel .swiper-slide:hover .post-thumbnail_link::after { opacity: 1; transform: translateY(0); }

/* small blue "play" hint on hover (the blue ring now lives on .post-thumbnail) */
.cherry-swiper-carousel .post-thumbnail_link:hover::after { padding-left: 26px; }

/* ---------- Swiper navigation / pagination (modern blue) ---------- */
.cherry-swiper-carousel .swiper-pagination-bullet {
	background: #c7d6ef;
	opacity: 1;
	transition: transform .2s ease, background .2s ease;
}
.cherry-swiper-carousel .swiper-pagination-bullet-active {
	background: linear-gradient(135deg, #3b82f6, #1e3a8a);
	transform: scale(1.35);
}
.cherry-swiper-carousel .swiper-button-next,
.cherry-swiper-carousel .swiper-button-prev {
	color: #fff;
	background: linear-gradient(135deg, #3b82f6, #1e3a8a);
	width: 40px; height: 40px; border-radius: 50%;
	box-shadow: 0 3px 10px rgba(30,58,138,.35);
	transition: transform .2s ease, box-shadow .2s ease;
}
.cherry-swiper-carousel .swiper-button-next:hover,
.cherry-swiper-carousel .swiper-button-prev:hover { transform: scale(1.1); }
.cherry-swiper-carousel .swiper-button-next:after,
.cherry-swiper-carousel .swiper-button-prev:after { font-size: 16px; font-weight: 700; }

/* ---------- Section titles (cherry_title_box) ---------- */
.title-box_title {
	font-weight: 700;
	letter-spacing: .4px;
}
.title-box.position-center .title-box_title:after,
.title-box_title.center:after {
	content: "";
	display: block;
	width: 64px; height: 3px;
	margin: 12px auto 0;
	border-radius: 3px;
	background: linear-gradient(135deg, #3b82f6, #1e3a8a);
}

/* ---------- Buttons (cherry_button + theme buttons) ---------- */
.cherry-button, .btn-cherry, .button-primary_ {
	border-radius: 8px !important;
	transition: filter .2s ease, box-shadow .2s ease, transform .12s ease !important;
}
.cherry-button:hover, .btn-cherry:hover {
	filter: brightness(1.06);
	box-shadow: 0 4px 14px rgba(30,58,138,.25);
	transform: translateY(-1px);
}

/* =============================================================
   Single Portfolio page — modern 2026 refresh
   ============================================================= */
body.single-portfolio .cherry-portfolio-single-post {
	font-size: 16px;
	line-height: 1.8;
	color: #2b3440;
}
body.single-portfolio .post-featured-image { margin-bottom: 28px; }
body.single-portfolio .post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(15, 27, 45, 0.18);
}
body.single-portfolio .post-title {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: #14233b;
	margin: 0 0 18px;
	position: relative;
	padding-bottom: 14px;
}
body.single-portfolio .post-title:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(135deg, #3b82f6, #1e3a8a);
}

/* Post navigation -> modern cards */
/* overflow:visible overrides the theme's .navigation.post-navigation{overflow:hidden} so the
   hover lift + top border aren't clipped. */
.navigation.post-navigation { border: 0; margin: 44px 0; padding: 4px 0; overflow: visible; }
.navigation.post-navigation .nav-links { display: flex; gap: 18px; justify-content: space-between; align-items: stretch; }
/* Cards size to their text (half the old 50% width), pinned to opposite ends.
   width:auto + inline-block 'a' beats the theme's float+width:50%. */
.navigation.post-navigation .nav-previous,
.navigation.post-navigation .nav-next { flex: 0 1 auto; width: auto; max-width: 48%; min-width: 0; float: none !important; }
.navigation.post-navigation .nav-links a {
	display: block !important;
	max-width: 100%;
	padding: 11px 18px !important;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e3e8f0;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(30, 58, 138, 0.06);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	color: #1e293b;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.navigation.post-navigation .nav-next { text-align: right; margin-left: auto; }
.navigation.post-navigation .nav-links a:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(30, 58, 138, 0.16);
	border-color: #3b82f6;
	color: #1e3a8a;
	position: relative;
	z-index: 2;
}
/* Just a directional chevron inline with the title — no explanatory label. */
.navigation.post-navigation .nav-previous a:before {
	content: "\2039";
	color: #3b82f6;
	font-weight: 700;
	font-size: 19px;
	line-height: 0;
	margin-right: 8px;
	vertical-align: -2px;
}
.navigation.post-navigation .nav-next a:after {
	content: "\203A";
	color: #3b82f6;
	font-weight: 700;
	font-size: 19px;
	line-height: 0;
	margin-left: 8px;
	vertical-align: -2px;
}

/* Comments / Leave a reply */
body.single-portfolio .comments-area { max-width: 820px; margin: 54px auto 0; }
body.single-portfolio .comment-reply-title,
body.single-portfolio .comments-title {
	font-size: 22px;
	font-weight: 700;
	color: #1e3a8a;
	border-bottom: 2px solid #e7edf6;
	padding-bottom: 12px;
	margin-bottom: 22px;
}
body.single-portfolio .comment-form input[type="text"],
body.single-portfolio .comment-form input[type="email"],
body.single-portfolio .comment-form input[type="url"],
body.single-portfolio .comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d7deea;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 15px;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}
body.single-portfolio .comment-form input:focus,
body.single-portfolio .comment-form textarea:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
	outline: none;
}
.comment-form .form-submit { clear: both !important; text-align: left !important; padding-top: 6px; }
.comment-form .submit,
.comment-form .form-submit .submit {
	display: inline-block !important;
	width: auto !important;
	max-width: max-content;
	background: linear-gradient(135deg, #3b82f6, #1e3a8a) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 10px 26px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	height: auto !important;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(30, 58, 138, 0.22);
	transition: filter .2s ease, box-shadow .2s ease, transform .12s ease !important;
}
.comment-form .submit:hover,
.comment-form .form-submit .submit:hover {
	filter: brightness(1.08);
	box-shadow: 0 6px 18px rgba(30, 58, 138, 0.32);
	transform: translateY(-1px);
}

/* Breadcrumbs subtle */
body.single-portfolio .cherry-breadcrumbs { font-size: 13px; opacity: .85; }

/* Responsive: stack nav cards on mobile */
@media (max-width: 600px) {
	.navigation.post-navigation .nav-links { flex-direction: column; }
	.navigation.post-navigation .nav-previous,
	.navigation.post-navigation .nav-next { max-width: 100%; }
	.navigation.post-navigation .nav-next { text-align: left; }
}

/* =============================================================
   Mega menu — modern 2026 styling (keeps the blue, adds polish)
   ============================================================= */
/* Top-level links: blue PILL / "bulb" on hover, current page, or open mega */
.cherry-mega-menu .cherry-mega-menu-top-item > a {
	position: relative;
	font-size: 18px !important;
	font-weight: 400;
	letter-spacing: .2px;
	padding: 6px 9px !important;
	margin: 0 1px !important;
	border-radius: 999px;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.cherry-mega-menu .cherry-mega-menu-top-item:hover > a,
.cherry-mega-menu .cherry-mega-menu-top-item:focus-within > a,
.cherry-mega-menu .cherry-mega-menu-top-item.current-menu-item > a,
.cherry-mega-menu .cherry-mega-menu-top-item.current_page_item > a,
.cherry-mega-menu .cherry-mega-menu-top-item.current-menu-parent > a,
.cherry-mega-menu .cherry-mega-menu-top-item.current-menu-ancestor > a {
	background: linear-gradient(135deg, #29c5ef 0%, #1f8fd0 100%) !important;
	color: #fff !important;
	box-shadow: 0 1px 5px rgba(20, 140, 184, .35);
	transform: translateY(-1px);
}
/* keep the dropdown caret white on the active pill */
.cherry-mega-menu .cherry-mega-menu-top-item:hover > a:after,
.cherry-mega-menu .cherry-mega-menu-top-item.current-menu-item > a:after { border-top-color: #fff; }

/* Mega dropdown panel: rounded + soft shadow + smooth entrance */
.cherry-mega-menu ul.cherry-mega-menu-sub {
	border-radius: 0 0 16px 16px;
	box-shadow: 0 18px 44px rgba(10, 20, 40, 0.30);
	overflow: hidden;
}
.cherry-mega-menu .cherry-mega-menu-sub.effect-fade-in {
	transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
}

/* Sub-item links: smooth hover highlight + slide */
.cherry-mega-menu .cherry-mega-menu-sub-item > a {
	border-radius: 8px;
	transition: background-color .2s ease, padding-left .2s ease, color .2s ease;
}
.cherry-mega-menu .cherry-mega-menu-sub-item > a:hover {
	background-color: rgba(255, 255, 255, 0.16);
	padding-left: 18px;
}

/* Mobile trigger: a touch more modern */
.cherry-mega-menu-mobile-trigger {
	border-radius: 8px;
	transition: background-color .2s ease, transform .12s ease;
}
.cherry-mega-menu-mobile-trigger:hover { transform: translateY(-1px); }

/* -------------------------------------------------------------
   Migrated site CSS (structural / responsive) — moved here from the old
   Cherry "User CSS" field. The TWEAKABLE values (logo height/position,
   colours, menu top-margin & item spacing, sticky background, section
   title) are now BlueCherry admin options, output by
   bluecherry_option_css() in functions.php. These rules are the layout
   structure that isn't meant to be a slider.
   ------------------------------------------------------------- */
body { margin: 0 auto; }

/* Fixed-width centred container (original 1460px layout). */
@media only screen and (min-width: 1460px) {
	body { width: 1460px; }
	a.jcarousel-prev { left: -20px; }
	a.jcarousel-next { right: -20px; }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
	body { width: 768px; overflow-x: hidden; }
	a.jcarousel-prev { left: 0; }
	a.jcarousel-next { right: 0; }
}
@media only screen and (max-width: 767px) {
	body { width: auto; }
}

/* Sticky header: fixed to top (background colour/opacity come from options). */
#static-area-header-bottom.isStick {
	position: fixed;
	top: 0;
	width: 100%;
	padding: 10px 0;
}
@media (min-width: 1460px) {
	#static-area-header-bottom.isStick { width: 1460px; margin-left: auto; margin-right: auto; }
}

/* Primary menu items layout (top-margin + spacing + vertical-align come from options). */
#menu-primary > #menu-primary-items > .menu-item { display: inline-block; float: none; }
#menu-primary > #menu-primary-items > .menu-item > a { line-height: 1.2; }

/* "Live" button base — its background colour is the BlueCherry option. */
.btn-online {
	border-radius: 25px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 22px;
	font-weight: 400;
	line-height: 55px;
	padding: 0 27px 0 20px;
	transition: all 0.3s ease 0s;
	vertical-align: top;
}
.btn-online::after,
.btn-logout::after { font-size: 50px; }

/* Posts / breadcrumbs / footer. */
.cherry-posts-list.posts_1 .post-title { font-size: 30px; line-height: 1.2em; }
.cherry-breadcrumbs .page-title {
	background: #ededee none repeat scroll 0 0;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
/* Drop the theme's huge breadcrumbs bottom gap on ALL pages (theme sets
   _content margin 0 0 104px, .page-title 0 0 71px, and .blog variant 93px —
   hence !important to beat the higher-specificity .blog rule too). */
.cherry-breadcrumbs .cherry-breadcrumbs_content,
.cherry-breadcrumbs .page-title { margin: 0 !important; }
/* Uniform breathing space BELOW the breadcrumbs bar on every page that shows
   it (portfolio had it via the sidebar wrapper; other pages were missing it). */
.cherry-breadcrumbs { margin-bottom: 0; }
.site-footer { color: #303334; font: 100 14px/24px Roboto, sans-serif; text-align: center; }

/* =============================================================
   Header redesign (2026) — flex layout: vertical centering, one-row menu
   on desktop, and a clean mobile bar (hamburger left · logo centre · Live
   right). Overrides the old 2015 float grid. CSS-only, reversible.
   ============================================================= */

/* Desktop & up: float grid -> vertically-centred flex bar. The menu column
   flexes to fill the remaining space (more room than the old 50% -> items
   stay on ONE row). align-items:center fixes the Live button sitting too high. */
#static-area-header-bottom .row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}
#static-area-header-bottom .row:before,
#static-area-header-bottom .row:after { display: none; } /* drop bootstrap clearfix in flex */
/* Logo column keeps a width band so the "Logo position" option (0–100%) has
   room to position the logo within it (the option outputs left:%/translateX). */
.static-header-logo { float: none; flex: 0 1 30%; max-width: 380px; }
.static-header-logo .site-branding { position: relative; width: 100%; }
.static-header-menu { float: none; width: auto; flex: 1 1 auto; min-width: 0; }
/* Live column matches the logo column width so the menu stays centred on the page. */
.static-online      { float: none; flex: 0 1 30%; max-width: 380px; text-align: right; }

/* Top-level menu never wraps to a second row. */
#menu-primary-items { white-space: nowrap; }
/* In the centred bar the big top-margin is unnecessary. */
#static-area-header-bottom .static-header-menu #menu-primary { margin-top: 0; }

/* Sticky logo: the theme shrank it to width:50% (tiny, smaller than the Live
   button). Keep it natural width at a balanced compact height instead. */
.isStick .site-branding .site-title.image-logo { width: auto; }
.isStick .site-branding .site-title.image-logo img { max-height: 60px; }

/* Hamburger / close trigger: compact rounded button (no fixed 30% width). */
.cherry-mega-menu-mobile-trigger,
.cherry-mega-menu-mobile-close {
	width: auto;
	font-size: 16px;
	margin: 0;
	padding: 9px 14px;
}

/* Tweener: at narrow desktop widths shrink the menu pills a touch so the row
   always fits before the mobile bar kicks in at 991px. */
@media (min-width: 992px) and (max-width: 1199px) {
	.cherry-mega-menu .cherry-mega-menu-top-item > a { font-size: 16px !important; padding: 6px 7px !important; }
}

/* ---------- Mobile bar (<= 991px): hamburger left · logo centre · Live right ---------- */
@media (max-width: 991px) {
	#static-area-header-bottom { position: relative; }
	#static-area-header-bottom .row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	/* Inset the bar a bit so "Menu" and "Live" aren't glued to the corners. */
	#static-area-header-bottom .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
	#static-area-header-bottom .row { margin-left: 0; margin-right: 0; }
	/* one row instead of stacked col-xs-12 full-width blocks */
	#static-area-header-bottom .static-header-menu,
	#static-area-header-bottom .static-header-logo,
	#static-area-header-bottom .static-online {
		width: auto !important;
		max-width: none;
		margin: 0 !important;
		padding: 0 !important;
		float: none;
	}
	.static-header-menu { order: 1; flex: 0 0 auto; text-align: left; }
	.static-header-logo { order: 2; flex: 1 1 auto; text-align: center; }
	.static-online      { order: 3; flex: 0 0 auto; text-align: right; bottom: auto; }

	/* logo centred + sized for the bar (beats the option's text-align:left) */
	#static-area-header-bottom .static-header-logo .site-branding { text-align: center !important; margin: 0; padding: 0; }
	#static-area-header-bottom .site-branding .site-title { left: 0 !important; transform: none !important; }
	#static-area-header-bottom .site-branding .site-title.image-logo img { max-height: 44px; width: auto; }

	/* hamburger button (the plugin JS reveals it at <=991) */
	#menu-primary { margin: 0 !important; }
	#menu-primary .cherry-mega-menu-mobile-trigger {
		display: inline-flex;
		align-items: center;
		background: linear-gradient(135deg, #29c5ef, #1f8fd0);
		color: #fff;
		border-radius: 10px;
		box-shadow: 0 2px 8px rgba(20, 140, 184, .35);
		font-size: 14px;
		padding: 9px 13px;
		line-height: 1;
	}

	/* The redundant "Close" label — hide it; tapping "Menu" toggles the panel. */
	#static-area-header-bottom .cherry-mega-menu-mobile-close { display: none !important; }

	/* Make the header the positioning context so the panel spans full width
	   (not just the narrow menu column). */
	#static-area-header-bottom .static-header-menu,
	#static-area-header-bottom #menu-primary { position: static !important; }

	/* Opened menu = clean white drawer below the bar, full header width. */
	#menu-primary-items.mega-menu-mobile-on {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100% !important;
		white-space: normal;
		z-index: 200;
		background: #fff !important;
		border-radius: 0 0 16px 16px;
		box-shadow: 0 18px 44px rgba(10, 20, 40, .22);
		max-height: 78vh;
		overflow-y: auto;
		padding: 6px 0 !important;
	}
	/* Top-level items: tidy vertical rows with dividers. */
	#menu-primary-items.mega-menu-mobile-on > .cherry-mega-menu-top-item {
		float: none !important;
		clear: both;
		display: block !important;
		border-bottom: 1px solid #eef2f7;
	}
	#menu-primary-items.mega-menu-mobile-on > .cherry-mega-menu-top-item:last-child { border-bottom: 0; }
	#menu-primary-items.mega-menu-mobile-on > .cherry-mega-menu-top-item > a {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 14px 20px !important;
		margin: 0 !important;
		background: none !important;
		color: #1e293b !important;
		font-size: 16px !important;
		font-weight: 600;
		border-radius: 0 !important;
		box-shadow: none !important;
		transform: none !important;
	}
	#menu-primary-items.mega-menu-mobile-on > .cherry-mega-menu-top-item.current-menu-item > a,
	#menu-primary-items.mega-menu-mobile-on > .cherry-mega-menu-top-item > a:hover { color: #1f8fd0 !important; }
	/* The dropdown arrow sits right and rotates when the submenu is open. */
	#menu-primary-items.mega-menu-mobile-on > .cherry-mega-menu-top-item > a .mega-menu-arrow {
		display: inline-block !important;
		margin-left: auto;
		color: #1f8fd0;
		transition: transform .25s ease;
	}
	#menu-primary-items.mega-menu-mobile-on > .cherry-mega-menu-top-item.tv7-sub-open > a .mega-menu-arrow { transform: rotate(180deg); }

	/* Submenus: COLLAPSED by default, open only when the parent has .tv7-sub-open
	   (added by JS on tap) — overrides the plugin's forced-open !important. */
	#menu-primary-items.mega-menu-mobile-on > .cherry-mega-menu-top-item > .cherry-mega-menu-sub {
		display: none !important;
		position: static !important;
		width: 100% !important;
		background: #f7f9fc !important;
		box-shadow: none !important;
		padding: 4px 0 8px !important;
		margin: 0 !important;
	}
	#menu-primary-items.mega-menu-mobile-on > .cherry-mega-menu-top-item.tv7-sub-open > .cherry-mega-menu-sub { display: block !important; }
	#menu-primary-items.mega-menu-mobile-on .cherry-mega-menu-sub a {
		padding: 9px 20px 9px 38px !important;
		font-size: 15px;
	}
	/* keep our Programacioni Javor button intact inside the mobile drawer
	   (the rule above would otherwise force menu-link padding onto it) */
	#menu-primary-items.mega-menu-mobile-on .cherry-mega-menu-sub a.tv7-javor-btn {
		padding: 8px 16px 8px 9px !important;
		font-size: inherit !important;
		display: inline-flex !important;
	}
	.menu-item-widget { text-align: center !important; }
	.menu-item-widget .textwidget { padding: 10px 14px; }
	.menu-item-widget .textwidget img[align="right"] { display: none !important; } /* drop the stray white logo on mobile */

	/* red Live button on the right — show the "LIVE" text (small) + icon. */
	.btn-online, .btn-logout { font-size: 14px; line-height: 38px; padding: 0 8px 0 16px; letter-spacing: .4px; }
	.btn-online::after, .btn-logout::after { padding: 0; }

	/* Tighter, cleaner sticky bar on mobile (smaller logo / hamburger / Live). */
	.isStick #static-area-header-bottom .static-header-logo .site-title.image-logo img { max-height: 38px; }
	.isStick #menu-primary .cherry-mega-menu-mobile-trigger { font-size: 13px; padding: 7px 11px; }
	.isStick .btn-online, .isStick .btn-logout { line-height: 34px; padding: 0 8px 0 13px; font-size: 11px; }
	.isStick .btn-online::after, .isStick .btn-logout::after { width: 22px; height: 22px; }
}

/* =============================================================
   Home hero slider (Slider Pro via cherry-simple-slider) — modern
   ============================================================= */
/* Widen the slider a touch beyond its column, centred */
.static-simple-slider {
	background: none !important;
	width: 104%;
	max-width: 104%;
	margin-left: -2%;
	margin-right: -2%;
}

/* Clean rounded "screen" — same shape as the carousel cards (uniform corners,
   soft shadow, subtle blue ring). */
.static-simple-slider .slider-pro,
.slider-container .slider-pro {
	border-radius: 16px;
	background: transparent !important;
	box-shadow: 0 10px 28px rgba(10, 20, 40, 0.16), 0 0 0 1px rgba(59, 130, 246, 0.18);
}
.static-simple-slider .sp-slides-container,
.static-simple-slider .sp-mask {
	border-radius: 16px;
	overflow: hidden;
	background: transparent !important;
}

@media (max-width: 991px) {
	/* Full width, no negative margins on mobile — the 104%/-2% overflowed the
	   viewport and cut the right rounded corner, making the shape look broken. */
	.static-simple-slider {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.static-simple-slider .slider-pro,
	.slider-container .slider-pro,
	.static-simple-slider .sp-slides-container,
	.static-simple-slider .sp-mask { border-radius: 12px; }
}

/* Let Slider Pro size/load images natively (forcing height + object-fit broke
   its lazy-load and caused blank/white slides). Only keep images responsive. */
.static-simple-slider img.sp-image { max-width: none; }

/* subtle bottom gradient for legibility */
.slider-pro .sp-slide:after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 40%;
	background: linear-gradient(to top, rgba(10, 20, 40, 0.45), rgba(10, 20, 40, 0));
	pointer-events: none;
	z-index: 1;
}

/* Pagination dots */
/* Dots overlay the image bottom (instead of a white strip below the slider) */
.slider-pro .sp-buttons {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 16px;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 5;
}
.slider-pro .sp-button {
	width: 11px;
	height: 11px;
	border: 2px solid rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.25);
	margin: 0 5px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: width .25s ease, background .25s ease, border-radius .25s ease;
}
.slider-pro .sp-selected-button {
	width: 30px;
	border-radius: 7px;
	border-color: #fff;
	background: linear-gradient(135deg, #3b82f6, #1e3a8a);
}

/* Arrows: clean circular glass buttons with a crisp CSS chevron
   (overrides Slider Pro's skewed white shapes that looked broken). */
.slider-pro.sp-horizontal .sp-arrows { margin-top: -22px; }
.slider-pro .sp-arrow {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50%;
	background: rgba(15, 27, 45, 0.38);
	box-shadow: 0 4px 14px rgba(10, 20, 40, 0.30);
	opacity: .85;
	z-index: 3;
	transition: background .2s ease, opacity .2s ease, transform .2s ease;
}
.slider-pro .sp-previous-arrow { left: 22px; }
.slider-pro .sp-next-arrow { right: 22px; }
.slider-pro .sp-arrow:hover {
	background: linear-gradient(135deg, #3b82f6, #1e3a8a);
	opacity: 1;
	transform: scale(1.08);
}
.slider-pro .sp-arrow:after { display: none !important; }
.slider-pro .sp-arrow:before {
	content: "" !important;
	position: absolute !important;
	width: 11px !important;
	height: 11px !important;
	top: 50% !important;
	left: 50% !important;
	background: transparent !important;
	border: solid #fff !important;
	border-width: 0 0 3px 3px !important;
	transform: translate(-35%, -50%) rotate(45deg) !important;
}
.slider-pro .sp-next-arrow:before {
	border-width: 3px 3px 0 0 !important;
	transform: translate(-65%, -50%) rotate(45deg) !important;
}

/* Caption / text layer */
.slider-pro .sp-layer.sp-black {
	background: linear-gradient(135deg, rgba(30, 58, 138, 0.82), rgba(15, 27, 45, 0.55)) !important;
	border-radius: 10px;
	font-weight: 600;
	letter-spacing: .3px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	z-index: 2;
}

/* =============================================================
   Sidebar (widget area) polish — spacing + app store badges
   ============================================================= */
/* The space below breadcrumbs is now uniform via .cherry-breadcrumbs
   margin-bottom (see the breadcrumbs rule). Keep the wrapper's own top gap
   only on the FRONT PAGE, which has no breadcrumbs. */
.content-sidebar-wrapper { margin-top: 0; }
body.home .content-sidebar-wrapper { margin-top: 0; } /* #content margin-top (option) handles the gap now */
.cherry-sidebar-main.widget-area { padding-left: 6px; }
.cherry-sidebar-main .widget { margin-bottom: 30px; }

/* Google Play + App Store badges: side by side, smaller, rounded */
.cherry-sidebar-main .widget_media_image {
	display: inline-block;
	width: 48%;
	vertical-align: top;
	margin-bottom: 18px;
}
.cherry-sidebar-main .widget_media_image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.cherry-sidebar-main .widget_media_image img:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(15, 27, 45, .18);
}

/* ---------- Sidebar widgets: make them all fluid / responsive ---------- */
/* Every widget fills the column; nothing overflows it. */
.cherry-sidebar-main .widget,
.cherry-sidebar-main .textwidget {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}
.cherry-sidebar-main .widget img,
.cherry-sidebar-main .widget video,
.cherry-sidebar-main .widget svg,
.cherry-sidebar-main .widget canvas {
	max-width: 100% !important;
	height: auto;
}
.cherry-sidebar-main .widget iframe,
.cherry-sidebar-main .widget embed,
.cherry-sidebar-main .widget object {
	width: 100% !important;
	max-width: 100% !important;
}

/* Facebook Page plugin (.fb-page): the SDK injects a <span> + <iframe> with a
   FIXED pixel width, so it never matched the other widgets. Force the wrapper,
   its span and the iframe to the full column width (!important beats the inline
   px the SDK writes). data-adapt-container-width="1" handles the initial size. */
.cherry-sidebar-main .fb-page,
.cherry-sidebar-main .fb-page > span,
.cherry-sidebar-main .fb-page > span > iframe,
.cherry-sidebar-main .fb_iframe_widget,
.cherry-sidebar-main .fb_iframe_widget > span,
.cherry-sidebar-main .fb_iframe_widget > span > iframe {
	width: 100% !important;
	max-width: 100% !important;
}

/* What-time-is-it / clock and custom HTML widgets: keep them within the column. */
.cherry-sidebar-main .widget_what_time_is_it,
.cherry-sidebar-main .widget_custom_html,
.cherry-sidebar-main .widget_text { width: 100%; }
/* App-store badges: fill the sidebar width instead of capping at 220px. */
.cherry-sidebar-main .mobile-app-widget .store-btn img { max-width: 100% !important; }
/* Analog clock: never overflow the column; stay centred (keeps the hands intact). */
.cherry-sidebar-main .wtii-clock-container { max-width: 100% !important; margin-left: auto; margin-right: auto; }

/* ---------- Cherry Facebook Like Box widget -> modern card ---------- */
.cherry-sidebar-main .cherry-facebook-like-box-class {
	background: #fff;
	border: 1px solid #e6ebf3;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(15, 27, 45, .08);
	overflow: hidden;
	padding: 0;
}
/* Title (if the widget has one) becomes a Facebook-blue header bar. */
.cherry-sidebar-main .cherry-facebook-like-box-class .widget-title,
.cherry-sidebar-main .cherry-facebook-like-box-class > h3,
.cherry-sidebar-main .cherry-facebook-like-box-class > h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 0 0;
	padding: 13px 16px;
	background: linear-gradient(135deg, #1877f2, #0e5fcb);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .2px;
}
.cherry-sidebar-main .cherry-facebook-like-box-class .widget-title::before {
	content: "\f09a"; /* Font Awesome facebook 'f' (already loaded) */
	font-family: FontAwesome;
	font-weight: 400;
	font-size: 16px;
}
/* The FB iframe sits flush inside the rounded card. */
.cherry-sidebar-main .cherry-facebook-like-box-class .fb-page,
.cherry-sidebar-main .cherry-facebook-like-box-class .fb-page > span,
.cherry-sidebar-main .cherry-facebook-like-box-class iframe { display: block; }
/* Hide the empty fb-root the SDK injects (no layout gap). */
.cherry-sidebar-main .cherry-facebook-like-box-class #fb-root { display: none; }

/* =============================================================
   RESPONSIVE / MOBILE — make every modernized component behave
   perfectly down to small phones. Tablet <=991px, phone <=600px,
   small phone <=400px.
   ============================================================= */

/* ---------- Tablet & down (<= 991px) ---------- */
@media (max-width: 991px) {
	/* Don't let the slider's desktop 104% bleed over the screen edge. */
	.static-simple-slider {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.static-simple-slider .slider-pro,
	.static-simple-slider .sp-slides-container,
	.static-simple-slider .sp-mask { border-radius: 12px; }
	.slider-pro .sp-arrow { width: 36px !important; height: 36px !important; }
	.slider-pro .sp-previous-arrow { left: 10px; }
	.slider-pro .sp-next-arrow { right: 10px; }

	/* Logo position slider shouldn't shove the logo off a narrow header. */
	.site-branding .site-title { left: 0 !important; transform: none !important; }

	/* Sidebar drops below content with breathing room. */
	.cherry-breadcrumbs { margin-bottom: 24px; } /* tighter breadcrumbs gap on mobile */
	body.home .content-sidebar-wrapper { margin-top: 24px; } /* front page (no breadcrumbs) keeps its gap */
	.cherry-sidebar-main.widget-area { padding-left: 0; margin-top: 28px; }

	/* Carousel: a little tighter, smaller hover lift. */
	.cherry-swiper-carousel .swiper-slide { padding: 4px; }
	.cherry-swiper-carousel .post-thumbnail_link::after { font-size: 14px; left: 12px; right: 12px; bottom: 12px; }

	/* Section titles scale down. */
	.title-box_title, .title_box { font-size: 22px !important; }
}

/* ---------- Phone (<= 600px) ---------- */
@media (max-width: 600px) {
	/* Carousel cards: 1-up reads better; keep rounded + shadow. */
	.cherry-swiper-carousel .post-thumbnail { border-radius: 12px; }
	.cherry-swiper-carousel .post-thumbnail_link::after { opacity: 1; transform: none; } /* show title (no hover on touch) */
	.cherry-swiper-carousel .post-thumbnail_link::before { opacity: .55; } /* keep it legible */

	/* App badges full width, stacked, easier to tap. */
	.cherry-sidebar-main .widget_media_image { width: 100%; margin-bottom: 12px; }

	/* Slider captions & dots smaller. */
	.slider-pro .sp-layer.sp-black { font-size: 13px !important; padding: 6px 10px !important; }
	.slider-pro .sp-button { width: 9px; height: 9px; margin: 0 4px; }
	.slider-pro .sp-selected-button { width: 22px; }

	/* Single portfolio: comfortable padding, smaller hero spacing. */
	.navigation.post-navigation { margin: 28px 0; }
	.navigation.post-navigation .nav-links a { font-size: 14px; padding: 10px 14px; }
}

/* ---------- Small phone (<= 400px) ---------- */
@media (max-width: 400px) {
	.cherry-mega-menu .cherry-mega-menu-top-item > a { font-size: 16px !important; }
	.title-box_title, .title_box { font-size: 19px !important; }
	.slider-pro .sp-arrow { width: 32px !important; height: 32px !important; }
}

/* =============================================================
   Portfolio archive + category grids — modern filter & cards
   (the /portfolio-archive/ isotope grid and the category archives)
   ============================================================= */

/* Filter bar -> tidy centred row of pills (was plain wrapping text). */
.portfolio-filter { margin: 0 0 26px !important; overflow: visible; }
.portfolio-filter ul.filter {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	width: 100%;
}
.portfolio-filter ul.filter li { margin: 0 !important; float: none !important; }
.portfolio-filter ul.filter li a {
	display: inline-block;
	margin: 0 !important;
	padding: 8px 18px;
	border-radius: 999px;
	background: #eef2f8;
	color: #1e293b !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .2px;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.portfolio-filter ul.filter li a:hover { background: #dbe7fb; color: #0f3a63 !important; transform: translateY(-1px); }
.portfolio-filter ul.filter li.active a {
	background: linear-gradient(135deg, #29c5ef, #1f8fd0);
	color: #fff !important;
	box-shadow: 0 3px 10px rgba(20, 140, 184, .35);
	text-decoration: none !important;
}
/* kill the plugin's float helper that left an empty gap under the filter */
.portfolio-filter > .clear { display: none; }

/* =============================================================
   Portfolio (Programacioni) AJAX pagination — modern centred pager.
   The plugin renders: .portfolio-pagination > ul.page-link > li > a (numbers)
   + .page-nav > a.prev-page / a.next-page. Defaults were white text, big
   inherited font, floated left/right. Rebuilt as one centred row of buttons.
   ============================================================= */
.portfolio-pagination.with-ajax,
.portfolio-pagination {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center !important;
	gap: 8px;
	width: 100%;
	margin: 34px 0 6px !important;
	padding: 0;
	text-align: center;
	clear: both;
}
.portfolio-pagination ul.page-link {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
.portfolio-pagination ul.page-link li { float: none !important; margin: 0 !important; }
.portfolio-pagination ul.page-link li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 11px;
	border-radius: 9px;
	background: #eef2f8 !important;
	color: #1e293b !important;
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1 !important;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
}
/* hover on a NON-active number: keep a dark, readable digit on a light tint */
.portfolio-pagination ul.page-link li:not(.active) a:hover {
	background: #dbe7fb !important;
	color: #0f3a63 !important;
	transform: translateY(-1px);
}
/* active number: solid blue, white digit — stays blue on hover too (don't vanish) */
.portfolio-pagination ul.page-link li.active a,
.portfolio-pagination ul.page-link li.active a:hover {
	background: linear-gradient(135deg, #29c5ef, #1f8fd0) !important;
	color: #fff !important;
	box-shadow: 0 3px 10px rgba(20, 140, 184, .35);
	transform: none;
}
.portfolio-pagination .page-nav {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.portfolio-pagination .page-nav a {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 18px !important;
	margin: 0 !important;
	border-radius: 999px;
	background: #1f2937;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1 !important;
	text-decoration: none !important;
	transition: background-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.portfolio-pagination .page-nav a:hover {
	background: linear-gradient(135deg, #29c5ef, #1f8fd0);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(20, 140, 184, .3);
}
@media (max-width: 600px) {
	.portfolio-pagination .page-nav a { padding: 0 15px !important; font-size: 13px !important; height: 33px; }
	.portfolio-pagination ul.page-link li a { min-width: 33px; height: 33px; font-size: 14px !important; }
}

/* =============================================================
   "Programacioni Javor" mega-menu button — pure CSS/SVG replacement for the
   old PNG (tv7_javor_button in child functions.php). Green pill + white
   calendar chip (live day) + label + chevron.
   ============================================================= */
.tv7-javor-btn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 7px 14px 7px 8px;
	border-radius: 12px;
	background: linear-gradient(135deg, #45c659, #1f9d34);
	box-shadow: 0 4px 14px rgba(31, 157, 52, .35);
	color: #fff !important;
	text-decoration: none !important;
	line-height: 1;
	white-space: nowrap;
	transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.tv7-javor-btn:hover,
.tv7-javor-btn:focus {
	transform: translateY(-2px);
	box-shadow: 0 9px 22px rgba(31, 157, 52, .45);
	filter: brightness(1.04);
	color: #fff !important;
	text-decoration: none !important;
}
.tv7-javor-btn:active { transform: translateY(0); }

/* white calendar chip with red header + binding rings + day number */
.tv7-javor-cal {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 9px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(0,0,0,.04);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
}
.tv7-javor-cal-top {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 12px;
	background: linear-gradient(180deg, #e8413f, #d4302e);
	border-radius: 9px 9px 0 0;
}
.tv7-javor-cal-top::before,
.tv7-javor-cal-top::after {
	content: "";
	position: absolute;
	top: -3px;
	width: 3px;
	height: 7px;
	background: #fff;
	border-radius: 2px;
}
.tv7-javor-cal-top::before { left: 10px; }
.tv7-javor-cal-top::after { right: 10px; }
.tv7-javor-cal-day {
	color: #15301b;
	font-weight: 800;
	font-size: 18px;
	line-height: 1;
	padding-bottom: 5px;
	font-family: inherit;
}

/* two-line label */
.tv7-javor-label {
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-align: left;
}
.tv7-javor-label strong {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .4px;
	color: #fff;
}
.tv7-javor-label span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, .92);
}
.tv7-javor-chev {
	display: inline-flex;
	align-items: center;
	color: rgba(255, 255, 255, .9);
	transition: transform .18s ease;
}
.tv7-javor-btn:hover .tv7-javor-chev { transform: translateX(3px); }

/* the legacy mega-menu text widget centred its content; keep our button tidy */
.menu-item-widget .textwidget { line-height: 1.2; }
.menu-item-widget .textwidget p:empty { display: none; margin: 0; }

/* The grid-card hover "zoom" (+) icon was a 108px material-design glyph — far too
   big. Shrink it to a tasteful circular button. (Theme: .custom-links .zoomlink:before) */
.portfolio-wrap .portfolio-container .portfolio-list .portfolio-item .custom-links .zoomlink:before,
.portfolio-wrap .portfolio-container .portfolio-list .portfolio-item .custom-links .permalink:before {
	font-size: 30px !important;
	line-height: 1 !important;
}
.portfolio-wrap .portfolio-container .portfolio-list .portfolio-item .custom-links .zoomlink,
.portfolio-wrap .portfolio-container .portfolio-list .portfolio-item .custom-links .permalink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .15);
	border: 2px solid rgba(255, 255, 255, .85) !important;
	color: #fff !important;
	transition: background-color .25s ease, transform .25s ease;
}
.portfolio-wrap .portfolio-container .portfolio-list .portfolio-item .custom-links .zoomlink:hover,
.portfolio-wrap .portfolio-container .portfolio-list .portfolio-item .custom-links .permalink:hover {
	background: #29c5ef;
	transform: scale(1.08);
}
/* keep the icon centred in its new circle */
.portfolio-wrap .portfolio-container .portfolio-list .portfolio-item .custom-links { padding-bottom: 0 !important; }

/* Programacioni archive cards: rounded corners. The active template wraps the
   image in .media-content (with the rollover on top), so round + clip THAT
   (the earlier .post-thumbnail rule didn't match this markup). */
.portfolio-list .portfolio-item .media-content,
.portfolio-list .portfolio-item .inner-wrap,
.portfolio-list .portfolio-item .post-thumbnail {
	border-radius: 14px !important;
	overflow: hidden !important;
}
.portfolio-list .portfolio-item .media-content {
	box-shadow: 0 4px 14px rgba(15, 27, 45, .12);
}

/* The grid-card title was 38px — it filled the whole card on hover. Make it a
   tidy caption. (Theme: .portfolio-list .portfolio-item h3 {font-size:38px}) */
.portfolio-wrap .portfolio-container .portfolio-list .portfolio-item h3 {
	font-size: 17px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	margin: 12px 0 0 !important;
	padding: 0 14px !important;
	text-transform: uppercase !important;
}
.portfolio-wrap .portfolio-container .portfolio-list .portfolio-item h3 a { color: #fff !important; }
@media (max-width: 600px) {
	.portfolio-wrap .portfolio-container .portfolio-list .portfolio-item h3 { font-size: 15px !important; }
}

/* Grid cards: gutter + rounded card + hover lift/zoom/blue-ring + title overlay,
   matching the home carousel cards. Works for both the isotope archive and the
   bootstrap-grid category pages (both use .portfolio-item > figure.post-thumbnail). */
.portfolio-item { padding: 8px !important; box-sizing: border-box; }
.portfolio-item .post-thumbnail {
	position: relative;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(15, 27, 45, .12);
	transition: box-shadow .3s ease, transform .3s ease;
}
.portfolio-item .post-thumbnail a { display: block; position: relative; line-height: 0; }
.portfolio-item .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.portfolio-item:hover .post-thumbnail {
	transform: translateY(-5px);
	box-shadow: 0 14px 32px rgba(30, 58, 138, .28), 0 0 0 2px #3b82f6;
}
.portfolio-item:hover .post-thumbnail img { transform: scale(1.07); }
/* gradient veil + title (from the link's title attribute) revealed on hover */
.portfolio-item .post-thumbnail a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 20, 40, .85) 0%, rgba(10, 20, 40, .2) 45%, rgba(10, 20, 40, 0) 70%);
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 1;
}
.portfolio-item .post-thumbnail a::after {
	content: attr(title);
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease;
	z-index: 2;
}
.portfolio-item:hover .post-thumbnail a::before { opacity: 1; }
.portfolio-item:hover .post-thumbnail a::after { opacity: 1; transform: translateY(0); }

/* Touch screens: show the title (no hover). */
@media (max-width: 600px) {
	.portfolio-item .post-thumbnail a::before { opacity: .5; }
	.portfolio-item .post-thumbnail a::after { opacity: 1; transform: none; font-size: 14px; }
}

/* =============================================================
   Modern footer (tv7_modern_footer in child functions.php) — multi-column
   brand / quick links / app download + copyright bar. Replaces the old
   one-line 2017 copyright (hidden below).
   ============================================================= */
/* Hide the legacy plain copyright static (we render our own bottom bar). */
#static-area-footer-top { display: none !important; }

.site-footer.boxed { max-width: none; } /* let the footer span full width */
/* LIGHT footer (site is light mode). */
#footer.site-footer {
	background: #f4f7fb;
	color: #475569;
	text-align: left;
	font: 400 14px/1.6 Roboto, sans-serif;
	margin-top: 0;
	border-top: 1px solid #e3e8f0;
}
/* Footer top spacing is the #footer padding-top, controlled by the
   "Footer height / top spacing" option (bluecherry_option_css). */
.tv7-footer { padding: 0; }
.tv7-footer .tv7-footer__cols { margin-top: 0; }
.tv7-footer .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.tv7-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
}
.tv7-footer__col { flex: 1 1 200px; min-width: 180px; }
.tv7-footer__about { flex: 1.6 1 280px; }
.tv7-footer__logo img { max-height: 60px; width: auto; margin-bottom: 16px; }
.tv7-footer__about p { color: #64748b; margin: 0 0 18px; max-width: 340px; }

.tv7-footer__title {
	color: #1e293b;
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 16px;
	letter-spacing: .3px;
}
.tv7-footer__links { list-style: none; margin: 0; padding: 0; }
.tv7-footer__links li { margin: 0 0 10px; }
.tv7-footer__links a {
	color: #475569;
	text-decoration: none;
	transition: color .2s ease, padding-left .2s ease;
}
.tv7-footer__links a:hover { color: #1f8fd0; padding-left: 5px; }

.tv7-footer__social { display: flex; gap: 10px; }
.tv7-footer__social a {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: #e8eef7;
	color: #1e3a8a;
	font-size: 20px;
	transition: background .2s ease, color .2s ease, transform .15s ease;
}
.tv7-footer__social a:hover { background: linear-gradient(135deg, #29c5ef, #1f8fd0); color: #fff; transform: translateY(-2px); }
.tv7-footer__social .ti { font-size: 20px; line-height: 1; }

.tv7-footer__apps { display: flex; flex-wrap: wrap; gap: 10px; }
.tv7-footer__apps a { display: inline-block; transition: transform .15s ease; }
.tv7-footer__apps a:hover { transform: translateY(-2px); }
.tv7-footer__apps img { height: 44px; width: auto; border-radius: 7px; }

.tv7-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	margin-top: 44px;
	padding: 20px 0;
	border-top: 1px solid #e3e8f0;
	font-size: 13px;
	color: #94a3b8;
}
.tv7-footer__bottom a { color: #1f8fd0; text-decoration: none; }
.tv7-footer__bottom a:hover { color: #1e3a8a; }

@media (max-width: 767px) {
	.tv7-footer__cols { gap: 28px; }
	.tv7-footer__col, .tv7-footer__about { flex: 1 1 100%; text-align: center; }
	.tv7-footer__about p { margin-left: auto; margin-right: auto; }
	.tv7-footer__social, .tv7-footer__apps { justify-content: center; }
	.tv7-footer__bottom { justify-content: center; text-align: center; }
}

/* =============================================================
   "Live" button — modern pill with a crisp play icon + live pulse.
   Replaces the old Font Awesome play-circle glyph with a sharp SVG
   (white circle + play triangle) and a pulsing "live" ring.
   ============================================================= */
.btn-online, .btn-logout {
	display: inline-flex !important;
	align-items: center;
	border-radius: 999px !important;
	font-weight: 400 !important;
	letter-spacing: .6px;
	text-transform: uppercase;
	box-shadow: 0 2px 7px rgba(246, 46, 70, .16);
	transition: transform .18s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-online:hover, .btn-logout:hover {
	transform: translateY(-1px);
	background: linear-gradient(135deg, #29c5ef, #1f8fd0) !important; /* blue on hover, not dark */
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(31, 143, 208, .30);
}
/* Override the Font Awesome glyph: a white disc with a crisp SVG play triangle. */
.btn-online::after, .btn-logout::after {
	content: "" !important;
	font-family: inherit !important;
	width: 34px;
	height: 34px;
	margin-left: 12px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f62e46' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 15px no-repeat;
	padding: 0 !important;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	animation: tv7-live-pulse 2s infinite;
}
@keyframes tv7-live-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
	70%  { box-shadow: 0 0 0 11px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
/* Sticky + mobile: slightly smaller icon, no extra left gap when text is hidden. */
.isStick .btn-online::after, .isStick .btn-logout::after { width: 30px; height: 30px; }
@media (max-width: 991px) {
	.btn-online::after, .btn-logout::after { margin-left: 8px; width: 24px; height: 24px; }
}

/* =============================================================
   Blog / search / archive listing — modern horizontal cards
   ============================================================= */
body.search .site-main article,
body.archive .site-main article,
body.blog .site-main article {
	background: #fff;
	border: 1px solid #e6ebf3;
	border-radius: 14px;
	padding: 16px;
	margin: 0 0 22px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(15, 27, 45, .07);
	transition: box-shadow .25s ease, transform .25s ease;
}
body.search .site-main article:hover,
body.archive .site-main article:hover,
body.blog .site-main article:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(30, 58, 138, .14);
}
body.search .site-main article .entry-thumbnail,
body.archive .site-main article .entry-thumbnail,
body.blog .site-main article .entry-thumbnail {
	float: left;
	width: 240px;
	max-width: 40%;
	margin: 0 22px 0 0;
	border-radius: 10px;
	overflow: hidden;
}
body.search .site-main article .entry-thumbnail img,
body.archive .site-main article .entry-thumbnail img,
body.blog .site-main article .entry-thumbnail img {
	display: block; width: 100%; height: auto;
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
body.search .site-main article:hover .entry-thumbnail img,
body.archive .site-main article:hover .entry-thumbnail img,
body.blog .site-main article:hover .entry-thumbnail img { transform: scale(1.05); }
body.search .site-main .entry-title,
body.archive .site-main .entry-title,
body.blog .site-main .entry-title { font-size: 22px; line-height: 1.25; margin: 4px 0 12px; }
body.search .site-main .entry-title a,
body.archive .site-main .entry-title a,
body.blog .site-main .entry-title a { color: #14233b; text-decoration: none; transition: color .2s ease; }
body.search .site-main .entry-title a:hover,
body.archive .site-main .entry-title a:hover,
body.blog .site-main .entry-title a:hover { color: #1f8fd0; }
body.search .site-main .entry-permalink,
body.archive .site-main .entry-permalink,
body.blog .site-main .entry-permalink { margin-top: 10px; }
@media (max-width: 600px) {
	body.search .site-main article .entry-thumbnail,
	body.archive .site-main article .entry-thumbnail,
	body.blog .site-main article .entry-thumbnail { float: none; width: 100%; max-width: 100%; margin: 0 0 14px; }
}

/* =============================================================
   404 page — modern (big gradient number + clean search)
   ============================================================= */
.error-404.not-found {
	max-width: 880px;
	margin: 30px auto 60px;
	padding: 20px;
}
.error-404.not-found .row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
}
.error-404.not-found .error-404-num,
.error-404.not-found .error-404-body { float: none; width: auto; }
.error-404.not-found .error-404-num {
	font-size: 150px;
	font-weight: 800;
	line-height: .9;
	letter-spacing: -2px;
	background: linear-gradient(135deg, #29c5ef 0%, #1e3a8a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #1e3a8a;
}
.error-404.not-found .error-404-body { text-align: left; max-width: 420px; }
.error-404.not-found .page-title {
	font-size: 26px;
	font-weight: 700;
	color: #14233b;
	margin: 0 0 12px;
}
.error-404.not-found .page-content p { color: #64748b; margin: 0 0 18px; }
/* modern search box */
.error-404.not-found .search-form {
	display: flex;
	max-width: 360px;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(30, 58, 138, .12);
	background: #fff;
	border: 1px solid #e3e8f0;
}
.error-404.not-found .search-field {
	flex: 1 1 auto;
	border: 0 !important;
	background: transparent;
	padding: 0 18px;
	height: 48px;
	font-size: 15px;
	box-shadow: none !important;
	outline: none;
}
.error-404.not-found .search-submit {
	flex: 0 0 auto;
	width: 52px;
	border: 0 !important;
	border-radius: 0 !important;
	cursor: pointer;
	color: #fff;
	background: linear-gradient(135deg, #3b82f6, #1e3a8a);
	transition: filter .2s ease;
}
.error-404.not-found .search-submit:hover { filter: brightness(1.08); }
.error-404.not-found .search-submit .fa { font-size: 16px; }

@media (max-width: 600px) {
	.error-404.not-found .row { flex-direction: column; text-align: center; gap: 14px; }
	.error-404.not-found .error-404-num { font-size: 100px; }
	.error-404.not-found .error-404-body { text-align: center; }
	.error-404.not-found .search-form { margin: 0 auto; }
}

/* =============================================================
   HOME — Netflix-style carousel cards + section headers
   Cards: the cherry-swiper-carousel rows render bare
   <figure.post-thumbnail><a.post-thumbnail_link title="Show"><img></a></figure>.
   We add (CSS-only): rounded card, hover zoom, play badge, title reveal from the
   anchor's title attribute, gradient veil. Section titles get an accent bar.
   ============================================================= */

/* --- Section headers (the Elementor headings above each row) --- */
body.home .elementor-heading-title {
	position: relative;
	display: inline-block;
	padding: 0 0 12px 0;
	margin: 0;
	font-weight: 800 !important;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #15233b;
}
/* modern underline accent under the title (replaces the vertical bar that read
   like a stray letter "I") */
body.home .elementor-heading-title::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 52px;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, #29c5ef, #1f8fd0);
}
body.home .elementor-widget-heading { margin-bottom: 6px; }

/* --- The cards --- */
body.home .cherry-swiper-carousel .post-thumbnail {
	position: relative;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: #0b1422;
	box-shadow: 0 4px 14px rgba(15, 27, 45, .14);
	transition: box-shadow .3s ease, transform .3s ease;
	aspect-ratio: 16 / 9;
}
body.home .cherry-swiper-carousel .post-thumbnail_link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	line-height: 0;
}
body.home .cherry-swiper-carousel .post-thumbnail_link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}

/* hover: lift the card + blue ring + zoom the image */
body.home .cherry-swiper-carousel .post-thumbnail:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 34px rgba(30, 58, 138, .3), 0 0 0 2px #3b82f6;
}
body.home .cherry-swiper-carousel .post-thumbnail:hover .post-thumbnail_link img { transform: scale(1.08); }

/* gradient veil + title (from the anchor's title attribute) */
body.home .cherry-swiper-carousel .post-thumbnail_link::after {
	content: attr(title);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px 14px 13px;
	background: linear-gradient(to top, rgba(7, 13, 26, .92) 8%, rgba(7, 13, 26, .45) 55%, rgba(7, 13, 26, 0) 100%);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease;
	z-index: 1;
}
body.home .cherry-swiper-carousel .post-thumbnail:hover .post-thumbnail_link::after { opacity: 1; transform: none; }

/* touch screens: no hover — keep the title readable */
@media (hover: none), (max-width: 600px) {
	body.home .cherry-swiper-carousel .post-thumbnail_link::after { opacity: 1; transform: none; font-size: 13px; padding: 24px 12px 11px; }
	body.home .elementor-heading-title { font-size: 18px !important; }
}