/*
 * Theme Name: PolyScope Child
 * Theme URI: https://polyscope.pro
 * Description: Custom dark theme for PolyScope crypto news
 * Version: 2.0.0
 * Author: PolyScope
 * Template: twentytwentyfive
 * Text Domain: polyscope-child
 * Domain Path: /languages
 */

/* ============================================================================
   DESIGN SYSTEM - PALETTE (oklch)
   ========================================================================== */
:root {
  --ps-bg-dark: oklch(0.17 0.012 258);
  --ps-surface: oklch(0.195 0.012 258);
  --ps-border: oklch(1 0 0 / 0.08);
  --ps-text: oklch(0.94 0.006 258);
  --ps-text-muted: oklch(0.7 0.01 258);
  --ps-accent: oklch(0.62 0.17 250);
  --ps-accent-light: oklch(0.72 0.16 250);
}

/* ============================================================================
   BASE STYLES
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--ps-bg-dark);
  color: var(--ps-text);
  line-height: 1.6;
  font-size: 14px;
}

a {
  color: var(--ps-accent-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: oklch(0.8 0.14 250);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

h1 { font-size: 30px; line-height: 1.2; }
h2 { font-size: 19px; line-height: 1.35; }
h3 { font-size: 15px; line-height: 1.35; }

/* ============================================================================
   CRYPTO TICKER (Sticky Top Bar)
   ========================================================================== */
.ps-ticker {
  height: 32px;
  background-color: var(--ps-surface);
  border-bottom: 1px solid var(--ps-border);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.ps-ticker-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  white-space: nowrap;
  overflow-x: auto;
  padding: 0 16px;
  gap: 24px;
}

.ps-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.ps-ticker-coin {
  color: var(--ps-text-muted);
  text-transform: uppercase;
}

.ps-ticker-price {
  color: var(--ps-text);
  font-weight: 600;
}

.ps-ticker-change {
  font-weight: 600;
  padding: 0 4px;
}

.ps-ticker-change.up {
  color: #22c55e;
}

.ps-ticker-change.down {
  color: #ef4444;
}

.ps-ticker-separator {
  width: 1px;
  height: 16px;
  background-color: var(--ps-border);
}

/* ============================================================================
   NAVIGATION BAR
   ========================================================================== */
.ps-navbar {
  height: 68px;
  border-bottom: 1px solid var(--ps-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 32px;
  z-index: 999;
}

/* backdrop-filter lives on a ::before layer, not on .ps-navbar itself.
   A filter/backdrop-filter on an element makes it a new containing block for
   any position:fixed descendant — which was trapping the full-screen mobile
   nav overlay (a fixed-position descendant of .ps-navbar) inside the 68px
   navbar box instead of covering the viewport. Moving the blur to a
   non-ancestor pseudo-element keeps the glass effect without that side effect. */
.ps-navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ps-bg-dark);
  opacity: 0.9;
  backdrop-filter: blur(10px);
  z-index: -1;
}

.ps-navbar-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ps-text);
  text-decoration: none;
}

.ps-navbar-logo-accent {
  color: var(--ps-accent-light);
}

.ps-navbar .wp-block-navigation {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-direction: row;
  list-style: none;
}

.ps-navbar .wp-block-navigation__container,
.ps-navbar .wp-block-navigation ul {
  display: flex !important;
  flex-direction: row !important;
  gap: 32px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ps-navbar .wp-block-navigation li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ps-navbar .wp-block-navigation-item__content {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ps-text-muted);
  transition: color 0.2s ease;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
}

.ps-navbar .wp-block-navigation-item__content:hover {
  color: var(--ps-text);
}

.ps-navbar .current-menu-item .wp-block-navigation-item__content {
  color: var(--ps-text);
  border-bottom: 2px solid var(--ps-accent-light);
}

/* Classic (non-FSE) navbar markup — used by header.php on single post,
   archive, and other classic-template pages. Mirrors the FSE nav look above
   so both navbars look and behave the same regardless of which template
   rendered the page. */
.ps-navbar .ps-navbar-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.ps-navbar-menu li {
  list-style: none !important;
  margin: 0;
}

.ps-navbar-link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ps-text-muted);
  transition: color 0.2s ease;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
}

.ps-navbar-link:hover,
.ps-navbar-link.active {
  color: var(--ps-text);
}

/* Mobile hamburger */
.ps-hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 1px solid var(--ps-border);
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}

/* Home page renders the hamburger as a Gutenberg Buttons block
   (<div class="wp-block-button ps-hamburger"><button class="wp-block-button__link">),
   which ships its own background/padding/border-radius/pill-shape styles.
   Strip those so the button is just a flex host for the 3 icon spans,
   identical to the plain <button class="ps-hamburger"> markup single/archive
   pages use. */
