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

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

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

    /* === ACCENT (NUNFLIX red-orange) === */
    --accent: #FF3D00;
    --accent-hover: #FF5722;
    --accent-light: rgba(255, 61, 0, 0.15);
    --accent-glow: rgba(255, 61, 0, 0.30);

    /* === STATUS === */
    --success: #16a34a;
    --warning: #d97706;
    --danger: #FF3D00;
    --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 with orange logo) === */
.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;
    font-weight: 700;
}
.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;
}

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

/* === Hero H6 badge (OFFICIAL NUNFLIX DOMAIN style) === */
.hero h6.text-accent,
.hero-lg h6.text-accent {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 1rem 0;
}

/* === H1 in hero: 36px === */
.hero h1,
.hero-lg h1 {
    font-size: 36px;
    margin: 0 auto 1.25rem auto;
    max-width: 900px;
    line-height: 1.2;
}

/* === H2 subtitle in hero: 25px === */
.hero h2,
.hero-lg h2 {
    font-size: 25px;
    font-weight: 400;
    color: var(--text-secondary);
    margin: 0 auto 1.5rem auto;
    max-width: 800px;
    line-height: 1.4;
}

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

/* === Wider content containers === */
.container {
    max-width: 1200px;
}
.container-md {
    max-width: 1000px;
}

/* === Mobile: shrink hero text to 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;
    }
    .hero h6.text-accent,
    .hero-lg h6.text-accent {
        font-size: 11px;
    }
}

/* === Buttons: pill-shaped, orange 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.55em 1.4em;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    margin: 1rem 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.4);
}

/* External link icon on the right of every .btn */
.btn::after,
.btn-primary::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    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, orange stroke, orange 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='%23FF3D00' 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.65em 1.7em;
    font-size: 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);
}

/* === Text gradient: orange tones === */
.text-gradient {
    background: linear-gradient(135deg, var(--accent), #FF6B35, #FF8F65);
    -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 (orange) === */
.entry-content ul li::marker,
.section ul li::marker {
    color: var(--accent);
}

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

/* === Trust/Stats Grid === */
.grid-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 1.5rem 0;
}
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
}
.stat-number {
    display: block;
    color: var(--accent);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.4rem;
}
.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
}
@media (max-width: 768px) {
    .grid-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .stat-number {
        font-size: 1.4rem;
    }
    .stat-label {
        font-size: 0.8rem;
    }
}

/* === Last Updated badge === */
.last-updated {
    display: inline-block;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 0.3em 0.9em;
    border-radius: 999px;
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.last-updated time {
    color: var(--text-secondary);
    font-weight: 500;
}

/* === How-to numbered list (for HowTo schema) === */
.how-to-list {
    list-style: none;
    counter-reset: how-to-counter;
    padding-left: 0;
    margin-top: 2rem;
}
.how-to-list li {
    counter-increment: how-to-counter;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem 1.5rem 1.5rem 4.5rem;
    margin-bottom: 1.25rem;
    position: relative;
    transition: all 0.2s ease;
}
.how-to-list li::before {
    content: counter(how-to-counter);
    position: absolute;
    left: 1.25rem;
    top: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--accent);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
}
.how-to-list li:hover {
    border-color: var(--accent);
    transform: translateX(4px);
}
.how-to-list li h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.how-to-list li p {
    margin: 0;
}