/*
Theme Name: Fundraising Ideas Online Child
Theme URI: https://fundraisingideasonline.com
Description: WebDesignNinja child theme for fundraisingideasonline.com, built on GeneratePress per network build standards. One child theme, no template sprawl.
Author: The Web Design Ninja
Author URI: https://thewebdesignninja.com
Template: generatepress
Version: 1.0.0
Text Domain: fio-child
*/

/* =========================================
   DESIGN TOKENS (Chance2Win network brand system, confirmed authoritative)
   ========================================= */
:root {
	--c2w-bg: #FAF9F7;
	--c2w-red: #C8102E;
	--c2w-red-dark: #A00D24;
	--c2w-navy: #1A1464;
	--c2w-purple: #7B2FBE;
	--c2w-cyan: #00D4FF;
	--c2w-dark: #0D0B2B;
	--c2w-body: #4A4C65;
	--c2w-white: #FFFFFF;

	--fio-radius-sm: 4px;
	--fio-radius-md: 8px;
	--fio-radius-lg: 16px;

	--fio-space-xs: 8px;
	--fio-space-sm: 16px;
	--fio-space-md: 24px;
	--fio-space-lg: 48px;
	--fio-space-xl: 80px;

	--fio-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	--fio-font-display: "DM Serif Display", Georgia, serif;
}

/* =========================================
   TYPOGRAPHY BASE
   ========================================= */
body {
	background-color: var(--c2w-bg);
	color: var(--c2w-body);
	font-family: var(--fio-font-body);
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--c2w-navy);
	font-family: var(--fio-font-body);
	font-weight: 800;
}

/* Display headlines only -- applied via .fio-display-heading, never globally */
.fio-display-heading {
	font-family: var(--fio-font-display);
	font-weight: 400;
}

a {
	color: var(--c2w-purple);
}

a:hover {
	color: var(--c2w-red-dark);
}

/* =========================================
   SHARED UTILITY CLASSES
   (composed on pages via GenerateBlocks "Additional CSS Class" field --
   never write a page-specific rule here)
   ========================================= */

/* Section width containers */
.fio-container-wide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.fio-container-narrow { max-width: 800px; margin-left: auto; margin-right: auto; }

/* Section vertical rhythm */
.fio-section-pad-sm { padding-top: var(--fio-space-md); padding-bottom: var(--fio-space-md); }
.fio-section-pad-md { padding-top: var(--fio-space-lg); padding-bottom: var(--fio-space-lg); }
.fio-section-pad-lg { padding-top: var(--fio-space-xl); padding-bottom: var(--fio-space-xl); }

/* Background variants */
.fio-bg-white { background-color: var(--c2w-white); }
.fio-bg-tint { background-color: var(--c2w-bg); }
.fio-bg-dark { background-color: var(--c2w-dark); color: var(--c2w-white); }
.fio-bg-dark h1, .fio-bg-dark h2, .fio-bg-dark h3 { color: var(--c2w-white); }

/* CTA buttons -- primary is always the red, per locked CTA order/branding */
.fio-btn-primary {
	display: inline-block;
	background-color: var(--c2w-red);
	color: var(--c2w-white) !important;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: var(--fio-radius-md);
	text-decoration: none;
}
.fio-btn-primary:hover { background-color: var(--c2w-red-dark); color: var(--c2w-white) !important; }

.fio-btn-secondary {
	display: inline-block;
	background-color: transparent;
	color: var(--c2w-navy) !important;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: var(--fio-radius-md);
	border: 2px solid var(--c2w-navy);
	text-decoration: none;
}
.fio-btn-secondary:hover { background-color: var(--c2w-navy); color: var(--c2w-white) !important; }

/* Flag-stripe signature -- solid bands, never blended into each other */
.fio-flag-stripe {
	display: flex;
	height: 6px;
	width: 100%;
}
.fio-flag-stripe span { flex: 1 1 0; }
.fio-flag-stripe span:nth-child(1) { background-color: var(--c2w-red); }
.fio-flag-stripe span:nth-child(2) { background-color: var(--c2w-white); }
.fio-flag-stripe span:nth-child(3) { background-color: var(--c2w-navy); }

/* Card component used across format/idea pages */
.fio-card {
	background-color: var(--c2w-white);
	border-radius: var(--fio-radius-lg);
	padding: var(--fio-space-md);
	box-shadow: 0 1px 3px rgba(13, 11, 43, 0.08);
}

/* Reality Block -- honest, non-marketing callout used sparingly, network-wide pattern */
.fio-reality-block {
	background-color: var(--c2w-dark);
	color: var(--c2w-white);
	border-left: 6px solid var(--c2w-cyan);
	border-radius: var(--fio-radius-sm);
	padding: var(--fio-space-md);
}
.fio-reality-block h3, .fio-reality-block h4 { color: var(--c2w-cyan); }

/* Badge -- cyan accent per brand system, used for labels like "Recommended" */
.fio-badge {
	display: inline-block;
	background-color: var(--c2w-cyan);
	color: var(--c2w-dark);
	font-size: 0.8em;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}