/**
 * Application Hub design tokens and shared primitives.
 *
 * Derived from the Rheonics UI Kit (Typography, Color Tokens, Layout, Buttons,
 * Cards sheets). Light mode only — the kit has no dark-mode column yet.
 * Loaded once as a shared style handle; every Application Hub block depends
 * on it instead of redeclaring tokens.
 */

:root {
	--ah-font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Color tokens */
	--ah-color-text: #353535;
	--ah-color-text-subtle: #2f2f2f;
	--ah-color-text-inverse: #ffffff;
	--ah-color-link: #37AAE1;
	--ah-color-link-hover: #08315a;

	--ah-color-page-background: #f9f9f9;
	--ah-color-surface-page: #f6f8fa;
	--ah-color-surface-card: #ffffff;
	--ah-color-surface-accent: #37AAE10F;
	--ah-color-surface-accent-strong: #dceefc;
	--ah-color-surface-dark: #0f3d63;
	--ah-color-hero-overlay: rgba(15, 61, 99, 0.82);

	--ah-color-brand: #0F5387;
	--ah-color-brand-hover: #0f3d63;
	--ah-color-brand-light: #37AAE1;
	--ah-color-border: #cdcdcd;

	--ah-radius-sm: 6px;
	--ah-radius-md: 10px;
	--ah-radius-lg: 16px;
	--ah-radius-xl: 24px;

	--ah-space-1: 4px;
	--ah-space-2: 8px;
	--ah-space-3: 12px;
	--ah-space-4: 16px;
	--ah-space-5: 24px;
	--ah-space-6: 32px;
	--ah-space-7: 48px;
	--ah-space-8: 64px;

	--ah-font-size-xs: 12px;
	--ah-font-size-sm: 14px;
	--ah-font-size-regular: 16px;
	--ah-font-size-body: var(--ah-font-size-regular);
	--ah-font-size-lg: 18px;
	--ah-font-size-xl: 20px;

	/* Layout breakpoints (kit Layout sheet: mobile/tablet/desktop/wide) */
	--ah-container-max: 1200px;
	--ah-container-pad: 16px;
}

@media (min-width: 768px) {
	:root { --ah-container-pad: 12px; }
}

@media (min-width: 1025px) {
	:root { --ah-container-pad: 20px; }
}

@media (min-width: 1440px) {
	:root { --ah-container-pad: 0px; }
}

/* Typography scale (Open Sans, kit Typography sheet) */
.ah-display-lg { font: 700 3.5rem/1.15 var(--ah-font-family); letter-spacing: -0.015em; margin: 0; }
.ah-headline-lg { font: 600 2rem/1.25 var(--ah-font-family); margin: 0; }
.ah-headline-md { font: 700 1.75rem/1.3 var(--ah-font-family); margin: 0; }
.ah-headline-sm { font: 700 1.5rem/1.35 var(--ah-font-family); margin: 0; }
.ah-title-lg { font: 700 24px var(--ah-font-family); margin: 0; }
.ah-title-md { font: 600 15px/1.4 var(--ah-font-family); margin: 0; }
.ah-title-sm { font: 600 14px/1.4 var(--ah-font-family); margin: 0; }
.ah-body-lg { font: 600 20px var(--ah-font-family); margin: 0; }
.ah-body-md { font: 400 var(--ah-font-size-body)/1.6 var(--ah-font-family); margin: 0; }
.ah-body-sm { font: 400 0.75rem/1.5 var(--ah-font-family); margin: 0; }
.ah-label { font: 600 12px/1.4 var(--ah-font-family); letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
.ah-label-sm { font: 600 10px/1.2 var(--ah-font-family); letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }

/* Shared content container */
.ah-container {
	max-width: var(--ah-container-max);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--ah-container-pad);
	box-sizing: border-box;
	z-index: 1;
}

/* Visually hidden but screen-reader accessible (theme-independent) */
.ah-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Buttons (kit Buttons sheet: primary / outline / disabled) */
.ah-btn {
	box-sizing: border-box; /* same fix as .ah-card: padding/border must fit
		inside any width a caller assigns (e.g. width:100%) rather than
		adding on top of it and overflowing its container */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ah-space-2);
	font: 500 16px/1.2 var(--ah-font-family);
	padding: 12px 16px;
	border-radius: 90px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ah-btn-sm {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ah-space-2);
	font: 500 14px/1.2 var(--ah-font-family);
	padding: 4px 8px;
	border-radius: 5px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ah-btn--primary { background: var(--ah-color-brand); color: var(--ah-color-text-inverse); }
.ah-btn--primary:hover, .ah-btn--primary:focus-visible { background: var(--ah-color-brand-hover); color: var(--ah-color-text-inverse); }
.ah-btn--outline { background: transparent; border-color: var(--ah-color-brand); color: var(--ah-color-brand); }
.ah-btn--outline:hover, .ah-btn--outline:focus-visible { background: var(--ah-color-surface-accent); }
.ah-btn[disabled], .ah-btn--disabled { background: var(--ah-color-border); color: var(--ah-color-text-subtle); cursor: not-allowed; }

/* Chips (audience / metadata pills) */
.ah-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ah-space-1);
	font: 400 0.75rem/1.4 var(--ah-font-family);
	padding: 6px;
	border-radius: 5px;
	border: 1px solid var(--ah-color-border);
	color: var(--ah-color-text-subtle);
	background: var(--ah-color-surface-card);
}

/* Anchor / sub-navigation strip (kit variant set) */
.ah-anchor-nav {
	display: flex;
	gap: var(--ah-space-5);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-bottom: 1px solid var(--ah-color-border);
	scrollbar-width: none;
}
.ah-anchor-nav::-webkit-scrollbar { display: none; }
.ah-anchor-nav a {
	flex: none;
	padding: var(--ah-space-3) 0;
	font: 600 0.875rem/1.4 var(--ah-font-family);
	color: var(--ah-color-text-subtle);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.ah-anchor-nav a:hover, .ah-anchor-nav a.is-active { color: var(--ah-color-brand); border-color: var(--ah-color-brand); }

/* Utility: keep a scrollable element's native scrollbar functional but
   invisible (e.g. a horizontally-scrolling breadcrumb) — scroll still
   works via wheel/touch/keyboard, only the bar itself is hidden. */
.ah-hide-scrollbar {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge/IE */
}
.ah-hide-scrollbar::-webkit-scrollbar {
	display: none; /* Chrome/Safari/new Edge */
}

/* Card primitive (kit Cards sheet) */
.ah-card {
	box-sizing: border-box; /* padding/border must fit inside any width a
		parent assigns (e.g. Swiper's inline slide width) rather than
		adding on top of it and overflowing */
	background: var(--ah-color-surface-card);
	border: 1px solid var(--ah-color-border);
	border-radius: var(--ah-radius-xl);
	padding: var(--ah-space-4);
}
.ah-card-audience {
	max-width: 150px;
}
.ah-card__media {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--ah-radius-md);
	margin: 0 0 var(--ah-space-2);
}
.ah-card__media--placeholder {
	background: var(--ah-color-surface-page);
}

/* Outline button style variation for the core Button block (see also .ah-btn) */
.wp-block-button.is-style-application-hub-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--ah-color-brand);
	color: var(--ah-color-brand);
	border-radius: 999px;
	font: 600 0.9375rem/1.3 var(--ah-font-family);
}
.wp-block-button.is-style-application-hub-outline .wp-block-button__link:hover {
	background: var(--ah-color-surface-accent);
}