/*
Theme Name: Entertainment Pulse
Theme URI: https://example.com/entertainment-pulse
Author: Your Studio
Author URI: https://example.com
Description: A fast-loading, SEO-optimized WordPress theme built for entertainment & celebrity news sites (Bollywood/Hollywood, TV, music, OTT). Ships with AdSense-ready ad slots, schema.org NewsArticle markup, AMP-friendly markup patterns, native lazy-loading, a trending ticker, and ticket-stub style post cards. Inspired by sites like Asianet News' entertainment vertical.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: entertainment-pulse
Tags: news, blog, entertainment, one-column, two-columns, right-sidebar, custom-menu, featured-images, sticky-post, threaded-comments, translation-ready, seo-friendly, fast
*/

/* =========================================================
   0. DESIGN TOKENS
   Palette: cinema-ink background, warm paper foreground,
   marquee-red + spotlight-gold accents, stub-teal for links.
   Display type: condensed poster face (headlines only).
   Body type: editorial serif. UI type: mono (press-credential feel).
   ========================================================= */
:root{
  --ink:        #0E0E10;
  --ink-soft:   #1B1B1F;
  --paper:      #F7F4EE;
  --paper-dim:  #EFEBE1;
  --marquee:    #E63950;
  --marquee-dk: #B72A3E;
  --gold:       #E8B84B;
  --teal:       #2FB8AC;
  --ash:        #6E6E76;
  --ash-lt:     #9C9AA0;
  --line:       #DEDAD0;
  --line-dark:  #2E2E33;

  --font-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui:      'IBM Plex Mono', 'Courier New', monospace;

  --radius: 3px;
  --container: 1180px;
  --gap: 28px;
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--marquee); }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--teal); outline-offset:2px;
}
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:.3px; line-height:1.05; margin:0 0 .4em; text-transform:uppercase; }
p{ margin:0 0 1.1em; }
.container{ max-width:var(--container); margin:0 auto; padding:0 20px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:12px 18px; z-index:9999; font-family:var(--font-ui); }
.skip-link:focus{ left:10px; top:10px; }

/* =========================================================
   2. UTILITY BAR + TRENDING TICKER
   ========================================================= */
.utility-bar{ background:var(--ink); color:var(--ash-lt); font-family:var(--font-ui); font-size:12px; }
.utility-bar .container{ display:flex; justify-content:space-between; align-items:center; padding-top:6px; padding-bottom:6px; }
.utility-bar a{ color:var(--ash-lt); }
.utility-bar a:hover{ color:var(--gold); }

