/* Ready Energy header and footer.
   Every colour is an Astra global with a hex fallback, so the palette Brian set in the
   customizer stays the single source of truth. Do not paste hexes into this file. */
:root{
  --re-teal:var(--ast-global-color-1,#0F6372);
  --re-copper:var(--ast-global-color-0,#BF793E);
  --re-hi:var(--ast-global-color-8,#FF9033);
  --re-ink:var(--ast-global-color-3,#333);
  --re-paper:var(--ast-global-color-5,#F7F7F7);
  --re-action:var(--ast-global-color-6,#A46835); /* button fill, white label 4.56 */
  --re-line:#E3E8EF;
}
.re-wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.re-hdr a{text-decoration:none}

/* tier 1 */
.re-util{background:var(--re-teal);color:#fff;font-size:14px}
.re-util .re-wrap{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:24px}
.re-util-l,.re-util-r{display:flex;align-items:center;gap:20px;white-space:nowrap}
.re-sep{opacity:.45}
/* Utility bar, option A. Tony 2026-09-01: office hours out, and in their place
   the licence number and the 24-hour line. The dot is the only thing on this bar
   that is not text, and it is what makes the emergency line read as urgent
   rather than as another label. No animation: it sits on every page. */
.re-emg{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.re-emg-dot{width:8px;height:8px;border-radius:50%;background:var(--re-hi);flex:none}
.re-hdr .re-util .re-emg{color:#fff;text-decoration:none}
.re-hdr .re-util .re-emg:hover{text-decoration:underline}
.re-lic{opacity:.82;letter-spacing:.2px}
.re-femg a{font-weight:600}
.re-stars{color:var(--re-hi);letter-spacing:1px}
.re-hdr .re-util a{color:#fff}
.re-hdr .re-util .re-tel{color:#fff;font-weight:700;font-size:16px}

/* tier 2 */
.re-bar{background:#fff;border-bottom:1px solid var(--re-line)}
.re-bar .re-wrap{display:flex;align-items:center;justify-content:space-between;min-height:84px;gap:20px;position:relative}
.re-logo img{max-height:52px;width:auto;display:block}
.re-bar .re-logo{flex:none;max-width:230px}
.re-logo.re-text{font-family:Oswald,sans-serif;font-weight:700;line-height:.95;font-size:24px;letter-spacing:.5px}
.re-logo.re-text b{color:var(--re-copper);display:block}
.re-logo.re-text i{color:var(--re-teal);font-style:normal;display:block;font-size:15px;letter-spacing:5px}

.re-nav{display:flex;align-items:center;gap:22px;flex:1;justify-content:center}
.re-item{position:relative}
.re-item.re-wide{position:static}
.re-item > a{font-weight:600;font-size:15px;color:var(--re-teal);display:flex;align-items:center;
  gap:6px;min-height:84px;white-space:nowrap}
.re-caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.re-item:hover .re-caret,.re-item:focus-within .re-caret{transform:rotate(225deg) translateY(1px)}

.re-hdr a.re-btn,.re-btn{box-sizing:border-box;max-width:100%;background:var(--re-action);color:#fff;font-weight:700;font-size:15px;padding:14px 26px;
  border-radius:4px;white-space:nowrap;display:inline-block;text-align:center}
.re-hdr a.re-btn:hover,.re-btn:hover{filter:brightness(.93);color:#fff}
.re-btn.re-ghost{background:transparent;color:var(--re-teal);border:2px solid var(--re-teal)}

/* mega */
.re-mega{position:absolute;top:100%;background:#fff;border:1px solid var(--re-line);
  border-top:3px solid var(--re-copper);border-radius:0 0 6px 6px;
  box-shadow:0 24px 48px rgba(15,99,114,.16);opacity:0;visibility:hidden;transition:.15s;z-index:700}
.re-item:hover > .re-mega,.re-item:focus-within > .re-mega,.re-item.re-open > .re-mega{opacity:1;visibility:visible}
.re-mega.re-full{left:24px;right:24px;padding:34px 38px 0}
.re-mega.re-small{left:0;min-width:320px;padding:20px 26px 6px}
.re-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.re-col h4{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--re-teal);
  padding-bottom:10px;border-bottom:2px solid var(--re-copper);margin:0 0 14px}
.re-col a{display:block;padding:8px 0;font-size:15px;color:var(--re-ink)}
.re-col a:hover{color:var(--re-teal);font-weight:600}
.re-strip{margin:30px -38px 0;padding:16px 38px;background:var(--re-paper);border-top:1px solid var(--re-line);
  display:flex;gap:26px;font-size:14px;font-weight:600;flex-wrap:wrap}
.re-strip a{color:var(--re-teal)}
.re-strip a:hover{text-decoration:underline}
.re-mega.re-small a{display:block;padding:10px 0;font-size:15px;color:var(--re-ink);border-bottom:1px solid var(--re-line)}
.re-mega.re-small a:last-child{border:0}
.re-mega.re-small a span{display:block;font-size:12.5px;color:#5A6577;font-weight:400;margin-top:2px}

/* footer */
.re-ftr{background:var(--re-teal);color:#fff}
.re-ftr a{color:rgba(255,255,255,.86);text-decoration:none}
.re-ftr a:hover{color:#fff;text-decoration:underline}
.re-fcreds{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;padding:30px 0;
  list-style:none;border-bottom:1px solid rgba(255,255,255,.16)}
/* credentials: a white tile carries each brand logo in its own colours (Tony 2026-09-23).
   Recolouring a manufacturer's mark to white would break its usage rules, hence the tile. */
.re-fcreds li{display:flex;flex-direction:column;gap:12px}
.re-fcred-tile{display:flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;
  width:168px;max-width:100%;height:64px;padding:10px 14px;background:#fff;border-radius:12px}
.re-fcred-tile img{display:block;width:auto;height:auto;max-width:100%;max-height:44px}
.re-fcred-tile .re-ico{width:36px;height:36px;margin:0;stroke-width:1.8}
.re-fcred-txt{display:flex;flex-direction:column;gap:3px}
.re-fcreds b{font-size:15.5px;font-weight:700;color:#fff;line-height:1.3}
.re-fcred-txt span{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.4}
@media(max-width:900px){ .re-fcreds{grid-template-columns:1fr 1fr;gap:24px} }
@media(max-width:520px){ .re-fcreds{grid-template-columns:1fr;gap:16px}
  .re-fcreds li{flex-direction:row;align-items:center;gap:14px}
  .re-fcred-tile{width:104px;height:52px;padding:8px 10px}
  .re-fcred-tile img{max-height:34px}
  .re-fcred-tile .re-ico{width:30px;height:30px} }
.re-fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:58px 0 42px}
.re-fgrid h4{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--re-hi);
  margin:0 0 16px;font-weight:700}
.re-fgrid a,.re-fgrid p,.re-fgrid span{display:block;font-size:14.5px;padding:6px 0;line-height:1.55;
  color:rgba(255,255,255,.86)}
.re-fbrand .re-logo{margin-bottom:14px}
.re-fbrand .re-logo.re-text b{color:var(--re-hi)}
.re-fbrand .re-logo.re-text i{color:#fff}
.re-frate,.re-ftel{color:#fff!important;font-weight:600}
.re-ftel{font-size:19px!important;font-weight:700}
.re-fsoc{display:flex;gap:12px;padding-top:10px}
.re-fsoc a{width:34px;height:34px;border:1px solid rgba(255,255,255,.35);border-radius:50%;
  display:flex!important;align-items:center;justify-content:center;padding:0}
.re-fsoc svg{width:15px;height:15px;fill:#fff}
.re-legal{border-top:1px solid rgba(255,255,255,.18);padding:20px 0 30px;font-size:13px;
  color:rgba(255,255,255,.72);line-height:1.9;text-align:center}
.re-legal a{color:rgba(255,255,255,.72)}

/* mobile */


.re-panel{display:none}
@media(max-width:1320px){ .re-nav{gap:16px} .re-item > a{font-size:14.5px} .re-btn{padding:13px 20px;font-size:14.5px} }
@media(max-width:1200px){
  /* .re-bar .re-btn is 0,2,0 and loses to the base rule .re-hdr a.re-btn at 0,2,1,
     so the header CTA stayed visible on mobile and overhung the viewport by 0.6px,
     which is the whole of the 1px horizontal overflow qc.py was failing on. */
  .re-nav,.re-hdr .re-bar a.re-btn,.re-bar .re-btn{display:none}
  .re-burger{display:block}
  .re-util .re-wrap{flex-direction:column;gap:4px;padding:8px 24px;font-size:13px;text-align:center}
  .re-util-l,.re-util-r{gap:12px;flex-wrap:wrap;justify-content:center}
  .re-fgrid{grid-template-columns:1fr 1fr;gap:28px}
  .re-panel{display:flex;flex-direction:column;position:fixed;inset:0;background:#fff;z-index:9000;
    transform:translateX(100%);transition:transform .25s;visibility:hidden}
  .re-panel.re-open{transform:none;visibility:visible}
  .re-phead{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;
    border-bottom:1px solid var(--re-line);min-height:72px}
  .re-pback{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px;
    color:var(--re-teal);background:none;border:0;cursor:pointer}
  .re-plist{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
  .re-plist a,.re-plist button.re-drill{display:flex;width:100%;align-items:center;justify-content:space-between;
    padding:20px 22px;border:0;border-bottom:1px solid var(--re-line);background:none;
    font-size:17px;font-weight:600;color:var(--re-ink);text-align:left;cursor:pointer;text-decoration:none}
  .re-cap{padding:22px 22px 8px;font-size:12px;letter-spacing:1.6px;color:var(--re-teal);
    font-weight:700;background:var(--re-paper)}
  .re-chev{width:9px;height:9px;border-right:2px solid #9AA7B4;border-top:2px solid #9AA7B4;
    transform:rotate(45deg);flex:none}
  .re-chev.re-back{transform:rotate(-135deg);border-color:var(--re-teal)}
  .re-pcta{padding:18px 20px 26px;background:var(--re-paper);border-top:1px solid var(--re-line);display:grid;gap:12px}
  .re-x{font-size:30px;line-height:1;color:var(--re-teal);background:none;border:0;cursor:pointer;padding:0 6px}
}
@media(max-width:640px){ .re-fgrid{grid-template-columns:1fr} }

/* ---- menu icons ---- */
.re-col a{display:flex;align-items:flex-start;gap:12px}
.re-ico{width:24px;height:24px;flex:none;color:var(--re-teal);margin-top:-1px;transition:color .15s;stroke-width:1.7}
.re-ico .a{stroke:var(--re-copper)}
.re-col a:hover .re-ico{color:var(--re-copper)}
.re-col a:hover .re-ico .a{stroke:var(--re-teal)}
.re-lbl{display:block;line-height:1.35}
.re-mega.re-small a{display:flex;align-items:flex-start;gap:12px}
.re-plist a{gap:14px}
.re-plist .re-ico{width:24px;height:24px}
/* Emergency Service reads as the one urgent item without shouting. */
.re-item.re-urgent > a{color:#8A5427}
.re-item.re-urgent > a::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--re-copper);margin-right:2px;flex:none}
@media(max-width:1200px){
  .re-plist a .re-lbl{flex:1}
  .re-plist a{justify-content:flex-start}
}
/* footer logo is the stacked white lockup, not the colour one on teal */
.re-fbrand .re-logo img{max-height:96px}


/* ---- controls Astra would otherwise repaint ----
   Astra styles every bare <button> with its own background, border, radius and padding.
   That is what turned the hamburger into an empty white box with invisible bars. Every
   property below needs !important, on every state, and the glyph is an inline SVG rather
   than three spans so there is nothing for Astra to swallow. */
.re-burger,.re-x{display:none;background:none!important;border:0!important;box-shadow:none!important;
  padding:0!important;cursor:pointer;color:var(--re-teal)!important;line-height:0}
.re-burger:hover,.re-burger:focus,.re-x:hover,.re-x:focus{background:none!important;color:var(--re-copper)!important}
.re-burger svg{width:30px;height:30px;display:block}
.re-x svg{width:26px;height:26px;display:block}

/* ---- social marks in the top bar ---- */
.re-soc{display:inline-flex;align-items:center;gap:10px}
.re-soc a{display:inline-flex;align-items:center;justify-content:center;color:#fff;opacity:.85}
.re-soc a:hover{opacity:1;color:var(--re-hi)}
.re-soc svg{width:17px;height:17px;fill:currentColor;display:block}

/* ---- both rows sticky, the Laundry Hub rule ---- */
/* Both rows stick together. Sticking the two rows individually does NOT work: a sticky
   element is bounded by its own parent, and .re-hdr is only as tall as the header, so
   both rows scrolled away after about 130px. The WRAPPER is the sticky element. */
.re-hdr{position:sticky;top:0;z-index:600}
.admin-bar .re-hdr{top:32px}

.re-fmap{margin:14px 0 4px;border-radius:6px;overflow:hidden;max-width:340px}
.re-fmap iframe{display:block}

@media(max-width:1200px){
  .re-burger{display:block}
  .re-x{display:block}
  /* One compact row on phones. Three centred lines ate 200px of the first screen. */
  .re-util .re-wrap{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 14px;
    padding:7px 16px;font-size:12.5px;text-align:center;min-height:0}
  .re-util-l{gap:8px;flex-wrap:wrap;justify-content:center}
  .re-util-l .re-sep{display:none}
  .re-util-r{gap:10px}
  .re-util .re-tel{font-size:14px}
  /* phones keep the whole header pinned too */
  .re-bar .re-wrap{min-height:70px}
  .re-bar .re-logo{max-width:190px}
  .re-logo img{max-height:42px}
}
@media(max-width:420px){
  /* Was `.re-util-l span:not(.re-sep):first-child`, which hid whatever happened
     to be first. First is now the 24-hour line, the one thing on this bar that
     must survive to the smallest screen, so the licence drops instead. */
  .re-util-l .re-lic,
  .re-util-l .re-sep{display:none}
}


/* ---- footer sits at the bottom on short pages ----
   The homepage is a stub, so on a tall screen the body background showed as a large
   white band under the footer. */
.hfeed.site{min-height:100vh;display:flex;flex-direction:column}
.hfeed.site > #content{flex:1 0 auto}
.hfeed.site > .re-ftr,.hfeed.site > footer{flex:0 0 auto}

/* Nothing in the header may ever exceed its box, whatever happens to the stylesheet. */
.re-hdr svg,.re-ftr svg{max-width:100%;height:auto}
.re-ico{width:22px;height:22px}