/*
 * DustDelux Main Stylesheet
 *
 * This file contains the core design system, global styles, and visual effects
 * for the DustDelux WordPress theme.
 */

/* ========================================= */
/* 1. Core Design System: CSS Variables      */
/* ========================================= */

:root {
    /* Color Palette */
    --dd-void:       #0e0e0e;
    --dd-charcoal:   #141414;
    --dd-surface:    #1a1a1a;
    --dd-rule:       #2a2a2a;
    --dd-offwhite:   #e8e4d9;
    --dd-text:       #c8c4b8;
    --dd-text-dim:   #6a6660;
    --dd-text-muted: #3a3835;
    --dd-gold-base:  #c8a84b; /* Renamed to base */
    --dd-gold-dim:   #8a7030;
    --dd-gold-pale:  #e8cc7a;
    --dd-crimson-base: #8b1a1a; /* New base crimson */
    --dd-crimson-lit:#b52222;

    /* Dynamic Accent Color Variables (controlled by Customizer) */
    --dd-accent-color: var(--dd-gold-base);
    --dd-accent-dim:   var(--dd-gold-dim);
    --dd-accent-pale:  var(--dd-gold-pale);

    /* Typography Stack */
    --dd-font-mono:    'IBM Plex Mono', monospace;
    --dd-font-display: 'Bebas Neue', sans-serif;
    --dd-font-serif:   'DM Serif Display', serif;
    --dd-font-code:    'Space Mono', monospace;

    /* Spacing & Sizes (placeholder, will expand) */
    --dd-spacing-xs: 0.5rem;
    --dd-spacing-sm: 1rem;
    --dd-spacing-md: 2rem;
    --dd-spacing-lg: 4rem;
    --dd-spacing-xl: 8rem;
    --dd-spacing-xxl: 12rem;

    /* Border Radii (non-existent, as per brief) */
    --dd-border-radius: 0;

    /* Header/Footer Heights */
    --dd-header-height: 4rem;
    --dd-ticker-height: 2rem;
    --dd-footer-height: 6rem; /* Adjust as needed for content */
    --dd-legal-bar-height: 2.5rem;

    /* Visual Effects Variables */
    --dd-grain-opacity: 0.035; /* Initial default */
}

/* Apply accent colors */
a {
    color: var(--dd-accent-color);
}

a:hover,
a:focus {
    color: var(--dd-accent-pale);
}

blockquote {
    border-left-color: var(--dd-accent-color);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--dd-accent-color); /* Accent on focus */
}

button,
input[type="submit"] {
    background-color: var(--dd-accent-color);
}

button:hover,
input[type="submit"]:hover {
    background-color: var(--dd-accent-pale);
}

::-webkit-scrollbar-thumb {
    background: var(--dd-accent-color);
    border-color: var(--dd-accent-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dd-accent-pale);
}

::selection {
    background: var(--dd-accent-color);
}
::-moz-selection {
    background: var(--dd-accent-color);
}


/* ========================================= */
/* 2. Global Resets & Base Styles            */
/* ========================================= */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px; /* Base for rem units */
    scroll-behavior: smooth;
}

body {
    font-family: var(--dd-font-mono);
    color: var(--dd-text);
    background-color: var(--dd-void);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: url('../images/cursor-crosshair.svg') 12 12, crosshair; /* Custom crosshair cursor */
    overflow-x: hidden; /* Prevent horizontal scroll from ticker/effects */
    padding-top: calc(var(--dd-header-height) + var(--dd-ticker-height)); /* Space for fixed header/ticker */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--dd-font-display);
    color: var(--dd-offwhite);
    line-height: 1.2;
    margin-top: var(--dd-spacing-md);
    margin-bottom: var(--dd-spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); font-family: var(--dd-font-display); }
h2 { font-size: clamp(2rem, 5vw, 4rem); font-family: var(--dd-font-display); }
h3 { font-size: clamp(1.5rem, 4vw, 3rem); font-family: var(--dd-font-serif); text-transform: none; } /* Serif for subheadings */
h4 { font-size: clamp(1.2rem, 3vw, 2rem); font-family: var(--dd-font-mono); }
h5 { font-size: clamp(1rem, 2.5vw, 1.5rem); font-family: var(--dd-font-mono); }
h6 { font-size: clamp(0.9rem, 2vw, 1.2rem); font-family: var(--dd-font-mono); }

/* Links */
/* Already updated above to use --dd-accent-color */

/* Paragraphs and Text */
p {
    margin-bottom: var(--dd-spacing-sm);
}

strong {
    color: var(--dd-offwhite);
}

em {
    font-family: var(--dd-font-serif);
    font-style: italic;
}

small {
    font-size: 0.8em;
    color: var(--dd-text-dim);
}

/* Lists */
ul, ol {
    margin-left: var(--dd-spacing-md);
    margin-bottom: var(--dd-spacing-sm);
}

