/*
 * dc.css — Dave Cahill Retro Pixel Theme
 * Author: Dave Cahill | DIV/DAV LLC
 * https://www.divdav.com
 * Version: 3.0.0
 *
 * AESTHETIC: 8-bit arcade / NES era pixel art UI
 * Inspired by: Weather.com Retro, classic game menus, CRT monitors
 *
 * TABLE OF CONTENTS
 * 1.  CSS Custom Properties (Design Tokens)
 * 2.  Google Fonts Import
 * 3.  Base Reset & Body
 * 4.  CRT Overlay Effects
 * 5.  Typography System
 * 6.  Pixel Box / Panel Components
 * 7.  Header & Navigation
 * 8.  Hero / Home Splash
 * 9.  Press Ticker
 * 10. Content Panels & Grids
 * 11. Album / Music Cards
 * 12. Tour / Show Listings
 * 13. Video Listings
 * 14. Bio / Stats
 * 15. Connect / Social
 * 16. Blog / Archive
 * 17. Single Posts
 * 18. Tour Page
 * 19. Press Page
 * 20. Footer
 * 21. Forms & Inputs
 * 22. Buttons
 * 23. Divi Module Overrides
 * 24. Animations & Keyframes
 * 25. Responsive Breakpoints
 */

/* =========================================================================
 * 1. CSS CUSTOM PROPERTIES
 * ===================================================================== */
:root {
	/* Retro colour palette */
	--px-black:       #0a0a14;
	--px-navy:        #0d0d2b;
	--px-panel:       #111130;
	--px-panel-dark:  #0a0a20;
	--px-cyan:        #00f5ff;
	--px-cyan-dim:    #007a80;
	--px-yellow:      #ffe600;
	--px-yellow-dim:  #665c00;
	--px-magenta:     #ff00aa;
	--px-magenta-dim: #660044;
	--px-green:       #00ff88;
	--px-green-dim:   #006633;
	--px-red:         #ff2244;
	--px-red-dim:     #660011;
	--px-white:       #e8e8ff;
	--px-grey:        #4a4a7a;
	--px-grey-light:  #8888aa;

	/* Typography */
	--font-pixel:  'Press Start 2P', 'Courier New', monospace;
	--font-crt:    'VT323', 'Lucida Console', monospace;
	--font-mono:   'Courier New', monospace;

	/* Pixel borders */
	--px-border-cyan:    3px solid var(--px-cyan);
	--px-border-yellow:  3px solid var(--px-yellow);
	--px-border-magenta: 3px solid var(--px-magenta);
	--px-border-green:   3px solid var(--px-green);
	--px-border-dim:     2px solid var(--px-grey);

	/* Pixel shadows (NES-style inset box look) */
	--px-shadow-cyan:    inset 3px 3px 0 rgba(255,255,255,0.1), inset -3px -3px 0 rgba(0,0,0,0.4), 3px 3px 0 var(--px-grey);
	--px-shadow-yellow:  inset 3px 3px 0 rgba(255,255,255,0.1), inset -3px -3px 0 rgba(0,0,0,0.4), 3px 3px 0 var(--px-grey);
	--px-shadow-magenta: inset 3px 3px 0 rgba(255,255,255,0.1), inset -3px -3px 0 rgba(0,0,0,0.4), 3px 3px 0 var(--px-grey);
}


/* =========================================================================
 * 2. GOOGLE FONTS  (fallback if not loaded via functions.php)
 * ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');


/* =========================================================================
 * 3. BASE RESET & BODY
 * ===================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body,
body.dc-retro-theme {
	background-color: var(--px-black) !important;
	color:            var(--px-white) !important;
	font-family:      var(--font-crt) !important;
	font-size:        18px;
	line-height:      1.6;
	cursor:           crosshair;
	image-rendering:  pixelated;
}

body.blog {
	background-color: var(--px-black) !important;
}

/* Kill Extra's beige background on all pages */
body.page,
body.single,
body.archive,
body.page-tour,
body.page-tour-archive,
body.page-bio {
	background-color: var(--px-black) !important;
}


/* =========================================================================
 * 4. CRT OVERLAY EFFECTS
 * ===================================================================== */

/* Horizontal scanlines */
body::before {
	content:          '';
	position:         fixed;
	inset:            0;
	background:       repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0, 0, 0, 0.12) 2px,
		rgba(0, 0, 0, 0.12) 4px
	);
	pointer-events:   none;
	z-index:          9999;
}

/* CRT vignette */
body::after {
	content:          '';
	position:         fixed;
	inset:            0;
	background:       radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
	pointer-events:   none;
	z-index:          9998;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after {
		display: none;
	}
}


/* =========================================================================
 * 5. TYPOGRAPHY SYSTEM
 * ===================================================================== */
h1, h2, h3, h4, h5, h6,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3 {
	font-family:   var(--font-pixel) !important;
	color:         var(--px-cyan) !important;
	text-shadow:   3px 3px 0 var(--px-cyan-dim);
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height:   1.4;
}

