/* Wayne A. Burgess, Electrician - presentation layer.
   Palette and fonts are defined in Site Editor > Styles (global styles); these rules add the hero,
   cards, FAQ accordions, form and call bar. Colors reference the global-styles presets. */

@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/zilla-slab-600.woff2) format("woff2")}
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/zilla-slab-700.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-sans-3-400.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/source-sans-3-600.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/source-sans-3-700.woff2) format("woff2")}

:root{
  --wb-ink:var(--wp--preset--color--ink,#232120);
  --wb-copper:var(--wp--preset--color--copper,#a35a22);
  --wb-copper-dark:var(--wp--preset--color--copper-dark,#86481a);
  --wb-taupe:var(--wp--preset--color--taupe,#8a7d78);
  --wb-stone:var(--wp--preset--color--stone,#f6f4f1);
  --wb-line:#e4dfda;
}

/* ---------- Header ---------- */
.wb-topbar{font-size:15px}
.wb-topbar a{color:inherit;text-decoration:none;font-weight:700}
.wb-topbar a:hover,.wb-topbar a:focus-visible{text-decoration:underline}
.wb-brand{text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;line-height:1}
.wb-brand::before{content:"";width:22px;height:30px;flex:none;background:var(--wb-taupe);
  clip-path:polygon(58% 0,8% 58%,44% 58%,30% 100%,92% 38%,55% 38%,72% 0)}
.wb-header .wp-block-site-title a{text-decoration:none}
.wb-header .wp-block-site-title a::before{content:"";display:inline-block;vertical-align:-4px;margin-right:.45rem;width:20px;height:28px;background:var(--wb-taupe);
  clip-path:polygon(58% 0,8% 58%,44% 58%,30% 100%,92% 38%,55% 38%,72% 0)}

/* ---------- Hero with crossfading photos ---------- */
.wb-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--wb-ink)}
.wb-hero .wb-hero-slides{position:absolute;inset:0;margin:0!important;padding:0;display:block!important;z-index:-2;gap:0;max-width:none!important;width:100%!important;height:100%}
.wb-hero .wb-hero-slides figure.wp-block-image{position:absolute!important;inset:0;width:100%!important;height:100%!important;margin:0!important;opacity:0;
  animation:wb-fade var(--wb-cycle,30s) infinite;will-change:opacity}
.wb-hero .wb-hero-slides figure img{width:100%!important;height:100%!important;object-fit:cover;animation:wb-drift var(--wb-cycle,30s) infinite}
.wb-hero .wb-hero-slides figure figcaption{display:none}
.wb-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(20,18,17,.78) 0%,rgba(20,18,17,.5) 50%,rgba(20,18,17,.12) 100%)}
.wb-hero .wb-hero-slides figure:nth-child(1){animation-delay:0s}
.wb-hero .wb-hero-slides figure:nth-child(2){animation-delay:calc(var(--wb-cycle,30s) / var(--wb-n,5) * 1)}
.wb-hero .wb-hero-slides figure:nth-child(3){animation-delay:calc(var(--wb-cycle,30s) / var(--wb-n,5) * 2)}
.wb-hero .wb-hero-slides figure:nth-child(4){animation-delay:calc(var(--wb-cycle,30s) / var(--wb-n,5) * 3)}
.wb-hero .wb-hero-slides figure:nth-child(5){animation-delay:calc(var(--wb-cycle,30s) / var(--wb-n,5) * 4)}
.wb-hero .wb-hero-slides figure:nth-child(6){animation-delay:calc(var(--wb-cycle,30s) / var(--wb-n,5) * 5)}
.wb-hero .wb-hero-slides figure:nth-child(1) img{animation-delay:0s}
.wb-hero .wb-hero-slides figure:nth-child(2) img{animation-delay:calc(var(--wb-cycle,30s) / var(--wb-n,5) * 1)}
.wb-hero .wb-hero-slides figure:nth-child(3) img{animation-delay:calc(var(--wb-cycle,30s) / var(--wb-n,5) * 2)}
.wb-hero .wb-hero-slides figure:nth-child(4) img{animation-delay:calc(var(--wb-cycle,30s) / var(--wb-n,5) * 3)}
.wb-hero .wb-hero-slides figure:nth-child(5) img{animation-delay:calc(var(--wb-cycle,30s) / var(--wb-n,5) * 4)}
.wb-hero .wb-hero-slides figure:nth-child(6) img{animation-delay:calc(var(--wb-cycle,30s) / var(--wb-n,5) * 5)}
.wb-hero .wb-hero-slides:has(> figure:nth-child(3):last-child){--wb-n:3;--wb-cycle:18s}
.wb-hero .wb-hero-slides:has(> figure:nth-child(4):last-child){--wb-n:4;--wb-cycle:24s}
.wb-hero .wb-hero-slides:has(> figure:nth-child(5):last-child){--wb-n:5;--wb-cycle:30s}
.wb-hero .wb-hero-slides:has(> figure:nth-child(6):last-child){--wb-n:6;--wb-cycle:36s}
.wb-hero .wb-hero-slides figure:only-child{opacity:1;animation:none}
/* Each photo shows for about 6 s with a 1.5 s crossfade. Keyframes assume 5 photos; other counts still loop. */
@keyframes wb-fade{0%{opacity:0}5%{opacity:1}20%{opacity:1}25%{opacity:0}100%{opacity:0}}
@keyframes wb-drift{0%{transform:scale(1.02)}25%{transform:scale(1.1)}100%{transform:scale(1.1)}}
.wb-hero h1{text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.wb-hero p{text-shadow:0 1px 10px rgba(0,0,0,.4)}
.wb-hero .wb-hero-badges{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:15px;font-weight:600;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){
  .wb-hero .wb-hero-slides figure,.wb-hero .wb-hero-slides figure img{animation:none}
  .wb-hero .wb-hero-slides figure:first-child{opacity:1}
}
/* In the editor, show the photos as a normal gallery so they are easy to swap. */
.editor-styles-wrapper .wb-hero .wb-hero-slides{position:relative;inset:auto;z-index:auto;display:flex!important;flex-wrap:wrap;gap:6px;margin-bottom:1rem!important}
.editor-styles-wrapper .wb-hero .wb-hero-slides figure.wp-block-image{position:relative!important;opacity:1;animation:none;width:calc(20% - 6px)!important;height:90px!important}
.editor-styles-wrapper .wb-hero .wb-hero-slides figure img{animation:none}

/* ---------- Cards, lists ---------- */
.wb-card{background:#fff;border:1px solid var(--wb-line);border-radius:6px;overflow:hidden;height:100%}
.wb-card .wp-block-image{margin:0}
.wb-card .wp-block-image img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}
.wb-card h3 a{text-decoration:none;color:inherit}
.wb-card h3 a:hover,.wb-card h3 a:focus-visible{color:var(--wb-copper);text-decoration:underline}
.wb-towns{columns:2 9rem;column-gap:2rem;padding-left:1.1rem}
.wb-towns li{break-inside:avoid;margin-bottom:.35rem}
.wb-checks{list-style:none;padding-left:0}
.wb-checks li{padding-left:1.6rem;position:relative;margin-bottom:.5rem}
.wb-checks li::before{content:"";position:absolute;left:0;top:.45em;width:.95rem;height:.55rem;border-left:3px solid var(--wb-copper);border-bottom:3px solid var(--wb-copper);transform:rotate(-45deg)}
.wb-dont li::before{content:"\00d7";border:0;transform:none;top:-.1em;font-weight:700;font-size:1.3em;color:#a3261a;width:auto;height:auto}
.wb-photo img{border-radius:6px}
.wb-tag{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wb-copper)}

/* ---------- FAQ accordions (core/details) ---------- */
.wp-block-details{border:1px solid var(--wb-line);border-radius:6px;background:#fff;padding:0}
.wp-block-details + .wp-block-details{margin-top:.6rem}
.wp-block-details summary{cursor:pointer;padding:1rem 3rem 1rem 1.1rem;font-weight:700;font-size:1.08rem;position:relative;list-style:none}
.wp-block-details summary::-webkit-details-marker{display:none}
.wp-block-details summary::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--wb-copper);line-height:1}
.wp-block-details[open] summary::after{content:"\2212"}
.wp-block-details summary:focus-visible{outline:3px solid var(--wb-copper);outline-offset:2px}
.wp-block-details > :not(summary){margin-left:1.1rem;margin-right:1.1rem}
.wp-block-details > :last-child{margin-bottom:1.1rem}
.wp-block-details .wp-block-image{max-width:420px}
.wp-block-details .wp-block-image img{border-radius:4px}
.wp-block-details .wp-block-image figcaption{font-size:14px}

/* ---------- Contact form (Contact Form 7) ---------- */
.wpcf7 form{display:grid;gap:1rem}
.wpcf7 form > p{margin:0}
.wpcf7 form br{display:none}
.wpcf7 .wpcf7-form-control-wrap{display:block}
.wpcf7 label{display:block;font-weight:600;font-size:16px}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 select,.wpcf7 textarea{
  width:100%;box-sizing:border-box;margin-top:.35rem;padding:.75rem .8rem;border:1px solid #bdb5ae;border-radius:4px;background:#fff;font:inherit;font-size:17px;color:var(--wb-ink)}
.wpcf7 textarea{min-height:150px}
.wpcf7 input:focus-visible,.wpcf7 select:focus-visible,.wpcf7 textarea:focus-visible{outline:3px solid var(--wb-copper);outline-offset:1px;border-color:var(--wb-copper)}
.wpcf7 input[type=submit]{background:var(--wb-copper);color:#fff;border:0;border-radius:4px;padding:.9rem 1.6rem;font:inherit;font-weight:700;font-size:17px;cursor:pointer;justify-self:start}
.wpcf7 input[type=submit]:hover,.wpcf7 input[type=submit]:focus-visible{background:var(--wb-copper-dark)}
.wpcf7 .wpcf7-not-valid-tip{color:#a3261a;font-size:15px}
.wpcf7 .wb-form-note{font-size:14px;color:#5d5752}

/* ---------- Mobile call bar ---------- */
.wb-callbar{display:none}
@media (max-width:781px){
  .wb-callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;box-shadow:0 -4px 16px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--wb-ink)}
  .wb-callbar a{flex:1;text-align:center;padding:.9rem .5rem;font-weight:700;font-size:16px;text-decoration:none;color:#fff}
  .wb-callbar__call{background:var(--wb-copper)}
  body{padding-bottom:58px}
  .wb-topbar .wb-topbar-area{display:none}
}

/* ---------- Links on dark sections ---------- */
.has-ink-background-color a:not(.wp-block-button__link),.wb-hero a:not(.wp-block-button__link){color:#fff;text-decoration:underline;text-underline-offset:2px}
.has-ink-background-color a:not(.wp-block-button__link):hover{color:#f0d9c4}
.wp-block-button.is-style-outline .wp-block-button__link{color:inherit;border:2px solid currentColor;background:transparent}
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link,.wb-hero .wp-block-button.is-style-outline .wp-block-button__link{color:#fff}
.wb-copyright{opacity:.8}

/* ---------- Phone tweaks ---------- */
@media (max-width:781px){
  .wb-header .wb-header-call{display:none}
  .wb-hero::after{background:linear-gradient(180deg,rgba(20,18,17,.55) 0%,rgba(20,18,17,.72) 100%)}
}

/* ---------- Tap targets (44px minimum on phones) ---------- */
.wb-card h3 a{display:block;padding:.4rem 0}
.wb-header .wp-block-site-title a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- Contact form card (Contact page) ---------- */
.wb-form-card{border-radius:16px;padding:clamp(1.5rem,4vw,2.5rem)!important;box-shadow:0 18px 40px -18px rgba(29,74,90,.55)}
.wb-form-card h2{margin-top:0}
.wb-form-card .wpcf7 label{color:#fff;letter-spacing:.01em}
.wb-form-card .wpcf7 input[type=text],.wb-form-card .wpcf7 input[type=email],.wb-form-card .wpcf7 input[type=tel],.wb-form-card .wpcf7 select,.wb-form-card .wpcf7 textarea{
  background:#fff;border:2px solid transparent;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.wb-form-card .wpcf7 input:focus-visible,.wb-form-card .wpcf7 select:focus-visible,.wb-form-card .wpcf7 textarea:focus-visible{outline:3px solid #f2b179;outline-offset:2px;border-color:#f2b179}
.wb-form-card .wpcf7 .wb-form-note,.wb-form-card .wpcf7 .wb-form-note a{color:#d9e6ea}
.wb-form-card .wpcf7 input[type=submit]{border-radius:8px;padding:1rem 2rem;box-shadow:0 6px 16px -6px rgba(0,0,0,.45)}
.wb-form-card .wpcf7 .wpcf7-not-valid-tip{color:#ffd7cc;font-weight:600}
.wb-form-card .wpcf7 .wpcf7-response-output{color:#fff;border-radius:8px;margin:1rem 0 0}

/* ---------- Phone menu (WordPress navigation overlay, below 600px) ---------- */
@media (max-width:599px){
  /* Header: name centered on top, a full-width Menu button under it */
  .wb-header > .wp-block-group{flex-direction:column;align-items:stretch!important;gap:10px}
  .wb-header .wp-block-site-title{text-align:center;justify-content:center;display:flex}
  .wb-header > .wp-block-group > .wp-block-group{justify-content:center!important;width:100%}
  .wb-header .wp-block-navigation{width:100%;justify-content:center}
  .wb-header .wp-block-navigation__responsive-container-open{
    display:flex!important;width:100%;min-height:48px;align-items:center;justify-content:center;gap:.6rem;
    background:var(--wb-ink);color:#fff;border-radius:10px;font:700 17px/1 "Source Sans 3",sans-serif;letter-spacing:.06em;text-transform:uppercase}
  .wb-header .wp-block-navigation__responsive-container-open svg{width:22px;height:22px;fill:currentColor}
  .wb-header .wp-block-navigation__responsive-container-open::after{content:"Menu"}
  .wb-header .wp-block-navigation__responsive-container-open:focus-visible{outline:3px solid var(--wb-copper);outline-offset:3px}
}

/* The open menu: dark full screen, left-aligned, large tap rows */
.wp-block-navigation__responsive-container.is-menu-open{
  background:var(--wb-ink)!important;color:#fff!important;padding:max(20px,env(safe-area-inset-top,0px)) 24px 32px!important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{color:#fff;top:18px;right:18px}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg{width:30px;height:30px;fill:currentColor}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before{
  content:"Wayne A. Burgess, Electrician";display:block;font:700 1.1rem "Zilla Slab",Georgia,serif;color:var(--wb-taupe);padding:4px 48px 18px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{padding-top:8px!important;align-items:stretch!important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{align-items:stretch!important;justify-content:flex-start!important;width:100%;gap:0!important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item{border-bottom:1px solid rgba(255,255,255,.14)}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display:block;width:100%;text-align:left;padding:14px 4px!important;font:700 1.35rem/1.25 "Zilla Slab",Georgia,serif;color:#fff!important;text-decoration:none}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible{color:#f2b179!important;outline:none;text-decoration:underline;text-underline-offset:4px}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content{color:#f2b179!important}
/* Services list inside the menu: indented, lighter, with a copper rule */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  padding:0 0 12px 14px!important;margin-left:4px!important;border-left:3px solid var(--wb-copper)!important;gap:0!important;background:transparent!important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding:9px 4px!important;font:600 1.05rem/1.3 "Source Sans 3",sans-serif;color:#e9e3de!important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle{display:none!important}
@media (max-width:599px){.wb-header .wp-block-navigation__responsive-container-open{background:var(--wp--preset--color--harbor,#1d4a5a)}}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus{outline:none}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible{outline:2px solid #f2b179;outline-offset:2px;border-radius:4px;text-decoration:none}