.ps-hamburger .wp-block-button__link {
  all: unset;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
}

.ps-hamburger span {
  width: 16px;
  height: 2px;
  background-color: var(--ps-text);
  transition: all 0.3s ease;
  display: block;
  flex-shrink: 0;
}

.ps-hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.ps-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.ps-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* ============================================================================
   HOME LAYOUT - 3 COLUMN
   ========================================================================== */
.ps-home-main {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 40px 24px 100px !important;
}

.ps-layout-container {
  display: grid !important;
  grid-template-columns: minmax(0, 270px) minmax(0, 1.6fr) minmax(0, 300px) !important;
  gap: 40px !important;
  align-items: start !important;
}

/* LEFT SIDEBAR - LATEST */
.ps-latest-sidebar {
  display: flex !important;
  flex-direction: column !important;
}

.ps-section-title {
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  margin: 0 0 16px !important;
  color: var(--ps-text) !important;
}

.ps-latest-list {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ps-latest-list,
.ps-latest-list li,
.ps-latest-list ul {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
}

.ps-latest-list li::before,
.ps-latest-list li::marker {
  display: none !important;
}

.ps-latest-item {
  display: block !important;
  padding: 16px 0 !important;
  border-top: 1px solid var(--ps-border) !important;
  margin-left: 0 !important;
}

.ps-latest-item:last-child {
  border-bottom: 1px solid var(--ps-border) !important;
}

.ps-latest-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 0 8px !important;
  color: var(--ps-text) !important;
}

.ps-latest-title a {
  color: var(--ps-text) !important;
  text-decoration: none;
}

.ps-latest-title a:hover {
  color: var(--ps-accent-light) !important;
}

.ps-latest-meta {
  font-size: 11.5px !important;
  color: var(--ps-text-muted) !important;
  white-space: nowrap !important;
}

.ps-latest-cat {
  color: var(--ps-accent-light) !important;
  font-weight: 700 !important;
  text-indent: 0 !important;
  list-style-position: inside;
  list-style: none !important;
  list-style-type: none !important;
}

.ps-latest-cat::marker,
.ps-latest-cat li::marker,
.ps-latest-cat li::before {
  display: none !important;
  content: '' !important;
}

/* Kill list styles on category/term blocks */
.taxonomy-category,
.wp-block-post-terms {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
}

.taxonomy-category li,
.wp-block-post-terms li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide any bullet pseudo-elements */
.wp-block-post-terms::before,
.wp-block-post-terms::after,
.taxonomy-category::before,
.taxonomy-category::after {
  content: none !important;
  display: none !important;
}

/* Ensure children have no list markers */
.wp-block-post-terms a,
.wp-block-post-terms span,
.wp-block-post-terms li {
  list-style: none !important;
  list-style-type: none !important;
  display: inline !important;
}

.wp-block-post-terms a::before,
.wp-block-post-terms a::marker {
  display: none !important;
  content: '' !important;
}

/* Override any WordPress inline styles */
.wp-block-post-terms[style] {
  list-style-type: none !important;
}

.ps-latest-sep {
  display: none !important;
}

/* CENTER - HERO SECTION */
.ps-hero-section {
  display: flex !important;
  flex-direction: column !important;
}

.ps-hero-query,
.ps-hero-post {
  display: block !important;
}

.ps-hero-post {
  margin-bottom: 24px !important;
}

.ps-hero-post img {
  width: 100% !important;
  height: 400px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  margin-bottom: 24px !important;
  display: block !important;
}

.ps-hero-content {
  display: block !important;
}

.ps-hero-cat {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--ps-accent-light) !important;
  text-transform: uppercase !important;
}

.ps-hero-title {
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 10px 0 14px !important;
  letter-spacing: -0.015em !important;
  color: var(--ps-text) !important;
}

.ps-hero-title a {
  color: var(--ps-text) !important;
  text-decoration: none;
}

.ps-hero-title a:hover {
  color: var(--ps-accent-light) !important;
}

.ps-hero-excerpt {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--ps-text-muted) !important;
  margin: 0 0 14px !important;
}

.ps-hero-meta {
  font-size: 13px !important;
  color: var(--ps-text-muted) !important;
}

.ps-hero-author {
  color: var(--ps-text-muted) !important;
}

.ps-hero-divider {
  border: none !important;
  border-top: 1px solid var(--ps-border) !important;
  margin: 36px 0 24px !important;
}

.ps-featured-post {
  display: block !important;
  padding-bottom: 24px !important;
}

.ps-featured-title {
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 8px !important;
  color: var(--ps-text) !important;
}

.ps-featured-title a {
  color: var(--ps-text) !important;
  text-decoration: none;
}

.ps-featured-title a:hover {
  color: var(--ps-accent-light) !important;
}

.ps-featured-meta {
  font-size: 12.5px !important;
  color: var(--ps-text-muted) !important;
}

