/* ============================================================
   WICKED KOLORS INC — WordPress Custom CSS v2
   
   Brand:    Premium decorative concrete installation company
   Markets:  Residential · Commercial · Industrial
   Home:     Hopkinsville, KY · Primary market: Clarksville, TN
   Reach:    Nationwide
   
   HOW TO INSTALL:
   1. Log into your WordPress staging site dashboard
   2. Go to Appearance → Customize → Additional CSS
   3. Paste this entire file
   4. Click Publish to preview
   
   REVISIONS:
   Share what looks off after previewing and we'll update.
   ============================================================ */


/* ============================================================
   1. GOOGLE FONTS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@300;400;600;700&display=swap');


/* ============================================================
   2. BRAND VARIABLES
   Edit these to change colors site-wide instantly.
   ============================================================ */

:root {
  --wk-black:         #0b0b0b;
  --wk-charcoal:      #161616;
  --wk-steel:         #202020;
  --wk-steel-2:       #2a2a2a;
  --wk-orange:        #ff007f;
  --wk-orange-hover:  #ff3d9a;
  --wk-orange-glow:   rgba(255, 0, 127, 0.12);
  --wk-orange-border: rgba(255, 0, 127, 0.25);
  --wk-white:         #f0ede8;
  --wk-body-text:     #b8b5b0;
  --wk-muted:         #888480;
  --wk-border:        rgba(255, 255, 255, 0.06);
  --font-display:     'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:        'Barlow', sans-serif;
}


/* ============================================================
   3. BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--wk-white);
  background-color: var(--wk-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

img { max-width: 100%; height: auto; display: block; }


/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 3px;
  line-height: 1.0;
  color: var(--wk-white);
  margin-bottom: 0.5em;
}

h1, .elementor-heading-title.elementor-size-xxl  { font-size: clamp(52px, 8vw, 92px); }
h2, .elementor-heading-title.elementor-size-xl   { font-size: clamp(36px, 5vw, 58px); }
h3, .elementor-heading-title.elementor-size-large { font-size: clamp(24px, 3vw, 38px); }
h4, .elementor-heading-title.elementor-size-medium { font-size: 24px; }

p,
.elementor-text-editor p,
.elementor-widget-text-editor p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--wk-body-text);
  font-weight: 300;
  margin-bottom: 1em;
}

a { color: var(--wk-orange); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--wk-orange-hover); }
strong, b { font-weight: 600; color: var(--wk-white); }

/* Eyebrow label — add CSS class "wk-eyebrow" to text widget */
.wk-eyebrow,
.wk-eyebrow p {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--wk-orange) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}

/* Orange heading accent — add CSS class "wk-accent" */
.wk-accent .elementor-heading-title,
.wk-accent { color: var(--wk-orange) !important; }

/* Muted subline — add CSS class "wk-subline" */
.wk-subline, .wk-subline p {
  font-size: 13px !important;
  color: var(--wk-muted) !important;
  letter-spacing: 1px;
}


/* ============================================================
   5. NAVIGATION
   ============================================================ */

.site-header, header, .elementor-location-header, #masthead {
  background-color: rgba(11, 11, 11, 0.98) !important;
  border-bottom: 1px solid var(--wk-orange-border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}

.elementor-nav-menu .elementor-item,
.elementor-nav-menu a,
nav a, .nav-menu a {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--wk-muted) !important;
  font-weight: 400 !important;
  transition: color 0.2s !important;
  padding: 8px 12px !important;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu a:hover,
nav a:hover { color: var(--wk-orange) !important; }

.elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--wk-orange) !important;
  border-bottom: 2px solid var(--wk-orange) !important;
}

.site-title a, .custom-logo-link, .elementor-site-title {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  letter-spacing: 4px !important;
  color: var(--wk-white) !important;
  text-decoration: none !important;
}

/* Nav CTA — add class "wk-nav-cta" to button widget in header */
.wk-nav-cta .elementor-button {
  background-color: var(--wk-orange) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 0 !important;
  border: none !important;
}
.wk-nav-cta .elementor-button:hover { background-color: var(--wk-orange-hover) !important; }

.elementor-menu-toggle i,
.elementor-menu-toggle svg { color: var(--wk-white) !important; fill: var(--wk-white) !important; }


