/**
 * ITVP components & utilities. APPEND ONLY — never strip an @media block.
 */

/* ---------- Base ---------- */
body{font-family:var(--itvp-font);font-size:var(--itvp-base);color:var(--itvp-ink);
     background:var(--itvp-surface);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--itvp-font);color:var(--itvp-ink);font-weight:800;letter-spacing:-.8px}
h1{font-size:var(--itvp-h1);line-height:1.05;letter-spacing:-1.8px}
h2{font-size:var(--itvp-h2);line-height:1.15}
h3{font-size:var(--itvp-h3)}
p{color:var(--itvp-muted);line-height:1.6}
a{color:var(--itvp-blue-600);text-decoration:none}
a:hover{color:var(--itvp-blue-700)}
:focus-visible{outline:3px solid var(--itvp-blue-600);outline-offset:2px}

/* ---------- Layout ---------- */
.itvp-section{padding-block:var(--itvp-section-y)}
.itvp-section--alt{background:var(--itvp-surface-alt)}
.itvp-boxed{max-width:var(--itvp-container);margin-inline:auto;padding-inline:var(--itvp-gutter)}

/* Signature hero glow from the comps */
.itvp-hero-glow{background:
  radial-gradient(900px 460px at 82% 18%,rgba(122,90,248,.10),transparent 60%),
  linear-gradient(180deg,var(--itvp-surface-alt),var(--itvp-surface))}

/* Blue CTA band from the comps */
.itvp-cta-band{border-radius:var(--itvp-r-2xl);background:
  radial-gradient(700px 340px at 50% 0%,rgba(122,90,248,.32),transparent 62%),
  linear-gradient(115deg,var(--itvp-blue-700),var(--itvp-blue-600));
  padding:56px 32px;color:#fff}
.itvp-cta-band h2{color:#fff}

/* ---------- Buttons ---------- */
.itvp-btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--itvp-r-pill);
  font-weight:700;font-size:var(--itvp-xs);padding:11px 18px;transition:background .2s}
