/* ============================================
   PageDrop - ShowboxMovies Theme
   ============================================
   Paste into: WP Admin > Appearance > Customize > Additional CSS
   Light theme + yellow accent (#FFD93D) + black footer
   ============================================ */

:root {
    /* === BACKGROUNDS === */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f8f8;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-input: #ffffff;

    /* === TEXT === */
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #6a6a6a;
    --text-heading: #000000;

    /* === ACCENT (ShowBox yellow) === */
    --accent: #FFD93D;
    --accent-hover: #FFC107;
    --accent-light: rgba(255, 217, 61, 0.20);
    --accent-glow: rgba(255, 217, 61, 0.40);

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

    /* === BORDERS === */
    --border: #e5e5e5;
    --border-light: #f1f1f1;

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

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

/* === Header (yellow strip) === */
.site-header,
header.site-header,
#masthead {
    background: var(--accent) !important;
}
.site-header a,
.site-header .main-title a,
.site-header .menu a,
#masthead a {
    color: #000000 !important;
    font-weight: 600;
}
.site-header .menu a:hover,
#masthead a:hover {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* === Footer (BLACK strip with white text) === */
.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, yellow bg, white stroke, black text === */
.btn,
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    background: var(--accent);
    color: #000000;
    border: 2px solid #ffffff;
    border-radius: 999px;
    padding: 0.75em 1.8em;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    margin: 1.5rem 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.btn:hover,
.btn-primary:hover {
    background: var(--accent-hover);
    border-color: #ffffff;
    color: #000000;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

/* 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='%23000000' 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 */
.btn-outline {
    background: transparent;
    border: 2px solid var(--accent);
    color: #000000;
}
.btn-outline:hover {
    background: var(--accent);
    color: #000000;
    border-color: #000000;
}
.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='%23000000' 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: #f1f1f1;
    color: var(--text-primary);
    border: 2px solid var(--border);
}
.btn-secondary:hover {
    background: #e5e5e5;
    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: #B8860B;
    text-decoration: underline;
}
.entry-content a:hover,
.section a:not(.btn):hover {
    color: var(--accent-hover);
}

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

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

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

/* === Hero === */
.hero,
.hero-lg {
    background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
}

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

/* === Inputs (white with gray border) === */
input, textarea, select {
    background: #ffffff;
    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: #f1f1f1;
    color: #B8860B;
    border: 1px solid var(--border-light);
}
pre {
    background: #f8f8f8;
    border: 1px solid var(--border);
}
pre code {
    background: transparent;
    border: none;
    color: var(--text-primary);
}

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

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

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

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

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