/* ============================================================================
   BroadbandSwitch.uk  ·  /best-broadband-for-gta-6.html
   CONTRAST FIX  ·  load AFTER assets/gta6.css

   THE BUG
   -------
   gta6.css set text colours on several elements but never set their
   background, so the site's global stylesheet was painting behind them.
   In the dark sections that produced white text on a white background,
   most visibly on the FAQ accordions and the CGNAT and speed tables.

   Elements that had a colour but no background:
     summary, table, thead, tbody, td, caption, dl, dt, dd

   THE FIX
   -------
   Every one of those now has an explicit background AND colour, scoped to
   this page only.

   ON !important
   -------------
   Used deliberately and only on background-color and color for the affected
   elements. We cannot see the global stylesheet from here, so specificity
   alone is not a guarantee. Every selector is scoped under .gta6 so nothing
   can escape this page. Once you know which global rule was winning you can
   drop the !important flags and keep the doubled .gta6.gta6 specificity.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   0. INHERITANCE GUARD  (must stay first: later rules deliberately override it)

   A global rule such as `p { color:#333 }` beats an inherited colour, because
   inheritance always loses to a rule that targets the element directly. That
   is what turned the legal block text dark grey on a near-black background.

   These rules force unclassed text elements to inherit from their container
   again, on every surface, light or dark, without hardcoding a colour.
   `:not([class])` keeps them away from anything we style deliberately, such as
   .g6-muted, .g6-lede or .g6-mini.
   --------------------------------------------------------------------------- */
.gta6.gta6 p:not([class]),
.gta6.gta6 li:not([class]),
.gta6.gta6 span:not([class]),
.gta6.gta6 strong:not([class]),
.gta6.gta6 em:not([class]),
.gta6.gta6 b:not([class]),
.gta6.gta6 i:not([class]),
.gta6.gta6 small:not([class]),
.gta6.gta6 dd:not([class]),
.gta6.gta6 dt:not([class]),
.gta6.gta6 div:not([class]) > p{
  color:inherit !important;
}

/* Containers that set their own text colour, restated so the guard above has
   something correct to inherit from. */
