/*
Theme Name: Rewire Team
Theme URI: https://rewireteam.co.uk
Description: Rewire Team (by Lucid Electrical Services) — GeneratePress child theme built on the RJH Digital starter. Black & white, dark-led. Design tokens in theme.json + the :root block below; sections are block patterns under the "Rewire Team" category. Re-skin = edit the tokens + swap content. Change "Template:" to match the installed parent.
Author: RJH Digital
Template: generatepress
Version: 1.4.2
Text Domain: rewire-team
*/

/* ============================================================
   TOKENS  (mirror theme.json). Pure black & white — no accent.
   ============================================================ */
:root{
  --ink:#0B0C0E; --panel:#15171B; --panel-2:#1B1E23;
  --paper:#ECEEF0; --card:#FFFFFF;
  --steel-line:#2A2F36;                 /* dividers on dark   */
  --steel-hi:#EAEEF2; --steel-mid:#9AA3AD;
  --on-dark:#E7EAEE; --on-dark-muted:#98A1AB;
  --line:#D8DCE0;                        /* dividers on light  */
  --text:#16181C; --muted:#565C64;
  --brushed:linear-gradient(100deg,#3C424A 0%,#9AA3AD 30%,#5B636D 50%,#9AA3AD 70%,#3C424A 100%);
  --display:'Archivo',sans-serif;
  --body:'Figtree',sans-serif;
}

/* ============================================================
   BASE (scoped to .rt-section so it never fights the parent)
   ============================================================ */
.rt-section{ font-family:var(--body); color:var(--text); line-height:1.6; background:var(--card); }
/* hairline divider between two adjacent light sections so whites don't merge */
.rt-section:not(.rt-dark) + .rt-section:not(.rt-dark){ border-top:1px solid var(--line); }
.rt-section.rt-white{ background:var(--card); }
.rt-section h1,.rt-section h2,.rt-section h3{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.05; color:var(--ink);
}
.rt-eyebrow{
  font-family:var(--body); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.rt-sub{ font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:60ch; line-height:1.55; }
.rt-sub strong{ color:var(--text); font-weight:600; }
.rt-lede{ font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:62ch; }
.rt-section p{ font-size:17px; }
.rt-note{ font-size:14px; color:var(--muted); }

/* Lists */
.rt-section .wp-block-list{ list-style:none; margin:0; padding:0; }
.rt-section .wp-block-list li{
  position:relative; padding:11px 0 11px 26px; border-top:1px solid var(--line);
  color:var(--text); font-size:16px;
}
.rt-section .wp-block-list li:first-child{ border-top:0; }
.rt-section .wp-block-list li::before{
  content:""; position:absolute; left:0; top:19px; width:8px; height:8px;
  background:var(--ink); border-radius:50%;
}

/* Buttons */
.rt-section .wp-block-button__link{
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.02em;
  text-transform:uppercase; padding:15px 26px; border-radius:2px; border:1.5px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.rt-btn-solid  .wp-block-button__link{ background:var(--ink); color:#fff; border-color:var(--ink); }
.rt-btn-solid  .wp-block-button__link:hover{ background:#23272E; border-color:#23272E; }
.rt-btn-invert .wp-block-button__link{ background:#fff; color:var(--ink); border-color:#fff; }
.rt-btn-invert .wp-block-button__link:hover{ background:var(--steel-hi); }
.rt-btn-ghost-dark  .wp-block-button__link{ background:transparent; color:var(--on-dark); border-color:var(--steel-mid); }
.rt-btn-ghost-dark  .wp-block-button__link:hover{ border-color:var(--steel-hi); background:rgba(255,255,255,.06); }
.rt-btn-ghost-light .wp-block-button__link{ background:transparent; color:var(--ink); border-color:#C7CCD1; }
.rt-btn-ghost-light .wp-block-button__link:hover{ border-color:var(--ink); background:#fff; }
.rt-section a:focus-visible,.rt-section .wp-block-button__link:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

/* ============================================================
   FULL-BLEED (from the starter — sections span the viewport,
   content held by each group's constrained layout)
   ============================================================ */
html,body{ overflow-x:clip; }
.rt-fullbleed #page{ max-width:100% !important; width:100% !important; }
.rt-fullbleed #content,
.rt-fullbleed #primary,
.rt-fullbleed .site-main,
.rt-fullbleed article,
.rt-fullbleed .inside-article,
.rt-fullbleed .entry-content{ padding:0 !important; margin:0 !important; max-width:100% !important; }
.rt-fullbleed article,
.rt-fullbleed .inside-article{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.rt-fullbleed .entry-header{ display:none; }
.rt-section.alignfull{
  width:100vw !important; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
}

/* ============================================================
   HEADER (dark, sticky) + nav "Enquire" button
   ============================================================ */
.site-header{ background:var(--ink) !important; border-bottom:1px solid var(--steel-line); position:sticky; top:0; z-index:60; }
.site-header .inside-header{ padding-top:12px !important; padding-bottom:12px !important; align-items:center; }
.main-title a,.site-title a{
  font-family:var(--display) !important; font-weight:900 !important; color:#fff !important;
  text-transform:uppercase; letter-spacing:.05em; font-size:22px;
  display:inline-block; padding-bottom:7px;
  background-image:var(--brushed); background-repeat:no-repeat;
  background-position:left bottom; background-size:100% 2px;
}
.site-branding .main-title{ line-height:1; margin:0; }
.site-branding .main-title::after{
  content:"of Lucid Electrical Services"; display:block; margin-top:7px;
  font-family:var(--body) !important; font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; font-size:10px; color:var(--steel-mid);
}
/* our ::after supplies the kicker — hide GP's own tagline line to avoid duplicates */
.site-description{ display:none !important; }
.main-navigation,.main-navigation .inside-navigation{ background:var(--ink) !important; }
.main-navigation .main-nav ul li a{ color:#fff !important; font-family:var(--body) !important; font-weight:500; }
.main-navigation .main-nav ul li a:hover{ color:#fff !important; opacity:.7; }
.main-navigation .main-nav ul li.current-menu-item a{ color:#fff !important; }
.menu-toggle,.menu-toggle .gp-icon,.menu-toggle svg{ color:#fff !important; fill:#fff !important; }
/* add CSS class "rt-navquote" to the "Enquire" menu item (Menus → Screen Options → CSS Classes) */
.main-navigation .rt-navquote{ display:flex; align-items:center; }
.main-navigation .rt-navquote a{
  background:#fff !important; color:var(--ink) !important; border:1.5px solid #fff;
  border-radius:2px; padding:10px 18px !important; line-height:1 !important; height:auto !important;
  font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:13px; letter-spacing:.02em;
}
.main-navigation .rt-navquote a:hover{ background:var(--steel-hi) !important; color:var(--ink) !important; }
/* out-specify GP's .main-nav ul li a colour so the button text stays black (not grey/white) */
.main-navigation .main-nav ul li.rt-navquote a,
.main-navigation .main-nav ul li.rt-navquote a:hover{ color:var(--ink) !important; opacity:1 !important; }

/* ============================================================
   HERO (dark)
   ============================================================ */
.rt-hero{ padding-top:clamp(56px,8vw,104px) !important; padding-bottom:clamp(52px,7vw,92px) !important; }
.rt-hero h1{ font-size:clamp(40px,7vw,72px); letter-spacing:-.03em; color:#fff; max-width:16ch; }
.rt-hero .rt-eyebrow{ display:block; margin-bottom:22px; }
.rt-hero .rt-sub{ margin-top:24px; color:var(--on-dark); max-width:56ch; }
.rt-hero .rt-note{ color:var(--on-dark-muted); margin-top:16px; max-width:48ch; }
.rt-hero .wp-block-buttons{ margin-top:32px; }

/* ============================================================
   STAT PLATE (Home) — machined data band
   ============================================================ */
.rt-plate{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--steel-line); border-radius:3px; overflow:hidden; margin-top:40px; }
.rt-plate .cell{ padding:22px 20px; border-left:1px solid var(--steel-line); }
.rt-plate .cell:first-child{ border-left:0; }
.rt-plate .fig{ font-family:var(--display); font-weight:800; font-size:26px; color:#fff; line-height:1; }
.rt-plate .lab{ font-size:13.5px; color:var(--on-dark-muted); margin-top:6px; }

/* ============================================================
   GENERIC CONTENT BLOCKS (light)
   ============================================================ */
.rt-block{ padding-top:clamp(52px,7vw,84px) !important; padding-bottom:clamp(52px,7vw,84px) !important; }
.rt-block h2{ font-size:clamp(28px,4vw,44px); max-width:20ch; }
.rt-block h3{ font-size:clamp(19px,2.2vw,24px); margin-top:6px; }
.rt-h-lede{ margin-top:16px; }

/* Two-column feature lists */
.rt-features{ margin-top:30px; }

/* Card (white panel on paper) */
.rt-card{ background:var(--card); border:1px solid var(--line); border-radius:3px; padding:clamp(24px,3vw,34px); }
.rt-card.dark{ background:var(--ink); border-color:var(--steel-line); }
.rt-card.dark h2,.rt-card.dark h3{ color:#fff !important; }
.rt-card.dark p{ color:var(--on-dark) !important; }
.rt-rule{ height:2px; width:52px; background:var(--brushed); border-radius:2px; margin:6px 0 0; }

/* Service cards (Home) */
.rt-svc{ background:var(--card); border:1px solid var(--line); border-top:3px solid var(--ink); border-radius:3px; padding:28px 26px; height:100%; }
.rt-svc h3{ font-size:22px; }
.rt-svc p{ color:var(--muted); font-size:15.5px; margin-top:12px; }

/* Why-rows (hairline blocks, not cards) */
.rt-why{ border-top:1px solid var(--line); margin-top:34px; }
.rt-why .row{ display:grid; grid-template-columns:minmax(200px,1fr) 2fr; gap:clamp(16px,4vw,48px); padding:26px 0; border-bottom:1px solid var(--line); }
.rt-why h3{ font-size:20px; }
.rt-why p{ color:var(--muted); font-size:16px; }

/* Areas chips */
.rt-areas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.rt-areas span{ border:1px solid #C7CCD1; border-radius:2px; padding:9px 16px; font-weight:600; font-size:15px; background:#fff; }

/* ============================================================
   CLOSING CTA BAND (dark)
   ============================================================ */
.rt-cta{ padding-top:clamp(56px,7vw,88px) !important; padding-bottom:clamp(56px,7vw,88px) !important; text-align:center; }
.rt-cta h2{ color:#fff; font-size:clamp(26px,4vw,40px); max-width:22ch; margin:0 auto; }
.rt-cta .rt-sub{ margin:18px auto 0; color:var(--on-dark-muted); }
.rt-cta .wp-block-buttons{ margin-top:30px; }

/* ============================================================
   DARK SECTIONS — force legible text (GP ignores theme.json presets)
   ============================================================ */
.rt-dark{ background:var(--ink) !important; }
.rt-dark h1,.rt-dark h2,.rt-dark h3{ color:#fff !important; }
.rt-dark p:not(.rt-eyebrow):not(.fig):not(.lab){ color:var(--on-dark) !important; }
.rt-dark .rt-eyebrow{ color:var(--on-dark-muted) !important; }

/* ============================================================
   FOOTER (dark credit bar)
   ============================================================ */
.site-footer .site-info{ background:var(--ink) !important; color:var(--on-dark-muted); border-top:1px solid var(--steel-line); }
.site-footer .inside-site-info{ padding:26px 0 !important; }
.rt-foot{ font-family:var(--body); font-size:13.5px; color:var(--on-dark-muted); line-height:1.8; }
.rt-foot strong{ color:#fff; font-weight:800; font-family:var(--display); letter-spacing:.02em; }
.rt-foot a{ color:var(--on-dark); border-bottom:1px solid var(--steel-mid); }
.rt-foot a:hover{ color:#fff; }
.rt-foot .legal{ color:var(--on-dark-muted); opacity:.85; }

/* ============================================================
   BUTTON COLOURS must beat GeneratePress defaults (v1.0.0)
   ============================================================ */
.rt-btn-solid  .wp-block-button__link{ background:var(--ink) !important; color:#fff !important; }
.rt-btn-invert .wp-block-button__link{ background:#fff !important; color:var(--ink) !important; }
.rt-btn-ghost-dark  .wp-block-button__link{ background:transparent !important; color:var(--on-dark) !important; }
.rt-btn-ghost-light .wp-block-button__link{ background:transparent !important; color:var(--ink) !important; }
.rt-btn-ghost-dark  .wp-block-button__link:hover{ background:rgba(255,255,255,.06) !important; }
.rt-btn-ghost-light .wp-block-button__link:hover{ background:#fff !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .main-navigation .rt-navquote a{ display:inline-block; margin:6px 0; }
  .rt-plate{ grid-template-columns:repeat(2,1fr); }
  .rt-plate .cell:nth-child(3){ border-left:0; }
  .rt-plate .cell:nth-child(n+3){ border-top:1px solid var(--steel-line); }
  .rt-why .row{ grid-template-columns:1fr; gap:6px; }
}
@media(max-width:600px){
  .rt-plate{ grid-template-columns:1fr; }
  .rt-plate .cell{ border-left:0; border-top:1px solid var(--steel-line); }
  .rt-plate .cell:first-child{ border-top:0; }
}
@media(prefers-reduced-motion:reduce){
  .rt-section *{ transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   ALIGNMENT FIX (v1.0.1)
   Constrained layout centres every child at its OWN max-width,
   which staggers the hero (eyebrow / heading / text / buttons
   each land at a different left edge). Hold the content in a
   centred 1140 column and left-align every direct child to one
   edge. CTA bands stay centred (they don't get .rt-block).
   ============================================================ */
.rt-section.rt-hero,
.rt-section.rt-block{
  padding-left:  max(24px, calc((100% - 1140px) / 2)) !important;
  padding-right: max(24px, calc((100% - 1140px) / 2)) !important;
}
.rt-section.rt-hero  > *,
.rt-section.rt-block > *{ margin-left:auto !important; margin-right:auto !important; }

/* ============================================================
   EYEBROW REMOVED (v1.0.2) — the hero grey line duplicated the
   header lockup on Home. Hidden site-wide per request; delete
   this rule to bring the page-context labels back.
   ============================================================ */
.rt-hero .rt-eyebrow{ display:none !important; }

/* ============================================================
   MOBILE QUICK-CONTACT BAR (v1.0.2) — WhatsApp / Text / Call.
   Output in functions.php via wp_footer; mobile only.
   ============================================================ */
.rt-mobilebar{ display:none; }
@media(max-width:768px){
  .rt-mobilebar{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--ink); border-top:1px solid var(--steel-line);
  }
  .rt-mobilebar a{
    display:flex; align-items:center; justify-content:center;
    padding:14px 2px; color:#fff !important; text-decoration:none;
    border-left:1px solid var(--steel-line);
  }
  .rt-mobilebar a:first-child{ border-left:0; }
  .rt-mobilebar a svg{ width:26px; height:26px; display:block; }
  .rt-mobilebar a:active{ background:rgba(255,255,255,.10); }
  body{ padding-bottom:58px; } /* clear the fixed bar */
}

/* ============================================================
   TWO-COLUMN LISTS → ONE CONTINUOUS LIST ON MOBILE (v1.0.3)
   Desktop keeps two columns. When columns stack (<=781px) we
   remove the inter-column gap and add the divider at the join
   so the two lists read as a single uninterrupted list.
   ============================================================ */
@media(max-width:781px){
  .rt-features{ gap:0 !important; row-gap:0 !important; }
  .rt-features > .wp-block-column{ margin:0 !important; }
  .rt-features > .wp-block-column + .wp-block-column > .wp-block-list > li:first-child{
    border-top:1px solid var(--line) !important;
  }
}

/* ============================================================
   CENTRE ALIGNMENT (v1.1.0) — client preference: everything
   centred, desktop + mobile. (Trade-off: centred long body
   copy is harder to read than left-aligned — noted to client.)
   ============================================================ */
.rt-section.rt-hero,
.rt-section.rt-block{ text-align:center; }
.rt-hero .wp-block-buttons,
.rt-block .wp-block-buttons{ justify-content:center !important; }
/* lists: centre them, bullet sits inline before the text */
.rt-hero .wp-block-list,
.rt-block .wp-block-list{ max-width:640px; margin-left:auto; margin-right:auto; }
.rt-hero .wp-block-list li,
.rt-block .wp-block-list li{ text-align:center; padding-left:0; }
.rt-hero .wp-block-list li::before,
.rt-block .wp-block-list li::before{
  position:static; display:inline-block; margin-right:9px; vertical-align:middle; top:auto;
}
.rt-rule{ margin-left:auto !important; margin-right:auto !important; }
.rt-svc{ text-align:center; }
.rt-svc .go{ align-self:center; }

/* ============================================================
   AREAS — smarter pills, centred (v1.1.0)
   ============================================================ */
.rt-areas{ justify-content:center; gap:8px; }
.rt-areas span{
  border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  font-weight:600; font-size:14px; letter-spacing:.01em; background:#fff; color:var(--text);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.rt-areas span:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ============================================================
   STAT PLATE — centred + interactive; NICEIC cell links out (v1.1.0)
   ============================================================ */
.rt-plate .cell{ text-align:center; transition:background .15s ease; }
.rt-plate a.cell,
.rt-plate .cell a{ display:block; text-decoration:none; color:inherit; }
.rt-plate a.cell:hover,
.rt-plate .cell:hover{ background:var(--panel-2); }
.rt-plate a.cell::after{
  content:"Learn more \2192"; display:block; margin-top:8px;
  font-family:var(--body); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-mid);
}

/* ============================================================
   NAV EMAIL button (v1.1.0) — add a Custom Link (mailto:) menu
   item with the CSS class  rt-navemail
   ============================================================ */
.main-navigation .rt-navemail a{
  border:1.5px solid var(--steel-mid); border-radius:2px;
  padding:10px 16px !important; line-height:1 !important; height:auto !important;
  font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:13px; letter-spacing:.02em;
}
.main-navigation .main-nav ul li.rt-navemail a,
.main-navigation .main-nav ul li.rt-navemail a:hover{ color:#fff !important; opacity:1 !important; }
.main-navigation .rt-navemail a:hover{ border-color:#fff !important; background:rgba(255,255,255,.06) !important; }

/* Google reviews banner (used by the Reviews Banner pattern) */
.rt-reviews{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.rt-reviews .g{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:18px; }
.rt-reviews .g svg{ width:26px; height:26px; }
.rt-reviews .stars{ letter-spacing:3px; font-size:22px; color:#111; }

/* ============================================================
   v1.2.0 — green WhatsApp icon + embedded form
   ============================================================ */
/* mobile bar — brand colours (Instagram is a gradient inside its SVG) */
.rt-mobilebar a.wa svg{ color:#25D366 !important; }
.rt-mobilebar a.fb svg{ color:#1877F2 !important; }
.rt-mobilebar a.email svg{ color:#EA4335 !important; }
.rt-mobilebar a.phone svg{ color:#25D366 !important; }

/* Embedded enquiry form (TradeHQ iframe) */
.rt-embed{ width:100%; max-width:760px; margin:0 auto; }
.rt-embed iframe{ width:100%; min-height:1000px; border:0; display:block; background:#fff; border-radius:3px; }
/* contact details rows */
.rt-contact-lines{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.rt-contact-lines a{ font-family:var(--display); font-weight:800; font-size:20px; color:var(--ink); text-decoration:none; }
.rt-contact-lines a:hover{ text-decoration:underline; }

/* ============================================================
   v1.2.2 — centre dark-card content; style service-card links
   ============================================================ */
.rt-card{ text-align:center; }
.rt-svc a{ color:var(--ink) !important; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.rt-svc a:hover{ text-decoration-thickness:2px; }

/* ============================================================
   v1.3.0 — .rt-dark as a full "make this block black" toggle.
   Add the class  rt-dark  to any section block (keep rt-section
   rt-block) and it renders correctly on black, including lists
   and while keeping white cards/pills readable on top.
   ============================================================ */
/* list content on black */
.rt-dark li{ color:var(--on-dark) !important; }
.rt-dark .wp-block-list li{ border-top-color:var(--steel-line) !important; }
.rt-dark .wp-block-list li::before{ background:#fff !important; }
.rt-dark .rt-features > .wp-block-column + .wp-block-column > .wp-block-list > li:first-child{ border-top-color:var(--steel-line) !important; }
/* white service cards keep their dark text even on a black section */
.rt-dark .rt-svc h3{ color:var(--ink) !important; }
.rt-dark .rt-svc p{ color:var(--muted) !important; }
.rt-dark .rt-svc a{ color:var(--ink) !important; }
/* reviews label, if a reviews block is placed on black */
.rt-dark .rt-reviews .g{ color:#fff; }

/* ============================================================
   v1.3.1 — blocks adapt to a black OR white background so the
   alternation works either way.
   ============================================================ */
/* CTA heading/sub go dark when the CTA section isn't black */
.rt-cta:not(.rt-dark) h2{ color:var(--ink) !important; }
.rt-cta:not(.rt-dark) .rt-sub{ color:var(--muted) !important; }

/* invert/ghost-dark buttons flip to dark-on-light when their section is light */
.rt-section:not(.rt-dark) .rt-btn-invert .wp-block-button__link{ background:var(--ink) !important; color:#fff !important; border-color:var(--ink) !important; }
.rt-section:not(.rt-dark) .rt-btn-invert .wp-block-button__link:hover{ background:#23272E !important; }
.rt-section:not(.rt-dark) .rt-btn-ghost-dark .wp-block-button__link{ color:var(--ink) !important; border-color:#C7CCD1 !important; }
.rt-section:not(.rt-dark) .rt-btn-ghost-dark .wp-block-button__link:hover{ border-color:var(--ink) !important; background:#fff !important; }

/* service-card body text: clearly readable on the white cards, on any section colour */
.rt-svc p{ color:#3f444b; }
.rt-section.rt-dark .rt-svc p{ color:#3f444b !important; }

/* ============================================================
   v1.3.2 — centre the card heading BOX (not just its text);
   force card body text readable on the white cards.
   ============================================================ */
.rt-card > *{ margin-left:auto !important; margin-right:auto !important; }
.rt-card, .rt-card h2, .rt-card h3, .rt-card p{ text-align:center !important; }
.rt-svc p{ color:#333940 !important; }

/* ============================================================
   v1.3.3 — the dark-section paragraph rule
   (.rt-dark p:not(...):not(...):not(...)) has high specificity
   from its :not() chain and was overriding the card-body colour
   on black sections. Override it with a more specific selector.
   ============================================================ */
.rt-dark .rt-svc p:not(.rt-eyebrow):not(.fig):not(.lab){ color:#333940 !important; }

/* ============================================================
   v1.3.4 — contact-detail links flip to white on a black section
   ============================================================ */
.rt-dark .rt-contact-lines a{ color:#fff !important; }