/*
 * Custom styles for the SOUND NGO Child Theme.
 * ------------------------------------------------------------------
 * 1. GLOBAL VARIABLES
 * ------------------------------------------------------------------
 */
:root {
	--wp--preset--color--primary-teal: #004D40; 	 	 /* Deep Teal */
	--wp--preset--color--secondary-teal: #1A7D6E; 	 /* Softer Teal */
	--wp--preset--color--highlight-orange: #FF9800; 	 /* Warm Orange */
	--wp--preset--color--soft-off-white: #F4F7F6; 	 /* Soft Off-White Background */
	--wp--preset--color--light-orange-tint: #fff8e8; 	/* Light Orange for borders/accents */
	--wp--preset--color--text-dark: #333333; 	 	 /* Dark Gray Text */
	--wp--preset--color--text-light: white; 	 	 /* White Text */
	--wp--preset--color--light-gray-text: rgba(255, 255, 255, 0.9);	
	
	/* Utility Colors & Effects */
	--wp--preset--color--border-subtle: rgba(0, 0, 0, 0.08);
	--wp--preset--color--footer-divider: rgba(255, 255, 255, 0.15);
	--wp--preset--color--hero-overlay: rgba(0, 77, 64, 0.65);
	--wp--preset--color--authenticity-bg: rgba(255, 255, 255, 0.05);

	/* Font Family Definitions */
	--wp--preset--font-family--roboto: 'Roboto', sans-serif;
	--wp--preset--font-family--merriweather: 'Merriweather', serif;
}

/* Global Focus/A11y */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
	outline-color: var(--wp--preset--color--highlight-orange);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * 2. GLOBAL BASE STYLES & TYPOGRAPHY
 * ------------------------------------------------------------------ */
body {
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--wp--preset--color--soft-off-white);
	font-family: var(--wp--preset--font-family--merriweather) !important;	
	color: var(--wp--preset--color--text-dark);
	line-height: 1.6;
}

/* Enforce Merriweather on common theme/block elements */
.wp-block-group, .wp-block-cover__inner-container, .wp-block-column, p, li, span {
	font-family: var(--wp--preset--font-family--merriweather) !important;
}
/* Ensure bold text inside paragraphs uses Merriweather Bold */
p strong {
	font-weight: 700 !important;	
}

/* Headings */
h1, h2, h4, h5, h6 {	
	font-family: var(--wp--preset--font-family--roboto) !important;
	color: var(--wp--preset--color--primary-teal);
	font-weight: 700;
}

h3 {	
	font-family: var(--wp--preset--font-family--merriweather) !important;
	font-weight: 700 !important; 
	color: var(--wp--preset--color--primary-teal);
	font-size: 2.5rem;	
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 25px; 
}

/* Paragraphs and general text */
p {
	font-weight: 400; /* Regular Merriweather for paragraphs */
	color: var(--wp--preset--color--text-dark);
}
p.intro {
	font-weight: 400 !important;
	font-size: 1.25rem;	
	line-height: 1.7;
	margin-top: 0;
	margin-bottom: 30px; 
}


/* Links (General) */
a {
	color: var(--wp--preset--color--secondary-teal);
	text-decoration: none;
	transition: color 0.3s;
}

a:hover {
	color: var(--wp--preset--color--highlight-orange);
}

