/* --- Base + Theme Tokens -------------------------------------------------- */


/* Theme Presets 

:root{
  --accent: #2563eb;       
  --muted: #6b7280;        
  --text: #111827;          
  --background: #ffffff;   
  --thumb-bg: #333333;    
  --thumb-text: #ffffff;    
  --contact-text: #000000;  
  --contact-bg: #e7e9ea;    

 
  --bg: var(--background);
  --card: #ffffff;
  --brand: #0ea5e9;
  --border: #e6e9ef;
  --chip: #f0f3f7;
  --chipLight: #eef2ff;
  --chipText: #1e3a8a;
  --chipBd: #dbe3ff;
  --header-h: 80px;
}

(apply by JS on <html data-theme="...">) */

html[data-theme="dark-black"] {
  --accent: #22d3ee;   /* bright cyan accent */
  --brand: #22d3ee;    /* violet for brand highlights */
  --bg: #121212;       /* softer dark gray background */
  --card: #1e1e1e;     /* card surface slightly lighter than bg */
  --text: #fbfbfb;    /* light gray text instead of pure white */
  --muted: #a3a3a3;    /* muted text for secondary info */
  --border: #2d2d2d;   /* subtle borders */
  --chip: #f0f3f7;
  --chipLight: #eef2ff;
  --chipText: #1e3a8a;
  --chipBd: #dbe3ff;
}

html[data-theme="light-blue"] {
  --accent: #2563eb;   /* primary accent - deep blue */
  --brand: #2563eb;    /* secondary accent - cyan/sky blue */
  --bg: #f9fafb;       /* soft off-white background */
  --card: #ffffff;     /* pure white cards */
  --text: #1e293b;     /* dark slate text */
  --muted: #475569;    /* muted text, medium gray-blue */
  --border: #e2e8f0;   /* light gray borders */
  --chip: #f0f3f7;
  --chipLight: #eef2ff;
  --chipText: #1e3a8a;
  --chipBd: #dbe3ff;
}

html[data-theme="gradient-vibe"] {
  --accent: #22d3ee;   /* neon cyan */
  --brand: #f472b6;    /* neon pink/magenta */
  --bg: linear-gradient(135deg, #1e3a8a, #6d28d9, #9333ea); /* blue → purple gradient */
  --card: #1e1b2e;     /* deep violet card background */
  --text: #111111;     /* soft white text */
  --muted: #a78bfa;    /* muted lavender for secondary info */
  --border: #3f3f46;   /* subtle dark border */
  --chip: #f0f3f7;
  --chipLight: #eef2ff;
  --chipText: #1e3a8a;
  --chipBd: #dbe3ff;
}

html[data-theme="classic-red"] {
  --accent: #8f0303;   /* strong red for headlines / breaking news */
  --brand: #8f0303;    /* deep black for brand/logo */
  --bg: #ffffff;       /* pure white background */
  --card: #fafafa;     /* light gray card surface */
  --text: #111111;     /* black text for strong readability */
  --muted: #4b5563;    /* muted gray for secondary info */
  --border: #d1d5db;   /* light gray borders */
  --chip: #f0f3f7;
  --chipLight: #eef2ff;
  --chipText: #1e3a8a;
  --chipBd: #dbe3ff;
}

/* Smooth anchor scrolling + keep sections below sticky header */
html { 
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h, 80px);
}
section {
  scroll-margin-top: var(--header-h, 80px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* --- Header / Nav (opaque, layered, structured) -------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* --- Header bar: hamburger + brand centered -------------------- */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  position: relative;
}

/* Hamburger button (keep only this definition) */
.menu-btn {
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  padding: .25rem .5rem;
  cursor: pointer;
  color: var(--text);
  width: 40px;            /* fixed width so brand stays centered */
  text-align: left;
}
.menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Brand centered in row */
.brand {
  margin: 0 auto;
  font-size: 2.3rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--text);
}
.brand span { color: var(--brand); }

/* Spacer balances layout: equal width as menu-btn */
.color-palette { width: 40px; flex-shrink: 0; }

/* Topic line below */
.topic-wrap {
  width: 100%;
  display: flex;
  justify-content: center; /* horizontally center */
  margin: 0;
}

.topic-line {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center; /* ensure multiline center */
}

/* Hide any legacy top inline nav */
.site-header .site-nav { display: none !important; }

/* --- Drawer (Off-canvas Sidebar) ----------------------------------------- */
.offcanvas{
  position: fixed;
  inset: 0 auto 0 0;              /* left side */
  width: 200px;
  max-width: 85vw;
  height: 100%;
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 1001;                   /* above overlay */
  background: var(--card);
  color: var(--text);
  box-shadow: 2px 0 20px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}
