/*
Theme Name: topshqip
Theme URI: https://example.com
Author: Your Name
Description: Modern, performance-first WordPress theme with iOS-style header/nav, theme toggle, and featured slider.
Version: 1.7.11
Text Domain: topshqip
*/

:root{
  --bg:#f7f8fb;
  --surface:#ffffff;
  --text:#0b1220;
  --muted:#4b5563;
  --border:rgba(2,6,23,.10);
  --accent:#2563eb;
  --maxw:1160px;
  --radius:18px;
  --shadow:0 18px 45px rgba(2,6,23,.10);
  --headerBlur: blur(16px);
  --chipBg: rgba(2,6,23,.04);
  --chipBgHover: rgba(2,6,23,.07);
  --chipBorder: rgba(2,6,23,.10);
}

html{background:#ffffff;color-scheme:light;}
html[data-theme="dark"]{color-scheme:dark;}

/* Manual theme override */
:root:root[data-theme="dark"]{
  --bg:#000000;
  --surface:#050505;
  --text:#f3f4f6;
  --muted:#a7b0bb;
  --border:rgba(255,255,255,.12);
  --accent:#4da3ff;
  --shadow:0 18px 45px rgba(0,0,0,.45);
  --chipBg: rgba(255,255,255,.08);
  --chipBgHover: rgba(255,255,255,.12);
  --chipBorder: rgba(255,255,255,.14);
}

/* If no manual choice, follow OS */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f7f8fb;
    --surface:#ffffff;
    --text:#0b1220;
    --muted:#4b5563;
    --border:rgba(2,6,23,.10);
    --accent:#2563eb;
    --shadow:0 18px 45px rgba(2,6,23,.10);
    --chipBg: rgba(2,6,23,.04);
    --chipBgHover: rgba(2,6,23,.07);
    --chipBorder: rgba(2,6,23,.10);
  }
}


@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#000000;
    --surface:#050505;
    --text:#ffffff;
    --muted:rgba(255,255,255,.72);
    --border:rgba(255,255,255,.14);
    --accent:#2563eb;
    --shadow:0 18px 45px rgba(0,0,0,.45);
    --chipBg: rgba(255,255,255,.08);
    --chipBgHover: rgba(255,255,255,.12);
    --chipBorder: rgba(255,255,255,.14);
  }
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.65 ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Ubuntu, sans-serif;
  background:var(--bg);
  color:var(--text);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--maxw); margin:0 auto; padding:0 16px}

/* Home hero: let the slider breathe (full width) */
.home-hero .container{max-width:100%;}

.skip-link{position:absolute; left:-999px; width:1px; height:1px; overflow:hidden}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto;
  padding:10px 12px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border); z-index:9999;
}

/* header */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter:saturate(180%) var(--headerBlur);
}
.header-inner{display:flex; align-items:center; gap:14px; min-height:62px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px; white-space:nowrap}
.brand-mark{
  width:34px; height:34px; border-radius:12px;
  background:linear-gradient(135deg, var(--accent), #22c55e);
  box-shadow:var(--shadow);
  flex:0 0 auto;
}
.brand span:last-child{font-size:17px}
.header-actions{margin-left:auto; display:flex; align-items:center; gap:10px}

.header-search{
  display:none; align-items:center; gap:8px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border-radius:999px;
  padding:8px 12px;
}
.header-search svg{opacity:.7}
.header-search input{
  width:220px;
  border:0; outline:0; background:transparent; color:var(--text);
  font-size:14px;
}
@media(min-width:980px){ .header-search{display:flex} }

/* Mobile: hide top header bar on scroll (keep categories chips visible) */
@media(max-width:979px){
  .header-inner{
    max-height:90px;
    transition:max-height .22s ease, opacity .18s ease, transform .22s ease;
    will-change:max-height, opacity, transform;
  }
  body.ts-scrolled .header-inner{
    max-height:0;
    min-height:0;
    opacity:0;
    transform:translateY(-8px);
    overflow:hidden;
    pointer-events:none;
  }
  body.ts-scrolled .mobile-panel{display:none !important;}
}

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  color:var(--text);
  cursor:pointer;
}
.icon-btn:hover{background:color-mix(in srgb, var(--surface) 80%, transparent)}
.icon{width:18px;height:18px;display:inline-block}

