/*
Theme Name: B2I Resources
Theme URI: https://b2ihub.app/
Author: B2I Hub
Author URI: https://b2ihub.app/
Description: Content-focused WordPress theme for the B2I Hub Resources section (guides, tips and helpful info for creators and businesses). Matches the B2I Hub app design system: dark navy surfaces, gold call-to-action accents, royal-blue highlights and a clean, readable typographic scale. Designed for a dedicated WordPress install so it only affects the Resources section and never the main app.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: resources-theme
Tags: blog, one-column, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template, editor-style
*/

/* =============================================================================
   DESIGN TOKENS
   Ported 1:1 from the app design system in expo/constants/*.ts
   (colors.ts, typography.ts, spacing.ts, effects.ts, animations.ts).
   This is the single source of truth for the Resources look & feel.
   ========================================================================== */
:root {
	/* ---- Color: surfaces (colors.ts) ---- */
	--rt-bg: #0A1733;            /* Colors.background / navy */
	--rt-bg-deep: #050B18;       /* Colors.backgroundDeep / darkNavy */
	--rt-card: #0E1D3E;          /* Colors.card / surfaceNavy */
	--rt-card-elevated: #122347; /* Colors.cardElevated / elevatedNavy */
	--rt-slag-bg: rgba(255, 255, 255, 0.03); /* Colors.slagBg */

	/* ---- Color: text (white-alpha scale) ---- */
	--rt-text-primary: rgba(255, 255, 255, 0.93);
	--rt-text-secondary: rgba(255, 255, 255, 0.65);
	--rt-text-tertiary: rgba(255, 255, 255, 0.40);
	--rt-text-disabled: rgba(255, 255, 255, 0.25);
	--rt-text-on-primary: #050B18; /* Colors.textOnPrimary */

	/* ---- Color: borders ---- */
	--rt-border: #1B305E;        /* Colors.border / borderNavy */
	--rt-border-subtle: rgba(255, 255, 255, 0.06);

	/* ---- Color: brand / accents ---- */
	--rt-primary: #FFD700;       /* Colors.primary / gold  (CTAs only) */
	--rt-accent: #5B7EF5;        /* Colors.accent / royalBlue (links/selection) */
	--rt-accent-bg: rgba(91, 126, 245, 0.15);
	--rt-accent-border: rgba(91, 126, 245, 0.35);
	--rt-accent-text: #DCE7FF;

	/* ---- Color: status ---- */
	--rt-success: #22C55E;
	--rt-warning: #F59E0B;
	--rt-error: #EF4444;
	--rt-info: #3B82F6;

	/* ---- Color: effects ---- */
	--rt-glow: rgba(255, 215, 0, 0.18);   /* effects.ts glow */
	--rt-shadow-color: rgba(0, 0, 0, 0.4); /* effects.ts shadow */
	--rt-overlay: rgba(0, 0, 0, 0.5);      /* Colors.modalOverlay */
	--rt-white: #FFFFFF;

	/* ---- Spacing: 4pt grid (spacing.ts) ---- */
	--rt-space-xxxs: 2px;
	--rt-space-xxs: 4px;
	--rt-space-xs: 8px;
	--rt-space-sm: 12px;
	--rt-space-md: 16px;
	--rt-space-lg: 20px;
	--rt-space-xl: 24px;
	--rt-space-xxl: 32px;
	--rt-space-xxxl: 40px;
	--rt-space-huge: 48px;
	--rt-space-massive: 64px;

	/* ---- Radius (spacing.ts: BorderRadius / Layout) ---- */
	--rt-radius-xs: 6px;
	--rt-radius-sm: 8px;
	--rt-radius-md: 12px;
	--rt-radius-lg: 16px;
	--rt-radius-xl: 24px;
	--rt-radius-full: 9999px;
	--rt-radius-card: 24px;   /* Layout.cardBorderRadius */
	--rt-radius-button: 30px; /* Layout.buttonBorderRadius */
	--rt-radius-input: 16px;  /* Layout.inputBorderRadius */

	/* ---- Shadows (effects.ts) ---- */
	--rt-shadow-card: 0 2px 8px var(--rt-shadow-color);
	--rt-shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.45);
	--rt-glow-gold: 0 0 12px var(--rt-glow);

	/* ---- Typography (typography.ts) ---- */
	--rt-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
	--rt-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	/* base font sizes (phone scale; bumped x1.1 at >=600px below) */
	--rt-fs-hero: 32px;
	--rt-fs-h1: 28px;
	--rt-fs-h2: 24px;
	--rt-fs-h3: 20px;
	--rt-fs-h4: 18px;
	--rt-fs-body-lg: 16px;
	--rt-fs-body: 15px;
	--rt-fs-body-sm: 14px;
	--rt-fs-caption: 12px;
	--rt-fs-overline: 11px;
	--rt-fs-label: 13px;

	/* weights (typography.ts uses 400/500/600/700/800) */
	--rt-fw-regular: 400;
	--rt-fw-medium: 500;
	--rt-fw-semibold: 600;
	--rt-fw-bold: 700;
	--rt-fw-extrabold: 800;

	/* reading measure for long-form content */
	--rt-measure: 72ch;
	--rt-content-max: 720px;
	--rt-wide-max: 1120px;

	/* motion (animations.ts) */
	--rt-dur-fast: 200ms;
	--rt-dur-normal: 300ms;
	--rt-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* x1.1 type scale on tablets and up (typography.ts useTypographyScale, width >= 600) */
