/**
 * Font System - 100% IDENTICAL to React App
 * Matches compiled React CSS exactly
 */

/* ===========================
   Base Font Rules - From React Compiled CSS
   =========================== */

/* Body uses Quicksand as base */
body {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* All headings use Fredoka */
h1, h2, h3, h4, h5, h6 {
    font-family: Fredoka, ui-sans-serif, system-ui, sans-serif !important;
}

/* ===========================
   Tailwind Font Classes - EXACT from React
   =========================== */

.font-quicksand {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
}

.font-fredoka {
    font-family: Fredoka, ui-sans-serif, system-ui, sans-serif !important;
}

.font-hand {
    font-family: Caveat, ui-serif, Georgia, serif !important;
}

/* ===========================
   Default Font Application
   =========================== */

/* Ensure all text elements use Quicksand by default */
p, span, div, li, a, label, input, textarea, select, button {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
}

/* Override for specific heading classes */
.font-fredoka,
h1.font-fredoka,
h2.font-fredoka,
h3.font-fredoka,
h4.font-fredoka,
h5.font-fredoka,
h6.font-fredoka {
    font-family: Fredoka, ui-sans-serif, system-ui, sans-serif !important;
}

/* ===========================
   Component-Specific Font Rules
   =========================== */

/* Navigation - uses Quicksand bold */
nav a,
.nav-link {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 700 !important;
}

/* Hero Section */
.hero-content-animate h1,
#hero h1 {
    font-family: Fredoka, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 800 !important;
}

.hero-content-animate p,
#hero p {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
}

/* Buttons - Quicksand with weight 600-700 */
button,
.btn,
.button,
input[type="submit"],
input[type="button"],
.btn-primary,
.btn-secondary,
.btn-cta {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 600 !important;
}

/* Trust Indicators */
.trust-indicator p:first-child {
    font-family: Fredoka, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 700 !important;
}

.trust-indicator p:last-child {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 500 !important;
}

/* Feature Cards */
.feature-card h3,
.feature-card-title {
    font-family: Fredoka, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 700 !important;
}

.feature-card p,
.feature-card-description {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
}

/* Kitten Gallery */
.kitten-card h3,
.kitten-name {
    font-family: Fredoka, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 700 !important;
}

.kitten-card p,
.kitten-card span,
.kitten-details {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
}

.filter-btn {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 600 !important;
}

/* Testimonials */
#testimonials h2 {
    font-family: Fredoka, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 700 !important;
}

.testimonial-card h3,
.testimonial-name {
    font-family: Fredoka, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 600 !important;
}

.testimonial-card p,
.testimonial-quote {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
}

/* Quote marks use Caveat */
.testimonial-card::before,
.quote-mark {
    font-family: Caveat, ui-serif, Georgia, serif !important;
}

/* Booking Section */
#booking h2,
#booking h3 {
    font-family: Fredoka, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 700 !important;
}

#booking p,
#booking label,
#booking input,
#booking textarea,
.booking-text {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
}

.step-number {
    font-family: Fredoka, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 700 !important;
}

/* Footer */
footer h3,
footer h4,
.footer-heading {
    font-family: Fredoka, ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 600 !important;
}

footer p,
footer a,
footer span,
.footer-text {
    font-family: Quicksand, ui-sans-serif, system-ui, sans-serif !important;
}

/* ===========================
   Font Weights - Exact from React
   =========================== */

.font-light { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }

/* ===========================
   Text Sizes - Exact from React Tailwind
   =========================== */

.text-xs { 
    font-size: 0.75rem !important; 
    line-height: 1rem !important; 
}

.text-sm { 
    font-size: 0.875rem !important; 
    line-height: 1.25rem !important; 
}

.text-base { 
    font-size: 1rem !important; 
    line-height: 1.5rem !important; 
}

.text-lg { 
    font-size: 1.125rem !important; 
    line-height: 1.75rem !important; 
}

.text-xl { 
    font-size: 1.25rem !important; 
    line-height: 1.75rem !important; 
}

.text-2xl { 
    font-size: 1.5rem !important; 
    line-height: 2rem !important; 
}

.text-3xl { 
    font-size: 1.875rem !important; 
    line-height: 2.25rem !important; 
}

.text-4xl { 
    font-size: 2.25rem !important; 
    line-height: 2.5rem !important; 
}

.text-5xl { 
    font-size: 3rem !important; 
    line-height: 1 !important; 
}

.text-6xl { 
    font-size: 3.75rem !important; 
    line-height: 1 !important; 
}

.text-7xl { 
    font-size: 4.5rem !important; 
    line-height: 1 !important; 
}

/* ===========================
   Important Overrides
   =========================== */

/* Ensure WordPress doesn't override */
#wpadminbar * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Don't change code fonts */
code, pre, .font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* Ensure theme fonts take precedence */
.entry-content p,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: inherit !important;
}

/* ===========================
   CSS Variables for Fonts
   =========================== */
:root {
    --font-quicksand: Quicksand, ui-sans-serif, system-ui, sans-serif;
    --font-fredoka: Fredoka, ui-sans-serif, system-ui, sans-serif;
    --font-hand: Caveat, ui-serif, Georgia, serif;
    --font-body: var(--font-quicksand);
    --font-heading: var(--font-fredoka);
    --font-decorative: var(--font-hand);
}