/*
Theme Name: Evalec Child
Theme URI: https://evalecelectrical.co.uk
Description: Child theme for Evalec Electrical. Ships design tokens (theme.json) and homepage block patterns. Parent defaults to GeneratePress — change the "Template:" line below to "kadence" if you install Kadence instead.
Author: RJH
Template: generatepress
Version: 1.5.5
Text Domain: evalec-child
*/

/* =========================================================
   All styling is scoped to .evalec-section so it never
   fights the parent theme's global styles. Every pattern's
   outer group carries the .evalec-section class.
   ========================================================= */

.evalec-section{
  font-family:'IBM Plex Sans',sans-serif;
  color:#16202E;
  line-height:1.55;
}
.evalec-section h1,
.evalec-section h2,
.evalec-section h3,
.evalec-section h4{
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:-0.02em;
  line-height:1.08;
}
.evalec-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:#D97410;font-weight:700;
}
.evalec-callnum{
  font-family:'IBM Plex Mono',monospace;font-weight:700;color:#F68712;
}

/* ---- Buttons ---- */
.evalec-section .wp-block-button__link{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:-0.01em;
  border-radius:10px;padding:15px 26px;
}
.evalec-section .evalec-btn-amber .wp-block-button__link{
  box-shadow:0 6px 20px rgba(246,135,18,.32);
}
.evalec-section .evalec-btn-ghost .wp-block-button__link{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.28);
}
.evalec-section .evalec-btn-ghost .wp-block-button__link:hover{
  border-color:#F68712;color:#F68712;
}

