/* =====================================================================
   bridge.css: glue between the NEW design (site.css, category.css, article.css,
   all copied unchanged from /new) and the PHP app.
   Loaded LAST. Nothing here edits the design files; it only adds
     1. CSS-only replacements for the behaviour site.js gave the prototype
        (mobile drawer, search overlay, hero rotation, list numbers, wide cards)
     2. styling for things the PHP app outputs that the prototype never had
        (ad slots, Google search box, LIVE TV player, gallery, CMS body content)
   ===================================================================== */

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 1a. mobile drawer + search overlay: checkbox toggles (no JS) ---------- */
.nt{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
label.icon-btn{cursor:pointer}
#navToggle:checked~.drawer{transform:none}
#searchToggle:checked~.search{display:flex}
.search label.x,.drawer label.icon-btn{cursor:pointer}
.search .x{position:absolute;top:22px;right:22px}
html:has(#navToggle:checked),html:has(#searchToggle:checked){overflow:hidden}
:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.nt:focus-visible~header label[for="navToggle"],.nt:focus-visible~header label[for="searchToggle"]{outline:2px solid var(--or)}

/* Google programmable search sits inside the new overlay */
.search .gsc-control-cse,.search .gsc-control-cse *{box-sizing:content-box}
.search .gsc-control-cse{width:min(720px,92vw);padding:0!important;background:transparent!important;border:0!important}
.search .gsc-search-box{margin:0!important;width:100%;border-bottom:2px solid var(--or)}
.search .gsc-input-box{background:transparent!important;border:0!important}
.search input.gsc-input{color:var(--ink)!important;font-family:var(--fh)!important;font-size:clamp(20px,4vw,34px)!important;background:none!important;text-indent:0!important}
.search input.gsc-input::placeholder{color:#55555b}
.search .gsc-search-button-v2{background:transparent!important;border:0!important;padding:0 6px!important}
.search .gsc-search-button-v2 svg{fill:var(--or)!important;width:26px;height:26px}
.search .gsc-results-wrapper-overlay,.search .gsc-results-wrapper-visible{background:var(--bg2)!important;color:var(--ink)}
.search .gsc-webResult.gsc-result,.search .gs-result .gs-title,.search .gs-result .gs-title *{background:transparent!important;color:var(--ink)!important}
.search .gs-snippet{color:var(--muted)!important}
.search .gcse-wrap{width:min(720px,92vw)}

/* ---------- 1b. hero slider = Swiper (fade) dressed as the new .slider ----------
   site.css positions .slide absolutely for its own JS; with Swiper the wrapper is the
   absolute layer and each slide fills it. Arrows = .sl-nav, progress bars = pagination. */
.slider.swiper{position:relative;overflow:hidden;margin:0;width:100%} /* swiper.css gives .swiper auto margins, which would shrink a grid item to 0 width */
.slider .swiper-wrapper{position:absolute;inset:0;height:100%}
.slider .slide.swiper-slide{position:relative;inset:auto;height:100%;opacity:1;display:block;transition:none}
.slider .swiper-slide-active.slide{pointer-events:auto}
.slide img{transform:none}
.slide .cap h1{margin:0}
.slider .swiper-pagination{position:absolute;left:34px;right:34px;bottom:26px;width:auto;z-index:3;display:flex;gap:6px}
.slider .swiper-pagination-bullet{flex:1;height:3px;margin:0!important;border-radius:3px;background:rgba(246,242,236,.22);opacity:1;cursor:pointer}
.slider .swiper-pagination-bullet-active{background:var(--or)}
@media (max-width:720px){.slider .swiper-pagination{left:20px;right:20px;bottom:22px}}

/* ---------- 1c. numbering (was written by JS) ---------- */
.inv{counter-reset:inv}
.irow .n::before{counter-increment:inv;content:"0" counter(inv)}
.pop{counter-reset:pop}
.pop .n::before{counter-increment:pop;content:counter(pop)}

/* ---------- 1d. category grid: every 8th card is wide (JS added .big) ----------
   same declarations as ".cgrid .card.big" in category.css */
.cgrid .card:nth-child(8n+1){grid-column:span 2}
.cgrid .card:nth-child(8n+1) .media{aspect-ratio:16/8.2}
.cgrid .card:nth-child(8n+1) h3{font-family:var(--fh);font-size:22px;line-height:1.22}
@media (max-width:720px){
  .cgrid .card:nth-child(8n+1){grid-column:1/-1}
  .cgrid .card:nth-child(8n+1) .media{aspect-ratio:16/10}
  .cgrid .card:nth-child(8n+1) h3{font-size:18px}
}
.loadmore a,.loadmore button{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.1em;padding:15px 26px;border-radius:999px;border:1px solid var(--or);color:var(--or2);display:flex;align-items:center;gap:10px;transition:all .2s}
.loadmore a:hover,.loadmore button:hover{background:var(--or);color:#120800}
.loadmore[hidden]{display:none}

/* ---------- 1e. "TË FUNDIT" ticker: second copy is only for the seamless loop ---------- */
.tk-run .dup{display:contents}

/* ---------- 2a. ad slots (MediaDesk / GPT code comes from the DB) ---------- */
.adslot{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.adslot>span{font-family:var(--fh);font-size:9px;font-weight:600;letter-spacing:.16em;color:var(--dim)}
.adslot img{width:auto;height:auto;object-fit:initial;max-width:100%}
.adslot iframe{max-width:100%}
.adslot .reklame{display:block;max-width:100%;overflow:hidden}
.insertion-box{margin:1.6em 0;text-align:center;overflow:hidden}
.insertion-box img{width:auto;height:auto;object-fit:initial;max-width:100%;margin:0 auto}
.insertion-box iframe{max-width:100%}

/* ---------- 2b. LIVE TV (livetv.php = fluid player, unchanged) ---------- */
.player .fluid_video_wrapper,.player .fluid_video_wrapper video{width:100%!important;height:100%!important;position:absolute;inset:0}
.player video{object-fit:contain}
.livea{display:block;width:100%;height:100%}

/* ---------- 2c. sidebar / lists that are rendered by templates ---------- */
.promo a{color:#04140a}
.home-aside .adslot:empty,aside .adslot:empty{display:none}
.other a{color:inherit}

/* ---------- 2d. video section (video.php) ---------- */
.vframe .pbig{width:100%;height:100%;cursor:pointer;display:block}
.vframe .pbig img{width:100%;height:100%}
.vcard.on .media{box-shadow:0 0 0 2px var(--or)}

/* ---------- 2e. article body: CMS content the prototype never had ---------- */
.abody{overflow-wrap:break-word}
.abody>:first-child{margin-top:0}
.abody iframe{max-width:100%;border:0;border-radius:14px}
.abody iframe[src*="youtube"],.abody iframe[src*="youtu.be"],.abody iframe[src*="facebook.com/plugins/video"]{width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;margin:1.2em 0;background:#000}
.abody video{max-width:100%;height:auto!important;border-radius:14px}
.abody table{max-width:100%;border-collapse:collapse;margin:0 0 1.2em}
.abody td,.abody th{border:1px solid var(--line);padding:8px 10px;font-size:16px}
.abody .imazhiim,.abody .horizontal{margin:0 0 1.4em}
.abody .imazhiim img,.abody .horizontal img{margin:0;width:100%}
.abody p img{margin:1em auto}
.abody .twitter-tweet,.abody .instagram-media{margin-left:auto!important;margin-right:auto!important}
.abody .related-list{margin:1.6em 0;padding:18px 20px;border:1px solid var(--line);border-radius:16px}
.abody .related-list::before{content:"Të këshilluara";display:block;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--or2);margin-bottom:12px}
.abody .related-list ul{list-style:none;margin:0}
.abody .related-list li{margin:0 0 10px}
.abody .related-list article{display:block}
.abody .related-list .a-card_image,.abody .related-list .a-time{display:none}
.abody .related-list a{text-decoration:none;font-weight:600}
.abody .linked-a{margin:1.6em 0;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--or);border-radius:12px}
.abody .linked-a h4{font-family:var(--fh);font-size:11px;letter-spacing:.1em;color:var(--or2);margin:0 0 8px}
.abody .linked-a .a-card_image{display:none}
.abody .linked-a a{font-weight:700;text-decoration:none}
.abody h4:has(+div>iframe[src*="docs.google.com"]){margin-top:1.6em}
.abody .kodiim{width:100%;margin:0 0 1.4em}
.abody .kodiim iframe{display:block;margin:auto;max-width:100%;border:0;aspect-ratio:auto}
.abody .framiim{position:relative;width:100%;padding-bottom:56.25%;margin:1.2em 0}
.abody .framiim iframe{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0}
.abody .denonco-box{margin:1.6em 0;padding:18px 20px;border:1px solid var(--line);border-top:2px solid var(--or);border-radius:14px}
.abody .denonco-box h3{font-size:20px;margin:0 0 8px;color:var(--or2)}
.abody .denonco-box p{font-size:16.5px;margin:0}

.abody p.tags{margin:1.6em 0 0;font-size:14px}
.abody p.tags a{display:inline-block;margin:0 6px 8px 0;padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-family:var(--fh);font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);text-decoration:none}
.abody p.tags a:hover{border-color:var(--or);color:var(--or2)}

/* photo gallery (swiper + fancybox, markup from galeri() in functions.php) */
.layout-form_gallery{margin:40px 0}
.swiper-pagination-wrap{display:flex;align-items:center;margin-bottom:16px;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.swiper-pagination-wrap span{font:inherit;color:inherit}
.gallerySwiper .swiper-slide{border-radius:14px;background:var(--card);display:flex;justify-content:center;overflow:hidden}
.gallerySwiper .swiper-slide img{display:block;height:440px!important;width:auto!important;max-width:none!important;border-radius:14px;margin:0}
.gallerySwiper .swiper-pagination{position:static!important;text-align:left!important;width:auto!important;color:inherit}
.gallerySwiper .swiper-button-next,.gallerySwiper .swiper-button-prev{width:38px!important;height:38px!important;margin-top:0;border-radius:50%;background:var(--or);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.gallerySwiper .swiper-button-next:after,.gallerySwiper .swiper-button-prev:after{color:#120800;font-weight:bolder;font-size:14px}
@media (max-width:720px){.gallerySwiper .swiper-slide img{height:260px!important}}

/* admin "Edito" link shown to logged-in editors */
.linkuim{display:inline-block;padding:.3rem .75rem;font-size:.8rem;line-height:1;border-radius:.25rem;background:#007bff;color:#fff!important;vertical-align:middle}

/* hide anything the old stylesheet used to hide on purpose */
.hideM{display:inline}
@media (max-width:720px){.hideMobile{display:none}}
.vframe .pbtn{pointer-events:none}
/* parent categories print the category name (<h2 class='a-head'>) inside the headline */
.card h3 .a-head,.feat h2 .a-head{font:inherit;margin:0}
.loadmore button:disabled{opacity:.5;cursor:wait}

/* ---------- theme switch: the header logo has one file per theme ---------- */
.logo .lg-l{display:none}
html[data-theme="light"] .logo .lg-d{display:none}
html[data-theme="light"] .logo .lg-l{display:block}
.logo img{width:100%;height:100%}