li {
    margin-bottom: var(--dd-spacing-xs);
}

/* Blockquotes */
/* Already updated above to use --dd-accent-color */

/* Code */
code, pre {
    font-family: var(--dd-font-code);
    background-color: var(--dd-charcoal);
    color: var(--dd-text);
    border: 1px solid var(--dd-rule);
    padding: 0.2em 0.4em;
    border-radius: var(--dd-border-radius);
    font-size: 0.9em;
}

pre {
    display: block;
    padding: var(--dd-spacing-sm);
    overflow-x: auto;
    margin-bottom: var(--dd-spacing-sm);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--dd-spacing-md);
    font-family: var(--dd-font-mono);
}

th, td {
    border: 1px solid var(--dd-rule);
    padding: var(--dd-spacing-xs) var(--dd-spacing-sm);
    text-align: left;
    color: var(--dd-text);
}

th {
    background-color: var(--dd-surface);
    color: var(--dd-offwhite);
    text-transform: uppercase;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Form Elements (basic styling, will expand) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 0.8em;
    background-color: var(--dd-charcoal);
    border: 1px solid var(--dd-rule);
    color: var(--dd-text);
    font-family: var(--dd-font-mono);
    font-size: 1rem;
    border-radius: var(--dd-border-radius);
    transition: border-color 0.2s ease-in-out;
}

/* Already updated above to use --dd-accent-color */

button,
input[type="submit"] {
    /* Already updated above to use --dd-accent-color */
}

button:hover,
input[type="submit"]:hover {
    /* Already updated above to use --dd-accent-pale */
}


/* ========================================= */
/* 3. Visual Effects                         */
/* ========================================= */

/* Film Grain Overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999; /* Ensure it's on top */
    opacity: var(--dd-grain-opacity); /* Use CSS variable */
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20250%20250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22noiseFilter%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.75%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23noiseFilter)%22%2F%3E%3C%2Fsvg%3E");
    mix-blend-mode: overlay; /* Or 'soft-light' depending on desired effect */
}

/* CRT Scanlines */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998; /* Below grain, above content */
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent 2px
    );
}

/* Class to hide scanlines */
body.dd-scanlines-hidden::after {
    display: none;
}

/* Scrollbar Styling (Webkit only) */
::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
    height: 8px; /* Height for horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: var(--dd-charcoal); /* Track background */
}

::-webkit-scrollbar-thumb {
    /* Already updated above to use --dd-accent-color */
}

::-webkit-scrollbar-thumb:hover {
    /* Already updated above to use --dd-accent-pale */
}

/* Text Selection Highlight */
::selection {
    /* Already updated above to use --dd-accent-color */
}
::-moz-selection {
    /* Already updated above to use --dd-accent-color */
}

/* ========================================= */
/* 4. Utility Classes (placeholder)          */
/* ========================================= */

.dd-text-display { font-family: var(--dd-font-display); }
.dd-text-mono    { font-family: var(--dd-font-mono); }
.dd-text-serif   { font-family: var(--dd-font-serif); }
.dd-text-code    { font-family: var(--dd-font-code); }

.dd-color-gold       { color: var(--dd-gold-base); } /* Use base colors for specific utilities */
.dd-color-crimson    { color: var(--dd-crimson-base); }
.dd-color-offwhite   { color: var(--dd-offwhite); }
.dd-bg-charcoal      { background-color: var(--dd-charcoal); }
.dd-bg-surface       { background-color: var(--dd-surface); }
.dd-border-rule      { border-color: var(--dd-rule); }

.dd-uppercase { text-transform: uppercase; }
.dd-small-caps { font-variant: small-caps; }
.dd-letter-spacing-wide { letter-spacing: 0.2em; }

/* ========================================= */
/* 5. Header & Footer                        */
/* ========================================= */

/* Header - Ticker Bar */
.dd-ticker-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--dd-ticker-height);
    background-color: var(--dd-accent-color); /* Use accent color for ticker */
    color: var(--dd-void);
    overflow: hidden;
    z-index: 1000;
    border-bottom: 1px solid var(--dd-rule);
    display: flex;
    align-items: center;
    font-family: var(--dd-font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.dd-ticker-content {
    display: inline-block; /* Essential for horizontal scrolling */
    animation: dd-ticker-scroll 28s linear infinite; /* 28s duration as requested */
    padding: 0 var(--dd-spacing-sm); /* Some padding to prevent text from touching edges immediately */
}

@keyframes dd-ticker-scroll {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); } /* Scroll half the content width for a seamless loop */
}

/* Header - Main Navigation */
.site-header {
    position: fixed;
    top: var(--dd-ticker-height); /* Position below the ticker */
    left: 0;
    width: 100%;
    background-color: var(--dd-void);
    z-index: 999;
    border-bottom: 1px solid var(--dd-rule);
    padding: var(--dd-spacing-xs) var(--dd-spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--dd-header-height);
}