h1 { font-size: clamp(16px, 3vw, 26px); }
h2 { font-size: clamp(13px, 2.5vw, 20px); color: var(--px-yellow) !important; text-shadow: 2px 2px 0 var(--px-yellow-dim); }
h3 { font-size: clamp(11px, 2vw, 16px); color: var(--px-magenta) !important; text-shadow: 2px 2px 0 var(--px-magenta-dim); }
h4 { font-size: 11px; color: var(--px-green) !important; text-shadow: 1px 1px 0 var(--px-green-dim); }

p, li, td, th, label, span,
.et_pb_text p,
.et_pb_blurb_description {
	font-family: var(--font-crt) !important;
	font-size:   18px;
	color:       var(--px-white);
	letter-spacing: 0.5px;
}

a {
	color:      var(--px-cyan);
	transition: none !important;
}

a:hover {
	color:           var(--px-yellow) !important;
	text-decoration: none !important;
}

blockquote {
	border-left:  4px solid var(--px-cyan);
	padding-left: 16px;
	color:        var(--px-yellow) !important;
	font-family:  var(--font-pixel) !important;
	font-size:    10px;
}

strong, b {
	color:        var(--px-yellow);
	font-family:  var(--font-pixel) !important;
	font-size:    0.85em;
}

/* CRT blinking cursor helper */
.px-cursor {
	display:    inline-block;
	width:      10px;
	height:     1em;
	background: var(--px-cyan);
	margin-left: 3px;
	vertical-align: middle;
	animation:  px-blink 0.8s step-end infinite;
}

.px-blink {
	animation: px-blink 1s step-end infinite;
}


/* =========================================================================
 * 6. PIXEL BOX / PANEL COMPONENTS
 * ===================================================================== */

/* Generic pixel panel — NES menu style with inset border */
.px-panel,
.et_pb_section,
.et_pb_column,
.post-content-box {
	background:  var(--px-panel) !important;
	border:      var(--px-border-cyan) !important;
	box-shadow:  var(--px-shadow-cyan) !important;
	image-rendering: pixelated;
}

/* Panel title bar — like NES menu headers */
.px-titlebar,
.et_pb_extra_module .module-header,
.heading-title,
h2.tribe-events-widget-events-list__header-title {
	background:  var(--px-cyan) !important;
	color:       var(--px-black) !important;
	font-family: var(--font-pixel) !important;
	font-size:   8px !important;
	padding:     8px 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 1px;
	border-bottom: 3px solid var(--px-panel) !important;
}


/* =========================================================================
 * 7. HEADER & NAVIGATION
 * ===================================================================== */

/* Extra top bar → retro news ticker bar */
#top-header,
div#top-header {
	background:   var(--px-cyan) !important;
	border-bottom: 3px solid var(--px-panel) !important;
	padding:      4px 12px !important;
}

#top-header *,
div#top-header * {
	font-family: var(--font-pixel) !important;
	font-size:   7px !important;
	color:       var(--px-black) !important;
}

/* Main header wrapper */
#main-header-wrapper,
div#main-header-wrapper {
	background:   var(--px-navy) !important;
	border-bottom: 3px solid var(--px-cyan) !important;
	box-shadow:   0 3px 0 var(--px-grey) !important;
}

#main-header,
div#main-header {
	background: transparent !important;
}

/* Logo → pixel style */
a.logo,
#logo {
	filter: none !important;
}

a.logo img,
img#logo {
	/* pixelate the logo */
	image-rendering: pixelated;
	filter:          drop-shadow(2px 2px 0 var(--px-cyan-dim));
}

/* Hide the original logo and replace with pixel text via ::after */
#main-header .logo {
	display:     inline-flex;
	align-items: center;
}

/* Nav links */
#et-menu li a,
.nav li a,
#et-navigation ul li a {
	font-family:    var(--font-pixel) !important;
	font-size:      7px !important;
	color:          var(--px-white) !important;
	text-transform: uppercase !important;
	padding:        10px 12px !important;
	border:         2px solid transparent !important;
	letter-spacing: 0.5px;
	transition:     none !important;
}

#et-menu li a:hover,
#et-menu li.current_page_item > a,
#et-menu li.current-menu-item > a,
.nav li a:hover {
	background:  var(--px-cyan) !important;
	color:       var(--px-black) !important;
	border-color: var(--px-white) !important;
	box-shadow:  2px 2px 0 var(--px-grey) !important;
	text-shadow: none !important;
}

/* Dropdown menus */
#et-menu ul,
.nav ul {
	background:   var(--px-navy) !important;
	border:       var(--px-border-cyan) !important;
	box-shadow:   4px 4px 0 var(--px-grey) !important;
}

#et-menu ul li a,
.nav ul li a {
	border-bottom: 1px solid var(--px-grey) !important;
}

/* Mobile hamburger */
#et-extra-mobile-menu {
	background:   var(--px-navy) !important;
	border:       var(--px-border-cyan) !important;
}

/* Hide the blog transparent header override (keep retro header always visible) */
.blog #main-header {
	background-color: var(--px-navy) !important;
}

.blog #top-header {
	display: block !important;
}

/* Nav padding */
#et-navigation > ul > li > a {
	padding-bottom: 30px !important;
}


/* =========================================================================
 * 8. HERO / HOME SPLASH
 * ===================================================================== */

