/**
 * Font System - Ernesto Theme
 * Locally hosted fonts for performance and privacy
 *
 * Font Files Location: /assets/fonts/
 * Formats: WOFF2 (modern browsers), WOFF (fallback)
 *
 * @package Ernesto
 * @since 1.0.0
 */

/* ============================================
   1. BODY TEXT FONT - Inter
   Modern, highly readable sans-serif
   Weights: 200 (ExtraLight), 400 (Regular), 800 (ExtraBold)
   ============================================ */

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter/inter-v20-latin-200.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter/inter-v20-latin-200italic.woff2') format('woff2');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter/inter-v20-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter/inter-v20-latin-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter/inter-v20-latin-800.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter/inter-v20-latin-800italic.woff2') format('woff2');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

/* ============================================
   2. HEADING FONT - Inter
   Using Inter for all headings for consistency
   ============================================ */

/* ============================================
   2b. ACCESSIBILITY FONT - Noto Sans
   Used in High Contrast Mode for maximum readability
   Weight: 400 (Regular)
   ============================================ */

@font-face {
	font-family: 'Noto Sans';
	src: url('../fonts/Noto/noto-sans-v42-latin-regular.woff2') format('woff2'),
	     url('../fonts/Noto/noto-sans-v42-latin-regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ============================================
   3. SPECIAL HEADING FONT - Aloha Chunky
   Fun, chunky display font for hero sections and H1
   ============================================ */

@font-face {
	font-family: 'Aloha Chunky';
	src: url('../fonts/Aloha-Chunky/AlohaChunky.woff2') format('woff2'),
	     url('../fonts/Aloha-Chunky/AlohaChunky.woff') format('woff'),
	     url('../fonts/Aloha-Chunky/AlohaChunky.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ============================================
   4. FONT STACKS & VARIABLES
   ============================================ */

:root {
	/* Font Families */
	--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
	                Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

	--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
	                Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

	--font-special: 'Aloha Chunky', Impact, 'Arial Black', sans-serif;

	/* Accessibility / High Contrast Mode */
	--font-noto: 'Noto Sans', Arial, 'Liberation Sans', sans-serif;

	--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
	             Consolas, 'Courier New', monospace;

	/* Font Sizes */
	--font-size-xs: 0.75rem;      /* 12px */
	--font-size-sm: 0.875rem;     /* 14px */
	--font-size-base: 1rem;       /* 16px */
	--font-size-md: 1.125rem;     /* 18px */
	--font-size-lg: 1.25rem;      /* 20px */
	--font-size-xl: 1.5rem;       /* 24px */
	--font-size-2xl: 1.875rem;    /* 30px */
	--font-size-3xl: 2.25rem;     /* 36px */
	--font-size-4xl: 3rem;        /* 48px */
	--font-size-5xl: 3.75rem;     /* 60px */
	--font-size-6xl: 4.5rem;      /* 72px */

	/* Font Weights */
	--font-weight-normal: 400;
	--font-weight-medium: 400;
	--font-weight-semibold: 800;
	--font-weight-bold: 800;
	--font-weight-extrabold: 800;
	--font-weight-black: 800;

	/* Line Heights */
	--line-height-tight: 1.25;
	--line-height-snug: 1.375;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.625;
	--line-height-loose: 1.75;

	/* Letter Spacing */
	--letter-spacing-tight: -0.025em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.025em;
	--letter-spacing-wider: 0.05em;
	--letter-spacing-widest: 0.1em;

	/* ---- Customizer-overrideable typography tokens ----
	   These are the CSS variables that the Customizer's Typography section
	   writes to via font-selector.php. Override them to change size/weight
	   for each element group without touching the base scale above.      */

	/* Navigation / menu links */
	--font-nav: var(--font-primary);
	--font-size-nav: 0.875rem;   /* SM — 14px */
	--font-weight-nav: 500;

	/* H1 / Hero */
	--font-size-h1: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
	--font-weight-h1: var(--font-weight-extrabold);

	/* H2 */
	--font-size-h2: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
	--font-weight-h2: var(--font-weight-bold);

	/* Body text — also used by H3–H5 (same size, bold weight) */
	--font-size-body: var(--font-size-base);
	--font-weight-body: var(--font-weight-normal);
}

/* ============================================
   5. BASE TYPOGRAPHY STYLES
   ============================================ */

body {
	font-family: var(--font-primary);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	line-height: var(--line-height-normal);
	letter-spacing: var(--letter-spacing-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ============================================
   6. HEADINGS
   ============================================ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--text-heading);
}

h1, .h1 {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-h1);
	margin-top: 0;
	margin-bottom: 1.5rem;
}

h2, .h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	margin-top: 2rem;
	margin-bottom: 1rem;
}

/* H3–H5: body text size, bold weight — size follows --font-size-body */
h3, .h3 {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	margin-top: 1.5rem;
	margin-bottom: 0.875rem;
}

h4, .h4 {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	margin-top: 1.25rem;
	margin-bottom: 0.75rem;
}

h5, .h5 {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

h6, .h6 {
	font-size: clamp(var(--font-size-base), 1.5vw, var(--font-size-lg));
	font-weight: var(--font-weight-semibold);
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

/* ============================================
   7. SPECIAL HEADING (Hero / Display)
   ============================================ */

.heading-special,
.hero-heading,
.display-heading {
	font-family: var(--font-special);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
}

.heading-special {
	font-size: clamp(var(--font-size-4xl), 6vw, var(--font-size-6xl));
}

/* ============================================
   8. BODY TEXT
   ============================================ */

p {
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
	margin-top: 0;
	margin-bottom: 1rem;
	color: var(--text-main);
}

.text-large,
.lead {
	font-size: var(--font-size-md);
	line-height: var(--line-height-relaxed);
	font-weight: var(--font-weight-normal);
}

.text-small {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-normal);
}

.text-xs {
	font-size: var(--font-size-xs);
	line-height: var(--line-height-normal);
}

/* ============================================
   9. EMPHASIS & SPECIAL TEXT
   ============================================ */

strong, b {
	font-weight: var(--font-weight-bold);
}

em, i {
	font-style: italic;
}

mark {
	background-color: light-dark(#FFF3CD, #3A3420);
	color: var(--text-main);
	padding: 0.125rem 0.25rem;
}

code, kbd, samp {
	font-family: var(--font-mono);
	font-size: 0.875em;
	background-color: var(--bg-alt);
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
}

pre {
	font-family: var(--font-mono);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
	background-color: var(--bg-surface);
	padding: 1rem;
	border-radius: 0.5rem;
	overflow-x: auto;
	margin-bottom: 1rem;
}

blockquote {
	font-family: var(--font-special);
	font-size: var(--font-size-lg);
	font-style: italic;
	line-height: var(--line-height-relaxed);
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 4px solid var(--color-primary);
	color: var(--text-muted);
}

/* ============================================
   10. LINKS
   ============================================ */

a {
	font-family: inherit;
	color: var(--link-color);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

a:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: 0.125rem;
}

/* ============================================
   11. UTILITY CLASSES
   ============================================ */

.font-primary { font-family: var(--font-primary); }
.font-heading { font-family: var(--font-heading); }
.font-special { font-family: var(--font-special); }
.font-mono { font-family: var(--font-mono); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* ============================================
   12. RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablets and below */
@media (max-width: 768px) {
	:root {
		--font-size-base: 0.9375rem; /* 15px */
	}

	body {
		font-size: var(--font-size-base);
	}
}

/* Mobile */
@media (max-width: 480px) {
	:root {
		--font-size-base: 0.875rem; /* 14px */
	}
}

/* ============================================
   13. GUTENBERG FONT SIZE PRESETS → rem-based
   WordPress Core outputs these as pixel values (e.g. "42px !important"),
   which are absolute and do NOT respond to html { font-size: 110% }.
   Overriding with rem-based equivalents makes the A+/A- accessibility
   tool scale ALL block content, including hero headlines.
   ============================================ */

.has-small-font-size    { font-size: 0.875rem !important; }  /* ~14px */
.has-normal-font-size,
.has-regular-font-size  { font-size: 1rem     !important; }  /* 16px  */
.has-medium-font-size   { font-size: 1.25rem  !important; }  /* 20px  */
.has-large-font-size    { font-size: 2.25rem  !important; }  /* 36px  */
.has-x-large-font-size  { font-size: 3rem     !important; }  /* 48px  */
.has-huge-font-size     { font-size: 3.75rem  !important; }  /* 60px  — scales with A+/A- */

@media (max-width: 768px) {
	.has-huge-font-size    { font-size: 2.5rem  !important; }  /* 40px on tablet */
	.has-x-large-font-size { font-size: 2rem    !important; }
	.has-large-font-size   { font-size: 1.75rem !important; }
}

@media (max-width: 480px) {
	.has-huge-font-size    { font-size: 1.875rem !important; } /* 30px on mobile */
	.has-large-font-size   { font-size: 1.5rem   !important; }
}

/* ============================================
   14. PRINT STYLES
   ============================================ */

@media print {
	body {
		font-family: Georgia, 'Times New Roman', Times, serif;
		font-size: 12pt;
		line-height: 1.5;
		color: #000000;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: Arial, Helvetica, sans-serif;
		color: #000000;
		page-break-after: avoid;
	}

	p, blockquote {
		page-break-inside: avoid;
	}

	a {
		color: #000000;
		text-decoration: underline;
	}

	a[href^="http"]:after {
		content: " (" attr(href) ")";
		font-size: 90%;
	}
}