/*
Theme Name: WOMP TV
Theme URI: https://womptv.com
Description: WOMP TV Direction 1 — Vectorheart / Russian Constructivism. Custom child theme for the WOMP TV platform.
Author: Richard Celisr
Author URI: https://womptv.com
Template: salient
Version: 1.0.0
Tags: womp-tv, drum-and-bass, custom
Text Domain: womp-tv
*/

/* WOMP TV Design Tokens — Direction 1 Vectorheart */

:root {

  /* Core Colors */
  --womp-bg: #080808;
  --womp-accent: #c8102e;
  --womp-off-white: #f0ece0;
  --womp-dark-navy: #1a1f3a;
  --womp-black: #0a0a0a;

  /* Text */
  --womp-text-primary: #e8e4d8;
  --womp-text-secondary: #aaa;
  --womp-text-tertiary: #666;
  --womp-text-muted: #444;

  /* Surfaces */
  --womp-surface-1: #0a0a0a;
  --womp-surface-2: #0d0d0d;
  --womp-surface-dark: #060606;

  /* Borders */
  --womp-border-primary: #1e1e1e;
  --womp-border-secondary: #141414;

  /* Clip Paths */
  --clip-nav-logo: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  --clip-cta-large: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
  --clip-btn: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  --clip-badge: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  --clip-divider: polygon(0 3px, 100% 0, 100% 100%, 0 calc(100% - 3px));
  --clip-city-badge: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
  --clip-series-badge: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);

  /* Transitions */
  --womp-transition-fast: 0.15s;
  --womp-transition-card: 0.3s ease;

}

/* NAV BAR OVERRIDES */
#header-outer {
  background-color: #0a0a0a !important;
  border-bottom: 1px solid #1e1e1e !important;
}

#header-outer #logo a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: 4px !important;
  color: #f0ece0 !important;
  text-transform: uppercase !important;
}

#header-outer nav > ul > li > a {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #f0ece0 !important;
  padding: 0 22px !important;
}

#header-outer nav > ul > li > a:hover {
  color: #c8102e !important;
}