.ps-featured-cat {
  color: var(--ps-accent-light) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.ps-featured-sep {
  display: none !important;
}

/* RIGHT SIDEBAR */
.ps-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}

.ps-guide-card {
  border: 1px solid var(--ps-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: var(--ps-surface) !important;
}

.ps-guide-card img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  display: block !important;
}

.ps-guide-content {
  padding: 16px !important;
}

.ps-guide-cat {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--ps-accent-light) !important;
  text-transform: uppercase !important;
}

.ps-guide-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 8px 0 0 !important;
  color: var(--ps-text) !important;
}

.ps-guide-title a {
  color: var(--ps-text) !important;
  text-decoration: none;
}

.ps-guide-title a:hover {
  color: var(--ps-accent-light) !important;
}

/* TOP MARKETS */
.ps-top-markets {
  display: flex !important;
  flex-direction: column !important;
}

.ps-markets-title {
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  margin: 28px 0 12px !important;
  color: var(--ps-text) !important;
}

.ps-market-item {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13.5px !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
}

.ps-market-item:not(:last-child) {
  margin-bottom: 12px !important;
}

.ps-market-label {
  color: oklch(0.85 0.006 258) !important;
  margin: 0 !important;
}

.ps-market-value {
  font-weight: 700 !important;
  color: var(--ps-text) !important;
  margin: 0 !important;
}

/* ============================================================================
   FOOTER
   ========================================================================== */
footer {
  border-top: 1px solid var(--ps-border) !important;
  padding: 32px 24px !important;
  text-align: center !important;
}

footer p {
  font-size: 13px !important;
  color: oklch(0.5 0.01 258) !important;
  margin: 0 !important;
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1150px) {
  .ps-layout-container {
    grid-template-columns: 1fr !important;
  }

  .ps-sidebar {
    order: 3 !important;
  }
}

@media (max-width: 860px) {
  /* Keep .wp-block-navigation itself in the DOM and flex — we only hide its
     native trigger button (replaced visually by .ps-hamburger) and its
     container while closed. nav.js proxies clicks to the native button so
     WordPress's own interactivity script remains the single source of truth
     for open/close state — no duplicate logic, no conflicting state. */
  .ps-navbar .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .ps-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .ps-navbar .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--ps-bg-dark) !important;
    color: var(--ps-text) !important;
  }

  .ps-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: flex-start !important;
    list-style: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
  }

  .ps-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    list-style: none !important;
    margin: 0 !important;
  }

  /* Classic navbar (header.php, single/archive pages) — no WP Interactivity
     API here, so nav.js toggles this .is-open class directly. */
  .ps-navbar .ps-navbar-menu {
    display: none !important;
  }

  .ps-navbar .ps-navbar-menu.is-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--ps-bg-dark) !important;
    padding: 32px 24px !important;
    margin: 0 !important;
    z-index: 998 !important;
  }

  .ps-navbar .ps-navbar-menu.is-open .ps-navbar-link {
    font-size: 18px;
  }

  .ps-hamburger {
    display: flex !important;
  }

  .ps-layout-container {
    grid-template-columns: 1fr !important;
  }

  .ps-hero-post img {
    height: 240px !important;
  }
}

@media (max-width: 480px) {
  .ps-navbar {
    padding: 0 16px !important;
    height: 60px !important;
  }

  .ps-hero-title {
    font-size: 22px !important;
  }

  .ps-featured-title {
    font-size: 16px !important;
  }
}

/* ============================================================================
   UTILITIES & CLEANUP
   ========================================================================== */
.wp-block-query {
  all: unset !important;
  display: contents !important;
}

.wp-block-query > * {
  all: revert !important;
}

/* Remove list markers from all post-template blocks site-wide (does not affect
   navbar navigation, which uses wp-block-navigation__container / -item classes) */
.wp-block-post-template,
.wp-block-post-template li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Kill marker pseudo-element */
.wp-block-post-template li::before,
.wp-block-post-template li::marker,
.wp-block-post-template::marker {
  display: none !important;
  content: '' !important;
}

/* Additional specificity for WordPress blocks */
.wp-block-post-template li {
  margin: 0 !important;
}

/* Override any inherited list styles */
.ps-latest-list li,
.ps-hero-query li,
.ps-featured-post li {
  list-style: none !important;
  list-style-type: none !important;
}

/* Hide Sample Page */
.wp-block-pages-list__item {
  display: none !important;
}

.wp-block-page-list {
  display: none !important;
}

a[href*="sample-page"] {
  display: none !important;
}

/* Hide blog heading on archive */
.polyscope-archive h1.wp-block-heading {
  display: none !important;
}

/* Single post styles */
.ps-post-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 24px;
  letter-spacing: -0.015em;
  color: var(--ps-text);
}