@media (min-width: 600px) {
	:root {
		--rt-fs-hero: 35px;
		--rt-fs-h1: 31px;
		--rt-fs-h2: 26px;
		--rt-fs-h3: 22px;
		--rt-fs-h4: 20px;
		--rt-fs-body-lg: 18px;
		--rt-fs-body: 16px;
		--rt-fs-body-sm: 15px;
		--rt-fs-caption: 13px;
		--rt-fs-overline: 12px;
		--rt-fs-label: 14px;
	}
}

/* =============================================================================
   BASE / RESET
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--rt-bg);
	color: var(--rt-text-primary);
	font-family: var(--rt-font);
	font-size: var(--rt-fs-body-lg);
	line-height: 1.7;
	font-weight: var(--rt-fw-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--rt-accent-text);
	text-decoration: none;
	transition: color var(--rt-dur-fast) var(--rt-ease);
}

a:hover,
a:focus {
	color: var(--rt-white);
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--rt-accent);
	outline-offset: 2px;
	border-radius: var(--rt-radius-xs);
}

/* =============================================================================
   TYPOGRAPHY (maps to typography.ts variants)
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--rt-space-md);
	color: var(--rt-white);
	font-family: var(--rt-font);
	line-height: 1.3;
}

h1 { font-size: var(--rt-fs-h1); font-weight: var(--rt-fw-extrabold); letter-spacing: -0.3px; }
h2 { font-size: var(--rt-fs-h2); font-weight: var(--rt-fw-bold); }
h3 { font-size: var(--rt-fs-h3); font-weight: var(--rt-fw-bold); }
h4 { font-size: var(--rt-fs-h4); font-weight: var(--rt-fw-semibold); }
h5 { font-size: var(--rt-fs-body-lg); font-weight: var(--rt-fw-semibold); }
h6 { font-size: var(--rt-fs-body); font-weight: var(--rt-fw-semibold); }

p {
	margin: 0 0 var(--rt-space-lg);
}

small {
	font-size: var(--rt-fs-caption);
	color: var(--rt-text-secondary);
}

.rt-hero {
	font-size: var(--rt-fs-hero);
	font-weight: var(--rt-fw-extrabold);
	line-height: 1.25;
	letter-spacing: -0.5px;
	color: var(--rt-white);
}

.rt-overline {
	font-size: var(--rt-fs-overline);
	font-weight: var(--rt-fw-bold);
	line-height: 1.27;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--rt-accent-text);
}

.rt-caption {
	font-size: var(--rt-fs-caption);
	font-weight: var(--rt-fw-medium);
	color: var(--rt-text-secondary);
}

.rt-label {
	font-size: var(--rt-fs-label);
	font-weight: var(--rt-fw-semibold);
	color: var(--rt-text-secondary);
}

/* =============================================================================
   ACCESSIBILITY HELPERS
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: var(--rt-space-sm) var(--rt-space-md);
	background: var(--rt-primary);
	color: var(--rt-text-on-primary);
	font-weight: var(--rt-fw-bold);
	border-radius: 0 0 var(--rt-radius-sm) 0;
}

.skip-link:focus {
	left: 0;
	color: var(--rt-text-on-primary);
	text-decoration: none;
}

/* =============================================================================
   BUTTONS / CTA (gold = primary CTA per design system)
   ========================================================================== */
