/* ============================================================
   Santander Blog v9 — Status Page Palette
   GitHub-dark style + Kuma green (#5cdd8b)
   Match: status.santander.ovh
   ============================================================ */

:root {
    --bg-primary: #0d1117;
    --bg-secondary: #12161c;
    --accent: #5cdd8b;
    --accent-hover: #53c77d;
    --accent-glow: rgba(92, 221, 139, 0.25);
    --accent-dim: rgba(92, 221, 139, 0.08);
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --border: #21262d;
    --border-strong: #30363d;
    --glass-bg: rgba(22, 27, 34, 0.85);
    --glass-bg-hover: rgba(22, 27, 34, 0.95);
    --glass-border: #21262d;
    --card-radius: 8px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.2);
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Liberation Mono', monospace;
}

/* --- Base --- */
html { background-color: var(--bg-primary) !important; }
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body > * { position: relative; z-index: 1; }

::-moz-selection { background: var(--accent-glow); color: var(--text-primary); }
::selection { background: var(--accent-glow); color: var(--text-primary); }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
    font-weight: 600; letter-spacing: -0.02em;
}

/* --- Links --- */
a { color: var(--accent) !important; text-decoration: none !important; transition: color 0.2s ease; }
a:hover { color: var(--accent-hover) !important; text-decoration: underline !important; }

/* --- Header / Nav --- */
.header, #header, header, nav {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0.75rem 2rem !important;
    position: sticky !important; top: 0; z-index: 100;
}
.header a, #header a, nav a {
    color: var(--text-secondary) !important;
    font-weight: 500; transition: color 0.2s ease;
}
.header a:hover, #header a:hover, nav a:hover,
.header a.active, #header a.active, nav a.active {
    color: var(--accent) !important; text-decoration: none !important;
}
.logo a, .header .logo a {
    color: var(--text-primary) !important;
    font-weight: 600; font-size: 1.15rem;
}

/* --- Main --- */
.main, .main-content, #main {
    max-width: 1100px !important;
    margin: 0 auto !important; padding: 2rem !important;
}

/* --- Post Cards --- */
.post-entry, .first-entry, .entry {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--card-radius) !important;
    padding: 1.5rem !important; margin-bottom: 1.25rem !important;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.post-entry:hover, .first-entry:hover {
    background: var(--glass-bg-hover) !important;
    border-color: var(--border-strong) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md);
}

.entry-header h2 { margin: 0 0 0.5rem 0 !important; font-size: 1.2rem !important; }
.entry-header h2 a {
    color: var(--text-primary) !important;
    font-weight: 600 !important; letter-spacing: -0.02em;
}
.entry-header h2 a:hover { color: var(--accent) !important; text-decoration: none !important; }
.entry-content { color: var(--text-secondary) !important; font-size: 0.9rem; line-height: 1.6; }
.entry-footer, .post-meta {
    color: var(--text-muted) !important;
    font-size: 0.75rem !important; margin-top: 0.75rem !important;
}

/* --- Tags --- */
.tag, .post-tag, .entry-footer a[href*="/tags/"] {
    display: inline-block;
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
    padding: 0.15rem 0.6rem !important;
    border-radius: 100px !important;
    font-size: 0.65rem !important; font-weight: 500 !important;
    border: 1px solid rgba(92,221,139,0.18);
    transition: all 0.2s ease; text-decoration: none !important;
    margin: 0.1rem; letter-spacing: 0.03em;
    text-transform: uppercase;
}
.tag:hover, .post-tag:hover, .entry-footer a[href*="/tags/"]:hover {
    background: var(--accent) !important;
    color: var(--bg-primary) !important;
    border-color: var(--accent);
    text-decoration: none !important;
}

/* --- Single Post --- */
.post-content, .article-content {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--card-radius) !important;
    padding: 2rem !important; margin: 2rem 0 !important;
    box-shadow: var(--shadow-sm);
}
.post-content h1,.post-content h2,.post-content h3,.post-content h4,
.article-content h1,.article-content h2,.article-content h3,.article-content h4 {
    color: var(--text-primary) !important;
    margin-top: 1.75em !important; margin-bottom: 0.5em !important; font-weight: 600;
}
.post-content h2, .article-content h2 {
    border-bottom: 1px solid var(--border); padding-bottom: 0.35em;
}
.post-content p, .article-content p {
    color: var(--text-primary) !important;
    line-height: 1.8 !important; margin-bottom: 1.25em;
}
.post-content a, .article-content a {
    color: var(--accent) !important;
}
.single-meta, .page-header { color: var(--text-secondary) !important; }

