/*
Theme Name: StarsBuzzHub
Theme URI: https://starsbuzzhub.com
Author: StarsBuzzHub Editorial Team
Author URI: https://starsbuzzhub.com
Description: The Premier Pulse of Hollywood, Glamour & Celebrity Culture. A high-fashion, ultra-fast, production-ready WordPress magazine theme.
Version: 1.1.8
Tested up to: 6.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starsbuzz
Tags: entertainment, news, blog, two-columns, full-width-template, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   CSS CUSTOM PROPERTIES (OKLCH PALETTE & SRGB FALLBACKS)
   ========================================================================== */
:root {
  --radius: 0.375rem;
  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* sRGB Fallbacks */
  --background: #fbfbf9;
  --foreground: #1c202b;
  --card: #ffffff;
  --card-foreground: #1c202b;
  --popover: #ffffff;
  --popover-foreground: #1c202b;
  --primary: #1c202b;
  --primary-foreground: #fbfbf9;
  --secondary: #f3f3f0;
  --secondary-foreground: #222634;
  --muted: #f3f3f0;
  --muted-foreground: #6c7385;
  --accent: #eae8dd;
  --accent-foreground: #222634;
  --destructive: #d42232;
  --destructive-foreground: #ffffff;
  --border: #e4e3dd;
  --input: #e4e3dd;
  --ring: #c5a045;
  --gold: #a67c1e;
  --gold-soft: #d2a94b;
  --crimson: #d42232;
  --crimson-foreground: #ffffff;
  --obsidian: #181d27;
  --obsidian-foreground: #f5f4ed;
}

@supports (color: oklch(0 0 0)) {
  :root {
    --background: oklch(0.985 0.008 85);
    --foreground: oklch(0.18 0.025 265);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.18 0.025 265);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.18 0.025 265);
    --primary: oklch(0.18 0.025 265);
    --primary-foreground: oklch(0.97 0.01 85);
    --secondary: oklch(0.95 0.015 85);
    --secondary-foreground: oklch(0.2 0.025 265);
    --muted: oklch(0.95 0.012 85);
    --muted-foreground: oklch(0.48 0.02 265);
    --accent: oklch(0.93 0.04 90);
    --accent-foreground: oklch(0.2 0.025 265);
    --destructive: oklch(0.59 0.22 15);
    --destructive-foreground: oklch(0.98 0 0);
    --border: oklch(0.9 0.015 85);
    --input: oklch(0.9 0.015 85);
    --ring: oklch(0.75 0.13 88);
    --gold: oklch(0.62 0.12 85);
    --gold-soft: oklch(0.8 0.12 90);
    --crimson: oklch(0.59 0.22 15);
    --crimson-foreground: oklch(0.98 0 0);
    --obsidian: oklch(0.17 0.025 265);
    --obsidian-foreground: oklch(0.96 0.015 85);
  }
}

.dark, [data-theme="dark"] {
  --background: #151923;
  --foreground: #f3f3f0;
  --card: #1d2230;
  --card-foreground: #f3f3f0;
  --popover: #1d2230;
  --popover-foreground: #f3f3f0;
  --primary: #d2a94b;
  --primary-foreground: #151923;
  --secondary: #242a3a;
  --secondary-foreground: #f3f3f0;
  --muted: #242a3a;
  --muted-foreground: #a6abb8;
  --accent: #2b3245;
  --accent-foreground: #f3f3f0;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.15);
  --ring: #d2a94b;
  --gold: #d2a94b;
  --gold-soft: #e0ba5c;
  --obsidian: #0d1017;
  --obsidian-foreground: #f5f4ed;
}

