/*
Theme Name:   No Scoop 4 U Child
Theme URI:    https://noscoop4u.com/
Description:  Child theme for PoopersTheme. Fixes the doubled page head, header spacing and the mobile email link. Keeps site changes safe from parent theme updates.
Author:       No Scoop 4 U
Template:     poopers-theme
Version:      1.0.4
Requires PHP: 7.4
Text Domain:  noscoop4u-child
*/

/* -------------------------------------------------------------------------
 * Carried over from the parent theme's Additional CSS (Customizer), which
 * does not follow a theme switch. Orange title on the footer HTML widget.
 * ---------------------------------------------------------------------- */
#custom_html-2 .widget-title {
	font-family: 'Luckiest Guy', sans-serif;
	font-size: 23px;
	color: #fe7108;
}

/* -------------------------------------------------------------------------
 * Keep the header above the page content at every width.
 *
 * The parent gives .site-header z-index: 1000 but never positions it, so the
 * z-index does nothing. On narrow screens the parent pulls the home hero
 * heading up 150px (#full-height-slider .full-height-first-col), and its box
 * then sat on top of the menu button and swallowed clicks. Positioning the
 * header lets its z-index apply. The sticky header still switches to
 * position: fixed through the parent's more specific rule.
 * ---------------------------------------------------------------------- */
.site-header {
	position: relative;
}

/* -------------------------------------------------------------------------
 * Desktop header spacing (above 912px, where the parent shows the full menu).
 *
 * The parent gives the header 150px of side padding at every width and splits
 * the rest into three equal columns (menu, logo, login). A longer menu cannot
 * wrap, so it squeezed the logo column to nothing and ran "Contact" into
 * "Client Login". Here the logo keeps a fixed size, the side columns share
 * what is left, and menu text and gaps scale down on smaller laptops.
 *
 * Theme Options prints its own menu gap and logo size as inline CSS after
 * this file. The menu-gap rule below uses a longer selector so it wins; the
 * logo keeps the Theme Options maximum size and only scales below it.
 * ---------------------------------------------------------------------- */
@media only screen and (min-width: 913px) {
	.site-header .container.header-container,
	.site-header .top-header .container {
		padding-left: clamp(16px, 4vw, 150px);
		padding-right: clamp(16px, 4vw, 150px);
	}

	.site-header .container.header-container {
		gap: clamp(12px, 2vw, 40px);
	}

	.site-header .container.header-container .site-header-nav {
		flex: 1 1 0;
		width: auto;
	}

	.site-header .container.header-container .site-logo {
		flex: 0 0 auto;
		width: auto;
	}

	.site-header .container.header-container .site-logo a img {
		width: clamp(110px, 10vw, 155px);
		height: auto;
	}

	.site-header .container.header-container .site-header-client-login {
		flex: 1 1 0;
		width: auto;
		gap: clamp(10px, 1.4vw, 20px);
	}

	.site-header .container.header-container .site-header-nav .menu-main-navigation-container ul {
		gap: clamp(14px, 2.2vw, 45px);
	}

	.site-header .menu-main-navigation-container ul li a,
	.site-header .container.header-container .site-header-client-login a,
	.site-header .container.header-container .site-header-client-login button {
		white-space: nowrap;
	}

	.site-header .menu-main-navigation-container ul li a {
		font-size: clamp(13px, 1.15vw, 16px);
	}
}