/* ==========================================================================
   IMPACT CHAIN BRANDING STYLESHEET
   Version: 1.0 (June 2026) - Responsive Mobile-First
   ========================================================================== */

	/* --------------------------------------------------------------------------
   1. Brand Design Tokens (Variables)
   -------------------------------------------------------------------------- */
	:root {
		/* Primary Palette - Built around WGSN Transformative Teal 2026 */
		--color-deep-teal: #0F6E56;
		--color-brand-teal: #109E75;
		--color-light-teal: #5DCAA5;
		--color-teal-wash: #E1F5EE;

		/* Secondary Palette */
		--color-navy: #042C53;
		--color-ocean-blue: #185FA5;
		--color-blue-wash: #E6F1FB;

		/* Accent Palette */
		--color-leaf-green: #639922;
		--color-amber: #EF9F27;

		/* Neutrals */
		--color-charcoal: #2C2C2A;
		--color-mid-grey: #888780;
		--color-off-white: #F1EFE8;
		--color-white: #FFFFFF;

		/* Typography Hierarchy */
		--font-primary: 'Plus Jakarta Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		--weight-regular: 400;
		--weight-medium: 500;
	}

	/* --------------------------------------------------------------------------
   2. Global Defaults & Accessibility Baseline
   -------------------------------------------------------------------------- */
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	body {
		font-family: var(--font-primary);
		font-weight: var(--weight-regular);
		font-size: 16px;
		line-height: 1.5;
		background-color: var(--color-off-white);
		color: var(--color-charcoal);
		-webkit-font-smoothing: antialiased;
	}

	.container {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 24px;
	}

	/* --------------------------------------------------------------------------
   3. Typography Rules & Scales
   -------------------------------------------------------------------------- */
	.display-headline {
		font-size: clamp(32px, 5vw, 32px);
		/* Scales down gracefully on smaller viewports */
		font-weight: var(--weight-medium);
		line-height: 1.1;
		letter-spacing: +0.03em;
	}

	.section-title {
		font-size: clamp(26px, 4vw, 36px);
		font-weight: var(--weight-medium);
		color: var(--color-navy);
		margin-bottom: 16px;
	}

	.card-label {
		font-size: 18px;
		font-weight: var(--weight-medium);
		color: var(--color-charcoal);
		margin-bottom: 8px;
	}

	.body-text {
		font-size: 16px;
		font-weight: var(--weight-regular);
		max-width: 72ch;
		margin-bottom: 24px;
	}

	@media (min-width: 768px) {
		.body-text {
			font-size: 18px;
		}
	}

	.section-meta,
	.small-text {
		font-size: 25px;
		font-weight: var(--weight-regular);
		color: var(--color-mid-grey);
	}

	.small-text {
		font-size: 14px;
		font-weight: var(--weight-regular);
		color: var(--color-mid-grey);
	}

	.section-meta {
		text-transform: none;
		margin-bottom: 8px;
	}

	/* --------------------------------------------------------------------------
   4. Component Elements & UI Buttons
   -------------------------------------------------------------------------- */
	.btn {
		display: inline-block;
		padding: 12px 24px;
		font-family: var(--font-primary);
		font-weight: var(--weight-medium);
		font-size: 16px;
		text-decoration: none;
		border-radius: 4px;
		transition: background-color 0.2s ease, color 0.2s ease;
		border: none;
		cursor: pointer;
		text-align: center;
		width: 100%;
		/* Mobile optimized touch targets */
	}

	@media (min-width: 480px) {
		.btn {
			width: auto;
			/* Natural size on larger screens */
		}
	}

	.btn-primary {
		background-color: var(--color-deep-teal);
		color: var(--color-white);
	}

	.btn-primary:hover {
		background-color: var(--color-brand-teal);
	}

	.btn-primary-reversed {
		background-color: var(--color-white);
		color: var(--color-deep-teal);
	}

	.btn-primary-reversed:hover {
		background-color: var(--color-teal-wash);
	}

	.status-badge {
		display: inline-block;
		padding: 4px 12px;
		font-size: 12px;
		font-weight: var(--weight-medium);
		border-radius: 2px;
		margin-bottom: 12px;
	}

	.badge-verified {
		background-color: var(--color-teal-wash);
		color: var(--color-leaf-green);
	}

	.badge-progress {
		background-color: #FFF5E6;
		color: var(--color-amber);
	}

	/* --------------------------------------------------------------------------
   5. Layout Sections
   -------------------------------------------------------------------------- */

	/* Navigation Header & Responsive Menu */
	.site-header {
		background-color: var(--color-white);
		border-bottom: 1px solid var(--color-off-white);
		padding: 10px 0;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.header-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.brand-logo-h {
		display: block;
		width: 140px;
		height: auto;
	}

	/* Hamburger Toggle Button Styling */
	.menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 24px;
		height: 18px;
		background: transparent;
		border: none;
		cursor: pointer;
		z-index: 110;
	}

	.hamburger-bar {
		width: 100%;
		height: 2px;
		background-color: var(--color-navy);
		transition: all 0.2s ease-in-out;
	}

	/* Mobile Side Sliding Menu Base State */
	.main-nav {
		position: fixed;
		top: 0;
		right: -280px;
		/* Fully hidden off-screen by default */
		width: 280px;
		height: 100vh;
		background-color: var(--color-white);
		box-shadow: -4px 0 12px rgba(44, 44, 42, 0.08);
		padding: 40px 24px;
		display: flex;
		flex-direction: column;
		gap: 32px;
		transition: right 0.3s ease-in-out;
		z-index: 120;
	}

	/* Open State Triggered by JS class */
	.main-nav.is-open {
		right: 0;
	}

	.menu-close {
		background: transparent;
		border: none;
		font-size: 32px;
		color: var(--color-mid-grey);
		cursor: pointer;
		align-self: flex-end;
		line-height: 1;
	}

	.main-nav ul {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 24px;
		width: 100%;
	}

	.main-nav a:not(.btn) {
		text-decoration: none;
		color: var(--color-navy);
		font-weight: var(--weight-medium);
		font-size: 18px;
		display: block;
		padding: 8px 0;
	}

	.main-nav a:not(.btn):hover {
		color: var(--color-brand-teal);
	}

	/* Dimmer Overlay Background */
	.nav-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(4, 44, 83, 0.4);
		/* Branded navy transparency */
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
		z-index: 105;
	}

	.nav-overlay.is-active {
		opacity: 1;
		visibility: visible;
	}

	/* --------------------------------------------------------------------------
   Desktop Breakpoint Overrides (Cleans up mobile styles for large screens)
   -------------------------------------------------------------------------- */
	@media (min-width: 768px) {
		.brand-logo-h {
			width: 160px;
		}

		/* Hide Mobile Controls on Screen Expansion */
		.menu-toggle,
		.menu-close,
		.nav-overlay {
			display: none !important;
		}

		/* Reset side panel properties back into a clean linear row layout */
		.main-nav {
			position: static;
			width: auto;
			height: auto;
			background-color: transparent;
			box-shadow: none;
			padding: 0;
			flex-direction: row;
		}

		.main-nav ul {
			flex-direction: row;
			align-items: center;
			gap: 32px;
		}

		.main-nav a:not(.btn) {
			font-size: 16px;
			padding: 0;
		}
	}

	/* Hero Section */
	.hero-section {
		background-color: var(--color-deep-teal);
		color: var(--color-white);
		padding: 60px 0;
		text-align: center;
	}

	.hero-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.brand-logo-v {
		width: 100%;
		max-width: 320px;
		height: auto;
		margin-bottom: 8px;
	}

	.hero-subheading {
		font-size: 18px;
		max-width: 60ch;
	}

	@media (min-width: 768px) {
		.hero-section {
			padding: 80px 0;
		}

		.brand-logo-v {
			max-width: 400px;
		}

		.hero-subheading {
			font-size: 32px;
			font-weight: var(--weight-regular);
		}
	}

	/* Content Sections & Robust Grid System */
	.content-section,
	.dark-section {
		padding: 60px 0;
	}

	@media (min-width: 768px) {

		.content-section,
		.dark-section {
			padding: 80px 0;
		}
	}

	/* The core CSS Grid handling responsive columns without breakpoints */
	.ui-cards-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 20px;
		margin-top: 32px;
	}

	@media (min-width: 768px) {
		.ui-cards-grid {
			gap: 24px;
			margin-top: 40px;
		}
	}

	.ui-card {
		background-color: var(--color-white);
		padding: 24px;
		border-radius: 6px;
		box-shadow: 0 2px 8px rgba(44, 44, 42, 0.04);
	}

	.dark-section {
		background-color: var(--color-navy);
		color: var(--color-white);
	}

	.dark-section .section-title {
		color: var(--color-white);
	}

	.secondary-cta-link {
		color: var(--color-light-teal);
		font-weight: var(--weight-medium);
		text-decoration: none;
		display: inline-block;
	}

	.secondary-cta-link:hover {
		color: var(--color-brand-teal);
		text-decoration: underline;
	}

	/* Footer Section */
	.site-footer {
		background-color: var(--color-charcoal);
		color: var(--color-mid-grey);
		padding: 40px 0;
		border-top: 1px solid rgba(255, 255, 255, 0.05);
	}

	.footer-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 24px;
	}

	.brand-logo-footer {
		width: 120px;
		height: auto;
		opacity: 0.8;
	}

	@media (min-width: 768px) {
		.footer-container {
			flex-direction: row;
			justify-content: space-between;
			text-align: left;
		}
	}

	.footer-column {
		display: flex;
		flex-direction: column;
		gap: 0px;
	}

	.footer-center {
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.footer-center .section-title {
		color: var(--color-white);
		margin-bottom: 0;
	}

	.footer-center a {
		color: var(--color-white);
		text-decoration: underline;
	}

	/* --------------------------------------------------------------------------
   6. Registration Component Styles
   -------------------------------------------------------------------------- */
	.registration-section {
		background-color: var(--color-teal-wash);
		padding: 60px 0;
	}

	.registration-container {
		display: flex;
		justify-content: center;
	}

	.registration-card {
		background-color: var(--color-white);
		padding: 32px 24px;
		border-radius: 8px;
		max-width: 500px;
		width: 100%;
		box-shadow: 0 4px 12px rgba(44, 44, 42, 0.06);
	}

	.interest-form {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: 24px;
	}

	.form-group {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.form-input {
		font-family: var(--font-primary);
		font-size: 16px;
		padding: 12px 16px;
		border: 1px solid var(--color-mid-grey);
		border-radius: 4px;
		color: var(--color-charcoal);
		background-color: var(--color-white);
		outline: none;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
		width: 100%;
	}

	.form-input:focus {
		border-color: var(--color-deep-teal);
		box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.15);
		/* Soft focus ring using brand deep-teal */
	}

	.form-submit-btn {
		width: 100%;
		/* Keeps it easily clickable on mobile and cleanly aligned inside the card */
		margin-top: 8px;
	}

	/* Desktop layout scaling */
	@media (min-width: 768px) {
		.registration-section {
			padding: 80px 0;
		}

		.registration-card {
			padding: 48px;
		}
	}

	/* --------------------------------------------------------------------------
   7. Blog Component Styles
   -------------------------------------------------------------------------- */
	.blog-filter-bar {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin-bottom: 32px;
	}

	.blog-filter-btn {
		font-family: var(--font-primary);
		font-weight: var(--weight-medium);
		font-size: 14px;
		padding: 8px 18px;
		border-radius: 20px;
		border: 1px solid var(--color-teal-wash);
		background-color: var(--color-white);
		color: var(--color-deep-teal);
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.blog-filter-btn:hover {
		background-color: var(--color-teal-wash);
	}

	.blog-filter-btn.active {
		background-color: var(--color-deep-teal);
		border-color: var(--color-deep-teal);
		color: var(--color-white);
	}

	.blog-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 24px;
	}

	.blog-card {
		background-color: var(--color-white);
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(44, 44, 42, 0.06);
		cursor: pointer;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		display: flex;
		flex-direction: column;
	}

	.blog-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 6px 16px rgba(44, 44, 42, 0.1);
	}

	.blog-card-media {
		position: relative;
		width: 100%;
		height: 180px;
		background-color: var(--color-teal-wash);
	}

	.blog-card-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.blog-card-media .blog-play-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background-color: rgba(4, 44, 83, 0.75);
		color: var(--color-white);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
	}

	.blog-badge {
		position: absolute;
		top: 12px;
		left: 12px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.02em;
		padding: 4px 10px;
		border-radius: 12px;
		color: var(--color-white);
	}

	.blog-badge.type-text {
		background-color: var(--color-deep-teal);
	}

	.blog-badge.type-image {
		background-color: var(--color-amber);
	}

	.blog-badge.type-video {
		background-color: var(--color-ocean-blue);
	}

	.blog-card-body {
		padding: 20px;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.blog-card-meta {
		font-size: 13px;
		color: var(--color-mid-grey);
		margin-bottom: 8px;
	}

	.blog-card-title {
		font-size: 18px;
		font-weight: var(--weight-medium);
		color: var(--color-navy);
		margin-bottom: 8px;
	}

	.blog-card-excerpt {
		font-size: 14px;
		color: var(--color-charcoal);
		flex: 1;
	}

	.blog-card-link {
		margin-top: 16px;
		font-size: 14px;
		font-weight: var(--weight-medium);
		color: var(--color-deep-teal);
	}

	.blog-empty-state {
		font-size: 15px;
		color: var(--color-mid-grey);
		padding: 40px 0;
		text-align: center;
	}

	.blog-detail {
		max-width: 760px;
		margin: 0 auto;
	}

	.blog-detail-back {
		display: inline-block;
		margin-bottom: 24px;
		color: var(--color-deep-teal);
		font-weight: var(--weight-medium);
		text-decoration: none;
	}

	.blog-detail-back:hover {
		text-decoration: underline;
	}

	.blog-detail-meta {
		font-size: 14px;
		color: var(--color-mid-grey);
		margin-bottom: 8px;
	}

	.blog-detail-media {
		width: 100%;
		border-radius: 8px;
		overflow: hidden;
		margin: 24px 0;
	}

	.blog-detail-media img,
	.blog-detail-media video {
		width: 100%;
		display: block;
	}

	.blog-detail-gallery {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 12px;
	}

	.blog-detail-gallery img {
		width: 100%;
		height: 140px;
		object-fit: cover;
		border-radius: 6px;
	}

	.blog-detail-body p {
		font-size: 17px;
		line-height: 1.7;
		margin-bottom: 20px;
		color: var(--color-charcoal);
	}

	/* Latest blog summary on the homepage */
	.latest-blog-section {
		background-color: var(--color-white);
	}

	.latest-blog-card {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
		background-color: var(--color-off-white);
		border-radius: 10px;
		overflow: hidden;
	}

	.latest-blog-media {
		position: relative;
		width: 100%;
		height: 220px;
	}

	.latest-blog-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.latest-blog-content {
		padding: 0 24px 24px;
	}

	@media (min-width: 768px) {
		.latest-blog-card {
			grid-template-columns: 1fr 1fr;
			align-items: stretch;
		}

		.latest-blog-media {
			height: 100%;
		}

		.latest-blog-content {
			padding: 32px 32px 32px 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}