/*
Theme Name: Tecvelop Divi Child
Theme URI: https://tecvelop.com
Description: Child theme of Divi for Tecvelop — implements brand color palette, header behavior, dark/light switcher and brand imagery.
Author: Tecvelop
Template: Divi
Version: 1.1.0
*/

:root{
  --tv-orange:#FF9B32;
  --tv-deep-orange:#E86626;
  --tv-red-accent:#B14B34;
  --tv-dark:#292C32;
  --tv-dark-2:#303E35;
  --tv-light-bg:#F7F6F4;
}

/* Header transparent -> sticky shrink */
#main-header{
  background:transparent !important;
  transition:background .4s ease, padding .3s ease, box-shadow .3s ease;
}
.et-fixed-header#main-header{
  background:rgba(41,44,50,.95) !important;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}

/* Logo: on transparent header keep full color; when sticky/dark, force white version via filter */
#logo, .et_pb_logo_image_alt img, .logo_container img{ height:34px !important; width:auto !important; }
.et-fixed-header #logo, .et-fixed-header .et_pb_logo_image_alt img{ filter:brightness(0) invert(1); }

/* Buttons / CTAs */
.et_pb_button, .et_pb_promo_button, button[type="submit"]{
  background:var(--tv-dark) !important;
  border:none !important;
  color:#fff !important;
  border-radius:8px !important;
  transition:all .3s ease !important;
}
.et_pb_button:hover, .et_pb_promo_button:hover, button[type="submit"]:hover{
  background:var(--tv-red-accent) !important;
}

/* Hero section — brand gradient + generated tech background image */
.tv-hero{
  background-image:
    linear-gradient(135deg, rgba(255,155,50,.55) 0%, rgba(232,102,38,.55) 45%, rgba(177,75,52,.65) 100%),
    url('https://galaxy-prod.tlcdn.com/gen/user_365kknkdQA5POstjfUXyCr8WNkG/5549ffd0-443c-4932-ba91-bfadb28c84c5.png') !important;
  background-size:cover !important;
  background-position:center !important;
  color:#fff !important;
}

/* Contact gradient section */
.tv-contact{
  background:linear-gradient(135deg,var(--tv-deep-orange),var(--tv-red-accent)) !important;
  color:#fff !important;
}

/* About illustration image module */
.tv-about-img img{
  border-radius:14px;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.15));
}

/* Service cards */
.tv-service-card{
  background:#fff;
  border-radius:14px;
  padding:32px 28px;
  transition:.3s;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.05);
}
.tv-service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 40px rgba(0,0,0,.1);
  border-color:var(--tv-orange);
}

/* Checklist */
.tv-checklist li{
  position:relative;
  padding-left:30px;
  list-style:none;
  margin-bottom:10px;
  font-weight:500;
}
.tv-checklist li::before{
  content:"\2713";
  position:absolute;left:0;top:0;color:#fff;background:var(--tv-orange);
  width:20px;height:20px;border-radius:50%;font-size:.7rem;
  display:flex;align-items:center;justify-content:center;
}

/* Footer */
.tv-footer{
  background:var(--tv-dark-2) !important;
  color:#cfd3ce !important;
}
.tv-footer a{color:rgba(255,255,255,.75) !important;}
.tv-footer a:hover{color:var(--tv-orange) !important;}
.tv-footer img{height:28px;filter:brightness(0) invert(1);margin-bottom:10px;}

/* Dark mode (toggled via body.tv-dark, controlled by theme-toggle.js) */
body.tv-dark{
  background:var(--tv-dark) !important;
  color:#f2f2f0 !important;
}
/* Dark-mode background/text overrides for sections and cards are applied via
   JavaScript (see functions.php) using element.style.setProperty(..., 'important'),
   because Divi's own generated per-section CSS uses ID selectors, which beat a
   plain class selector here even with !important. */

/* Theme switch button (place a Code module with #tv-theme-switch in header) */
#tv-theme-switch{
  cursor:pointer;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;transition:transform .4s;
}
#tv-theme-switch:hover{transform:rotate(180deg);}


/* ===== Theme Builder custom header (fixed, transparent -> shrinks on scroll) ===== */
.tv-tb-header{
  position:fixed !important;
  top:0; left:0; width:100%;
  z-index:9999;
  background:transparent !important;
  transition:background .4s ease, padding .3s ease, box-shadow .3s ease;
}
.tv-tb-header.tv-shrink{
  background:rgba(41,44,50,.95) !important;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  padding-top:8px !important;
  padding-bottom:8px !important;
}
.tv-tb-header-row{ display:flex !important; align-items:center !important; }
.tv-tb-logo img{ height:34px; width:auto; }
.tv-tb-header.tv-shrink .tv-tb-logo img{ filter:brightness(0) invert(1); }

/* Menu module inside our custom header */
.tv-tb-menu .et_pb_menu__menu li > a{
  color:#20221F !important; font-weight:500 !important;
}
.tv-tb-header.tv-shrink .tv-tb-menu .et_pb_menu__menu li > a{ color:#fff !important; }
.tv-tb-menu .et_pb_menu__menu li > a:hover{ color:var(--tv-orange) !important; }

/* Since header is fixed/overlaid, push the very first section down so it isn't hidden behind it
   (skip this rule for the hero, which is designed to sit under a transparent header) */
body:not(.home) .tv-tb-header ~ #main-content .et_pb_section:first-child,
.page-template-default .tv-tb-header ~ #main-content .et_pb_section:first-child{
  padding-top:110px;
}

/* Dark/light toggle — ALWAYS exposed as a floating button, on desktop AND
   mobile/tablet. Icon shows the CURRENTLY ACTIVE mode (moon = dark is on,
   sun = light is on). A soft pulsing glow ring keeps it feeling alive. */
#tv-toggle{
  position:fixed; bottom:22px; right:22px; z-index:10000;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:#20221F; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  transition:transform .35s ease, color .3s, background .3s;
}
#tv-toggle .tv-toggle-icon{ font-size:18px; line-height:1; position:relative; z-index:1; }
#tv-toggle::before{
  content:"";
  position:absolute; inset:-6px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,155,50,.55), transparent 70%);
  z-index:0;
  animation:tv-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes tv-glow-pulse{
  0%, 100%{ opacity:.35; transform:scale(.9); }
  50%{ opacity:.85; transform:scale(1.15); }
}
#tv-toggle:hover{ transform:rotate(180deg); }
body.tv-dark #tv-toggle{ color:#fff; background:#303E35; }
@media(max-width:600px){
  #tv-toggle{ width:40px; height:40px; bottom:16px; right:16px; }
  #tv-toggle .tv-toggle-icon{ font-size:16px; }
}


/* ===== Mobile fixes for the Theme Builder header ===== */
@media(max-width:980px){
  .tv-tb-header{ padding:10px 0 !important; }
  .tv-tb-header-row{
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
  }
  .tv-tb-logo img{ height:26px; }
  /* "Let's Talk" CTA stays exposed on mobile/tablet too — only the
     day/night toggle relocates into the hamburger menu, not this button. */
  .tv-tb-menu{ text-align:right !important; }
}

/* Prevent the hero heading from breaking awkwardly on small screens */
@media(max-width:480px){
  .tv-hero h1, section.tv-hero h1{ font-size:1.9rem !important; line-height:1.25 !important; }
}