@media(min-width:980px){
  .icon-btn--search, .icon-btn--menu{display:none}
  .icon-btn--theme{display:inline-flex}
}

/* Mobile panel */
.mobile-panel{display:none; border-top:1px solid var(--border); padding:12px 0 14px}
.mobile-panel.is-open{display:block}
.mobile-panel[data-mode="search"] .mobile-menu{display:none}
.mobile-panel[data-mode="menu"] .mobile-search{display:none}

.mobile-search{
  display:flex; gap:10px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border-radius:999px;
  padding:10px 12px;
}
.mobile-search input{width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:15px}
.mobile-menu{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.mobile-menu a{
  display:flex; align-items:center;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--chipBg);
  font-weight:750;
}
.mobile-menu a:hover{background:var(--chipBgHover)}

/* horizontal chips nav */
.nav-wrap{border-top:1px solid var(--border); position:relative}
.nav-scroller{
  overflow:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; scroll-snap-type:x proximity;
}
.nav-scroller::-webkit-scrollbar{display:none}
.primary-nav{display:flex; gap:10px; padding:10px 0; min-width:max-content}
.primary-nav a{
  display:inline-flex; align-items:center;
  height:34px; padding:0 14px;
  border-radius:999px;
  border:1px solid var(--chipBorder);
  background:var(--chipBg);
  color:var(--text);
  font-size:14px; font-weight:650; letter-spacing:.1px;
  scroll-snap-align:start;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.primary-nav a:hover{background:var(--chipBgHover); transform:translateY(-1px)}
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  border-color:color-mix(in srgb, var(--accent) 55%, var(--chipBorder));
  background:color-mix(in srgb, var(--accent) 16%, var(--chipBg));
}

.nav-fade{
  pointer-events:none;
  position:absolute; top:0; bottom:0; width:38px;
  opacity:0; transition:opacity .2s ease;
}
.nav-fade.left{left:0; background:linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent), transparent)}
.nav-fade.right{right:0; background:linear-gradient(270deg, color-mix(in srgb, var(--bg) 92%, transparent), transparent)}
.nav-wrap.has-left .nav-fade.left{opacity:1}
.nav-wrap.has-right .nav-fade.right{opacity:1}

/* main */
.main{padding:18px 0 40px}

/* Featured slider */
.featured{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px);
  overflow:hidden;
  box-shadow:var(--shadow);
  margin:0 0 16px;
}
.featured-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.featured-title{
  font-weight:900;
  letter-spacing:.2px;
  font-size:14px;
  color:var(--muted);
  text-transform:uppercase;
}
.featured-controls{display:flex; align-items:center; gap:8px}
.ctrl{
  width:34px;height:34px;border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  color:var(--text);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.ctrl:hover{background:color-mix(in srgb, var(--surface) 80%, transparent)}
.ctrl svg{width:18px;height:18px}

.slider{
  display:flex;
  overflow:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.slider::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 100%;
  scroll-snap-align:start;
}
.slide-inner{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
}
.slide-inner img{width:100%;height:100%;object-fit:cover}
.slide-overlay{
  position:absolute; inset:auto 0 0 0;
  padding:14px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.60));
  color:#fff;
}
.slide-kicker{opacity:.85; font-size:13px}
.slide-title{font-weight:950;letter-spacing:-.3px;font-size:clamp(18px, 5.2vw, 30px);line-height:1.10;margin:6px 0 0;max-width:38ch;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:800px){
  .slide-title{font-size:28px}
}

.dots{
  display:flex; gap:6px;
  padding:10px 14px 14px;
  align-items:center; justify-content:flex-start;
}
.dot{
  width:8px;height:8px;border-radius:99px;
  background:color-mix(in srgb, var(--muted) 45%, transparent);
  border:0; cursor:pointer;
}
.dot.is-active{
  width:26px;
  background:color-mix(in srgb, var(--accent) 65%, transparent);
}

