/*
Theme Name:   Astra Child – Raygdesign
Template:     astra
Description:  Child theme for the Raygdesign site. All custom styling lives here so Astra can update safely.
Version:      1.0.0
Text Domain:  astra-child
*/

:root {
	--rg-blue: #2eb0ee;
	--rg-blue-dark: #0d74a5;
	--rg-text: #333333;
	--rg-muted: #666666;
	--rg-light: #f6f6f6;
	--rg-footer: #333333;
}

body,
button,
input,
select,
textarea {
	font-family: "Open Sans", Arial, sans-serif;
	color: var(--rg-text);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Open Sans", Arial, sans-serif;
}

/* Elementor full-width pages: let sections run edge to edge */
.elementor-template-full-width .site-content > .ast-container {
	max-width: 100%;
	padding: 0;
}

/* ---------- Header ---------- */
.site-header .ast-above-header-bar,
.site-header .ast-primary-header-bar {
	background: #ffffff;
	border: 0;
}

.site-header .ast-above-header-bar .site-above-header-wrap {
	min-height: 44px;
}

/* Logo spans both header rows, as on the original */
@media (min-width: 922px) {
	.site-header .ast-primary-header-bar .site-branding {
		margin-top: -44px;
	}
}

.site-header .custom-logo {
	max-width: 340px;
	width: 100%;
	height: auto;
}

/* Contact icons above the menu, top right */
.rg-header-icons {
	display: flex;
	gap: 18px;
	justify-content: flex-end;
	align-items: center;
}

.rg-header-icons a {
	color: var(--rg-blue);
	display: inline-flex;
	line-height: 1;
}

.rg-header-icons a:hover {
	color: var(--rg-blue-dark);
}

.rg-header-icons svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
}

/* Menu: grey text, active item as a small solid blue bar */
@media (min-width: 922px) {
	.ast-builder-menu-1 .main-header-menu {
		align-items: center;
		gap: 12px;
	}

	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
		color: #444444;
		font-size: 15px;
		line-height: 26px;
		height: auto;
		min-width: 128px;
		justify-content: center;
		padding: 0 18px;
	}

	.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .menu-link,
	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover {
		background: var(--rg-blue);
		color: #ffffff;
	}
}

