/* Lime Light & Electric — static rebuild of the 2019 Astra + Elementor site.
   Values are taken from the archived theme and Elementor CSS (source-archive/). */

:root {
  --lime: #a3ce5f;        /* theme link / accent colour */
  --lime-btn: #b7d02e;    /* home page button colour */
  --ink: #0c0c0c;
  --text: #000;
  --nav: #3a3a3a;
  --grey-btn: #7a7a7a;
  --footer: #3a3a3a;
  --wrap: 1140px;
  --sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --roboto: "Roboto", sans-serif;
  --open: "Open Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 93.75%; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--roboto); font-size: 15px; line-height: 1.85; color: var(--text); background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lime); text-decoration: none; }
a:hover { color: #000; }
h1, h2, h3, h4, h5, h6 { font-family: var(--roboto); font-weight: 600; color: var(--ink); margin: 0 0 20px; line-height: 1.2; }
p { margin: 0 0 1.2em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.skip-link { position: absolute; left: -9999px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { left: 10px; top: 10px; z-index: 1000; background: #fff; padding: 8px 12px; color: #000; }
:focus-visible { outline: 2px solid #000; outline-offset: 2px; box-shadow: 0 0 0 4px #fff; }

/* ---------- Header ---------- */
.site-header { border-top: 1px solid #7a7a7a; border-bottom: 1px solid #eaeaea; background: #fff; position: relative; z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 90px; }
.logo img { width: 230px; height: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; align-items: center; }
.nav li { position: relative; }
.nav a { display: block; font-family: var(--sys); font-size: 15px; color: var(--nav); padding: 0 1em; line-height: 90px; text-transform: uppercase; }
.nav > ul > li:last-child > a { padding-right: 0; }
.nav a:hover, .nav li:hover > a, .nav .current > a, .nav .current-parent > a { color: var(--lime); }
.nav .has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 0 3px 10px; }
.sub-menu { position: absolute; top: 100%; left: 0; width: 240px; background: #fff; border-top: 2px solid var(--lime); box-shadow: 0 4px 10px -2px rgba(0,0,0,.1); opacity: 0; visibility: hidden; transition: opacity .2s; }
.has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.sub-menu a { line-height: 1.5; padding: .9em 1em; font-size: 15px; }
.menu-toggle { display: none; background: var(--lime); border: 0; color: #fff; width: 44px; height: 38px; border-radius: 2px; cursor: pointer; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 20px; height: 2px; background: #fff; margin: 0 auto; position: relative; content: ""; }
.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }

/* ---------- Hero band (all pages) ---------- */
.hero { background: #000 url("../img/hero.jpg") center 35% / cover no-repeat; min-height: 51vh; }
.hero--home { min-height: 58vh; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font-family: var(--roboto); font-size: 15px; font-weight: 500; line-height: 1; text-transform: uppercase; color: #fff; background: var(--lime-btn); padding: 15px 28px; border-radius: 3px; transition: background .3s, transform .3s; }
.btn:hover, .btn:focus { background: var(--grey-btn); color: #fff; }
.btn--dark { background: #000; font-weight: 600; padding: 15px 45px; border-radius: 0; }
.btn--dark:hover, .btn--dark:focus { background: var(--lime); transform: scale(1.1); }
.btn-row { text-align: center; }

/* ---------- Home: three services ---------- */
.services { background: #ebebeb; padding: 60px 0; }
.services .wrap { max-width: 1135px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service { padding: 11px; display: flex; flex-direction: column; }
.service h2 { font-size: 25px; font-weight: 500; text-align: center; }
.service img { width: 100%; aspect-ratio: 800 / 310; object-fit: cover; margin-bottom: 20px; }
.service img.contain { object-fit: contain; background: #fff; }
.service p { padding: 0 10px; margin-bottom: 30px; flex: 1; }
.service strong { font-weight: 600; }

/* ---------- Click + Connect ---------- */
.connect { background: #000; padding: 50px 0; }
.connect-inner { display: grid; grid-template-columns: 60% 40%; align-items: center; max-width: 1140px; }
.connect-copy { padding: 50px 55px 50px 50px; }
.connect h2 { color: #fff; font-size: 35px; margin-bottom: 20px; }
.connect p { color: #f2f2f2; font-size: 16px; font-weight: 300; margin: 0; }
.connect-social { padding: 25px; text-align: center; }
.social-squares { display: inline-flex; gap: 5px; margin-bottom: 20px; }
.social-squares a { display: grid; place-items: center; width: 80px; height: 80px; background: #2b2b2b; color: #fff; transition: background .3s; }
.social-squares a:hover { background: #00ce1b; color: #000; }
.social-squares svg { width: 20px; height: 20px; fill: currentColor; }
.connect-social h3 { color: #bfbfbf; font-size: 15px; font-weight: 300; text-transform: uppercase; margin: 0; }

/* ---------- Home: address block ---------- */
.visit { padding: 100px 0; }
.visit-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.visit-copy { padding-right: 40px; }
.visit h2 { font-size: 45px; font-weight: 700; color: #000; }
.hours { display: grid; grid-template-columns: 1fr 1fr; padding: 0 10px; }
.hours p { font-family: var(--open); font-weight: 600; font-size: 15px; color: #3a3a3a; margin: 0 0 1.3em; padding: 0 10px; }

/* ---------- Two-column feature rows (inner pages) ---------- */
.split { padding: 40px 0; }
.split-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.split-copy { padding: 10px; }
.split h2 { font-size: 45px; font-weight: 600; color: #000; }
.split .copy { font-size: 15px; font-weight: 300; line-height: 2em; color: #000; }
.split .copy strong { font-weight: 600; }
.split--dark { background: #000; }
.split--dark h2 { color: #fff; }
.split--dark .copy { color: #e5e5e5; font-size: 16px; line-height: 1.8em; }
.split .btns { display: flex; flex-wrap: wrap; gap: 15px; }

/* ---------- Electrical ---------- */
.intro h2 { font-size: 40px; color: var(--ink); margin: 15px; }
.intro .copy { padding: 0 10px; }
.section-title { text-align: center; font-size: 40px; color: var(--ink); margin: 25px; }
.vendors-text { background: #595959; padding: 62px; margin: 6px 0; }
.vendors-text .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vendors-text ul { list-style: none; margin: 0; padding: 0; font-size: 18px; color: #fff; }
.vendors-text li { padding: 3px 0; }

/* ---------- Logo vendor grid ---------- */
.vendor-head { background: #424242; padding: 30px 0 20px; }
.vendor-head h2 { color: #fff; font-size: 40px; text-align: center; }
.vendor-head--light { background: none; }
.vendor-head--light h2 { color: var(--ink); }
.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding: 20px 0 60px; }
.logo-grid img { width: 100%; }

/* ---------- Shop / residential buttons ---------- */
.cta-row { padding: 30px 0; }
.cta-row .grid-3 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px 80px; text-align: center; }
.cta-row h2 { font-size: 45px; font-weight: 600; color: #000; margin: 0; }
.shop-intro { padding: 20px 0 50px; }
.shop-intro .inner { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: center; }
.shop-intro h3 { font-size: 20px; }

/* ---------- About ---------- */
.team-title { text-align: center; font-size: 35px; margin: 50px 0 30px; }
.team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding-bottom: 50px; text-align: center; }
.team img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 15px; }
.team h3 { font-size: 18px; margin-bottom: 8px; }
.team p { font-size: 14px; line-height: 1.6; margin-bottom: 15px; }
.team .btn { font-size: 13px; padding: 12px 20px; }

/* ---------- Contact ---------- */
.contact-row { padding: 5px 37px 18px 18px; }
.contact-row .grid-3 { gap: 20px; }
.icon-box { text-align: center; margin: 60px 20px 20px; }
.icon-box svg { width: 60px; height: 60px; fill: var(--lime); margin-bottom: 20px; }
.icon-box h2 { font-size: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; line-height: 1.4; margin-bottom: 10px; }
.icon-box p { color: #353535; font-size: 15px; line-height: 1.5; }
.contact-detail { color: var(--lime); font-size: 17px; font-weight: 700; text-align: center; margin: 9px; }
.map iframe { width: 100%; height: 400px; border: 0; display: block; }
.social-band { background: #292c30; padding: 60px 0; text-align: center; }
.social-round { display: inline-flex; gap: 20px; }
.social-round a { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 50%; background: #7a7a7a; color: #fff; }
.social-round a:hover { opacity: .9; }
.social-round svg { width: 19px; height: 19px; fill: currentColor; }

/* ---------- Forms (Mailchimp + warranty) ---------- */
.form-card { padding: 10px; }
.form-card h2 { font-size: 26px; }
.form-card .indicates { font-size: 12px; text-align: right; }
.req { color: #e85c41; }
.field { margin-bottom: 15px; }
.field label, .field .label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 5px; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=number], .field textarea { width: 100%; font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 2px; background: #fff; }
.field textarea { min-height: 120px; resize: vertical; }
.field .sub-label { font-weight: 400; font-size: 13px; color: #555; }
.field .hint { font-size: 13px; color: #555; margin-top: 5px; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.radios label { display: inline; font-weight: 400; margin-right: 12px; }
.hp { position: absolute; left: -5000px; }
button.submit, input.submit { font: inherit; font-size: 15px; background: #eee; border: 1px solid #ddd; color: #333; padding: 10px 15px; cursor: pointer; }
button.submit:hover, input.submit:hover { background: #ddd; }
button.mc-submit, input.mc-submit { background: var(--lime); border: 0; color: #fff; padding: 10px 22px; }
button.mc-submit:hover, input.mc-submit:hover { background: #7a7a7a; }

.warranty { padding: 40px 0 60px; }
.warranty .inner { max-width: 570px; margin: 0 auto; }
.warranty h2 { font-size: 30px; }
.notice { padding: 15px 20px; margin-bottom: 20px; border: 1px solid; }
.notice--ok { background: #dff0d8; border-color: #b4d39b; color: #2f5a1f; }
.notice--err { background: #f2dede; border-color: #d8b5b5; color: #8a1f11; }

/* ---------- Book an appointment ---------- */
.booking { padding: 40px 0 60px; text-align: center; }
.booking h2 { font-size: 45px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); border-top: 1px solid #7a7a7a; color: #fff; text-align: center; padding: 38px 0; font-size: 15px; font-family: var(--sys); }
.site-footer p { margin: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .hero, .hero--home { min-height: 60vh; }
  .connect { padding: 100px 25px; }
  .visit { padding: 100px 25px; }
  .team { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Mobile nav breakpoint (Astra default 921px) ---------- */
@media (max-width: 921px) {
  .menu-toggle { display: block; }
  .header-inner { flex-wrap: wrap; padding: 10px 20px; }
  .nav { display: none; width: 100%; }
  .nav.open { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; border-top: 1px solid #eaeaea; margin-top: 10px; }
  .nav a { line-height: 1.5; padding: .9em 0; border-bottom: 1px solid #eaeaea; }
  .sub-menu { position: static; width: auto; opacity: 1; visibility: visible; box-shadow: none; border-top: 0; display: none; }
  .has-sub.open > .sub-menu { display: block; }
  .sub-menu a { padding-left: 20px; }
}

@media (max-width: 767px) {
  .hero, .hero--home { min-height: 40vh; background-image: url("../img/hero-mobile.jpg"); }
  .grid-3, .split-inner, .visit-inner, .connect-inner, .shop-intro .inner { grid-template-columns: 1fr; }
  .connect { padding: 50px 20px; }
  .connect-copy { padding: 35px; text-align: center; }
  .visit { padding: 50px 20px; }
  .visit-copy { padding: 0 0 30px; }
  .visit h2 { font-size: 34px; }
  .split h2, .cta-row h2, .booking h2 { font-size: 34px; }
  .split--reverse .split-media { order: 2; }
  .vendors-text { padding: 30px 20px; }
  .vendors-text .grid-4 { grid-template-columns: 1fr 1fr; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .contact-row { padding: 0; }
  .cta-row .grid-3 > * { margin-bottom: 10px; }
}