/*
Theme Name:   Astra Child - Dark Rave
Theme URI:    https://yourdomain.com
Description:  Custom dark gothic / techno child theme for a DJ site, based on Astra.
Author:       Your Name
Author URI:   https://yourdomain.com
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child
*/

/* ==================================================
   CSS Variables – Easy to tweak later
================================================== */
:root {
  --bg-primary: #050505;
  --bg-secondary: #0d0d0d;
  --bg-card: #121212;
  --text-primary: #e8e8e8;
  --text-secondary: #a0a0a0;
  --accent: #ffffff !important;         /* Deep electric purple */
  --accent-hover: #ffffff!important;
  --accent-2: #ff003c;        /* Blood red / rave red */
  --border: #222222;
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Targets the transparent header layout used on the home page */
.ast-theme-transparent-header,
.ast-theme-transparent-header #ast-mobile-popup,
.ast-theme-transparent-header .main-header-menu-toggle {
    --ast-global-color-0: #FF0000 !important; /* Put your target hex color here */
    --accent: #FF0000 !important;              /* Forces your main accent color */
}

/* Hard target for the home page transparent close/burger icons */
.ast-theme-transparent-header .ast-mobile-popup-close svg,
.ast-theme-transparent-header .main-header-menu-toggle svg,
.ast-theme-transparent-header .ast-mobile-svg path,
.ast-theme-transparent-header .ast-close-svg path {
    fill: #FF0000 !important; /* Put your target hex color here */
    stroke: #FF0000 !important;
    color: #FF0000 !important;
}


/* ==================================================
   Base Dark Theme Overrides
================================================== */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
  font-family: var(--font-main);
}

/* Links */
a {
  color: var(--accent);
  transition: color 0.25s ease;
}
a:hover {
  color: var(--accent-hover);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
  letter-spacing: -0.02em;
}

/* Astra header / footer dark */
.site-header,
.ast-header-break-point .main-header-bar,
.site-footer {
  background-color: var(--bg-primary) !important;
  border-color: var(--border) !important;
}

/* Buttons */
.ast-button,
.button,
button,
input[type="submit"],
.wp-block-button__link {
  background-color: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
  transition: all 0.25s ease;
}
.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: var(--accent-hover) !important;
  transform: translateY(-1px);
}

/* Cards / boxes */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
}

/* =========================================
   Simple Full-Width Hero Image
========================================= */

.dj-hero {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
  line-height: 0; /* removes gap under image */
}

.dj-hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Optional: limit maximum height on very large screens */
@media (min-width: 1600px) {
  .dj-hero-img {
    max-height: 85vh;
    width: 100%;
    object-fit: cover;
  }
}

/* Mobile – keeps it looking good */
@media (max-width: 768px) {
  .dj-hero-img {
    min-height: 60vh;
    object-fit: cover;
    object-position: center top;
  }
}

/* Wide-net override for ALL Astra mobile menu SVGs and their inner paths */
[class*="menu-toggle"] svg,
[class*="menu-toggle"] svg path,
[class*="mobile-menu-trigger"] svg,
[class*="mobile-menu-trigger"] svg path,
.ast-mobile-svg,
.ast-mobile-svg path,
.ast-close-svg,
.ast-close-svg path {
    fill: #FFFFFF !important;
    color: #FF0000 !important;
    stroke: #FF0000 !important;
}