.rt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rt-space-xs);
	padding: var(--rt-space-sm) var(--rt-space-xl);
	border-radius: var(--rt-radius-button);
	border: 1px solid transparent;
	font-size: var(--rt-fs-body-lg);
	font-weight: var(--rt-fw-bold);
	line-height: 1.5;
	cursor: pointer;
	transition: transform 100ms var(--rt-ease), background-color var(--rt-dur-fast) var(--rt-ease), box-shadow var(--rt-dur-fast) var(--rt-ease);
	text-decoration: none;
}

.rt-btn:active {
	transform: scale(0.97); /* animations.ts buttonPress */
}

.rt-btn--primary {
	background: var(--rt-primary);
	color: var(--rt-text-on-primary);
	box-shadow: var(--rt-glow-gold);
}

.rt-btn--primary:hover,
.rt-btn--primary:focus {
	background: #FFDE33;
	color: var(--rt-text-on-primary);
	text-decoration: none;
}

.rt-btn--ghost {
	background: var(--rt-accent-bg);
	border-color: var(--rt-accent-border);
	color: var(--rt-accent-text);
}

.rt-btn--ghost:hover,
.rt-btn--ghost:focus {
	background: rgba(91, 126, 245, 0.25);
	color: var(--rt-white);
	text-decoration: none;
}

/* =============================================================================
   TABLE OF CONTENTS — theme-native (no plugin)
   Built by resources_theme_toc_generate() in functions.php.
   Toggle handled by theme.js (setupTocToggle).
   ========================================================================== */
.rt-toc {
	margin: var(--rt-space-xl) 0;
	max-width: var(--rt-measure);
}

.rt-toc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--rt-space-md);
}

.rt-toc__title {
	color: var(--rt-primary);
	font-size: var(--rt-fs-h4);
	font-weight: var(--rt-fw-bold);
	margin: 0;
	padding: 0;
}

.rt-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--rt-border-subtle);
	border-radius: var(--rt-radius-xs);
	background: transparent;
	color: var(--rt-text-secondary);
	cursor: pointer;
	padding: 0;
	transition: border-color var(--rt-dur-fast) var(--rt-ease), color var(--rt-dur-fast) var(--rt-ease);
}

.rt-toc__toggle:hover,
.rt-toc__toggle:focus {
	border-color: var(--rt-primary);
	color: var(--rt-primary);
}

.rt-toc__toggle-icon {
	display: block;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid currentColor;
	transition: transform var(--rt-dur-normal) var(--rt-ease);
}

.rt-toc.is-collapsed .rt-toc__toggle-icon {
	transform: rotate(-90deg);
}

.rt-toc__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.rt-toc.is-collapsed .rt-toc__list {
	display: none;
}

.rt-toc__item {
	padding: var(--rt-space-xxs) 0;
}

.rt-toc__item + .rt-toc__item {
	border-top: 1px solid var(--rt-border-subtle);
}

.rt-toc__item a {
	color: var(--rt-text-primary);
	text-decoration: none;
	font-size: var(--rt-fs-body);
	font-weight: var(--rt-fw-medium);
	transition: color var(--rt-dur-fast) var(--rt-ease);
}

.rt-toc__item a:hover,
.rt-toc__item a:focus {
	color: var(--rt-primary);
	text-decoration: none;
}