/*
Theme Name: Mo Power Electrical
Theme URI: https://mopowerelectricalservices.com/
Author: Mamba Media
Author URI: https://mamba-media.com/
Description: Custom theme for Mo Power & Electrical Connections, Orlando FL. Converted from the Lovable "Mo Power Connect" site. Includes Home, Services, About, Reviews and a working Book an Appointment system.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: mopower
*/

:root{
  --teal:#10857a; --teal-d:#0c6c63; --teal-l:#e7f2f0; --mint:#eef5f3;
  --ink:#1c2424; --ink-2:#2b3434; --muted:#66716f; --line:#e1e8e6;
  --dark:#121717; --star:#efa83a; --white:#fff;
  --radius:10px; --wrap:1140px;
  --fh:"Manrope",system-ui,sans-serif; --fb:"DM Sans",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--fb);font-size:15px;line-height:1.6;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fh);font-weight:800;line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;color:var(--ink)}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.ico{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}

/* Eyebrow + headings */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.eyebrow.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}
.h2{font-size:clamp(28px,3.4vw,38px)}
.lead{color:var(--muted);font-size:15px;max-width:560px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:6px;font-weight:600;font-size:14px;border:1px solid transparent;cursor:pointer;transition:.2s;font-family:var(--fb);line-height:1}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-d)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.04)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--teal);color:var(--teal)}
.btn-sm{padding:10px 16px;font-size:12px}
.link{display:inline-flex;align-items:center;gap:8px;color:var(--teal);font-weight:600;font-size:13px}
.link:hover{color:var(--teal-d)}

/* Top bar + header */
.topbar{background:var(--dark);color:#cfd6d4;font-size:11px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px}
.topbar span,.topbar a{display:inline-flex;align-items:center;gap:6px}
.topbar .ico{width:13px;height:13px}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:0}}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand img{height:50px;width:auto}
.brand .txt{font-family:var(--fh);font-weight:800;font-size:20px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:30px}
.nav a{font-size:13px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav .current-menu-item>a,.nav .current_page_item>a{color:var(--teal);border-color:var(--teal)}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0}