.offcanvas.open{ transform: translateX(0); }

.offcanvas-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--border);
}
.offcanvas-title{ font-weight: 700; font-size: 1.1rem; }
.close-btn{
  border: 0; background: transparent; font-size: 1.25rem; padding: .25rem .5rem;
  cursor: pointer; color: inherit;
}
.close-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.offcanvas-nav{ display: flex; flex-direction: column; padding: .5rem 0; }

.offcanvas-nav a{
  padding: .9rem 1rem; text-decoration: none; color: inherit; display: block;
  border-left: 3px solid transparent;
}

.offcanvas-nav a:hover{ background: rgba(0,0,0,0.03); }
.offcanvas-nav a.active{
  background: color-mix(in srgb, var(--accent) 12%, transparent); /* accent tint */
  border-left-color: var(--accent);
  color: var(--accent);
}

/* Dim background when drawer open */
.drawer-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000;
}
.drawer-overlay[hidden]{ display: none !important; }
.drawer-overlay.show{ display: block; }

body.no-scroll{ overflow: hidden; }

/* --- Categories: horizontal scrollable chips ------------------------------ */
.cat-bar {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  white-space: nowrap;
  padding: .5rem 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg);
  background: var(--bg);
}
.cat-bar::-webkit-scrollbar { height: 6px; }
.cat-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.cat-bar::-webkit-scrollbar-track { background: var(--bg); }
.cat-bar::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.cat-bar .cat {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 .8rem;
  height: 36px;
  line-height: 36px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .12s ease;
  text-decoration: none;
}
.cat-bar .cat:hover { background: var(--chip); }
.cat-bar .cat:active { transform: translateY(1px); }

/* Active category (set .active on selected; default "All") */
.cat-bar .cat.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* --- Grid / Cards --------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding: 16px 0;
}
@media (max-width:1080px) { .grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width:720px)  { .grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  grid-column: span 4;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
  padding: 5px;
}


.card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.08); }

.thumb {
  width: 100%;
  height: auto;                
  min-height: 260px;           
  max-height: 460px;          
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
  background: var(--chip);
  border-radius: 16px 16px 0 0;
}

/* fallback for thumb when no image - uses token variables */
.thumb.thumb-fallback {
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--thumb-bg);
  color: var(--thumb-text);
  font-size:14px;
}

.card:hover .thumb { transform: scale(1.02); }

h2 { font-size: 18px; line-height: 1.3; }

