/**
 * YOYAKU NEON SYSTEM - Custom Theme Overrides
 *
 * @package     yoyaku-theme
 * @author      Benjamin Belaga <ben@yoyaku.fr>
 * @version     1.4.0
 * @since       2025-12-17
 * @link        https://github.com/benjaminbelaga/yoyaku-theme
 *
 * DESCRIPTION:
 * Typography and color overrides for YOYAKU.IO
 * Loaded after main.css with priority 999
 *
 * CHANGELOG:
 * v1.4.0 (2025-12-17)
 *   - IMPROVED: Text scroll uses MASK system (no ellipsis)
 *   - Text stays inside card, slides under overflow mask
 *   - Requires yoyaku-text-scroll.js v2
 *
 * v1.3.0 (2025-12-17)
 *   - NEW: Marquee scroll on hover for truncated text
 *
 * v1.2.0 (2025-12-17)
 *   - Top Charts numbers (sidebar) now ORANGE via li::before
 *   - Artist + Label on product cards now WHITE
 *   - Hover on Artist/Label now BLUE
 *
 * v1.1.0 (2025-12-17)
 *   - Color system: Blue #1E90FF + Orange #FF8C00
 *   - Player uses blue (no more yellow override)
 *
 * v1.0.0 (2025-12-17)
 *   - Initial: Typography product cards + menus
 *
 * COLOR SYSTEM:
 *   Primary (player, links):     #1E90FF (Blue)
 *   Secondary (Top Charts #):    #FF8C00 (Orange)
 *   Text:                        #EDEFF5
 *   Muted:                       #A8ADBB
 *
 * FONTS:
 *   Product cards:               Schibsted Grotesk
 *   Menus, widget titles:        Spline Sans Mono
 *
 * MIGRATION TO PRODUCTION:
 * 1. Copy this file to: /wp-content/themes/yoyaku/yoyaku-neon-system.css
 * 2. Ensure functions.php enqueues it (should already be done)
 * 3. Purge all caches (WP + Breeze + Cloudflare)
 */

/* ===========================================
   FONTS IMPORT
   =========================================== */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@300;400;500;600;700&display=swap');


/* ===========================================
   SECTION 1: PRODUCT CARDS TYPOGRAPHY
   Target: WooCommerce product grid items
   =========================================== */

