/* ==========================================================================
   M&M Insulation Ltd — EPC checker (homepage section + epc-checker.html)
   Loaded in addition to style.css. Band colours are the standard EPC colours.
   ========================================================================== */

.epc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start;}
.epc h2{font-size:clamp(1.9rem,1.8vw + 1.3rem,3rem);line-height:1.06;max-width:15ch;}
.epc .lede{max-width:40ch;margin-bottom:1.8rem;}

.epc-stepno{
  display:flex;align-items:center;gap:.65rem;margin:0 0 .9rem;max-width:none;
  font:700 .78rem/1 'Public Sans',sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);
}
.epc-stepno span{
  width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-size:.8rem;letter-spacing:0;
}

/* Step 1: postcode ---------------------------------------------------------------- */
.epc-form label{display:block;font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:.45rem;}
.epc-form__row{display:flex;gap:.6rem;}
.epc-form input{
  flex:1;min-width:0;min-height:54px;font:inherit;font-size:1.1rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:.8rem 1rem;border:1.5px solid var(--border);border-radius:var(--radius-s);background:#fff;color:var(--ink);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.epc-form input:focus{outline:none;border-color:var(--accent-deep);box-shadow:0 0 0 4px var(--accent-tint);}
.epc-form input[aria-invalid="true"]{border-color:var(--flag);box-shadow:0 0 0 3px var(--flag-tint);}
.epc-form .btn{flex:none;min-height:54px;}
.epc-hint,.epc-privacy{margin:.6rem 0 0;max-width:none;font-size:.84rem;color:var(--slate);line-height:1.5;}
.epc-privacy{margin-top:.35rem;}
.epc-error{margin:.55rem 0 0;max-width:none;font-size:.9rem;font-weight:600;color:var(--flag);}
@media (max-width:480px){
  .epc-form__row{flex-direction:column;}
  .epc-form .btn{width:100%;}
}

/* Step 2: the A–G scale, drawn like the real certificate ------------------------------------ */
.epc-scale{display:grid;gap:.4rem;}
.epc-band{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:46px;padding:0 1.1rem 0 .5rem;
  border:0;border-radius:3px 999px 999px 3px;cursor:pointer;text-align:left;color:var(--ink);
  font:600 .88rem/1 'Public Sans',sans-serif;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast);
}
.epc-band b{
  font:700 1.5rem/1 'Zilla Slab',Georgia,serif;width:2.2rem;text-align:center;
}
.epc-band span{opacity:.85;white-space:nowrap;}
.epc-band--A{width:46%;background:#008054;color:#fff;}
.epc-band--B{width:56%;background:#19b459;}
.epc-band--C{width:66%;background:#8dce46;}
.epc-band--D{width:76%;background:#ffd500;}
.epc-band--E{width:86%;background:#fcaa65;}
.epc-band--F{width:93%;background:#ef8023;}
.epc-band--G{width:100%;background:#e9153b;}   /* dark text: 3.5:1, fine for this large bold letter */
.epc-band:hover{transform:translateX(5px);}
.epc-band[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink);transform:translateX(5px);}
.epc-band:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
@media (max-width:480px){
  .epc-band--A{width:62%;}.epc-band--B{width:70%;}.epc-band--C{width:78%;}.epc-band--D{width:85%;}
  .epc-band--E{width:91%;}.epc-band--F{width:96%;}
}

/* Result panel ------------------------------------------------------------------------------ */
.epc-result{
  margin-top:1.4rem;padding:1.4rem 1.5rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-m);
  min-height:7.5rem;
}
.epc-result__idle{margin:0;color:var(--slate);font-size:.95rem;}
.epc-result h3{font-size:1.25rem;margin-bottom:.45em;display:flex;align-items:center;gap:.7rem;}
.epc-result h3 i{
  font:700 1rem/1 'Zilla Slab',Georgia,serif;font-style:normal;width:2rem;height:2rem;border-radius:3px;
  display:grid;place-items:center;color:var(--ink);
}
.epc-result p{font-size:.97rem;max-width:none;}
.epc-result .epc-caveat{font-size:.84rem;color:var(--slate);margin-top:.9rem;}
.epc-result .btn{margin-top:1.1rem;}
.epc-result a.epc-link{color:var(--accent-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px;}

@media (max-width:860px){.epc__grid{grid-template-columns:1fr;}}