.ticker{ background:var(--ink-soft); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); overflow:hidden; }
.ticker__inner{ display:flex; align-items:center; }
.ticker__label{ flex:0 0 auto; background:var(--marquee); color:#fff; font-family:var(--font-ui); font-weight:700; font-size:12px; letter-spacing:1px; padding:8px 16px; text-transform:uppercase; }
.ticker__track{ flex:1 1 auto; overflow:hidden; white-space:nowrap; position:relative; }
.ticker__list{ display:inline-flex; padding-left:100%; animation:ticker 32s linear infinite; }
.ticker__list li{ padding:8px 32px; font-family:var(--font-ui); font-size:13px; color:var(--paper); white-space:nowrap; }
.ticker__list li a:hover{ color:var(--gold); }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* =========================================================
   3. SITE HEADER
   ========================================================= */
.site-header{ background:var(--paper); border-bottom:3px solid var(--ink); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:24px; }
.site-logo{ font-family:var(--font-display); font-size:34px; line-height:1; letter-spacing:.5px; }
.site-logo a{ color:var(--ink); display:inline-flex; align-items:baseline; gap:2px; }
.site-logo .accent{ color:var(--marquee); }
.site-tagline{ font-family:var(--font-ui); font-size:11px; color:var(--ash); letter-spacing:1.5px; text-transform:uppercase; margin-top:2px; }

.primary-nav{ flex:1 1 auto; }
.primary-nav ul{ display:flex; flex-wrap:wrap; gap:2px; justify-content:center; }
.primary-nav a{ display:block; padding:10px 14px; font-family:var(--font-ui); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.5px; border-radius:var(--radius); }
.primary-nav a:hover{ background:var(--ink); color:var(--gold); }
.primary-nav .current-menu-item > a{ color:var(--marquee); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-search-toggle, .nav-toggle{ background:var(--ink); color:var(--paper); border:0; width:40px; height:40px; border-radius:var(--radius); cursor:pointer; font-family:var(--font-ui); }
.nav-toggle{ display:none; }
.header-search{ display:flex; }
.header-search input[type="search"]{ font-family:var(--font-ui); border:2px solid var(--ink); border-right:0; padding:8px 10px; background:transparent; width:170px; }
.header-search button{ background:var(--ink); color:#fff; border:2px solid var(--ink); padding:0 12px; cursor:pointer; }

/* Leaderboard ad slot under header */
.ad-slot{ background:var(--paper-dim); border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); text-align:center; padding:10px 0; }
.ad-slot__label{ font-family:var(--font-ui); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ash-lt); display:block; margin-bottom:6px; }
.ad-slot ins.adsbygoogle{ margin:0 auto; }

/* =========================================================
   4. HERO / "NOW SHOWING"
   ========================================================= */
.hero{ padding:32px 0; }
.hero__grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:var(--gap); }
.hero__eyebrow{ font-family:var(--font-ui); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--marquee); font-weight:700; }
.hero__main{ position:relative; }
.hero__main .card__media{ aspect-ratio:16/9; }
.hero__main h1, .hero__main h2{ font-size:clamp(28px,4vw,46px); margin-top:14px; }
.hero__main .card__excerpt{ font-size:18px; color:var(--ash); max-width:60ch; }
.hero__side{ display:flex; flex-direction:column; gap:18px; }
.hero__side .card{ flex-direction:row; gap:14px; }
.hero__side .card__media{ width:130px; flex:0 0 130px; aspect-ratio:4/3; }
.hero__side h3{ font-size:18px; }

/* =========================================================
   5. TICKET-STUB POST CARDS (signature element)
   ========================================================= */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; position:relative; }
