/* Performance fixes (audit 2026-07-03) — loaded last so its rules win the cascade */
@font-face{font-family:"League Spartan";src:url("/wp-content/uploads/fonts/league-spartan-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Metal Mania";src:url("/wp-content/uploads/fonts/metal-mania-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:optional;}
@font-face{font-family:"League Spartan Fallback";src:local("Arial");size-adjust:94%;ascent-override:88%;descent-override:22%;line-gap-override:0%;}
:root{--fontFamily:"League Spartan","League Spartan Fallback",sans-serif;--metalFont:"Metal Mania",system-ui;}
/* Hero ticker: reserve image space (all slides are 1059x706) and stop the
   pre-init vertical stack of owl-carousel items (desktop CLS 0.169 culprit) */
.dish-tv-banner-item img{aspect-ratio:1059/706;width:100%;height:auto;}
.owl-dish-tv-banner-slide:not(.owl-loaded){display:flex;flex-wrap:nowrap;overflow:hidden;gap:20px;}
.owl-dish-tv-banner-slide:not(.owl-loaded) .dish-tv-banner-item{flex:0 0 100%;}
@media (min-width:576px){.owl-dish-tv-banner-slide:not(.owl-loaded) .dish-tv-banner-item{flex-basis:calc(50% - 10px);}}
@media (min-width:768px){.owl-dish-tv-banner-slide:not(.owl-loaded) .dish-tv-banner-item{flex-basis:calc(33.33% - 14px);}}
@media (min-width:992px){.owl-dish-tv-banner-slide:not(.owl-loaded) .dish-tv-banner-item{flex-basis:calc(40% - 12px);}}
@media (min-width:1440px){.owl-dish-tv-banner-slide:not(.owl-loaded) .dish-tv-banner-item{flex-basis:calc(33.33% - 14px);}}
@media (min-width:1881px){.owl-dish-tv-banner-slide:not(.owl-loaded) .dish-tv-banner-item{flex-basis:calc(25% - 15px);}}
/* Icon subsets: the full tabler (203 KB) + remixicon (136 KB) sets are dequeued;
   only the 4 glyphs used across the site are kept (audit 2026-07-03) */
/* FONT FILES also subset (2026-07-11): the full binaries (759KB tabler + 154KB remixicon)
   landed on the critical path when @font-face moved into the inline critical CSS, starving
   slow-4G loads. v2 subset = ALL 9 tabler glyphs referenced by CSS content: rules sitewide
   (nav/mobile dropdown arrows ea4d/ea6e/ea4e, accordion ea13/f1af, watchlist eb7b + the 3
   markup icons). Flaticon stays on the theme's full 18KB file: 143 classes defined, usage
   per page unpredictable, file is small. If icons ever render as boxes: re-sweep with
   scan-icons.js and rebuild (AGENT.md §7). */
@font-face{font-family:"tabler-icons";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/uploads/fonts/tabler-subset-v3.woff2") format("woff2");}
.ti{font-family:"tabler-icons"!important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.ti-arrow-right:before{content:"\ea1f";}
.ti-circle-check:before{content:"\ea67";}
.ti-x:before{content:"\eb55";}
@font-face{font-family:"remixicon";src:url("/wp-content/uploads/fonts/remixicon-subset-v3.woff2") format("woff2");font-display:swap;}
/* Carousel JS injects these two nav-arrow icons (navText) — the CSS sweep couldn't see
   them, so the subset lacked their rules AND glyphs until v3 (2026-07-14). */
.ri-arrow-left-line:before{content:"\ea60";}
.ri-arrow-right-line:before{content:"\ea6c";}
/* NOTE: the nav/dropdown/accordion arrow content: codepoints (ea4d etc.) resolve via
   font-family REMIXICON, not tabler — both subsets carry the full swept glyph union. */
/* Nav consistency (2026-07-11): navbar-custom.css dims nav links to opacity .8 !important
   on hover, and the same dim lingers on clicked/open toggles — inconsistent washed-out
   states. Full opacity everywhere; the red color change stays as the hover affordance. */
.navbar .navbar-nav .nav-item .nav-link:hover,
.navbar .navbar-nav .nav-item .nav-link:focus,
.navbar .navbar-nav li.show > .nav-link{opacity:1 !important;}
[class^="ri-"],[class*=" ri-"]{font-family:"remixicon"!important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.ri-arrow-up-double-fill:before{content:"\f2ea";}
/* Heading-order fix (a11y): three widget h4s became h3s; keep their original h4 styling */
.affordable h3{font-size:20px;font-weight:500;}
.footer-single-widget h3{font-size:20px;font-weight:600;color:var(--whiteColor);margin-bottom:15px;}
/* LCP pin v2 (2026-07-11): with critical CSS only, the hero renders 395px wide; owl later
   re-renders it at full 412px, resetting mobile LCP to JS-arrival time (~10s on slow 4G).
   Fix: at first paint, full-bleed the pre-init carousel to the viewport and oversize slide-1
   ~3% so the FIRST paint is the largest LCP candidate; owl snaps it back at init (equal-size
   repaints never update LCP). Mobile only — desktop LCP is text and already fast. */
@media (max-width:767px){
  .owl-dish-tv-banner-slide:not(.owl-loaded){width:100vw;margin-left:calc(50% - 50vw);}
  .owl-dish-tv-banner-slide:not(.owl-loaded) .dish-tv-banner-item:first-child{flex:0 0 108%;max-width:108%;}
}
/* Nav dropdown arrows (2026-07-11): the caret kept its own color while the label changed
   on hover/click — make the arrow always follow its link's current color. */
.navbar .navbar-nav .nav-item .nav-link.dropdown-icon::after,
.navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-item.dropdown-icon::after{color:inherit !important;}
/* Nav dropdown states, explicit (2026-07-11): label AND arrow locked to the hover red
   whenever hovered, focused (clicked) or open — no inheritance games. */
.navbar .navbar-nav .nav-item .nav-link.dropdown-icon:hover,
.navbar .navbar-nav .nav-item .nav-link.dropdown-icon:focus,
.navbar .navbar-nav li.show > .nav-link.dropdown-icon{color:var(--primaryColor,#C90E0E) !important;}
.navbar .navbar-nav .nav-item .nav-link.dropdown-icon:hover::after,
.navbar .navbar-nav .nav-item .nav-link.dropdown-icon:focus::after,
.navbar .navbar-nav li.show > .nav-link.dropdown-icon::after{color:var(--primaryColor,#C90E0E) !important;}
/* Pre-init reveal for the provider/choose carousel (2026-07-14): same display:none-until-JS
   collapse that hit the hero — it was the reseller page's CLS 0.323 (items 1/2/2/3/4, margin 20). */
.owl-e-sim-provider-choose-slider:not(.owl-loaded){display:flex;flex-wrap:nowrap;overflow:hidden;gap:20px;}
.owl-e-sim-provider-choose-slider:not(.owl-loaded)>*{flex:0 0 100%;}
@media (min-width:576px){.owl-e-sim-provider-choose-slider:not(.owl-loaded)>*{flex-basis:calc(50% - 10px);}}
@media (min-width:992px){.owl-e-sim-provider-choose-slider:not(.owl-loaded)>*{flex-basis:calc(33.33% - 14px);}}
@media (min-width:1200px){.owl-e-sim-provider-choose-slider:not(.owl-loaded)>*{flex-basis:calc(25% - 15px);}}
/* Links inside the red device cards (2026-07-12): global link colors are red-on-red here —
   faint at rest, fully invisible once clicked/visited. White + underline in every state. */
.e-sim-provider-choose-card .content a,
.e-sim-provider-choose-card .content a:link,
.e-sim-provider-choose-card .content a:visited,
.e-sim-provider-choose-card .content a:hover,
.e-sim-provider-choose-card .content a:focus,
.e-sim-provider-choose-card .content a:active{color:#fff !important;text-decoration:underline !important;text-underline-offset:2px;}
.e-sim-provider-choose-card .content a:hover{opacity:.85;}

/* Navbar logo pin (2026-07-17): the theme renders the logo at natural file size (no CSS
   of its own). The white_logo option now holds a 210x68 asset served in a 140x45 display
   box — 1.5x density, sharp on phones, and exactly what PSI's low-resolution audit expects
   (displayed 140x45 x 1.5 DPR = 210x68). Without this pin the logo would grow to 210x68. */
.navbar-brand .main-logo { height: 45px; width: auto; }

/* Mobile nav drawer (2026-07-17): the drawer's logo slot renders the white-text logo on
   the drawer's white background — a half-invisible ghost. Hide it and keep the close
   button on the right. body.ds-drawer-open (set by the observer in perf-fixes.php) pins
   the page while the menu is open; the drawer body scrolls itself and never chains out. */
.responsive-navbar .offcanvas-header .logo { display: none !important; }
.responsive-navbar .offcanvas-header { justify-content: flex-end; }
#navbarOffcanvas .offcanvas-body { overflow-y: auto; overscroll-behavior: contain; }
body.ds-drawer-open { overflow: hidden; }