/* ============================================================
   6. BUTTONS
   ============================================================ */

.elementor-button {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}

/* Primary filled — default Elementor button style */
.elementor-button.elementor-button-primary,
.elementor-widget-button .elementor-button {
  background-color: var(--wk-orange) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 14px 36px !important;
}
.elementor-button.elementor-button-primary:hover,
.elementor-widget-button .elementor-button:hover {
  background-color: var(--wk-orange-hover) !important;
}

/* Outline secondary — add class "wk-btn-outline" to button widget */
.wk-btn-outline .elementor-button {
  background-color: transparent !important;
  color: var(--wk-white) !important;
  border: 1px solid rgba(240, 237, 232, 0.25) !important;
  padding: 14px 36px !important;
}
.wk-btn-outline .elementor-button:hover {
  border-color: var(--wk-orange) !important;
  color: var(--wk-orange) !important;
}


/* ============================================================
   7. SECTIONS & BACKGROUNDS
   ============================================================ */

.elementor-section, .e-con, .elementor-top-section {
  background-color: var(--wk-black);
}

/* Section color variants — add class to section in Elementor */
.wk-section-dark  { background-color: var(--wk-charcoal) !important; }
.wk-section-steel { background-color: var(--wk-steel) !important; }
.wk-section-steel2 { background-color: var(--wk-steel-2) !important; }
.wk-section-orange { background-color: var(--wk-orange) !important; }

.wk-section-orange h1,
.wk-section-orange h2,
.wk-section-orange h3,
.wk-section-orange p,
.wk-section-orange .elementor-heading-title { color: #ffffff !important; }

/* Orange left border accent — add class "wk-border-left" */
.wk-border-left {
  border-left: 3px solid var(--wk-orange) !important;
  padding-left: 20px !important;
}


/* ============================================================
   8. SYSTEM / SERVICE CARDS
   Add class "wk-system-card" to inner section or column
   ============================================================ */

.wk-system-card,
.wk-system-card .elementor-column-wrap {
  background-color: var(--wk-steel-2) !important;
  border-left: 2px solid transparent !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.wk-system-card:hover,
.wk-system-card:hover .elementor-column-wrap {
  background-color: #303030 !important;
  border-left-color: var(--wk-orange) !important;
}
.wk-system-card .elementor-heading-title {
  font-size: 20px !important;
  letter-spacing: 1px !important;
  margin-bottom: 8px !important;
}
.wk-system-card p {
  font-size: 12px !important;
  color: var(--wk-muted) !important;
  line-height: 1.65 !important;
}

/* Portal CTA card variant — add class "wk-system-card-cta" */
.wk-system-card-cta,
.wk-system-card-cta .elementor-column-wrap {
  background-color: var(--wk-orange-glow) !important;
  border-left: 2px solid var(--wk-orange) !important;
}
.wk-system-card-cta .elementor-heading-title {
  color: var(--wk-orange) !important;
}


/* ============================================================
   9. MARKET CARDS (Residential / Commercial / Industrial)
   Add class "wk-market-card" to each column
   ============================================================ */

.wk-market-card,
.wk-market-card .elementor-column-wrap {
  background-color: var(--wk-steel) !important;
  text-align: center;
  padding: 32px 24px !important;
  border-bottom: 2px solid transparent !important;
  transition: border-color 0.2s !important;
}
.wk-market-card:hover { border-bottom-color: var(--wk-orange) !important; }
.wk-market-card .elementor-heading-title {
  font-size: 26px !important;
  letter-spacing: 2px !important;
}
.wk-market-card p { font-size: 12px !important; color: var(--wk-muted) !important; }


/* ============================================================
   10. PROCESS STEPS
   Add class "wk-process-step" to each step column
   ============================================================ */

.wk-process-step,
.wk-process-step .elementor-column-wrap {
  background-color: var(--wk-steel-2) !important;
  padding: 24px 18px !important;
  border-left: 2px solid var(--wk-orange) !important;
}

.wk-step-number .elementor-heading-title {
  font-size: 52px !important;
  color: rgba(255, 0, 127, 0.15) !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
}

.wk-process-step h4,
.wk-process-step .elementor-heading-title {
  font-size: 16px !important;
  letter-spacing: 1px !important;
  color: var(--wk-white) !important;
}
.wk-process-step p {
  font-size: 12px !important;
  color: var(--wk-muted) !important;
  line-height: 1.65 !important;
}


/* ============================================================
   11. CREDENTIALS BAR
   Add class "wk-credential" to each stat column
   ============================================================ */

.wk-credential,
.wk-credential .elementor-column-wrap {
  background-color: var(--wk-charcoal) !important;
  text-align: center !important;
  padding: 28px 16px !important;
  border-right: 1px solid var(--wk-border) !important;
}
.wk-credential:last-child { border-right: none !important; }

.wk-cred-number .elementor-heading-title {
  font-size: 44px !important;
  letter-spacing: 2px !important;
  color: var(--wk-orange) !important;
  line-height: 1 !important;
}
.wk-cred-label, .wk-cred-label p {
  font-size: 9px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--wk-muted) !important;
  line-height: 1.6 !important;
  margin-top: 6px !important;
}


/* ============================================================
   12. TESTIMONIALS
   Add class "wk-testimonial" to each quote column
   ============================================================ */

.wk-testimonial,
.wk-testimonial .elementor-column-wrap {
  background-color: var(--wk-steel-2) !important;
  border-left: 2px solid var(--wk-orange) !important;
  padding: 28px 24px !important;
}
.wk-testimonial p, .wk-testimonial blockquote {
  font-size: 13px !important;
  font-style: italic !important;
  color: var(--wk-body-text) !important;
  line-height: 1.85 !important;
  margin-bottom: 16px !important;
}
.wk-testimonial-author, .wk-testimonial-author p {
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--wk-orange) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  margin-bottom: 0 !important;
}


