/*
 Theme Name:   ELS Divi Child
 Theme URI:    https://www.emergencylightingsolutions.co.za/
 Description:  Child theme for Divi. Styling, a one-click homepage layout, a WhatsApp button and WooCommerce prompts that lead shop customers to a free home assessment. Built by Tribe 9.
 Author:       Tribe 9
 Template:     Divi
 Version:      1.0.0
 Text Domain:  els-divi-child
*/

/* ---------- Design tokens ---------- */
:root{
  --els-ink:#16263D; --els-ink-soft:#33455E; --els-sun:#F4B41A; --els-sun-hover:#FFC53A;
  --els-panel:#2B5DA8; --els-bg:#F6F8FA; --els-line:#D9E0E8; --els-muted:#56657A;
}

/* ---------- Type ---------- */
body, body #page-container, body .et_pb_module, body input, body textarea, body select, body button{
  font-family:"Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
body #page-container h1, body #page-container h2, body #page-container h3,
body #page-container h4, body .et_pb_module_header{
  font-family:"Archivo", system-ui, Arial, sans-serif;
  font-variation-settings:"wdth" 118; font-stretch:118%;
  line-height:1.1; letter-spacing:-.01em; color:inherit; padding-bottom:.35em;
}
body #page-container h1{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:800}
body #page-container h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:780}
body #page-container h3{font-size:1.2rem;font-weight:720}
body{color:var(--els-ink);background:var(--els-bg)}
.els-lede{font-size:1.12em;color:var(--els-muted)}
.els-ph{color:#C98A00;font-style:italic}

/* ---------- Divi default header ---------- */
#main-header{box-shadow:none;border-bottom:1px solid var(--els-line)}
#top-menu li a{font-weight:600}
#top-menu li.els-menu-cta > a{background:var(--els-sun);color:var(--els-ink)!important;padding:11px 18px!important;border-radius:8px}
#top-header{background:var(--els-ink)!important}

/* ---------- Buttons (HTML links inside Text modules) ---------- */
a.els-btn{display:inline-block;font-weight:700;text-decoration:none;border-radius:8px;padding:14px 22px;margin:0 10px 10px 0;line-height:1.2}
a.els-btn-sun{background:var(--els-sun);color:var(--els-ink)!important}
a.els-btn-sun:hover{background:var(--els-sun-hover)}
a.els-btn-line{color:inherit!important;box-shadow:inset 0 0 0 2px currentColor}
body .et_pb_button{border-radius:8px}

/* ---------- Hero ---------- */
.et_pb_section.els-hero{background:var(--els-ink);color:#EEF3F8;padding:0}
.els-hero .et_pb_row{padding:64px 0 0}
.els-hero .et_pb_text, .els-hero .et_pb_text p{color:#C3D0DE;font-size:1.1em}
.els-hero h1{color:#fff!important}
.els-hero .et_pb_column:last-child{align-self:flex-end;margin-bottom:0}
.els-hero .et_pb_row{display:flex;flex-wrap:wrap;align-items:center}
.els-trust{list-style:none!important;padding:8px 0 56px!important;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.9em}
.els-trust li::before{content:"\2713";color:var(--els-sun);font-weight:800;margin-right:6px}
.els-hero svg{display:block;width:100%;height:auto}
@keyframes els-glow{from{opacity:0}to{opacity:1}}
.els-lit{animation:els-glow 1.6s ease-out .6s both}
@media (prefers-reduced-motion:reduce){.els-lit{animation:none}}
@media (max-width:980px){.els-hero .et_pb_row{padding-top:40px}.els-trust{padding-bottom:16px!important}}

/* ---------- Needs ---------- */
.els-need{border-bottom:1px solid var(--els-line);padding:22px 0}
.els-need h3 a{text-decoration:none;color:var(--els-ink)}
.els-need h3 a:hover{text-decoration:underline;text-decoration-color:var(--els-sun);text-decoration-thickness:3px;text-underline-offset:5px}
.els-need p{color:var(--els-muted)}
.els-need .els-go{font-weight:700;font-size:.92em}
.els-need .els-icon{float:left;width:52px;height:52px;border-radius:50%;background:rgba(244,180,26,.22);display:grid;place-items:center;margin-right:16px}
.els-need .els-body{overflow:hidden}

/* ---------- Install steps ---------- */
.et_pb_section.els-install{background:#fff;border-top:1px solid var(--els-line);border-bottom:1px solid var(--els-line)}
.els-steps{counter-reset:els-step}
.els-step{counter-increment:els-step}
.els-step::before{content:counter(els-step);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--els-ink);color:#fff;font-weight:800;margin-bottom:16px}
.els-step p{color:var(--els-muted)}
.els-compliance{border-left:5px solid var(--els-sun);background:var(--els-bg);padding:20px 24px;border-radius:0 8px 8px 0}

/* ---------- Recent installs ---------- */
.els-job{background:#fff;border:1px solid var(--els-line);border-radius:10px;overflow:hidden}
.els-job .els-pic{aspect-ratio:4/3;background:var(--els-ink);display:grid;place-items:center;color:#AFC0D2;font-size:.9em;text-align:center;padding:12px}
.els-job .els-info{padding:16px 18px}
.els-job .els-info p{color:var(--els-muted)}

/* ---------- Shop ---------- */
.et_pb_section.els-shop{background:#fff;border-top:1px solid var(--els-line);border-bottom:1px solid var(--els-line)}
.els-shop .woocommerce ul.products li.product{background:#fff;border:1px solid var(--els-line);border-radius:10px;padding:14px!important}
.els-shop .woocommerce ul.products li.product .price{color:var(--els-ink)!important;font-weight:800}
.els-bigger{background:var(--els-ink);color:#C3D0DE;border-radius:12px;padding:26px 30px}
.els-bigger h3{color:#fff!important}

/* ---------- FAQ toggles ---------- */
.els-faq .et_pb_toggle{border:0;border-bottom:1px solid var(--els-line);background:transparent!important;padding:18px 0}
.els-faq .et_pb_toggle_title{font-weight:650}
.els-review-slot{border:2px dashed var(--els-line);border-radius:12px;padding:28px;color:var(--els-muted)}

/* ---------- Quote form ---------- */
.et_pb_section.els-quote{background:#fff;border-top:1px solid var(--els-line)}
.els-quote .et_pb_contact_form input, .els-quote .et_pb_contact_form textarea, .els-quote .et_pb_contact_form select{
  background:#fff!important;border:1px solid var(--els-line)!important;border-radius:8px;color:var(--els-ink)!important;font-size:1em!important}
.els-quote .et_pb_contact_submit{background:var(--els-sun)!important;color:var(--els-ink)!important;border:0!important;font-weight:700}
.els-contact-list{list-style:none!important;padding:0!important}
.els-contact-list li{margin-bottom:10px}

/* ---------- WooCommerce prompts (added by functions.php) ---------- */
.els-assess-prompt{margin:24px 0;padding:18px 20px;border-left:5px solid var(--els-sun);background:var(--els-bg);border-radius:0 8px 8px 0}
.els-assess-prompt strong{display:block;margin-bottom:4px}
.els-assess-prompt a{font-weight:700}

/* ---------- WhatsApp button and legal line ---------- */
.els-wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:9999;background:#25D366;color:#073B1E!important;border-radius:999px;padding:13px 18px;display:flex;gap:8px;align-items:center;font-weight:700;text-decoration:none;box-shadow:0 6px 20px rgba(22,38,61,.28)}
.els-legal{font-size:.85em}
a:focus-visible, button:focus-visible{outline:3px solid var(--els-sun);outline-offset:2px}