/**
 * Base resets, typography, buttons, and shared presentational utilities
 * used across every custom section of the yhdr child theme.
 */

#yhdr-home, #yhdr-about,
#yhdr-services-archive, #yhdr-projects-archive, #yhdr-testimonials-archive, #yhdr-blog-archive,
#yhdr-single-service, #yhdr-single-project, #yhdr-single-testimonial, #yhdr-single-blog,
#yhdr-contact {
	font-family: var(--yhdr-font-body);
	color: var(--yhdr-body-text);
}

#yhdr-home *, #yhdr-about *,
#yhdr-services-archive *, #yhdr-projects-archive *, #yhdr-testimonials-archive *, #yhdr-blog-archive *,
#yhdr-single-service *, #yhdr-single-project *, #yhdr-single-testimonial *, #yhdr-single-blog *,
#yhdr-contact * {
	box-sizing: border-box;
}

.container {
	max-width: var(--yhdr-container-width);
	margin: 0 auto;
	padding: 0 var(--yhdr-space-md);
}

section {
	padding: var(--yhdr-space-xl) 0;
}

h1, h2, h3, h4 {
	font-family: var(--yhdr-font-heading);
	color: var(--yhdr-near-black);
	line-height: 1.2;
	margin: 0 0 var(--yhdr-space-sm);
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }

p { line-height: 1.7; margin: 0 0 var(--yhdr-space-sm); }

h3.widget-title, 
.ct-footer h3.wp-block-heading,
[data-footer*="type-1"] .ct-footer [data-row*="middle"] .widget-title {
	color: var(--theme-palette-color-5) !important;
	font-family: var(--yhdr-font-heading) !important;
	font-weight: 700 !important;
	--theme-font-size: 22px;
	font-size: var(--theme-font-size) !important;
	margin: 0 0 var(--yhdr-space-sm);
}

.ct-footer .ct-widget:not(:first-child) {
    margin-top: 0px !important;
}

.eyebrow {
	font-family: var(--yhdr-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--yhdr-blue-accent);
	margin: 0 0 var(--yhdr-space-xs);
}

.section-header { text-align: center; max-width: 720px; margin: 0 auto var(--yhdr-space-lg); }
.section-header--dark h2 { color: var(--yhdr-white); }
.section-header--dark .eyebrow { color: var(--yhdr-gold); }
.section-header__description { color: var(--yhdr-muted-text); }

/* Generic archive/single page header -- shared by the services/projects/
   testimonials archives and their singles. The About page template
   overrides this with its own flat background (see about.css). */
.page-header {
	background: var(--yhdr-navy-mid);
	padding: var(--yhdr-space-xl) 0 0;
	text-align: center;
}
.page-header .eyebrow { color: var(--yhdr-gold); }
.page-header h1 { color: var(--yhdr-white); }
.page-header__intro { max-width: 640px; margin: 0 auto var(--yhdr-space-lg); color: var(--yhdr-light-blue-text); }
.page-header__intro p { color: inherit; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 28px;
	border-radius: var(--yhdr-radius-pill);
	font-family: var(--yhdr-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--yhdr-gold); color: var(--yhdr-near-black); }
.btn-primary:hover { background: var(--yhdr-gold-hover); }

.btn-secondary { background: transparent; color: var(--yhdr-white); border-color: var(--yhdr-white); }
.btn-secondary:hover { background: var(--yhdr-white); color: var(--yhdr-navy-dark); }

.btn-whatsapp { background: var(--yhdr-whatsapp); color: var(--yhdr-white); }
.btn-whatsapp:hover { background: var(--yhdr-whatsapp-hover); }

.btn-whatsapp-outline { background: transparent; color: var(--yhdr-whatsapp-hover); border-color: var(--yhdr-whatsapp); }
.btn-whatsapp-outline:hover { background: var(--yhdr-whatsapp); color: var(--yhdr-white); }

.btn-accent { background: var(--yhdr-blue-accent); color: var(--yhdr-white); }
.btn-accent:hover { background: var(--yhdr-navy-mid); }

.btn-outline { background: transparent; color: var(--yhdr-blue-accent); border-color: var(--yhdr-blue-accent); }
.btn-outline:hover { background: var(--yhdr-blue-accent); color: var(--yhdr-white); }

/* Cards & badges */
.card {
	background: var(--yhdr-white);
	border: 1px solid var(--yhdr-border);
	border-radius: var(--yhdr-radius-md);
	padding: var(--yhdr-space-md);
}

.badge {
	display: inline-block;
	background: var(--yhdr-card-blue-bg);
	color: var(--yhdr-blue-accent);
	border-radius: var(--yhdr-radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 4px 12px;
}

.badge-gold {
	display: inline-block;
	background: var(--yhdr-gold);
	color: var(--yhdr-near-black);
	border-radius: var(--yhdr-radius-pill);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 4px 12px;
}

.badge-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--yhdr-card-blue-bg);
	color: var(--yhdr-blue-accent);
	font-family: var(--yhdr-font-heading);
	font-weight: 700;
	font-size: 1.3rem;
	overflow: hidden;
}

.badge-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Wave dividers -- a solid navy block with a white elliptical curve carved
   out of one edge via ::after, so the white section next to it appears to
   dip a wave into the navy. The 'up' variant carves the curve from the
   bottom edge (navy sits above, curve dips into it from below); the 'down'
   variant mirrors this from the top edge. */
.wave-divider {
	position: relative;
	height: 100px;
	overflow: hidden;
}

.wave-divider--up::after {
	content: "";
	position: absolute;
	left: -25%;
	right: -25%;
	bottom: -60px;
	height: 120px;
	background: #fff;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.wave-divider--down::after {
	content: "";
	position: absolute;
	left: -25%;
	right: -25%;
	top: -60px;
	height: 120px;
	background: #fff;
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.wave-divider--navy-dark::after {
    background: var(--yhdr-navy-dark);
}

.wave-divider--navy-mid::after {
	background: var(--yhdr-navy-mid);
}

.wave-divider--white::after {
    background: var(--yhdr-white);
}

.wave-divider--grey::after {
    background: #e8effa;
}

.wave-divider--offwhite::after {
	background: var(--yhdr-offwhite);
}

.wave-divider--bg-navy-dark {
    background: var(--yhdr-navy-dark);
}

.wave-divider--bg-navy-mid {
	background: var(--yhdr-navy-mid);
}

.wave-divider--bg-white {
    background: var(--yhdr-white);
}

.wave-divider--bg-grey {
    background: #e8effa;
}

.wave-divider--bg-offwhite {
    background: var(--yhdr-offwhite);
}

/* Forms */
.form-field { margin-bottom: var(--yhdr-space-sm); }
.form-field label { display: block; font-weight: 600; color: var(--yhdr-near-black); margin-bottom: 6px; }

.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	font-family: var(--yhdr-font-body);
	font-size: 1rem;
	padding: 12px 16px;
	border: 1px solid var(--yhdr-border-2);
	border-radius: var(--yhdr-radius-md);
	background: var(--yhdr-white);
	color: var(--yhdr-near-black);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--yhdr-blue-accent);
}

.contact__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 782px) {
	section { padding: var(--yhdr-space-lg) 0; }
}