/* ============================================
   Schlickmann Construction — Visual Identity Override
   Loaded after main.css to override HLD-inherited palette/fonts
   Source palette: Elementor kit ID=10 (live WP site)
   Heading font: Roc Grotesk (self-hosted, matching live WP)
   ============================================ */

@font-face {
    font-family: 'Roc Grotesk';
    src: url('/assets/fonts/Roc_Grotesk_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roc Grotesk';
    src: url('/assets/fonts/Roc_Grotesk_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Palette (Schlickmann brand) ─────────── */
    --color-primary:        #12243B;   /* Navy hero/headings */
    --color-primary-dark:   #0a1525;   /* Navy hover state */
    --color-primary-light:  #728CAC;   /* Steel blue (kit "Primário") */
    --color-secondary:      #6D8BB2;   /* Dusty blue (kit "Realce") */
    --color-secondary-dark: #5a7898;
    --color-accent:         #6D8BB2;
    --color-gold:           #B8924E;
    --color-gold-light:     #d6ad6e;
    --color-text:           #2d2d2d;
    --color-text-muted:     #636363;
    --color-bg:             #FFFFFF;
    --color-bg-alt:         #F9F9FB;
    --color-border:         #E7E7E7;

    /* ── Typography (matches live WP site) ──── */
    --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Roc Grotesk', 'Roboto', sans-serif;
}

/* Roc Grotesk on all headings */
h1, h2, h3, h4, h5, h6,
.section-h2, .section-title, .hero h1, .news-card-title,
.process-subhead, .process-step-title, .leader-card-name,
.stat-value, .stat-suffix {
    font-family: var(--font-heading) !important;
}

/* ─── EXACT WP MATCH — measured at 1440px viewport ─── */
/* All H2 default: 48px Roc Grotesk weight 600 line-height 1.0, color steel-blue #728CAC (the ACCENT line color) */
.section-h2,
h2 {
    font-size: 48px !important;
    font-weight: 600 !important;
    line-height: 48px !important;
    letter-spacing: normal !important;
    color: #728CAC !important;
}
/* First span = the prominent line. NAVY on light bg by default. */
.section-h2 > span:first-child {
    color: #12243B;
}
/* On DARK-bg sections, first span = WHITE */
.testimonials-section .section-h2 > span:first-child,
.cta-final-section .section-h2 > span:first-child,
.portfolio-section .section-h2 > span:first-child {
    color: #FFFFFF !important;
}
/* Services H2 is single-line, ALL WHITE on steel-blue bg */
.services-content .section-h2 { color: #FFFFFF !important; }
/* H2 special "Our Schedule Is / Filling Up Fast" — 64px */
.cta-final-section .section-h2 { font-size: 64px !important; line-height: 64px !important; }
.cta-final-section .section-h2--white { color: #728CAC !important; }   /* override: keep steel-blue base */

/* Service card title — 22px weight 600 */
.service-card-title {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* Logo — WP exact 53px height (was 60px) */
.header-logo img,
.header.scrolled .header-logo img {
    height: 53px !important;
    width: auto !important;
}

/* Hero text-shadow softer (WP doesn't have heavy shadow) */
.hero h1, .hero-subtitle { text-shadow: none !important; }

/* Remove HLD-inherited animated colorbar at top of header */
.header-colorbar {
    display: none !important;
}

/* ── Header: navy when over hero (top), white when scrolled past ── */
.header {
    background: var(--color-primary) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease !important;
}
.header.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px rgba(18, 36, 59, 0.08) !important;
}
.header.scrolled .nav-link,
.header.scrolled .nav-dropdown-toggle,
.header.scrolled .header-phone {
    color: var(--color-primary) !important;
}
.header.scrolled .nav-link:hover,
.header.scrolled .header-phone:hover {
    color: var(--color-secondary) !important;
}

/* Nav menu — UPPERCASE Roboto, 16px weight 400 (WP exact) */
.nav-link,
.nav-dropdown-toggle,
.mobile-nav-link,
.header-phone {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: normal !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}
.btn-header {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
    text-transform: none !important;  /* keep "Free Estimate" mixed case */
    letter-spacing: 0.01em !important;
}

/* ── Override hardcoded HLD greens left in CSS files ── */
.go-to-top                             { background: var(--color-primary) !important; box-shadow: 0 4px 15px rgba(18, 36, 59, 0.3) !important; }
.go-to-top:hover                       { background: var(--color-primary-dark) !important; box-shadow: 0 6px 20px rgba(18, 36, 59, 0.4) !important; }
.btn-primary                           { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important; box-shadow: 0 4px 20px rgba(18, 36, 59, 0.25) !important; color: #fff !important; }
.btn-primary:hover                     { box-shadow: 0 8px 30px rgba(18, 36, 59, 0.35) !important; }
.btn-header                            { background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark)) !important; box-shadow: 0 4px 15px rgba(109, 139, 178, 0.3) !important; }
.btn-header:hover                      { box-shadow: 0 6px 20px rgba(109, 139, 178, 0.4) !important; }

.header-colorbar                       { background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 33%, var(--color-bg) 33%, var(--color-bg) 66%, var(--color-secondary) 66%, var(--color-secondary) 100%) !important; background-size: 30px 100% !important; }
.contact-strip,
.cta-section                           { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important; }
.contact-strip .btn-primary,
.cta-section .btn-primary              { background: #fff !important; color: var(--color-primary) !important; }

.gallery-section                       { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important; }

.service-card-image,
.service-card-image-fallback           { background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary)) !important; }
.why-us-icon,
.benefit-icon-partner,
.final-cta-icon,
.partners-cta-icon                     { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important; box-shadow: 0 8px 25px rgba(18, 36, 59, 0.25) !important; }

.review-avatar,
.step-number                           { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important; box-shadow: 0 4px 15px rgba(18, 36, 59, 0.3) !important; }

.process-step::after                   { background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) !important; }

