/*
Theme Name: Cisneros Law Firm
Theme URI: https://cisneroslawfirm.com
Author: Kennedy Media Group
Author URI: https://kennedymedia.com
Description: Custom-built WordPress theme for Cisneros Law Firm, a personal injury practice serving the Rio Grande Valley. Built to WordPress core coding standards with a defensive, fail-safe engineering approach (see ENGINEERING-STANDARDS.md). No page-builder dependency.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cisneros-law-firm
Tags: custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   DESIGN TOKENS
   Single source of truth for color, type, spacing, motion.
   Every component in assets/css/*.css must derive from these variables —
   no hard-coded hex values or magic numbers outside this block.
   ========================================================================== */

:root {
	/* Brand color system.
	 * --clf-gold is the ONLY brand gold: sampled to match the firm's existing
	 * logo (gold column mark on black wordmark). This is the single source of
	 * truth for gold everywhere in the theme — the site must never again show
	 * two different gold/red logo treatments side by side.
	 * --clf-red is used sparingly, as an emphasis/urgency accent only
	 * (matches the red used on the firm's highway billboard creative), never
	 * as a competing brand color.
	 */
	--clf-ink:            #14181f; /* primary text / dark sections */
	--clf-ink-soft:       #3a4150; /* secondary text on light backgrounds */
	--clf-paper:          #f7f5f0; /* warm off-white background */
	--clf-paper-alt:      #eeebe3; /* slightly deeper warm neutral for section banding */
	--clf-charcoal:       #1b2027; /* dark section background (footer, hero overlay) */
	--clf-charcoal-2:     #232a34; /* dark section secondary surface */
	--clf-gold:           #b08d4f; /* brand gold, matched to existing logo */
	--clf-gold-dark:      #8f7139;
	--clf-gold-tint:      #f1e6cf;
	--clf-red:            #7c1d1d; /* billboard/urgency accent — use sparingly */
	--clf-red-dark:       #5e1414;
	--clf-line:           #d8d2c4; /* hairline / divider on light bg */
	--clf-line-dark:      #3a4150; /* hairline / divider on dark bg */
	--clf-success:        #2f5d3a;
	--clf-white:          #ffffff;

	/* Typography.
	 * Display face: a confident slab/serif that echoes the column-and-pillar
	 * mark in the logo (weight and gravitas without feeling ornamental).
	 * Body face: a plain, highly-legible humanist sans for long-form reading
	 * — injury victims reading case information need zero friction.
	 * Both are loaded as variable fonts with font-display: swap and a
	 * system-font fallback stack so text is never invisible while loading.
	 */
	--clf-font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
	--clf-font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--clf-fs-100: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
	--clf-fs-200: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
	--clf-fs-300: clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
	--clf-fs-400: clamp(1.25rem, 1.15rem + 0.5vw, 1.65rem);
	--clf-fs-500: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
	--clf-fs-600: clamp(2.25rem, 1.8rem + 2.25vw, 3.75rem);
	--clf-fs-700: clamp(2.75rem, 2.1rem + 3.25vw, 5rem);

	--clf-lh-tight: 1.1;
	--clf-lh-snug: 1.3;
	--clf-lh-body: 1.65;

	/* Spacing scale (8px base). Every section, card, and gap pulls from
	 * this list — this is what keeps rhythm consistent across templates,
	 * unlike the inconsistent per-section padding on the legacy site. */
	--clf-space-1: 0.5rem;
	--clf-space-2: 1rem;
	--clf-space-3: 1.5rem;
	--clf-space-4: 2rem;
	--clf-space-5: 3rem;
	--clf-space-6: 4.5rem;
	--clf-space-7: 6rem;
	--clf-space-8: 9rem;

	--clf-radius-sm: 4px;
	--clf-radius-md: 8px;
	--clf-radius-lg: 16px;

	--clf-container: 1200px;
	--clf-container-narrow: 760px;

	--clf-shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.08);
	--clf-shadow-md: 0 8px 24px rgba(20, 24, 31, 0.12);
	--clf-shadow-lg: 0 24px 48px rgba(20, 24, 31, 0.18);

	/* Motion tokens. A single easing curve and duration scale is reused
	 * everywhere so scroll reveals, hovers, and the column-rise signature
	 * animation all feel like one designed system, not scattered effects. */
	--clf-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--clf-duration-fast: 180ms;
	--clf-duration-base: 420ms;
	--clf-duration-slow: 900ms;
}

/* Reduced motion is the default assumption until JS confirms otherwise.
 * See assets/js/main.js — this class is toggled on <html>, and all
 * scroll-reveal animation is inert (opacity:1, transform:none) unless
 * the browser both allows motion AND JS has initialized successfully.
 * This guarantees the page is 100% readable with no FOUC even if a
 * script fails to load — a fail-safe requirement, not a nice-to-have. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   MINIMAL RESET (base only — component styles live in assets/css/main.css)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: var(--clf-font-body);
	font-size: var(--clf-fs-300);
	line-height: var(--clf-lh-body);
	color: var(--clf-ink);
	background: var(--clf-paper);
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--clf-font-display);
	line-height: var(--clf-lh-tight);
	margin: 0 0 var(--clf-space-2);
	font-weight: 600;
}

/* Visible, high-contrast focus state — never suppressed with outline:none
 * without a replacement. Accessibility floor requirement. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--clf-gold);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.screen-reader-text:focus {
	position: fixed;
	top: var(--clf-space-2);
	left: var(--clf-space-2);
	width: auto; height: auto;
	padding: var(--clf-space-1) var(--clf-space-2);
	background: var(--clf-white);
	color: var(--clf-ink);
	z-index: 10000;
	clip: auto;
}