/* ==========================================================================
   LIGHT PASS — 2026-09-09
   Converts the mid-page dark bands (pricing, devices, closing CTA) to light
   surfaces and recolours their text so nothing ends up light-on-light.
   Hero, sports, support and footer stay dark on purpose: the hero and sports
   sections sit on full-bleed photography, and a dark footer is conventional.

   Loaded LAST (see proiptv_assets in functions.php) so it wins the cascade.
   !important is needed only where the Customizer CSS PART 4 whitens text.
   To revert the whole thing: dequeue 'proiptv-light' in functions.php.
   ========================================================================== */

:root{
  --lt-ink:   #2C161B;   /* headings on light */
  --lt-body:  #6F434C;   /* body copy on light */
  --lt-dim:   #824E58;   /* secondary / meta */
  --lt-accent:#C9344B;   /* accent on light (AA on white) */
  --lt-line:  rgba(84,26,38,0.12);
}

/* ---------- DEVICES + CLOSING CTA (.dev covers #devices and #any-device) --- */
.dev{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF4EF 100%)!important;
  color:var(--lt-ink)!important;
}
.dev-glow{display:none!important}
.dev::after{opacity:.25!important}
.dev-eyebrow{color:#B8452C!important}
.dev-head h2{color:var(--lt-ink)!important}
.dev-hl{color:var(--lt-accent)!important}
.dev-head p,
.dev-note,
#devices p,
#any-device p{color:var(--lt-body)!important}

/* ---------- PRICING ------------------------------------------------------- */
.pricing-sec{
  background:linear-gradient(180deg,#FBF4EF 0%,#FFFFFF 100%)!important;
  color:var(--lt-ink)!important;
}
.pricing-sec .floodlight{display:none!important}
.psec-head h2{color:var(--lt-ink)!important}
.psec-head p,
.psec-note,
#pricing p{color:var(--lt-body)!important}
.psec-note strong{color:var(--lt-ink)!important}
.psec-deal{
  background:rgba(201,52,75,0.10)!important;
  color:#8A1A31!important;
}

/* pricing cards: glass-on-dark -> solid cards on light */
.pricing-sec .ptier{
  background:#FFFFFF!important;
  border:1px solid var(--lt-line)!important;
  box-shadow:0 18px 40px -28px rgba(84,26,38,0.45)!important;
}
.pricing-sec .ptier--top{
  background:linear-gradient(180deg,#FFF7F2 0%,#FFFFFF 100%)!important;
  border-color:rgba(201,52,75,0.35)!important;
  box-shadow:0 24px 52px -30px rgba(201,52,75,0.55)!important;
  color:var(--lt-ink)!important;
}
.pricing-sec .ptier--life{
  background:linear-gradient(180deg,#FFFBF7 0%,#FFFFFF 100%)!important;
}
.ptier-name,
.ptier-price .amt,
.ptier--top .ptier-name,
.ptier--top .ptier-price .amt{color:var(--lt-ink)!important}
.ptier-price .per,
.ptier-permo,
.ptier--top .ptier-price .per,
.ptier--top .ptier-permo,
#pricing .ptier-permo,
#pricing .ptier-price .per{color:var(--lt-dim)!important}
.pfeats li,
.ptier--top .pfeats li,
#pricing .pfeats li{color:#4A2C33!important}
.pfeats li>i{color:var(--lt-accent)!important}
.ptier-rule,
.ptier--top .ptier-rule{background:var(--lt-line)!important}
.ptier-off,
.ptier-tag--life{color:#8A1A31!important;background:rgba(201,52,75,0.10)!important}

/* payment strip + supporting copy inside the pricing band */
.pay-secure,
.pay-methods span,
.pay-trust,
.psupport{color:var(--lt-body)!important}
.pay-methods span{
  background:rgba(84,26,38,0.05)!important;
  border-color:var(--lt-line)!important;
}
.pay-secure i{color:var(--lt-accent)!important}

/* ---------- PLAN BUTTONS -------------------------------------------------- */
/* These were pale glass buttons built for a dark card. On a white card they
   all but vanished, so they get solid brand fills with white text instead. */
.pricing-sec .pbtn{
  background:linear-gradient(135deg,#C9344B 0%,#8A1A31 100%)!important;
  color:#FFFFFF!important;
  box-shadow:0 14px 30px -14px rgba(138,26,49,0.65)!important;
  border:none!important;
}
.pricing-sec .pbtn span,
.pricing-sec .pbtn i{color:#FFFFFF!important;opacity:1!important}
.pricing-sec .pbtn:hover{
  box-shadow:0 20px 38px -14px rgba(138,26,49,0.8)!important;
  transform:translateY(-2px);
}
/* "most popular" card gets the warm accent so it still leads the eye */
.pricing-sec .pbtn--hot{
  background:linear-gradient(135deg,#E88442 0%,#C9344B 100%)!important;
  box-shadow:0 16px 34px -14px rgba(232,132,66,0.7)!important;
}
.pricing-sec .pbtn--hot:hover{
  box-shadow:0 22px 42px -14px rgba(232,132,66,0.85)!important;
}
/* lifetime keeps a distinct deeper fill */
.pricing-sec .pbtn--life2{
  background:linear-gradient(135deg,#8A1A31 0%,#5C1020 100%)!important;
  box-shadow:0 14px 30px -14px rgba(92,16,32,0.7)!important;
}

/* identity.css sets `.pricing-sec .ptier--top .pbtn{background:#f7eee7!important}`
   — a cream fill that read well on the old dark card and is invisible on white.
   Needs 0,4,0 specificity to beat it. */
.pricing-sec .ptier--top .pbtn,
.pricing-sec .ptier--top .pbtn--hot{
  background:linear-gradient(135deg,#E88442 0%,#C9344B 100%)!important;
  color:#FFFFFF!important;
  box-shadow:0 16px 34px -14px rgba(232,132,66,0.7)!important;
}
.pricing-sec .ptier--top .pbtn span,
.pricing-sec .ptier--top .pbtn i{color:#FFFFFF!important}

/* ==========================================================================
   HERO CTA PAIR
   The old "Choose a plan" button was a white .deal-chip pill sitting inside a
   red button with the arrow floating outside it — a leftover shape from when
   it held a "FREE TRIAL" badge plus a separate label. Rebuilt as a single
   solid pill so it reads as one control and pairs with the WhatsApp button.
   ========================================================================== */
.cta-row{align-items:center}

.cta-row .btn-glass{
  min-width:0;
  height:56px;min-height:56px;
  padding:0 1.7rem;
  border-radius:999px;
  gap:.55rem;
  background:linear-gradient(135deg,#C9344B 0%,#8A1A31 100%)!important;
  color:#FFFFFF!important;
  font-family:var(--font-display,system-ui);font-weight:800;font-size:1.12rem;
  text-transform:uppercase;letter-spacing:.045em;
  box-shadow:0 14px 28px -12px rgba(138,26,49,.75),inset 0 1px 0 rgba(255,255,255,.25)!important;
  transition:transform .3s ease,box-shadow .3s ease;
}
/* drop the glass border mask and the sweeping glint — a solid fill needs neither,
   and the glint was one of the non-composited animations flagged in the audit */
.cta-row .btn-glass::before,
.cta-row .btn-glass::after{display:none!important}
.cta-row .btn-glass .lbl{color:#FFFFFF!important}
.cta-row .btn-glass .arrow{color:#FFFFFF!important;font-size:1rem;transform:none;transition:transform .3s ease}
.cta-row .btn-glass:hover,
.cta-row .btn-glass:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 20px 38px -12px rgba(138,26,49,.9),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.cta-row .btn-glass:hover .arrow{transform:translateX(4px)}

/* WhatsApp CTA — moved here from the inline <style> so both hero buttons are
   defined together and load after identity.css. */
.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  height:56px;padding:0 1.7rem;border-radius:999px;
  background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;text-decoration:none;
  font-family:var(--font-display,system-ui);font-weight:800;font-size:.95rem;letter-spacing:-.005em;white-space:nowrap;
  box-shadow:0 14px 28px -12px rgba(18,140,126,.75),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .3s ease,box-shadow .3s ease}
.btn-wa:hover,.btn-wa:focus-visible{transform:translateY(-2px);color:#fff;
  box-shadow:0 20px 38px -12px rgba(18,140,126,.95),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-wa .ic-wa{width:22px;height:22px;flex:none;display:block}

@media (max-width:640px){
  .cta-row{gap:.8rem}
  .cta-row .btn-glass,.btn-wa{width:100%;max-width:100%;min-width:0;height:60px;min-height:60px;font-size:1rem}
  .cta-row .btn-glass{font-size:1.05rem;letter-spacing:.04em}
  .btn-wa{box-shadow:0 10px 22px -12px rgba(18,140,126,.7),inset 0 1px 0 rgba(255,255,255,.3)}
  .cta-row .btn-glass:hover,.btn-wa:hover,.btn-wa:focus-visible{transform:none}
}

/* ==========================================================================
   ANCHOR OFFSET
   .header is position:fixed and nothing in the theme sets scroll-margin, so
   every in-page jump (#pricing from the hero CTA, plus all the nav links)
   scrolled its target to y=0 — i.e. underneath the header. Offsetting by the
   header height puts the section heading in view on arrival.
   ========================================================================== */
section[id],
main [id]{scroll-margin-top:104px}

@media (max-width:640px){
  section[id],
  main [id]{scroll-margin-top:86px}
}

/* ==========================================================================
   ARTICLE HERO — 2026-09-10
   index.php's is_singular() branch rendered only the H1 and the_content(),
   so posts had no visible featured image even once one was set. The archive
   grid (.hb-media) already rendered thumbnails, which is why the blog cards
   looked half-empty rather than the articles.

   Article pages are still the dark surface (.basic-page paints text #fff),
   so the hero gets a warm hairline instead of a light-mode shadow. No
   aspect-ratio here on purpose: the source art is a consistent 3:2 and the
   width/height attributes WordPress emits already reserve the space, so the
   image is shown uncropped and contributes no CLS.
   ========================================================================== */
.post-hero{
  margin:0 0 1.9rem;
  border-radius:16px;
  overflow:hidden;
  background:#241014;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 48px -30px rgba(0,0,0,.85);
}
.post-hero img{
  display:block;
  width:100%;
  height:auto;
}

/* ==========================================================================
   END-OF-ARTICLE WHATSAPP CTA — 2026-09-10
   Selectors are scoped through .basic-page on purpose. The Customizer block
   (wp-custom-css) is printed AFTER this file in wp_head, so on equal
   specificity it wins: `.basic-page a` (0,1,1) would otherwise repaint the
   button with the body-link colour and an underline, and `.basic-page p`
   (0,1,1) would force the copy to pure white. Going through .basic-page
   raises these to (0,3,0)/(0,2,1) and beats it on specificity rather than
   with !important.
   ========================================================================== */
.basic-page .art-cta{
  margin:3rem 0 .5rem;
  padding:1.7rem 1.5rem 1.8rem;
  border-radius:18px;
  text-align:center;
  background:
    radial-gradient(120% 140% at 50% 0%,rgba(37,211,102,.13) 0%,rgba(37,211,102,0) 62%),
    rgba(255,255,255,.035);
  border:1px solid rgba(37,211,102,.30);
}
.basic-page .art-cta .art-cta-h{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(1.22rem,3vw,1.5rem);
  line-height:1.2;
  letter-spacing:-.008em;
  color:#fffaf6;
  margin:0 0 .55rem;
}
.basic-page .art-cta p{
  margin:0 auto 1.25rem;
  max-width:34rem;
  color:rgba(255,255,255,.84);
  font-size:1rem;
  line-height:1.6;
}
.basic-page .art-cta .btn-wa{
  text-decoration:none;
  color:#fff;
}
.basic-page .art-cta .btn-wa:hover{
  text-decoration:none;
  color:#fff;
}