.section-label,
.service-card-link,
.intro-feature svg,
.nav-dropdown-item svg,
.service-features svg,
.benefit-icon-partner svg,
.faq-question:hover                    { color: var(--color-primary) !important; }

.section-star svg,
.review-stars                          { fill: var(--color-gold) !important; color: var(--color-gold) !important; }

.btn-outline                           { color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.btn-outline:hover                     { background: var(--color-primary) !important; color: #fff !important; }

/* Trust bar */
.trust-bar                             { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important; }
.trust-item svg                        { color: var(--color-secondary) !important; }

/* Header — when not scrolled, show navy text legible on light bg behind hero */
.nav-link                              { color: #fff !important; }
.nav-link::after                       { background: var(--color-secondary) !important; }
.nav-link:hover                        { color: var(--color-secondary) !important; }
.header-phone                          { color: #fff !important; }
.header-phone:hover                    { color: var(--color-secondary) !important; }
.header.scrolled .nav-link             { color: var(--color-text) !important; }
.header.scrolled .nav-link:hover       { color: var(--color-primary) !important; }
.header.scrolled .header-phone         { color: var(--color-text) !important; }

/* Footer — dark navy instead of dark green */
.footer                                { background: linear-gradient(180deg, #0d1828 0%, #060d18 100%) !important; }
.footer-tagline,
.footer-heading,
.footer-links .highlight-link,
.trust-badge svg,
.footer-contact-item .contact-icon svg,
.partner-type-card.featured .earning-value,
.partner-type-card.featured .partner-benefits-list li svg,
.footer-legal-links a:hover,
.footer-links a:hover                  { color: var(--color-secondary) !important; }
.footer-contact-item .contact-icon     { background: rgba(109, 139, 178, 0.18) !important; }
.social-links a:hover                  { background: var(--color-secondary) !important; color: #fff !important; }
.footer-cta-btn                        { background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark)) !important; color: #fff !important; box-shadow: 0 4px 15px rgba(109, 139, 178, 0.3) !important; }
.footer-cta-btn:hover                  { color: #fff !important; box-shadow: 0 6px 25px rgba(109, 139, 178, 0.45) !important; }

/* Footer wave — recolor */
.footer-wave .wave-back                { fill: #1a2c4a !important; }
.footer-wave .wave-mid                 { fill: #142340 !important; }
.footer-wave .wave-front               { fill: #0d1828 !important; }

/* Hero — replace christmas-light hero image with neutral dark gradient until F2b sets video */
.hero {
    background: linear-gradient(135deg, rgba(18, 36, 59, 0.85), rgba(10, 21, 37, 0.9)) center/cover !important;
}
.hero-stat-value                       { color: var(--color-secondary) !important; text-shadow: 0 2px 10px rgba(109, 139, 178, 0.4) !important; }
.hero-badge                            { background: rgba(109, 139, 178, 0.15) !important; border-color: rgba(109, 139, 178, 0.4) !important; color: var(--color-secondary) !important; }
.hero-badge svg                        { color: var(--color-secondary) !important; }

/* Mobile featured CTA */
.mobile-bottom-item.featured           { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important; box-shadow: 0 -4px 20px rgba(18, 36, 59, 0.3) !important; }
.mobile-bottom-item.featured:hover     { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)) !important; }
.mobile-bottom-item.call-btn:hover     { color: var(--color-primary) !important; }

/* Reviews stat color */
.reviews-stat .stat-value              { color: var(--color-primary) !important; }

/* Hide HLD-specific snowfall + christmas elements */
.snow-container,
.snowflake                              { display: none !important; }

/* "Final CTA" phone */
.final-cta-phone                        { color: var(--color-primary) !important; }
.final-cta-phone:hover                  { color: var(--color-primary-dark) !important; }
.contact-strip .btn-primary:hover,
.cta-section .btn-primary:hover         { background: var(--color-bg-alt) !important; color: var(--color-primary-dark) !important; }

/* ============================================
   Schlickmann — Home view-specific overrides
   ============================================ */

/* Hero with video background */
.hero.hero--video                       { position: relative; min-height: 100vh; padding-top: var(--header-height); overflow: hidden; }
.hero-video                             { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-video-overlay                     { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(18, 36, 59, 0.78), rgba(10, 21, 37, 0.70)); z-index: 1; }
.hero.hero--video .hero-content         { position: relative; z-index: 2; }
.hero.hero--video::before               { display: none; }
.hero h1 .hero-title-accent             { color: var(--color-secondary); display: inline-block; }

/* Counter suffix (300+, 99%, 5+) */
.hero-stat-value-suffix                 { display: inline-block; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; color: var(--color-secondary); text-shadow: 0 2px 10px rgba(109, 139, 178, 0.4); line-height: 1; vertical-align: top; }
@media (max-width: 768px) {
    .hero-stat-value-suffix             { font-size: 2rem; }
}

/* Service card — visible icon when there's no image */
.service-card-image-fallback            { position: relative; display: flex; align-items: center; justify-content: center; }
.service-card-icon-overlay              { color: rgba(255, 255, 255, 0.92); opacity: 0.85; transition: opacity 0.3s ease, transform 0.3s ease; }
.service-card:hover .service-card-icon-overlay { opacity: 1; transform: scale(1.05); }
.service-card-icon-overlay svg          { width: 56px; height: 56px; }

/* 4-column services grid */
.services-grid-4                        { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1100px) { .services-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px)  { .services-grid-4 { grid-template-columns: 1fr; } }

/* Hero CTA group + subtitle responsive */
.hero .btn-group                        { margin-top: 32px; gap: 14px; }
.hero-stats                             { flex-wrap: wrap; }

/* Animate-on-scroll: visible by default. JS adds .js-aos to <html> to enable hidden→animate behavior. */
.animate-on-scroll                      { opacity: 1; transform: none; }
html.js-aos .animate-on-scroll          { opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .6s; }
html.js-aos .animate-on-scroll.animated { opacity: 1; transform: translateY(0); }

@media print {
    .animate-on-scroll, html.js-aos .animate-on-scroll { opacity: 1 !important; transform: none !important; }
    .hero-video, .hero-video-overlay   { display: none !important; }
    .hero.hero--video                   { background: linear-gradient(135deg, #12243B, #0a1525) !important; }
}