/*
Theme Name: TheGem Child – Specialty Testing
Template: thegem
Description: Child theme for specialtytest.com. Site-specific styles and code go here.
Version: 1.0.0
Text Domain: thegem-child
*/

/* ---- Header: the menu has too many items for one line, so let it wrap centred like the old site ---- */

/* .no-responsive is only on the desktop menu, which TheGem shows from tablet width up. */
#primary-menu.no-responsive {
	white-space: normal;
	text-align: center;
}
/* Drop-downs from the first line open over the second line; keep the open one (and its
   items) above the second-line links so its top item can be seen and clicked. */
#primary-menu.no-responsive > li:hover,
#primary-menu.no-responsive > li:focus-within {
	z-index: 50;
}
#primary-menu.no-responsive > li > ul {
	z-index: 50;
	text-align: left;
}
/* TheGem fades and slides the drop-down in over 0.3s, and it can't be pointed at until then,
   so a quick move down lands on the second line instead and closes it. Make it usable at once;
   it still lingers on the way out, which forgives cutting a corner.
   !important: TheGem's own open rule is far more specific (.header-main:not(...) #primary-menu:hover li:not(...):hover > ul). */
#primary-menu.no-responsive > li:hover > ul,
#primary-menu.no-responsive > li:focus-within > ul {
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	transition: opacity 0.15s linear, visibility 0s !important;
}
@media (min-width: 768px) {
	.header-style-3 #primary-menu.no-responsive > li,
	.header-style-3 #primary-menu.no-responsive > li.menu-item-current,
	.header-style-3 #primary-menu.no-responsive > li.menu-item-active {
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.header-style-3 .header-main {
		padding-bottom: 14px;
	}
	#primary-menu.nav-menu > li > a {
		padding-left: 12px;
		padding-right: 12px;
	}
	.header-style-3 .site-title {
		padding-bottom: 10px;
	}
}

/* ---- Header stays at the top of the window while the page scrolls ---- */

/* TheGem hides overflow on #page, which stops position: sticky working; clip looks the same but doesn't. */
#page {
	overflow: clip;
}
#site-header-wrapper {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 1000;
	background: #ffffff;
	transition: box-shadow 0.2s;
}
#site-header .site-title,
#site-header .site-title .logo img {
	transition: padding 0.2s, width 0.2s, height 0.2s;
}
/* Once scrolled (class set by st-site.php), a smaller logo and a shadow under the header. */
body.st-scrolled #site-header-wrapper {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
@media (min-width: 1213px) {
	/* !important: TheGem sets the logo padding with a more specific rule and the width inline. */
	body.st-scrolled #site-header .site-title {
		padding-top: 10px !important;
		padding-bottom: 4px !important;
	}
	body.st-scrolled #site-header .site-title .logo img {
		width: 170px !important;
		height: auto;
	}
}

/* ---- Home page: text as written (sentence case), not every word capitalised ----
   The home page content sits inside an <h3>, which TheGem capitalises like all headings. */

.home .entry-content h3,
.home .entry-content .st-custom-font,
.home .entry-content .st-iwt-title,
.home .entry-content .st-iwt-text,
.home .entry-content .products .product .title,
.home .entry-content .product-info .product-title,
.home .entry-content .product-info .product-title a,
.home .entry-content .woocommerce-loop-product__title {
	text-transform: none;
}

/* ---- Page title band: half the size of TheGem's h1, so the band stays slim ---- */

#page-title .page-title-title h1 {
	font-size: 30px;
	line-height: 38px;
}
@media (max-width: 1212px) {
	#page-title .page-title-title h1 {
		font-size: 24px;
		line-height: 32px;
	}
}
@media (max-width: 767px) {
	#page-title .page-title-title h1 {
		font-size: 20px;
		line-height: 28px;
	}
}

/* ---- Footer: copyright line centred across the bottom bar, as on the old site ---- */