/* ============================================================
   13. WPFORMS
   ============================================================ */

.wpforms-container {
  background-color: var(--wk-steel-2) !important;
  padding: 32px !important;
  border: 1px solid var(--wk-border) !important;
}
.wpforms-title {
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  letter-spacing: 2px !important;
  color: var(--wk-white) !important;
  margin-bottom: 4px !important;
}
.wpforms-description {
  font-size: 12px !important;
  color: var(--wk-muted) !important;
  margin-bottom: 20px !important;
}
.wpforms-field-label {
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--wk-muted) !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="number"],
.wpforms-field input[type="url"],
.wpforms-field select,
.wpforms-field textarea {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--wk-white) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 11px 14px !important;
  border-radius: 0 !important;
  transition: border-color 0.2s, background-color 0.2s !important;
  width: 100% !important;
  -webkit-appearance: none !important;
}
.wpforms-field input:focus,
.wpforms-field select:focus,
.wpforms-field textarea:focus {
  border-color: var(--wk-orange) !important;
  outline: none !important;
  background-color: rgba(255, 0, 127, 0.04) !important;
}
.wpforms-field select option {
  background-color: var(--wk-steel-2) !important;
  color: var(--wk-white) !important;
}
.wpforms-field textarea { resize: vertical !important; min-height: 100px !important; }
.wpforms-submit,
.wpforms-submit-container button[type="submit"] {
  background-color: var(--wk-orange) !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background 0.2s !important;
  margin-top: 8px !important;
}
.wpforms-submit:hover { background-color: var(--wk-orange-hover) !important; }
.wpforms-field .wpforms-error {
  color: var(--wk-orange) !important;
  font-size: 11px !important;
  margin-top: 4px !important;
  font-style: italic !important;
}
.wpforms-confirmation-container-full {
  background-color: var(--wk-steel) !important;
  border-left: 3px solid var(--wk-orange) !important;
  color: var(--wk-white) !important;
  padding: 20px 24px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  border-radius: 0 !important;
}


/* ============================================================
   14. SIMPLY SCHEDULE APPOINTMENTS
   ============================================================ */

.ssa-booking-form, .ssa-booking-form-inner {
  background-color: var(--wk-steel-2) !important;
  border: 1px solid var(--wk-border) !important;
  font-family: var(--font-body) !important;
  border-radius: 0 !important;
}
.ssa-appointment-type-button,
.ssa-booking-form button {
  background-color: var(--wk-orange) !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  font-weight: 600 !important;
  transition: background 0.2s !important;
}
.ssa-booking-form button:hover { background-color: var(--wk-orange-hover) !important; }
.ssa-day--available:hover, .ssa-day--selected {
  background-color: var(--wk-orange) !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}
