/*
Theme Name: CS Electrical Rebuilt 2.4
Theme URI: https://cs-elec.co.uk/
Author: CS Electrical Contracting
Description: Faithful WordPress recreation of the CS Electrical Contracting website.
Version: 2.4.0
Text Domain: cs-electrical
*/
:root { --orange:#f68b1f; --grey:#777; --pale:#dbdbdb; --header:#efefef; --page:1170px; }
* { box-sizing:border-box; }
body { margin:0; color:#222; background:#fff; font:14px/1.78 Arial,Helvetica,sans-serif; }
a { color:#000; text-decoration:none; }
a:hover, a:focus { color:#fff; text-decoration:none; }
.wrap { max-width:var(--page); margin:auto; padding:0 15px; }
.cookie-note { display:flex; min-height:72px; align-items:center; justify-content:center; gap:16px; padding:10px 24px; text-align:center; }
.cookie-note p { margin:0; line-height:1.45; }
.cookie-note button, .cookie-note a { padding:8px 13px; border:1px solid #e5a746; border-radius:4px; color:#fff; background:linear-gradient(#f8bb5c,#eda333); box-shadow:0 1px 2px #aaa; font-size:13px; }
.cookie-note a { background:linear-gradient(#555,#222); border-color:#333; }
.site-top { background:var(--header); }
.top-inner { display:flex; min-height:115px; align-items:center; justify-content:space-between; gap:32px; }
.custom-logo-link { display:block; }
.custom-logo-link img { display:block; width:355px; max-width:100%; height:auto; }
.contact-quick { min-width:215px; text-align:right; line-height:1.75; }
.contact-quick p { margin:0; }.contact-quick a { color:#222; }
.masthead { position:relative; background:var(--orange); border-bottom:3px solid #000; }
.brand-row { min-height:0; }.menu-toggle { display:none; }
.main-nav > ul { display:flex; align-items:center; margin:0; padding:0; list-style:none; }
.main-nav li { position:relative; }.main-nav a { display:block; padding:17px 18px; color:#fff; line-height:20px; white-space:nowrap; }
.main-nav a:hover, .main-nav .current-menu-item > a { color:#fff; background:#000; }
.main-nav .sub-menu { display:none; position:absolute; z-index:20; top:100%; left:0; min-width:180px; margin:0; padding:5px 0; list-style:none; background:var(--orange); border:2px solid #000; border-radius:0 0 4px 4px; }
.main-nav .sub-menu a { padding:8px 14px; }.main-nav .has-submenu:hover > .sub-menu, .main-nav .has-submenu:focus-within > .sub-menu { display:block; }
.cs-slider { min-height:250px; height:min(28.4vw,355px); border-bottom:5px solid var(--orange); background:url('assets/slider-3.jpg') center top/cover; animation:cs-slide 18s step-end infinite; }
@keyframes cs-slide { 0%,32% { background-image:url('assets/slider-1.jpg'); } 33%,65% { background-image:url('assets/slider-2.jpg'); } 66%,100% { background-image:url('assets/slider-3.jpg'); } }
.services-band { padding:20px 0 12px; border-top:10px solid var(--pale); border-bottom:10px solid var(--pale); background:var(--pale); }
.service-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; text-align:center; }
.service-card { padding:0 6px; }.service-card figure { width:200px; height:200px; margin:0 auto 8px; overflow:hidden; border:13px solid #c4c6c7; border-radius:50%; background:#aaa; }
.service-card img { display:block; width:100%; height:100%; object-fit:cover; }.service-card h2 { margin:0 0 10px; color:var(--orange); font-size:24px; line-height:1.3; }
.service-card p { max-width:315px; margin:0 auto 12px; line-height:1.8; }.service-card a { color:var(--orange); font-size:12px; font-weight:bold; letter-spacing:.05em; text-transform:uppercase; }
.service-card a:hover { color:#000; }
.main-zone { padding:15px 0 30px; border-bottom:5px solid var(--orange); background:var(--grey); }.main-grid { display:grid; grid-template-columns:minmax(0,2.05fr) minmax(310px,1fr); gap:14px; }
.entry { padding:0; color:#222; }.entry h1 { margin:0 0 20px; color:var(--orange); font-size:36px; font-weight:normal; line-height:1.25; }.entry h2 { color:var(--orange); font-size:26px; }.entry h3 { color:#fff; }
.entry p { margin:0 0 20px; line-height:1.8; }.entry hr { margin:0 0 20px; border:0; border-top:1px solid #ddd; }.entry ul,.entry ol { padding-left:24px; line-height:2.1; }
.side-contact { margin:0; padding:14px 20px 16px; border:1px solid #9d9d9d; border-radius:10px; background:#8b8b8b; box-shadow:0 2px 4px rgba(0,0,0,.2); }.side-contact h2 { margin:0 0 10px; font-size:26px; font-weight:normal; }
.side-contact label { display:block; margin:5px 0; font-weight:bold; }.side-contact input,.side-contact textarea { display:block; width:100%; padding:6px; border:1px solid #aaa; background:#fff; font:inherit; }.side-contact textarea { height:86px; resize:vertical; }
.side-contact button { float:right; margin-top:10px; padding:8px 13px; border:1px solid #dbdbdb; border-radius:5px; background:#f1f1f1; color:#333; }.side-contact button:hover { background:var(--orange); color:#fff; }
.site-footer { padding:22px 0 0; border-top:20px solid #000; background:#000; color:#fff; }.footer-grid { display:flex; justify-content:space-between; gap:24px; }.footer-grid p { margin:0 0 3px; color:#fff; line-height:1.5; }.site-footer a { color:#fff; }
.copyright { margin:20px 0 0; padding:12px 0 20px; background:var(--grey); color:#fff; font-size:12px; }.button { display:inline-block; padding:10px 14px; background:var(--orange); color:#fff; font-weight:bold; }.button:hover { background:#000; color:#fff; }
.page-standard { min-height:460px; padding:30px 0; background:var(--grey); }.page-standard .entry { max-width:760px; }.page-standard .entry h1 { padding-bottom:17px; border-bottom:1px solid #ddd; }
.page-standard .entry h2 { margin:27px 0 12px; font-weight:normal; line-height:1.3; }.page-standard .entry p + ul { margin-top:-8px; }.page-standard .entry li { margin-bottom:2px; }.page-standard .entry .service-intro { font-size:15px; }.page-standard .entry .contact-callout { margin-top:26px; padding-top:20px; border-top:1px solid #ddd; }.page-standard .entry address { font-style:normal; line-height:1.8; }
.map-frame { overflow:hidden; width:100%; height:340px; border:4px solid #eee; }.map-frame iframe { display:block; width:100%; height:100%; border:0; }
.team-page { padding:30px 0 35px; border-bottom:5px solid var(--orange); background:var(--grey); }.team-page .team-content { max-width:940px; }.team-intro { max-width:850px; margin:0 0 24px; }.team-intro h1 { margin:0 0 21px; padding-bottom:17px; border-bottom:1px solid #ddd; color:var(--orange); font-size:36px; font-weight:normal; line-height:1.25; }.team-intro p { margin:0 0 15px; color:#222; line-height:1.8; }.team-list { border-top:1px solid #ddd; }.team-member { display:grid; grid-template-columns:200px minmax(0,1fr); gap:26px; align-items:center; padding:24px 0; border-bottom:1px solid #ddd; }.team-member img { display:block; width:200px; height:200px; border:5px solid #eee; object-fit:cover; }.team-member p { margin:0; color:#222; font-size:15px; line-height:1.9; }.team-contact { margin:24px 0 0; color:#222; font-size:15px; }
@media (max-width:820px) { .cookie-note { min-height:0; flex-wrap:wrap; }.top-inner { min-height:90px; gap:15px; }.custom-logo-link img { width:260px; }.contact-quick { min-width:0; font-size:12px; }.menu-toggle { display:block; position:absolute; top:10px; right:15px; padding:7px 11px; border:1px solid rgba(255,255,255,.75); background:transparent; color:#fff; }.main-nav { display:none; }.main-nav.is-open { display:block; padding-top:48px; }.main-nav > ul { display:block; }.main-nav a { padding:12px 18px; }.main-nav .sub-menu { position:static; display:block; min-width:0; border:0; border-radius:0; background:rgba(0,0,0,.12); }.main-nav .sub-menu a { padding-left:38px; }.cs-slider { min-height:190px; height:36vw; }.service-cards { gap:25px; }.service-card figure { width:150px; height:150px; border-width:10px; }.service-card h2 { font-size:21px; }.main-grid { grid-template-columns:1fr; }.side-contact { max-width:520px; }.team-member { grid-template-columns:150px minmax(0,1fr); gap:20px; }.team-member img { width:150px; height:150px; }.footer-grid { display:block; }.footer-grid > div + div { margin-top:18px; } }
@media (max-width:560px) { .top-inner { justify-content:center; text-align:center; }.contact-quick { text-align:center; }.cs-slider { height:52vw; }.service-cards { grid-template-columns:1fr; }.service-card { padding-bottom:10px; }.entry h1,.team-intro h1 { font-size:29px; }.team-member { grid-template-columns:1fr; gap:14px; }.team-member img { width:200px; height:200px; }.main-zone { padding-top:25px; } }