/*
Theme Name: Market Pulse
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: Custom theme converted from the Market Pulse HTML/Tailwind reference build. Preserves the exact original design (fonts, colors, spacing, layout) while pulling content dynamically from WordPress posts/categories.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: marketpulse
*/

/* =========================================================
   Everything below is the ORIGINAL custom-styles.css,
   unchanged, so the design matches the reference pixel-for-pixel.
   ========================================================= */

/* =========================================================
   MARKET PULSE — Additional CSS (COMPREHENSIVE v2)
   Paste this ENTIRE file into:
   WordPress Admin → Appearance → Customize → Additional CSS
   (replace whatever was there before — this supersedes it)

   Goal: match index.html's font, color, spacing and hierarchy
   as closely as Elementor's own HTML structure allows.
   Sections use the css_classes already baked into the imported
   template (hero-section, latest-section, topic-block, etc.)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&display=swap');

:root{
  --brand-green:#00A552;
  --ink:#0A0A0A;
  --light-gray:#F5F5F5;
  --mid-gray:#6B6B6B;
  --accent-yellow:#F5E400;
  --accent-purple:#5B4FE0;
  --font-head:"Inter Tight","Inter",sans-serif;
  --font-body:"Inter",sans-serif;
}

/* ---------- 1. BASE ---------- */
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:#ffffff;
}
a{ text-decoration:none; }

/* ---------- 2. GLOBAL ELEMENTOR TYPOGRAPHY ----------
   Forces every Heading widget + Text Editor paragraph on the
   page to use the same two-font system as the original design,
   regardless of what Site Settings → Global Fonts has (or hasn't)
   been set to. */
.elementor-widget-heading .elementor-heading-title{
  font-family:var(--font-head) !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  letter-spacing:-0.01em;
}
.elementor-widget-text-editor .elementor-text-editor,
.elementor-widget-text-editor .elementor-text-editor p{
  font-family:var(--font-body) !important;
  font-size:14px;
  line-height:1.55;
  margin:0 0 4px 0;
}
.elementor-widget-text-editor .elementor-text-editor p:last-child{ margin-bottom:0; }
.elementor-icon-list-text{ font-family:var(--font-body) !important; }

/* ---------- 3. PAGE / SECTION RHYTHM ----------
   Mirrors max-w-[1280px] mx-auto px-5 md:px-8 py-8/10 from index.html.
   If you already set Site Settings → Layout → Content Width to
   1280px (Step 0.4 of the build guide) these are just a safety net. */
.elementor-section .elementor-container{ max-width:1280px; }

.hero-section,
.latest-section,
.market-movers-section,
.topic-block,
.in-brief-section,
.podcasts-section{
  padding-top:40px;
  padding-bottom:40px;
}
.newsletters-section,
.stock-market-block{
  padding-top:48px;
  padding-bottom:48px;
}
.site-header{ padding-top:0; padding-bottom:0; }
.site-footer{ padding-top:48px; padding-bottom:24px; }

/* Column gap inside rows — Elementor rows are flex, so this
   approximates Tailwind's gap-6 / gap-8 / gap-10. */
.hero-section .elementor-row,
.latest-section .elementor-row,
.topic-block .elementor-row,
.market-movers-section .elementor-row,
.newsletters-section .elementor-row,
.podcasts-section .elementor-row,
.stock-market-block .elementor-row{
  column-gap:24px;
  row-gap:24px;
}

/* ---------- 4. HEADER / NAV ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:#ffffff;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.site-header .elementor-row{ align-items:center; min-height:64px; }
.header-nav .elementor-icon-list-items{ flex-wrap:wrap; gap:4px 20px; }
.header-icons .elementor-icon-list-items{ gap:0 12px; justify-content:flex-end; }
.header-nav .elementor-icon-list-icon,
.footer-links .elementor-icon-list-icon{ display:none; }
.header-nav .elementor-icon-list-text,
.footer-links .elementor-icon-list-text{ font-weight:600; font-size:14px; }
.header-nav .elementor-icon-list-item:hover .elementor-icon-list-text{ color:var(--brand-green); }

/* ---------- 5. HERO ---------- */
.hero-feature{ position:relative; }
.hero-image img{
  border-radius:2px;
  width:100%;
  height:420px;
  object-fit:cover;
}
.hero-feature .elementor-heading-title{
  color:#ffffff;
  font-size:38px !important;
}
.hero-sidebar .elementor-heading-title{ font-size:18px !important; }
.top-headline-row .elementor-column img{ border-radius:2px; }

