/*
Theme Name:   Trim Works Child
Theme URI:    https://trimworksmt.com
Description:  Hello Elementor Child Theme for Trim Works Construction
Author:       MT Head Media
Author URI:   https://mtheadmedia.com
Template:     hello-elementor
Version:      1.0.0
Text Domain:  trimworks-child
*/

/* =============================================================
   TRIM WORKS — DESIGN SYSTEM
   Color palette, spacing, buttons, section patterns,
   component styles. Fonts are managed in Elementor settings.
   ============================================================= */

/* -------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --tw-orange:        #F5A623;
  --tw-orange-dark:   #E09415;
  --tw-orange-light:  #FBBF59;
  --tw-black:         #1A1A1A;
  --tw-charcoal:      #2C2C2C;
  --tw-gray-dark:     #4A4A4A;
  --tw-gray-mid:      #6B6B6B;
  --tw-gray-light:    #F2F2F2;
  --tw-white:         #FFFFFF;

  /* Spacing */
  --tw-section-pad-v: 80px;
  --tw-section-pad-h: 40px;
  --tw-card-gap:      24px;
  --tw-border-radius: 4px;

  /* Transitions */
  --tw-transition:    all 0.25s ease;
}


/* -------------------------------------------------------------
   2. GLOBAL RESETS & BASE
   ------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--tw-white);
  color: var(--tw-black);
}

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

a {
  color: var(--tw-orange);
  text-decoration: none;
  transition: var(--tw-transition);
}

a:hover {
  color: var(--tw-orange-dark);
  text-decoration: none;
}


/* -------------------------------------------------------------
   3. TYPOGRAPHY HELPERS
   (Font families set in Elementor > Site Settings > Typography)
   ------------------------------------------------------------- */

/* Section heading style — uppercase, tight tracking */
.tw-section-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tw-black);
}

/* Accent word — orange highlight within a heading */
.tw-accent {
  color: var(--tw-orange);
}

/* Overline label — small caps above a section title */
.tw-overline {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--tw-orange);
  margin-bottom: 8px;
}

/* Stat number style */
.tw-stat-number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--tw-white);
  line-height: 1;
}

.tw-stat-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tw-white);
  opacity: 0.9;
}


/* -------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------- */

/* Primary — orange fill */
.elementor-button.tw-btn-primary,
.tw-btn-primary,
a.tw-btn-primary {
  background-color: var(--tw-orange) !important;
  color: var(--tw-white) !important;
  border: 2px solid var(--tw-orange) !important;
  border-radius: var(--tw-border-radius) !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  transition: var(--tw-transition) !important;
}

.elementor-button.tw-btn-primary:hover,
.tw-btn-primary:hover,
a.tw-btn-primary:hover {
  background-color: var(--tw-orange-dark) !important;
  border-color: var(--tw-orange-dark) !important;
}

/* Secondary — outline style */
.elementor-button.tw-btn-secondary,
.tw-btn-secondary,
a.tw-btn-secondary {
  background-color: transparent !important;
  color: var(--tw-orange) !important;
  border: 2px solid var(--tw-orange) !important;
  border-radius: var(--tw-border-radius) !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  transition: var(--tw-transition) !important;
}

.elementor-button.tw-btn-secondary:hover,
.tw-btn-secondary:hover,
a.tw-btn-secondary:hover {
  background-color: var(--tw-orange) !important;
  color: var(--tw-white) !important;
}

/* Ghost — white outline for use on dark/image backgrounds */
.elementor-button.tw-btn-ghost,
.tw-btn-ghost,
a.tw-btn-ghost {
  background-color: transparent !important;
  color: var(--tw-white) !important;
  border: 2px solid var(--tw-white) !important;
  border-radius: var(--tw-border-radius) !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  transition: var(--tw-transition) !important;
}

.elementor-button.tw-btn-ghost:hover,
.tw-btn-ghost:hover,
a.tw-btn-ghost:hover {
  background-color: var(--tw-orange) !important;
  border-color: var(--tw-orange) !important;
}

/* Text link with arrow */
.tw-link-arrow {
  color: var(--tw-orange);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--tw-transition);
}

.tw-link-arrow::after {
  content: '→';
  transition: var(--tw-transition);
}

.tw-link-arrow:hover {
  color: var(--tw-orange-dark);
}

.tw-link-arrow:hover::after {
  transform: translateX(4px);
}


/* -------------------------------------------------------------
   5. SECTION BACKGROUNDS & PATTERNS
   ------------------------------------------------------------- */

/* Default white section */
.tw-section-white {
  background-color: var(--tw-white);
}

/* Light gray section */
.tw-section-gray {
  background-color: var(--tw-gray-light);
}

