/* ============================================================
   SfriTrav.com — Editorial News & Blog
   v2.1 — Fixed: mobile nav, ticker speed, layout, responsiveness
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'DM Sans', sans-serif; background: #fafaf8; color: #1a1a1a; line-height: 1.65; min-height: 100vh; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

:root {
  --black: #0d0d0d; --white: #ffffff; --cream: #fafaf8;
  --ink: #1a1a1a; --ink-light: #555; --ink-muted: #888;
  --border: #e8e8e4; --border-dark: #d0d0ca;
  --red: #e63329; --red-dark: #c42a20;
  --cat-health: #1a7a3e; --cat-travel: #1a4fbd; --cat-politics: #c42a20;
  --cat-entertainment: #9b2fa3; --cat-sports: #e07b1a; --cat-tech: #0e7a7a;
  --cat-business: #1a4fbd; --cat-women: #c4507a; --cat-men: #2a5fbd;
  --cat-food: #c47a1a; --cat-environment: #1a7a3e; --cat-fashion: #9b2fa3;
  --cat-mental: #5a3ab2; --cat-jobs: #c42a20; --cat-ayurveda: #5a7a1a;
  --cat-kids: #e07b1a; --cat-news: #0d0d0d; --cat-education: #1a3a6b;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --radius-sm: 4px; --radius: 8px; --radius-lg: 14px;
  --shadow: 0 2px 16px rgba(0,0,0,.07); --shadow-hover: 0 8px 32px rgba(0,0,0,.13);
  --container: 1280px; --header-h: 64px;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }
.dot { color: var(--ink-muted); }

/* ===== TAG ===== */
.tag {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .2rem .55rem; border-radius: 3px;
  background: var(--black); color: var(--white); white-space: nowrap;
}
.tag.health { background: var(--cat-health); }
.tag.travel { background: var(--cat-travel); }
.tag.politics { background: var(--cat-politics); }
.tag.entertainment { background: var(--cat-entertainment); }
.tag.sports { background: var(--cat-sports); }
.tag.tech,.tag.technology { background: var(--cat-tech); }
.tag.business,.tag.finance { background: var(--cat-business); }
.tag.women { background: var(--cat-women); }
.tag.men { background: var(--cat-men); }
.tag.food { background: var(--cat-food); }
.tag.environment { background: var(--cat-environment); }
.tag.fashion { background: var(--cat-fashion); }
.tag.mental-health { background: var(--cat-mental); }
.tag.jobs { background: var(--cat-jobs); }
.tag.ayurveda { background: var(--cat-ayurveda); }
.tag.kids { background: var(--cat-kids); }
.tag.news { background: var(--cat-news); }
.tag.education { background: var(--cat-education); }

/* ===== BUTTONS ===== */
.btn { display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.4rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;transition:all .18s;cursor:pointer; }
.btn-primary { background:var(--black);color:var(--white); }
.btn-primary:hover { background:var(--red); }
.btn-outline { background:transparent;border:2px solid var(--black);color:var(--black); }
.btn-outline:hover { background:var(--black);color:var(--white); }

/* ===== BREAKING TICKER — speed 18s ===== */
.ticker-bar { background:var(--red);color:var(--white);padding:.42rem 0;overflow:hidden;position:relative;z-index:100; }
.ticker-inner { display:flex;align-items:center; }
.ticker-label { font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--white);color:var(--red);padding:.18rem .6rem;border-radius:2px;white-space:nowrap;flex-shrink:0;margin-right:1rem; }
.ticker-track { overflow:hidden;flex:1; }
.ticker-items { display:flex;gap:2.5rem;white-space:nowrap;font-size:.81rem;font-weight:500;will-change:transform; }
.ticker-items:hover { } /* pause handled in JS */
.ticker-sep { color:rgba(255,255,255,.5);flex-shrink:0; }
/* ticker-scroll keyframe removed — JS RAF scroller used instead */

/* ===== TRENDS BAR — speed 22s ===== */
.trends-bar { background:var(--black);color:var(--white);padding:.65rem 0;overflow:hidden; }
.trends-inner { display:flex;align-items:center; }
.trends-label { font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--red);color:var(--white);padding:.22rem .65rem;border-radius:2px;white-space:nowrap;flex-shrink:0;margin-right:1rem; }
.trends-track { overflow:hidden;flex:1; }
.trends-items { display:flex;gap:2rem;white-space:nowrap;font-size:.81rem;will-change:transform; }
.trends-items a { color:rgba(255,255,255,.82);transition:color .15s; }
.trends-items a:hover { color:var(--red); }
.trend-hash { color:var(--red);font-weight:700;margin-right:2px; }

