/* ============================================
   PageDrop - HydraHD Theme
   ============================================
   Paste into: WP Admin > Appearance > Customize > Additional CSS
   Pure black background + red accent (#FB0101)
   ============================================ */

:root {
    /* === BACKGROUNDS === */
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-card: #1c1c1c;
    --bg-elevated: #262626;
    --bg-input: #1a1a1a;

    /* === TEXT === */
    --text-primary: #ffffff;
    --text-secondary: #c8c8c8;
    --text-muted: #888888;
    --text-heading: #ffffff;

    /* === ACCENT (HydraHD red) === */
    --accent: #FB0101;
    --accent-hover: #FF2424;
    --accent-light: rgba(251, 1, 1, 0.15);
    --accent-glow: rgba(251, 1, 1, 0.25);

    /* === STATUS === */
    --success: #16a34a;
    --warning: #d97706;
    --danger: #FB0101;
    --info: #0284c7;

    /* === BORDERS === */
    --border: #2a2a2a;
    --border-light: #1a1a1a;

    /* === SHADOWS === */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px var(--accent-glow);
}

/* === Body === */
body {
    background-color: #000000;
    color: var(--text-primary);
}

/* === Header (black strip) === */
.site-header,
header.site-header,
#masthead {
    background: #000000 !important;
}
.site-header a,
.site-header .main-title a,
.site-header .menu a,
#masthead a {
    color: #ffffff !important;
}
.site-header .main-title,
.site-header .main-title a,
#masthead .main-title a {
    color: var(--accent) !important;
}
.site-header .menu a:hover,
#masthead a:hover {
    color: var(--accent) !important;
}

/* === Footer (black strip, all text white) === */
.site-footer,
footer.site-footer,
.site-footer *,
footer.site-footer * {
    background: #000000;
    color: #ffffff !important;
}
.site-footer,
footer.site-footer {
    background: #000000 !important;
}
.site-footer a,
footer.site-footer a {
    color: #ffffff !important;
    text-decoration: none;
}
.site-footer a:hover,
footer.site-footer a:hover {
    color: var(--accent) !important;
    text-decoration: underline;
}
.site-footer p,
.site-footer span,
.site-footer div,
footer.site-footer p,
footer.site-footer span,
footer.site-footer div {
    background: transparent !important;
    color: #ffffff !important;
}

/* === Buttons: pill-shaped, red bg, white stroke, white text === */
.btn,
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    background: var(--accent);
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 999px;
    padding: 0.75em 1.8em;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    margin: 1.5rem 0;
    transition: all 0.2s ease;
}
.btn:hover,
.btn-primary:hover {
    background: var(--accent-hover);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* External link icon on the right of every .btn */
.btn::after,
.btn-primary::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Outline variant: transparent bg, red stroke, red text */
.btn-outline {
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
}
.btn-outline:hover {
    background: var(--accent);
    color: #ffffff;
    border-color: #ffffff;
}
.btn-outline::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FB0101' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}
.btn-outline:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}

/* Secondary button */
.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 2px solid var(--border);
}
.btn-secondary:hover {
    background: var(--bg-elevated);
    border-color: var(--text-primary);
    color: var(--text-primary);
}

/* Larger button size */
.btn-lg {
    padding: 0.9em 2.2em;
    font-size: 1.1rem;
}

/* === Links in body text === */
.entry-content a,
.section a:not(.btn),
.container a:not(.btn) {
    color: var(--accent);
    text-decoration: none;
}
.entry-content a:hover,
.section a:not(.btn):hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* === Headings === */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading);
}

/* === Cards (FAQ style boxes) === */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

/* === Sections === */
.section.bg-secondary,
.bg-secondary {
    background: var(--bg-secondary);
}

/* === Hero === */
.hero,
.hero-lg {
    background: var(--bg-primary);
}

/* === H1 in hero: 36px === */
.hero h1,
.hero-lg h1 {
    font-size: 36px;
}

/* === H2 subtitle in hero: 25px === */
.hero h2,
.hero-lg h2 {
    font-size: 25px;
    font-weight: 400;
    color: var(--text-secondary);
}

/* === All other headings (h2, h3, h4, h5, h6) site-wide: 25px === */
h2, h3, h4, h5, h6 {
    font-size: 25px;
}

/* === Wider content containers (more horizontal space for ALL text on the page) === */
.container {
    max-width: 1200px;
}
.container-md {
    max-width: 1000px;
}

/* === Mobile: shrink hero H1 + subheading so they fit in 2 lines === */
@media (max-width: 768px) {
    .hero h1,
    .hero-lg h1 {
        font-size: 22px;
    }
    .hero h2,
    .hero-lg h2 {
        font-size: 16px;
    }
    h2, h3, h4, h5, h6 {
        font-size: 20px;
    }
}

/* === Smaller button (both desktop and mobile) === */
.btn,
.btn-primary {
    padding: 0.55em 1.4em;
    font-size: 0.9rem;
}
.btn-lg {
    padding: 0.65em 1.7em;
    font-size: 1rem;
}

/* === Text gradient: red tones === */
.text-gradient {
    background: linear-gradient(135deg, var(--accent), #ff6b75, #ff8a93);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* === Inputs (dark) === */
input, textarea, select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
    outline: none;
}
input::placeholder, textarea::placeholder {
    color: var(--text-muted);
}

/* === Code === */
code {
    background: var(--bg-card);
    color: var(--accent);
    border: 1px solid var(--border);
}
pre {
    background: var(--bg-card);
    border: 1px solid var(--border);
}
pre code {
    background: transparent;
    border: none;
    color: var(--text-primary);
}

/* === Blockquote === */
blockquote {
    background: var(--bg-card);
    border-left: 4px solid var(--accent);
    color: var(--text-secondary);
}

/* === Tables === */
table {
    background: var(--bg-card);
    color: var(--text-primary);
}
th {
    background: var(--bg-elevated);
    color: var(--text-heading);
    border-bottom: 2px solid var(--border);
}
td {
    border-bottom: 1px solid var(--border);
}
tr:hover {
    background: var(--bg-elevated);
}

/* === Badges === */
.badge {
    background: var(--accent-light);
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* === List bullets in body (red) === */
.entry-content ul li::marker,
.section ul li::marker {
    color: var(--accent);
}

/* === Selection color === */
::selection {
    background: var(--accent);
    color: #ffffff;
}