/* --- Code --- */
code {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    padding: 0.15em 0.4em !important;
    font-size: 0.85em !important;
    font-family: var(--font-mono) !important;
    color: var(--accent) !important;
}
pre {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 1rem !important; overflow-x: auto;
}
pre code {
    background: transparent !important; border: none !important;
    border-radius: 0 !important; padding: 0 !important;
    color: var(--text-primary) !important; font-size: 0.85rem !important;
}
.highlight { background: var(--bg-secondary) !important; border-radius: 8px !important; margin: 1.5em 0; }
.highlight pre { background: transparent !important; border: none !important; padding: 1rem !important; }

/* --- Tables --- */
table {
    background: var(--glass-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important; width: 100% !important;
    border-collapse: separate; border-spacing: 0; overflow: hidden;
}
th {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    padding: 0.75rem 0.875rem !important; font-weight: 600;
    text-align: left; border-bottom: 1px solid var(--border);
}
td {
    color: var(--text-secondary) !important;
    padding: 0.65rem 0.875rem !important;
    border-bottom: 1px solid var(--border);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }

/* --- Blockquotes --- */
blockquote {
    background: var(--accent-dim) !important;
    border-left: 3px solid var(--accent) !important;
    padding: 0.85rem 1.25rem !important;
    margin: 1.5rem 0 !important;
    border-radius: 0 8px 8px 0 !important;
}
blockquote p { color: var(--text-secondary) !important; font-style: italic !important; }

/* --- Profile Mode --- */
.profile .profile_inner, .home-info {
    background: var(--glass-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius) !important;
    padding: 2rem !important; text-align: center !important;
    margin-bottom: 2rem !important;
    box-shadow: var(--shadow-sm);
}
.profile h1, .home-info h1, .home-info .title {
    color: var(--text-primary) !important;
    font-size: 1.75rem !important; font-weight: 700;
    letter-spacing: -0.03em; margin-bottom: 0.75rem !important;
}
.profile .home-info-content, .home-info p {
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important; line-height: 1.7;
}
.profile img, .home-info img {
    border-radius: 50%;
    border: 2px solid rgba(92,221,139,0.25);
}

.profile .buttons a, .home-info .buttons a, .profile .buttons button {
    display: inline-block;
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(92,221,139,0.2);
    border-radius: 6px; padding: 0.4rem 1rem;
    font-weight: 500; font-size: 0.85rem;
    transition: all 0.25s ease; margin: 0.25rem;
    text-decoration: none !important;
}
.profile .buttons a:hover, .home-info .buttons a:hover, .profile .buttons button:hover {
    background: var(--accent) !important; color: var(--bg-primary) !important;
    border-color: var(--accent);
    text-decoration: none !important;
}

/* --- Page Header --- */
.page-header h1 {
    color: var(--text-primary) !important;
    font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
}

/* --- Pagination --- */
.pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2.5rem !important; }
.pagination a, .prev, .next {
    background: var(--glass-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important; padding: 0.45rem 0.9rem !important;
    color: var(--text-secondary) !important;
    font-weight: 500; transition: all 0.25s ease; text-decoration: none !important;
}
.pagination a:hover, .prev:hover, .next:hover {
    background: var(--glass-bg-hover) !important;
    border-color: var(--border-strong) !important;
    color: var(--accent) !important;
    text-decoration: none !important;
}
.pagination a.active {
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important; color: var(--accent) !important;
}

/* --- Footer --- */
.footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}

/* --- Inputs --- */
input, textarea, select {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important; color: var(--text-primary) !important;
    padding: 0.45rem 0.65rem !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent) !important; outline: none;
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* --- Search --- */
#searchbox input {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important; color: var(--text-primary) !important;
    padding: 0.5rem 0.8rem !important;
}
#searchbox input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-dim); }

#theme-toggle {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 50% !important; color: var(--text-primary) !important;
    cursor: pointer; padding: 0.3rem !important; transition: all 0.2s ease;
}
#theme-toggle:hover { border-color: var(--accent) !important; }