.site-branding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.site-branding .site-title {
    font-size: 1.8rem; /* Adjust as needed */
    letter-spacing: 0.1em;
    color: var(--dd-offwhite);
}

.site-branding .site-description {
    font-size: 0.7rem;
    color: var(--dd-text-dim);
    margin-top: -0.3rem; /* Tweak for alignment */
    text-transform: uppercase;
    letter-spacing: 0.1em;
}


.main-navigation .dd-primary-nav-menu {
    list-style: none;
    display: flex;
    gap: var(--dd-spacing-md); /* Space between menu items */
}

.main-navigation .dd-primary-nav-menu li a {
    font-family: var(--dd-font-mono);
    font-size: 0.6875rem; /* 11px / 16px = 0.6875rem */
    text-transform: uppercase;
    font-variant: small-caps;
    letter-spacing: 0.2em;
    color: var(--dd-text);
    padding: var(--dd-spacing-xs) 0;
    position: relative;
    transition: color 0.2s ease-in-out;
}

.main-navigation .dd-primary-nav-menu li a:hover,
.main-navigation .dd-primary-nav-menu li a:focus {
    color: var(--dd-accent-color);
}

/* Navigation arrow on hover */
.main-navigation .dd-primary-nav-menu li a::before {
    content: '';
    position: absolute;
    left: -16px; /* Position before link text */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: left 0.2s ease-out, opacity 0.2s ease-out;
    color: var(--dd-accent-color);
    font-size: 1rem; /* Adjust size of arrow */
    font-family: sans-serif; /* Use a common font for consistent arrow character */
}

.main-navigation .dd-primary-nav-menu li a:hover::before {
    content: '→'; /* Arrow character */
    left: -8px; /* Slide right 8px */
    opacity: 1;
}

/* Footer */
.site-footer {
    background-color: var(--dd-void);
    border-top: 1px solid var(--dd-rule);
    padding: var(--dd-spacing-md);
    text-align: center;
}

.dd-footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Constrain width */
    margin: 0 auto;
    padding-bottom: var(--dd-spacing-md);
    border-bottom: 1px solid var(--dd-rule);
}

.dd-footer-branding {
    text-align: left;
}

.dd-footer-branding .dd-wordmark {
    font-size: 2rem;
    color: var(--dd-offwhite);
    letter-spacing: 0.1em;
    display: block;
}

.dd-footer-branding .dd-tagline {
    font-size: 0.75rem;
    color: var(--dd-text-dim);
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dd-footer-nav .dd-footer-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dd-spacing-sm); /* Space between footer links */
    justify-content: flex-end;
}

.dd-footer-nav .dd-footer-menu li a {
    font-family: var(--dd-font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dd-text-dim);
    transition: color 0.2s ease-in-out;
}

.dd-footer-nav .dd-footer-menu li a:hover,
.dd-footer-nav .dd-footer-menu li a:focus {
    color: var(--dd-accent-color);
}

.dd-legal-bar {
    background-color: var(--dd-charcoal);
    padding: var(--dd-spacing-xs) var(--dd-spacing-md);
    font-size: 0.75rem;
    color: var(--dd-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-top: 1px solid var(--dd-rule);
    margin-top: var(--dd-spacing-md);
}

.dd-legal-bar .dd-blinking-cursor {
    animation: dd-blink-cursor 1s infinite steps(1, start);
}

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

/* Main content area padding to account for fixed header/ticker */
.site-main {
    padding-top: var(--dd-spacing-md); /* Add some padding below the fixed header */
    max-width: 1200px; /* Max width for general content */
    margin: 0 auto;
    padding-left: var(--dd-spacing-md);
    padding-right: var(--dd-spacing-md);
}

/* ========================================= */
/* 6. Responsive Breakpoints (placeholder)   */
/* ========================================= */

@media (max-width: 1024px) {
    .site-header {
        flex-direction: column;
        height: auto;
        padding-bottom: var(--dd-spacing-xs);
    }
    .main-navigation .dd-primary-nav-menu {
        justify-content: center;
        margin-top: var(--dd-spacing-sm);
    }
    .dd-footer-grid {
        flex-direction: column;
        gap: var(--dd-spacing-md);
    }
    .dd-footer-branding, .dd-footer-nav {
        text-align: center;
        width: 100%;
    }
    .dd-footer-nav .dd-footer-menu {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    body {
        padding-top: calc(var(--dd-header-height) + var(--dd-ticker-height) + var(--dd-spacing-xs));
    }
    .dd-ticker-bar {
        font-size: 0.7rem;
    }
    .site-branding .site-title {
        font-size: 1.5rem;
    }
    .site-branding .site-description {
        font-size: 0.6rem;
    }
    .main-navigation .dd-primary-nav-menu {
        flex-direction: column;
        gap: var(--dd-spacing-xs);
    }
    .site-main {
        padding-left: var(--dd-spacing-sm);
        padding-right: var(--dd-spacing-sm);
    }
}