/* ===== HEADER ===== */
.site-header { background:var(--white);border-bottom:3px solid var(--black);position:sticky;top:0;z-index:400;transition:box-shadow .2s; }
.site-header.scrolled { box-shadow:0 2px 20px rgba(0,0,0,.12); }
.header-inner { display:flex;align-items:center;gap:.75rem;height:var(--header-h);position:relative; }
.logo { display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:1.4rem;font-weight:900;color:var(--black);flex-shrink:0;letter-spacing:-.02em;white-space:nowrap; }
.logo-dot { color:var(--red); }
.logo-tagline { font-family:var(--font-mono);font-size:.58rem;font-weight:500;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.1em;display:none; }
@media(min-width:1100px){ .logo-tagline { display:block; } }

/* Desktop nav */
.main-nav { flex:1;min-width:0;overflow:hidden; }
.nav-list { display:flex;align-items:center;gap:.05rem;overflow-x:auto;scrollbar-width:none;padding:0; }
.nav-list::-webkit-scrollbar { display:none; }
.nav-link { font-size:.75rem;font-weight:600;letter-spacing:.02em;padding:.35rem .55rem;border-radius:var(--radius-sm);white-space:nowrap;color:var(--ink);transition:all .15s;text-transform:uppercase;flex-shrink:0; }
.nav-link:hover,.nav-link.active { background:var(--black);color:var(--white); }

.header-actions { display:flex;align-items:center;gap:.4rem;flex-shrink:0; }
.btn-search { display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--cream);border:1.5px solid var(--border);font-size:.9rem;transition:all .15s;flex-shrink:0; }
@media(max-width:900px){ .btn-search { display:none; } }
.btn-search:hover { background:var(--black);color:var(--white);border-color:var(--black); }

/* Hamburger */
.hamburger { display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:34px;height:34px;padding:5px;flex-shrink:0;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--cream); }
.hamburger span { display:block;width:18px;height:2px;background:var(--black);transition:all .25s;border-radius:2px; }
.hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0;transform:scaleX(0); }
.hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav */
/* ticker speeds set directly on elements below */
@media(max-width:900px){
  /* Speeds handled by JS RAF scroller (mobile-aware) */
  /* Hamburger: pushed to far right with margin-left:auto, search hidden */
  .hamburger { display:flex; }
  .btn-search { display:none !important; }
  .main-nav { display:none; flex:none; }
  .main-nav.open { display:block; }
  /* Logo left, hamburger right */
  .header-inner { gap:.5rem; justify-content:space-between; }
  .header-actions { display:none; }  /* hide search on mobile */
  .main-nav {
    display:none; position:fixed;
    top:var(--header-h); left:0; right:0;
    background:var(--white); border-bottom:3px solid var(--black);
    z-index:350; box-shadow:0 8px 40px rgba(0,0,0,.18);
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
    padding:1rem 1.25rem 1.5rem;
  }
  .main-nav.open { display:block; }
  .nav-list { flex-direction:column;align-items:stretch;overflow-x:visible;gap:.25rem; }
  .nav-link { display:block;padding:.65rem .9rem;font-size:.88rem;border-radius:var(--radius-sm);border:1px solid transparent; }
  .nav-link:hover,.nav-link.active { background:var(--black);color:var(--white);border-color:var(--black); }
}

/* Date bar */
.date-bar { background:var(--cream);border-bottom:1px solid var(--border);padding:.38rem 0;font-size:.72rem;color:var(--ink-muted); }
.date-bar .container { display:flex;justify-content:space-between;align-items:center; }
.date-bar-right { display:flex;gap:1rem; }
.date-bar-right a { color:var(--ink-muted);transition:color .15s; }
.date-bar-right a:hover { color:var(--red); }

/* ===== HERO GRID ===== */
.hero-section { padding:1.5rem 0; }
.hero-grid { display:grid;grid-template-columns:2fr 1fr;border:1.5px solid var(--border-dark);overflow:hidden;border-radius:var(--radius); }
.hero-main { background:var(--white);overflow:hidden; }
.hero-main-img { width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .4s; }
.hero-main:hover .hero-main-img { transform:scale(1.02); }
.hero-main-body { padding:1.1rem 1.35rem 1.35rem; }
.hero-main-body .tag { margin-bottom:.6rem; }
.hero-main-title { font-family:var(--font-display);font-size:clamp(1.2rem,2vw,1.8rem);font-weight:900;line-height:1.2;margin-bottom:.6rem;color:var(--black); }
.hero-main-title a:hover { color:var(--red); }
.hero-main-excerpt { color:var(--ink-light);font-size:.86rem;line-height:1.6;margin-bottom:.75rem; }
.hero-meta { font-size:.72rem;color:var(--ink-muted);display:flex;gap:.4rem;align-items:center;flex-wrap:wrap; }
.hero-stack { background:var(--white);border-left:1.5px solid var(--border-dark);display:flex;flex-direction:column; }
.hero-side-item { padding:.85rem .9rem;display:flex;gap:.7rem;align-items:flex-start;border-bottom:1px solid var(--border);flex:1; }
.hero-side-item:last-child { border-bottom:none; }
.hero-side-img { width:75px;min-width:75px;height:56px;object-fit:cover;border-radius:var(--radius-sm);display:block; }
.hero-side-body .tag { margin-bottom:.28rem; }
.hero-side-title { font-family:var(--font-display);font-size:.84rem;font-weight:700;line-height:1.3; }
.hero-side-title a:hover { color:var(--red); }
.hero-side-meta { font-size:.68rem;color:var(--ink-muted);margin-top:.25rem; }
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr} .hero-stack{border-left:none;border-top:1.5px solid var(--border-dark)} .hero-side-item{flex:none} }
@media(max-width:480px){ .hero-side-img{width:65px;min-width:65px;height:48px} }

