/* ============================================================
   Teck's Window Tinting — GLOBAL STYLESHEET (single source of truth)
   Lives in WP core Custom CSS (Customizer → Additional CSS), deployed via
   wp_update_custom_css_post(). Semantic .tecks-* classes are attached by the
   Elementor builds in build_pages.py / build_theme.py; colors reference the
   Elementor kit's CSS variables so the palette stays tokenized.
   Values marked [measured] were taken from computed styles of the original
   Duda site at a 1704px viewport — do not re-eyeball them.
   ============================================================ */

/* ---- Bands ---- */
.tecks-bar-primary{background-color:var(--e-global-color-primary,#007DB0);}
.tecks-bar-primary p,.tecks-bar-primary a,
.tecks-bar-primary h1.elementor-heading-title,
.tecks-bar-primary h2.elementor-heading-title,
.tecks-bar-primary h3.elementor-heading-title,
.tecks-bar-primary h4.elementor-heading-title{color:#fff;}
/* no hover color change on the bar's Email Us / Call Us links */
.tecks-bar-primary a:hover,.tecks-bar-primary a:focus{color:#fff;}
.tecks-bg-white{background-color:#fff;}
.tecks-bg-cloud{background-color:var(--e-global-color-cloud,#F6F6F6);}

/* ---- Sections over photos/dark grounds ---- */
.tecks-on-dark p,.tecks-on-dark a,
.tecks-on-dark h1.elementor-heading-title,
.tecks-on-dark h2.elementor-heading-title,
.tecks-on-dark .tecks-eyebrow .elementor-heading-title{color:#fff;}

/* ---- Mixed-weight headings: base 300 (kit), emphasis 500 [measured] ---- */
h1.elementor-heading-title b,h2.elementor-heading-title b{font-weight:500;}

/* ---- Header brand bar [measured: 76px tall on original] ---- */
.tecks-bar-primary .elementor-widget{margin-bottom:0;}
.tecks-bar-primary .e-con,.tecks-nav .e-con{--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;}
.tecks-bar-primary p{margin:0;line-height:1.45;}
.tecks-wordmark .elementor-heading-title{font-family:'Barlow',"Barlow Fallback",sans-serif;font-size:30px;font-weight:400;letter-spacing:0;text-transform:uppercase;}
.tecks-bar-primary .elementor-widget-image{width:60px;flex-shrink:0;}
.tecks-bar-primary .elementor-widget-image img{width:60px;height:auto;}
.tecks-bar-primary .elementor-widget-text-editor p{font-size:16px;}
.tecks-bar-primary .elementor-widget-text-editor p strong{font-size:16px;}

/* ---- Header nav [measured: 15/600, ls .45px, 30px gaps, underline hugs text] ----
   The hover state MUST include a.highlighted: Elementor's menu JS adds that
   class on mouseover and Pro ships `a.highlighted{padding:13px 20px}` at one
   specificity point above the plain item selector -- without covering it the
   padding jumps on hover and the text visibly shifts (the "menu bounce"). */
.tecks-nav{--padding-top:1px;--padding-bottom:1px;}
.tecks-nav .elementor-nav-menu--main .elementor-item,
.tecks-nav .elementor-nav-menu--main .elementor-nav-menu a.highlighted,
.tecks-nav .elementor-nav-menu--main .elementor-nav-menu a:hover,
.tecks-nav .elementor-nav-menu--main .elementor-nav-menu a:focus{padding:10px 0;letter-spacing:0.45px;}
.tecks-nav .elementor-nav-menu--main .elementor-nav-menu li:not(:last-child) .elementor-item{margin-right:30px;}

/* ---- Homepage hero [measured: eyebrow 20/700, title 60 base-200/b-500, sub 24/700] ---- */
body.home .tecks-hero{min-height:740px;--justify-content:center;justify-content:center;}
body.home .tecks-hero>.e-con-inner{justify-content:center;min-height:inherit;}
.tecks-hero-eyebrow .elementor-heading-title{font-family:'DM Sans',"DM Sans Fallback",sans-serif;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:0;}
.tecks-hero-title .elementor-heading-title{font-size:60px;font-weight:200;}
.tecks-hero-title .elementor-heading-title b{font-weight:500;}
.tecks-hero-sub p{font-weight:700;text-transform:uppercase;font-size:24px;}
.tecks-outline-btn .elementor-button{background-color:transparent;border:1px solid #fff;color:#fff;padding:14px 28px;font-size:15px;}
.tecks-outline-btn .elementor-button:hover{background-color:rgba(255,255,255,.12);color:#fff;}

/* ---- Interior page-title hero ---- */
.tecks-page-title .elementor-heading-title{text-align:center;font-size:40px;}
.tecks-page-title .elementor-heading-title:after{content:'';display:block;width:44px;height:2px;background:#fff;margin:14px auto 0;}

/* ---- Eyebrow label (light sections) ---- */
.tecks-eyebrow .elementor-heading-title{font-family:'DM Sans',"DM Sans Fallback",sans-serif;font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--e-global-color-primary,#007DB0);}

/* ---- CTA gradient band [measured: boxed 1200px row, 135deg
   rgba(0,125,176,.6) -> rgba(56,57,61,.5), 184px tall] ---- */
.tecks-cta-band{background:linear-gradient(135deg,rgba(0,125,176,.6) 0%,rgba(56,57,61,.5) 100%);}
.tecks-cta-sub p{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}

/* ---- Intro shadow card ---- */
.tecks-shadow-card{background:#fff;border-radius:6px;box-shadow:0 18px 40px rgba(20,28,48,.14);}
/* [measured] estimate form cards are a centered 537px column (Elementor
   ignores a container max_width setting, so the cap lives here; scoped to
   cloud sections so the contacts form column keeps its own width) */
.tecks-bg-cloud .tecks-shadow-card{max-width:537px;margin-left:auto;margin-right:auto;}

/* ---- Interior intro rows [measured]: same combined image+card unit as the
   home About row but SQUARE corners (interior pages have no radius) ---- */
.tecks-intro-row .tecks-about-img img{border-radius:0;}
.tecks-intro-row .tecks-about-card{border-radius:0;}

/* ---- Feature columns (Protection / Savings) ---- */
.tecks-feature-icon{margin-bottom:10px;text-align:left;}
.elementor-widget-icon.tecks-feature-icon .elementor-icon{color:var(--e-global-color-primary,#007DB0);font-size:40px;}
.elementor-widget-icon.tecks-feature-icon .elementor-icon i{color:var(--e-global-color-primary,#007DB0);}
.elementor-widget-icon.tecks-feature-icon .elementor-icon svg{fill:var(--e-global-color-primary,#007DB0);}
.tecks-feature-head .elementor-heading-title{font-family:'Barlow',"Barlow Fallback",sans-serif;font-weight:300;font-size:32px;}
.tecks-accent-bar{width:44px;height:3px;background:var(--e-global-color-primary,#007DB0);margin:12px 0 16px;}

/* ---- Review cards [measured: white, shadow 0 0 11px #f2f2f2, square,
   left-aligned] ---- */
.tecks-card{background-color:#fff;border-radius:0;box-shadow:0 0 11px #f2f2f2;}
/* review cards open with the original's blue quotation glyph (literal char:
   a CSS \-escape was mangled in a previous deploy and rendered as text) */
.tecks-card h4.elementor-heading-title::before{content:'❝';display:block;color:var(--e-global-color-primary,#007DB0);font-size:30px;line-height:1;margin-bottom:8px;}
/* body copy matches the original's 1.8 line-height (16px/28.8); the header
   bar keeps its compact 1.45 (re-asserted here because it precedes this
   rule at equal specificity) */
.elementor-widget-text-editor p{line-height:1.8;}
.tecks-bar-primary .elementor-widget-text-editor p{line-height:1.45;}

/* ---- Home testimonial [reference screenshot]: BLUE panel, gold stars,
   white left-aligned copy, technician overlapping up out of the band ---- */
.tecks-quote-panel{background:var(--e-global-color-primary,#007DB0);padding:28px 32px;}
.tecks-quote-panel p{color:#fff;text-align:left;}
.tecks-quote-panel .tecks-stars p{color:#FFC400;font-size:14px;letter-spacing:2px;}
.tecks-quote-panel .tecks-quote p{font-size:15px;}
/* Review-page stars: gold, like the original's mini review rows */
.tecks-stars p{font-size:16px;letter-spacing:2px;color:#FFC400;}
.tecks-quote p{font-size:19px;}

/* ---- Checklist: small dark checks like the live site ---- */
.tecks-checklist .elementor-icon-list-icon i{color:#000;font-size:12px;}

/* ---- Payment icons ---- */
.tecks-payicons .elementor-widget-image{width:46px;flex-shrink:0;}
.tecks-payicons .elementor-widget-image img{width:46px;height:auto;}

/* ---- Forms: one shared style ---- */
.tecks-form form{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto;width:100%;}
.tecks-form label{display:flex;flex-direction:column;gap:6px;font-family:'DM Sans',"DM Sans Fallback",sans-serif;font-weight:400;font-size:16px;}
.tecks-form input,.tecks-form select,.tecks-form textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:5px;font-family:'DM Sans',"DM Sans Fallback",sans-serif;font-size:15px;font-weight:400;}
/* Elementor Pro form widgets share the same look */
.tecks-form .elementor-field-group{margin-bottom:0;padding-left:0;padding-right:0;}
.tecks-form .elementor-field-label{font-family:'DM Sans',"DM Sans Fallback",sans-serif;font-size:16px;font-weight:400;}
.tecks-form .elementor-form-fields-wrapper{row-gap:14px;}
.tecks-form button{background:var(--e-global-color-primary,#007DB0);color:#fff;border:none;border-radius:5px;padding:12px 24px;font-weight:700;font-family:'DM Sans',"DM Sans Fallback",sans-serif;cursor:pointer;text-transform:uppercase;align-self:flex-start;}
.tecks-form button:hover{background:#005F86;}

/* ---- Home About: photo + card form ONE combined unit (flush, rounded,
   shared offset shadow), per client reference screenshot ---- */
.tecks-about-row.e-con{--flex-gap:0px;gap:0;}
.tecks-about-row>.e-con{--padding-left:0;--padding-right:0;}
.tecks-about-img{width:100%;height:100%;}
.tecks-about-img>div,.tecks-about-img .elementor-widget-container{height:100%;}
.tecks-about-img img{width:100%;height:100%;object-fit:cover;border-radius:10px 0 0 10px;display:block;}
.tecks-about-card{background:#F6F6F6;padding:60px 40px;box-shadow:16px 16px 32px rgba(0,0,0,.1);border-radius:0 10px 10px 0;height:100%;justify-content:center;}

/* ---- Blue uppercase section subhead [measured: 18.72/700 uppercase primary] ---- */
.tecks-sub-blue .elementor-heading-title{font-family:'DM Sans',"DM Sans Fallback",sans-serif;font-size:19px;font-weight:700;text-transform:uppercase;color:var(--e-global-color-primary,#007DB0);}

/* ---- Solid-blue home CTA band sub-line (white via tecks-bar-primary) ---- */
.tecks-strip-sub p{font-size:19px;font-weight:700;text-transform:uppercase;}

/* ---- Contact info: blue 24px business name, blue small heads ---- */
.tecks-info-name .elementor-heading-title{font-family:'DM Sans',"DM Sans Fallback",sans-serif;font-size:24px;font-weight:700;color:var(--e-global-color-primary,#007DB0);}
.tecks-blue-h3 .elementor-heading-title{color:var(--e-global-color-primary,#007DB0);}

/* ---- Services photo slider: blue arrows, ROUNDED equal-height slides
   (client reference: rounded corners, uniform crop) ---- */
.tecks-svc-slider .elementor-swiper-button{color:var(--e-global-color-primary,#007DB0);font-size:28px;}
.tecks-svc-slider .swiper-slide img{border-radius:10px;width:100%;height:410px;object-fit:cover;}

/* ---- Gallery [measured: single row of 288x288 square crops, no radius].
   aspect-ratio keeps them square when the column squeezes the width ---- */
.tecks-gallery-sq img{width:100%;max-width:288px;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:0;display:block;cursor:pointer;}

/* ---- Divider parallax band below About [client screenshot: ~500px tall
   at desktop]. Plain div inside an HTML widget -- every Elementor container
   background route for this band fails to compute (engine-reproducible), a
   plain element does not. */
/* background-image itself is inline on the div -- the ONE documented
   exception: stylesheet-delivered background-image on this element computes
   to none in every engine tested while sibling properties apply. */
.tecks-divider-inner{width:100%;min-height:500px;background-position:center center;background-size:cover;}
@media(min-width:1025px){.tecks-divider-inner{background-attachment:fixed;}}
@media(max-width:767px){.tecks-divider-inner{min-height:260px;}}
/* the widget wrapper must span the row */
.elementor-widget:has(> .elementor-widget-container > .tecks-divider-inner){width:100%;}

/* ---- Testimonial technician [reference screenshot]: large, natural aspect,
   overlapping upward out of the grey band ---- */
.tecks-quote-col{align-self:center;}
.tecks-man-img{margin-top:-150px;position:relative;z-index:2;}
.tecks-man-img img{width:440px;height:auto;}

/* ---- Contact map embed (original uses an OSM map above the info column) ---- */
.tecks-map iframe{width:100%;height:210px;border:0;display:block;}
/* Areas We Serve [measured]: 450px map left + white card right (500x450,
   shadow 0 4px 20px rgba(20,20,43,.05)) as one flush unit */
.tecks-map-lg{width:100%;height:100%;margin-bottom:0;}
.elementor-widget.tecks-map-lg{margin-block-end:0;}
/* the original's map tiles are grey Mapbox; grayscale the OSM embed to match */
.tecks-map-lg iframe{width:100%;height:450px;border:0;display:block;filter:grayscale(1) brightness(.82) contrast(1.02);}
.tecks-areas-card{background:#fff;box-shadow:0 4px 20px rgba(20,20,43,.05);padding:40px;justify-content:center;height:100%;}

/* ---- Touch targets: WCAG 44px minimum on touch viewports ---- */
@media(max-width:1024px){
  .elementor-button{min-height:44px;}
  a.elementor-social-icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;}
  /* Hamburger dropdown: Pro's own open-state rule (max-height:var(--menu-height);
     transform:scaleY(1)) matches but never computes on this install -- same
     engine anomaly as the divider band. Drive the open/close states from the
     toggle's active class deterministically. */
  .tecks-nav{position:relative;}
  /* the widget must NOT be the containing block or the dropdown clips to
     the 112px toggle column */
  .tecks-nav .elementor-widget-nav-menu{position:static;}
  .tecks-nav .elementor-menu-toggle+.elementor-nav-menu--dropdown{position:absolute;top:100%;left:0;right:0;width:auto;z-index:99;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.12);margin-top:0;}
  .tecks-nav .elementor-nav-menu--dropdown a{background:#fff;color:#000;}
  .tecks-nav .elementor-nav-menu--dropdown a.elementor-item-active,
  .tecks-nav .elementor-nav-menu--dropdown a:hover{background:#fff;color:#007DB0;}
  .tecks-nav .elementor-menu-toggle.elementor-active+.elementor-nav-menu--dropdown{max-height:80vh !important;transform:scaleY(1) !important;overflow:auto !important;}
  .tecks-nav .elementor-menu-toggle:not(.elementor-active)+.elementor-nav-menu--dropdown{max-height:0 !important;transform:scaleY(0) !important;overflow:hidden !important;}
  .tecks-nav .elementor-nav-menu--dropdown .elementor-item{padding:12px 20px;}
}

/* ---- Mobile ---- */
@media(max-width:767px){
  /* Header: Elementor flips containers to column on mobile, which stacked
     the brand bar ~620px tall with mixed alignments. Restore compact
     centered rows (adaptation of the original's single-row tablet bar). */
  .tecks-brand-row.e-con{--flex-direction:column;flex-direction:column;--flex-gap:10px;gap:10px;--justify-content:center;justify-content:center;--align-items:center;align-items:center;}
  .tecks-brand-id.e-con{--flex-direction:row;flex-direction:row;--justify-content:center;justify-content:center;--align-items:center;align-items:center;width:auto;}
  .tecks-brand-info.e-con{--flex-direction:row;flex-direction:row;--flex-gap:24px;gap:24px;--justify-content:center;justify-content:center;width:auto;}
  .tecks-brand-info>.e-con{--align-items:center;align-items:center;width:auto;}
  .tecks-bar-primary .e-con{--align-items:center;--flex-justify-content:center;}
  .tecks-bar-primary p{text-align:center;}
  .tecks-bar-primary .elementor-widget-image{width:44px;}
  .tecks-bar-primary .elementor-widget-image img{width:44px;}
  .tecks-wordmark .elementor-heading-title{font-size:20px;text-align:center;}
  .tecks-nav-row.e-con{--flex-direction:row;flex-direction:row;--flex-wrap:nowrap;flex-wrap:nowrap;--justify-content:space-between;justify-content:space-between;--align-items:center;align-items:center;}
  .tecks-nav-row>.e-con-inner{flex-wrap:nowrap;}
  /* social icons LEFT, hamburger RIGHT (client request) */
  .tecks-nav-row .elementor-widget-nav-menu{width:auto;flex-shrink:1;min-width:0;order:2;}
  .tecks-nav-row .elementor-widget-social-icons{width:auto;flex-shrink:0;order:1;}
  .tecks-page-title .elementor-heading-title{font-size:30px;}
  .tecks-hero-title .elementor-heading-title{font-size:38px;}
  .tecks-hero-sub p{font-size:17px;}
  .tecks-hero-eyebrow .elementor-heading-title{font-size:15px;}
  body.home .tecks-hero{min-height:480px;}
}