/*
Theme Name: High Performance Child
Theme URI: https://catchthemes.com/themes/high-performance
Author: SiteCare
Author URI: https://sitecare.com
Description: Child theme of High Performance for Sports Rehab Center.
Template: high-performance
Version: 1.1.0
Requires at least: 6.6
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: high-performance-child
*/

/* Custom styles go below. Loaded after the parent stylesheet on the front end and in the editor. */

/* Page header background: image or video picked per page (Page > Header Background),
   shown directly below the white header bar. The height follows the media's shape
   (--src-header-ratio, set in inc/page-header-media.php) so nothing is cropped off
   the top or bottom at any screen width. 16:9 when the file has no dimensions. */
.wp-block-cover.src-page-header-media {
	aspect-ratio: var(--src-header-ratio, 16 / 9);
	min-height: 12rem;
}


/* ==========================================================================
   Solid white header bar
   The parent positions the header absolutely over the first section
   (.header-transparent). Here it sits in the document flow on a white bar,
   so header images, videos and covers start directly below it.
   ========================================================================== */

:root {
	--src-header-height: 220px;
	--src-logo-height: 140px;
	--src-logo-max-width: 420px;
	--src-logo-max-share: 50%;
	--src-nav-color: #00186a;
	--src-nav-hover-color: #0860fe;
}

/* Tablet and hamburger range (the parent switches to the hamburger below 1200px). */
@media screen and (max-width: 74.9375em) {
	:root {
		--src-header-height: 140px;
		--src-logo-height: 90px;
		--src-logo-max-width: 300px;
	}
}

/* Phones (up to 782px). */
@media screen and (max-width: 782px) {
	:root {
		--src-header-height: 96px;
		--src-logo-height: 80px;
		--src-logo-max-width: 100%;
		--src-logo-max-share: 100%;
	}
}

/* Bar: in flow, white, fixed height, content centered vertically. */
body header .wp-block-main-header,
body header .wp-block-main-header.header-transparent {
	position: relative !important;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--src-header-height);
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	background-color: #ffffff;
	border-bottom: 0;
}

body header .wp-block-main-header > .wp-block-group {
	flex: 1 1 auto;
	width: 100%;
	align-items: center;
}

/* Phones: tighter side padding and gaps so the 80px logo keeps its full size. */
@media screen and (max-width: 782px) {
	body header .wp-block-main-header,
	body header .wp-block-main-header.header-transparent {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	body header .wp-block-main-header > .wp-block-group {
		gap: 8px !important;
	}
}

/* Logo: sized by height so it fits the bar, capped in width for wide logos. */
body header .wp-site-logo,
body header .wp-block-group.wp-site-logo {
	max-width: min(var(--src-logo-max-width), var(--src-logo-max-share));
	flex-shrink: 1;
	min-width: 0;
}

body header .wp-block-site-logo {
	line-height: 0;
}

body header .wp-block-site-logo a {
	display: inline-block;
}

body header .wp-block-site-logo img,
body header .wp-block-site-logo .custom-logo {
	width: auto !important;
	height: var(--src-logo-height) !important;
	max-width: 100%;
	max-height: none;
	object-fit: contain;
	object-position: left center;
}

/* Site title and tagline, if shown beside the logo. */
body header .wp-block-site-title,
body header .wp-block-site-title a,
body header .wp-block-site-tagline {
	color: var(--src-nav-color) !important;
}

body header .wp-block-site-title a:hover,
body header .wp-block-site-title a:focus {
	color: var(--src-nav-hover-color) !important;
}

/* Navigation and submenu text. */
body header .wp-block-navigation,
body header .wp-block-navigation .wp-block-navigation-item,
body header .wp-block-navigation .wp-block-navigation-item__content,
body header .wp-block-navigation .wp-block-navigation-submenu__toggle,
body header .wp-block-navigation .wp-block-navigation__submenu-icon {
	color: var(--src-nav-color) !important;
}

body header .wp-block-navigation .wp-block-navigation__submenu-icon svg,
body header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon svg,
body header .wp-block-navigation .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-icon svg {
	stroke: currentColor !important;
}

body header .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content:hover,
body header .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content:focus,
body header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
body header .wp-block-navigation .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
body header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon,
body header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle {
	color: var(--src-nav-hover-color) !important;
}

/* Desktop dropdowns: the parent uses a black panel, which dark blue text can't sit on. */
body header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #ffffff !important;
	color: var(--src-nav-color) !important;
	border: 1px solid #e6e6e6 !important;
	box-shadow: 0 12px 28px rgba(0, 24, 106, 0.1);
}

/* Mobile hamburger icon. */
body header .wp-block-navigation__responsive-container-open,
body header .wp-block-navigation__responsive-container-open svg {
	color: var(--src-nav-color) !important;
	fill: currentColor;
}

body header .wp-block-navigation__responsive-container-open:hover,
body header .wp-block-navigation__responsive-container-open:focus {
	color: var(--src-nav-hover-color) !important;
}

/* Open mobile menu: white panel so the dark blue links stay readable. */
body header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #ffffff !important;
	color: var(--src-nav-color) !important;
}

body header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none;
}

body header .wp-block-navigation__responsive-container-close,
body header .wp-block-navigation__responsive-container-close svg {
	color: var(--src-nav-color) !important;
	fill: currentColor;
}

body header .wp-block-navigation__responsive-container-close:hover,
body header .wp-block-navigation__responsive-container-close:focus {
	color: var(--src-nav-hover-color) !important;
}

/* Header search icon (was white for the transparent header). The open state
   keeps the parent's light close icon, which sits on the dark search panel. */
body header .wp-primary-search:not(.toggled-on) .wp-search-toggle-container .wp-block-button__link,
body header .wp-primary-search:not(.toggled-on) .wp-search-toggle-container .wp-search-toggle .wp-element-button {
	background-color: var(--src-nav-color);
}

body header .wp-primary-search:not(.toggled-on) .wp-search-toggle-container:hover .wp-search-toggle .wp-element-button,
body header .wp-primary-search:not(.toggled-on) .wp-search-toggle-container:has(a:focus-visible) .wp-search-toggle .wp-element-button {
	background-color: var(--src-nav-hover-color);
}

/* Header buttons that the parent inverts for dark backgrounds. */
body header .header-transparent .wp-block-buttons .wp-block-button .wp-block-button__link::before {
	filter: none;
}

/* Site editor: show the header as it renders on the front end. */
body header.block-editor-block-list__block:has(.header-transparent) {
	position: relative !important;
	min-height: 0;
}

body header .header-transparent.block-editor-block-list__block,
.header-transparent.block-editor-block-list__block {
	background-color: #ffffff;
}

/* Homepage hero: the parent sizes it to 100vh with the CTA pinned to the bottom.
   Now that it starts below the header bar, subtract the bar (and the admin bar
   when logged in) so the buttons stay at the bottom of the screen. svh keeps them
   above mobile browser toolbars. */
body .wp-site-blocks .wp-block-custom-header-media.wp-block-section,
body .wp-site-blocks .wp-block-header-media-slider .wp-block-fse-pro-slider .wp-block-cover {
	height: calc(100vh - var(--src-header-height) - var(--wp-admin--admin-bar--height, 0px));
	height: calc(100svh - var(--src-header-height) - var(--wp-admin--admin-bar--height, 0px));
}