.gta6.gta6 .g6-legalblock,
.gta6.gta6 .g6-legalblock p{ color:var(--txt-dim) !important; }
.gta6.gta6 .g6-legalblock a{ color:var(--pink-soft) !important; }
.gta6.gta6 .g6-trust,
.gta6.gta6 .g6-trust span{ color:var(--txt-l) !important; }
.gta6.gta6 .g6-trust .g6-muted{ color:var(--txt-lm) !important; }
.gta6.gta6 .g6-stat,
.gta6.gta6 .g6-stat p{ color:var(--txt-dm) !important; }
.gta6.gta6 .g6-answer,
.gta6.gta6 .g6-answer p{ color:var(--txt-d) !important; }
.gta6.gta6 .g6-warnbox,
.gta6.gta6 .g6-warnbox strong{ color:var(--txt-d) !important; }
.gta6.gta6 .g6-ov p{ color:var(--txt-dm) !important; }
.gta6.gta6 .g6-ov h3{ color:#fff !important; }

/* Links must not be caught by the guard, so restate them here. */
.gta6.gta6 a{ color:var(--pink-2); }
.gta6.gta6 .g6-dark a{ color:var(--pink-soft); }
.gta6.gta6 .g6-btn{ text-decoration:none; }

/* ---------------------------------------------------------------------------
   1. TABLES IN DARK SECTIONS
   This is what turned the CGNAT table and the connection targets table white.
   --------------------------------------------------------------------------- */
.gta6.gta6 .g6-dark .g6-tw{
  background-color:rgba(255,255,255,.03) !important;
  border-color:var(--line-d) !important;
}
.gta6.gta6 .g6-dark .g6-tw table,
.gta6.gta6 .g6-dark .g6-tw thead,
.gta6.gta6 .g6-dark .g6-tw tbody,
.gta6.gta6 .g6-dark .g6-tw tr{
  background-color:transparent !important;
}
.gta6.gta6 .g6-dark .g6-tw th{
  background-color:rgba(255,255,255,.06) !important;
  color:var(--txt-dim) !important;
}
.gta6.gta6 .g6-dark .g6-tw td{
  background-color:transparent !important;
  color:var(--txt-d) !important;
}
.gta6.gta6 .g6-dark .g6-tw td:first-child{ color:#fff !important; }
.gta6.gta6 .g6-dark .g6-tw td.g6-muted,
.gta6.gta6 .g6-dark .g6-tw .g6-muted{ color:var(--txt-dm) !important; }
.gta6.gta6 .g6-dark .g6-tw caption{
  background-color:transparent !important;
  color:var(--txt-dim) !important;
  border-color:var(--line-d) !important;
}
.gta6.gta6 .g6-dark .g6-tw tr.g6-best{ background-color:rgba(61,220,151,.12) !important; }
.gta6.gta6 .g6-dark .g6-tw tr.g6-best td{ color:#B6FFE2 !important; }


/* ---------------------------------------------------------------------------
   2. TABLES IN LIGHT SECTIONS
   Re-asserted so global table styling cannot invert these either.
   --------------------------------------------------------------------------- */
.gta6.gta6 .g6-tw{
  background-color:#fff !important;
  border-color:var(--line-l) !important;
}
.gta6.gta6 .g6-tw table,
.gta6.gta6 .g6-tw thead,
.gta6.gta6 .g6-tw tbody,
.gta6.gta6 .g6-tw tr{ background-color:transparent !important; }
.gta6.gta6 .g6-tw th{
  background-color:var(--cream-2) !important;
  color:var(--txt-lm) !important;
}
.gta6.gta6 .g6-tw td{
  background-color:transparent !important;
  color:var(--txt-l) !important;
}
.gta6.gta6 .g6-tw td.g6-muted,
.gta6.gta6 .g6-tw .g6-muted{ color:var(--txt-lm) !important; }
.gta6.gta6 .g6-tw caption{
  background-color:transparent !important;
  color:var(--txt-lm) !important;
}
.gta6.gta6 .g6-tw tr.g6-best{ background-color:rgba(61,220,151,.13) !important; }
.gta6.gta6 .g6-tw tr.g6-best td{ color:var(--txt-l) !important; }

/* dark rules must win over the light block above, so repeat the order */
.gta6.gta6 .g6-dark .g6-tw{ background-color:rgba(255,255,255,.03) !important; }
.gta6.gta6 .g6-dark .g6-tw th{ background-color:rgba(255,255,255,.06) !important; color:var(--txt-dim) !important; }
.gta6.gta6 .g6-dark .g6-tw td{ color:var(--txt-d) !important; }
.gta6.gta6 .g6-dark .g6-tw td:first-child{ color:#fff !important; }
.gta6.gta6 .g6-dark .g6-tw caption{ color:var(--txt-dim) !important; }
.gta6.gta6 .g6-dark .g6-tw tr.g6-best td{ color:#B6FFE2 !important; }


/* ---------------------------------------------------------------------------
   3. FAQ ACCORDIONS
   summary had colour but no background. This was the white on white.
   --------------------------------------------------------------------------- */
.gta6.gta6 details{
  background-color:#fff !important;
  border:1px solid var(--line-l);
}
.gta6.gta6 details summary{
  background-color:transparent !important;
  color:var(--txt-l) !important;
}
.gta6.gta6 details .g6-body{ color:var(--txt-l) !important; }

.gta6.gta6 .g6-dark details{
  background-color:var(--plum-3) !important;
  border-color:var(--line-d) !important;
}
.gta6.gta6 .g6-dark details summary{
  background-color:transparent !important;
  color:#fff !important;
}
.gta6.gta6 .g6-dark details .g6-body{ color:var(--txt-dm) !important; }
.gta6.gta6 .g6-dark details[open]{ border-color:rgba(255,45,138,.45) !important; }
.gta6.gta6 details summary::-webkit-details-marker{ display:none; }
.gta6.gta6 details summary::marker{ content:""; }


/* ---------------------------------------------------------------------------
   4. KEY FACTS LIST
   dl, dt and dd had no background. dd is white text, so a global white
   dl background would have hidden it.
   --------------------------------------------------------------------------- */
.gta6.gta6 .g6-keyfacts,
.gta6.gta6 .g6-keyfacts>div,
.gta6.gta6 .g6-keyfacts dt,
.gta6.gta6 .g6-keyfacts dd{ background-color:transparent !important; }
.gta6.gta6 .g6-keyfacts dt{ color:var(--txt-dim) !important; }
.gta6.gta6 .g6-keyfacts dd{ color:#fff !important; }


/* ---------------------------------------------------------------------------
   5. CARDS, PANELS AND THE RESULT AREA
   All used semi-transparent backgrounds that a global rule could replace.
   --------------------------------------------------------------------------- */
.gta6.gta6 .g6-card{ background-color:#fff !important; }
.gta6.gta6 .g6-card p{ color:var(--txt-l) !important; }
.gta6.gta6 .g6-card .g6-muted{ color:var(--txt-lm) !important; }
.gta6.gta6 .g6-dark .g6-card{ background-color:rgba(255,255,255,.05) !important; }
.gta6.gta6 .g6-dark .g6-card p{ color:var(--txt-dm) !important; }
.gta6.gta6 .g6-dark .g6-card h3{ color:#fff !important; }

.gta6.gta6 .g6-stat{ background-color:var(--plum-2) !important; border-color:var(--line-d) !important; }
.gta6.gta6 .g6-stat p{ color:var(--txt-dm) !important; }
.gta6.gta6 .g6-stat b{ color:var(--sun) !important; }
.gta6.gta6 .g6-stat cite{ color:var(--txt-dim) !important; }

.gta6.gta6 .g6-gauge{ background-color:rgba(255,255,255,.05) !important; }
.gta6.gta6 .g6-gauge .g6-k{ color:var(--txt-dim) !important; }
.gta6.gta6 .g6-gauge .g6-v{ color:#fff !important; }
.gta6.gta6 .g6-gauge.g6-ok .g6-v{ color:var(--mint) !important; }
.gta6.gta6 .g6-gauge.g6-mid .g6-v{ color:var(--sun) !important; }
.gta6.gta6 .g6-gauge.g6-bad .g6-v{ color:var(--pink) !important; }

.gta6.gta6 .g6-two>div{ background-color:rgba(255,255,255,.05) !important; }
.gta6.gta6 .g6-two .g6-v{ color:#fff !important; }
.gta6.gta6 .g6-two .g6-k{ color:var(--txt-dim) !important; }

.gta6.gta6 .g6-vgrid>div{ background-color:rgba(255,255,255,.05) !important; }
.gta6.gta6 .g6-vgrid>div.g6-hero-cell{
  background-image:linear-gradient(120deg,rgba(255,45,138,.18),rgba(255,193,94,.09)) !important;
}
.gta6.gta6 .g6-vgrid b{ color:#fff !important; }
.gta6.gta6 .g6-vgrid>div.g6-hero-cell b{ color:var(--sun) !important; }
.gta6.gta6 .g6-vgrid .g6-k,
.gta6.gta6 .g6-vgrid em{ color:var(--txt-dim) !important; }

.gta6.gta6 .g6-stab{ background-color:rgba(61,220,151,.1) !important; color:var(--txt-d) !important; }
.gta6.gta6 .g6-stab.g6-warn{ background-color:rgba(255,193,94,.1) !important; }
.gta6.gta6 .g6-stab.g6-bad{ background-color:rgba(255,45,138,.12) !important; }
.gta6.gta6 .g6-stab strong{ color:#fff !important; }

.gta6.gta6 .g6-pc{ background-image:linear-gradient(150deg,var(--plum-3),var(--plum-2)) !important; }
.gta6.gta6 .g6-answer{ background-color:rgba(255,45,138,.1) !important; }
.gta6.gta6 .g6-disclosure{ background-color:rgba(255,255,255,.05) !important; color:var(--txt-dm) !important; }
.gta6.gta6 .g6-warnbox{ color:var(--txt-d) !important; }
.gta6.gta6 .g6-tier{ background-color:transparent !important; }
.gta6.gta6 .g6-legalblock{ background-color:var(--ink) !important; color:var(--txt-dim) !important; }
.gta6.gta6 .g6-trust{ background-color:var(--cream-2) !important; color:var(--txt-l) !important; }


/* ---------------------------------------------------------------------------
   6. FORM CONTROLS
   The manual speed box is white text, so it needed its background pinning.
   --------------------------------------------------------------------------- */
.gta6.gta6 .g6-pc input{
  background-color:#fff !important;
  color:var(--txt-l) !important;
  border:0 !important;
}
.gta6.gta6 .g6-manual input{
  background-color:rgba(255,255,255,.1) !important;
  color:#fff !important;
  border:1px solid var(--line-d) !important;
}
.gta6.gta6 .g6-manual input::placeholder{ color:var(--txt-dim) !important; opacity:1; }


/* ---------------------------------------------------------------------------
   7. BUTTONS
   Global link colours were previously beating the button label colour.
   Pinned here so it cannot happen again in any context.
   --------------------------------------------------------------------------- */
.gta6.gta6 .g6-btn-pink,
.gta6.gta6 a.g6-btn-pink,
.gta6.gta6 button.g6-btn-pink,
.gta6.gta6 .g6-dark .g6-btn-pink{
  background-color:var(--pink-btn) !important;
  background-image:none !important;
  color:#fff !important;
}
.gta6.gta6 .g6-btn-pink:hover{ background-color:#C81365 !important; color:#fff !important; }
.gta6.gta6 .g6-btn-out{ background-color:transparent !important; color:var(--txt-l) !important; }
.gta6.gta6 .g6-dark .g6-btn-out{ color:#fff !important; border-color:rgba(255,143,191,.4) !important; }


/* ---------------------------------------------------------------------------
   8. DIAGRAMS
   The inline SVGs colour their text with fill attributes. A global
   "svg text { fill: ... }" rule would beat those, because CSS outranks a
   presentation attribute. Neutralised here without overriding our own fills.
   --------------------------------------------------------------------------- */
.gta6.gta6 figure svg text{ fill:revert-layer; }
@supports not (color: revert-layer){
  .gta6.gta6 figure svg text{ fill:inherit; }
}
.gta6.gta6 figure svg{ background-color:#fff !important; border-color:var(--line-l) !important; }
.gta6.gta6 .g6-dark figure svg{
  background-color:rgba(255,255,255,.03) !important;
  border-color:var(--line-d) !important;
}
.gta6.gta6 figcaption{ color:var(--txt-lm) !important; }
.gta6.gta6 .g6-dark figcaption{ color:var(--txt-dm) !important; }


/* ---------------------------------------------------------------------------
   9. SECTION BACKGROUNDS AND BASE TEXT
   Belt and braces: pin the two surfaces so nothing can invert them.
   --------------------------------------------------------------------------- */
.gta6.gta6{ background-color:var(--cream); color:var(--txt-l); }
.gta6.gta6 section{ background-color:transparent; }
.gta6.gta6 .g6-dark{ background-color:var(--plum) !important; color:var(--txt-d) !important; }
.gta6.gta6 .g6-dark h2,
.gta6.gta6 .g6-dark h3,
.gta6.gta6 .g6-dark h4{ color:#fff !important; }
.gta6.gta6 .g6-dark p,
.gta6.gta6 .g6-dark li,
.gta6.gta6 .g6-dark .g6-lede{ color:var(--txt-d); }
.gta6.gta6 .g6-dark .g6-muted{ color:var(--txt-dm) !important; }
.gta6.gta6 .g6-game-sec{
  background-image:linear-gradient(180deg,var(--ink),var(--plum) 40%,var(--plum-2)) !important;
}
.gta6.gta6 .g6-hero{ background-color:var(--plum) !important; }


/* ---------------------------------------------------------------------------
   10. ANCHOR OFFSET
   Stops a sticky global header covering the target when someone clicks an
   in-page link such as "Test your line in 30 seconds".
   --------------------------------------------------------------------------- */
.gta6 [id]{ scroll-margin-top:96px; }