/* Section header */
.section-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;padding-bottom:.6rem;border-bottom:3px solid var(--black); }
.section-title { font-family:var(--font-display);font-size:1.1rem;font-weight:900;text-transform:uppercase;letter-spacing:.03em; }
.section-title span { color:var(--red); }
.see-all { font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);transition:color .15s;white-space:nowrap; }
.see-all:hover { color:var(--red); }

/* ===== CARDS ===== */
.cards-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem; }
.cards-grid-3 { grid-template-columns:repeat(3,1fr); }
.cards-grid-2 { grid-template-columns:repeat(2,1fr); }
.card { background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .2s;display:flex;flex-direction:column; }
.card:hover { box-shadow:var(--shadow-hover);transform:translateY(-3px);border-color:var(--border-dark); }
.card-img-wrap { overflow:hidden; }
.card-img-wrap img,.card-img { width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .35s; }
.card:hover .card-img,.card:hover .card-img-wrap img { transform:scale(1.05); }
.card-body { padding:.85rem;flex:1;display:flex;flex-direction:column;gap:.35rem; }
.card-body .tag { align-self:flex-start; }
.card-title { font-family:var(--font-display);font-size:.92rem;font-weight:700;line-height:1.3;flex:1; }
.card-title a:hover { color:var(--red); }
.card-excerpt { font-size:.78rem;color:var(--ink-light);line-height:1.5; }
.card-meta { font-size:.68rem;color:var(--ink-muted);display:flex;gap:.4rem;align-items:center;margin-top:auto;padding-top:.3rem; }
/* Horizontal card */
.card-h { flex-direction:row;align-items:stretch; }
.card-h .card-img-wrap { width:105px;min-width:105px;flex-shrink:0; }
.card-h .card-img-wrap img,.card-h .card-img { aspect-ratio:auto;height:100%; }
.card-h .card-body { padding:.7rem; }
.card-h .card-title { font-size:.82rem; }
/* Numbered */
.num-list { display:flex;flex-direction:column; }
.num-item { display:flex;gap:.7rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px solid var(--border); }
.num-item:last-child { border-bottom:none; }
.num-badge { font-family:var(--font-display);font-size:1.35rem;font-weight:900;color:var(--border-dark);line-height:1;flex-shrink:0;width:26px;text-align:center; }
.num-title { font-size:.83rem;font-weight:600;line-height:1.4; }
.num-title a:hover { color:var(--red); }
.num-meta { font-size:.68rem;color:var(--ink-muted);margin-top:.2rem; }
/* Responsive */
@media(max-width:1100px){ .cards-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:780px){ .cards-grid{grid-template-columns:repeat(2,1fr)} .cards-grid-3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:460px){ .cards-grid,.cards-grid-3,.cards-grid-2{grid-template-columns:1fr} .card-h{flex-direction:column} .card-h .card-img-wrap{width:100%;min-width:unset} .card-h .card-img-wrap img{height:auto;aspect-ratio:16/9} }