/* Orange section (stats bar, FAQ background) */
.tw-section-orange {
  background-color: var(--tw-orange);
}

.tw-section-orange h1,
.tw-section-orange h2,
.tw-section-orange h3,
.tw-section-orange h4,
.tw-section-orange p,
.tw-section-orange span,
.tw-section-orange li {
  color: var(--tw-white);
}

/* Dark/charcoal section */
.tw-section-dark {
  background-color: var(--tw-charcoal);
}

.tw-section-dark h1,
.tw-section-dark h2,
.tw-section-dark h3,
.tw-section-dark h4,
.tw-section-dark p,
.tw-section-dark span {
  color: var(--tw-white);
}

/* Hero — full-width image with dark overlay */
.tw-section-hero {
  position: relative;
  min-height: 600px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tw-section-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  z-index: 1;
}

.tw-section-hero > * {
  position: relative;
  z-index: 2;
}

.tw-section-hero h1,
.tw-section-hero h2,
.tw-section-hero p {
  color: var(--tw-white);
}

/* CTA Banner — image background, dark overlay, centered text */
.tw-section-cta-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 100px var(--tw-section-pad-h);
  text-align: center;
}

.tw-section-cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  z-index: 1;
}

.tw-section-cta-banner > * {
  position: relative;
  z-index: 2;
}

.tw-section-cta-banner h2,
.tw-section-cta-banner p {
  color: var(--tw-white);
}


/* -------------------------------------------------------------
   6. SERVICE CARDS
   ------------------------------------------------------------- */
.tw-service-card {
  background: var(--tw-white);
  border-radius: var(--tw-border-radius);
  overflow: hidden;
  transition: var(--tw-transition);
}

.tw-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.tw-service-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.tw-service-card .tw-card-body {
  padding: 20px;
}

.tw-service-card .tw-card-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tw-black);
  margin-bottom: 8px;
}

.tw-service-card .tw-card-desc {
  font-size: 0.875rem;
  color: var(--tw-gray-mid);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Elementor Image Box overrides to match card style */
.elementor-widget-image-box.tw-service-card .elementor-image-box-img img {
  height: 200px;
  object-fit: cover;
  border-radius: 0;
}

.elementor-widget-image-box.tw-service-card .elementor-image-box-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  font-weight: 700;
}

.elementor-widget-image-box.tw-service-card .elementor-image-box-description {
  font-size: 0.875rem;
  color: var(--tw-gray-mid);
  line-height: 1.6;
}


/* -------------------------------------------------------------
   7. STATS BAR
   ------------------------------------------------------------- */
.tw-stats-bar {
  background-color: var(--tw-orange);
  padding: 60px var(--tw-section-pad-h);
}

.tw-stats-bar .tw-stat-item {
  text-align: center;
  padding: 20px;
}

.tw-stats-bar .tw-stat-number {
  display: block;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--tw-white);
  line-height: 1;
  margin-bottom: 8px;
}

.tw-stats-bar .tw-stat-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tw-white);
  opacity: 0.9;
}

/* Counter widget on orange background */
.tw-section-orange .elementor-counter-number-wrapper {
  color: var(--tw-white);
  font-weight: 800;
}

.tw-section-orange .elementor-counter-title {
  color: var(--tw-white);
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
}


/* -------------------------------------------------------------
   8. FAQ / ACCORDION
   ------------------------------------------------------------- */

/* Accordion on orange background */
.tw-section-orange .elementor-accordion-item {
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
}

.tw-section-orange .elementor-tab-title {
  background: transparent !important;
  color: var(--tw-white) !important;
  font-weight: 600;
  padding: 18px 0;
}

.tw-section-orange .elementor-tab-title .elementor-accordion-icon {
  color: var(--tw-white) !important;
}

.tw-section-orange .elementor-tab-content {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border: none !important;
  padding: 0 0 18px 0;
  font-size: 0.9rem;
  line-height: 1.7;
}

/* Standard accordion (white/gray background) */
.tw-accordion .elementor-accordion-item {
  border: none;
  border-bottom: 1px solid #E0E0E0;
  margin-bottom: 0;
}

.tw-accordion .elementor-tab-title {
  background: transparent !important;
  padding: 18px 0;
  font-weight: 600;
  color: var(--tw-black) !important;
}

.tw-accordion .elementor-tab-title.elementor-active {
  color: var(--tw-orange) !important;
}

.tw-accordion .elementor-tab-content {
  background: transparent !important;
  border: none !important;
  padding: 0 0 18px 0;
  color: var(--tw-gray-mid) !important;
  font-size: 0.9rem;
  line-height: 1.7;
}


/* -------------------------------------------------------------
   9. PROMISE / ICON BOX SECTION
   ------------------------------------------------------------- */
