/* =========================================================
   InstaFreight News — v3.4 (scoped, accessible, dark-mode ready)
   Drop this AFTER your base news/news.css
   - Consolidated (no duplicates)
   - Stronger .btn targeting in filters
   - Safe brand token fallbacks (no self-references)
   - Optional explicit dark theme + RTL polish
   ========================================================= */

/* ---- Brand & UI tokens (pick up site-wide when present) ---- */
:root{
  --if-primary: var(--site-primary, #C62828);   /* brand red */
  --if-accent:  var(--site-accent,  #1565C0);   /* brand blue */
  --sticky-offset: var(--sticky-offset, 0px);

  --bg:   var(--site-bg,   #f6f8fb);
  --card: #ffffff;
  --txt:  var(--site-text, #0f172a);
  --muted:   #64748b;
  --muted-2: #475569;
  --bd:   #e6eaf0;
  --chip: #eef3f9;

  --shadow:    0 6px 18px rgba(2,6,23,.06);
  --shadow-lg: 0 14px 44px rgba(2,6,23,.16);
  --radius: 20px;
}

/* Auto dark if your app doesn't set data-theme */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0e14; --card:#0f1623; --txt:#e5e7eb;
    --muted:#9aa6bb; --muted-2:#a8b2c2; --bd:#1f2635; --chip:#121a29;
    --shadow: 0 10px 26px rgba(0,0,0,.35);
    --shadow-lg: 0 18px 46px rgba(0,0,0,.55);
  }
}

/* Explicit dark theme override (wins over the media query if used) */
html[data-theme="dark"], html[data-bs-theme="dark"]{
  --bg:#0b0e14; --card:#0f1623; --txt:#e5e7eb;
  --muted:#9aa6bb; --muted-2:#a8b2c2; --bd:#1f2635; --chip:#121a29;
  --shadow: 0 10px 26px rgba(0,0,0,.35);
  --shadow-lg: 0 18px 46px rgba(0,0,0,.55);
}

/* ---- Page wrap / spacing ---- */
.wrap{
  max-width:1150px;
  margin:24px auto;
  padding:0 18px 120px;
  background:transparent;
  color:var(--txt);
}

/* ---- Sticky subnav ---- */
.tabs{
  display:flex; gap:8px; align-items:center;
  margin:6px 0 10px;
}
.tabs.sticky{
  position:sticky; top:var(--sticky-offset); z-index:10;
  padding:8px 0;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, transparent), transparent);
}
.tab a{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--bd);
  background:var(--card);
  color:var(--txt);
  text-decoration:none;
  transition:transform .12s ease, border-color .18s ease;
}
.tab a:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--if-accent) 35%, var(--bd));
}
.tab a.active{
  background:var(--if-accent);
  color:#fff;
  border-color:var(--if-accent);
  box-shadow:0 8px 22px rgba(21,101,192,.28);
}

/* ---- Hero & filters ---- */
.hero{ margin:8px 0 0; }
.hero-head{ margin-bottom:8px; }
.hero-title{
  margin:0 0 2px;
  font-size:clamp(24px,3.2vw,34px);
  font-weight:900;
  letter-spacing:.2px;
  text-shadow:0 10px 28px rgba(2,6,23,.18);
}
.hero-sub{ margin:0; color:var(--muted); }

.hero .filters{
  display:grid; gap:12px; align-items:center; margin:12px 0 6px;
  grid-template-columns: minmax(380px,1fr) minmax(230px,300px) 132px;
}
@media (max-width:880px){
  .hero .filters{ grid-template-columns:1fr; }
  .hero .filters .btn{ width:100%; }
}