/* Space background → replaced with pixel grid */
#space {
	background:   var(--px-black) !important;
	position:     absolute;
	inset:        0;
	z-index:      -1;
}

/* Kill the old star images — replaced by CSS */
.stars  { background: none !important; }
.twinkling { background: none !important; animation: none !important; }
.clouds { background: none !important; animation: none !important; }

/* Pixel grid background on #space */
#space::before {
	content:          '';
	position:         absolute;
	inset:            0;
	background-image:
		linear-gradient(var(--px-grey) 1px, transparent 1px),
		linear-gradient(90deg, var(--px-grey) 1px, transparent 1px);
	background-size:  24px 24px;
	opacity:          0.1;
}

/* Animated pixel star dots */
#space::after {
	content:   '';
	position:  absolute;
	inset:     0;
	background-image:
		radial-gradient(1px 1px at 10% 15%, var(--px-cyan) 0, transparent 100%),
		radial-gradient(1px 1px at 30% 40%, var(--px-yellow) 0, transparent 100%),
		radial-gradient(1px 1px at 60% 20%, var(--px-white) 0, transparent 100%),
		radial-gradient(1px 1px at 80% 60%, var(--px-cyan) 0, transparent 100%),
		radial-gradient(1px 1px at 45% 75%, var(--px-magenta) 0, transparent 100%),
		radial-gradient(1px 1px at 90% 10%, var(--px-white) 0, transparent 100%),
		radial-gradient(1px 1px at 20% 80%, var(--px-green) 0, transparent 100%),
		radial-gradient(1px 1px at 70% 50%, var(--px-yellow) 0, transparent 100%);
	animation: px-star-twinkle 4s step-end infinite alternate;
}

/* Dave head hero section */
#davehead {
	background:      transparent !important;
	margin:          300px auto 0;
	text-align:      center;
	position:        relative;
	z-index:         2;
}

#davehead .centerhead {
	position: fixed;
	left:     0;
	right:    0;
	top:      0;
	z-index:  -1;
}

/* Pixel-render the portrait image */
#davehead .bighead,
#davehead img {
	image-rendering: pixelated !important;
	filter:
		contrast(1.1)
		saturate(0.8)
		sepia(0.1)
		drop-shadow(4px 4px 0 var(--px-cyan-dim))
		drop-shadow(-2px -2px 0 var(--px-magenta-dim)) !important;
	max-width:  500px !important;
}

/* Knuckles / robot hand images */
.knuckles,
#fingers img.fingers {
	image-rendering: pixelated !important;
	filter:          drop-shadow(3px 3px 0 var(--px-grey)) !important;
}

#fingers {
	background-color: var(--px-panel) !important;
}

#home-bottom.et_pb_section {
	background-color: var(--px-panel) !important;
	border-top:       3px solid var(--px-cyan) !important;
}


/* =========================================================================
 * 9. PRESS TICKER BANNER
 * ===================================================================== */

/* Repurpose any marquee / text banner elements as the yellow ticker */
.et_pb_marquee_wrapper,
.et_pb_marquee {
	background:  var(--px-yellow) !important;
	color:       var(--px-black) !important;
	font-family: var(--font-pixel) !important;
	font-size:   7px !important;
	padding:     6px 0 !important;
	border-top:  3px solid var(--px-navy) !important;
	border-bottom: 3px solid var(--px-navy) !important;
}


/* =========================================================================
 * 10. CONTENT PANELS & GRIDS
 * ===================================================================== */

/* All Divi sections get the pixel panel look */
.et_pb_section:not(#davehead):not(#fingers):not(#home-bottom) {
	background: var(--px-panel) !important;
	border:     var(--px-border-dim) !important;
	margin:     2px !important;
}

.et_pb_row {
	background: transparent !important;
}

/* Specialty columns */
.et_pb_specialty_column {
	background:  var(--px-panel-dark) !important;
	border:      var(--px-border-dim) !important;
	padding:     0 16px !important;
}

/* Extra posts module — pixel card style */
.et_pb_extra_module,
.et_pb_posts,
.et_pb_blog_feed {
	background: transparent !important;
}

/* Post cards */
.et_pb_post,
article.et_pb_post,
.post-content-box {
	background:    var(--px-panel-dark) !important;
	border:        var(--px-border-dim) !important;
	box-shadow:    2px 2px 0 var(--px-grey) !important;
	border-radius: 0 !important;
	margin-bottom: 6px !important;
}

.et_pb_post:hover,
article.et_pb_post:hover {
	border-color: var(--px-cyan) !important;
	box-shadow:   2px 2px 0 var(--px-cyan-dim) !important;
}

/* Post titles in listings */
.et_pb_extra_module .posts-list h3,
.et_pb_extra_module .posts-list h3 a,
.et_pb_post h2 a {
	font-family: var(--font-pixel) !important;
	font-size:   8px !important;
	color:       var(--px-cyan) !important;
	text-shadow: 2px 2px 0 var(--px-cyan-dim);
}

.et_pb_extra_module .posts-list h3 a:hover,
.et_pb_post h2 a:hover {
	color: var(--px-yellow) !important;
}

