/*
Theme Name:   Astra Child (RidgeRo)
Theme URI:    https://ridgero.us
Description:  RidgeRo Engineering child theme for Astra. Holds the site parts that used to need Elementor Pro: header/footer placement, main menu, sticky header, element CSS, gallery tabs and form styling.
Author:       RidgeRo Engineering
Template:     astra
Version:      1.1.0
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child
*/

:root {
	--rr-orange: #f59300;
	--rr-accent: #f5a000;
	--rr-navy: #17395f;
	--rr-ink: #1b1b1b;
	--rr-font: "Plus Jakarta Sans", sans-serif;
}

/* ------------------------------------------------------------------ 1. Header: sticky
 * Was Elementor Pro's "sticky: top" on the header container. */
/* #masthead raises the specificity above Astra's transparent-header rule (position: absolute). */
#masthead.rr-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: auto;
	left: auto;
	z-index: 999;
}
@media (max-width: 600px) {
	/* WordPress's admin bar scrolls away on small screens. */
	.admin-bar #masthead.rr-site-header { top: 0; }
}

/* ------------------------------------------------------------------ 2. Main menu ([ridgero_menu])
 * Matches the old Elementor Pro Nav Menu: 16px/600, black, orange hover with a 3px underline;
 * a dropdown with a toggle button below 1025px. */