/* Post list (below slider) */
.list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.item{
  display:flex;
  gap:12px;
  align-items:stretch;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.thumb{
  width:120px;
  flex:0 0 120px;
  aspect-ratio:1/1;
  overflow:hidden;
}
.thumb img{width:100%;height:100%;object-fit:cover}
.item-body{padding:12px 12px 12px 0; min-width:0}
.item-kicker{color:var(--muted); font-size:13px}
.item-title{
  font-weight:950;
  letter-spacing:-.2px;
  font-size:18px;
  line-height:1.2;
  margin:6px 0 0;
}
.item-excerpt{margin:8px 0 0; color:var(--muted)}
@media(min-width:720px){
  .thumb{width:160px; flex-basis:160px; aspect-ratio:16/10}
  .item-body{padding-right:14px}
}

/* Article */
.article{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.article-media{aspect-ratio:16/9; overflow:hidden}
.article-media img{width:100%; height:100%; object-fit:cover}
.article-inner{padding:18px}
.article-meta{color:var(--muted); font-size:14px; margin-bottom:10px}
.article h1{font-size:34px; line-height:1.12; margin:6px 0 12px; font-weight:950; letter-spacing:-.2px}
.article .content{font-size:18px}
.article .content p{margin:0 0 14px}
.article .content a{color:var(--accent); text-decoration:underline}

.site-footer{border-top:1px solid var(--border); padding:22px 0; color:var(--muted)}


/* Ensure links don't revert to browser defaults */
.list a, .featured a, .article a, .item a, .primary-nav a{color:inherit;text-decoration:none}



/* Customizer-driven sizing */
:root{
  --logoH:34px;
  --brandSize:17px;
  --chipFont:14px;
}

/* Logo container */
.site-logo{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.site-logo img{
  height:var(--logoH);
  width:auto;
  max-width:160px;
  object-fit:contain;
  border-radius:12px;
}

/* Override sizes */
.brand span:last-child{ font-size: var(--brandSize); }
.primary-nav a{ font-size: var(--chipFont); }

/* Latest grid under article */
.latest-grid{
  margin-top:16px;
}
.latest-grid .latest-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
}
.latest-grid h2{
  margin:0;
  font-size:16px;
  font-weight:950;
  letter-spacing:.2px;
}
.latest-grid .grid2{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media(min-width:720px){ .latest-grid .grid2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .latest-grid .grid2{grid-template-columns:repeat(3,1fr)} }

.latest-grid .gcard{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.latest-grid .gmedia{aspect-ratio:16/9; overflow:hidden}
.latest-grid .gmedia img{width:100%;height:100%;object-fit:cover}
.latest-grid .gbody{padding:12px}
.latest-grid .gtitle{margin:6px 0 0; font-weight:950; letter-spacing:-.2px; line-height:1.2; font-size:16px}
.latest-grid .gmeta{color:var(--muted); font-size:13px}



/* Brand markup */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font-weight:900;
  letter-spacing:.2px;
}
.brand a{color:inherit}
.logo-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.brand-logo{height:var(--logoH)!important;width:auto!important;max-width:180px!important;object-fit:contain!important;border-radius:12px;display:block}
.brand-mark{
  width:34px; height:34px; border-radius:12px;
  background:linear-gradient(135deg, var(--accent), #22c55e);
  box-shadow:var(--shadow);
  flex:0 0 auto;
}
.brand-title{
  font-size:var(--brandSize);
  font-weight:950;
  letter-spacing:.2px;
  display:none; /* controlled by Customizer */
}
.brand-title.is-on{display:inline-block}

/* Latest section (Apple-like) */
.latest-grid{
  margin-top:18px;
}
.latest-grid .latest-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
}
.latest-grid h2{
  margin:0;
  font-size:18px;
  font-weight:950;
  letter-spacing:.2px;
}
.latest-row{
  display:flex;
  gap:12px;
  overflow:auto;
  padding-bottom:4px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.latest-row::-webkit-scrollbar{display:none}
.latest-card{
  flex:0 0 82%;
  scroll-snap-align:start;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px);
  overflow:hidden;
  box-shadow:var(--shadow);
}
@media(min-width:720px){
  .latest-row{
    overflow:visible;
    scroll-snap-type:none;
    display:grid;
    grid-template-columns:repeat(2,1fr);
  }
  .latest-card{flex:auto}
}
@media(min-width:1080px){
  .latest-row{grid-template-columns:repeat(3,1fr)}
}
.latest-card .media{aspect-ratio:16/9; overflow:hidden}
.latest-card .media img{width:100%;height:100%;object-fit:cover}
.latest-card .body{padding:14px}
.latest-card .meta{color:var(--accent); font-size:13px}
.latest-card .title{
  margin:8px 0 0;
  font-weight:950;
  letter-spacing:-.2px;
  line-height:1.18;
  font-size:18px;
}



/* Latest section (non-scroll, Apple-clean) */
.latest-grid{margin-top:18px}
.latest-grid .latest-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.latest-grid h2{margin:0;font-size:18px;font-weight:950;letter-spacing:.2px}

.latest-grid .latest-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media(min-width:720px){ .latest-grid .latest-list{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .latest-grid .latest-list{grid-template-columns:repeat(3,1fr)} }

.latest-grid .lcard{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.latest-grid .lmedia{aspect-ratio:16/9; overflow:hidden; display:block}
.latest-grid .lmedia img{width:100%;height:100%;object-fit:cover}
.latest-grid .lbody{padding:14px}
.latest-grid .lmeta{color:var(--muted); font-size:13px}
.latest-grid .ltitle{
  margin:8px 0 0;
  font-weight:950;
  letter-spacing:-.2px;
  line-height:1.18;
  font-size:18px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}



/* iOS Safari text autosize guard */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* Featured overlay text: keep consistent on iPhone */
.slide-overlay{ max-width: 92%; }
.slide-kicker{ font-size: clamp(12px, 3.2vw, 14px); opacity:.92; }
.slide-meta{ font-size: clamp(12px, 3.2vw, 14px); opacity:.92; }



/* Inline "Lexo edhe" (iOS-like) */
.inline-related{
  margin:18px 0;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:calc(var(--radius) + 8px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.inline-related .head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.inline-related .head h3{
  margin:0;
  font-size:14px;
  font-weight:950;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.inline-related .items{
  display:flex;
  flex-direction:column;
}
.inline-related .row{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:12px;
  padding:12px 14px;
}
.inline-related .row + .row{ border-top:1px solid var(--border); }
.inline-related .thumb{
  width:84px; height:64px;
  border-radius:14px;
  overflow:hidden;
  background:var(--border);
}
.inline-related .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.inline-related .rmeta{ color:var(--muted); font-size:12px; }
.inline-related .rtitle{margin:6px 0 0;font-weight:950;letter-spacing:-.2px;line-height:1.2;font-size:17px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}


/* iOS stronger guard */
*,*::before,*::after{-webkit-text-size-adjust:100%;text-size-adjust:100%;}



/* Inline related - v2 */
.inline-related .row{grid-template-columns:96px 1fr; gap:14px; padding:14px 14px;}
.inline-related .thumb{width:96px; height:72px; border-radius:16px;}
.inline-related .rtitle{font-size:17px; -webkit-line-clamp:2;}
.inline-related .rmeta{margin-top:6px; font-size:12.5px;}
.inline-related .head h3{font-size:13px; letter-spacing:.26em;}


/* Link reset for cards */
.inline-related a, .latest-grid a, .list a, .featured a{color:inherit;text-decoration:none}
.inline-related a:hover, .latest-grid a:hover{text-decoration:none}

.inline-related .rtitle a{color:inherit;text-decoration:none}

/* iPhone slider lock */
.featured, .featured *{-webkit-text-size-adjust:none;text-size-adjust:none;}
@media (max-width:520px){
  .slide-title{font-size:22px !important; line-height:1.12 !important; max-width:32ch;}
  .slide-kicker, .slide-meta{font-size:13px !important;}
}



/* Single post typography vars */
.article .post-title{
  font-size:var(--pt);
  line-height:var(--ptlh);
  letter-spacing:-.3px;
  font-weight:950;
  text-wrap:balance;
}
.article .post-content{
  font-size:var(--ps);
  line-height:var(--plh);
}
@media (max-width:520px){
  .article .post-title{font-size:var(--ptm)}
  .article .post-content{font-size:var(--psm)}
}
/* iPhone: prevent Safari autosizing on article typography only */
.post-title, .post-content, .post-content *{-webkit-text-size-adjust:100%; text-size-adjust:100%;}

/* Single: title above image */
.article-media-wrap{margin-top:14px;border-radius:calc(var(--radius) + 10px);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border)}
.article-media-wrap img{width:100%;height:auto;display:block}

/* iPhone article lock */
.article, .article *{-webkit-text-size-adjust:none;text-size-adjust:none;}
@media (max-width:520px){
  .article .post-title{font-size:var(--ptm)!important}
  .article .post-content{font-size:var(--psm)!important}
}


/* article-meta under title */
.article .article-meta{margin-top:10px;color:var(--muted);font-size:13px}

/* single spacing tight */
.article .post-title{margin-bottom:6px}
.article .article-meta{margin-top:6px;margin-bottom:8px}
.article-media-wrap{margin-top:8px}

/* FORCE tight spacing between meta and image */
.article .article-inner{margin-bottom:0!important;padding-bottom:0!important}
.article .post-title{margin-bottom:4px!important}
.article .article-meta{margin-top:2px!important;margin-bottom:2px!important}
.article-media-wrap{margin-top:0!important}

/* mobile tighten main padding + wider titles */
@media (max-width:520px){
  .main{padding-top:6px !important}
  .article-inner{padding:14px !important}
  .article .post-title{letter-spacing:-.35px; text-wrap:balance}
}

/* single spacing minimal */
.article .post-title{margin:0 0 4px 0}
.article .article-meta{margin:2px 0 2px 0}
.article-media-wrap{margin-top:0}
.article .article-inner{margin-bottom:0;padding-bottom:0}

/* brand title only when enabled */
.brand-title{display:inline-block}
.brand-title:not(.is-on){display:none}

/* pure black dark mode touchups */
[data-theme="dark"] .site-header{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));}
[data-theme="dark"] .divider, [data-theme="dark"] .header-divider{background:rgba(255,255,255,.12);}

/* Featured slider - Apple-like card carousel */
.featured{margin:18px 0 18px}
.slider.slider-cards{
  display:flex;
  gap:14px;
  overflow:auto;
  padding:12px 12px 10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.slider.slider-cards::-webkit-scrollbar{display:none}
.slider.slider-cards .slide{
  flex:0 0 auto;
  width:min(560px, 86vw);
  scroll-snap-align:start;
}
@media (min-width:900px){
  .slider.slider-cards{padding:14px 14px 12px}
  .slider.slider-cards .slide{width:min(620px, 58vw)}
}
.slide-card{
  display:block;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  text-decoration:none;
  color:inherit;
}
.slide-media{aspect-ratio:16/9;background:rgba(0,0,0,.06)}
.slide-media img{width:100%;height:100%;object-fit:cover;display:block}
.slide-ph{width:100%;height:100%}
.slide-body{padding:12px 14px 14px}
.slide-meta{
  font-size:13px;
  color:var(--muted);
  letter-spacing:-.1px;
  margin:0 0 6px;
}
.slide-title{
  margin:0;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.4px;
  text-decoration:none;
}
@media (max-width:520px){
  .slide-title{font-size:20px}
}
.slide-card:hover .slide-title{color:var(--accent)}


/* iOS-like list cards */
.list{display:flex;flex-direction:column;gap:12px}
.item{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.thumb{
  flex:0 0 auto;
  width:112px;
  height:84px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,.06);
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.item-body{min-width:0}
.item-kicker{font-size:12.5px;color:var(--muted);margin:0 0 6px}
.item-title{font-size:18px;line-height:1.2;font-weight:800;letter-spacing:-.25px;margin:0}
.item-title a{text-decoration:none;color:inherit}
.item-title a:hover{color:var(--accent)}
.item-excerpt{margin:6px 0 0;color:var(--muted);font-size:13.5px;line-height:1.35}

/* Better pagination */
.tsq-pagination{padding:18px 0 6px}
.tsq-pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  align-items:center;
}
.tsq-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  font-weight:750;
}
.tsq-pagination .page-numbers.current{
  background:rgba(0,0,0,.06);
}
[data-theme="dark"] .tsq-pagination .page-numbers.current{
  background:rgba(255,255,255,.10);
}
.tsq-pagination .page-numbers.dots{
  border:none;
  background:transparent;
  min-width:auto;
  padding:0 6px;
  height:auto;
  color:var(--muted);
}


/* Home hero layout (newsbomb-like) */
.home-hero{padding:20px 0}
.hero-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.hero-slider{position:relative;border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.08)}
/* Ensure slider controls stay clickable on desktop (avoid invisible overlays capturing clicks) */
.hero-track{position:relative;z-index:1}
.hero-slide{display:none;padding:0}
.hero-slide.is-active{display:block}
.hero-media{display:block;position:relative;z-index:1}
.hero-media img{width:100%;height:620px;object-fit:cover;display:block}
@media (max-width:900px){.hero-media img{height:clamp(380px, 55vh, 520px)}}
@media (max-width:600px){.hero-media img{height:clamp(360px, 58vh, 500px)}}
.hero-chip{position:absolute;top:14px;left:14px;background:rgba(37,99,235,.92);color:#fff;font-weight:700;font-size:12px;letter-spacing:.2px;padding:7px 12px;border-radius:999px}
.hero-meta{position:absolute;left:50% !important;bottom:16px;transform:translateX(-50%) !important;display:flex;gap:10px;align-items:center;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5);z-index:6;pointer-events:none}
.hero-time{display:inline-flex;gap:8px;align-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px 12px;border-radius:999px;font-weight:600;font-size:12px;pointer-events:none}
.hero-title{margin:0;position:absolute;left:0;right:0;bottom:54px;padding:0 18px 18px;z-index:4;pointer-events:none}
.hero-title a{display:block;color:#fff;font-weight:900;letter-spacing:-.02em;line-height:1.06;font-size:clamp(26px,3.4vw,40px);text-decoration:none;text-shadow:0 6px 22px rgba(0,0,0,.55)}
.hero-title a{pointer-events:auto}
@media (max-width:600px){
  .hero-title{bottom:44px;padding:0 14px 14px}
  .hero-title a{
    font-size:24px;
    line-height:1.15;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* Home grid cards (Newsbomb-like compact squares) */
.grid-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0 6px}
.grid-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.grid-media{display:block;aspect-ratio:16/9;overflow:hidden}
.grid-media img{width:100%;height:100%;object-fit:cover;display:block}
.grid-body{padding:12px 14px 14px}
.grid-kicker{display:flex;align-items:center;gap:10px;justify-content:space-between}
.grid-cat{color:#2563eb;font-weight:700;font-size:13px}
.grid-time{display:flex;align-items:center;gap:6px;color:var(--accent);font-size:12px}
.grid-time .icon{width:16px;height:16px}
.grid-title{margin:10px 0 0;font-size:18px;line-height:1.25;letter-spacing:-.01em}
.grid-title a{color:var(--text);text-decoration:none}
.grid-title a:hover{text-decoration:underline}

@media (max-width:980px){.grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid-cards{grid-template-columns:1fr;gap:14px}.grid-title{font-size:16px}}
.hero-nav{position:absolute;bottom:18px;right:18px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:30;pointer-events:auto;touch-action:manipulation}
.hero-prev{right:70px}
.hero-nav span{font-size:24px;line-height:1}
.hero-dots{position:absolute;left:18px;bottom:22px;display:flex;gap:8px;z-index:30;pointer-events:auto}
.hero-dot{width:10px;height:10px;border-radius:999px;border:0;background:rgba(255,255,255,.45);cursor:pointer}
.hero-dot.is-active{background:#fff;width:26px}

.hero-thumbs{display:flex;gap:12px;margin-top:12px;overflow:auto;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hero-thumbs::-webkit-scrollbar{display:none}
.hero-thumb{flex:0 0 260px;display:flex;align-items:stretch;gap:10px;border:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.96);border-radius:16px;padding:10px;cursor:pointer;text-align:left;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.hero-thumb.is-active{outline:2px solid rgba(15,118,255,.35)}
.hero-thumb-media{width:88px;height:64px;flex:0 0 auto;border-radius:12px;overflow:hidden;background:#e5e7eb}
.hero-thumb-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-thumb-body{min-width:0;display:flex;flex-direction:column;gap:6px;justify-content:center}
.hero-thumb-title{display:block;font-weight:800;font-size:14px;line-height:1.2;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-thumb-meta{display:block;font-size:12px;color:#64748b}

@media (max-width:900px){
  .hero-thumbs{padding-left:8px;padding-right:8px}
  .hero-thumb{flex-basis:240px}
}

@media (max-width:560px){
  .hero-thumb{flex-basis:88%;}
  .hero-thumb-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

.hero-side{display:flex;flex-direction:column;gap:14px}

/* Homepage Instagram section */
.home-instagram-section{margin:18px 0 6px}
@media (max-width:640px){.home-instagram-section{margin:14px 0 4px}}

/* Instagram widget: allow full width on all phones */
.home-instagram-section .container,
.home-instagram-section .widget.home-instagram{
  width:100%;
  max-width:100%;
}
.home-instagram-section .widget.home-instagram{
  overflow:hidden;
}

/* Homepage sections */
.home-section{padding:4px 0}
.home-latest{padding:10px 0 4px}
.home-latest .latest-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.home-latest .latest-head h2{margin:0;font-weight:900;letter-spacing:-.01em;font-size:22px}
@media (max-width:600px){.home-latest .latest-head h2{font-size:18px}}
.side-card{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.side-media img{width:100%;height:100%;object-fit:cover;display:block}
.side-body{padding:12px 12px 12px 0}
.side-cat{display:inline-block;color:var(--accent);font-weight:800;font-size:12px;margin-bottom:6px}
.side-title{margin:0 0 8px;font-size:18px;line-height:1.15;font-weight:900}
.side-title a{text-decoration:none;color:var(--text)}
.side-time{display:flex;gap:8px;align-items:center;color:var(--accent);font-size:12px;font-weight:600}
.side-widget{background:var(--surface);border:1px dashed var(--border);border-radius:18px;padding:14px}
.picked{margin-top:18px}
.picked-head{display:flex;align-items:center;justify-content:space-between;margin:10px 0}
.picked-title{margin:0;color:#ef4444;font-weight:900;letter-spacing:-.01em;font-size:22px}
.picked-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:600px){.picked-grid{grid-template-columns:1fr}}
.picked-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.picked-media img{width:100%;height:170px;object-fit:cover;display:block}
.picked-body{padding:12px}
.picked-cat{display:inline-block;color:var(--accent);font-weight:800;font-size:12px;margin-bottom:6px}
.picked-h{margin:0;font-weight:900;font-size:18px;line-height:1.2}
.picked-h a{text-decoration:none;color:var(--text)}

/* Pagination chips */
.navigation.pagination{margin:22px 0}
.nav-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.nav-links a,.nav-links span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;font-weight:800}
.nav-links .current{background:var(--text);color:var(--bg);border-color:transparent}

/* Remove underline from post links in lists */
.post-card h3 a,.post-card h2 a,.list-card h3 a,.side-title a,.picked-h a,.lexo-edhe a{text-decoration:none}
.post-card h3 a:hover,.post-card h2 a:hover,.list-card h3 a:hover,.side-title a:hover,.picked-h a:hover{text-decoration:underline}



/* Meta/details in blue */
.slide-meta,
.grid-time,
.grid-time a,
.side-time,
.side-time a,
.post-meta,
.post-meta a,
.card-time,
.card-time a{
  color: var(--accent) !important;
}

.grid-time .icon,
.side-time .icon{
  color: var(--accent) !important;
}


/* Single: title edge-to-edge on mobile + clickable category + blue meta */
.article-meta, .article-meta a {
  color: var(--accent);
}
.article-meta a {
  text-decoration: none;
}
.article-meta a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .article-head {
    padding-left: 0;
    padding-right: 0;
  }
  .article-head .post-title,
  .article-head .article-meta {
    padding-left: 0;
    padding-right: 0;
  }
}

/* === Responsive embeds (Streamable/YouTube/Vimeo/etc) === */
.article .content iframe,
.article .post-content iframe,
.entry-content iframe,
.article .content embed,
.article .content object,
.article .content video{
  max-width:100%;
}

.embed-responsive{
  position:relative;
  width:100%;
  max-width:100%;
  margin:14px 0;
  background:#000;
  border-radius:16px;
  overflow:hidden;
}
.embed-responsive::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 16:9 */
}
.embed-responsive.is-portrait::before{
  padding-top:177.78%; /* 9:16 */
}
.embed-responsive iframe,
.embed-responsive video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Block editor embeds */
.wp-block-embed__wrapper iframe,
.wp-has-aspect-ratio iframe{
  width:100% !important;
  max-width:100% !important;
  display:block;
}

/* Instagram embeds: keep natural height and full width on mobile */
.instagram-media,
.instagram-media-rendered,
.wp-block-embed-instagram,
.wp-block-embed.is-provider-instagram,
figure.wp-block-embed.is-provider-instagram{
  max-width:100% !important;
  width:100% !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.instagram-media iframe,
.wp-block-embed.is-provider-instagram iframe,
.entry-content iframe[src*="instagram.com"],
.post-content iframe[src*="instagram.com"]{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  border:0 !important;
  display:block !important;
  /* Instagram controls height via inline styles; don't force height:auto */
}

/* Make the Gutenberg wrapper span full width for Instagram */
.wp-block-embed.is-provider-instagram,
.wp-block-embed.is-provider-instagram .wp-block-embed__wrapper{
  width:100% !important;
  max-width:100% !important;
}

/* Some embeds render as blockquote only (before script processes) */
blockquote.instagram-media{
  width:100% !important;
  max-width:100% !important;
}

/* TikTok embeds: keep natural height (no forced aspect-ratio wrappers) */
.wp-block-embed.is-provider-tiktok,
figure.wp-block-embed.is-provider-tiktok,
.wp-block-embed.is-provider-tiktok .wp-block-embed__wrapper,
blockquote.tiktok-embed{
  width:100% !important;
  max-width:100% !important;
}

/* Prevent cropping when TikTok is placed inside aspect-ratio wrappers */
figure.wp-block-embed.is-provider-tiktok.wp-has-aspect-ratio,
.wp-block-embed.is-provider-tiktok.wp-has-aspect-ratio,
figure.wp-block-embed.is-provider-tiktok.wp-has-aspect-ratio .wp-block-embed__wrapper,
.wp-block-embed.is-provider-tiktok.wp-has-aspect-ratio .wp-block-embed__wrapper{
  position:static !important;
  padding:0 !important;
  height:auto !important;
  overflow:visible !important;
}

/* TikTok iframe itself should be full width and not constrained */
.entry-content iframe[src*="tiktok.com"],
.post-content iframe[src*="tiktok.com"],
.entry-content iframe[src*="tiktokcdn.com"],
.post-content iframe[src*="tiktokcdn.com"]{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  border:0 !important;
  display:block !important;
}

/* Tags under post content */
.post-tags{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.post-tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,0.06);
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  line-height:1;
}
body.dark .post-tag,
:root[data-theme='dark'] .post-tag,
html[data-theme='dark'] .post-tag{
  background:rgba(255,255,255,0.08);
}