.card--stub{ background-image:radial-gradient(circle 6px at 0 22px, var(--paper) 6px, transparent 6.5px), radial-gradient(circle 6px at 100% 22px, var(--paper) 6px, transparent 6.5px); }
.card__media{ position:relative; overflow:hidden; background:var(--paper-dim); aspect-ratio:4/3; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.card:hover .card__media img{ transform:scale(1.05); }
.card__cat{ position:absolute; top:10px; left:10px; background:var(--ink); color:var(--gold); font-family:var(--font-ui); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:4px 9px; border-radius:2px; }
.card__cat--live{ background:var(--marquee); color:#fff; }
.card__body{ padding:16px 16px 18px; border-top:1px dashed var(--line); flex:1; display:flex; flex-direction:column; }
.card__body h2, .card__body h3{ font-size:19px; text-transform:none; margin-bottom:8px; }
.card__body h2 a, .card__body h3 a{ color:var(--ink); }
.card__excerpt{ color:var(--ash); font-size:15px; margin-bottom:10px; }
.card__meta{ margin-top:auto; font-family:var(--font-ui); font-size:11px; color:var(--ash-lt); display:flex; gap:10px; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.5px; }

/* =========================================================
   6. MAIN CONTENT LAYOUT
   ========================================================= */
.content-wrap{ padding:36px 0 56px; }
.layout{ display:grid; grid-template-columns:2fr 1fr; gap:var(--gap); align-items:start; }
.section-heading{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.section-heading h2{ font-size:24px; margin:0; white-space:nowrap; }
.section-heading::after{ content:""; flex:1; height:3px; background:var(--ink); }
.post-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.post-grid--list{ grid-template-columns:1fr; }
.post-grid--list .card{ flex-direction:row; }
.post-grid--list .card__media{ width:220px; flex:0 0 220px; aspect-ratio:4/3; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:32px; font-family:var(--font-ui); }
.pagination a, .pagination span{ padding:9px 15px; border:1px solid var(--line); border-radius:var(--radius); }
.pagination .current{ background:var(--ink); color:var(--gold); border-color:var(--ink); }
.pagination a:hover{ border-color:var(--ink); }

/* =========================================================
   7. SIDEBAR
   ========================================================= */
.sidebar{ display:flex; flex-direction:column; gap:26px; }
.widget{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.widget-title{ font-family:var(--font-display); font-size:18px; margin-bottom:14px; border-bottom:3px solid var(--ink); padding-bottom:8px; }
.widget-trending li{ display:flex; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); }
.widget-trending li:last-child{ border-bottom:0; }
.widget-trending .rank{ font-family:var(--font-display); font-size:24px; color:var(--marquee); flex:0 0 auto; line-height:1; }
.widget-trending a{ font-size:14.5px; font-weight:600; }
.newsletter-widget input[type="email"]{ width:100%; padding:10px; border:2px solid var(--ink); font-family:var(--font-ui); margin-bottom:10px; }
.newsletter-widget button{ width:100%; padding:10px; background:var(--marquee); color:#fff; border:0; font-family:var(--font-ui); font-weight:700; text-transform:uppercase; cursor:pointer; border-radius:var(--radius); }
.newsletter-widget button:hover{ background:var(--marquee-dk); }
.social-widget{ display:flex; gap:10px; flex-wrap:wrap; }
.social-widget a{ font-family:var(--font-ui); font-size:12px; border:1px solid var(--ink); padding:8px 12px; border-radius:var(--radius); }
.social-widget a:hover{ background:var(--ink); color:var(--gold); }
.tagcloud a{ display:inline-block; margin:3px; padding:5px 10px; background:var(--paper-dim); border-radius:20px; font-family:var(--font-ui); font-size:12px !important; }

/* =========================================================
   8. SINGLE POST / ARTICLE
   ========================================================= */
.article-header{ margin-bottom:22px; }
.breadcrumbs{ font-family:var(--font-ui); font-size:12px; color:var(--ash); margin-bottom:14px; }
.breadcrumbs a{ color:var(--ash); }
.breadcrumbs a:hover{ color:var(--marquee); }
.article-header .post-cat{ display:inline-block; background:var(--marquee); color:#fff; font-family:var(--font-ui); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:5px 10px; border-radius:2px; margin-bottom:12px; }
.article-header h1{ font-size:clamp(28px,4.5vw,44px); }
.article-excerpt{ font-size:19px; color:var(--ash); font-family:var(--font-body); font-style:italic; }
.article-byline{ display:flex; align-items:center; gap:12px; font-family:var(--font-ui); font-size:12.5px; color:var(--ash); margin-top:16px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap; }
.article-byline img{ width:34px; height:34px; border-radius:50%; }
.article-featured-img{ margin:22px 0; }
.article-featured-img figcaption{ font-family:var(--font-ui); font-size:12px; color:var(--ash); padding-top:8px; }

.entry-content{ font-size:18px; }
.entry-content h2{ font-size:26px; text-transform:none; margin-top:1.6em; }
.entry-content h3{ font-size:21px; text-transform:none; margin-top:1.4em; }
.entry-content p{ margin-bottom:1.3em; }
.entry-content a{ color:var(--marquee-dk); text-decoration:underline; text-underline-offset:2px; }
.entry-content blockquote{ border-left:4px solid var(--gold); margin:1.6em 0; padding:.4em 0 .4em 1.2em; font-style:italic; color:var(--ash); font-size:20px; }
.entry-content img{ border-radius:var(--radius); }
.entry-content figure{ margin:1.6em 0; }
.entry-content .wp-caption-text, .entry-content figcaption{ font-family:var(--font-ui); font-size:12px; color:var(--ash); margin-top:6px; }
.in-content-ad{ margin:2em 0; }

.tags-row{ margin:28px 0; display:flex; flex-wrap:wrap; gap:8px; }
.tags-row a{ font-family:var(--font-ui); font-size:12px; background:var(--paper-dim); padding:6px 12px; border-radius:20px; }
.share-row{ display:flex; gap:10px; align-items:center; margin:22px 0; font-family:var(--font-ui); font-size:12px; flex-wrap:wrap; }
.share-row a{ border:1px solid var(--ink); padding:8px 14px; border-radius:var(--radius); text-transform:uppercase; letter-spacing:.5px; }
.share-row a:hover{ background:var(--ink); color:var(--gold); }

.author-box{ display:flex; gap:16px; background:var(--paper-dim); border-radius:var(--radius); padding:20px; margin:30px 0; }
.author-box img{ width:64px; height:64px; border-radius:50%; flex:0 0 auto; }
.author-box h3{ font-size:16px; text-transform:none; margin-bottom:4px; }
.author-box p{ font-size:14px; color:var(--ash); margin-bottom:0; }

.related-posts{ margin-top:40px; }

/* =========================================================
   9. COMMENTS
   ========================================================= */
.comments-area{ margin-top:44px; }
.comment-list{ display:flex; flex-direction:column; gap:18px; }
.comment-body{ border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.comment-author{ font-family:var(--font-ui); font-weight:700; font-size:13px; }
.comment-meta{ font-family:var(--font-ui); font-size:11px; color:var(--ash-lt); margin-bottom:8px; }
.comment-respond input, .comment-respond textarea{ width:100%; padding:10px; border:1px solid var(--line); font-family:var(--font-body); margin-bottom:12px; border-radius:var(--radius); }
.comment-respond .form-submit input{ width:auto; background:var(--ink); color:var(--gold); border:0; padding:10px 22px; font-family:var(--font-ui); text-transform:uppercase; cursor:pointer; }

/* =========================================================
   10. FOOTER
   ========================================================= */
.site-footer{ background:var(--ink); color:var(--ash-lt); margin-top:50px; }
.footer-top{ padding:44px 0 30px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; border-bottom:1px solid var(--line-dark); }
.footer-top h4{ color:var(--paper); font-size:15px; margin-bottom:14px; }
.footer-top p{ font-size:14px; }
.footer-top ul li{ margin-bottom:8px; }
.footer-top a{ color:var(--ash-lt); font-size:14px; }
.footer-top a:hover{ color:var(--gold); }
.footer-logo{ font-family:var(--font-display); font-size:26px; color:var(--paper); margin-bottom:10px; }
.footer-logo .accent{ color:var(--marquee); }
.footer-bottom{ padding:18px 0; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-ui); font-size:12px; flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:var(--ash-lt); }
.footer-ad{ padding:20px 0; text-align:center; background:var(--ink-soft); }

/* =========================================================
   11. RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; }
  .layout{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .primary-nav{ display:none; }
  .nav-toggle{ display:inline-block; }
  .header-search input[type="search"]{ width:110px; }
}
@media (max-width:640px){
  .post-grid{ grid-template-columns:1fr; }
  .post-grid--list .card{ flex-direction:column; }
  .post-grid--list .card__media{ width:100%; }
  .footer-top{ grid-template-columns:1fr; }
  .hero__side .card{ flex-direction:column; }
  .hero__side .card__media{ width:100%; flex:none; }
}

/* Mobile off-canvas nav (JS toggles .is-open) */
.mobile-nav{ position:fixed; inset:0 0 0 auto; width:min(320px,85%); background:var(--ink); color:var(--paper); transform:translateX(100%); transition:transform .3s ease; z-index:1000; padding:24px; overflow-y:auto; }
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav a{ color:var(--paper); font-family:var(--font-ui); text-transform:uppercase; }
.mobile-nav ul li{ border-bottom:1px solid var(--line-dark); }
.mobile-nav ul li a{ display:block; padding:14px 0; }
.mobile-nav__close{ background:none; border:0; color:var(--paper); font-size:22px; cursor:pointer; float:right; }
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:999; }
.overlay.is-open{ opacity:1; pointer-events:auto; }