/* Post meta */
.post-meta,
.et_pb_post .post-meta,
.post-meta a {
	font-family: var(--font-pixel) !important;
	font-size:   6px !important;
	color:       var(--px-grey-light) !important;
}

.post-meta a:hover {
	color: var(--px-cyan) !important;
}

/* Post thumbnails */
.et_pb_post img,
.post-thumbnail img,
.et_pb_image img {
	image-rendering: pixelated !important;
	border:          2px solid var(--px-grey) !important;
	filter:          saturate(0.9) contrast(1.05) !important;
}

.et_pb_post:hover img {
	border-color: var(--px-cyan) !important;
	filter:       saturate(1.1) contrast(1.1) !important;
}

/* Module headers (MUSIC NEWS, TOUR NEWS, etc.) */
.et_pb_extra_module .module-header h3,
.et_pb_extra_module .heading-title {
	font-family:    var(--font-pixel) !important;
	font-size:      8px !important;
	background:     var(--px-yellow) !important;
	color:          var(--px-black) !important;
	padding:        8px 12px !important;
	text-shadow:    none !important;
	letter-spacing: 1px;
	border-bottom:  3px solid var(--px-panel) !important;
}


/* =========================================================================
 * 11. ALBUM / MUSIC CARDS
 * ===================================================================== */

/* Featured posts slider */
.et_pb_featured_posts_slider {
	border:      var(--px-border-cyan) !important;
	box-shadow:  var(--px-shadow-cyan) !important;
}

.et_pb_featured_posts_slider .post-title a {
	font-family: var(--font-pixel) !important;
	font-size:   10px !important;
	color:       var(--px-cyan) !important;
	text-shadow: 3px 3px 0 var(--px-cyan-dim);
}

.et_pb_featured_posts_slider .post-meta {
	font-family: var(--font-pixel) !important;
	font-size:   6px !important;
	color:       var(--px-yellow) !important;
}

/* Slider controls */
.et-pb-controllers a {
	background:  var(--px-cyan) !important;
	border:      2px solid var(--px-panel) !important;
}

.et-pb-controllers a.selected {
	background:  var(--px-yellow) !important;
}

/* Buy links / CTA buttons */
.buy-links li a,
.buyvideos a {
	font-family:    var(--font-pixel) !important;
	font-size:      7px !important;
	background:     var(--px-magenta) !important;
	color:          #fff !important;
	border:         none !important;
	padding:        10px 14px !important;
	display:        inline-block !important;
	box-shadow:     4px 4px 0 var(--px-magenta-dim) !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
}

.buy-links li a:hover,
.buyvideos a:hover {
	background: #ff44cc !important;
	box-shadow:  2px 2px 0 var(--px-magenta-dim) !important;
	transform:   translate(2px, 2px);
	color:       #fff !important;
}


/* =========================================================================
 * 12. TOUR / SHOW LISTINGS
 * ===================================================================== */

body.page-tour,
body.page-tour-archive {
	background-color: var(--px-black) !important;
}

#tour-body img {
	image-rendering: pixelated !important;
	filter:          saturate(0.7) contrast(1.2) sepia(0.3) !important;
	opacity:         0.4 !important;
}

/* GigPress tables → pixel style */
table.gigpress-table {
	border-collapse: separate !important;
	border-spacing:  2px !important;
	font-family:     var(--font-pixel) !important;
	font-size:       7px !important;
}

table.gigpress-table th {
	background:  var(--px-cyan) !important;
	color:       var(--px-black) !important;
	padding:     8px !important;
	text-transform: uppercase !important;
}

table.gigpress-table td {
	background:  var(--px-panel-dark) !important;
	color:       var(--px-white) !important;
	padding:     8px !important;
	border:      1px solid var(--px-grey) !important;
}

.gigpress-row.active td {
	background:  rgba(0, 245, 255, 0.08) !important;
	border-color: var(--px-cyan) !important;
}

#gigpress-3 a,
.gigpress-info-item a {
	color: var(--px-cyan) !important;
}

#gigpress-3 a:hover {
	color: var(--px-yellow) !important;
}

/* Tribe Events */
.tribe-common.tribe-events-view--widget-events-list.tribe-events-widget {
	background:  var(--px-panel-dark) !important;
	border:      var(--px-border-cyan) !important;
}

h2.tribe-events-widget-events-list__header-title {
	background:  var(--px-cyan) !important;
	color:       var(--px-black) !important;
	font-family: var(--font-pixel) !important;
	font-size:   7px !important;
	text-shadow: none !important;
}

.tribe-events-widget-events-list__event-title {
	font-family: var(--font-pixel) !important;
	font-size:   8px !important;
	color:       var(--px-yellow) !important;
}

.tribe-event-date-start,
.tribe-events-schedule {
	font-family: var(--font-crt) !important;
	font-size:   16px !important;
	color:       var(--px-green) !important;
}


/* =========================================================================
 * 13. VIDEO LISTINGS
 * ===================================================================== */

/* Video thumbnails */
.et_pb_video_wrap,
.fluid-width-video-wrapper {
	border:      var(--px-border-cyan) !important;
	box-shadow:  var(--px-shadow-cyan) !important;
}

