/* ============================================
   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;
}
/* Tablet — slightly smaller for narrower columns */
@media (max-width: 992px) {
    .section-h2, h2 { font-size: 40px !important; line-height: 42px !important; }
}
/* Mobile — collapses cleanly without overflow */
@media (max-width: 600px) {
    .section-h2, h2 { font-size: 32px !important; line-height: 36px !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: WHITE bg always, gray text/logo, in normal flow (WP fidelity) ── */
.header {
    position: relative !important;
    background: #FFFFFF !important;
    height: 80px;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.header.scrolled {
    background: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(18, 36, 59, 0.06) !important;
}
/* Header container — max 1620px centered, generous side padding on smaller viewports */
.header > .container {
    max-width: 1620px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}
@media (max-width: 768px) {
    .header > .container { padding: 0 20px !important; }
}
.header-inner { gap: 24px; }
.header-nav   { gap: 18px !important; }
.header-cta   { margin-left: 12px !important; gap: 14px !important; }
/* Always show the navy/gray logo (logo.svg via .logo-alt class) */
.header .logo-default { display: none !important; }
.header .logo-alt     { display: block !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 text — gray always (WP fidelity) */
.nav-link,
.nav-dropdown-toggle,
.header-phone,
.header.scrolled .nav-link,
.header.scrolled .nav-dropdown-toggle,
.header.scrolled .header-phone         { color: #636363 !important; }
.nav-link:hover,
.nav-dropdown-toggle:hover,
.header-phone:hover,
.header.scrolled .nav-link:hover,
.header.scrolled .header-phone:hover   { color: var(--color-primary) !important; }
.nav-link::after                       { background: var(--color-secondary) !important; }
.mobile-menu-toggle span               { background: #636363 !important; }

/* ============================================
   Footer redesign — navigation + entity authority
   (replaces HLD-inherited footer with prefixed .site-footer-* classes)
   ============================================ */
.site-footer {
    background: linear-gradient(180deg, #0d1828 0%, #060d18 100%);
    color: rgba(255,255,255,0.75);
    font-family: 'Roboto', sans-serif;
    margin-top: 0;
}
.site-footer .container { max-width: 1500px; padding: 0 40px; box-sizing: border-box; }

/* Defensive resets — global h2/h3/h4 rules elsewhere in the codebase
   force 48px+ sizing; we re-base footer typography here. */
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer p,
.site-footer a,
.site-footer span,
.site-footer li {
    line-height: inherit;
    letter-spacing: normal;
}
.site-footer p { font-size: inherit; margin: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }

.site-footer-main { padding: 70px 0 50px; }
.site-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;     /* Brand wider; 3 nav cols equal */
    gap: 50px;
}

/* Brand column */
.site-footer-brand { display: flex; flex-direction: column; gap: 18px; }
.site-footer-logo img { height: 48px; width: auto; display: block; }
.site-footer-tagline {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.65);
    margin: 0;
    max-width: 380px;
}
.site-footer-social { display: flex; gap: 10px; margin-top: 4px; }
.site-footer-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.75);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.18s ease;
}
.site-footer-social a:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Heading shared — !important escapes global h2 { font-size: 48px !important } rule above */
.site-footer .site-footer-heading {
    font-family: var(--font-heading) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    margin: 0 0 20px !important;
}

/* Link list columns */
.site-footer-col { display: flex; flex-direction: column; }
.site-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.site-footer-links a {
    font-size: 0.91rem;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
}
.site-footer-links a:hover { color: #FFFFFF; }
.site-footer-link-all {
    color: var(--color-secondary) !important;
    font-weight: 600;
    margin-top: 4px;
}
.site-footer-link-all:hover { color: #FFFFFF !important; }

/* Verified profiles column */
.site-footer-profiles { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer-profiles a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
}
.site-footer-profiles a:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(109,139,178,0.45);
    transform: translateY(-1px);
}
.profile-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.profile-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.profile-text strong {
    font-size: 0.91rem;                          /* matches Services/Company link size */
    color: #FFFFFF;
    font-weight: 600;
    line-height: 1.25;
}
.profile-text span {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.35;
}

/* Service area band — full-bleed, generous spacing */
.site-footer-areas {
    padding: 26px 0;
    background: rgba(255,255,255,0.025);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-footer-areas-inner {
    width: 100%;
    max-width: none;
    padding: 0 60px;
    box-sizing: border-box;
}
.areas-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 22px;                              /* row × column — wide horizontal breathing room */
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
}
.areas-list li {
    position: relative;
    padding-right: 22px;                        /* space before the bullet separator */
}
.areas-list li:not(.areas-label):not(.areas-all-wrap):not(:last-child)::after {
    content: '·';
    position: absolute;
    right: 5px;                                 /* dot sits centered between the 22px gap+padding */
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.28);
    font-weight: 700;
}
.areas-list li:last-child,
.areas-list .areas-label,
.areas-list .areas-all-wrap { padding-right: 0; }

.areas-list .areas-label {
    color: var(--color-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 11px;
    margin-right: 4px;
}
.areas-list a {
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}
.areas-list a:hover { color: #FFFFFF; }
.areas-list .areas-all {
    color: var(--color-secondary);
    font-weight: 600;
    margin-left: 8px;                           /* slight detach from city list */
}
.areas-list .areas-all:hover { color: #FFFFFF; }

@media (max-width: 768px) {
    .site-footer-areas-inner { padding: 0 24px; }
    .areas-list { gap: 6px 16px; justify-content: flex-start; }
    .areas-list li { padding-right: 16px; }
    .areas-list li:not(.areas-label):not(.areas-all-wrap):not(:last-child)::after { right: 3px; }
}

/* Bottom bar */
.site-footer-bottom { padding: 22px 0; }
.site-footer-bottom-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; flex-wrap: wrap;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
}
.site-footer-legal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.site-footer-legal a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}
.site-footer-legal a:hover { color: #FFFFFF; }
.site-footer-legal .legal-sep { color: rgba(255,255,255,0.25); }
.site-footer-license {
    color: rgba(255,255,255,0.85);
    font-weight: 600;
}

.site-footer-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-footer-copy { color: rgba(255,255,255,0.55); }
.site-footer-poweredby a {
    display: inline-flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.2s ease;
}
.site-footer-poweredby a:hover { color: #FFFFFF; }
.poweredby-text { border-bottom: 1px dotted currentColor; }
.poweredby-logo {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px;
    background: linear-gradient(135deg, #00E5FF 0%, #4FD1FF 100%);
    border-radius: 5px;
    color: #001218;
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 0 12px rgba(0,229,255,0.35);
}

/* Hide legacy HLD footer pieces if rendered alongside */
.footer-wave,
.footer-locations-band,
.footer-trust { display: none !important; }

@media (max-width: 1100px) {
    .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 700px) {
    .site-footer .container { padding: 0 24px; }
    .site-footer-main { padding: 50px 0 30px; }
    .site-footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .site-footer-bottom-row { flex-direction: column; align-items: flex-start; }
    .site-footer-areas p { text-align: left; }
}

/* ============================================
   Legacy footer overrides (still needed where old classes referenced)
   ============================================ */
/* 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 — neutral dark gradient fallback (NOT applied to .hero--image which uses its own bg) */
.hero:not(.hero--image):not(.hero--video) {
    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; }
}