/* ===== LAYOUT ===== */
.two-col { display:grid;grid-template-columns:1fr 310px;gap:2.25rem;align-items:start; }
.three-col { display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.75rem; }
@media(max-width:1024px){ .two-col{grid-template-columns:1fr} }
@media(max-width:780px){ .three-col{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .three-col{grid-template-columns:1fr} }

/* ===== SIDEBAR ===== */
.sidebar-widget { margin-bottom:1.75rem; }
.widget-title { font-family:var(--font-display);font-size:.9rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding-bottom:.5rem;margin-bottom:.85rem;border-bottom:3px solid var(--black); }
.nl-widget { background:var(--black);color:var(--white);padding:1.25rem;border-radius:var(--radius); }
.nl-widget .widget-title { color:var(--white);border-color:var(--red); }
.nl-widget p { font-size:.8rem;color:rgba(255,255,255,.62);margin-bottom:.85rem;line-height:1.55; }
.nl-input-wrap { display:flex;flex-direction:column;gap:.5rem; }
.nl-input { padding:.62rem .82rem;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.2);font-size:.875rem;width:100%;background:rgba(255,255,255,.08);color:var(--white); }
.nl-input::placeholder { color:rgba(255,255,255,.33); }
.nl-input:focus { outline:none;border-color:var(--red); }
.nl-btn { padding:.62rem;background:var(--red);color:var(--white);border-radius:var(--radius-sm);font-weight:700;font-size:.875rem;transition:background .15s;width:100%;border:none;cursor:pointer; }
.nl-btn:hover { background:var(--red-dark); }
.nl-msg { font-size:.73rem;margin-top:.3rem; }
.nl-msg.success { color:#6ee7a0; } .nl-msg.error { color:#fca5a5; }
.cat-grid { display:grid;grid-template-columns:1fr 1fr;gap:.35rem; }
.cat-pill { padding:.38rem .55rem;border-radius:var(--radius-sm);font-size:.72rem;font-weight:600;text-align:center;background:var(--cream);border:1.5px solid var(--border);transition:all .15s;color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cat-pill:hover { background:var(--black);color:var(--white);border-color:var(--black); }

/* Sections */
.content-section { padding:1.75rem 0;border-top:1px solid var(--border); }

/* ===== SKELETON ===== */
.skeleton { background:linear-gradient(90deg,#ebebea 25%,#f5f5f3 50%,#ebebea 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm); }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-card { border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--border);background:var(--white); }
.skeleton-img { height:165px;border-radius:0; }
.skeleton-line { height:12px;margin:7px 10px;border-radius:3px; }
.skeleton-line.short { width:55%; } .skeleton-line.medium { width:78%; }

/* ===== ARTICLE PAGE ===== */
.article-hero { padding:2rem 0 1.25rem;border-bottom:1px solid var(--border); }
.article-title-h1 { font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.7rem);font-weight:900;line-height:1.15;margin:.7rem 0 .85rem;max-width:820px; }
.article-meta-row { display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.78rem;color:var(--ink-muted);margin-bottom:1.1rem;align-items:center; }
.article-cover { width:100%;max-height:480px;object-fit:cover;border-radius:var(--radius);margin-bottom:1.5rem;display:block; }
.article-body { font-size:1rem;line-height:1.8;color:var(--ink); }
.article-body h2 { font-family:var(--font-display);font-size:1.35rem;font-weight:700;margin:1.65rem 0 .6rem;color:var(--black); }
.article-body h3 { font-size:1.08rem;font-weight:600;margin:1.3rem 0 .45rem; }
.article-body p { margin-bottom:1.05rem; }
.article-body ul,.article-body ol { padding-left:1.5rem;margin-bottom:1.05rem; }
.article-body li { margin-bottom:.42rem; }
.article-body ul li { list-style:disc; } .article-body ol li { list-style:decimal; }
.article-body blockquote { border-left:4px solid var(--red);padding:.7rem 1.1rem;background:var(--cream);font-style:italic;color:var(--ink-light);margin:1.4rem 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.article-body a { color:var(--red);text-decoration:underline; }
.article-body strong { font-weight:600; }
.reading-bar { position:fixed;top:0;left:0;height:3px;background:var(--red);z-index:9999;width:0;transition:width .1s linear;pointer-events:none; }
.share-bar { display:flex;gap:.45rem;flex-wrap:wrap;margin:1.5rem 0;padding:.9rem 1rem;background:var(--cream);border-radius:var(--radius);border:1.5px solid var(--border);align-items:center; }
.share-bar strong { font-size:.8rem;margin-right:.2rem; }
.share-btn { display:inline-flex;align-items:center;gap:.3rem;padding:.38rem .8rem;border-radius:var(--radius-sm);font-size:.76rem;font-weight:600;opacity:.92;border:none;cursor:pointer;transition:opacity .15s; }
.share-btn:hover { opacity:1; }
.share-fb { background:#1877f2;color:#fff; } .share-tw { background:#000;color:#fff; }
.share-wa { background:#25d366;color:#fff; } .share-copy { background:var(--white);color:var(--ink);border:1.5px solid var(--border-dark); }

/* ===== SEARCH PAGE ===== */
.search-hero { background:var(--black);color:var(--white);padding:2.5rem 0; }
.search-hero h1 { font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.6rem);font-weight:900;margin-bottom:1.1rem; }
.search-box-wrap { display:flex;gap:.4rem;max-width:600px; }
.search-input { flex:1;padding:.78rem 1rem;border-radius:var(--radius-sm);border:1.5px solid rgba(255,255,255,.2);font-size:1rem;outline:none;background:rgba(255,255,255,.1);color:var(--white); }
.search-input::placeholder { color:rgba(255,255,255,.38); }
.search-input:focus { border-color:var(--red); }
.search-submit { padding:.78rem 1.35rem;background:var(--red);color:var(--white);border-radius:var(--radius-sm);font-weight:700;transition:background .15s;border:none;cursor:pointer;white-space:nowrap; }
.search-submit:hover { background:var(--red-dark); }
.filter-row { display:flex;gap:.35rem;flex-wrap:wrap;margin-top:1rem; }
.filter-chip { padding:.26rem .78rem;border-radius:20px;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:rgba(255,255,255,.8);font-size:.74rem;font-weight:600;cursor:pointer;transition:all .15s; }
.filter-chip.active,.filter-chip:hover { background:var(--red);border-color:var(--red);color:#fff; }

/* ===== LEGAL ===== */
.legal-body { max-width:820px;margin:0 auto;padding:3rem 1.5rem 5rem; }
.legal-body h2 { font-family:var(--font-display);font-size:1.2rem;margin:2.25rem 0 .7rem;border-bottom:2px solid var(--border);padding-bottom:.4rem; }
.legal-body p,.legal-body li { line-height:1.8;color:var(--ink-light);margin-bottom:.7rem; }
.legal-body ul { padding-left:1.5rem; } .legal-body ul li { list-style:disc; }
.legal-body a { color:var(--red); }

/* ===== CATEGORY PAGE ===== */
.cat-hero { padding:2rem 0;border-bottom:3px solid var(--black);margin-bottom:1.75rem; }
.cat-hero h1 { font-family:var(--font-display);font-size:clamp(1.8rem,5vw,3rem);font-weight:900; }
.cat-hero p { color:var(--ink-light);margin-top:.4rem;font-size:.98rem; }
.sort-row { display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;flex-wrap:wrap; }
.sort-select { padding:.38rem .78rem;border-radius:var(--radius-sm);border:1.5px solid var(--border);font-size:.83rem;font-weight:600;background:var(--white);cursor:pointer;color:var(--ink); }

/* ===== FOOTER ===== */
.site-footer { background:var(--black);color:var(--white);margin-top:3.5rem; }
.footer-top { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.25rem;padding:2.25rem 0;border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .logo { color:var(--white);margin-bottom:.8rem; }
.footer-brand p { font-size:.82rem;color:rgba(255,255,255,.48);line-height:1.7;max-width:280px; }
.footer-col h4 { font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.42);margin-bottom:.8rem; }
.footer-col ul { display:flex;flex-direction:column;gap:.48rem; }
.footer-col a { font-size:.82rem;color:rgba(255,255,255,.62);transition:color .15s; }
.footer-col a:hover { color:var(--red); }
.footer-social { display:flex;gap:.45rem;margin-top:1rem; }
.social-btn { width:30px;height:30px;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:background .15s; }
.social-btn:hover { background:var(--red); }
.footer-bottom { padding:1rem 0;display:flex;align-items:center;justify-content:space-between;font-size:.73rem;color:rgba(255,255,255,.36);flex-wrap:wrap;gap:.5rem; }
.footer-bottom a { color:rgba(255,255,255,.36);transition:color .15s; } .footer-bottom a:hover { color:var(--white); }
@media(max-width:900px){ .footer-top{grid-template-columns:1fr 1fr;gap:1.75rem} }
@media(max-width:500px){ .footer-top{grid-template-columns:1fr} .footer-bottom{flex-direction:column;text-align:center} }

/* ===== BACK TO TOP ===== */
.back-top { position:fixed;bottom:1.5rem;right:1.5rem;z-index:500;width:38px;height:38px;background:var(--black);color:var(--white);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1rem;opacity:0;pointer-events:none;transition:all .2s;border:none;box-shadow:var(--shadow);cursor:pointer; }
.back-top.visible { opacity:1;pointer-events:all; }
.back-top:hover { background:var(--red);transform:translateY(-2px); }

/* ===== COOKIE BANNER ===== */
.cookie-banner { position:fixed;bottom:1.25rem;left:1.25rem;z-index:999;max-width:min(360px,calc(100vw - 2.5rem));background:var(--white);border:2px solid var(--black);border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow-hover);transform:translateY(20px);opacity:0;pointer-events:none;transition:all .3s; }
.cookie-banner.visible { transform:translateY(0);opacity:1;pointer-events:all; }
.cookie-banner p { font-size:.79rem;line-height:1.6;margin-bottom:.75rem;color:var(--ink-light); }
.cookie-btns { display:flex;gap:.4rem; }
.cookie-btns button { flex:1;padding:.46rem;border-radius:var(--radius-sm);font-weight:600;font-size:.78rem;cursor:pointer; }
.cookie-accept { background:var(--black);color:var(--white);border:none;transition:background .15s; }
.cookie-accept:hover { background:var(--red); }
.cookie-decline { background:transparent;border:1.5px solid var(--border-dark);color:var(--ink-light);transition:all .15s; }
.cookie-decline:hover { border-color:var(--black);color:var(--black); }

/* ===== BREADCRUMB ===== */
.breadcrumb { font-size:.74rem;color:var(--ink-muted);display:flex;gap:.32rem;flex-wrap:wrap;align-items:center;padding:.8rem 0; }
.breadcrumb a { color:var(--red); }
.breadcrumb span { color:var(--border-dark); }

/* Misc */
.load-more-wrap { text-align:center;padding:2rem 0; }
.empty-state { text-align:center;padding:3.5rem 1rem;color:var(--ink-muted);font-size:.92rem; }
.ad-placeholder { background:var(--cream);border:1.5px dashed var(--border-dark);border-radius:var(--radius);padding:1.1rem;text-align:center;font-size:.73rem;color:var(--ink-muted); }


/* ===== MARKET TICKER — right-to-left (opposite direction) ===== */
.market-bar {
  background: #0d1117;
  color: #e2e8f0;
  padding: .48rem 0;
  overflow: hidden;
  border-bottom: 1px solid #1e2d3d;
  position: relative;
}
.market-bar::before,
.market-bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.market-bar::before { left: 0;  background: linear-gradient(to right,  #0d1117, transparent); }
.market-bar::after  { right: 0; background: linear-gradient(to left,   #0d1117, transparent); }

.market-inner { display: flex; align-items: center; }
.market-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: #1e8c3a; color: #fff;
  padding: .18rem .6rem; border-radius: 2px; white-space: nowrap; flex-shrink: 0;
  margin-right: 1rem; font-family: var(--font-mono);
}
.market-label.closed { background: #555; }
.market-track { overflow: hidden; flex: 1; }

/* RIGHT-TO-LEFT animation — opposite of breaking ticker */
/* market-scroll keyframe removed — JS RAF scroller used instead */
.market-items {
  display: flex; gap: 0; white-space: nowrap;
  will-change: transform;
  font-family: var(--font-mono); font-size: .75rem;
}
.market-items:hover { } /* pause handled in JS */

.market-item {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: 0 .9rem;
  border-right: 1px solid #1e2d3d;
  cursor: default; flex-shrink: 0;
}
.market-item:last-child { border-right: none; }
.market-name {
  color: #94a3b8; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap;
}
.market-price {
  color: #e2e8f0; font-weight: 600; font-size: .75rem; white-space: nowrap;
}
.market-change {
  font-size: .68rem; font-weight: 600; white-space: nowrap;
}
.market-change.up   { color: #22c55e; }
.market-change.down { color: #ef4444; }
.market-arrow { font-size: .62rem; }

/* Loading shimmer for market items */
.market-loading {
  display: inline-flex; align-items: center;
  padding: 0 1rem; color: #4a5568; font-size: .72rem;
  font-family: var(--font-mono); letter-spacing: .05em;
  animation: market-blink 1.2s ease-in-out infinite;
}
@keyframes market-blink { 0%,100%{opacity:.4} 50%{opacity:1} }

/* Market type badges — hidden in ticker, shown in panel only */
.market-type { display:none; }
.mep-item .market-type {
  display:inline-block;
  font-size: .55rem; padding: .08rem .28rem; border-radius: 2px;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  flex-shrink: 0;
}
.mep-item .market-type.index     { background: rgba(59,130,246,.2);  color: #60a5fa; }
.mep-item .market-type.forex     { background: rgba(234,179, 8,.2);  color: #fbbf24; }
.mep-item .market-type.commodity { background: rgba(249,115, 22,.2); color: #fb923c; }
.mep-item .market-type.stock     { background: rgba(168,85,247,.2);  color: #c084fc; }
.mep-item .market-type.etf       { background: rgba(34,197, 94,.2);  color: #4ade80; }
.mep-item .market-type.fuel      { background: rgba(239,68,68,.2);   color: #f87171; }
.mep-item .market-type.crypto    { background: rgba(251,191,36,.18); color: #fbbf24; }

/* Market status dot */
.market-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.market-dot.live   { background: #22c55e; box-shadow: 0 0 4px #22c55e; animation: pulse-green .8s ease-in-out infinite alternate; }
.market-dot.closed { background: #4a5568; }
@keyframes pulse-green { from{opacity:.6} to{opacity:1} }


/* Mobile nav close button */
.nav-close-btn { display:none; }
@media(max-width:900px){
  .nav-close-btn {
    display:flex; align-items:center; justify-content:space-between;
    padding:.75rem 1rem; margin-bottom:.5rem;
    border-bottom:2px solid var(--black);
    font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink); background:none; border-top:none; border-left:none; border-right:none;
    width:100%; cursor:pointer;
  }
  .nav-close-icon {
    width:30px; height:30px; background:var(--black); color:var(--white);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; line-height:1; flex-shrink:0; font-style:normal;
  }
}

@media print { .site-header,.site-footer,.cookie-banner,.back-top,.ticker-bar,.trends-bar,.share-bar,.date-bar { display:none !important; } }

/* ===== MARKET EXPAND PANEL ===== */
.market-bar { cursor:pointer; }
/* Desktop: absolute dropdown below bar */
.market-bar.expanded { overflow:visible; position:relative; z-index:200; }
.market-bar.expanded .market-track { display:none; }
.market-expand-panel {
  display:none;
  position:absolute; left:0; right:0; top:100%;
  background:#0d1117; border:1px solid #1e2d3d; border-top:2px solid #1e8c3a;
  z-index:300; padding:1rem 1.2rem;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  max-height:70vh; overflow-y:auto; overflow-x:hidden;
  box-sizing:border-box;
}
.market-bar.expanded .market-expand-panel { display:block; }

/* Mobile: fixed overlay that covers viewport properly */
@media(max-width:768px){
  .market-expand-panel {
    position:fixed; top:0; left:0; right:0; bottom:0;
    max-height:100dvh; height:100dvh;
    border-radius:0; border:none;
    z-index:9999; padding:.75rem 1rem 5rem;
    overflow-y:auto; overflow-x:hidden;
  }
}

.market-expand-panel .mep-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:.85rem; padding-bottom:.5rem; border-bottom:1px solid #1e2d3d;
  position:sticky; top:0; background:#0d1117; z-index:10; padding-top:.25rem;
}
.market-expand-panel .mep-title {
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#94a3b8; font-family:var(--font-mono);
}
.market-expand-panel .mep-close {
  background:#ef4444; color:#fff; border:none; border-radius:6px;
  padding:.35rem .85rem; font-size:.78rem; cursor:pointer; font-family:var(--font-mono);
  font-weight:700; letter-spacing:.04em; flex-shrink:0;
  min-width:70px; text-align:center;
}
.market-expand-panel .mep-close:hover { background:#dc2626; }
@media(max-width:768px){
  .market-expand-panel .mep-close {
    padding:.45rem 1.2rem; font-size:.85rem; min-width:80px;
  }
  .market-expand-panel .mep-title { font-size:.68rem; }
}

.mep-section { margin-bottom:1.1rem; }
.mep-section-title {
  font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#4a6a8a; font-family:var(--font-mono); margin-bottom:.5rem;
  padding-bottom:.3rem; border-bottom:1px solid #162030;
}
.mep-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:.45rem;
}
@media(max-width:768px){
  .mep-grid { grid-template-columns:1fr 1fr; gap:.35rem; }
}
@media(max-width:380px){
  .mep-grid { grid-template-columns:1fr; }
}

.mep-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:.45rem .65rem; border-radius:5px; background:#111823;
  border:1px solid #1a2535; gap:.4rem; min-width:0;
  box-sizing:border-box;
}
.mep-item-left {
  display:flex; align-items:center; gap:.35rem;
  min-width:0; flex:1; overflow:hidden;
}
.mep-item-name {
  font-size:.73rem; color:#94a3b8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1; min-width:0;
}
@media(max-width:768px){
  .mep-item-name { font-size:.68rem; }
  .mep-item { padding:.38rem .5rem; }
}
.mep-item-right {
  display:flex; align-items:center; gap:.35rem; flex-shrink:0;
}
.mep-item-price {
  font-size:.74rem; font-weight:600; color:#e2e8f0;
  font-family:var(--font-mono); white-space:nowrap;
}
.mep-item-chg {
  font-size:.65rem; font-weight:600; font-family:var(--font-mono);
  white-space:nowrap;
}
.mep-item-chg.up   { color:#22c55e; }
.mep-item-chg.down { color:#ef4444; }
.mep-fetched {
  font-size:.6rem; color:#2d4a62; font-family:var(--font-mono);
  text-align:right; margin-top:.6rem;
}

/* fuel/crypto handled above in mep-item context */

/* ===== INLINE SEARCH BOX ===== */
.header-search-wrap {
  display:flex; align-items:center;
  background:var(--cream); border:1.5px solid var(--border);
  border-radius:6px; overflow:hidden; transition:border-color .15s;
  flex:1; max-width:260px;
}
.header-search-wrap:focus-within { border-color:var(--red); }
.header-search-input {
  border:none; background:transparent; outline:none;
  padding:.38rem .6rem; font-size:.83rem; color:var(--ink); width:100%;
  font-family:var(--font-sans);
}
.header-search-input::placeholder { color:var(--ink-muted); }
.header-search-btn {
  background:none; border:none; cursor:pointer; padding:.38rem .6rem;
  color:var(--ink-muted); font-size:.95rem; transition:color .15s; flex-shrink:0;
  display:flex; align-items:center;
}
.header-search-btn:hover { color:var(--red); }
/* Search suggestions dropdown */
.search-suggestions {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--white); border:1.5px solid var(--border);
  border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:500; max-height:320px; overflow-y:auto; display:none;
}
.search-suggestions.visible { display:block; }
.search-suggestion-item {
  padding:.55rem .85rem; cursor:pointer; font-size:.82rem;
  border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.5rem;
  transition:background .1s;
}
.search-suggestion-item:last-child { border-bottom:none; }
.search-suggestion-item:hover, .search-suggestion-item.active { background:var(--cream); }
.search-suggestion-icon { font-size:.75rem; color:var(--ink-muted); flex-shrink:0; }
.search-suggestion-title { color:var(--ink); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-suggestion-cat { font-size:.68rem; color:var(--ink-muted); flex-shrink:0; }
.search-wrap-outer { position:relative; flex:1; max-width:260px; }
@media(max-width:900px){
  .header-search-wrap { max-width:100%; }
  .search-wrap-outer { max-width:100%; }
  /* Show search in mobile header too */
  .header-actions { display:flex !important; flex:1; }
}

/* ===== BREAKING TICKER — clickable items ===== */
.ticker-items a {
  color:inherit; text-decoration:none; transition:color .12s;
}
.ticker-items a:hover { color:#ffe4e4; text-decoration:underline; }

/* ===== TRENDING TICKER — clickable items ===== */
.trends-items a { color:rgba(255,255,255,.82); transition:color .15s; text-decoration:none; }
.trends-items a:hover { color:var(--red); }

/* ===== MONETIZATION — Ad Placeholders & Affiliate Boxes ===== */
.ad-placeholder {
  background: var(--cream); border: 1.5px dashed var(--border-dark);
  border-radius: 8px; padding: 1.5rem; text-align: center;
  min-height: 90px; display: flex; align-items: center; justify-content: center;
  margin: 1rem 0;
}
.ad-label { font-size: .72rem; color: var(--ink-muted); letter-spacing: .08em; text-transform: uppercase; }
.in-article-ad, .end-article-ad { margin: 1.5rem 0; text-align: center; }

/* Affiliate box */
.affiliate-box {
  background: linear-gradient(135deg, #fff9f0 0%, #fff 100%);
  border: 2px solid #f59e0b; border-radius: 10px;
  padding: 1.1rem 1.2rem; margin: 1.75rem 0;
}
.affiliate-box-header {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .85rem; flex-wrap: wrap;
}
.affiliate-box-icon { font-size: 1.1rem; }
.affiliate-box-title { font-weight: 800; font-size: .88rem; color: var(--ink); }
.affiliate-box-note { font-size: .65rem; color: var(--ink-muted); margin-left: auto; }
.affiliate-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
}
.affiliate-item {
  display: flex; flex-direction: column; background: #fff;
  border: 1.5px solid #fde68a; border-radius: 8px; overflow: hidden;
  text-decoration: none; color: var(--ink); transition: box-shadow .15s, transform .15s;
}
.affiliate-item:hover { box-shadow: 0 4px 16px rgba(245,158,11,.18); transform: translateY(-2px); }
.affiliate-img { width: 100%; height: 120px; object-fit: contain; padding: .5rem; background: #fff; }
.affiliate-img-placeholder { height: 80px; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.affiliate-info { padding: .6rem .75rem .75rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.affiliate-badge {
  display: inline-block; background: #dc2626; color: #fff;
  font-size: .6rem; font-weight: 700; padding: .12rem .4rem; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .06em; width: fit-content;
}
.affiliate-item-title { font-size: .78rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.affiliate-price { font-size: .85rem; font-weight: 800; color: #b45309; }
.affiliate-cta {
  font-size: .7rem; color: #f59e0b; font-weight: 700; margin-top: auto;
  padding-top: .3rem; border-top: 1px solid #fde68a;
}
@media(max-width:600px) {
  .affiliate-grid { grid-template-columns: 1fr 1fr; }
  .affiliate-img { height: 90px; }
}

/* ===== SEO IMPROVEMENTS — Breadcrumb, Article meta ===== */
.seo-category-desc {
  background: var(--cream); border-left: 4px solid var(--red);
  padding: .85rem 1rem; border-radius: 0 6px 6px 0;
  font-size: .85rem; color: var(--ink-muted); margin-bottom: 1.5rem; line-height: 1.6;
}

/* ===== NEWSLETTER — improved CTA ===== */
.nl-widget { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important; color: #fff; }
.nl-widget .widget-title { color: #fff !important; }
.nl-widget p { color: rgba(255,255,255,.75) !important; font-size: .84rem; }
.nl-widget .nl-input { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); color: #fff; }
.nl-widget .nl-input::placeholder { color: rgba(255,255,255,.45); }
.nl-widget .nl-btn { background: var(--red); }

/* ===== SPONSORED CONTENT BADGE ===== */
.sponsored-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #fef9c3; border: 1px solid #fbbf24; border-radius: 4px;
  padding: .15rem .5rem; font-size: .65rem; color: #92400e;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}