.fluid-width-video-wrapper {
	padding-top: 56.25% !important;
}

/* Play button overlays */
.et_pb_video::before {
	border-left-color: var(--px-magenta) !important;
}


/* =========================================================================
 * 14. BIO / STATS
 * ===================================================================== */

body.page-bio {
	background-color: var(--px-black) !important;
}

#biohead .biohead img {
	image-rendering: pixelated !important;
	filter:          saturate(0.6) contrast(1.3) sepia(0.2) !important;
	opacity:         0.5 !important;
}

#biohead .et_pb_text {
	position: relative;
	z-index:  1;
}

/* Blurb / stat boxes */
.et_pb_blurb {
	background:  var(--px-panel-dark) !important;
	border:      var(--px-border-dim) !important;
	padding:     16px !important;
	text-align:  center !important;
}

.et_pb_blurb:hover {
	border-color: var(--px-yellow) !important;
}

.et_pb_blurb_title {
	font-family: var(--font-pixel) !important;
	font-size:   9px !important;
	color:       var(--px-yellow) !important;
}

.et_pb_main_blurb_image img {
	image-rendering: pixelated !important;
	filter:          drop-shadow(2px 2px 0 var(--px-cyan)) !important;
}


/* =========================================================================
 * 15. CONNECT / SOCIAL
 * ===================================================================== */

/* Social icon links */
.et-extra-social-icons li a,
.et-extra-icon {
	background:  var(--px-panel-dark) !important;
	border:      var(--px-border-dim) !important;
	box-shadow:  2px 2px 0 var(--px-grey) !important;
}

.et-extra-icon:hover {
	border-color: var(--px-cyan) !important;
	box-shadow:   2px 2px 0 var(--px-cyan-dim) !important;
}

/* Search field */
.et-top-search input {
	background:  var(--px-panel-dark) !important;
	border:      var(--px-border-dim) !important;
	color:       var(--px-cyan) !important;
	font-family: var(--font-pixel) !important;
	font-size:   7px !important;
}

/* Widgets */
.et_pb_widget {
	background:  var(--px-panel-dark) !important;
	border:      var(--px-border-dim) !important;
	padding:     12px !important;
}

.et_pb_widget .widget-title,
.et_pb_widget h4,
.et_pb_widget h3 {
	font-family: var(--font-pixel) !important;
	font-size:   8px !important;
	color:       var(--px-cyan) !important;
	text-shadow: 2px 2px 0 var(--px-cyan-dim) !important;
	padding:     6px 0 8px !important;
	border-bottom: 2px solid var(--px-grey) !important;
}

.et_pb_widget li a {
	font-family: var(--font-crt) !important;
	font-size:   16px !important;
	color:       var(--px-white) !important;
}

.et_pb_widget li a:hover {
	color: var(--px-cyan) !important;
}

/* Instagram */
#sb_instagram .sbi_photo {
	border-radius: 0 !important;
	border:        2px solid var(--px-grey) !important;
	image-rendering: pixelated !important;
}

#sb_instagram .sbi_photo:hover {
	border-color: var(--px-cyan) !important;
}

/* Mailing list */
.et_pb_newsletter_button,
.et_pb_contact_submit {
	font-family: var(--font-pixel) !important;
	font-size:   7px !important;
	background:  var(--px-magenta) !important;
	color:       #fff !important;
	border:      none !important;
	box-shadow:  4px 4px 0 var(--px-magenta-dim) !important;
	text-transform: uppercase !important;
	padding:     10px 18px !important;
}

.et_pb_newsletter_button:hover,
.et_pb_contact_submit:hover {
	background: #ff44cc !important;
}


/* =========================================================================
 * 16. BLOG / ARCHIVE
 * ===================================================================== */

.blog .et_pb_section {
	background:    var(--px-panel) !important;
	padding-top:   3px !important;
	padding-bottom: 3px !important;
}

/* Blog post list styles */
.blog .posts-list article {
	border-bottom: 2px solid var(--px-grey) !important;
}

/* Category label chips */
.et_pb_post .post-categories a {
	background:  var(--px-navy) !important;
	border:      1px solid var(--px-cyan) !important;
	color:       var(--px-cyan) !important;
	font-family: var(--font-pixel) !important;
	font-size:   5px !important;
	padding:     3px 6px !important;
}


/* =========================================================================
 * 17. SINGLE POSTS
 * ===================================================================== */

.single .post-header {
	padding-bottom: 0 !important;
	padding-top:    30px !important;
	border-bottom:  3px solid var(--px-cyan) !important;
}

.single .post-thumbnail.header {
	display: none !important;
}

.single .et_pb_section {
	padding-top: 10px !important;
}

.post-header h1 {
	font-size: clamp(14px, 2.5vw, 22px) !important;
}

/* Post nav */
.post-nav .nav-links .nav-link {
	background:  var(--px-panel-dark) !important;
	border:      var(--px-border-dim) !important;
}

.post-nav .nav-link a span.button {
	font-family:  var(--font-pixel) !important;
	font-size:    7px !important;
	background:   var(--px-navy) !important;
	border:       2px solid var(--px-cyan) !important;
	color:        var(--px-cyan) !important;
	padding:      8px 14px !important;
	box-shadow:   3px 3px 0 var(--px-grey) !important;
}