.itvp-btn--dark{background:var(--itvp-ink);color:#fff}
.itvp-btn--dark:hover{background:var(--itvp-ink-700);color:#fff}
.itvp-btn--blue{background:var(--itvp-blue-600);color:#fff}
.itvp-btn--blue:hover{background:var(--itvp-blue-700);color:#fff}
.itvp-btn--light{background:#fff;color:var(--itvp-ink)}
.itvp-btn--light:hover{background:var(--itvp-blue-50)}

/* ---------- Cards ---------- */
.itvp-card{background:var(--itvp-surface);border:1px solid var(--itvp-border);
  border-radius:var(--itvp-r-lg);padding:24px}
.itvp-card--lift{transition:transform .25s,box-shadow .25s}
.itvp-card--lift:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,19,43,.13)}

/* ---------- Nav dropdown (Internet → providers) ---------- */
.itp-navitem{position:relative;display:flex;align-items:center}
.itp-navitem>a{display:inline-flex;align-items:center;gap:5px}
.itp-caret{transition:transform .2s}
.itp-navitem:hover .itp-caret,.itp-navitem:focus-within .itp-caret{transform:rotate(180deg)}
.itp-dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:232px;background:#fff;border:1px solid var(--itvp-border);
  border-radius:14px;box-shadow:0 18px 40px rgba(16,19,43,.13);padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s;z-index:60}
.itp-navitem:hover .itp-dropdown,.itp-navitem:focus-within .itp-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* invisible bridge so the menu survives the cursor crossing the gap */
.itp-dropdown::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.itp-dropdown a{display:block;padding:10px 12px;border-radius:9px;font-size:var(--itvp-xs);
  font-weight:600;color:var(--itvp-ink-700);white-space:nowrap}
.itp-dropdown a:hover{background:#F2F5FD;color:var(--itvp-blue-600)}
.itp-dd-divider{height:1px;background:#EDF0F7;margin:6px 4px}
.itp-dd-all{font-weight:800;color:var(--itvp-blue-600)}

/* Elementor's nav menu markup, same behaviour */
.itvp-nav .menu-item-has-children{position:relative}
.itvp-nav .sub-menu{border-radius:14px;border:1px solid var(--itvp-border);
  box-shadow:0 18px 40px rgba(16,19,43,.13);padding:8px}

/* ---------- Footer ---------- */
.itvp-footer{background:var(--itvp-surface-dark);color:#fff}
.itvp-footer p{color:var(--itvp-muted-2);font-size:var(--itvp-fine);line-height:1.75}
.itvp-footer a{color:var(--itvp-footer-link)}

/* ---------- Elementor overrides ---------- */
/* Elementor adds its own container padding; ours lives on .itvp-boxed */
.itvp-section.e-con>.e-con-inner{padding-inline:0}
@media(max-width:767px){.e-con.itvp-row{flex-direction:column}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .itvp-card--lift:hover{transform:none}
}

/* ---------- Page-JSON helpers ---------- */
/* <em> inside headings is the blue accent used across the comps */
.itvp-em-blue em{font-style:normal;color:var(--itvp-blue-600)}
.itvp-band-dark h1,.itvp-band-dark h2,.itvp-band-dark h3{color:#fff}
.itvp-band-dark p{color:#C7CFEA}
/* Hero illustration scales down rather than overflowing on small screens */
@media(max-width:767px){
  .itvp-hero-art>div{height:360px!important}
  .itvp-hero-art img{height:340px!important}
}

/* ==========================================================================
   LOGO — rendered by [itvp_logo], resolves per page
   ========================================================================== */

.itvp-logo{display:flex;align-items:center;gap:2px;text-decoration:none}
.itvp-logo__word{font-weight:800;font-size:20px;letter-spacing:-.8px;color:var(--itvp-ink)}
.itvp-logo__chip{background:var(--itvp-blue-600);color:#fff;font-weight:800;font-size:12px;
  padding:3px 6px;border-radius:6px;margin:0 2px}
/* Provider logos are images of wildly different aspect ratios, so cap the
   height and let width follow rather than trying to normalise each asset. */
.itvp-logo--brand img{height:38px;width:auto;max-width:190px;display:block}
@media(max-width:767px){
  .itvp-logo__word{font-size:17px}
  .itvp-logo--brand img{height:30px;max-width:140px}
}

/* Footer variant sits on the dark band */
.itvp-footer .itvp-logo__word{color:#fff;font-size:19px}

/* ==========================================================================
   NAV VISIBILITY — body.itvp-nav-off is set by inc/brand-identity.php
   The header stays ONE global template; only the links collapse.
   ========================================================================== */

body.itvp-nav-off .itvp-nav-wrap{display:none!important}

/* With the centre column gone, push logo and CTA to the outer edges so the
   bar doesn't look like it lost a limb. */
body.itvp-nav-off .itvp-header-row{justify-content:space-between}
body.itvp-nav-off .itvp-header-row>.e-con,
body.itvp-nav-off .itvp-header-row>div{width:auto!important;flex:0 0 auto!important}

/* Elementor renders the mobile burger from the same widget — hide it too,
   otherwise brand pages show a toggle that opens an empty drawer. */
body.itvp-nav-off .itvp-nav .elementor-menu-toggle{display:none!important}

/* ==========================================================================
   HOMEPAGE helpers
   ========================================================================== */

/* Provider marquee — pauses on hover and freezes for reduced-motion users */
@keyframes itvp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.itvp-mq-track{display:flex;gap:56px;align-items:center;width:max-content;
  animation:itvp-marquee 34s linear infinite}
.itvp-mq:hover .itvp-mq-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.itvp-mq-track{animation:none;flex-wrap:wrap;
  justify-content:center;width:auto}}

.itvp-eyebrow-c p{text-transform:uppercase;letter-spacing:.14em;font-weight:800;
  font-size:12px;color:var(--itvp-muted-2)}

/* Plan cards: CTA aligns across a row even when feature lists differ in length */
.itvp-plans .itvp-card .elementor-widget-button{margin-top:auto}

.itvp-btn-block .elementor-button{width:100%;justify-content:center}

/* ==========================================================================
   PHP FALLBACK HEADER / FOOTER
   Only rendered while the Elementor Pro licence is inactive. Kept visually
   identical to the Elementor templates so the handover is invisible.
   ========================================================================== */

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:999;background:#fff;padding:10px 16px;
  border-radius:var(--itvp-r-md);box-shadow:0 8px 24px rgba(16,19,43,.18)}

/* ---- Top CTA bar ---- */
.itvp-topbar{background:var(--itvp-ink);padding:15px 24px}
.itvp-topbar__inner{max-width:var(--itvp-container);margin:0 auto;display:flex;
  align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.itvp-topbar span{font-size:12.5px;font-weight:700;color:#fff;text-align:center}
.itvp-topbar a{color:var(--itvp-cyan-500)}
.itvp-topbar svg{flex:0 0 auto}

/* ---- Nav bar ---- */
.itvp-header{background:var(--itvp-surface);border-bottom:1px solid var(--itvp-border);
  position:sticky;top:0;z-index:40}
.itvp-header__inner{max-width:var(--itvp-container);margin:0 auto;
  padding:14px var(--itvp-gutter);display:flex;align-items:center;gap:20px}
.itvp-header__logo{flex:0 0 auto}
.itvp-header__cta{flex:0 0 auto;margin-left:auto}
.itvp-nav-wrap{flex:1 1 auto;display:flex;justify-content:center}

/* ---- Menu ---- */
.itvp-menu{list-style:none;margin:0;padding:0;display:flex;gap:28px;align-items:center}
.itvp-menu li{margin:0;position:relative}
.itvp-menu>li>a{font-size:14px;font-weight:600;color:var(--itvp-ink-700);
  display:inline-flex;align-items:center;gap:5px;padding:6px 0}
.itvp-menu>li>a:hover,
.itvp-menu>li.current-menu-item>a,
.itvp-menu>li.current-menu-ancestor>a{color:var(--itvp-blue-600)}

/* Caret on parents — CSS-generated so no extra markup is needed */
.itvp-menu>li.menu-item-has-children>a::after{content:"";width:7px;height:7px;
  border-right:2.4px solid currentColor;border-bottom:2.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.itvp-menu>li.menu-item-has-children:hover>a::after{transform:rotate(225deg) translateY(1px)}

/* ---- Dropdown ---- */
.itvp-menu .sub-menu{list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(6px);min-width:232px;background:#fff;
  border:1px solid var(--itvp-border);border-radius:14px;
  box-shadow:0 18px 40px rgba(16,19,43,.13);opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .18s,transform .18s;z-index:60}
.itvp-menu li:hover>.sub-menu,
.itvp-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
/* invisible bridge so the panel survives the cursor crossing the gap */
.itvp-menu .sub-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.itvp-menu .sub-menu a{display:block;padding:10px 12px;border-radius:9px;font-size:13.5px;
  font-weight:600;color:var(--itvp-ink-700);white-space:nowrap}
.itvp-menu .sub-menu a:hover{background:var(--itvp-blue-hover);color:var(--itvp-blue-600)}

/* ---- Burger ---- */
.itvp-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;
  padding:10px;cursor:pointer;margin-left:auto;border-radius:var(--itvp-r-sm)}
.itvp-burger span{display:block;width:22px;height:2.4px;background:var(--itvp-ink);
  border-radius:2px;transition:transform .2s,opacity .2s}
.itvp-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.itvp-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.itvp-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* ---- Footer ---- */
.itvp-footer{background:var(--itvp-surface-dark)}
.itvp-footer__inner{max-width:var(--itvp-container);margin:0 auto;padding:56px var(--itvp-gutter) 34px}
.itvp-footer__brand{max-width:420px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
.itvp-footer__blurb{margin:14px 0 16px;font-size:13.5px;line-height:1.65;color:var(--itvp-muted-2)}
.itvp-footer__legal{margin:22px 0 0;font-size:11.5px;line-height:1.75;color:var(--itvp-muted-2)}
.itvp-btn--ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-size:14px}
.itvp-btn--ghost:hover{background:rgba(255,255,255,.16);color:#fff}

/* ---- Mobile ---- */
@media(max-width:1023px){
  .itvp-burger{display:flex}
  .itvp-header__cta{display:none}
  .itvp-nav-wrap{position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--itvp-border);box-shadow:0 18px 40px rgba(16,19,43,.12);
    padding:12px 20px 20px;display:none}
  .itvp-nav-wrap.is-open{display:block}
  .itvp-header__inner{position:relative;flex-wrap:wrap}
  .itvp-menu{flex-direction:column;align-items:stretch;gap:2px}
  .itvp-menu>li>a{padding:12px 4px;font-size:15px}
  /* Dropdowns become inline lists on touch — hover panels are unusable there */
  .itvp-menu .sub-menu{position:static;transform:none;opacity:1;visibility:visible;
    pointer-events:auto;box-shadow:none;border:none;min-width:0;padding:0 0 6px 14px}
  .itvp-menu .sub-menu::before{display:none}
  .itvp-menu>li.menu-item-has-children>a::after{margin-left:auto}
}

/* ==========================================================================
   ICON SIZE GUARD
   If a page's generated CSS file is missing (cache wipe, cold deploy), icon
   SVGs lose their size rules and render at full block width. These caps make
   that failure mode invisible instead of catastrophic.
   ========================================================================== */
.elementor-icon-list-icon svg{width:1.3em;height:1.3em}
.elementor-button-icon svg{width:1.05em;height:1.05em}
.elementor-accordion-icon svg{width:1em;height:1em}
.elementor-icon svg{max-width:60px;max-height:60px}

/* ==========================================================================
   PLANS SLIDER — "Popular Offers This Month"
   ==========================================================================
   WHY THE !important AND THE --overflow VAR
   Elementor's base rule is `.e-con{overflow:var(--overflow)}` — the SAME
   specificity (0,1,0) as `.itvp-plans-track`, and Elementor's stylesheet is
   enqueued AFTER the theme's. Without both the variable override and the
   !important, the track never becomes a scroll container: the cards spill out
   of the viewport (page-level horizontal scroll) and scrollBy() silently does
   nothing, which reads as "the arrows are broken".
   ========================================================================== */
.itvp-plans-track{
  --overflow:auto;                    /* beat Elementor's own container var  */
  overflow-x:auto!important;
  overflow-y:hidden!important;        /* no stray vertical bar from shadows  */
  flex-wrap:nowrap!important;         /* cards must never wrap to a 2nd row  */
  width:100%;max-width:100%;min-width:0;
  scroll-snap-type:x mandatory;
  scroll-padding-inline-start:2px;    /* matches the track's own side padding */
  scrollbar-width:none;-ms-overflow-style:none;
}
.itvp-plans-track::-webkit-scrollbar{display:none;height:0}

/* Cards: fixed width, never shrink. `flex:0 0 auto` guards against
   Elementor's default flex-shrink:1 collapsing them to fit. */
.itvp-plans-track>.e-con{
  flex:0 0 auto!important;
  scroll-snap-align:start;            /* `center` fights programmatic scroll  */
}
@media(max-width:479px){
  /* --width is Elementor's own container width variable, so this stays
     editable-safe: no !important needed, and the panel value still shows. */
  .itvp-plans-track>.e-con{--width:84vw}
}

/* Safety net: even if a future edit widens the track, nothing escapes the
   page. `clip` (not `hidden`) because hidden would make this a scroll
   container and could break sticky descendants. */
.itvp-plans{overflow-x:clip}

/* --- Arrows -------------------------------------------------------------- */
.itvp-plans-arrows{display:flex;justify-content:center;gap:14px}
.itvp-plans-arrow{width:52px;height:52px;border-radius:50%;background:#fff;
  border:1px solid var(--itvp-border);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;padding:0;line-height:0;
  box-shadow:0 6px 16px -10px rgba(16,19,43,.4);
  transition:border-color .2s var(--itvp-ease),opacity .2s var(--itvp-ease)}
.itvp-plans-arrow:hover:not(:disabled){border-color:var(--itvp-blue-600)}
.itvp-plans-arrow:disabled{opacity:.4;cursor:default}

/* --- Feature check lists -------------------------------------------------
   Elementor paints `fill` onto inlined SVG icons. A stroke-drawn tick with a
   fill applied renders as a filled wedge instead of a tick — which is why the
   checkmarks looked malformed. Forcing fill:none restores the stroke path. */
.itvp-check-list .elementor-icon-list-icon svg,
.itvp-check-list .elementor-icon-list-icon svg *{fill:none!important}
.itvp-check-list .elementor-icon-list-icon svg{
  stroke:var(--itvp-green-500);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.itvp-check-list .elementor-icon-list-item{align-items:flex-start}
.itvp-check-list .elementor-icon-list-icon{margin-top:1px;flex:none}

@media(prefers-reduced-motion:reduce){
  .itvp-plans-track{scroll-behavior:auto}
  .itvp-plans-arrow{transition:none}
}