/* ---------- 6. CATEGORY CHIPS (used inline everywhere) ---------- */
.chip{
  display:inline-block;
  font-family:var(--font-head);
  font-weight:800;
  font-size:11px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#fff;
  padding:4px 8px;
  border-radius:3px;
  line-height:1;
}
.chip-green{background:var(--brand-green);}
.chip-gold{background:#C99A2E;}
.chip-teal{background:#1F8A8C;}
.chip-terracotta{background:#B5622C;}
.chip-navy{background:#123A6B;}
.chip-purple{background:var(--accent-purple);}
.chip-red{background:#C0392B;}
.chip-charcoal{background:#3A3A3A;}
.chip-image-wrap{ position:relative; }
.chip-image-wrap img{ border-radius:2px; width:100%; object-fit:cover; }

/* ---------- 7. BUTTONS ---------- */
.btn-brand .elementor-button,
.btn-brand.elementor-button{
  background:var(--brand-green) !important;
  color:#fff !important;
  font-weight:700;
  font-size:14px;
  border-radius:3px;
}
.btn-pill .elementor-button,
.btn-pill.elementor-button{
  background:var(--brand-green) !important;
  color:#fff !important;
  font-weight:700;
  font-size:13px;
  border-radius:999px;
  padding:8px 18px;
}
.btn-seemore .elementor-button,
.btn-seemore.elementor-button{
  background:transparent !important;
  color:var(--brand-green) !important;
  font-weight:600;
  font-size:14px;
  padding:0;
}

/* ---------- 8. LATEST NEWS SIDEBAR ---------- */
.latest-row .elementor-column img{ border-radius:2px; }
.newsletter-card,
.most-popular-card{
  background:var(--light-gray);
  border-radius:4px;
  padding:20px;
}
.newsletter-card .elementor-heading-title,
.most-popular-card .elementor-heading-title{ font-size:18px !important; }
.rank{
  font-family:var(--font-head);
  font-weight:800;
  font-size:18px;
  color:var(--brand-green);
}
.most-popular-row{ padding:8px 0; border-bottom:1px solid rgba(0,0,0,.08); }
.most-popular-row:last-child{ border-bottom:none; }

/* ---------- 9. MARKET MOVERS ---------- */
.event-card{
  background:var(--light-gray);
  border-radius:4px;
  padding:16px;
}
.event-card .elementor-row{ align-items:center; }
.event-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:4px;
  font-family:var(--font-head);
  font-weight:800;
  font-size:12px;
}

/* ---------- 10. NEWSLETTERS STRIP ---------- */
.newsletters-section{ background:#EAF7EF; }
.newsletter-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:4px;
  font-size:16px;
  margin-bottom:8px;
}

/* ---------- 11. TOPIC BLOCKS (Gold / Crypto / Real Estate / Startups / Tech & AI / Sports / Business) ---------- */
.feature-card img{ border-radius:2px; width:100%; height:260px; object-fit:cover; }
.feature-card .elementor-heading-title{ font-size:20px !important; margin-top:12px; }
.support-col img{ border-radius:2px; width:64px; height:64px; object-fit:cover; }
.support-row .elementor-heading-title{ font-size:15px !important; }
.support-pair .elementor-row{ align-items:flex-start; }

/* ---------- 12. STOCK MARKET SPECIAL BLOCK ---------- */
.stock-market-block{ background:var(--accent-yellow); }
.stock-market-block .elementor-heading-title{ color:var(--ink) !important; }
.stockmarket-feature img{ border-radius:2px; width:100%; height:320px; object-fit:cover; }
.ticker-box{
  background:var(--ink);
  border-radius:4px;
  padding:20px;
}
.ticker-box .elementor-heading-title{
  color:#fff !important;
  font-size:14px !important;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.ticker-row .elementor-row{ align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.ticker-row:last-of-type .elementor-row{ border-bottom:none; }
.ticker-symbol{ font-weight:600; color:rgba(255,255,255,.85); font-size:13px; }
.ticker-price{ font-family:var(--font-head); font-weight:700; color:#fff; font-size:13px; }
.ticker-change{ font-weight:700; font-size:13px; }
.ticker-up{ color:#3DDC84; }
.ticker-down{ color:#FF6B6B; }

/* ---------- 13. IN BRIEF ---------- */
.brief-row{ align-items:center; padding:10px 0; border-bottom:1px solid rgba(0,0,0,.08); }
.brief-row:last-of-type{ border-bottom:none; }
.brief-dot{
  display:inline-block;
  width:10px;height:10px;
  border-radius:2px;
}
.brief-time{ font-size:12px; color:var(--mid-gray); white-space:nowrap; }

/* ---------- 14. PODCASTS ---------- */
.podcast-card .elementor-heading-title{ font-size:16px !important; margin-top:10px; }
.podcast-art{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1/1;
  border-radius:4px;
  font-family:var(--font-head);
  font-weight:800;
  font-size:28px;
}

/* ---------- 15. FOOTER ---------- */
.site-footer{ background:var(--ink); color:#fff; }
.site-footer .elementor-heading-title{ color:rgba(255,255,255,.6) !important; }
.footer-links .elementor-icon-list-text{ color:rgba(255,255,255,.8) !important; }
.footer-copyright p{ color:rgba(255,255,255,.4) !important; font-size:12px; }
.social-icon .elementor-social-icon{
  width:32px !important;height:32px !important;
  border:1px solid rgba(255,255,255,.25);
  background:transparent !important;
}
.social-icon .elementor-social-icon i,
.social-icon .elementor-social-icon svg{ color:#fff; fill:#fff; }
.social-icon .elementor-social-icon:hover{ border-color:var(--brand-green); }

/* ---------- 16. DIVIDER "HEARTBEAT" BARS ---------- */
.divider-wrap{ padding:0 !important; }
.divider-wrap .elementor-divider{ margin:0; }
.divider-green .elementor-divider-separator{ border-color:var(--brand-green) !important; }
.divider-purple .elementor-divider-separator{ border-color:var(--accent-purple) !important; }
.divider-yellow .elementor-divider-separator{ border-color:var(--accent-yellow) !important; }

/* Direct rules for the plain <div class="divider divider-green"> markup this theme
   actually outputs (the rules above only fire inside Elementor's own divider widget
   markup, which this theme doesn't use) */
.divider{
  height:4px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}
.divider.divider-green{ background:var(--brand-green); }
.divider.divider-purple{ background:var(--accent-purple); }
.divider.divider-yellow{ background:var(--accent-yellow); }

/* ---------- 17. BUTTONS — direct rules (plain markup, no Elementor wrapper) ---------- */
button.btn-pill,
a.btn-pill{
  display:inline-block;
  background:var(--brand-green);
  color:#fff;
  font-weight:700;
  font-size:13px;
  border-radius:999px;
  padding:8px 18px;
  border:none;
  cursor:pointer;
  font-family:var(--font-body);
  transition:opacity .2s;
}
button.btn-pill:hover,
a.btn-pill:hover{ opacity:.88; }

button.btn-brand,
a.btn-brand{
  display:inline-block;
  background:var(--brand-green);
  color:#fff;
  font-weight:700;
  font-size:14px;
  border-radius:3px;
  padding:10px 16px;
  border:none;
  cursor:pointer;
  font-family:var(--font-body);
  text-align:center;
  transition:opacity .2s;
}
button.btn-brand:hover,
a.btn-brand:hover{ opacity:.88; }

/* Event card container needs an explicit layout since Set Alert button
   should sit below the icon+title row, matching the original design */
.event-card{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width:767px){
  .event-card .elementor-row{ flex-direction:column; align-items:flex-start; gap:12px; }
  .hero-image img{ height:260px; }
  .stockmarket-feature img{ height:220px; }
}

/* =========================================================
   ADDED FOR WORDPRESS INTEGRATION (not in the original reference)
   ========================================================= */

/* Push the sticky header down when the WP admin bar is showing */
body.admin-bar #site-header{ top:32px; }
@media (max-width:782px){
  body.admin-bar #site-header{ top:46px; }
}

/* Required by WordPress core for accessibility (skip links etc.) */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0;
  position:absolute!important; width:1px; word-wrap:normal!important;
}
.skip-link{ position:absolute; left:-9999px; top:0; z-index:9999; background:#fff; color:#0A0A0A; padding:10px 16px; }
.skip-link:focus{ left:10px; top:10px; }

/* Basic single-post / blog content typography (post body, comments) —
   kept minimal and in the same font system as the rest of the site */
.post-content{
  max-width:760px;
  margin:0 auto;
  font-size:16px;
  line-height:1.7;
}
.post-content p{ margin-bottom:1.2em; }
.post-content h2,.post-content h3{ font-family:var(--font-head); font-weight:800; margin:1.4em 0 .5em; }
.post-content img{ border-radius:2px; max-width:100%; height:auto; }
.post-content a{ color:var(--brand-green); text-decoration:underline; }

.empty-topic-note{ color:var(--mid-gray); font-size:14px; padding:20px 0; }