.post-nav .nav-link a span.button:hover {
	background:  var(--px-cyan) !important;
	color:       var(--px-black) !important;
}

.post-nav .nav-links .title {
	display: none !important;
}

/* Inline post content links */
.single.et_pb_pagebuilder_layout .post-content a,
.et_pb_pagebuilder_layout .post-content a {
	color:      var(--px-cyan) !important;
	text-decoration: underline dotted !important;
}

.single.et_pb_pagebuilder_layout .post-content a:hover {
	color: var(--px-yellow) !important;
}


/* =========================================================================
 * 18. TOUR PAGE
 * ===================================================================== */

.page-tour #footer,
.page-tour-archive #footer {
	display: none !important;
}

/* Tour poster image — pixelated + desaturated */
#tour-body {
	height:     75%;
	max-height: 1080px;
	position:   fixed;
	right:      0;
	top:        auto;
}

#tour-body img {
	float:  right;
	height: 100%;
}


/* =========================================================================
 * 19. PRESS PAGE
 * ===================================================================== */

.page-press header.header {
	z-index: 99999;
}

.page-press #footer {
	display: none !important;
}

.page-press .et_pb_specialty_column {
	background:  rgba(10, 10, 30, 0.92) !important;
	border:      var(--px-border-cyan) !important;
}

#press .press-body img {
	image-rendering: pixelated !important;
	filter:          saturate(0.4) contrast(1.3) sepia(0.5) !important;
	opacity:         0.3 !important;
	height:          100%;
	left:            -20%;
	position:        fixed;
	top:             0;
	z-index:         0;
	max-width:       none;
}

.press-articles {
	position: relative;
	z-index:  9999;
}

.press-articles article {
	background:  transparent !important;
	box-shadow:  none !important;
	border:      none !important;
	margin:      40px 0 60px !important;
}

.page-press .et_pb_post h2 {
	border-top:  4px solid var(--px-cyan) !important;
	padding-top: 16px !important;
	margin-top:  0 !important;
}

.page-press .et_pb_post p {
	color: var(--px-white) !important;
}

/* Cahill vs Kalma special header */
.page-cahill-vs-kalma .entry-title {
	background:  var(--px-navy) !important;
	border-bottom: 10px solid var(--px-cyan) !important;
	color:       var(--px-cyan) !important;
	font-family: var(--font-pixel) !important;
	font-size:   clamp(12px, 2vw, 18px) !important;
	text-align:  center !important;
	padding:     20px !important;
}


/* =========================================================================
 * 20. FOOTER
 * ===================================================================== */

#footer {
	background:  var(--px-navy) !important;
	border-top:  3px solid var(--px-cyan) !important;
	margin-top:  0 !important;
}

#footer .et_pb_widget {
	background:    var(--px-panel-dark) !important;
	border:        var(--px-border-dim) !important;
	margin-bottom: 20px !important;
}

#footer ul.gigpress-listing {
	color: var(--px-grey-light) !important;
}

#footer #gigpress-4 {
	margin-bottom: 30px !important;
}

#footer .instagram-pics li img {
	image-rendering: pixelated !important;
	border:          2px solid var(--px-grey) !important;
}

#footer .instagram-pics li img:hover {
	border-color: var(--px-cyan) !important;
}

#footer-bottom {
	background:  var(--px-black) !important;
	border-top:  3px solid var(--px-grey) !important;
}

#footer-info {
	font-family:    var(--font-pixel) !important;
	font-size:      7px !important;
	text-transform: uppercase !important;
	color:          var(--px-grey-light) !important;
}

#footer-info a {
	color: var(--px-cyan) !important;
}

#footer-info a:hover {
	color: var(--px-yellow) !important;
}

#footer-info .hide {
	display:    inline;
	visibility: visible;
}

/* Footer nav */
#footer-nav .bottom-nav li a {
	font-family: var(--font-pixel) !important;
	font-size:   6px !important;
	color:       var(--px-grey-light) !important;
	border:      1px solid var(--px-grey) !important;
	padding:     5px 8px !important;
}

#footer-nav .bottom-nav li a:hover {
	color:       var(--px-cyan) !important;
	border-color: var(--px-cyan) !important;
}

/* Back to top */
#back_to_top {
	background:  var(--px-cyan) !important;
	box-shadow:  3px 3px 0 var(--px-cyan-dim) !important;
}

/* Footer social icons */
#footer .et-extra-social-icons li a {
	background:  var(--px-panel-dark) !important;
	border:      1px solid var(--px-grey) !important;
}

/* Bio/Tour/Press footer hide */
.page-bio #footer,
.page-tour #footer,
.page-tour-archive #footer,
.page-press #footer {
	display: none !important;
}


/* =========================================================================
 * 21. FORMS & INPUTS
 * ===================================================================== */

input,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
	background:  var(--px-panel-dark) !important;
	border:      2px solid var(--px-grey) !important;
	color:       var(--px-cyan) !important;
	font-family: var(--font-pixel) !important;
	font-size:   8px !important;
	padding:     8px 10px !important;
	outline:     none !important;
}

