/*
Theme Name: CelebTrending
Theme URI: https://celebtrending.com
Description: Professional Celebrity News Theme
Author: Usama Saleem
Version: 1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Source+Sans+3:wght@300;400;600;700&family=Bebas+Neue&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red: #E8192C;
  --dark: #111111;
  --mid: #333333;
  --soft: #666666;
  --light: #f5f5f5;
  --white: #ffffff;
  --border: #e0e0e0;
}

body { font-family: 'Source Sans 3', sans-serif; background: #fff; color: #111; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

/* TOP BAR */
.ct-topbar { background: #111; color: #aaa; font-size: 12px; padding: 6px 0; letter-spacing: 0.05em; }
.ct-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.ct-topbar a { color: #aaa; }
.ct-topbar a:hover { color: #E8192C; }
.ct-topbar-right { display: flex; gap: 16px; }

/* HEADER */
.ct-header { border-bottom: 3px solid #E8192C; background: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.ct-header-inner { max-width: 1200px; margin: 0 auto; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
.ct-logo { font-family: 'Bebas Neue', sans-serif; font-size: 48px; letter-spacing: 2px; line-height: 1; }
.ct-logo span:first-child { color: #111; }
.ct-logo span:last-child { color: #E8192C; }
.ct-logo sub { display: block; font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 4px; color: #666; text-transform: uppercase; margin-top: -4px; }
.ct-nav { display: flex; gap: 28px; align-items: center; }
.ct-nav a { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #333; position: relative; padding-bottom: 2px; transition: color 0.2s; }
.ct-nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #E8192C; transition: width 0.2s; }
.ct-nav a:hover { color: #E8192C; }
.ct-nav a:hover::after { width: 100%; }
.ct-nav a.current { color: #E8192C; }
.ct-search-btn { background: #f5f5f5; border: none; border-radius: 20px; padding: 7px 16px; font-size: 13px; cursor: pointer; color: #666; transition: background 0.2s; font-family: 'Source Sans 3', sans-serif; }
.ct-search-btn:hover { background: #e0e0e0; }

/* TICKER */
.ct-ticker { background: #E8192C; color: white; padding: 10px 0; overflow: hidden; display: flex; align-items: center; }
.ct-ticker-label { background: #111; color: white; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 16px; white-space: nowrap; flex-shrink: 0; }
.ct-ticker-wrap { overflow: hidden; flex: 1; }
.ct-ticker-track { display: flex; gap: 60px; white-space: nowrap; animation: ct-ticker 35s linear infinite; }
.ct-ticker-track span { font-size: 13px; font-weight: 600; flex-shrink: 0; }
.ct-ticker-track span::before { content: '●'; margin-right: 10px; opacity: 0.6; }
@keyframes ct-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* HERO */
.ct-hero { max-width: 1200px; margin: 32px auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 340px; gap: 24px; animation: fadeUp 0.6s ease both; }
.ct-hero-main { position: relative; border-radius: 4px; overflow: hidden; cursor: pointer; }
.ct-hero-main img { width: 100%; height: 480px; object-fit: cover; display: block; transition: transform 0.5s ease; }
.ct-hero-main:hover img { transform: scale(1.03); }
.ct-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%); }
.ct-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px; color: white; }
.ct-hero-badge { display: inline-block; background: #E8192C; color: white; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 10px; margin-bottom: 12px; }
.ct-hero-title { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 900; line-height: 1.2; margin-bottom: 10px; }
.ct-hero-meta { font-size: 13px; opacity: 0.8; }
.ct-hero-side { display: flex; flex-direction: column; gap: 16px; }
.ct-side-card { display: grid; grid-template-columns: 110px 1fr; gap: 14px; border-bottom: 1px solid #e0e0e0; padding-bottom: 16px; cursor: pointer; transition: opacity 0.2s; }
.ct-side-card:hover { opacity: 0.75; }
.ct-side-card:last-child { border-bottom: none; }
.ct-side-card img { width: 110px; height: 80px; object-fit: cover; border-radius: 3px; }
.ct-side-badge { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #E8192C; margin-bottom: 4px; }
.ct-side-title { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; line-height: 1.3; color: #111; }
.ct-side-meta { font-size: 12px; color: #666; margin-top: 4px; }

/* SECTION HEADER */
.ct-section-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.ct-section-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 2px; color: #111; white-space: nowrap; }
.ct-section-line { flex: 1; height: 2px; background: #e0e0e0; }
.ct-section-line::before { content: ''; display: block; width: 60px; height: 100%; background: #E8192C; }
.ct-see-all { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #E8192C; border: 1.5px solid #E8192C; padding: 5px 14px; border-radius: 2px; transition: all 0.2s; }
.ct-see-all:hover { background: #E8192C; color: white; }

/* CATEGORIES */
.ct-categories { max-width: 1200px; margin: 0 auto 40px; padding: 0 20px; animation: fadeUp 0.6s 0.1s ease both; }
.ct-category-tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.ct-cat-tab { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 8px 18px; border: 1.5px solid #e0e0e0; border-radius: 2px; cursor: pointer; transition: all 0.2s; background: white; color: #333; font-family: 'Source Sans 3', sans-serif; }
.ct-cat-tab:hover, .ct-cat-tab.active { background: #E8192C; border-color: #E8192C; color: white; }

/* CARD GRID */
.ct-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ct-card { cursor: pointer; transition: transform 0.2s; }
.ct-card:hover { transform: translateY(-3px); }
.ct-card-img-wrap { position: relative; overflow: hidden; border-radius: 3px; margin-bottom: 12px; }
.ct-card-img-wrap img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ct-card:hover .ct-card-img-wrap img { transform: scale(1.05); }
.ct-card-badge { position: absolute; top: 10px; left: 10px; background: #E8192C; color: white; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 8px; }
.ct-card-title { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; line-height: 1.35; color: #111; margin-bottom: 6px; transition: color 0.2s; }
.ct-card:hover .ct-card-title { color: #E8192C; }
.ct-card-meta { font-size: 12px; color: #666; }
.ct-card-excerpt { font-size: 13px; color: #666; line-height: 1.5; margin-top: 6px; }

/* CONTENT + SIDEBAR */
.ct-content-wrap { max-width: 1200px; margin: 0 auto 40px; padding: 0 20px; display: grid; grid-template-columns: 1fr 300px; gap: 40px; }

/* TRENDING SIDEBAR */
.ct-trending-list { display: flex; flex-direction: column; }
.ct-trending-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #e0e0e0; cursor: pointer; transition: opacity 0.2s; }
.ct-trending-item:hover { opacity: 0.7; }
.ct-trending-num { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: #e0e0e0; line-height: 1; flex-shrink: 0; width: 32px; text-align: center; transition: color 0.2s; }
.ct-trending-item:hover .ct-trending-num { color: #E8192C; }
.ct-trending-title { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; line-height: 1.35; color: #111; }
.ct-trending-meta { font-size: 11px; color: #666; margin-top: 3px; }
.ct-sidebar-ad { background: #f5f5f5; border: 1px dashed #e0e0e0; border-radius: 4px; height: 250px; display: flex; align-items: center; justify-content: center; color: #666; font-size: 13px; margin-top: 32px; letter-spacing: 1px; text-transform: uppercase; }

/* NEWSLETTER */
.ct-newsletter { background: #111; color: white; padding: 60px 20px; text-align: center; }
.ct-newsletter-inner { max-width: 520px; margin: 0 auto; }
.ct-newsletter-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #E8192C; margin-bottom: 12px; }
.ct-newsletter h2 { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 900; margin-bottom: 12px; line-height: 1.2; }
.ct-newsletter p { font-size: 15px; color: #aaa; margin-bottom: 28px; line-height: 1.6; }
.ct-newsletter-form { display: flex; overflow: hidden; max-width: 420px; margin: 0 auto; border-radius: 2px; }
.ct-newsletter-input { flex: 1; padding: 14px 18px; border: none; font-size: 14px; outline: none; background: #222; color: white; font-family: 'Source Sans 3', sans-serif; }
.ct-newsletter-input::placeholder { color: #666; }
.ct-newsletter-btn { background: #E8192C; color: white; border: none; padding: 14px 24px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: background 0.2s; font-family: 'Source Sans 3', sans-serif; white-space: nowrap; }
.ct-newsletter-btn:hover { background: #c0001f; }

/* FOOTER */
.ct-footer { background: #0a0a0a; color: #666; padding: 40px 20px 20px; }
.ct-footer-inner { max-width: 1200px; margin: 0 auto; }
.ct-footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid #1a1a1a; }
.ct-footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 36px; letter-spacing: 2px; margin-bottom: 12px; }
.ct-footer-logo span:first-child { color: white; }
.ct-footer-logo span:last-child { color: #E8192C; }
.ct-footer-desc { font-size: 13px; line-height: 1.7; color: #555; }
.ct-footer-col h4 { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: white; margin-bottom: 16px; }
.ct-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ct-footer-col ul li a { font-size: 13px; color: #555; transition: color 0.2s; }
.ct-footer-col ul li a:hover { color: #E8192C; }
.ct-footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.ct-footer-bottom a { color: #444; }
.ct-footer-bottom a:hover { color: #E8192C; }

/* SINGLE POST */
.ct-single-wrap { max-width: 800px; margin: 40px auto; padding: 0 20px; }
.ct-single-wrap h1 { font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 900; line-height: 1.2; color: #111; margin-bottom: 16px; }
.ct-single-meta { font-size: 13px; color: #666; margin-bottom: 24px; }
.ct-single-wrap .entry-content { font-size: 17px; line-height: 1.8; color: #333; }
.ct-single-wrap .entry-content h2 { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: #111; margin: 32px 0 16px; }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* RESPONSIVE */
@media (max-width: 900px) {
  .ct-hero { grid-template-columns: 1fr; }
  .ct-hero-side { display: none; }
  .ct-card-grid { grid-template-columns: repeat(2, 1fr); }
  .ct-content-wrap { grid-template-columns: 1fr; }
  .ct-footer-top { grid-template-columns: 1fr 1fr; }
  .ct-nav { display: none; }
}
@media (max-width: 600px) {
  .ct-logo { font-size: 36px; }
  .ct-card-grid { grid-template-columns: 1fr; }
  .ct-hero-title { font-size: 24px; }
}