/**
 * @file
 * Appliance Repairs Belfast — shared component library.
 *
 * Location: darkplus/arb-custom.css  (theme top level, next to darkplus.info.yml)
 * Loaded by the darkplus/arb-custom library — see darkplus.libraries.yml.
 *
 * Everything is scoped under .arb-lp. Used by the taxonomy term templates in
 * darkplus/mlt_templates/:
 *   - taxonomy-term--locations.html.twig
 *   - taxonomy-term--appliance-type.html.twig
 *   - taxonomy-term--make-of-appliance.html.twig
 *
 * The homepage (mt_landing_page node) keeps its own self-contained <style>
 * block in the body field so it can be edited without server access. These
 * rules are identical, so loading both on the homepage is harmless — but if
 * you change one, change the other.
 *
 * NO font-family declarations except `inherit` — Dark+ owns typography via
 * the pff/hff body classes. Do not add any.
 */
/* ---------- tokens ---------- */
.arb-lp{
  --arb-ink:#0d0f12;
  --arb-ink-2:#15181d;
  --arb-ink-3:#1d2128;
  --arb-line:rgba(255,255,255,.14);
  --arb-mute:rgba(255,255,255,.72);
  --arb-zap:var(--mt-color-secondary,#fff200);
  --arb-zap-ink:#0d0f12;
  --arb-paper:#f4f5f7;
  --arb-paper-2:#ffffff;
  font-family:inherit;
  color:var(--arb-mute);
  line-height:1.65;
}
.arb-lp *{box-sizing:border-box;}
.arb-lp img{max-width:100%;height:auto;display:block;}

/* ---------- sections ---------- */
.arb-sec{padding:4.5rem 1.25rem;}
.arb-sec__in{max-width:1140px;margin:0 auto;}
.arb-sec--dark{background:var(--arb-ink);color:var(--arb-mute);}
.arb-sec--dark2{background:var(--arb-ink-2);color:var(--arb-mute);}
.arb-sec--paper{background:var(--arb-paper);color:#2a2f37;}
.arb-sec--paper2{background:var(--arb-paper-2);color:#2a2f37;}
.arb-sec--tight{padding:2.5rem 1.25rem;}
.arb-strip{border-top:4px solid var(--arb-zap);}

/* ---------- headings ---------- */
.arb-lp h1,.arb-lp h2,.arb-lp h3,.arb-lp h4{line-height:1.15;margin:0 0 .75rem;}
.arb-lp h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.015em;}
.arb-lp h3{font-size:1.2rem;font-weight:700;}
.arb-sec--dark h2,.arb-sec--dark h3,.arb-sec--dark2 h2,.arb-sec--dark2 h3{color:#fff;}
.arb-sec--paper h2,.arb-sec--paper h3,.arb-sec--paper2 h2,.arb-sec--paper2 h3{color:#12151a;}
.arb-eyebrow{
  display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--arb-zap);margin-bottom:.9rem;
}
.arb-sec--paper .arb-eyebrow,.arb-sec--paper2 .arb-eyebrow{
  color:#12151a;background:var(--arb-zap);padding:.3rem .6rem;border-radius:3px;
}
.arb-lead{font-size:1.08rem;max-width:62ch;}
.arb-sec--paper .arb-lead,.arb-sec--paper2 .arb-lead{color:#454b55;}

/* ---------- buttons ----------
   Uses the theme's own .mt-button / .mt-button--outline classes. Do NOT
   restyle them here — colour comes from --mt-color-primary, shape from the
   Corner Style setting, and the font from --mt-hff. We only lay them out.
   ------------------------------------------------------------------ */
.arb-btns{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.6rem;align-items:center;}
.arb-btns--centre{justify-content:center;}

/* mt-button sits on --mt-color-primary (yellow). Inside the yellow booking
   panel that would be yellow-on-yellow, so flip it dark in that one context. */
.arb-lp .arb-book a.mt-button{
  background-color:var(--arb-ink);
  border-color:var(--arb-ink);
  color:#fff;
}
.arb-lp .arb-book a.mt-button:hover,
.arb-lp .arb-book a.mt-button:focus{
  background-color:#000;
  border-color:#000;
  color:var(--arb-zap);
}

/* Outline buttons on our dark sections need light text — the theme only
   handles this for its own region--* classes, which we don't use. */
.arb-lp .arb-hero a.mt-button--outline,
.arb-lp .arb-sec--dark a.mt-button--outline,
.arb-lp .arb-sec--dark2 a.mt-button--outline{color:#fff;}
.arb-lp .arb-hero a.mt-button--outline:hover,
.arb-lp .arb-sec--dark a.mt-button--outline:hover,
.arb-lp .arb-sec--dark2 a.mt-button--outline:hover{color:var(--arb-zap-ink);}

.arb-lp a:focus-visible,.arb-lp summary:focus-visible{outline:3px solid var(--arb-zap);outline-offset:3px;}

/* ---------- hero (homepage split + term-page single column) ---------- */
.arb-hero{
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(255,242,0,.09), transparent 62%),
    linear-gradient(160deg,#0d0f12 0%,#15181d 58%,#0d0f12 100%);
  padding:4.75rem 1.25rem 4rem;
}
.arb-hero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center;}
.arb-hero h1{
  font-size:clamp(2.1rem,5.4vw,3.5rem);font-weight:900;color:#fff;letter-spacing:-.025em;
}
.arb-hero h1 span{color:var(--arb-zap);}
.arb-hero__sub{font-size:1.14rem;color:rgba(255,255,255,.8);max-width:56ch;margin:0 0 .5rem;}
.arb-hero__ticks{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;}
.arb-hero__ticks li{font-weight:700;color:#fff;font-size:.97rem;}
.arb-hero__ticks li::before{content:"✓";color:var(--arb-zap);font-weight:900;margin-right:.5rem;}
/* term pages: no photo column, so cap the measure */
.arb-hero--solo .arb-hero__sub,.arb-hero--solo .arb-lead{max-width:62ch;}

/* ---------- photo slot ---------- */
.arb-photo{
  border:1px solid var(--arb-line);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.04);box-shadow:0 0 0 6px rgba(255,242,0,.06);
}
.arb-photo__ph{
  aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1.5rem;gap:.4rem;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px);
}
.arb-photo__ph strong{color:var(--arb-zap);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;}
.arb-photo__ph span{font-size:.9rem;color:rgba(255,255,255,.55);}
.arb-photo__cap{
  padding:.85rem 1rem;border-top:1px solid var(--arb-line);
  font-size:.88rem;color:#fff;font-weight:700;text-align:center;
}

/* ---------- review bar ---------- */
.arb-rev{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;justify-content:space-between;}
.arb-rev__score{display:flex;align-items:baseline;gap:.6rem;}
.arb-rev__num{font-size:2.6rem;font-weight:900;color:var(--arb-zap);line-height:1;}
.arb-rev__stars{color:var(--arb-zap);font-size:1.1rem;letter-spacing:.1em;}
.arb-rev__meta{font-size:.95rem;color:rgba(255,255,255,.75);}
.arb-rev__meta strong{color:#fff;}

/* ---------- card grids ---------- */
.arb-grid{display:grid;gap:1.15rem;}
.arb-grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.arb-grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.arb-grid--tiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}

.arb-card{
  background:var(--arb-ink-3);border:1px solid var(--arb-line);
  border-radius:14px;padding:1.5rem;height:100%;
}
.arb-sec--paper .arb-card,.arb-sec--paper2 .arb-card{
  background:#fff;border-color:rgba(0,0,0,.09);color:#454b55;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.arb-card p{margin:0;font-size:.95rem;}
.arb-card__n{
  display:block;font-size:.8rem;font-weight:900;letter-spacing:.14em;
  color:var(--arb-zap);margin-bottom:.6rem;
}
.arb-sec--paper .arb-card__n,.arb-sec--paper2 .arb-card__n{color:#8a8f2a;}

/* ---------- appliance tiles ---------- */
.arb-tile{
  display:block;text-decoration:none;background:#fff;border:1px solid rgba(0,0,0,.09);
  border-radius:14px;padding:1.35rem 1.25rem;height:100%;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.arb-tile:hover,.arb-tile:focus{
  border-color:var(--arb-zap);transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,0,0,.09);text-decoration:none;
}
.arb-tile strong{display:block;color:#12151a;font-size:1.03rem;font-weight:800;margin-bottom:.3rem;}
.arb-tile span{display:block;color:#5b616b;font-size:.88rem;line-height:1.5;}
/* dark variant for term pages */
.arb-sec--dark .arb-tile,.arb-sec--dark2 .arb-tile{background:var(--arb-ink-3);border-color:var(--arb-line);}
.arb-sec--dark .arb-tile strong,.arb-sec--dark2 .arb-tile strong{color:#fff;}
.arb-sec--dark .arb-tile span,.arb-sec--dark2 .arb-tile span{color:var(--arb-mute);}

/* ---------- testimonials ---------- */
.arb-quote{
  background:var(--arb-ink-3);border:1px solid var(--arb-line);border-left:4px solid var(--arb-zap);
  border-radius:12px;padding:1.5rem;height:100%;
}
.arb-quote p{margin:0 0 .9rem;color:#fff;font-size:1.02rem;font-style:italic;}
.arb-quote cite{font-style:normal;font-size:.87rem;color:var(--arb-mute);font-weight:700;}
.arb-quote cite span{color:var(--arb-zap);display:block;letter-spacing:.08em;font-size:.75rem;margin-top:.2rem;}

/* ---------- booking panel ---------- */
.arb-book{
  background:var(--arb-zap);color:var(--arb-zap-ink);border-radius:18px;
  padding:2.75rem 2rem;text-align:center;
}
.arb-book h2{color:var(--arb-zap-ink)!important;}
.arb-book p{color:rgba(13,15,18,.82);max-width:60ch;margin:0 auto;font-weight:500;}
.arb-book .arb-btns{justify-content:center;}
.arb-book__ticks{
  list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-wrap:wrap;
  gap:.5rem 1.75rem;justify-content:center;
}
.arb-book__ticks li{font-weight:800;font-size:.92rem;color:var(--arb-zap-ink);}
.arb-book__ticks li::before{content:"✓";margin-right:.45rem;}

/* ---------- stats ---------- */
.arb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;text-align:center;}
.arb-stat b{display:block;font-size:2.4rem;font-weight:900;color:var(--arb-zap);line-height:1.05;}
.arb-stat span{display:block;font-size:.85rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.68);margin-top:.35rem;font-weight:700;}

/* ---------- prose ---------- */
.arb-prose{max-width:70ch;}
.arb-prose p{margin:0 0 1.1rem;}
.arb-prose p:last-child{margin-bottom:0;}
.arb-prose h2{margin-top:2rem;}
.arb-prose h3{margin-top:1.5rem;}
.arb-prose ul,.arb-prose ol{margin:0 0 1.1rem;padding-left:1.3rem;}
.arb-prose li{margin-bottom:.45rem;}
/* the taxonomy description field renders inside .arb-prose — strip Drupal wrappers */
.arb-prose .field,.arb-prose .field__item{margin:0;}

/* ---------- area pills ---------- */
.arb-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem;}
.arb-pill{
  display:inline-block;padding:.55rem 1.1rem;border-radius:999px;
  border:1px solid rgba(0,0,0,.16);background:#fff;color:#22262d;
  font-size:.92rem;font-weight:700;text-decoration:none;transition:all .15s ease;
}
.arb-pill:hover,.arb-pill:focus{background:var(--arb-zap);border-color:var(--arb-zap);color:#12151a;text-decoration:none;}
.arb-sec--dark .arb-pill,.arb-sec--dark2 .arb-pill{
  background:rgba(255,255,255,.05);border-color:var(--arb-line);color:#fff;
}
.arb-sec--dark .arb-pill:hover,.arb-sec--dark2 .arb-pill:hover{background:var(--arb-zap);color:#12151a;border-color:var(--arb-zap);}

/* ---------- faq ---------- */
.arb-faq{max-width:840px;margin:0 auto;}
.arb-faq details{
  background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:12px;
  margin-bottom:.75rem;overflow:hidden;
}
.arb-faq summary{
  cursor:pointer;padding:1.15rem 1.35rem;font-weight:800;color:#12151a;
  font-size:1.02rem;list-style:none;position:relative;padding-right:3rem;
}
.arb-faq summary::-webkit-details-marker{display:none;}
.arb-faq summary::after{
  content:"+";position:absolute;right:1.35rem;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:800;color:var(--arb-zap-ink);
  background:var(--arb-zap);width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.arb-faq details[open] summary::after{content:"−";}
.arb-faq details p{margin:0;padding:0 1.35rem 1.35rem;color:#4c525c;font-size:.97rem;}

/* ---------- legal line ---------- */
.arb-legal{
  font-size:.85rem;color:rgba(255,255,255,.5);text-align:center;
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--arb-line);
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .arb-hero__grid{grid-template-columns:1fr;gap:2rem;}
  .arb-hero__photo{order:-1;max-width:320px;margin:0 auto;}
  .arb-photo__ph{aspect-ratio:4/3;}
  .arb-sec{padding:3.25rem 1.1rem;}
  .arb-hero{padding:3.25rem 1.1rem;}
  .arb-lp a.mt-button{width:100%;}
  .arb-book{padding:2rem 1.25rem;}
}
@media (prefers-reduced-motion:reduce){
  .arb-lp *{transition:none!important;}
}

/* ---------- taxonomy term description: full width, centred ---------- */
.arb-desc{
  max-width:1140px;
  margin:0 auto;
  font-size:1.05rem;
}
/* strip Drupal's field wrappers so the customer's HTML sits flush */
.arb-desc .field,
.arb-desc .field__item,
.arb-desc .field--name-description{margin:0;padding:0;}
.arb-desc > *:first-child,
.arb-desc .field__item > *:first-child{margin-top:0;}
.arb-desc > *:last-child,
.arb-desc .field__item > *:last-child{margin-bottom:0;}
.arb-desc p{margin:0 0 1.15rem;}
.arb-desc h2{margin:2.25rem 0 .9rem;}
.arb-desc h3{margin:1.75rem 0 .7rem;}
.arb-desc ul,.arb-desc ol{margin:0 0 1.15rem;padding-left:1.35rem;}
.arb-desc li{margin-bottom:.45rem;}
.arb-desc img{border-radius:12px;margin:1.5rem 0;}
.arb-desc a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.arb-desc a:hover{color:var(--arb-zap-ink);background:var(--arb-zap);text-decoration:none;}

/* To centre the TEXT as well as the block, add this one line:
   .arb-desc{ text-align:center; }
   Left-aligned reads better for long copy, so it's off by default. */

/* ---------- plain navigational link grid (no blurbs) ---------- */
.arb-linkgrid{
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:1.75rem;
}
.arb-linkgrid a{
  display:block;text-decoration:none;padding:.95rem 1.15rem;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid var(--arb-line);
  color:#fff;font-weight:700;font-size:.97rem;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.arb-linkgrid a:hover,.arb-linkgrid a:focus{
  background:var(--arb-zap);border-color:var(--arb-zap);color:var(--arb-zap-ink);text-decoration:none;
}
.arb-sec--paper .arb-linkgrid a,.arb-sec--paper2 .arb-linkgrid a{
  background:#fff;border-color:rgba(0,0,0,.12);color:#22262d;
}
.arb-sec--paper .arb-linkgrid a:hover,.arb-sec--paper2 .arb-linkgrid a:hover{
  background:var(--arb-zap);border-color:var(--arb-zap);color:var(--arb-zap-ink);
}

/* ---------- term hero: centred variant ---------- */
.arb-hero--centred .arb-sec__in{text-align:center;}
.arb-hero--centred .arb-btns{justify-content:center;}
.arb-hero--centred h1{margin-left:auto;margin-right:auto;}

/* =====================================================================
   ICON CARD GRID — used for the appliance links on term pages
   ===================================================================== */
.arb-iconcards{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  margin-top:2rem;
}
.arb-iconcard{
  display:block;text-decoration:none;height:100%;
  padding:1.6rem 1.35rem;border-radius:14px;
  background:var(--arb-ink-3);border:1px solid var(--arb-line);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.arb-iconcard:hover,.arb-iconcard:focus{
  border-color:var(--arb-zap);transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.35);text-decoration:none;
}
.arb-iconcard__ico{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:12px;margin-bottom:1rem;
  background:rgba(255,242,0,.1);color:var(--arb-zap);
}
.arb-iconcard:hover .arb-iconcard__ico{background:var(--arb-zap);color:var(--arb-zap-ink);}
.arb-iconcard__ico svg{width:26px;height:26px;}
.arb-iconcard strong{
  display:block;color:#fff;font-size:1.02rem;font-weight:800;
  line-height:1.25;letter-spacing:-.01em;
}
/* light-section variant */
.arb-sec--paper .arb-iconcard,.arb-sec--paper2 .arb-iconcard{
  background:#fff;border-color:rgba(0,0,0,.09);box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.arb-sec--paper .arb-iconcard:hover,.arb-sec--paper2 .arb-iconcard:hover{
  box-shadow:0 14px 30px rgba(0,0,0,.1);
}
.arb-sec--paper .arb-iconcard strong,.arb-sec--paper2 .arb-iconcard strong{color:#12151a;}
.arb-sec--paper .arb-iconcard__ico,.arb-sec--paper2 .arb-iconcard__ico{
  background:rgba(0,0,0,.05);color:#12151a;
}

/* ---------- breadcrumb inside the hero ---------- */
.arb-crumbs{
  font-size:.85rem;font-weight:600;color:rgba(255,255,255,.55);
  margin-bottom:1.5rem;letter-spacing:.01em;
}
.arb-crumbs a{color:rgba(255,255,255,.75);text-decoration:none;}
.arb-crumbs a:hover{color:var(--arb-zap);}
.arb-crumbs span{margin:0 .5rem;opacity:.4;}
.arb-crumbs strong{color:#fff;font-weight:600;}

/* ---------- section header block ---------- */
.arb-sechead{margin-bottom:.5rem;}
.arb-sechead h2{margin-bottom:.35rem;}

/* ---------- final CTA band ---------- */
.arb-finalcta{text-align:center;}
.arb-finalcta h2{margin-bottom:1rem;}
.arb-finalcta .arb-btns{justify-content:center;}

/* =====================================================================
   FULL-WIDTH TAXONOMY TERM PAGES
   Pairs with mlt_templates/page--taxonomy.html.twig, which removes the
   .container and the row/column grid from the main content area.
   These rules strip the padding the theme would otherwise inherit, so the
   term template's sections run edge to edge.
   ===================================================================== */
.arb-fullwidth .main-content__section,
.arb-fullwidth .sidebar__section{padding:0;}
.arb-fullwidth .main-content__container{max-width:none;padding:0;}

/* Admin bits (local tasks, help, contextual) still need a sane measure,
   otherwise the View/Edit/Delete tabs sit flush against the viewport edge. */
.arb-fullwidth .block-local-tasks-block,
.arb-fullwidth .block-help-block{
  width:100%;max-width:1140px;
  margin-left:auto;margin-right:auto;
  padding-left:1.25rem;padding-right:1.25rem;
}

/* The taxonomy feed icon renders after the term content. Keep it out of the
   way rather than floating loose under the final CTA. Delete this rule if
   you'd rather it showed. */
.arb-fullwidth .feed-icons{
  max-width:1140px;margin:1.5rem auto 0;
  padding-left:1.25rem;padding-right:1.25rem;
}

/* =====================================================================
   TAGGED-CONTENT TILES ON TAXONOMY TERM PAGES
   The core taxonomy_term view lists content tagged with the term BELOW our
   term template, so these rows sit outside .arb-lp. The design tokens are
   therefore repeated on .arb-fullwidth-tiles so the section can use them.
   Content-type agnostic — styles whatever teaser markup comes through.
   ===================================================================== */
.arb-fullwidth-tiles{
  --arb-ink:#0d0f12;
  --arb-ink-2:#15181d;
  --arb-ink-3:#1d2128;
  --arb-line:rgba(255,255,255,.14);
  --arb-mute:rgba(255,255,255,.72);
  --arb-zap:var(--mt-color-secondary,#fff200);
  --arb-zap-ink:#0d0f12;
  --arb-paper:#f4f5f7;
  --arb-paper-2:#ffffff;
  font-family:inherit;
}

.arb-tiles{
  display:grid;gap:1.15rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:1.5rem;
}
.arb-tile-item{
  background:var(--arb-ink-3);
  border:1px solid var(--arb-line);
  border-radius:14px;
  padding:1.6rem 1.5rem;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.arb-tile-item:hover{
  border-color:var(--arb-zap);
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}

/* teaser internals — kept generic so any content type works */
.arb-tile-item article,
.arb-tile-item .node{margin:0;padding:0;border:0;background:none;}
.arb-tile-item .node__header,
.arb-tile-item header{margin:0 0 .65rem;padding:0;border:0;}
.arb-tile-item h2,
.arb-tile-item h3,
.arb-tile-item .node__title{
  margin:0 0 .65rem;font-size:1.15rem;font-weight:800;line-height:1.3;
}
.arb-tile-item h2 a,
.arb-tile-item h3 a,
.arb-tile-item .node__title a{color:#fff;text-decoration:none;}
.arb-tile-item:hover h2 a,
.arb-tile-item:hover h3 a,
.arb-tile-item:hover .node__title a{color:var(--arb-zap);}

.arb-tile-item p{
  color:var(--arb-mute);font-size:.95rem;line-height:1.6;margin:0 0 .9rem;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;
}
.arb-tile-item img{border-radius:10px;margin-bottom:1rem;}

/* hide submitted-by metadata on tiles */
.arb-tile-item .node__meta,
.arb-tile-item .node__submitted-info{display:none;}

/* "Read more" becomes a discreet link, not a stray underlined string */
.arb-tile-item .node__links,
.arb-tile-item .links{margin:0;padding:0;list-style:none;}
.arb-tile-item .node__links li,
.arb-tile-item .links li{margin:0;padding:0;display:inline-block;}
.arb-tile-item .node__links a,
.arb-tile-item .links a,
.arb-tile-item a.mt-read-more{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--arb-zap);font-weight:800;font-size:.88rem;
  text-decoration:none;letter-spacing:.02em;
}
.arb-tile-item .node__links a:after,
.arb-tile-item .links a:after{content:"→";transition:transform .15s ease;}
.arb-tile-item:hover .node__links a:after,
.arb-tile-item:hover .links a:after{transform:translateX(3px);}

.arb-tiles__more{margin-top:1.75rem;}
.arb-tiles__more a{color:var(--arb-zap);font-weight:800;text-decoration:none;}

/* nothing tagged? the section is skipped entirely by the views template */

/* =====================================================================
   HERO BACKGROUND IMAGE (taxonomy term pages)
   Applied when the term has field_hero_image. Falls back cleanly to the
   plain gradient hero when there's no image.
   ===================================================================== */
.arb-hero--image{position:relative;overflow:hidden;isolation:isolate;}
.arb-hero__bg{
  position:absolute;inset:0;z-index:-2;
}
.arb-hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;border-radius:0;margin:0;
}
/* Dark wash so white text stays readable over any photo. The left-weighted
   gradient keeps the H1 side darkest while letting the photo show on the
   right. Contrast here is doing accessibility work — don't lighten it. */
.arb-hero--image:before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg, rgba(13,15,18,.94) 0%, rgba(13,15,18,.86) 45%, rgba(13,15,18,.62) 100%),
    linear-gradient(180deg, rgba(13,15,18,.5) 0%, transparent 40%, rgba(13,15,18,.7) 100%);
}
/* accent bleed, keeps it in family with the plain hero */
.arb-hero--image:after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(760px 340px at 8% 0%, rgba(255,242,0,.1), transparent 65%);
}
.arb-hero--image .arb-sec__in{position:relative;z-index:1;}

@media (max-width:860px){
  /* photo behind text gets busy on a narrow screen — darken further */
  .arb-hero--image:before{
    background:linear-gradient(180deg, rgba(13,15,18,.88) 0%, rgba(13,15,18,.93) 100%);
  }
}

/* =====================================================================
   TERM LISTING VIEWS — /appliance-types-we-repair, /locations-we-work-in,
   /appliance-brands-we-repair

   Works with EITHER views format:
     Unformatted list -> <div class="view-content row"> + <div class="views-row">
     HTML list        -> <div class="item-list"><ul><li>
   Dark+ puts Bootstrap's .row class on .view-content (display:flex plus
   negative margins), so that gets zeroed before the grid is applied.

   Also add "arb-termgrid" under Advanced > Other > CSS class in the view
   if you ever rename a view and the view-id selector stops matching.
   ===================================================================== */
.view-id-appliance_types_we_repair,
.view-id-locations_we_work_in,
.view-id-appliance_brands_we_repair,
.arb-termgrid{
  --arb-ink:#0d0f12;
  --arb-ink-2:#15181d;
  --arb-ink-3:#1d2128;
  --arb-line:rgba(255,255,255,.14);
  --arb-mute:rgba(255,255,255,.72);
  --arb-zap:var(--mt-color-secondary,#fff200);
  --arb-zap-ink:#0d0f12;
  display:block;
  margin:0 auto;
}
/* the grid is what gets the measure, so the header can style itself */
.view-id-appliance_types_we_repair .view-content,
.view-id-locations_we_work_in .view-content,
.view-id-appliance_brands_we_repair .view-content,
.arb-termgrid .view-content,
.view-id-appliance_types_we_repair .item-list,
.view-id-locations_we_work_in .item-list,
.view-id-appliance_brands_we_repair .item-list,
.arb-termgrid .item-list{
  max-width:1140px;
  margin-left:auto;margin-right:auto;
  padding:0 1.25rem 4rem;
}

/* ---------------------------------------------------------------------
   VIEW HEADER PANEL
   Paste the matching HTML into Views > Header > Global: Text area,
   text format Full HTML. Replaces the theme's page title block.
   --------------------------------------------------------------------- */
.arb-viewhead{
  --arb-ink:#0d0f12;
  --arb-ink-3:#1d2128;
  --arb-line:rgba(255,255,255,.14);
  --arb-zap:var(--mt-color-secondary,#fff200);
  --arb-zap-ink:#0d0f12;
  position:relative;
  max-width:1140px;
  margin:0 auto 2.5rem;
  padding:2.75rem 2rem;
  border-radius:18px;
  border:1px solid var(--arb-line);
  border-top:4px solid var(--arb-zap);
  background:
    radial-gradient(700px 300px at 6% 0%, rgba(255,242,0,.1), transparent 62%),
    linear-gradient(155deg,#0d0f12 0%,#15181d 60%,#0d0f12 100%);
  overflow:hidden;
}
.arb-viewhead__eyebrow{
  display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--arb-zap);margin-bottom:.85rem;
}
.arb-viewhead h1{
  color:#fff;font-weight:900;letter-spacing:-.025em;line-height:1.12;
  font-size:clamp(1.9rem,4.4vw,3rem);margin:0 0 .9rem;
}
.arb-viewhead h1 span{color:var(--arb-zap);}
.arb-viewhead p{
  color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.6;
  max-width:62ch;margin:0;
}
.arb-viewhead__btns{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem;}

/* header sits inside the view wrapper, so give it the same side gutter */
.view-header{padding:2.5rem 1.25rem 0;}

@media (max-width:860px){
  .arb-viewhead{padding:2rem 1.25rem;border-radius:14px;}
  .view-header{padding:1.5rem 1.1rem 0;}
  .arb-viewhead__btns a.mt-button{width:100%;}
}

/* --- grid container: unformatted list --- */
.view-id-appliance_types_we_repair .view-content,
.view-id-locations_we_work_in .view-content,
.view-id-appliance_brands_we_repair .view-content,
.arb-termgrid .view-content{
  display:grid;
  margin-left:0;
  margin-right:0;
}
/* --- grid container: html list --- */
.view-id-appliance_types_we_repair .item-list ul,
.view-id-locations_we_work_in .item-list ul,
.view-id-appliance_brands_we_repair .item-list ul,
.arb-termgrid .item-list ul{
  display:grid;list-style:none;margin:0;padding:0;
}

/* --- grid items, either format --- */
.view-id-appliance_types_we_repair .views-row,
.view-id-locations_we_work_in .views-row,
.view-id-appliance_brands_we_repair .views-row,
.arb-termgrid .views-row,
.view-id-appliance_types_we_repair .item-list li,
.view-id-locations_we_work_in .item-list li,
.view-id-appliance_brands_we_repair .item-list li,
.arb-termgrid .item-list li{
  margin:0;padding:0;list-style:none;
  width:auto;max-width:none;flex:none;   /* undo Bootstrap column behaviour */
}

/* ---- photo tiles: appliance types + locations ---- */
.view-id-appliance_types_we_repair .view-content,
.view-id-locations_we_work_in .view-content,
.view-id-appliance_types_we_repair .item-list ul,
.view-id-locations_we_work_in .item-list ul,
.arb-termgrid--tiles .view-content,
.arb-termgrid--tiles .item-list ul{
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1.25rem;
}

.arb-termtile{
  display:flex;flex-direction:column;height:100%;
  text-decoration:none;overflow:hidden;border-radius:14px;
  background:var(--arb-ink-3);border:1px solid var(--arb-line);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.arb-termtile:hover,.arb-termtile:focus{
  border-color:var(--arb-zap);transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(0,0,0,.4);text-decoration:none;
}
.arb-termtile__media{
  display:block;position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(140deg,#1d2128,#0d0f12);
}
.arb-termtile__media img{
  width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0;
  transition:transform .4s ease;
}
.arb-termtile:hover .arb-termtile__media img{transform:scale(1.05);}
.arb-termtile__initial{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:3.2rem;font-weight:900;color:var(--arb-zap);opacity:.28;line-height:1;
}
.arb-termtile__body{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:1.1rem 1.25rem;flex:1;
}
.arb-termtile__name{
  color:#fff;font-weight:800;font-size:1rem;line-height:1.3;letter-spacing:-.01em;
}
.arb-termtile__go{
  color:var(--arb-zap);font-weight:800;flex-shrink:0;
  transition:transform .18s ease;
}
.arb-termtile:hover .arb-termtile__go{transform:translateX(4px);}

/* ---- compact chips: 159 brands ---- */
.view-id-appliance_brands_we_repair .view-content,
.view-id-appliance_brands_we_repair .item-list ul,
.arb-termgrid--chips .view-content,
.arb-termgrid--chips .item-list ul{
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:.6rem;
}
.arb-brandchip{
  display:flex;align-items:center;height:100%;
  padding:.8rem 1.05rem;border-radius:10px;text-decoration:none;
  background:rgba(255,255,255,.04);border:1px solid var(--arb-line);
  color:#fff;font-weight:700;font-size:.95rem;line-height:1.3;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.arb-brandchip:hover,.arb-brandchip:focus{
  background:var(--arb-zap);border-color:var(--arb-zap);
  color:var(--arb-zap-ink);text-decoration:none;
}

@media (max-width:860px){
  .view-id-appliance_types_we_repair .view-content,
  .view-id-locations_we_work_in .view-content,
  .view-id-appliance_brands_we_repair .view-content,
  .arb-termgrid .view-content{padding:0 1.1rem 3rem;}
  .view-id-appliance_brands_we_repair .view-content,
  .view-id-appliance_brands_we_repair .item-list ul,
  .arb-termgrid--chips .view-content,
  .arb-termgrid--chips .item-list ul{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));}
}