/**
 * AIRI template design system — shared card / section / button components + design tokens
 * for sub-brand sites (template.airihub.io and every clone). Enqueued by
 * src/Network/template-css.php on the front end of non-main sites. The brand font
 * (Plus Jakarta Sans) is enqueued as a separate handle, so no @import here.
 *
 * The accent is bound to Kadence --global-palette1 (fallback #C00000) so each sub-brand's
 * chosen colour re-themes cards/buttons/highlights automatically.
 */

:root {
	/* Accent — follows the site's Kadence palette so sub-brands re-theme themselves */
	--airi-primary:         var(--global-palette1, #C00000);
	--airi-primary-hover:   color-mix(in srgb, var(--airi-primary) 82%, #000);
	--airi-primary-light:   color-mix(in srgb, var(--airi-primary) 12%, transparent);
	--airi-primary-lighter: color-mix(in srgb, var(--airi-primary) 6%,  transparent);

	/* Neutral palette */
	--airi-dark:     #1A1A1A;
	--airi-gray-700: #374151; --airi-gray-600: #4B5563; --airi-gray-500: #6B7280;
	--airi-gray-400: #9CA3AF; --airi-gray-300: #D1D5DB; --airi-gray-200: #E5E7EB;
	--airi-gray-100: #F3F4F6; --airi-gray-50:  #F9FAFB; --airi-white:    #FFFFFF;

	/* Semantic colours */
	--airi-success: #16A34A; --airi-warning: #EAB308; --airi-error: #DC2626; --airi-info: #0284C7;

	/* Typography */
	--font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

	/* Spacing scale */
	--space-xs: .25rem; --space-sm: .5rem; --space-md: 1rem;  --space-lg: 1.5rem;
	--space-xl: 2rem;   --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 5rem;

	/* Border radius */
	--radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
	--shadow-md: 0 4px 6px -1px rgba(0,0,0,.1);
	--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);
	--shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1);

	/* Transitions */
	--transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease;
}

/* Apply the brand font across the site content */
body,
.content-container,
.entry-content { font-family: var(--font-primary); }

/* ---- Buttons ------------------------------------------------------------- */
.airi-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
	font-family: var(--font-primary); font-weight: 600; text-decoration: none;
	border: none; cursor: pointer; transition: all var(--transition-normal);
}
.airi-btn--primary { background: var(--airi-primary); color: var(--airi-white); padding: 1rem 2rem; border-radius: var(--radius-md); }
.airi-btn--primary:hover, .airi-btn--primary:focus {
	background: var(--airi-primary-hover); color: var(--airi-white);
	transform: translateY(-2px); box-shadow: 0 4px 12px color-mix(in srgb, var(--airi-primary) 30%, transparent);
}
.airi-btn--large { padding: 1.25rem 2.5rem; font-size: 1.125rem; }
.airi-btn--outline {
	background: transparent; color: var(--airi-primary); border: 2px solid var(--airi-primary);
	padding: calc(1rem - 2px) calc(2rem - 2px); border-radius: var(--radius-md);
}
.airi-btn--outline:hover, .airi-btn--outline:focus { background: var(--airi-primary); color: var(--airi-white); }
.airi-btn--white { background: var(--airi-white); color: var(--airi-primary); padding: 1rem 2rem; border-radius: var(--radius-md); }
.airi-btn--white:hover, .airi-btn--white:focus { background: var(--airi-gray-100); color: var(--airi-primary-hover); }

/* ---- Highlighted text ---------------------------------------------------- */
.airi-highlight { color: var(--airi-primary); }
.airi-highlight--underline { position: relative; }
.airi-highlight--underline::after {
	content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px;
	background: var(--airi-primary-light); border-radius: 2px;
}

/* ---- Sections ------------------------------------------------------------ */
.airi-section { padding: var(--space-4xl) 0; }
.airi-section--sm { padding: var(--space-3xl) 0; }
.airi-section--gray { background: var(--airi-gray-100); }
.airi-section--dark {
	background: linear-gradient(135deg, var(--airi-dark) 0%, #111827 100%); color: var(--airi-white);
}
.airi-section--dark h2, .airi-section--dark h3, .airi-section--dark p { color: var(--airi-white); }
.airi-section--dark p { opacity: .9; }
.airi-section--gradient { background: linear-gradient(135deg, var(--airi-primary-lighter) 0%, var(--airi-white) 100%); }
.airi-section__header { text-align: center; max-width: 720px; margin: 0 auto var(--space-3xl); }
.airi-section__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; margin-bottom: var(--space-md); }
.airi-section__subtitle { font-size: 1.125rem; color: var(--airi-gray-600); line-height: 1.6; }

/* ---- Cards --------------------------------------------------------------- */
.airi-card {
	background: var(--airi-white); border-radius: var(--radius-lg); padding: var(--space-xl);
	box-shadow: var(--shadow-md); transition: all var(--transition-normal);
}
.airi-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.airi-card--flat { box-shadow: none; border: 1px solid var(--airi-gray-200); }
.airi-card--flat:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.airi-card__icon {
	width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
	background: var(--airi-primary-light); color: var(--airi-primary);
	border-radius: var(--radius-md); font-size: 1.5rem; margin-bottom: var(--space-lg);
}
.airi-card__title { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--space-sm); }
.airi-card__text { color: var(--airi-gray-600); line-height: 1.6; }

/* ---- Eyebrow / kicker (used by the homepage) ----------------------------- */
.airi-eyebrow { color: var(--airi-primary); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; font-size: .78rem; margin: 0 0 .6rem; }