.ssa-calendar-header {
  font-family: var(--font-display) !important;
  letter-spacing: 2px !important;
  color: var(--wk-white) !important;
}


/* ============================================================
   15. GALLERY
   Add class "wk-gallery-item" to each image column
   ============================================================ */

.wk-gallery-item { position: relative; overflow: hidden; }
.wk-gallery-item img,
.wk-gallery-item .elementor-image img {
  transition: transform 0.45s ease !important;
  width: 100% !important;
  display: block !important;
}
.wk-gallery-item:hover img,
.wk-gallery-item:hover .elementor-image img { transform: scale(1.06) !important; }


/* ============================================================
   16. CONTACT CARD
   Add class "wk-contact-card" to contact column
   ============================================================ */

.wk-contact-card,
.wk-contact-card .elementor-column-wrap {
  background-color: var(--wk-steel) !important;
  border-left: 3px solid var(--wk-orange) !important;
  padding: 40px 32px !important;
}
.wk-contact-card h3,
.wk-contact-card .elementor-heading-title {
  font-size: 36px !important;
  letter-spacing: 3px !important;
  margin-bottom: 4px !important;
}
.wk-location-label, .wk-location-label p {
  font-size: 9px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--wk-orange) !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
}
.wk-contact-detail, .wk-contact-detail p {
  font-size: 13px !important;
  color: var(--wk-muted) !important;
  margin-bottom: 8px !important;
  line-height: 1.6 !important;
}


/* ============================================================
   17. FOOTER
   ============================================================ */

footer, .site-footer, .elementor-location-footer, #colophon {
  background-color: #060606 !important;
  border-top: 1px solid var(--wk-border) !important;
}
footer p, .site-footer p {
  font-size: 11px !important;
  color: rgba(136, 132, 128, 0.55) !important;
  letter-spacing: 1px !important;
  line-height: 1.8 !important;
}
footer a, .site-footer a {
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--wk-muted) !important;
  transition: color 0.2s !important;
}
footer a:hover, .site-footer a:hover { color: var(--wk-orange) !important; }
.wk-footer-logo .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  letter-spacing: 4px !important;
  color: var(--wk-muted) !important;
}


/* ============================================================
   18. DIVIDERS
   ============================================================ */

.elementor-divider-separator { border-color: var(--wk-border) !important; }
.wk-divider-orange .elementor-divider-separator {
  border-color: var(--wk-orange) !important;
  border-width: 2px !important;
}


/* ============================================================
   19. MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  h1, .elementor-heading-title.elementor-size-xxl {
    font-size: clamp(46px, 10vw, 72px) !important;
  }
}

@media (max-width: 767px) {
  h1, .elementor-heading-title.elementor-size-xxl {
    font-size: clamp(40px, 12vw, 58px) !important;
    letter-spacing: 2px !important;
  }
  h2, .elementor-heading-title.elementor-size-xl {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  .wk-credential {
    border-right: none !important;
    border-bottom: 1px solid var(--wk-border) !important;
  }
  .wpforms-container { padding: 20px !important; }
  .wk-contact-card,
  .wk-contact-card .elementor-column-wrap { padding: 28px 20px !important; }
}


/* ============================================================
   20. UTILITY CLASSES
   Add any of these to Elementor widgets via:
   Advanced tab → CSS Classes field
   ============================================================ */

.wk-text-orange  { color: var(--wk-orange) !important; }
.wk-text-muted   { color: var(--wk-muted) !important; }
.wk-text-white   { color: var(--wk-white) !important; }
.wk-text-body    { color: var(--wk-body-text) !important; }
.wk-bg-black     { background-color: var(--wk-black) !important; }
.wk-bg-charcoal  { background-color: var(--wk-charcoal) !important; }
.wk-bg-steel     { background-color: var(--wk-steel) !important; }
.wk-bg-steel2    { background-color: var(--wk-steel-2) !important; }
.wk-bg-orange    { background-color: var(--wk-orange) !important; }
.wk-no-radius    { border-radius: 0 !important; }
.wk-uppercase    { text-transform: uppercase !important; }
.wk-wide-spacing { letter-spacing: 3px !important; }
.wk-font-display { font-family: var(--font-display) !important; }
.wk-font-body    { font-family: var(--font-body) !important; }