/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

a:has(img.standard-logo)::after {
	display: none !important;
}

/* Homepage header sits transparent over the hero video before scroll;
   white-out the standard logo there. Sticky-state logo (solid header bg
   after scroll) is untouched and stays black. */
body.home .logo img.standard-logo {
	filter: brightness(0) invert(1);
}

/* Same "video banner at top of page" condition as the header-transparency
   rules below – white-out the logo there too, same reason as on the
   homepage: it floats over the video before the header goes sticky. */
body:has(.main-content .video-about.porto-ibanner .video-bg) .logo img.standard-logo {
	filter: brightness(0) invert(1);
}

body.home .container-fluid,
body.home .main-content {
	padding-left: 0;
	padding-right: 0;
}

/* Same "video banner at top of page" condition again – .container-fluid
   (header + footer wrap) carries the same 20px side padding on ordinary
   pages that body.home already zeroes out above, which was shifting the
   logo/burger 20px right of where they sit on the homepage. */
body:has(.main-content .video-about.porto-ibanner .video-bg) .container-fluid {
	padding-left: 0;
	padding-right: 0;
}

/* Pages whose first content block is a full-width video banner (Porto
   "Interactive Banner" with a .video-bg <video>, e.g. /dofe/) should have
   the video sit flush under the transparent header – same look as the
   homepage hero. Porto's default .main-content adds a 20px gap above the
   content column on every page; remove it only when that first block is
   a video banner, so ordinary pages keep their normal spacing. */
.main-content:has(.video-about.porto-ibanner .video-bg) {
	padding-top: 0 !important;
}

/* Same "video banner at top of page" condition as the .main-content
   padding-top override above – the header floats transparent over the
   video (see /dofe/), so the top-level menu links need to go white to
   stay legible, same treatment as the homepage hero. #header is a sibling
   of .main-content (not a descendant), so the :has() check is anchored on
   body instead. */
body:has(.main-content .video-about.porto-ibanner .video-bg) #header:not(.sticky-header) #menu-hlavne-menu > li > a {
	background-color: transparent !important;
	color: #fff !important;
}

/* Same "video banner at top of page" condition again – dropdown arrows on
   top-level items with a submenu need to go white too, same reason as the
   menu links above. */
body:has(.main-content .video-about.porto-ibanner .video-bg) #header:not(.sticky-header) #menu-hlavne-menu.show-arrow > li.has-sub > a::after {
	color: #fff !important;
}

/* Same condition again – the search icon in the header also needs to go
   white while floating over the video. */
body:has(.main-content .video-about.porto-ibanner .video-bg) #header:not(.sticky-header) .search-toggle .porto-icon-magnifier,
body:has(.main-content .video-about.porto-ibanner .video-bg) #header:not(.sticky-header) .search-toggle .porto-icon-magnifier::before {
	color: #fff !important;
}

/* Same condition again – mobile burger icon also needs to go white while
   floating over the video. */
body:has(.main-content .video-about.porto-ibanner .video-bg) #header:not(.sticky-header) .mobile-toggle {
	color: #fff !important;
	background: transparent !important;
}

/* Same "video banner at top of page" condition again. Porto reserves space
   under the fixed header on every page via an empty spacer row
   (.porto-html-block.porto-block-html-banner, page-specific inline
   `.vc_custom_*{padding-top:80px!important}` generated by WPBakery) –
   shrink it only on video-banner pages so the video sits close under the
   header, same as the homepage hero. Untouched on ordinary pages (e.g.
   /kontakt/), which still need the 80px to clear the fixed header. */
body:has(.main-content .video-about.porto-ibanner .video-bg) .porto-html-block.porto-block-html-banner .vc_row {
	padding-top: 0 !important;
}

/* Full mobile-viewport-height video banner, mirroring the homepage hero
   (.gymes-hero uses min-height:100vh/100svh – see homepage.css). Porto's
   own inline style sets min-height:clamp(270px, 46.9vw, 900px); on narrow
   phones 46.9vw undershoots 270px, so the banner clamps to a short 270px
   strip instead of filling the screen like the homepage hero does.
   .porto-ibanner.video-about is the video banner's own container class, so
   no extra .video-bg presence check is needed here. */