@supports (color: oklch(0 0 0)) {
  .dark, [data-theme="dark"] {
    --background: oklch(0.15 0.022 265);
    --foreground: oklch(0.95 0.015 85);
    --card: oklch(0.2 0.025 265);
    --card-foreground: oklch(0.95 0.015 85);
    --popover: oklch(0.2 0.025 265);
    --popover-foreground: oklch(0.95 0.015 85);
    --primary: oklch(0.8 0.12 90);
    --primary-foreground: oklch(0.15 0.022 265);
    --secondary: oklch(0.24 0.025 265);
    --secondary-foreground: oklch(0.95 0.015 85);
    --muted: oklch(0.24 0.025 265);
    --muted-foreground: oklch(0.7 0.02 85);
    --accent: oklch(0.28 0.03 265);
    --accent-foreground: oklch(0.95 0.015 85);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.8 0.12 90);
    --gold: oklch(0.8 0.12 90);
    --gold-soft: oklch(0.85 0.11 90);
    --obsidian: oklch(0.11 0.02 265);
  }
}

/* ==========================================================================
   FOOTER BRAND LOGO (WHITE ON DARK OBSIDIAN)
   ========================================================================== */
.site-footer .site-logo,
.site-footer .site-logo span,
.site-footer .site-logo .logo-text {
  color: #ffffff !important;
}

.site-footer .site-logo .logo-spark {
  color: var(--gold) !important;
}

.site-footer .site-logo-badge {
  color: var(--gold) !important;
  border-color: rgba(212, 175, 55, 0.6) !important;
}

/* ==========================================================================
   HIGH CONTRAST PILLS, TAGS & FLOATING BADGES (DARK & LIGHT MODES)
   ========================================================================== */
.cover-badge-exclusive,
.bookmark-icon-btn,
.scoop-pill,
.single-star-trend-pill {
  transition: all 0.25s ease;
}

.dark .cover-badge-exclusive,
[data-theme="dark"] .cover-badge-exclusive {
  background-color: rgba(18, 22, 32, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.dark .bookmark-icon-btn,
[data-theme="dark"] .bookmark-icon-btn {
  background: rgba(18, 22, 32, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.dark .bookmark-icon-btn.is-active,
[data-theme="dark"] .bookmark-icon-btn.is-active,
.dark .bookmark-icon-btn:hover,
[data-theme="dark"] .bookmark-icon-btn:hover {
  color: var(--gold-soft) !important;
  border-color: var(--gold-soft) !important;
  background: rgba(26, 32, 46, 0.95) !important;
}

.dark .scoop-pill,
[data-theme="dark"] .scoop-pill {
  background-color: rgba(18, 22, 32, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: var(--gold-soft) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.dark .article-card-badge,
[data-theme="dark"] .article-card-badge {
  background-color: rgba(15, 18, 26, 0.88) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent) !important;
  color: #ffffff !important;
}

.dark .single-star-trend-pill,
[data-theme="dark"] .single-star-trend-pill {
  background: rgba(18, 22, 32, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: var(--gold-soft) !important;
}

.dark .search-pill-btn,
[data-theme="dark"] .search-pill-btn {
  background-color: rgba(29, 34, 48, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f3f3f0 !important;
}

.dark .search-pill-btn.is-active,
[data-theme="dark"] .search-pill-btn.is-active {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #0e121a !important;
}

/* ==========================================================================
   MOBILE HEADER NAVBAR RULES (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
  .header-main-row {
    height: 3.75rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    gap: 0.5rem !important;
  }

  .site-logo {
    font-size: 1.15rem !important;
    letter-spacing: 0.08em !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
    max-width: calc(100vw - 110px) !important;
  }

  .site-logo .site-logo-badge {
    font-size: 0.55rem !important;
    padding: 0.1rem 0.4rem !important;
    letter-spacing: 0.16em !important;
  }

  .hamburger-btn {
    display: inline-flex !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
    min-width: 2.35rem !important;
    min-height: 2.35rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  .search-trigger-btn {
    width: 2.35rem !important;
    height: 2.35rem !important;
    min-width: 2.35rem !important;
    min-height: 2.35rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .search-btn-text,
  .search-trigger-btn .search-btn-text,
  .search-trigger-btn span,
  .search-trigger-btn .kbd-badge {
    display: none !important;
  }
}