/* ---- Hero ---- */
.evalec-hero{position:relative;overflow:hidden;}
.evalec-hero::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 75% 25%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 75% 25%,#000 30%,transparent 75%);
}
.evalec-hero>*{position:relative;z-index:2;}
.evalec-hero .evalec-quotecard{
  background:linear-gradient(160deg,#16283F,#1E3452);
  border:1px solid rgba(255,255,255,.1);border-radius:18px;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.niceic-badge{
  background:#F68712;color:#0E1A2B;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:13px;padding:8px 12px;border-radius:8px;line-height:1.1;display:inline-block;
}

/* ---- Trust stat row ---- */
.evalec-stat b{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;color:#fff;display:block;}
.evalec-stat span{font-size:12.5px;color:#9AA7B8;}

/* ---- Trust strip ---- */
.evalec-trust-strip .evalec-trust-item{font-size:14px;font-weight:600;}
.evalec-stars{color:#F68712;letter-spacing:1px;}

/* ---- Cards (services / why / reviews) ---- */
.evalec-card{
  background:#fff;border:1px solid #E2E6EC;border-radius:16px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  height:100%;
}
.evalec-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(14,26,43,.1);border-color:#CFD6E0;}
.evalec-card.on-dark{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);}
.evalec-card.on-dark:hover{transform:none;box-shadow:none;}
.evalec-ico{
  width:52px;height:52px;border-radius:12px;background:#0E1A2B;
  display:grid;place-items:center;color:#F68712;font-size:24px;
}

/* ---- Coverage / map ---- */
.evalec-map{
  background:#0E1A2B;border-radius:18px;min-height:320px;position:relative;overflow:hidden;
  display:grid;place-items:center;color:#fff;text-align:center;
}
.evalec-map::before{
  content:"";position:absolute;inset:0;opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:34px 34px;
}
.evalec-map>*{position:relative;z-index:2;}
.evalec-map .dot{
  width:20px;height:20px;background:#F68712;border-radius:50%;margin:0 auto 12px;
  box-shadow:0 0 0 8px rgba(246,135,18,.22),0 0 0 18px rgba(246,135,18,.1);
}

/* ---- Reviews ---- */
.g-badge{background:#F5F6F8;border:1px solid #E2E6EC;border-radius:12px;padding:12px 18px;display:inline-flex;align-items:center;gap:12px;}
.g-badge .rate{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;}
.evalec-av{width:38px;height:38px;border-radius:50%;background:#0E1A2B;color:#F68712;display:grid;place-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;}

/* ---- Focus states ---- */
.evalec-section a:focus-visible,
.evalec-section .wp-block-button__link:focus-visible{outline:3px solid #F68712;outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  .evalec-card{transition:none;}
}

/* Hide GeneratePress page title on the static front page — the hero carries the headline.
   (Applies once the page is set as the front page under Settings → Reading.) */
.evalec-fullbleed .entry-header{ display:none; }

/* --- Legible text on the dark sections (hero + why) ---
   GeneratePress only partially honours theme.json, so white/light block colours
   fall back to GP's dark default. These rules assert them directly. --- */
.evalec-hero,
.evalec-dark{ color:#C6D0DC; }
.evalec-hero h1,.evalec-hero h2,.evalec-hero h3,.evalec-hero h4,
.evalec-dark h1,.evalec-dark h2,.evalec-dark h3,.evalec-dark h4{ color:#ffffff; }
.evalec-hero p:not(.evalec-eyebrow),
.evalec-dark p:not(.evalec-eyebrow):not(.evalec-num){ color:#C6D0DC; }
.evalec-hero h1 mark,
.evalec-dark h1 mark{ color:#F68712; background:transparent; }
.evalec-num{ color:#F68712; font-family:'IBM Plex Mono',monospace; }

/* --- True full-bleed on the front page ---
   GeneratePress "Separate Containers" wraps page content in a padded white box —
   that's the frame around the sections. On the homepage we strip the box so the
   full-width sections reach the viewport edges. Scoped to .evalec-fullbleed so other pages
   keep their normal boxed layout. --- */
.evalec-fullbleed #content{ max-width:100% !important; width:100% !important; padding:0 !important; margin:0 !important; }
.evalec-fullbleed #content .container,
.evalec-fullbleed #content .grid-container,
.evalec-fullbleed .content-area{ max-width:100% !important; width:100% !important; padding:0 !important; margin:0 !important; }
.evalec-fullbleed #primary,
.evalec-fullbleed .site-main{ width:100% !important; padding:0 !important; margin:0 !important; }
.evalec-fullbleed article,
.evalec-fullbleed .inside-article{
  margin:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.evalec-fullbleed .entry-content{ margin:0 !important; }

/* --- Force dark-section text colours over GeneratePress (v1.1.3) ---
   GP strips the inline block colours and sets its own on headings, so these win
   with !important. Amber highlight, eyebrow and numbers are preserved. --- */
.evalec-hero h1,.evalec-hero h2,.evalec-hero h3,.evalec-hero h4,
.evalec-dark h1,.evalec-dark h2,.evalec-dark h3,.evalec-dark h4{ color:#ffffff !important; }
.evalec-hero p:not(.evalec-eyebrow),
.evalec-dark p:not(.evalec-eyebrow):not(.evalec-num){ color:#C6D0DC !important; }
.evalec-hero h1 mark,
.evalec-dark h1 mark{ color:#F68712 !important; background:transparent !important; }
.evalec-dark .evalec-num{ color:#F68712 !important; }

/* --- Definitive full-bleed (v1.1.4) ---
   The container is 1200px, so on wide screens the page background shows beside it —
   that's the "border". This pulls every full-width section out to the true viewport
   width regardless of container settings, without touching the header. --- */
body.evalec-fullbleed{ overflow-x:hidden; }
.evalec-fullbleed .alignfull{
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  width: 100vw !important;
}
/* kill any vertical gap between the header and the first section */
.evalec-fullbleed #primary,
.evalec-fullbleed .site-main,
.evalec-fullbleed article,
.evalec-fullbleed .inside-article,
.evalec-fullbleed .entry-content{ padding-top:0 !important; margin-top:0 !important; }

/* --- Site header styled to match the brand (dark, sticky) --- */
.site-header,
.main-navigation,
.main-navigation .inside-navigation{ background:#0E1A2B !important; }
.site-header a,
.main-navigation a,
.main-title a,
.site-title a,
.site-header .site-description{ color:#ffffff !important; }
.main-navigation a:hover,
.main-navigation .current-menu-item > a{ color:#F68712 !important; }
.site-header{ position:sticky; top:0; z-index:100; }

/* --- Full-bleed keyed to the section's own classes (v1.1.6) ---
   No dependence on a body class or front-page status — every section carries both
   .evalec-section and .alignfull, so this pulls each one out to the true viewport
   width regardless of the 1200px container. --- */
.evalec-section.alignfull{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
/* stop any scrollbar-width overflow without breaking the sticky header */
html,body{ overflow-x:clip; }

/* --- Legible text on ANY ink-navy element (v1.1.7) ---
   Keyed to the background class itself, so it catches the Why section, the hero,
   and ink-backed buttons regardless of which helper classes they carry. --- */
.has-ink-background-color h1,.has-ink-background-color h2,
.has-ink-background-color h3,.has-ink-background-color h4{ color:#ffffff !important; }
.has-ink-background-color p:not(.evalec-eyebrow):not(.evalec-num){ color:#C6D0DC !important; }
.wp-block-button__link.has-ink-background-color{ color:#ffffff !important; }

/* Full-bleed fix (contributed by Ross): also release the outer #page wrapper
   (GeneratePress's site container), not just #content, so the white margins reach
   the browser edges. */
.evalec-fullbleed #page{
  max-width:100% !important;
  width:100% !important;
}

/* --- Style Fluent Forms inside the dark hero quote card (v1.1.9) ---
   Scoped to .evalec-quotecard so it only affects the hero form, not forms on
   other pages. Matches the card: light labels, translucent inputs, amber submit. */
.evalec-quotecard label{ color:#C6D0DC !important; font-family:'IBM Plex Sans',sans-serif; font-size:13px; }
.evalec-quotecard .ff-el-form-control,
.evalec-quotecard input[type=text],
.evalec-quotecard input[type=tel],
.evalec-quotecard input[type=email],
.evalec-quotecard textarea{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#ffffff !important;
  border-radius:9px !important;
}
.evalec-quotecard .ff-el-form-control::placeholder{ color:#8593A5 !important; }
.evalec-quotecard .ff-btn-submit,
.evalec-quotecard button[type=submit]{
  background:#F68712 !important; color:#0E1A2B !important;
  font-family:'Barlow Condensed',sans-serif !important; font-weight:800 !important;
  font-size:16px !important; border:none !important; border-radius:10px !important;
  width:100% !important; padding:14px !important; cursor:pointer;
}
.evalec-quotecard .ff-btn-submit:hover{ background:#D97410 !important; }
.evalec-quotecard .ff-message-success{ color:#ffffff !important; }

/* --- Mobile sticky Call/WhatsApp bar (v1.2.0) --- */
.evalec-mobilebar{ display:none; }
@media (max-width:768px){
  .evalec-mobilebar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:200;
    background:#0E1A2B; border-top:1px solid rgba(255,255,255,.12); padding:8px; gap:8px;
  }
  .evalec-mobilebar a{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:13px; border-radius:10px; text-decoration:none;
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:17px;
  }
  .evalec-mobilebar .emb-call{ background:#F68712; color:#0E1A2B; }
  .evalec-mobilebar .emb-wa{ background:#25D366; color:#ffffff; }
  .evalec-mobilebar svg{ width:19px; height:19px; }
  body{ padding-bottom:66px; }
}

/* --- WhatsApp header button (v1.2.2) ---
   Renders a green WhatsApp button WITH icon for a menu item that either links to a
   WhatsApp URL (wa.me / whatsapp.com, any case) OR carries the CSS class "wa-btn".
   The class route works even before the real number is set. --- */
.main-navigation a[href*="wa.me" i],
.main-navigation a[href*="whatsapp" i],
.main-navigation .wa-btn > a{
  background-color:transparent !important;
  color:#ffffff !important;
  border:1.5px solid #25D366;
  border-radius:8px;
  padding:7px 16px 7px 38px !important;
  font-weight:700;
  background-repeat:no-repeat;
  background-position:14px center;
  background-size:17px 17px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.1-.6.1-.2.3-.7.9-.8 1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.6-1.5-.8-2-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9.6.3 1.1.4 1.5.5.6.2 1.2.2 1.6.1.5-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.2-.3-.2-.6-.4zM12 2a10 10 0 0 0-8.6 15l-1.3 4.8 4.9-1.3A10 10 0 1 0 12 2z'/%3E%3C/svg%3E");
}
.main-navigation a[href*="wa.me" i]:hover,
.main-navigation a[href*="whatsapp" i]:hover,
.main-navigation .wa-btn > a:hover{ background-color:#25D366 !important; color:#ffffff !important; border-color:#25D366; }

/* --- Header logo sizing + padding (v1.2.1) ---
   The uploaded logo renders at full size and jams against the top; cap its height
   and give the header balanced padding so it sits neatly with the nav. --- */
.site-header .inside-header{
  padding-top:16px !important;
  padding-bottom:16px !important;
  align-items:center;
}
.site-header .site-logo img,
.site-header .header-image,
.site-header img{
  max-height:50px !important;
  width:auto !important;
}

/* --- Recent-work photo carousel (v1.3.0) ---
   Turns a Gallery block set to the "Evalec Carousel" style into a swipeable,
   uniform-size carousel. Every photo renders at the same dimensions via
   object-fit:cover, regardless of the size it was uploaded at. --- */
.evalec-carousel-wrap{ position:relative; }
.wp-block-gallery.is-style-evalec-carousel{
  display:flex !important; flex-wrap:nowrap !important; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:6px; margin:0;
  scrollbar-width:none;
}
.wp-block-gallery.is-style-evalec-carousel::-webkit-scrollbar{ display:none; }
.wp-block-gallery.is-style-evalec-carousel .wp-block-image{
  flex:0 0 auto !important; scroll-snap-align:start; margin:0 !important;
  width:min(82vw, 360px) !important;
}
.wp-block-gallery.is-style-evalec-carousel .wp-block-image img{
  width:100% !important; height:270px !important; object-fit:cover !important;
  max-width:none !important; display:block; border-radius:14px;
}
/* Arrow buttons (desktop; mobile just swipes) */
.evalec-car-btn{
  position:absolute; top:135px; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:#F68712; color:#0E1A2B; font-family:'Barlow Condensed',sans-serif;
  font-size:26px; font-weight:800; line-height:1; display:grid; place-items:center;
  z-index:5; box-shadow:0 6px 18px rgba(14,26,43,.22);
}
.evalec-car-btn:hover{ background:#D97410; }
.evalec-car-prev{ left:-10px; }
.evalec-car-next{ right:-10px; }
@media (max-width:768px){ .evalec-car-btn{ display:none; } }

/* --- Mobile burger icon: make it clearly visible on the dark header (v1.3.3) ---
   The toggle is a <button>, so the white nav-link colour never reached it. --- */
.menu-toggle,
.menu-toggle .mobile-menu{ color:#ffffff !important; }
.menu-toggle .gp-icon,
.menu-toggle .gp-icon svg,
.menu-toggle svg{ fill:#ffffff !important; color:#ffffff !important; }
.main-navigation .menu-toggle svg{ width:28px !important; height:28px !important; }

/* --- Smooth in-page scrolling + offset so sticky header doesn't cover the target --- */
html{ scroll-behavior:smooth; }
.evalec-section{ scroll-margin-top:90px; }

/* --- Nav typography to match the site body font (v1.3.6) ---
   Menu was still on GeneratePress's default font; align it with IBM Plex Sans. --- */
.main-navigation a,
.main-navigation .menu li a,
.main-navigation .menu-toggle{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-weight:600;
}

/* --- Instagram link in the nav renders as an icon (v1.3.7) ---
   Add a menu item (Custom Link) pointing at the Instagram URL and it shows as an icon. --- */
.main-navigation a[href*="instagram" i]{
  padding-left:30px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F68712' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Cline x1='17.5' y1='6.5' x2='17.5' y2='6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left center; background-size:21px 21px;
}

/* --- Spacing so the WhatsApp pill and Instagram don't collide (v1.3.9) --- */
.main-navigation .wa-btn > a,
.main-navigation a[href*="wa.me" i],
.main-navigation a[href*="whatsapp" i]{ margin-left:8px !important; margin-right:16px !important; }
.main-navigation a[href*="instagram" i]{ margin-left:4px !important; }

/* --- Tighten nav so the full set fits on one line (v1.4.0) ---
   Reduce per-item spacing and trim the WhatsApp/Instagram margins so nothing wraps. --- */
.main-navigation .main-nav ul li a:not([href*="wa.me" i]):not([href*="whatsapp" i]):not([href*="instagram" i]){ padding-left:12px !important; padding-right:12px !important; }
.main-navigation .wa-btn > a,
.main-navigation a[href*="wa.me" i],
.main-navigation a[href*="whatsapp" i]{ margin-left:4px !important; margin-right:10px !important; }
.main-navigation a[href*="instagram" i]{ margin-left:2px !important; }

/* --- Service card lists: tidier indent + more generous spacing (v1.4.2) --- */
.evalec-card .wp-block-list{ padding-left:22px !important; margin-top:16px; }
.evalec-card .wp-block-list li{ margin-bottom:14px; font-size:16px; line-height:1.4; }
.evalec-card .wp-block-list li:last-child{ margin-bottom:0; }

/* --- Equal-height cards in the card sections (services/why/reviews) (v1.4.4) ---
   Force the columns into flex + stretch, and clear the card's fixed height so it
   actually stretches. Excludes the vertically-centred layouts (coverage/CTA). --- */
.evalec-section .wp-block-columns:not(.are-vertically-aligned-center){
  display:flex !important;
  align-items:stretch !important;
}
.evalec-section .wp-block-columns:not(.are-vertically-aligned-center) > .wp-block-column{
  align-self:stretch !important;
  height:auto !important;
}

/* --- NICEIC badge: show Adrian's real accreditation logo (v1.4.5) ---
   The logo ships in the theme (assets/niceic-white.png) and this swaps it in over
   the old orange text badge — no page editing needed. --- */
.niceic-badge{
  background-color:transparent !important;
  color:transparent !important;
  font-size:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  display:inline-block;
  width:150px; height:58px;
  background-image:url("assets/niceic-white.png") !important;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
}

/* --- NICEIC stat: full accreditation logo, no separate label (v1.4.8) ---
   The full logo already includes "APPROVED CONTRACTOR", so the text label is hidden. --- */
.evalec-stat:nth-child(2) b{
  font-size:0 !important; color:transparent !important;
  display:block; width:130px; height:52px;
  background-image:url("assets/niceic-white.png") !important;
  background-repeat:no-repeat; background-position:left center; background-size:contain;
}
.evalec-stat:nth-child(2) span{ display:none !important; }


/* --- Area list: responsive columns on mobile (v1.4.9) ---
   Add class="evalec-areas" to the area-list grid div and this makes it collapse
   from 3 columns to 2 on phones and 1 on very narrow screens. --- */
@media (max-width:768px){ .evalec-areas{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:340px){ .evalec-areas{ grid-template-columns:1fr !important; } }

/* --- Adrian feedback round (v1.5.0) --- */
.niceic-badge{ display:none !important; }        /* remove NICEIC logo from the quote card (it's in the stat row now) */
.evalec-num{ display:none !important; }          /* remove the / 01 / 02 / 03 index labels */
.evalec-trust-strip{ display:none !important; }  /* remove the trust strip */
.evalec-quotecard{ scroll-margin-top:90px; }     /* offset when "Get a free quote" scrolls here */

/* --- "Follow our work on Instagram" button above the work carousel (v1.5.2) --- */
.evalec-ig-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  color:#ffffff; text-decoration:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:15px; letter-spacing:.01em;
  padding:12px 24px; border-radius:30px;
  box-shadow:0 6px 18px rgba(188,24,136,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.evalec-ig-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(188,24,136,.4); color:#ffffff; }
.evalec-ig-btn svg{ width:19px; height:19px; }
.evalec-ig-wrap{ text-align:center; margin-top:30px; margin-bottom:26px; }