#footer-nav .col-md-3:empty,
#footer-nav .col-md-6:empty {
	display: none;
}
#footer-nav .col-md-pull-9 {
	width: 100%;
	right: auto;
	left: auto;
	text-align: center;
}
#footer-nav .footer-site-info {
	padding: 30px 0;
}

/* ---- Shop: product names in Poppins like the rest of the site, not TheGem's light capitals ---- */

.single-product .product_title,
.product-page__right-column .product_title.entry-title.light,
.products .product .title,
.products .product .product-title,
.woocommerce-loop-product__title {
	font-family: Poppins, sans-serif;
	font-weight: 500;
	text-transform: capitalize;
	letter-spacing: 0;
	color: #24262a;
}
.single-product .product_title,
.product-page__right-column .product_title.entry-title.light {
	font-size: 26px;
	line-height: 34px;
}

/* ---- Section menu in the left sidebar: a third of the width, boxed, centred grey links ---- */

@media (min-width: 992px) {
	.page .panel.panel-sidebar-position-left > .sidebar {
		width: 33.3333%;
		right: 66.6667%;
	}
	.page .panel.panel-sidebar-position-left > .panel-center {
		width: 66.6667%;
		left: 33.3333%;
	}
}
.panel .sidebar .widget_nav_menu {
	border-top: 1px solid #e6e9ee;
	border-bottom: 1px solid #e6e9ee;
	padding: 25px;
	text-align: center;
}
.panel .sidebar .widget_nav_menu ul li,
.panel .sidebar .widget_nav_menu ul li a {
	padding: 0;
	border: 0;
	background: none;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 26px;
	color: #848892;
	text-transform: none;
}
.panel .sidebar .widget_nav_menu ul li a:before,
.panel .sidebar .widget_nav_menu ul li:before {
	display: none;
}
.panel .sidebar .widget_nav_menu ul li a:hover,
.panel .sidebar .widget_nav_menu ul li.current-menu-item > a {
	color: #364a9c;
}

/* ---- Old Ultima elements (rendered by mu-plugins/st-site.php) ---- */

.st-custom-font {
	margin-bottom: 15px;
	text-transform: capitalize;
}

.st-icon-list-item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 8px;
}
.st-icon-list-icon {
	flex: 0 0 auto;
	line-height: 1;
}
.st-icon-list-text {
	line-height: 1.6;
}

.st-icon {
	display: inline-block;
	line-height: 1;
}

.st-icon-with-text {
	margin-bottom: 30px;
}
.st-icon-with-text .st-iwt-icon {
	margin-bottom: 15px;
}
.st-icon-with-text .st-iwt-image {
	max-width: 100%;
	height: auto;
}
.st-icon-with-text .st-iwt-title {
	margin: 0 0 12px;
	text-transform: capitalize;
}
.st-icon-with-text .st-iwt-title a {
	color: inherit;
}
.st-icon-with-text .st-iwt-text {
	text-transform: capitalize;
}

.st-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 40px 0;
}
.st-cta-text {
	flex: 1 1 60%;
}

.st-video-frame {
	position: relative;
	padding-top: 56.25%;
}
.st-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.st-elements-holder {
	display: grid;
	grid-template-columns: repeat(var(--st-cols, 1), minmax(0, 1fr));
}
.st-elements-holder.st-cols-2 { --st-cols: 2; }
.st-elements-holder.st-cols-3 { --st-cols: 3; }
.st-elements-holder.st-cols-4 { --st-cols: 4; }
.st-elements-holder.st-cols-5 { --st-cols: 5; }
.st-elements-holder.st-cols-6 { --st-cols: 6; }
.st-elements-item {
	background-size: cover;
	background-position: center;
}
@media (max-width: 1024px) {
	.st-elements-holder { --st-cols: 2 !important; }
}
@media (max-width: 600px) {
	.st-elements-holder { --st-cols: 1 !important; }
}