input:focus,
textarea:focus {
	border-color: var(--px-cyan) !important;
	box-shadow:   0 0 0 2px rgba(0, 245, 255, 0.2) !important;
}

input::placeholder,
textarea::placeholder {
	color:   var(--px-grey) !important;
	opacity: 1 !important;
}

select {
	background-color: var(--px-panel-dark) !important;
	width:  auto !important;
	cursor: pointer !important;
}


/* =========================================================================
 * 22. BUTTONS
 * ===================================================================== */

.et_pb_button,
.et_pb_button_0,
.et_pb_button_1,
button,
input[type="submit"],
.button,
a.et_pb_button {
	font-family:    var(--font-pixel) !important;
	font-size:      8px !important;
	background:     var(--px-magenta) !important;
	color:          #fff !important;
	border:         none !important;
	padding:        12px 18px !important;
	box-shadow:     4px 4px 0 var(--px-magenta-dim) !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	border-radius:  0 !important;
	transition:     none !important;
	cursor:         pointer !important;
}

.et_pb_button:hover,
a.et_pb_button:hover,
button:hover,
input[type="submit"]:hover {
	background:  #ff44cc !important;
	box-shadow:  2px 2px 0 var(--px-magenta-dim) !important;
	transform:   translate(2px, 2px) !important;
}

/* Secondary / outline button style */
.et_pb_button.secondary,
a.et_pb_button.secondary {
	background:  var(--px-navy) !important;
	border:      2px solid var(--px-cyan) !important;
	color:       var(--px-cyan) !important;
	box-shadow:  4px 4px 0 var(--px-grey) !important;
}

/* Pixel button arrows (Extra module "read more") */
.et_pb_more_button,
a.more-link {
	font-family: var(--font-pixel) !important;
	font-size:   6px !important;
	color:       var(--px-cyan) !important;
	border:      1px solid var(--px-cyan) !important;
	padding:     5px 10px !important;
}

.et_pb_more_button:hover,
a.more-link:hover {
	background:  var(--px-cyan) !important;
	color:       var(--px-black) !important;
}


/* =========================================================================
 * 23. DIVI MODULE OVERRIDES
 * ===================================================================== */

/* Remove rounded corners everywhere */
.et_pb_module,
.et_pb_section,
.et_pb_row,
.et_pb_column {
	border-radius: 0 !important;
}

/* Tabs → pixel style */
.et-tabs-control,
.et_left_tabs_bg {
	background:  var(--px-navy) !important;
	border:      var(--px-border-dim) !important;
}

.et-tab {
	font-family:    var(--font-pixel) !important;
	font-size:      7px !important;
	color:          var(--px-white) !important;
	border-bottom:  2px solid var(--px-grey) !important;
}

.et-tab.active,
.et-tab:hover {
	background:  var(--px-cyan) !important;
	color:       var(--px-black) !important;
}

/* Sidebar */
.et_pb_extra_column_sidebar {
	border-left: 3px solid var(--px-grey) !important;
}

/* Colorbox / lightbox */
#cboxOverlay,
#colorbox {
	z-index: 999999 !important;
}

#cboxContent {
	background:  var(--px-navy) !important;
	border:      var(--px-border-cyan) !important;
}

/* Mobile menu */
#et-extra-mobile-menu #menu-item-5424 {
	display: none !important;
}

/* Select dropdowns in extra modules */
.et_pb_extra_module select {
	width:     auto !important;
	min-width: 160px !important;
}

/* Extra column minimum width */
.et_pb_extra_column,
.et_extra_layout .et_pb_column {
	min-width: 0 !important;
}

/* Lyrics page tabs */
.page-lyrics .et_left_tabs_bg,
.page-lyrics .tabs-left .et-tabs-control,
.tabs-left ul.et_shortcodes_mobile_nav {
	width: 215px;
}

/* Lyrics articles */
.page-lyrics .et_pb_section {
	background-color: transparent !important;
}

.page-lyrics article {
	background-color: transparent !important;
	border:           none !important;
	box-shadow:       none !important;
}

/* Buy section */
.buy-links {
	list-style:  none !important;
	padding-left: 0 !important;
}

.buy-links li {
	vertical-align: middle !important;
	width:          32% !important;
	display:        inline-block !important;
}

.buyvideos {
	border-top:  4px solid var(--px-cyan) !important;
	margin-top:  30px !important;
	padding-top: 40px !important;
}

/* CVK list */
.cvk {
	list-style: none !important;
	padding:    0 !important;
}
.cvk li {
	line-height:   1.7em !important;
	margin-bottom: 0 !important;
}

/* Gigpress extra styles */
.gigpress-related-heading { margin-top: 30px !important; }
.gigpress-empty           { float: left !important; width: 100% !important; }
.gigpress-info-item       { margin-right: 20px !important; }
td.gigpress-artist,
th.gigpress-artist        { display: none !important; }

.et_pb_widget.widget_gigpress p {
	margin-bottom: 0 !important;
	padding:       0 0 10px 20px !important;
}

/* CRT-style blurb icons */
.et_pb_blurb .et_pb_main_blurb_image {
	margin-bottom: 10px !important;
}