.elementor-widget-icon-box.tw-promise-item .elementor-icon {
  color: var(--tw-orange) !important;
}

.elementor-widget-icon-box.tw-promise-item .elementor-icon-box-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
}

.elementor-widget-icon-box.tw-promise-item .elementor-icon-box-description {
  font-size: 0.8rem;
  color: var(--tw-gray-mid);
  line-height: 1.6;
}


/* -------------------------------------------------------------
   10. PORTFOLIO / GALLERY GRID
   ------------------------------------------------------------- */
.tw-portfolio-grid .elementor-gallery-item__image {
  transition: var(--tw-transition);
}

.tw-portfolio-grid .elementor-gallery-item:hover .elementor-gallery-item__image {
  transform: scale(1.04);
}

.tw-portfolio-grid .elementor-gallery-item {
  overflow: hidden;
}

/* Image grid with consistent aspect ratio */
.tw-portfolio-grid .elementor-gallery-item__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}


/* -------------------------------------------------------------
   11. LOGO / PARTNER BAR
   ------------------------------------------------------------- */
.tw-logo-bar {
  background-color: var(--tw-white);
  padding: 32px var(--tw-section-pad-h);
  border-top: 1px solid #E8E8E8;
  border-bottom: 1px solid #E8E8E8;
}

.tw-logo-bar img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: var(--tw-transition);
}

.tw-logo-bar img:hover {
  filter: grayscale(0%);
  opacity: 1;
}


/* -------------------------------------------------------------
   12. HEADER & NAVIGATION
   ------------------------------------------------------------- */

/* Sticky header base */
.site-header,
#site-header,
.elementor-location-header {
  background-color: var(--tw-black) !important;
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Nav links */
.main-navigation a,
.elementor-nav-menu a,
.elementor-location-header .elementor-nav-menu a {
  color: var(--tw-white) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  font-weight: 600;
  transition: var(--tw-transition);
}

.main-navigation a:hover,
.elementor-nav-menu a:hover,
.elementor-location-header .elementor-nav-menu a:hover {
  color: var(--tw-orange) !important;
}

/* Active nav link */
.main-navigation .current-menu-item > a,
.elementor-nav-menu .current-menu-item > a {
  color: var(--tw-orange) !important;
}

/* CTA button in nav */
.tw-nav-cta .elementor-button,
.tw-nav-cta a {
  background-color: var(--tw-orange) !important;
  color: var(--tw-white) !important;
  border-radius: var(--tw-border-radius) !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 0.8rem !important;
  transition: var(--tw-transition) !important;
}

.tw-nav-cta .elementor-button:hover,
.tw-nav-cta a:hover {
  background-color: var(--tw-orange-dark) !important;
}

/* Mobile hamburger */
.elementor-nav-menu--toggle .elementor-menu-toggle {
  color: var(--tw-white) !important;
}


/* -------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------- */
.site-footer,
#colophon,
.elementor-location-footer {
  background-color: var(--tw-charcoal) !important;
  color: var(--tw-white);
  padding: 60px 40px 30px;
}

.site-footer h3,
.site-footer h4,
.elementor-location-footer h3,
.elementor-location-footer h4 {
  color: var(--tw-orange);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.site-footer a,
.elementor-location-footer a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  line-height: 2;
  transition: var(--tw-transition);
}

.site-footer a:hover,
.elementor-location-footer a:hover {
  color: var(--tw-orange);
}

.site-footer p,
.elementor-location-footer p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* Footer bottom bar */
.tw-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
  margin-top: 40px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}


/* -------------------------------------------------------------
   14. GLOBAL ELEMENTOR SECTION PADDING DEFAULTS
   ------------------------------------------------------------- */
.elementor-section {
  padding-top: var(--tw-section-pad-v);
  padding-bottom: var(--tw-section-pad-v);
}

/* Tighter padding for logo bar and thin divider sections */
.elementor-section.tw-compact {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* Zero padding utility */
.elementor-section.tw-no-pad {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* -------------------------------------------------------------
   15. DIVIDERS & SEPARATORS
   ------------------------------------------------------------- */
.tw-divider-orange {
  width: 60px;
  height: 4px;
  background-color: var(--tw-orange);
  margin: 0 auto 24px;
}

.tw-divider-orange.tw-left {
  margin-left: 0;
}


/* -------------------------------------------------------------
   16. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --tw-section-pad-v: 60px;
    --tw-section-pad-h: 24px;
  }
}

@media (max-width: 767px) {
  :root {
    --tw-section-pad-v: 48px;
    --tw-section-pad-h: 16px;
  }

  .tw-section-hero {
    min-height: 440px;
  }

  .tw-stats-bar .tw-stat-number {
    font-size: 2.5rem;
  }

  .tw-logo-bar img {
    max-height: 36px;
  }
}