/* Title - 12px medium */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.products .woocommerce-loop-product__title,
h2.woocommerce-loop-product__title {
  font-family: "Schibsted Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

/* Artist - 14px BOLD */
.products .product-artists,
.product-artists {
  font-family: "Schibsted Grotesk", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* SKU | Label - 12px (SKU normal, Label bold) */
.products .product-labels,
.product-labels {
  font-family: "Schibsted Grotesk", sans-serif !important;
  font-size: 12px !important;
}

.product-labels .product-sku {
  font-weight: 400 !important;
}

.product-labels .product-label-name {
  font-weight: 700 !important;
}

/* Genres | Format - 12px */
.products .product-features,
.product-features {
  font-family: "Schibsted Grotesk", sans-serif !important;
  font-size: 12px !important;
}

/* Price - 12px */
.products .price {
  font-family: "Schibsted Grotesk", sans-serif !important;
  font-size: 12px !important;
}


/* ===========================================
   SECTION 2: PLAYER FWAP TYPOGRAPHY
   Target: Audio player text elements
   Note: Colors inherit from --theme-palette-color-1 (Blue)
   =========================================== */

.fwap-player-v2,
.fwap-player-v2 * {
  font-family: "Schibsted Grotesk", sans-serif !important;
}

.fwap-artist,
.fwap-title,
.fwap-label,
.fwap-meta-info,
.fwap-meta-line1,
.fwap-meta-line2 {
  font-family: "Schibsted Grotesk", sans-serif !important;
}


/* ===========================================
   SECTION 3: PLAY BUTTON ON COVERS
   Target: SVG play icons on product images
   =========================================== */

.products a.play-button svg,
a.fwap-play svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}


/* ===========================================
   SECTION 4: NAVIGATION MENUS
   Target: Header menus, submenus
   Font: Spline Sans Mono
   =========================================== */

.ct-header .ct-menu-link,
.ct-menu-link,
nav[class*="menu"] > ul > li > a,
.main-navigation a,
.menu-item a,
.sub-menu a,
nav a {
  font-family: "Spline Sans Mono", ui-monospace, monospace !important;
  font-weight: 500 !important;
}


/* ===========================================
   SECTION 5: WIDGET & SECTION TITLES
   Target: h1-h6, widget titles, block headings
   Font: Spline Sans Mono
   =========================================== */

h1, h2, h3, h4, h5, h6,
.widget-title,
.section-title,
.sidebar-title,
h2.widgettitle,
h3.widgettitle,
.wp-block-heading {
  font-family: "Spline Sans Mono", ui-monospace, monospace !important;
}


/* ===========================================
   SECTION 6: THEME COLOR SYSTEM
   Override Blocksy default palette
   Primary: Blue #1E90FF (used by player & links)
   =========================================== */

:root {
  /* Custom YOYAKU variables */
  --yy-accent: #1E90FF;
  --yy-accent-hover: #3AA0FF;
  --yy-accent2: #FF8C00;
  --yy-text: #EDEFF5;
  --yy-muted: #A8ADBB;
}

:root,
html,
body,
[data-palette] {
  /* Override Blocksy palette - affects player & links */
  --theme-palette-color-1: #1E90FF !important;
  --theme-palette-color-2: #3AA0FF !important;
  --theme-link-hover-color: #1E90FF !important;
}

/* Widget titles - white text, blue hover */
.wp-block-heading a,
.widget-title a,
h2 a, h3 a {
  color: #EDEFF5 !important;
}

.wp-block-heading a:hover,
.widget-title a:hover,
h2 a:hover, h3 a:hover {
  color: #1E90FF !important;
}


/* ===========================================
   SECTION 7: TOP CHARTS NUMBERS
   Target: Ranking numbers in sidebar widget (01, 02, 03...)
   Color: Orange #FF8C00
   =========================================== */

/* Widget sidebar numbers (li::before counter) */
.product_list_widget li::before {
  color: #FF8C00 !important;
}

/* Product grid badges (.product-number) */
.product-number {
  --badge-background-color: #FF8C00 !important;
}


/* ===========================================
   SECTION 8: PRODUCT CARDS - ARTIST & LABEL COLORS
   Artist + Label: White (#EDEFF5)
   Hover: Blue (#1E90FF)
   =========================================== */

/* Artist - WHITE */
.products .product-artists,
.products .product-artists a,
.product-artists,
.product-artists a {
  color: #EDEFF5 !important;
}

/* Label - WHITE */
.products .product-labels .product-label-name,
.product-labels .product-label-name,
.products .product-labels .product-label-name a,
.product-labels .product-label-name a {
  color: #EDEFF5 !important;
}

/* Hover - BLUE */
.products .product-artists:hover,
.products .product-artists a:hover,
.product-artists:hover,
.product-artists a:hover,
.products .product-labels .product-label-name:hover,
.products .product-labels .product-label-name a:hover,
.product-labels .product-label-name:hover,
.product-labels .product-label-name a:hover {
  color: #1E90FF !important;
}


/* ===========================================
   SECTION 9: TEXT SCROLL ON HOVER (MASK SYSTEM)
   Text stays INSIDE the card, slides under a mask
   No ellipsis - uses overflow:hidden as visual mask
   Requires: yoyaku-text-scroll.js v2
   =========================================== */

/* Container = MASK (hides overflow, no ellipsis) */
.products .woocommerce-loop-product__title,
.products .product-artists,
.products .product-labels,
.products .product-features,
.product_list_widget .product-data .product-title a,
.product_list_widget .product-data .product-artists,
.product_list_widget .product-data .product-labels {
  overflow: hidden !important;
  text-overflow: clip !important; /* NO ellipsis - mask only */
  white-space: nowrap !important;
  display: block;
  position: relative;
}

/* Inner wrapper for animation (added by JS) */
.scroll-inner {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

/* Visual indicator that content has more (subtle gradient fade) */
.has-overflow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to right, transparent, var(--yy-elevated, #33383e));
  pointer-events: none;
}

/* Hide fade indicator on hover (while scrolling) */
.has-overflow:hover::after {
  opacity: 0;
  transition: opacity 0.2s ease;
}