/*
Theme Name:  Holistic Healing Child
Template:    generatepress
Description: Child theme for The Holistic Healing Project
Version:     1.0.0
*/

/* =========================================================
   CSS Custom Properties – exact values from live Avada theme
   ========================================================= */
:root {
	--hhp-primary:      #d88c11;   /* Avada primary_color */
	--hhp-primary-dark: #b87510;
	--hhp-link:         #ffa100;   /* Avada link_color */
	--hhp-accent:       #e9a825;   /* nav hover */
	--hhp-text:         #333333;
	--hhp-text-mid:     #747474;   /* tagline / top bar */
	--hhp-text-light:   #8C8989;   /* footer text */
	--hhp-footer-link:  #BFBFBF;
	--hhp-border:       #e5e5e5;
	--hhp-section-alt:  #f6f6f6;
	--hhp-white:        #ffffff;
}

/* =========================================================
   Full-width layout – remove GP's inside-article padding so
   sections can span the full viewport width
   ========================================================= */
.inside-article,
.entry-content {
	padding: 0 !important;
}

/* =========================================================
   Base
   ========================================================= */
body {
	font-family: 'Hind', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--hhp-text);
	background-color: var(--hhp-white);
}

a {
	color: var(--hhp-link);
}
a:hover {
	color: var(--hhp-primary-dark);
}

h1, h2 {
	font-family: 'Metrophobic', sans-serif;
	font-weight: 400;
	color: var(--hhp-text);
	line-height: 1.4;
}
h3, h4, h5 {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	color: var(--hhp-text);
}

h1 { font-size: 34px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

/* =========================================================
   Top Bar (contact info strip)
   ========================================================= */
.hhp-topbar {
	background-color: var(--hhp-white);
	border-bottom: 1px solid var(--hhp-border);
	font-size: 12px;
	color: var(--hhp-text-mid);
	padding: 6px 0;
	text-align: center;
}
.hhp-topbar a {
	color: var(--hhp-text-mid);
}
.hhp-topbar a:hover {
	color: var(--hhp-primary);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
	background-color: var(--hhp-white);
	border-bottom: 1px solid var(--hhp-border);
}

.site-branding .site-title,
.site-branding .site-title a {
	font-family: 'Metrophobic', sans-serif;
	color: var(--hhp-text);
	font-size: 1.1rem;
}

/* Navigation */
.main-navigation .menu > li > a {
	font-family: 'Hind', sans-serif;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--hhp-text);
	text-transform: uppercase;
}
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li.current-menu-item > a {
	color: var(--hhp-accent);
}

/* =========================================================
   Hero Section
   ========================================================= */
.hhp-hero {
	background-color: var(--hhp-white);
	border-bottom: 1px solid var(--hhp-border);
	padding: 80px 0 60px;
	text-align: center;
}
.hhp-hero-inner {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 2rem;
}
.hhp-hero h1 {
	font-size: 34px;
	color: var(--hhp-text);
	margin-bottom: 0.5rem;
}
.hhp-hero .hhp-hero-tagline {
	font-size: 16px;
	color: var(--hhp-text-mid);
	margin-bottom: 2rem;
}

/* =========================================================
   Page Sections
   ========================================================= */