.rr-nav { position: static; font-family: var(--rr-font); }
.rr-nav__list,
.rr-nav__list ul { margin: 0; padding: 0; list-style: none; }
.rr-nav__list { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.rr-nav__list > li { position: relative; }
.rr-nav__list a {
	position: relative;
	display: block;
	padding: 13px 28px;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 20px;
	text-decoration: none;
	transition: color 0.2s ease;
}
.rr-nav__list > li > a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: var(--rr-orange);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.rr-nav__list a:hover,
.rr-nav__list a:focus-visible,
.rr-nav__list .current-menu-item > a,
.rr-nav__list .current_page_item > a { color: var(--rr-orange); }
.rr-nav__list > li > a:hover::after,
.rr-nav__list > .current-menu-item > a::after,
.rr-nav__list > .current_page_item > a::after { opacity: 1; }
.rr-nav__list a:focus-visible { outline: 2px solid var(--rr-orange); outline-offset: -2px; }
/* Sub-menus (none today; ready if one is added in Appearance → Menus). */
.rr-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: none;
	min-width: 200px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.rr-nav__list li:hover > .sub-menu,
.rr-nav__list li:focus-within > .sub-menu { display: block; }
.rr-nav__list .sub-menu a { color: var(--rr-ink); font-weight: 500; }

.rr-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.05);
	color: var(--rr-ink);
	cursor: pointer;
}
.rr-nav__toggle:hover,
.rr-nav__toggle:focus { background: rgba(0, 0, 0, 0.1); color: var(--rr-ink); }
.rr-nav__toggle:focus-visible { outline: 2px solid var(--rr-orange); outline-offset: 2px; }
.rr-nav__bars,
.rr-nav__bars::before,
.rr-nav__bars::after {
	display: block;
	width: 20px;
	height: 2.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.rr-nav__bars { position: relative; }
.rr-nav__bars::before,
.rr-nav__bars::after { content: ""; position: absolute; left: 0; }
.rr-nav__bars::before { top: -6.5px; }
.rr-nav__bars::after { top: 6.5px; }
.rr-nav.is-open .rr-nav__bars { background: transparent; }
.rr-nav.is-open .rr-nav__bars::before { transform: translateY(6.5px) rotate(45deg); }
.rr-nav.is-open .rr-nav__bars::after { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1024px) {
	.rr-nav__toggle { display: inline-flex; }
	.rr-nav__list {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 998;
		display: none;
		flex-direction: column;
		background: #fff;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
	}
	.rr-nav.is-open .rr-nav__list { display: flex; }
	.rr-nav__list a { padding: 10px 20px; color: var(--rr-ink); font-size: 15px; font-weight: 500; }
	.rr-nav__list > li > a::after { display: none; }
	.rr-nav__list a:hover,
	.rr-nav__list .current-menu-item > a,
	.rr-nav__list .current_page_item > a { background: #f5f5f5; color: #f39300; }
	.rr-nav__list .sub-menu { position: static; display: block; box-shadow: none; }
	.rr-nav__list .sub-menu a { padding-left: 36px; }
	/* The dropdown spans the whole header, not just the menu column. */
	.rr-site-header .e-con:has(> .elementor-widget-shortcode .rr-nav),
	.rr-site-header .e-con-inner:has(> .elementor-widget-shortcode .rr-nav),
	.rr-site-header .elementor-widget-shortcode:has(.rr-nav),
	.rr-site-header .elementor-widget-shortcode:has(.rr-nav) .elementor-widget-container,
	.rr-site-header .elementor-widget-shortcode:has(.rr-nav) .elementor-shortcode { position: static; }
	.rr-site-header > .elementor > .e-con { position: relative; }
}

/* ------------------------------------------------------------------ 3. Home: former element Custom CSS
 * Elementor Pro's per-element Custom CSS ("selector ...") moved here; IDs are the Elementor element IDs. */
.elementor-element-59f7c23 span,
.elementor-element-0e3ced9 span { color: var(--rr-accent); }
.elementor-element-fbe84b3 { clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
/* Tablets and phones: the photo sits below the text, so the diagonal runs along its top edge. */
@media (max-width: 1024px) {
	.elementor-element-fbe84b3 { clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); }
}

/* ------------------------------------------------------------------ 4. Projects gallery (.rr-gallery)
 * Tabs styled like the old Pro gallery's custom CSS; grid 3 columns (2 on tablets, 1 on phones),
 * photos cropped to 3:2. */
/* The container's own padding and gap would shift the grid; the old gallery had none. */
.e-con.rr-gallery { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; }
.rr-gallery--ready > .e-con,
.rr-gallery--ready > .e-con-inner > .e-con { display: none !important; }
.rr-gallery__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 20px;
	width: 100%;
	margin-bottom: 30px;
}
.rr-gallery__tab,
.rr-gallery__tab:focus {
	padding: 10px 18px;
	border: 1px solid #d9e0e8;
	border-radius: 25px;
	background: #fff;
	color: var(--rr-navy);
	font-family: var(--rr-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 26px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.rr-gallery__tab:hover,
.rr-gallery__tab.is-active {
	border-color: var(--rr-navy);
	background: var(--rr-navy);
	color: #fff;
}
.rr-gallery__tab:focus-visible { outline: 2px solid var(--rr-orange); outline-offset: 2px; }
.rr-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}
.rr-gallery__item {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: #eef0f2;
}
.rr-gallery__item[hidden] { display: none; }
.rr-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.rr-gallery__item:hover img { transform: scale(1.04); }
.rr-gallery__item:focus-visible { outline: 3px solid var(--rr-orange); outline-offset: 2px; }
@media (min-width: 1025px) { .rr-gallery__tabs { padding: 0 40px; } }
@media (max-width: 1024px) { .rr-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .rr-gallery__grid { grid-template-columns: 1fr; gap: 10px; } }

/* ------------------------------------------------------------------ 5. Contact Us: Contact Form 7
 * Styled like the old Elementor Pro form: 47px fields, 1px grey-blue border, 14px gaps, orange button. */
.rr-cf7 { display: grid; gap: 14px; font-family: var(--rr-font); }
.rr-cf7 .wpcf7-form-control-wrap { display: block; }
.rr-cf7 input[type="text"],
.rr-cf7 input[type="email"],
.rr-cf7 input[type="tel"],
.rr-cf7 textarea {
	display: block;
	width: 100%;
	min-height: 47px;
	margin: 0;
	padding: 6px 16px;
	border: 1px solid #69727d;
	border-radius: 4px;
	background: #fff;
	color: #1f2124;
	font: inherit;
	font-size: 16px;
	line-height: 24px;
	box-shadow: none;
}
.rr-cf7 textarea { height: 126px; padding-top: 10px; resize: vertical; }
.rr-cf7 input:focus,
.rr-cf7 textarea:focus { border-color: var(--rr-orange); outline: 2px solid rgba(245, 147, 0, 0.25); outline-offset: 0; }
.rr-cf7 input::placeholder,
.rr-cf7 textarea::placeholder { color: #69727d; opacity: 1; }
.rr-cf7 .wpcf7-turnstile { min-height: 65px; }
.rr-cf7 .wpcf7-submit,
.rr-cf7 .wpcf7-submit:focus {
	justify-self: start;
	min-height: 50px;
	padding: 12px 32px;
	border: 0;
	border-radius: 13px;
	background: var(--e-global-color-primary, var(--rr-accent));
	color: var(--e-global-color-5646cc51, #10021f);
	font-family: var(--rr-font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s ease, filter 0.2s ease;
}
.rr-cf7 .wpcf7-submit:hover { filter: brightness(0.95); transform: scale(0.97); }
.rr-cf7 .wpcf7-submit:focus-visible { outline: 2px solid var(--rr-navy); outline-offset: 3px; }
.rr-cf7 .wpcf7-not-valid { border-color: #b42318; }
.rr-cf7 .wpcf7-not-valid-tip { margin-top: 4px; color: #b42318; font-size: 14px; }
.wpcf7 form .wpcf7-response-output { margin: 14px 0 0; padding: 10px 14px; border-radius: 4px; font-family: var(--rr-font); font-size: 15px; }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }

/* ------------------------------------------------------------------ 6. Contact details ([rr_*] shortcodes)
 * Phone, email and address links keep the colour of the text around them. */
a.rr-contact-link,
a.rr-contact-link:visited { color: inherit; text-decoration: none; }
a.rr-contact-link:hover,
a.rr-contact-link:focus-visible { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Elementor's icon lists make links blocks; these sit inside the text, so keep them inline. */
.elementor-widget .elementor-icon-list-item .elementor-icon-list-text a.rr-contact-link { display: inline; width: auto; }