@media (max-width: 767px) {
	.porto-ibanner.video-about {
		min-height: 100vh !important;
		min-height: 100svh !important;
	}
}

/* Mirrors .gymes-hero__video (assets/css/homepage.css) exactly – that's
   the homepage's proven-working video treatment: position:absolute+inset,
   object-fit:cover, directly on the <video> tag, no wrapper div. GSAP's
   scale() is applied straight to this element too (see top-video.js),
   same as homepage.js does to .gymes-hero__video.
   !important is required: WPBakery emits a page-specific
   `.video-about.porto-ibanner .video-bg { aspect-ratio: …; height: auto; }`
   rule (3 classes) that otherwise beats this (2 classes) and was the
   actual cause of the black-screen/wrong-height bugs – not the transform
   itself, which the homepage already proves is fine directly on <video>. */
.video-about.porto-ibanner .video-bg {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	transform-origin: center;
}

/* "Scroll down" hint on any page's top video banner, injected into the
   .porto-ibanner container by assets/js/top-video.js. Mirrors the
   homepage's .gymes-hero__scroll (assets/css/homepage.css) under its own
   class name, since homepage.css itself only loads on the front page. */
.gymes-top-scroll {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 2;
	width: 26px;
	height: 44px;
	border: 2px solid rgba(255, 255, 255, .7);
	border-radius: 20px;
	display: block;
	opacity: 0;
}
.gymes-top-scroll span {
	position: absolute;
	top: 8px;
	left: 50%;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	background: #fff;
	border-radius: 2px;
	animation: gymes-top-scroll-dot 1.8s infinite;
}
@keyframes gymes-top-scroll-dot {
	0% { opacity: 0; transform: translateY(0); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
	.gymes-top-scroll { opacity: 1; }
	.gymes-top-scroll span { animation: none; opacity: 1; }
}

/* Top-level links + their dropdown-arrow go transparent/white while the
   header floats over the hero video; the dropdown panel itself
   (.sub-menu/.popup) is left untouched. Scoped to :not(.sticky-header) so
   the reveal-on-scroll-up sticky header (solid white bg) keeps the
   theme's default (dark) link/icon colors instead of going invisible. */
body.home #header:not(.sticky-header) #menu-hlavne-menu > li > a {
	background-color: transparent !important;
	color: #fff !important;
}

body.home #header:not(.sticky-header) #menu-hlavne-menu.show-arrow > li.has-sub > a::after {
	color: #fff !important;
}

body.home #header:not(.sticky-header) .search-toggle .porto-icon-magnifier,
body.home #header:not(.sticky-header) .search-toggle .porto-icon-magnifier::before {
	color: #fff !important;
}

/* Header Builder row (WPBakery) ships with 33px top/bottom padding on
   .header-main, making the whole nav bar too tall. Class name is a
   .vc_custom_* generated by the row's own settings, so target the
   stable .header-main class instead. */
body.home .header-main {
	padding-top: 28px !important;
	padding-bottom: 28px !important;
}

/* Top-level menu links themselves also carry 38px top/bottom padding
   (Porto customizer: Header > Main Menu > Top Level Padding), stacking
   with .header-main above and making the bar even taller. */
body.home #header .main-menu > li.menu-item > a {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

/* Secondary contact/login bar above the main menu (phone, email, log in).
   Both this row and the main-menu row share the ".top-row" class, so
   ":not(.header-main)" excludes the main-menu row and keeps this scoped
   to #header (the footer also reuses ".top-row" for its share-links row). */
body.home #header .top-row:not(.header-main) {
	display: none !important;
}

/* Mobile header: burger goes white while the header floats over the hero
   video (same rule as the menu links); sticky state keeps the theme color. */
body.home #header:not(.sticky-header) .mobile-toggle {
	color: #fff !important;
	background: transparent !important;
}

/* Mobile header layout: WPBakery row/column negative margins push the
   burger and logo 11px off-screen; also the two stack vertically making
   the bar 150px tall. Flatten margins and put them on one row. */
