/* ============================================
   PageDrop - Yuppow Theme
   ============================================
   Paste into: WP Admin > Appearance > Customize > Additional CSS
   Matches yuppow.org: dark charcoal background + sage green accents
   ============================================ */

:root {
    /* === BACKGROUNDS === */
    --bg-primary: #333333;
    --bg-secondary: #2c2c2c;
    --bg-card: #3d3d3d;
    --bg-elevated: #454545;
    --bg-input: #3d3d3d;

    /* === TEXT === */
    --text-primary: #e8e8e8;
    --text-secondary: #b8b8b8;
    --text-muted: #8a8a8a;
    --text-heading: #ffffff;

    /* === ACCENT (Yuppow green) === */
    --accent: #56825F;
    --accent-hover: #6a9572;
    --accent-light: rgba(86, 130, 95, 0.15);
    --accent-glow: rgba(86, 130, 95, 0.25);

    /* === STATUS === */
    --success: #56825F;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0284c7;

    /* === BORDERS === */
    --border: #454545;
    --border-light: #3a3a3a;

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

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

/* === Header (green 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: #ffffff !important;
}
.site-header .menu a:hover,
#masthead a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* === Footer (green strip, all text white) === */
.site-footer,
footer.site-footer,
.site-footer *,
footer.site-footer * {
    background: var(--accent);
    color: #ffffff !important;
}
.site-footer,
footer.site-footer {
    background: var(--accent) !important;
}
.site-footer a,
footer.site-footer a {
    color: #ffffff !important;
    text-decoration: none;
}
.site-footer a:hover,
footer.site-footer a:hover {
    color: rgba(255, 255, 255, 0.85) !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, green 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, green stroke, green 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='%2356825F' 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);
}

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

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