/*
 Theme Name:   Hello Elementor Child - NGO
 Theme URI:    https://example.org/
 Description:  Hello Elementor child theme customized for an NGO. Primary #0fa005, Secondary #a50373, custom typography, sticky header, and Elementor Theme Builder ready.
 Author:       Your Organization
 Author URI:   https://example.org/
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* ==========================================================================
   1. BRAND VARIABLES
   ========================================================================== */
:root {
	--ngo-color-primary: #0fa005;
	--ngo-color-primary-dark: #0b7a04;
	--ngo-color-secondary: #a50373;
	--ngo-color-secondary-dark: #7c0356;
	--ngo-color-text: #1e1e1e;
	--ngo-color-text-light: #5b5b5b;
	--ngo-color-bg: #ffffff;
	--ngo-color-bg-alt: #f6f8f6;
	--ngo-font-family: 'Asen Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--ngo-font-size-base: 18px;
	--ngo-line-height-base: 1.7;

	--ngo-header-height: 90px;
	--ngo-header-height-mobile: 70px;
}

/* ==========================================================================
   2. CUSTOM FONT (self-hosted)
   Upload your Asen Pro font files into the /fonts folder of this theme.
   Accepted names below - rename your files to match, or edit the paths.
   ========================================================================== */
@font-face {
	font-family: 'Asen Pro';
	src: url('fonts/AsenPro-Regular.woff2') format('woff2'),
	     url('fonts/AsenPro-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Asen Pro';
	src: url('fonts/AsenPro-Medium.woff2') format('woff2'),
	     url('fonts/AsenPro-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Asen Pro';
	src: url('fonts/AsenPro-Bold.woff2') format('woff2'),
	     url('fonts/AsenPro-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   3. BASE TYPOGRAPHY (bigger, responsive, fluid via clamp)
   ========================================================================== */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--ngo-font-family);
	font-size: var(--ngo-font-size-base);
	line-height: var(--ngo-line-height-base);
	color: var(--ngo-color-text);
	background-color: var(--ngo-color-bg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ngo-font-family);
	font-weight: 700;
	color: var(--ngo-color-text);
	line-height: 1.25;
}

h1 { font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem); }
h2 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 3rem); }
h3 { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.375rem); }
h4 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.875rem); }
h5 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem); }
h6 { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem); }

p {
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	margin-bottom: 1.4em;
}

a {
	color: var(--ngo-color-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--ngo-color-secondary);
}

/* ==========================================================================
   4. BUTTONS (theme + Elementor buttons)
   ========================================================================== */
button,
input[type="submit"],
.elementor-button,
.wp-block-button__link {
	font-family: var(--ngo-font-family);
	font-weight: 600;
	background-color: var(--ngo-color-primary);
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 0.9em 1.8em;
	font-size: 1rem;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

button:hover,
input[type="submit"]:hover,
.elementor-button:hover,
.wp-block-button__link:hover {
	background-color: var(--ngo-color-primary-dark);
	color: #ffffff;
	transform: translateY(-1px);
}

.ngo-btn-secondary,
.elementor-button.ngo-btn-secondary {
	background-color: var(--ngo-color-secondary);
}

.ngo-btn-secondary:hover {
	background-color: var(--ngo-color-secondary-dark);
}

/* ==========================================================================
   5. STICKY HEADER
   Works with:
   - Elementor Pro Theme Builder header (enable "Sticky" under the
     header widget's Advanced > Motion Effects panel and set the
     "Sticky" class target to this wrapper), AND
   - a lightweight CSS/JS fallback below for non-Pro / plain menus.
   ========================================================================== */
.site-header,
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	width: 100%;
	background-color: var(--ngo-color-bg);
	transition: box-shadow 0.25s ease, padding 0.25s ease;
}

/* Extra shadow + slight shrink once the user has scrolled (JS toggles this) */
.site-header.ngo-is-sticky,
.elementor-location-header.ngo-is-sticky {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Native Elementor Pro sticky effect classes get the same treatment */
.elementor-sticky--effects.elementor-sticky--active {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	background-color: var(--ngo-color-bg);
}

/* Prevent content jump when header becomes sticky */
body {
	scroll-padding-top: var(--ngo-header-height);
}

/* ==========================================================================
   6. FOOTER (base styling for the Elementor footer template area)
   ========================================================================== */
.site-footer,
.elementor-location-footer {
	background-color: var(--ngo-color-bg-alt);
	color: var(--ngo-color-text-light);
}

.site-footer a,
.elementor-location-footer a {
	color: var(--ngo-color-text-light);
}

.site-footer a:hover,
.elementor-location-footer a:hover {
	color: var(--ngo-color-primary);
}

/* ==========================================================================
   7. SELECTION / FOCUS / ACCESSIBILITY
   ========================================================================== */
::selection {
	background-color: var(--ngo-color-primary);
	color: #ffffff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--ngo-color-secondary);
	outline-offset: 2px;
}

/* ==========================================================================
   8. RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 1024px) {
	:root {
		--ngo-font-size-base: 17px;
		--ngo-header-height: 80px;
	}
}

@media (max-width: 767px) {
	:root {
		--ngo-font-size-base: 16px;
		--ngo-header-height: var(--ngo-header-height-mobile);
	}

	button,
	input[type="submit"],
	.elementor-button,
	.wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* Add any further custom CSS below this line */