.hhp-section {
	padding: 60px 0;
}
.hhp-section--alt {
	background-color: var(--hhp-section-alt);
}
.hhp-section__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Section heading – centered, Metrophobic */
.hhp-section__title {
	font-family: 'Metrophobic', sans-serif;
	font-size: 34px;
	font-weight: 400;
	color: var(--hhp-text);
	text-align: center;
	margin-bottom: 0.5rem;
}
.hhp-section__subtitle {
	font-size: 16px;
	color: var(--hhp-text-mid);
	text-align: center;
	margin-bottom: 2.5rem;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* =========================================================
   Why? section – with Peru background (parallax feel)
   ========================================================= */
.hhp-why {
	background-image: url('/wp-content/uploads/2018/06/Peru_150618_005-Panorama_2500_web.jpeg');
	background-size: cover;
	background-position: center 40%;
	background-attachment: fixed;
	padding: 120px 0;
	position: relative;
}
.hhp-why .hhp-section__inner {
	position: relative;
	text-align: center;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 10px;
	padding: 3rem 3.5rem;
	max-width: 800px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}
.hhp-why .hhp-section__title {
	margin-bottom: 1.5rem;
}
.hhp-why blockquote {
	font-family: 'Metrophobic', sans-serif;
	font-size: 20px;
	color: var(--hhp-text);
	border: none;
	padding: 0;
	margin: 0 auto;
	max-width: 760px;
	font-style: italic;
}
.hhp-why p {
	font-size: 17px;
	color: var(--hhp-text);
	line-height: 1.75;
	margin: 0;
}

/* =========================================================
   Upcoming Events section
   ========================================================= */
.hhp-events .hhp-btn {
	display: inline-block;
	background-color: var(--hhp-primary);
	color: var(--hhp-white) !important;
	padding: 10px 28px;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}
.hhp-events .hhp-btn:hover {
	background-color: var(--hhp-primary-dark);
}
.hhp-booking-embed {
	margin-top: 1rem;
}
.hhp-booking-embed iframe {
	width: 100%;
	border: none;
	display: block;
}

/* =========================================================
   Service Cards Grid
   ========================================================= */
.hhp-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.75rem;
	margin-top: 1rem;
}
.hhp-card {
	background: var(--hhp-white);
	border-radius: 10px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
	padding: 2.5rem 2rem;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hhp-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.13);
}
.hhp-card:nth-child(odd) {
	border-right: none;
}
.hhp-card-icon {
	width: 80px;
	height: 80px;
	background: rgba(216, 140, 17, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
}
.hhp-card-icon svg {
	width: 38px;
	height: 38px;
	stroke: var(--hhp-primary);
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.hhp-card h3 {
	font-size: 20px;
	color: var(--hhp-text);
	margin-bottom: 1rem;
}
.hhp-card p,
.hhp-card ul {
	color: var(--hhp-text-mid);
	font-size: 15px;
	line-height: 1.75;
	text-align: left;
}
.hhp-card ul {
	padding-left: 1.2rem;
}

/* CTA card – Tenerife retreat, full-width amber gradient */
.hhp-card--cta {
	grid-column: 1 / -1;
	background: linear-gradient(135deg, var(--hhp-primary) 0%, var(--hhp-primary-dark) 100%);
	box-shadow: 0 8px 32px rgba(216, 140, 17, 0.35);
}
.hhp-card--cta h3,
.hhp-card--cta p {
	color: var(--hhp-white);
}
.hhp-card--cta .hhp-card-icon {
	background: rgba(255, 255, 255, 0.2);
}
.hhp-card--cta .hhp-card-icon svg {
	stroke: var(--hhp-white);
}
.hhp-card--cta .hhp-btn {
	background: var(--hhp-white);
	color: var(--hhp-primary) !important;
	margin-top: 0.75rem;
	display: inline-block;
}
.hhp-card--cta .hhp-btn:hover {
	background: rgba(255, 255, 255, 0.88);
}

/* =========================================================
   Team Section
   ========================================================= */
.hhp-team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 3rem;
	margin-top: 2.5rem;
}
.hhp-team-member {
	text-align: center;
}
.hhp-team-member img {
	width: 200px;
	height: 300px;
	object-fit: cover;
	object-position: top;
	margin-bottom: 1rem;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.hhp-team-member h3 {
	font-size: 20px;
	margin-bottom: 0.25rem;
}
.hhp-team-member .hhp-role {
	font-size: 14px;
	color: var(--hhp-text-mid);
	margin-bottom: 1rem;
	font-style: italic;
}
.hhp-team-note {
	text-align: center;
	color: var(--hhp-text-mid);
	margin-top: 2rem;
	font-size: 15px;
}

/* =========================================================
   Contact Section
   ========================================================= */
.hhp-contact-intro {
	margin-bottom: 1.5rem;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 select {
	border: 1px solid var(--hhp-border);
	padding: 8px 12px;
	width: 100%;
	font-family: 'Hind', sans-serif;
	font-size: 15px;
	color: var(--hhp-text);
	background: var(--hhp-white);
}
.wpcf7 input[type="submit"] {
	background-color: var(--hhp-primary);
	color: var(--hhp-white);
	border: none;
	padding: 10px 28px;
	font-family: 'Hind', sans-serif;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
	background-color: var(--hhp-primary-dark);
}

/* =========================================================
   CTA Button (generic)
   ========================================================= */
.hhp-btn {
	display: inline-block;
	background-color: var(--hhp-primary);
	color: var(--hhp-white) !important;
	padding: 10px 28px;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 0.2s;
}
.hhp-btn:hover {
	background-color: var(--hhp-primary-dark);
	color: var(--hhp-white) !important;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
	background-color: var(--hhp-white);
	border-top: 1px solid var(--hhp-border);
	color: var(--hhp-text-light);
	font-size: 12px;
	padding: 1.5rem 0;
	text-align: center;
}
.site-footer a {
	color: var(--hhp-footer-link);
}
.site-footer a:hover {
	color: var(--hhp-primary);
}
.hhp-footer-nav {
	margin-bottom: 0.5rem;
}
.hhp-footer-nav a {
	margin: 0 0.75rem;
}
.hhp-footer-social a {
	margin: 0 0.4rem;
	font-size: 13px;
}
.hhp-footer-copyright {
	margin-top: 0.5rem;
	color: var(--hhp-text-light);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 768px) {
	.hhp-hero {
		padding: 80px 0 50px;
	}
	.hhp-section {
		padding: 40px 0;
	}
	.hhp-section__title {
		font-size: 26px;
	}
	h1 { font-size: 28px; }
	h2 { font-size: 20px; }
	.hhp-services {
		grid-template-columns: 1fr;
	}
	.hhp-card--cta {
		grid-column: 1;
	}
	.hhp-team-member img {
		width: 160px;
		height: 240px;
	}
}