/*
Theme Name:   AccessPress Mag Child
Theme URI:    https://philadelphiaflyers.cz/
Description:  Child theme pro AccessPress Mag – klikací header banner (odkaz na home) + modernizované menu. Úpravy jsou v child theme, takže přežijí aktualizaci rodičovského tématu.
Author:       philadelphiaflyers.cz
Template:     accesspress-mag
Version:      1.0.4
Text Domain:  accesspress-mag-child
*/

/* =========================================================================
   1) HEADER – klikací banner (logo) místo textového nadpisu
   ========================================================================= */

/* Hlavička – zachováváme původní oranžové pozadí (#ff4500) */
.logo-ad-wrapper {
	background-color: #ff4500;
	padding: 12px 0;
}

/* Zrušíme staré NEklikací pozadí-banner nahackované v parent style.css.
   Banner teď zobrazuje klikací <img> níže. */
.site-branding {
	background-image: none !important;
	min-height: 0 !important;
	display: flex;
	align-items: center;
}

/* Klikací banner */
.apmag-header-logo {
	display: inline-block;
	line-height: 0;
}

.apmag-header-logo img {
	display: block;
	height: 72px;          /* banner je 1000×100, udržíme svěží výšku */
	width: auto;
	max-width: 100%;
	transition: opacity .2s ease;
}

.apmag-header-logo:hover img {
	opacity: .85;
}

/* Textový název necháme kvůli SEO/čtečkám, ale vizuálně skryjeme
   (banner ho už zobrazuje graficky). */
.site-branding .sitetext-wrap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.apmag-header-logo img { height: 46px; }
	.logo-ad-wrapper { padding: 10px 0; text-align: center; }
	.site-branding { justify-content: center; }
}

/* =========================================================================
   2) HLAVNÍ MENU – modernizace
   ========================================================================= */

/* Lišta menu – stejný oranžový odstín jako hlavička, o kus tmavší kvůli
   oddělení; přisazená nahoře při scrollu (sticky) */
#site-navigation.main-navigation {
	background: linear-gradient(180deg, #ee4100 0%, #d63a00 100%);
	border: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
	position: sticky;
	top: 0;
	z-index: 999;
}

/* Reset defaultních borderů/pozadí z rodiče */
#site-navigation .menu ul,
#site-navigation .menu li {
	border: 0 !important;
	background: none;
}

/* Řádek položek */
#site-navigation .menu > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Položka */
#site-navigation .menu li {
	position: relative;
	margin: 0;
}

/* Odkaz */
#site-navigation .menu li a {
	display: block;
	padding: 16px 16px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	line-height: 1;
	border: 0;
	transition: background-color .18s ease, color .18s ease;
}

/* Animovaná linka pod položkou */
#site-navigation .menu > ul > li > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 8px;
	height: 2px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .2s ease;
}

#site-navigation .menu > ul > li:hover > a::after,
#site-navigation .menu > ul > li.current-menu-item > a::after,
#site-navigation .menu > ul > li.current_page_item > a::after {
	transform: scaleX(1);
}

/* Hover / aktivní */
#site-navigation .menu li a:hover,
#site-navigation .menu li.current-menu-item > a,
#site-navigation .menu li.current_page_item > a {
	background: rgba(0, 0, 0, .14);
	color: #fff;
}

/* Hlavní (horní) položka zůstane bílá – ne oranžová – i když najedu na její
   podmenu (nadřazená položka je pak stále v :hover). Přebíjí dynamické CSS
   tématu #site-navigation ul li:hover > a { color: oranžová }. */
#site-navigation .menu > ul > li:hover > a,
#site-navigation .menu > ul > li.current-menu-ancestor > a,
#site-navigation .menu > ul > li.current-menu-item > a,
#site-navigation .menu > ul > li.current_page_item > a {
	background: rgba(0, 0, 0, .14);
	color: #fff !important;
}

/* Šipka u položek s podmenu */
#site-navigation .menu li.menu-item-has-children > a {
	padding-right: 30px;
}
#site-navigation .menu li.menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 2px solid rgba(255, 255, 255, .85);
	border-bottom: 2px solid rgba(255, 255, 255, .85);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}
#site-navigation .menu li.menu-item-has-children:hover > a::before {
	transform: translateY(-30%) rotate(45deg);
}

/* -------- Rozbalovací podmenu (dropdown) -------- */
#site-navigation .menu ul.sub-menu,
#site-navigation .menu li ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	margin: 0;
	padding: 8px 0;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 1000;
	display: block;
}

#site-navigation .menu li:hover > ul.sub-menu,
#site-navigation .menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Vnořené (3. úroveň) vysunout doprava */
#site-navigation .menu ul.sub-menu li ul {
	top: 0;
	left: 100%;
}

#site-navigation .menu ul.sub-menu li a {
	color: #222;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	padding: 10px 18px;
	white-space: nowrap;
}
#site-navigation .menu ul.sub-menu li a::after { display: none; }

#site-navigation .menu ul.sub-menu li a:hover,
#site-navigation .menu ul.sub-menu li.current-menu-item > a {
	background: #1a1a1a;
	color: #fff;
}

/* Šipka u podmenu položek – dolů uvnitř dropdownu není nutná; necháme čdistou */
#site-navigation .menu ul.sub-menu li.menu-item-has-children > a::before {
	transform: translateY(-50%) rotate(-45deg);
	right: 16px;
	border-color: rgba(0, 0, 0, .45);
}

/* Vyhledávání + náhodný příspěvek v liště */
#site-navigation .search-form,
#site-navigation .random-post {
	margin-top: 8px;
}

/* =========================================================================
   3) MOBIL – hamburger + rozbalené menu
   ========================================================================= */
@media (max-width: 768px) {

	#site-navigation.main-navigation {
		position: static;   /* na mobilu sticky vypneme, ať nezabírá místo */
	}

	/* Mobilní menu: skryté; zobrazí se přidáním třídy .menu-open (viz js/nav.js).
	   Nahrazuje křehký slideToggle tématu, který se na dotyku dvojitě spouštěl. */
	#site-navigation .nav-wrapper .menu {
		display: none;
	}
	#site-navigation .nav-wrapper.menu-open .menu {
		display: block !important;
	}

	#site-navigation .nav-toggle {
		display: block;
		width: 44px;
		height: 44px;
		margin: 6px 0;
		cursor: pointer;
	}
	#site-navigation .nav-toggle span {
		display: block;
		height: 3px;
		border-radius: 3px;
		background: #fff;
		margin: 6px 10px;
	}

	#site-navigation .menu > ul {
		display: block;
	}

	#site-navigation .menu li a {
		padding: 14px 18px;
		border-top: 1px solid rgba(255, 255, 255, .12) !important;
	}
	#site-navigation .menu > ul > li > a::after { display: none; }

	/* Podmenu na mobilu jako běžný rozbalený seznam */
	#site-navigation .menu ul.sub-menu,
	#site-navigation .menu li ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		background: rgba(0, 0, 0, .12);
		padding: 0;
		min-width: 0;
	}
	#site-navigation .menu ul.sub-menu li a {
		color: #fff;
		padding-left: 34px;
	}
	#site-navigation .menu ul.sub-menu li a:hover {
		background: rgba(0, 0, 0, .22);
	}
	#site-navigation .menu li.menu-item-has-children > a::before {
		display: none;
	}
}