/* Use theme accent for article title links (applies everywhere) */
h2 a, .article-title-link { color: var(--accent); text-decoration: none; }
h2 a:hover { color: color-mix(in srgb, var(--accent) 30%, #000); }

.meta {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}


p { margin: 0 0 10px 0; }

/* Chips / Tags inside cards */
.chip {
  display: inline-block;
  font-size: 0.85em;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--chipLight);
  color: var(--chipText);
  border: 1px solid var(--chipBd);
}
.chip.positive { background: #ecfdf5; color: #065f46; border-color: #d1fae5; }
.chip.neutral  { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.chip.negative { background: #fef2f2; color: #991b1b; border-color: #fee2e2; }

.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tag  { font-size: 12px; background: var(--chip); border: 1px solid var(--border); padding: 4px 8px; border-radius: 999px; color: var(--chipText); }

/* --- Footer --------------------------------------------------------------- */
footer {
  padding: 22px 0;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  text-align: center;
}


/* --- Skeletons ------------------------------------------------------------ */
.skeleton { animation: pulse 1.2s ease-in-out infinite; }
.skeleton .thumb { background: var(--chip); }
.line { height: 12px; background: var(--chip); border-radius: 6px; margin: 8px 0; }
.w70 { width: 70%; }
.w50 { width: 50%; }
.meta-line { height: 10px; width: 40%; background: var(--chip); border-radius: 6px; }

@keyframes pulse { 0%,100% { opacity: .65; } 50% { opacity: 1; } }

/* --- Accessibility helpers ------------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Mobile tuning -------------------------------------------------------- */
@media (max-width:720px) {
  :root { --header-h: 60px; }
  .thumb { height: 160px; }
  .menu-btn { width: 36px; font-size: 1.4rem; }
  .color-palette { width: 36px; }
}

/* --- Utility: active focus outlines for links & buttons ------------------- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- More articles css ----------------------------------------------- */
/* Slider base */
.slider-viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  outline: none;
  padding-bottom: .5rem;

  /* Add scrollbar styling */
  scrollbar-width: thin;                      /* Firefox */
  scrollbar-color: var(--border) var(--bg);   /* Firefox */
}

.slider-viewport::-webkit-scrollbar { height: 6px; }       /* Chrome/Safari/Edge */
.slider-viewport::-webkit-scrollbar-thumb { 
  background: var(--border); 
  border-radius: 10px; 
}
.slider-viewport::-webkit-scrollbar-track { background: var(--bg); }
.slider-viewport::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.slider-track {
  display: flex;
  gap: .8rem;
  align-items: stretch;
  padding: 0 .25rem;
}

.slide-card {
  scroll-snap-align: start;
  flex: 0 0 calc(40% - .8rem); /* mobile default: show ~2.5 items */
  max-width: 320px;
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
}

.slide-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.slide-placeholder {
  width:100%;
  height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  padding: .5rem;
  color: var(--thumb-text);
  background: linear-gradient(180deg,#1f2937,#111827);
}

.slide-info {
  padding: .6rem;
  display:flex;
  flex-direction:column;
  gap: .3rem;
}

.slide-title {
  font-weight:600;
  line-height:1.2;
  font-size: 0.95rem;
  color: var(--accent, #dbeafe);
}

.slide-meta {
  font-size: 0.8rem;
  color: var(--muted, #94a3b8);
}

/* Controls */
.slider-controls { display:flex; gap:.4rem; }
.slider-btn {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--muted);
  padding: .25rem .6rem;
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.slider-btn:focus { outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); }

/* Spacer balances layout: equal width as menu-btn */
.header-spacer { width: 40px; flex-shrink: 0; }

/* Responsive tweaks */
@media (min-width: 640px) {
  .slide-card { flex: 0 0 calc(28% - .8rem); } /* ~3 items in row */
}
@media (min-width: 1024px) {
  .slide-card { flex: 0 0 calc(22% - .8rem); } /* ~4 items */
}

/* simple expand/collapse styles for search */
.search-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

/* collapsed state: hide input but keep button visible */
.search-wrapper[aria-expanded="false"] .search-input {
  width: 0;
  padding: 0;
  margin-right: 0;
  opacity: 0;
  border: 0;
  pointer-events: none;
  transition: width .22s ease, opacity .18s ease, padding .18s ease;
}

/* expanded state: show input (use vars for colors) */
.search-wrapper[aria-expanded="true"] .search-input {
  width: 220px; /* adjust as desired */
  padding: 6px 8px;
  margin-right: 8px;
  opacity: 1;
  border: 1px solid var(--border);
  pointer-events: auto;
  background-color: color-mix(in srgb, var(--card) 96%, var(--bg));   /* subtle box */
  color: var(--text);             /* text color */
  transition: width .22s ease, opacity .18s ease, padding .18s ease;
}

/* small devices tweak */
@media (max-width: 560px) {
  .search-wrapper[aria-expanded="true"] .search-input {
    width: 240px;
  }
}

/* keep button always visible */
.search-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 4px;
}

/* very small visual for spinner if inserted inline */
#searchSpinner {
  display: inline-block;
  margin-left: .5rem;
}

/* Offcanvas footer wrapper */
.offcanvas-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:6px;
  background: transparent;
}

/* color button group */
.color-buttons {
  display:flex;
  gap:8px;
  align-items:center;
}

/* single color button */
.color-btn{
  width:36px;
  height:36px;
  border-radius:8px;
  border:2px solid transparent;
  padding:0;
  cursor:pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  transition: transform .12s, box-shadow .12s, border-color .12s;
  background: #ccc; /* fallback */
  display: inline-block;
}
.color-btn:focus { outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-2px); }
.color-btn:hover { transform: translateY(-3px); box-shadow:0 10px 20px rgba(0,0,0,.12); }

/* show active border for chosen theme */
.color-btn.active { border-color: color-mix(in srgb, var(--accent) 65%, white); box-shadow:0 12px 28px rgba(0,0,0,.14); transform: scale(1.05); }

/* optionally, small label style */
.offcanvas-footer small { color: var(--muted); }

/* contact email class (replaces inline styles) */
.contact-email {
  margin-top:0;
  font-size:10px;
  color: var(--contact-text);
  background-color: var(--contact-bg);
  padding: 2px 6px;
  border-radius: 4px;
  text-decoration: none;
}

/* article-title-link class (alternative to h2 a) */
.article-title-link {
  color: var(--accent);
  margin-top: 10px;
  text-decoration: none;
}

/* Ensure thumbnails and slide placeholders use theme tokens where appropriate */
.slide-placeholder { color: var(--thumb-text); }

/* small utilities */
.w-full { width: 100%; }
.hidden { display: none !important; }
.mt-1 { margin-top: .25rem; }


.breadcrumbs {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.breadcrumbs a {
  color: var(--brand);
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}