/* Hero */
.hero{position:relative;background:#0f1414;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center right}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,18,18,.96) 0%,rgba(14,18,18,.85) 38%,rgba(14,18,18,.15) 70%,rgba(14,18,18,0) 100%)}
.hero .wrap{position:relative;padding-top:80px;padding-bottom:70px;min-height:590px;display:flex;flex-direction:column;justify-content:center}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:var(--teal)}
.hero h1{color:#fff;font-size:clamp(40px,5.4vw,64px);max-width:560px;margin-bottom:22px}
.hero p{color:#c9d1cf;max-width:420px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 30px}
.rating{display:flex;align-items:center;gap:8px;font-size:12px;color:#c9d1cf}
.rating b{color:#fff}
.stars{display:inline-flex;gap:2px;color:var(--star)}
.stars .ico{width:15px;height:15px}

/* Trust strip */
.trust{background:var(--mint);border-bottom:1px solid var(--line)}
.trust ul{list-style:none;margin:0 auto;padding:22px 20px;max-width:var(--wrap);display:grid;grid-template-columns:repeat(4,1fr)}
.trust li{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12.5px;font-weight:600;border-left:1px solid #d3dedb}
.trust li:first-child{border-left:0}
.trust .ico{color:var(--teal)}

/* Sections */
.section{padding:90px 0}
.section.mint{background:var(--mint)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:34px}
.sec-head .lead{max-width:360px;margin:0}

/* Service cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;transition:.25s}
.card:hover{border-color:#bcd8d3;box-shadow:0 14px 30px -18px rgba(16,133,122,.35);transform:translateY(-2px)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px}
.ibox{width:46px;height:46px;border-radius:6px;background:var(--teal-l);color:var(--teal);display:grid;place-items:center}
.ibox .ico{width:20px;height:20px}
.num{font-size:11px;color:var(--muted)}
.card h3{font-size:18px;font-weight:700;margin-bottom:10px}
.card p{color:var(--muted);font-size:13.5px}
.card ul.checks{margin:6px 0 18px}
.card .foot{margin-top:auto;border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;align-items:center}
.card .foot a{color:var(--teal);font-weight:600;font-size:12px}
.center{text-align:center}
.mt30{margin-top:30px}

/* Checks */
ul.checks{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
ul.checks.two{grid-template-columns:1fr 1fr;gap:14px 20px}
ul.checks li{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:500}
ul.checks .ico{color:var(--teal);width:16px;height:16px}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split .photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:1.42;background:#222 center/cover}
.split p{color:var(--muted)}

/* Reviews */
.rev{background:var(--mint);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column}
.rev blockquote{margin:16px 0 22px;font-size:14px;line-height:1.75;color:var(--ink-2)}
.rev .who{margin-top:auto;display:flex;align-items:center;gap:12px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--teal-l);color:var(--teal);display:grid;place-items:center;font-weight:700;font-size:13px}
.who b{display:block;font-size:13px}
.who small{font-size:10.5px;color:var(--muted)}
.who .ok{margin-left:auto;color:var(--teal)}
.rev-summary{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:20px;flex-wrap:wrap}
.rev-summary .score{display:flex;align-items:center;gap:16px}
.rev-summary .big{font-family:var(--fh);font-size:52px;font-weight:700;line-height:1}
.rev-summary small{color:var(--muted);font-size:11px;display:block}
.note{font-size:11px;color:var(--muted);text-align:center;margin-top:24px}
.feedback{margin-top:50px;background:var(--mint);border:1px solid var(--line);border-radius:var(--radius);padding:34px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.feedback h3{font-size:22px;margin-bottom:4px}
.feedback p{margin:0;color:var(--muted)}

/* CTA band */
.cta{background:var(--dark);color:#fff;padding:70px 0}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cta .eyebrow{color:#4fc2b4}
.cta h2{color:#fff;font-size:clamp(28px,3.4vw,38px)}
.cta p{color:#b9c2c0;margin:0;font-size:13px}
.cta .act{display:flex;flex-direction:column;align-items:center;gap:14px}
.cta .act .call{color:#cfd6d4;font-size:13px;display:inline-flex;gap:8px;align-items:center}

/* Page hero */
.page-hero{background:var(--mint);padding:70px 0 60px}
.page-hero h1{font-size:clamp(34px,4vw,46px)}
.page-hero p{color:var(--muted);max-width:540px;margin:0}

/* Values */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:70px}
.values .card h3{font-size:17px}

/* Booking */
.book{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.book h2{font-size:clamp(32px,3.6vw,42px)}
.info-li{display:flex;gap:12px;margin:18px 0;font-size:13px}
.info-li .ico{color:var(--teal);margin-top:2px}
.info-li b{display:block}
.info-li small{color:var(--muted)}
.bform{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px;box-shadow:0 20px 40px -30px rgba(0,0,0,.25)}
.step{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.step span{width:24px;height:24px;border-radius:5px;background:var(--teal-l);color:var(--teal);display:grid;place-items:center;font-size:10px;font-weight:700}
.step h3{font-size:16px;margin:0}
.fblock{margin-bottom:28px}
.bform label{display:block;font-size:11.5px;font-weight:600;margin:0 0 6px}
.bform label em{font-weight:400;color:var(--muted);font-style:normal}
.bform input,.bform select,.bform textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:11px 12px;font:inherit;font-size:13px;color:var(--ink);background:#fff}
.bform input:focus,.bform select:focus,.bform textarea:focus{outline:2px solid rgba(16,133,122,.25);border-color:var(--teal)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.frow.one{grid-template-columns:1fr}
.cal-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:600;font-size:13px}
.cal-head button{background:none;border:0;cursor:pointer;font-size:16px;color:var(--ink);padding:4px 8px}
.cal-head button:disabled{opacity:.25;cursor:default}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:12px}
.cal .dow{color:var(--muted);font-size:10.5px;padding:4px 0}
.cal button{border:0;background:none;border-radius:6px;padding:7px 0;cursor:pointer;font:inherit;font-size:12px;color:var(--ink)}
.cal button:hover:not(:disabled){background:var(--teal-l)}
.cal button:disabled{color:#c3cbc9;cursor:default}
.cal button.sel,.cal button.sel:hover{background:var(--teal)!important;color:#fff}
.times h4{font-size:13px;margin:0 0 2px}
.times small{color:var(--muted);font-size:10.5px}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.slots button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:9px 0;font:inherit;font-size:12px;cursor:pointer}
.slots button:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.slots button.sel,.slots button.sel:hover{background:var(--teal);border-color:var(--teal);color:#fff!important}
.slots button:disabled{text-decoration:line-through;color:#bbb;cursor:default}
.slots .empty{grid-column:1/-1;color:var(--muted);font-size:12px}
.bform .btn{width:100%;justify-content:center;padding:15px}
.fine{font-size:11px;color:var(--muted);text-align:center;margin-top:12px}
.alert{padding:16px 18px;border-radius:8px;margin-bottom:22px;font-size:13.5px}
.alert.ok{background:var(--teal-l);border:1px solid #b8dcd5;color:#0b5a52}
.alert.err{background:#fdecec;border:1px solid #f3c2c2;color:#8a2020}
.hp{position:absolute;left:-9999px}

/* Footer */
.site-footer{padding:60px 0 24px;font-size:12.5px}
.fgrid{display:grid;grid-template-columns:1.4fr .7fr .9fr .8fr;gap:30px}
.flogo{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.flogo img{height:34px;width:auto}
.flogo b{font-family:var(--fh);font-size:20px;display:block;line-height:1}
.flogo small{font-size:8px;letter-spacing:.25em;color:var(--muted)}
.site-footer h4{font-family:var(--fb);font-size:13px;font-weight:700;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;color:var(--muted)}
.site-footer p{color:var(--muted)}
.site-footer a:hover{color:var(--teal)}
.fbot{border-top:1px solid var(--line);margin-top:44px;padding-top:18px;display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);gap:10px;flex-wrap:wrap}

/* Generic page content */
.entry{max-width:780px;margin:0 auto}
.entry h2{font-size:28px;margin-top:1.4em}

/* Responsive */
@media (max-width:960px){
  .grid3,.values{grid-template-columns:1fr 1fr}
  .split,.book{grid-template-columns:1fr;gap:40px}
  .fgrid{grid-template-columns:1fr 1fr}
  .trust ul{grid-template-columns:1fr 1fr;gap:14px}
  .trust li{border:0;justify-content:flex-start}
}
@media (max-width:760px){
  .menu-toggle{display:block}
  .nav{position:absolute;top:74px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;padding:10px 20px}
  .nav a{display:block;padding:12px 0;border:0}
  .header-cta{display:none}
  .grid3,.values,.cal-wrap,.frow{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
  .section{padding:64px 0}
  .hero .wrap{min-height:520px}
  .hero-bg::after{background:linear-gradient(180deg,rgba(14,18,18,.75),rgba(14,18,18,.92))}
  ul.checks.two{grid-template-columns:1fr}
  .topbar .loc{display:none}
  .topbar .wrap{justify-content:flex-end}
}