/* ---------- Content blocks ---------- */
.rg-hero-title .elementor-heading-title {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.rg-hero-text {
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Large banner headings scale down on phones */
@media (max-width: 767px) {
	.rg-hero-title .elementor-heading-title {
		font-size: 36px !important;
	}
}

/* Cards used for galleries: image, title, description */
.rg-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.rg-card .elementor-image-box-title,
.rg-card .elementor-heading-title {
	color: var(--rg-text);
}

/* Home feature cards: white-framed image with a soft shadow, rule under the title */
.rg-feature .elementor-image-box-img img {
	border: 5px solid #ffffff;
	box-shadow: 0 10px 14px -8px rgba(0, 0, 0, 0.45);
	aspect-ratio: 3 / 2;
}

.rg-feature .elementor-image-box-title {
	padding: 0 12px 12px;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 14px !important;
}

.rg-feature .elementor-image-box-description {
	padding: 0 12px;
}

/* Gallery page: titles on one line and descriptions clamped to four lines, as on the original */
.rg-clamp .elementor-image-box-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rg-clamp .elementor-image-box-description {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Home examples strip: title above a full-bleed image with a numbered blue circle */
.rg-example {
	position: relative;
}

.elementor-widget-image.rg-example img {
	width: 100%;
	height: 270px;
	object-fit: cover;
	display: block;
}

.rg-example-num .elementor-heading-title {
	width: 44px;
	height: 44px;
	margin: -22px auto 0;
	border: 3px solid #ffffff;
	border-radius: 50%;
	background: var(--rg-blue);
	color: #ffffff;
	line-height: 38px;
	text-align: center;
	position: relative;
	z-index: 2;
}

/* Hero button: white outlined pill */
.rg-outline-btn .elementor-button.elementor-button {
	background: transparent;
	border: 2px solid #ffffff;
	border-radius: 30px;
	min-width: 330px;
}

.rg-outline-btn .elementor-button:hover {
	background: #ffffff;
	color: var(--rg-blue);
}

/* Client logo carousel on About | Contact: logos in rounded, bordered white boxes */
.rg-clients .swiper-slide-image {
	width: 100%;
	height: 115px;
	object-fit: contain;
	background: #ffffff;
	padding: 8px;
	border: 2px solid #555555;
	border-radius: 6px;
}

/* Terms & Conditions: section headings in brand blue */
.rg-legal h2 {
	font-size: 20px;
	font-weight: 600;
	color: var(--rg-blue);
	margin: 32px 0 10px;
}

.rg-legal ul {
	margin: 0 0 1em 1.4em;
}

.rg-legal a {
	color: var(--rg-blue);
}

/* ---------- Footer ---------- */
.site-footer .ast-footer-copyright,
.site-footer .site-below-footer-wrap {
	background: var(--rg-footer);
	color: #cccccc;
}

/* Lightbox captions for gallery images */
.elementor-lightbox .elementor-slideshow__description {
	font-size: 14px;
}

/* ---------- Phones: tighter side gutters ---------- */
@media (max-width: 767px) {
	/* Boxed top-level sections were padded 10-20px each side; one 16px gutter on phones.
	   Full-width sections (e.g. the home examples strip) are not boxed and stay edge to edge. */
	body .elementor .e-con-boxed.e-parent {
		--padding-left: 16px;
		--padding-right: 16px;
	}

	/* Nested containers added Elementor's default 10px per level (up to 60px in total on About);
	   drop the side part so content lines up with the section gutter. Containers with their own
	   explicit padding keep it, as Elementor's per-element rules are more specific. */
	.e-con.e-child {
		--padding-left: 0px;
		--padding-right: 0px;
	}

	/* Header rows: match the 16px content gutter */
	body.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar,
	body.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-above-header-bar {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ---------- Phones: vertical rhythm ---------- */
@media (max-width: 767px) {
	/* Home hero: the 150px top padding pushes the headline far down on a phone.
	   The bottom stays generous so the overlapping feature cards clear the button. */
	body .elementor .e-con.e-parent:has(.rg-outline-btn) {
		--padding-top: 60px;
		--padding-bottom: 120px;
	}

	/* Services: the stacked service items keep their 40px desktop gap plus padding,
	   leaving ~90px between entries; tighten it once they are a single column */
	body .elementor-55 .e-con.e-child:has(> .e-con.e-child) {
		--gap: 20px;
		--row-gap: 20px;
	}
}

/* Hero button: its 330px minimum is wider than the content area on 360px phones */
@media (max-width: 767px) {
	.rg-outline-btn .elementor-button.elementor-button {
		min-width: 0;
		width: 100%;
		max-width: 330px;
	}
}

/* Phones: contact icons spread evenly across the full header width, as on the original site */
@media (max-width: 921px) {
	.ast-mobile-header-wrap .ast-above-header-bar .ast-builder-grid-row,
	.ast-mobile-header-wrap .ast-above-header-bar .site-header-above-section-center,
	.ast-mobile-header-wrap .ast-above-header-bar .ast-header-html-1,
	.ast-mobile-header-wrap .ast-above-header-bar .ast-header-html,
	.ast-mobile-header-wrap .ast-above-header-bar .ast-builder-html-element {
		width: 100%;
		flex: 1 1 auto;
	}

	.ast-mobile-header-wrap .rg-header-icons {
		justify-content: space-around;
		gap: 0;
		padding: 6px 0;
	}

	.ast-mobile-header-wrap .rg-header-icons svg {
		width: 36px;
		height: 36px;
	}
}