/* ============================================================
   JANNUZZIO GROUP — GLOBAL CSS
   assets/css/global.css
   Brand tokens, typography, buttons, utilities
   All Elementor sections can reference these variables.
============================================================ */

/* ── BRAND TOKENS ── */
:root {
    --flash:    #F4CF35;
    --obsidian: #111111;
    --milk:     #FDF7F2;
    --slate:    #F4EEE9;
    --footer:   #0A0A0A;
    --mid:      #1A1A1A;

    /* Elementor-compatible aliases */
    --e-global-color-jannuzzio_flash_yellow: #F4CF35;
    --e-global-color-jannuzzio_obsidian:     #111111;
    --e-global-color-jannuzzio_milk:         #FDF7F2;
    --e-global-color-jannuzzio_slate:        #F4EEE9;

    /* Typography scale */
    --font-display:  'Montserrat', sans-serif;
    --font-label:    'Barlow Condensed', sans-serif;
    --font-body:     'DM Sans', sans-serif;

    /* Spacing */
    --section-pad-v:  clamp(60px, 7vw, 100px);
    --section-pad-h:  clamp(32px, 6vw, 120px);
    --container-max:  1440px;

    /* Nav */
    --nav-height: 68px;

    /* Radius */
    --radius-btn: 20px 0 20px 20px;
    --radius-card: 0;
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; font-size: 16px; }
body {
    background: var(--milk);
    font-family: var(--font-body);
    color: var(--obsidian);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1.0;
}

/* Heading scale */
h1 { font-size: clamp(40px, 6.5vw, 110px); }
h2 { font-size: clamp(28px, 4vw, 64px); }
h3 { font-size: clamp(20px, 2vw, 32px); }
h4 { font-size: clamp(15px, 1.4vw, 22px); }

p {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.2vw, 19px);
    font-weight: 300;
    line-height: 1.8;
}

/* ── UTILITY CLASSES ── */

/* Container */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--section-pad-h);
}

/* Section padding */
.section-pad {
    padding: var(--section-pad-v) var(--section-pad-h);
}

/* Eyebrow label */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-label);
    font-size: clamp(11px, 0.9vw, 15px);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--flash);
}
.eyebrow-line {
    width: 7px;
    height: 7px;
    background: var(--flash);
    flex-shrink: 0;
    transform: rotate(45deg);
}
.eyebrow.dark { color: var(--obsidian); }
.eyebrow.dark .eyebrow-line { background: var(--obsidian); }
.eyebrow.light { color: var(--milk); }
.eyebrow.light .eyebrow-line { background: var(--milk); }

/* ── BUTTONS ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-label);
    font-weight: 800;
    font-size: clamp(13px, 1vw, 16px);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: clamp(13px, 1.2vw, 18px) clamp(26px, 2.2vw, 40px);
    border-radius: var(--radius-btn);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    text-decoration: none;
}

.btn-flash {
    background: var(--flash);
    color: var(--obsidian);
    border-color: var(--flash);
}
.btn-flash:hover {
    background: #e8c228;
    border-color: #e8c228;
    transform: translateY(-1px);
}

.btn-obsidian {
    background: var(--obsidian);
    color: var(--milk);
    border-color: var(--obsidian);
}
.btn-obsidian:hover {
    background: #2a2a2a;
    border-color: #2a2a2a;
    transform: translateY(-1px);
}

.btn-outline-dark {
    background: transparent;
    color: var(--obsidian);
    border-color: var(--obsidian);
}
.btn-outline-dark:hover {
    background: var(--obsidian);
    color: var(--milk);
}

.btn-outline-light {
    background: transparent;
    color: var(--milk);
    border-color: rgba(253,247,242,0.5);
}
.btn-outline-light:hover {
    border-color: var(--flash);
    color: var(--flash);
}

/* ── FADE-UP ANIMATION ── */
.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for groups */
.fade-up:nth-child(1) { transition-delay: 0.00s; }
.fade-up:nth-child(2) { transition-delay: 0.08s; }
.fade-up:nth-child(3) { transition-delay: 0.16s; }
.fade-up:nth-child(4) { transition-delay: 0.24s; }
.fade-up:nth-child(5) { transition-delay: 0.32s; }
.fade-up:nth-child(6) { transition-delay: 0.40s; }

/* ── GRAVITY FORMS BASE STYLES ── */
.gform_wrapper .gform_body .gform_fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.gform_wrapper .gfield_label {
    font-family: var(--font-label);
    font-size: clamp(10px, 0.8vw, 12px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 6px;
    display: block;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(17,17,17,0.15);
    border-radius: 3px;
    font-family: var(--font-body);
    font-size: clamp(14px, 1.1vw, 16px);
    background: var(--milk);
    color: var(--obsidian);
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
    border-color: var(--flash);
    box-shadow: 0 0 0 3px rgba(244,207,53,0.12);
}
.gform_wrapper textarea { resize: vertical; min-height: 100px; }
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
    margin-top: 8px;
}
.gform_wrapper .gform_button,
.gform_wrapper .btn-flash {
    width: 100%;
    height: 50px;
    background: var(--flash);
    border: none;
    cursor: pointer;
    font-family: var(--font-label);
    font-weight: 900;
    font-size: clamp(13px, 1vw, 15px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--obsidian);
    border-radius: var(--radius-btn);
    transition: background 0.2s, transform 0.15s;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper .btn-flash:hover {
    background: #e8c228;
    transform: translateY(-1px);
}
.gform_wrapper .validation_error {
    background: #fff0f0;
    border: 1px solid #ffcccc;
    border-radius: 3px;
    padding: 12px 16px;
    font-size: 14px;
    color: #cc0000;
    margin-bottom: 16px;
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
    border-color: #cc0000;
}
.gform_wrapper .validation_message {
    font-size: 12px;
    color: #cc0000;
    margin-top: 4px;
}

/* ── ELEMENTOR OVERRIDES ── */
/* Ensure Elementor sections respect our brand colors */
.elementor-section.brand-obsidian { background-color: var(--obsidian) !important; }
.elementor-section.brand-flash    { background-color: var(--flash) !important; }
.elementor-section.brand-slate    { background-color: var(--slate) !important; }
.elementor-section.brand-milk     { background-color: var(--milk) !important; }
.elementor-section.brand-footer   { background-color: var(--footer) !important; }

/* Text color helpers for Elementor */
.text-milk     { color: var(--milk) !important; }
.text-flash    { color: var(--flash) !important; }
.text-obsidian { color: var(--obsidian) !important; }
.text-muted    { color: rgba(253,247,242,0.55) !important; }

/* Heading font overrides for Elementor headings widget */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.elementor-widget-heading .elementor-heading-title.font-label {
    font-family: var(--font-label);
    letter-spacing: 0.1em;
}

/* ── ACCESSIBILITY ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
:focus-visible {
    outline: 2px solid var(--flash);
    outline-offset: 3px;
}

/* ── PRINT ── */
@media print {
    nav, footer, .fab-call, .quote-tab, .chatbot { display: none !important; }
    body { background: white; color: black; }
}