@media (max-width: 991px) {
	body.home .header-main {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
	body.home .header-main .vc_column_container {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	body.home .header-main .vc_column_container:first-child > .vc_column-inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 10px;
	}

	/* Same condition again – ordinary pages (e.g. /dofe/) never got this
	   fix, so their mobile header is still the broken WPBakery default:
	   negative row margins push the burger/logo off-screen and the column
	   stacks vertically, ballooning the bar to ~166px tall and letting the
	   logo render at its full intrinsic size instead of shrinking to fit. */
	body:has(.main-content .video-about.porto-ibanner .video-bg) .header-main {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
	body:has(.main-content .video-about.porto-ibanner .video-bg) .header-main .vc_column_container {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	body:has(.main-content .video-about.porto-ibanner .video-bg) .header-main .vc_column_container:first-child > .vc_column-inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 10px;
	}
}

/* Mobile slide-down menu: Porto skin defaults are teal/orange – recolor to
   the GYMES brand (wine red #9a2948). Applies site-wide, not just homepage,
   so the mobile menu looks consistent everywhere. */
.mobile-nav-wrap .mobile-menu a {
	color: #14181d !important;
}
.mobile-nav-wrap .mobile-menu .arrow:before {
	color: #9a2948 !important;
}
/* Only li.active (the real current page) – "O NÁS" also carries
   current-menu-item because its custom URL equals the site root. */
.mobile-nav-wrap .mobile-menu li.active > a {
	background: #9a2948 !important;
	color: #fff !important;
}

/* =========================================================================
   FOOTER – rebrand the Porto footer-builder block to match the homepage
   (dark #14181d, wine/gold accents, gold-hover circular social icons). The
   footer is global, so this applies site-wide for consistency. Overrides
   WPBakery-generated inline row/heading/social colors (ID specificity +
   !important beats the .vc_custom_* single-class rules).
   ========================================================================= */
#footer {
	background: #14181d;
}
#footer .top-row {
	position: relative;
	background: #14181d !important;
	padding: 64px clamp(22px, 5vw, 70px) 56px !important;
}
/* Hairline gradient at the very top to seat the footer under the (dark)
   contact section without the two blocks blurring together. */
#footer .top-row::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #9a2948, #d4af37);
	opacity: .75;
}
/* Dark outline logo → white. */
#footer .wpb_single_image img {
	filter: brightness(0) invert(1);
	opacity: .95;
}
/* School name / address block: light, left-aligned to sit under the logo. */
#footer .vc_custom_heading {
	color: rgba(255, 255, 255, .72) !important;
	text-align: left !important;
	font-weight: 400;
	line-height: 1.85;
	margin-top: 1.4rem;
}
/* Vertically centre the social column on the right. */
#footer .vc_row-o-content-middle > .col-md-4:last-child > .vc_column-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}
/* Social icons → circular, thin border, gold hover (matches .gymes-social).
   Use background-COLOR (not shorthand) so the Edupage icon's background-image
   swap survives. */
#footer .share-links a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, .25);
	background-color: transparent !important;
	color: #fff !important;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
#footer .share-links a:hover {
	background-color: #d4af37 !important;
	border-color: #d4af37 !important;
	color: #14181d !important;
	transform: translateY(-2px);
}
/* Edupage icon rides in on .share-twitter as a centered background image;
   keep it inset inside the circle. */
#footer .share-links a.share-twitter {
	background-size: 22px 22px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

@media (max-width: 767px) {
	/* Stack the columns and centre everything on small screens. */
	#footer .top-row {
		text-align: center;
		padding: 48px 22px 40px !important;
	}
	#footer .wpb_single_image .vc_single_image-wrapper,
	#footer .vc_align_left {
		text-align: center !important;
	}
	#footer .vc_custom_heading {
		text-align: center !important;
	}
	#footer .vc_row-o-content-middle > .col-md-4:last-child > .vc_column-inner {
		justify-content: center;
		margin-top: 1.5rem;
	}
}