/* General WordPress Block & Vertical Rhythm Resets */
body > *:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.wp-site-header, .wp-block-group, .wp-block-cover, footer {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Content Alignment & Spacing within Groups */
.wp-block-group__inner-container {
	max-width: 1000px;
	padding: 0 40px;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}
/* Apply tight vertical rhythm to content inside groups */
.wp-block-group__inner-container > *:not(.logo-group) {
	margin-top: 0;
	margin-bottom: 1em; /* Reduced vertical rhythm for tighter spacing */
	margin-left: auto;
	margin-right: auto;
}
.wp-block-group__inner-container p:last-child,
.wp-block-group__inner-container ul:last-child,
.wp-block-group__inner-container ol:last-child,
.wp-block-group__inner-container h1:last-child,
.wp-block-group__inner-container h2:last-child,
.wp-block-group__inner-container h3:last-child,
.wp-block-group__inner-container h4:last-child,
.wp-block-group__inner-container > div:last-child:not(.logo-group):not(.wp-block-button) {
	margin-bottom: 0;
}
.wp-block-group__inner-container > *:not(:first-child) {
	margin-top: 20px; /* Slightly reduced margin-top between elements */
}
.wp-block-group__inner-container > h2,
.wp-block-group__inner-container > h3 {
	margin-top: 0;
}

/* Section Spacing - Made symmetrical and slightly reduced */
.wp-block-cover, .wp-block-group {
	padding-top: 80px !important; 
	padding-bottom: 80px !important; 
}
.center-aligned {
	text-align: center;
}

/* Separator removal */
.wp-block-separator {
	display: none;
}

/* ------------------------------------------------------------------
 * 3. BUTTONS & UTILITY CLASSES
 * ------------------------------------------------------------------ */

/* Base Button Styling (Standard Teal) */
.wp-block-button__link,
.wp-block-search__button {
	background-color: var(--wp--preset--color--primary-teal) !important;
	color: var(--wp--preset--color--text-light) !important;
	font-family: var(--wp--preset--font-family--roboto) !important;
	font-weight: 700;
	text-transform: uppercase;
	padding: 12px 24px;
	border-radius: 4px;
	transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.wp-block-button__link:hover,
.wp-block-search__button:hover {
	background-color: var(--wp--preset--color--secondary-teal) !important;
	opacity: 0.98;
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Call to Action Button Variants */
.wp-block-button__link.cta-main {
	background-color: var(--wp--preset--color--primary-teal) !important;
	color: white !important;
	border: 2px solid var(--wp--preset--color--primary-teal) !important;
}
.wp-block-button__link.cta-main:hover {
	background-color: transparent !important;
	color: var(--wp--preset--color--primary-teal) !important;
	box-shadow: 0 8px 16px rgba(0, 77, 64, 0.15);
}
.wp-block-button__link.cta-alt {
	background-color: transparent !important;
	color: var(--wp--preset--color--primary-teal) !important;
	border: 2px solid var(--wp--preset--color--primary-teal) !important;
}
.wp-block-button__link.cta-alt:hover {
	background-color: var(--wp--preset--color--primary-teal) !important;
	color: white !important;
}

/* FIX 5: Ensure individual buttons don't break the flex layout */
.wp-block-button {
	margin-left: initial;	
	margin-right: initial;
}

/* Card Shadow Style */
.is-style-clean-shadow {	
	transition: transform 0.3s ease, box-shadow 0.3s ease;	
	border-radius: 10px;	
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);	
}
.is-style-clean-shadow:hover {	
	transform: translateY(-5px);	
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);	
}

/* Icon Accent Style */
.icon-accent-modern {	
	display: inline-flex;	
	align-items: center;	
	justify-content: center;	
	width: 58px;	
	height: 58px;	
	margin-bottom: 25px;	
	color: var(--wp--preset--color--primary-teal);	
	border: 2px solid var(--wp--preset--color--primary-teal);	
	border-radius: 50%;	
	background-color: transparent;	
	font-size: 2.2rem;	
	transition: all 0.3s ease;	
}
.icon-accent-modern:hover {	
	border-color: var(--wp--preset--color--highlight-orange);	
	color: var(--wp--preset--color--highlight-orange);	
	background-color: rgba(255, 152, 0, 0.08);	
}
.image-placeholder-large {	
	width: 100%;	
	height: 380px;	
	background-color: transparent;	
	display: flex;	
	align-items: center;	
	justify-content: center;	
	border-radius: 10px;	
	margin-bottom: 30px;	
	overflow: hidden;	
	position: relative;	
}
.image-placeholder-large img {	
	width: 100%;	
	height: 100%;	
	object-fit: cover;	
	border-radius: 10px;	
}

/* Card Grids */
.values-grid, .pillars-grid {	
	display: flex;	
	justify-content: center;	
	gap: 40px;	
	text-align: center;	
	margin-top: 40px; 
}


/* ------------------------------------------------------------------
 * 4. HEADER STYLING (FIX 1: Logo Tagline Structure, FIX 2: Unified Logo Title)
 * ------------------------------------------------------------------ */
header {	
	background: var(--wp--preset--color--primary-teal);	
	color: white;	
	padding: 18px 0;	
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);	
	position: relative;	
	z-index: 1000;	
	margin-top: 0 !important;	
	padding-top: 18px !important;	
}
.header-container {	
	display: flex;	
	justify-content: space-between;	
	align-items: center;	
	max-width: 1100px;	
	margin: 0 auto;	
	padding: 0 30px;	
}
.logo-link-area {	
	text-decoration: none;	
	color: inherit;	
	display: flex;	
	align-items: center;	
}
.logo-group {	
	display: flex;	
	align-items: center;	
	line-height: 1.1;	
}
.logo-mark-img {	
	height: 42px;	
	width: 42px;	
	margin-right: 12px;	
	border-radius: 6px;	
	object-fit: contain;	
	vertical-align: middle;	
	transition: transform 0.2s ease-out;	
	display: block;	
}
.logo-link-area:hover .logo-mark-img {	
	transform: scale(1.08);	
	box-shadow: none;
}
.site-title-tagline {	
	line-height: 1.1;	
	
	/* FIX 1: Allow Title/Tagline to stack vertically */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* FIX 2: Unified Logo Title Styling for Header and Footer */
.site-title-tagline > span:first-child, 
.footer-logo-link .site-title-tagline span:first-child {	
	font-family: var(--wp--preset--font-family--roboto);	
	font-weight: 700;	
	font-size: 1.6rem;	
	color: white; 
}

.site-title-tagline > span:last-child {	
	font-family: var(--wp--preset--font-family--merriweather);	
	font-size: 0.85rem;	
	font-weight: 400;	
	color: white;	
	opacity: 0.9;	
	line-height: 1.2; /* Tighter line height for tagline */
}
nav {	
	font-family: var(--wp--preset--font-family--roboto);	
	font-size: 1.05rem;	
	text-align: center;	
	flex-grow: 1;	
}
nav a {	
	color: white;	
	text-decoration: none;	
	margin: 0 20px;	
	font-weight: 500;	
	transition: color 0.3s ease, transform 0.2s ease;	
	display: inline-block;	
}
nav a:hover {	
	color: var(--wp--preset--color--highlight-orange) !important;	
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------
 * 5. HERO SECTION STYLING
 * ------------------------------------------------------------------ */
.hero-section-with-image {	
	position: relative;	
	background-color: var(--wp--preset--color--secondary-teal);	
	background-size: cover;	
	background-position: center;	
	color: var(--wp--preset--color--text-light);	
	padding-top: 80px !important;	
	padding-bottom: 80px !important;	
	display: flex;	
	flex-direction: column;	
	align-items: center;	
	justify-content: center;	
	text-align: center;	
}
.hero-section-with-image::before {	
	content: '';	
	position: absolute;	
	top: 0;	
	left: 0;	
	right: 0;	
	bottom: 0;	
	background-color: var(--wp--preset--color--hero-overlay);	
	z-index: 1;	
}
.hero-section-with-image .wp-block-cover__inner-container {	
	position: relative;	
	z-index: 2;	
	max-width: 950px;	
	width: 100%;	
	margin-left: auto !important;	
	margin-right: auto !important;	
	text-align: center;	
	padding: 0 40px;	
}
.hero-section-with-image h2 {	
	font-size: 3.5rem;	
	font-weight: 700;	
	line-height: 1.15;	
	color: var(--wp--preset--color--text-light);	
	margin-bottom: 20px;	
	margin-top: 0;	
	margin-left: auto;	
	margin-right: auto;
	word-break: break-word;	
	overflow-wrap: break-word;
}
.hero-section-with-image p {	
	font-size: 1.35rem;	
	color: rgba(255, 255, 255, 0.95);	
	max-width: 900px;	
	margin-left: auto;	
	margin-right: auto;	
	margin-bottom: 30px;	
	margin-top: 0;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------
 * 6. FOOTER STYLING (REDESIGNED FOR ALIGNMENT AND FLOW)
 * ------------------------------------------------------------------ */
.footer-rich-layout {
	background-color: var(--wp--preset--color--primary-teal);
	color: var(--wp--preset--color--text-light);
	font-family: var(--wp--preset--font-family--merriweather);
	padding-top: 0;
	padding-bottom: 0;
}

.footer-container-inner {
	max-width: 1100px;	
	padding: 0 40px;
	margin: 0 auto;
}

/* FINAL FIX 1: Aligns Logo and Authenticity text block visually */
.footer-rich-layout .footer-container-inner > div {
	padding-top: 40px; 
	padding-bottom: 40px; 
	border-bottom: 1px solid var(--wp--preset--color--footer-divider);
	display: flex; 
	justify-content: space-between; 
	align-items: center; /* MODIFIED: Center the blocks vertically for visual balance */
	flex-wrap: wrap; 
	gap: 30px; 
}
.footer-rich-layout .footer-container-inner > div:last-of-type {
	border-bottom: none; 
}


/* Specific adjustments for the content row */
.footer-content-row { 
	padding: 0; 
	display: flex; 
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 40px;
}

/* FIX: Logo and Social Container Adjustments */
.footer-logo-and-social {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;	
	align-items: flex-start;	
	text-align: left;
	flex-basis: 300px; 
	flex-grow: 1; 
}
.footer-social-links-wrapper {
    width: auto; 
    text-align: left; 
    margin-top: 15px; 
}
/* The actual logo link structure */
.footer-logo-link {
	text-decoration: none;
	display: flex;
	align-items: flex-start;	
	margin-bottom: 0; 
}
.footer-logo-link .logo-group {
	display: flex;
	align-items: center;	
}
/* FIX 1: Ensure logo tagline stacks in the footer too */
.footer-logo-link .site-title-tagline {
	line-height: 1.2;	
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.footer-logo-link .logo-mark-img {	
	height: 52px;	
	width: 52px;
	margin-right: 15px;	
	border-radius: 8px;	
	object-fit: contain;
	display: block !important;	
	visibility: visible !important;	
	opacity: 1 !important;	
}

/* FIX 2: Header/Footer Title styling is unified in Section 4 */

.footer-logo-link .site-title-tagline span:last-child {
	font-family: var(--wp--preset--font-family--merriweather);	
	font-size: 0.85rem;	
	opacity: 0.9;
	line-height: 1.2; /* Tighter line height for tagline */
}

.footer-social-links a {
	font-size: 1.8rem;
	color: white;
	margin-right: 15px;
	transition: color 0.3s ease;
}

/* Authenticity/About Block */
.authenticity-block-wrapper {
	display: flex;	
	flex-direction: column; 
	align-items: flex-start;	
	flex-basis: 500px; 
	flex-grow: 2; 
}
/* Removed h4 style since "About SOUND" heading is removed from HTML */
.authenticity-block p {
	text-align: left;	
	color: var(--wp--preset--color--light-gray-text);	
	margin-top: 0; 
	font-size: 0.95rem;	
	margin: 0;
	line-height: 1.5;
}
.foundation-name {
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 700;
	color: var(--wp--preset--color--highlight-orange);
}
/* FIX: Paragraph 'SOUND' text size reverts to match rest of paragraph text (0.95rem) */
.authenticity-block p span:first-child {
	font-family: var(--wp--preset--font-family--roboto) !important;
	font-weight: 700 !important;
	color: white !important;	
	font-size: 0.95rem !important; /* CRITICAL: Set to paragraph size */
	display: inline; 
	line-height: inherit; 
	vertical-align: baseline; /* Ensure it stays on the text baseline */
	margin-right: 0.2em;	
}


/* MIDDLE SECTION (NAVIGATION MENU) */
.footer-nav-bottom-row {	
	display: flex;
	justify-content: center;	
	align-items: center;	
	padding: 0; 
}

/* FIX 1: Ensure menu bar can expand to center its content */
.footer-quick-links-bar {
	display: flex;
	justify-content: center;	
	gap: 20px;	
	flex-wrap: wrap;
	text-align: center;
	flex-grow: 0;
    width: 100%; 
}
.footer-quick-links-bar a {
	color: white;
	font-family: var(--wp--preset--font-family--roboto);	
	font-weight: 500;	
	font-size: 1rem;	
	line-height: 1.2;
	transition: color 0.3s ease;
}
.footer-quick-links-bar a:hover {
	color: var(--wp--preset--color--highlight-orange);
}


/* BOTTOM SECTION (CREDENTIALS & COPYRIGHT) */
.footer-credentials-copyright-row {	
	padding: 0; 
	display: flex;
	flex-direction: column;	
	align-items: center;	
	text-align: center;	
	gap: 20px;	
    
    /* FINAL FIX 3: Center the entire row container on the page */
    max-width: 1100px; /* Aligns with the main content container */
    margin: 0 auto; /* Centers the whole block horizontally */
}

.footer-credentials-wrapper {
	width: 100%;	
	max-width: 700px;	
}

/* FIX 1 & 4: Credentials styling */
.credential-box-container {
	display: flex;
	flex-wrap: nowrap; /* MODIFIED: Prefer a single row on desktop */
	gap: 10px;	
	justify-content: center;	
    overflow-x: auto; /* Allow scrolling if necessary */
}
.credential-box {
	background-color: transparent;
	color: white;
	padding: 4px 8px; /* MODIFIED: Reduced padding for smaller size */	
	border-radius: 4px;
	font-size: 0.8rem; /* MODIFIED: Smaller font size (0.85rem -> 0.8rem) */	
	border: 1px solid rgba(255, 255, 255, 0.4);	
	font-family: var(--wp--preset--font-family--roboto);	
    white-space: nowrap; /* Prevents text from wrapping inside the box */
    transition: background-color 0.3s, border-color 0.3s; /* Transition setup */
}
.credential-box:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle hover background */
    border-color: var(--wp--preset--color--highlight-orange);
}
.copyright-info-text {
	width: 100%;	
	max-width: 600px;	
	color: var(--wp--preset--color--light-gray-text);	
	/* FIX 1: Smaller text size (0.85rem -> 0.8rem) */
	font-size: 0.8rem;	
	text-align: center;	
}
.copyright-info-text p {
	margin: 0;	
	line-height: 1.3;
	/* FIX 1: Smaller text size (0.85rem -> 0.8rem) */
	font-size: 0.8rem;
	font-family: var(--wp--preset--font-family--merriweather);	
	color: var(--wp--preset--color--light-gray-text);	
}


/* ------------------------------------------------------------------
 * 7. RESPONSIVE ADJUSTMENTS	
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
	/* Header/Navigation collapse */
	.header-container {
		flex-direction: column;
		text-align: center;
	}
	nav {
		margin-top: 15px;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	nav a {
		margin: 0;
	}

	/* Footer mobile adjustments */
	.footer-rich-layout .footer-container-inner > div {
		flex-direction: column;
		align-items: center;
		padding-top: 30px;
		padding-bottom: 30px;
		gap: 20px;
	}

	.footer-logo-and-social {
        /* Align items left on mobile for better text flow */
		text-align: left;
		align-items: flex-start;
        width: 100%; /* Take full width on mobile */
	}
    .footer-social-links-wrapper {
        /* Align icons with logo on the left */
        text-align: left;
        width: auto;
        margin-top: 15px; 
    }
	.footer-logo-link {
		justify-content: flex-start; /* Align logo left on mobile */
		margin-bottom: 20px;
	}
	.footer-social-links {
		margin-top: 0;
	}
	.authenticity-block-wrapper {
        /* Align items left on mobile for better text flow */
		width: 100%;
		text-align: left;
		justify-content: flex-start;
		align-items: flex-start; 
	}
	.authenticity-block p {
		text-align: left;
	}

	.footer-quick-links-bar {
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}
	.footer-credentials-wrapper {
		width: 100%;
	}
	
    /* FIX 3: Removed column rule earlier, letting flex-wrap handle responsive horizontal wrapping */

	.copyright-info-text {
		font-size: 0.8rem;
	}

	/* Adjust specific margins for better mobile flow */
	.hero-section-with-image h2 {
		font-size: 2.5rem;
	}
	.hero-section-with-image p {
		font-size: 1.15rem;
	}
	.wp-block-group__inner-container {
		padding: 0 20px; 
	}
	.values-grid, .pillars-grid {
		flex-direction: column;
		gap: 20px;
		margin-top: 30px;
	}
	.is-style-clean-shadow {
		padding: 30px !important;
	}
	.image-placeholder-large {
		height: 200px; 
	}
	h3 {
		font-size: 2rem;
	}
	p.intro {
		font-size: 1.1rem;
		margin-bottom: 20px;
	}
	.wp-block-group > .wp-block-group__inner-container > h4 {
		margin-top: 60px !important; 
	}
	.goa-flows-box {
		padding: 30px !important;
	}
	.footer-logo-link .logo-mark-img {
		height: 42px;
		width: 42px;
	}
	.footer-logo-link .site-title-tagline span:first-child {
		font-size: 1.4rem;
	}
	.footer-logo-link .site-title-tagline span:last-child {
		font-size: 0.75rem;
	}
}