/* Searchbar */
.searchbar{ position:relative; }
.searchbar .ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--muted); pointer-events:none; opacity:.9;
}
.searchbar input{
  width:100%; height:46px; padding:10px 12px 10px 38px; font-size:1.05rem;
  border-radius:12px; border:1px solid var(--bd);
  background:var(--card); color:var(--txt);
  box-shadow:0 2px 0 rgba(2,6,23,.02) inset;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.searchbar input:focus{
  outline:none;
  border-color:color-mix(in srgb, var(--if-accent) 55%, var(--bd));
  box-shadow:0 0 0 .22rem color-mix(in srgb, var(--if-accent) 22%, transparent);
}

/* Select */
.hero select{
  height:46px; font-size:1rem; border-radius:12px; border:1px solid var(--bd);
  background:var(--card); color:var(--txt); padding:10px 12px; min-width:220px;
}

/* Apply button — target ANY .btn inside filters */
.hero .filters :where(.btn, button.btn, a.btn, input.btn){
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 18px; border-radius:12px;
  appearance:none; -webkit-appearance:none;
  background:var(--if-primary) !important;
  border:1px solid var(--if-primary) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  font-weight:800; font-size:1rem; line-height:1 !important; letter-spacing:.2px;
  text-indent:0 !important; white-space:nowrap; text-transform:none;
  box-shadow:0 10px 24px rgba(198,40,40,.22);
  transition:transform .12s ease, filter .12s ease, box-shadow .18s ease;
}
.hero .filters :where(.btn, button.btn, a.btn, input.btn):hover{
  transform:translateY(-1px); filter:brightness(1.03);
  box-shadow:0 12px 28px rgba(198,40,40,.28);
}
.hero .filters :where(.btn, button.btn, a.btn, input.btn):disabled{
  opacity:.6; cursor:not-allowed;
}

/* ---- Chips ---- */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px; }
.chip{
  padding:7px 12px; border-radius:999px; background:var(--chip); border:1px solid var(--bd);
  color:var(--txt); font-weight:700; text-decoration:none;
  box-shadow:0 2px 10px rgba(2,6,23,.05);
  transition:transform .12s ease, border-color .18s ease;
}
.chip:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--if-accent) 35%, var(--bd));
}
.chip.active{
  background:color-mix(in srgb, var(--if-accent) 12%, var(--chip));
  border-color:var(--if-accent);
}

/* ---- Grid ---- */
.list{
  display:grid; gap:22px; margin-top:12px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
@media (max-width:560px){
  .list{ grid-template-columns:1fr; }
}

/* ---- Card ---- */
.card{
  position:relative; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--bd); background:var(--card);
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:color-mix(in srgb, var(--bd) 70%, var(--if-accent) 30%);
}
.pad{ padding:12px 14px 14px; }

/* Image / overlay */
.thumb{
  position:relative; aspect-ratio:16/9; background:#e7edf7;
  border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);
  overflow:hidden;
}
.thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.04); transform:translateZ(0);
}
.fade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.26) 70%, rgba(0,0,0,.36) 100%);
}
.thumb.ph{
  background:repeating-linear-gradient(135deg, #cfd6e3 0 12px, #e7ecf4 12px 24px);
}
@media (prefers-color-scheme: dark){
  .thumb.ph{ background:repeating-linear-gradient(135deg, #1a2433 0 12px, #0f1623 12px 24px); }
}

.overlay{
  position:absolute; left:10px; top:10px; display:flex; gap:8px; z-index:2;
}
.o-chip{
  font-size:.78rem; padding:4px 9px; border-radius:999px;
  background:rgba(17,24,39,.58); color:#fff;
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(2px);
}

/* Text */
.meta{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  color:var(--muted); font-size:.94rem;
}
.src{ font-weight:800; color:var(--muted-2); }
.sep{ opacity:.5; }
.title{
  margin:6px 0 6px; font-size:1.2rem; line-height:1.3; font-weight:850;
}
.title--lg{ font-size:clamp(20px,2.1vw,26px); }
.title a{ color:var(--txt); text-decoration:none; }
.title a:hover{ text-decoration:underline; }
.sum{
  margin:0;
  color:color-mix(in srgb, var(--txt) 72%, transparent);
}
.clamp-3{
  -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
}

/* Featured */
.card--featured{ grid-column:1 / -1; }
.card--featured .thumb{ aspect-ratio:21/9; }

/* Share row */
.share-row{
  display:flex; gap:8px; flex-wrap:wrap; margin:10px 14px 14px;
}
.share-row a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  border:1px solid var(--bd); background:var(--card); color:var(--txt);
  transition:transform .08s ease, background .18s ease, border-color .18s ease;
}
.share-row a:hover{
  transform:translateY(-1px);
  background:color-mix(in srgb, var(--chip) 65%, transparent);
  border-color:color-mix(in srgb, var(--if-accent) 35%, var(--bd));
}
.svg-ico{ width:18px; height:18px; }

/* Empty / Load more */
.empty{ text-align:center; color:var(--muted); padding:52px 0 20px; }
.load{ display:flex; justify-content:center; margin:12px 0 40px; }

/* Focus */
:focus-visible{
  outline:2px solid #2563eb; outline-offset:2px; border-radius:10px;
}
.thumb-link:focus-visible{ outline-offset:-4px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tab a, .chip, .card, .share-row a,
  .hero .filters :where(.btn, button.btn, a.btn, input.btn){
    transition:none !important;
  }
}

/* RTL polish (only when needed) */
[dir="rtl"] .overlay{ left:auto; right:10px; }
[dir="rtl"] .tabs{ justify-content:flex-end; }

/* Print */
@media print{
  .tabs, .chips, .btn, .load, .share-row{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card{ border-color:#ddd; box-shadow:none; }
}
