/*
Theme Name: Hello Elementor Child
Description: Master Base for Local Business Sites with Fluid Typography. (CSS-First Edition)
Version: 2.0.0
*/

/* ═══════════════════════════════════════════════════
   1. FLUID DESIGN TOKENS (THE MATH)
═══════════════════════════════════════════════════ */

:root {
    /* --- Heading Clamps (Fluid Scaling) --- */
    --clamp-h1: clamp(2.5rem, 5vw + 1rem, 4.5rem);
    --clamp-h2: clamp(2rem, 3.5vw + 1rem, 3.25rem);
    --clamp-h3: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
    --clamp-h4: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
    --clamp-h5: clamp(0.875rem, 0.5vw + 0.8rem, 1rem);
    --clamp-h6: clamp(0.75rem, 0.2vw + 0.7rem, 0.875rem);

    /* --- Body & Link Clamps --- */
    --clamp-body: clamp(1rem, 0.5vw + 0.9rem, 1.125rem); 
    
    /* --- Fluid Spacing (For Section Gaps) --- */
    --clamp-space-sm: clamp(1.5rem, 2vw + 1rem, 3rem);
    --clamp-space-md: clamp(3rem, 5vw + 2rem, 6rem);
    --clamp-space-lg: clamp(6rem, 8vw + 3rem, 10rem);

    /* --- Utility --- */
    --transition-smooth: 0.3s ease-in-out;
}

/* ═══════════════════════════════════════════════════
   2. TYPOGRAPHY (THE CSS-FIRST OVERRIDES)
   This completely replaces Elementor's Global Typography!
═══════════════════════════════════════════════════ */

h1 { font-family: 'Fraunces', serif; font-size: var(--clamp-h1); font-weight: 900; line-height: 1.1em; letter-spacing: -0.02em; color: #000000; }
h2 { font-family: 'Montserrat', sans-serif; font-size: var(--clamp-h2); font-weight: 700; line-height: 1.2em; letter-spacing: -0.01em; color: #333333; }
h3 { font-family: 'Montserrat', sans-serif; font-size: var(--clamp-h3); font-weight: 600; line-height: 1.3em; letter-spacing: 0em; color: #333333; }
h4 { font-family: 'Montserrat', sans-serif; font-size: var(--clamp-body); font-weight: 700; line-height: 1.4em; letter-spacing: 0.02em; color: #333333; }
h5 { font-family: 'Montserrat', sans-serif; font-size: var(--clamp-h5); font-weight: 800; line-height: 1.2em; letter-spacing: 0.15em; text-transform: uppercase; color: #333333; }
h6 { font-family: 'Inter', sans-serif; font-size: var(--clamp-h6); font-weight: 600; line-height: 1.2em; letter-spacing: 0.1em; text-transform: uppercase; color: #1A1A1A; }
p, body { font-family: 'Inter', sans-serif; font-size: var(--clamp-body); font-weight: 400; line-height: 1.6em; letter-spacing: 0em; color: #1A1A1A; }

/* ═══════════════════════════════════════════════════
   3. LINKS & INTERACTIVE STYLES
═══════════════════════════════════════════════════ */

a {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--clamp-body);
    font-weight: 600;
    line-height: 1.6em;
    letter-spacing: 0.02em;
    color: #0055FF;
    transition: var(--transition-smooth);
    text-decoration-skip-ink: auto;
}

a:hover {
    text-underline-offset: 4px;
}

::selection {
    background-color: rgba(0, 85, 255, 0.2);
    color: #000000;
}

/* ═══════════════════════════════════════════════════
   4. ELEMENTOR UTILITIES 
═══════════════════════════════════════════════════ */

.elementor-field:focus {
    outline: 2px solid #0055FF !important;
    outline-offset: 2px;
}

img {
    -webkit-user-drag: none;
    user-select: none;