/*!
 * Radiant Polymers — sitewide repairs.
 * Loaded on every page. Everything here is scoped to phone widths except
 * where noted, so desktop rendering is untouched.
 */

/* ------------------------------------------------------------------ *
 * Mobile navigation.
 * The site's custom CSS forces the desktop menu to display:flex and hides
 * .menu-toggle with !important, which overrides the theme's own mobile
 * collapse. The result was a 533px menu row inside a 390px viewport, so
 * every page on the site scrolled sideways. This restores the hamburger.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
	html body .site-header .inside-header,
	html body .site-header .header-content-h,
	html body .site-header .container {
		flex-wrap: wrap !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
	}
	html body .site-header,
	html body header.site-header {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	/* Two rows: [hamburger | search] then the menu itself, full width. */
	.main-navigation,
	.main-navigation .inside-navigation,
	.main-navigation .inside-navigation.grid-container {
		display: grid !important;
		grid-template-columns: 1fr auto !important;
		grid-template-areas: "rpToggle rpBar" "rpMenu rpMenu" !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		padding: 0 !important;
	}
	.main-navigation { display: block !important; }
	.main-navigation .inside-navigation > .search-form { display: none !important; }

	.main-navigation .menu-toggle {
		grid-area: rpToggle !important;
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		width: auto !important;
		height: 54px !important;
		min-height: 0 !important;
		line-height: 1 !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		font-family: inherit !important;
		font-size: .74rem !important;
		font-weight: 700 !important;
		letter-spacing: 1.6px !important;
		text-transform: uppercase !important;
		color: #1a1a2e !important;
		cursor: pointer !important;
	}
	.main-navigation .menu-toggle::before {
		content: '';
		display: inline-block;
		width: 20px; height: 2px;
		background: #1a1a2e;
		box-shadow: 0 6px 0 #1a1a2e, 0 -6px 0 #1a1a2e;
	}
	.main-navigation.toggled .menu-toggle { color: #EE3124 !important; }
	.main-navigation.toggled .menu-toggle::before {
		background: #EE3124;
		box-shadow: 0 6px 0 #EE3124, 0 -6px 0 #EE3124;
	}

	.main-navigation .mobile-bar-items {
		grid-area: rpBar !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		height: 54px !important;
		margin: 0 !important;
		padding: 0 !important;
		position: static !important;
	}
	.main-navigation .mobile-bar-items a,
	.main-navigation .mobile-bar-items span {
		height: auto !important;
		padding: 8px !important;
		margin: 0 !important;
	}

	.main-navigation .main-nav,
	.main-navigation #primary-menu {
		grid-area: rpMenu !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
	}
	.main-navigation .main-nav > ul { display: none !important; }
	.main-navigation.toggled .main-nav > ul {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		background: #ffffff !important;
		border-top: 1px solid #e8e8e8 !important;
		box-shadow: 0 18px 40px rgba(0,0,0,.14) !important;
		padding: 0 0 6px !important;
		margin: 0 !important;
	}
	.main-navigation.toggled .main-nav ul li,
	.main-navigation.toggled .main-nav ul ul li {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		float: none !important;
		position: relative !important;
	}
	.main-navigation.toggled .main-nav ul li a,
	.main-navigation.toggled .main-nav ul ul li a {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		line-height: 1.35 !important;
		white-space: normal !important;
		border-bottom: 1px solid #f0f0f0 !important;
		border-left: 0 !important;
	}
	.main-navigation.toggled .main-nav ul li a { padding: 14px 18px !important; }
	.main-navigation.toggled .main-nav ul ul {
		position: static !important;
		display: none !important;
		width: 100% !important;
		min-width: 0 !important;
		top: auto !important;
		box-shadow: none !important;
		border-top: 0 !important;
	}
	.main-navigation.toggled .main-nav ul li.sfHover > ul,
	.main-navigation.toggled .main-nav ul ul.toggled-on { display: block !important; }
	.main-navigation.toggled .main-nav ul ul li a {
		padding: 12px 30px !important;
		background: #1a1a2e !important;
		color: #fff !important;
		border-bottom-color: rgba(255,255,255,.12) !important;
	}
	.main-navigation .dropdown-menu-toggle { padding: 14px 12px !important; }
}

/* A focus ring for keyboard users, not for every mouse click. */
:focus:not(:focus-visible) { outline: none !important; }

/* ------------------------------------------------------------------ *
 * Hand-built page sections.
 * Several pages lay out their content with inline grid and flex styles
 * that declare a fixed column count, so they never collapsed on a phone.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.entry-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
	.entry-content [style*="display: flex"],
	.entry-content [style*="display:flex"] { flex-wrap: wrap !important; }
	.entry-content [style*="white-space: nowrap"],
	.entry-content [style*="white-space:nowrap"] { white-space: normal !important; }
	.entry-content [style*="min-width"] { min-width: 0 !important; }
	.entry-content img { max-width: 100% !important; height: auto !important; }
	.entry-content table {
		display: block !important;
		overflow-x: auto !important;
		max-width: 100% !important;
		-webkit-overflow-scrolling: touch;
	}
	.rp-hero, .rp-cards .rp-card, .rp-cta-section, .rp-contact, .rp-news-grid, .rp-stats {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.rp-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Keyboard focus should be visible but not drawn on mouse clicks. */
.rp-kit :focus:not(:focus-visible) { outline: none !important; }

/* ------------------------------------------------------------------ *
 * Header height.
 * The site stylesheet pins .site-header to exactly 70px while giving
 * .inside-header a 90px min-height, so the navigation overflowed the
 * header by 10px and painted a white block over the top of every hero.
 * Let the header size to its own contents instead.
 * ------------------------------------------------------------------ */
html body .site-header,
html body header.site-header {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}
html body .site-header .inside-header,
html body .site-header .header-content-h {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* The kit ships its own progress-ring back-to-top on articles; hide the
   theme's so the two do not stack in the same corner. */
.rp-kit-single .lalita-back-to-top,
.rp-kit-single .back-to-top,
.rp-kit-single #back-to-top { display: none !important; }

/* Elsewhere, bring the theme's button in line with the site palette. */
.lalita-back-to-top,
.back-to-top,
#back-to-top {
	background: #1a1a2e !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
	transition: background .2s ease !important;
}
.lalita-back-to-top:hover,
.back-to-top:hover,
#back-to-top:hover { background: #EE3124 !important; }