/* Fluid video fix */
.fluid-width-video-wrapper {
	padding-top: 56.25% !important;
}

/* Helper utilities */
.curved {
	border-radius: 0 !important;
	box-shadow:    3px 3px 0 var(--px-grey) !important;
}


/* =========================================================================
 * 24. ANIMATIONS & KEYFRAMES
 * ===================================================================== */

@keyframes px-blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0; }
}

@keyframes px-glow-pulse {
	0%, 100% { text-shadow: 0 0 10px var(--px-cyan), 0 0 20px var(--px-cyan), 3px 3px 0 var(--px-cyan-dim); }
	50%       { text-shadow: 0 0 3px var(--px-cyan), 3px 3px 0 var(--px-cyan-dim); }
}

@keyframes px-star-twinkle {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.4; }
}

@keyframes px-flicker {
	0%, 100%  { opacity: 1; }
	92%        { opacity: 0.99; }
	94%        { opacity: 0.93; }
	96%        { opacity: 0.99; }
}

@keyframes px-scanroll {
	0%   { background-position: 0 0; }
	100% { background-position: 0 80px; }
}

@keyframes px-slide-in {
	from { transform: translateX(-20px); opacity: 0; }
	to   { transform: translateX(0);     opacity: 1; }
}

@keyframes px-marquee {
	from { transform: translateX(100%); }
	to   { transform: translateX(-100%); }
}

/* Apply flicker to the whole site header */
#main-header-wrapper {
	animation: px-flicker 10s infinite;
}

/* Glow on primary headings */
h1,
.site-logo,
.hero-title {
	animation: px-glow-pulse 3s ease-in-out infinite;
}

/* Loading bar animation for XP/progress elements */
.xp-bar,
.et_pb_progress_bar .et_pb_progress {
	background: repeating-linear-gradient(
		90deg,
		var(--px-green) 0,
		var(--px-green) 10px,
		var(--px-green-dim) 10px,
		var(--px-green-dim) 12px
	) !important;
	animation: px-scanroll 1s linear infinite !important;
}

/* Slide in for article cards */
.et_pb_post,
.post-content-box {
	animation: px-slide-in 0.3s ease both;
}

/* Disable for reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}


/* =========================================================================
 * 25. RESPONSIVE BREAKPOINTS
 * ===================================================================== */

/* ── Large desktop (1301px+) ─ */
@media only screen and (min-width: 1301px) {
	#davehead { margin-top: 350px; }
}

/* ── Desktop (1025–1300px) ─ */
@media only screen and (min-width: 1025px) and (max-width: 1300px) {
	#davehead          { margin-top: 300px; }
	#davehead .bighead { max-width: 400px !important; }
}

/* ── Desktop nav ─ */
@media all and (min-width: 981px) {
	.blog header.header       { z-index: 0; }
	.page-press header.header { z-index: 99999; }
}

/* ── Tablet and below (980px) ─ */
@media all and (max-width: 980px) {
	#davehead          { margin-top: 190px; }
	#davehead .bighead { max-width: 300px !important; }

	.page-lyrics .et_left_tabs_bg,
	.page-lyrics .tabs-left .et-tabs-control { width: 100%; }

	#footer .instagram-pics li img { max-height: 150px; max-width: 150px; }
	#footer .instagram-pics li:last-of-type { display: none; }

	#footer-info .hide { display: table-column; visibility: hidden; width: 100%; }

	#tour-body  { height: 90%; right: -2%; }
	#biohead    { padding-right: 100px; }

	.buy-links li { width: 100% !important; }

	.et_pb_row.et_pb_row_fullwidth,
	.et_pb_specialty_fullwidth > .et_pb_row { width: 90% !important; max-width: 90% !important; }
}

/* ── Below 1024px ─ */
@media only screen and (max-width: 1024px) {
	.logo               { height: 28px; margin: 10px 0; }
	#instagram-widget-2 { display: none; }
}

/* ── Tablet (768–980px) ─ */
@media all and (min-width: 768px) and (max-width: 980px) {
	#davehead          { margin-top: 150px; }
	#davehead .bighead { max-width: 260px !important; }
}

/* ── Phone (max 767px) ─ */
@media all and (max-width: 767px) {
	.hide              { display: table-column; visibility: hidden; width: 100%; }
	#davehead          { margin-top: 60px; }
	#davehead .bighead { max-width: 190px !important; }

	#et-menu > li > a,
	.nav > li > a      { font-size: 6px !important; padding: 8px 6px !important; }
}

/* ── Small phone (max 479px) ─ */
@media all and (max-width: 479px) {
	#davehead          { margin-top: 40px; }
	#davehead .bighead { max-width: 120px !important; }

	table.gigpress-table.past { max-width: 100% !important; }
	#tour-body                { height: 95%; right: -30%; }

	.buy-links li             { width: 100% !important; }
	.page-press .et_pb_column_3_4 { width: 100% !important; }

	.featured-posts-slider-module .post.carousel-item {
		background-size: 100% auto !important;
	}
}

/* ── 320px ─ */
@media only screen and (max-width: 320px) {
	#davehead .bighead { max-width: 100px !important; }

	#et-menu > li > a { padding: 6px 4px !important; }
}