/* M2 Tech Blog Custom Styles - Matching m2te.ch */

:root {
    --primary-dark: #000119;
    --accent-blue: #0095eb;
    --bg-dark: #0a0a0a;
    --bg-darker: #050505;
    --bg-card: #1a1a1a;
    --text-light: #b8b8b8;
    --text-heading: #7dd3fc;
    --border-dark: #2a2a2a;
}

/* Global background and text */
html, body {
    background-color: #0a0a0a !important;
    color: #b8b8b8 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    line-height: 1.75 !important;
}

#page-wrapper {
    background-color: #0a0a0a !important;
}

/* Header - Navy blue like m2te.ch sidebar */
#header {
    background-color: #000119 !important;
}

#header .section,
#header .container,
#header .navbar,
#header .navbar-section,
.section#header {
    background-color: #000119 !important;
}

/* Navigation links */
#header a,
.navbar a,
.dropmenu a,
nav a {
    color: #7dd3fc !important;
}

#header a:hover,
.navbar a:hover,
.dropmenu a:hover,
nav a:hover {
    color: #ffffff !important;
}

/* Logo */
.navbar-brand,
.navbar-brand span,
.logo a {
    color: #7dd3fc !important;
    font-weight: bold !important;
}

/* Main content area */
#body-wrapper,
.section#body-wrapper,
#start,
.content-wrapper,
.default-content,
.blog-content,
.columns {
    background-color: #0a0a0a !important;
}

/* Container backgrounds */
.container,
.column {
    background-color: transparent !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.title-center h1,
.title-center h2 {
    color: #7dd3fc !important;
}

/* Paragraphs and text */
p, li, span, td, th {
    color: #b8b8b8 !important;
}

/* Links */
a {
    color: #0095eb !important;
}

a:hover {
    color: #7dd3fc !important;
}

/* Blog items and cards */
.card,
.blog-item,
.list-item,
.blog-content-item {
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 4px !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
}

/* Footer */
#footer,
footer,
.footer {
    background-color: #1a1a1a !important;
    border-top: 1px solid #2a2a2a !important;
    color: #b8b8b8 !important;
}

#footer a,
footer a {
    color: #7dd3fc !important;
}

/* Horizontal rules */
hr {
    border-color: #2a2a2a !important;
    background-color: #2a2a2a !important;
}

/* Code blocks */
pre, code {
    background-color: #050505 !important;
    border: 1px solid #2a2a2a !important;
    color: #b8b8b8 !important;
}

/* Buttons */
.btn,
.button,
button,
input[type="submit"] {
    background-color: #0095eb !important;
    color: #ffffff !important;
    border: none !important;
}

.btn:hover,
.button:hover,
button:hover,
input[type="submit"]:hover {
    background-color: #0077c2 !important;
}

/* Mobile menu */
.mobile-container,
.mobile-menu,
.overlay {
    background-color: #000119 !important;
}

.overlay-menu a {
    color: #7dd3fc !important;
}

/* Tags and labels */
.tag,
.label,
.badge {
    background-color: #0095eb !important;
    color: #ffffff !important;
}

/* Notices */
.notices,
.alert,
.note {
    background-color: #1a1a1a !important;
    border-left: 4px solid #0095eb !important;
    color: #b8b8b8 !important;
}

/* Pagination */
.pagination a,
.pagination span {
    color: #0095eb !important;
}

.pagination .active {
    background-color: #0095eb !important;
    color: #ffffff !important;
}

/* Blockquotes */
blockquote {
    background-color: #1a1a1a !important;
    border-left: 4px solid #0095eb !important;
    color: #b8b8b8 !important;
}

/* Tables */
table {
    background-color: #1a1a1a !important;
}

table th {
    background-color: #000119 !important;
    color: #7dd3fc !important;
}

table td {
    border-color: #2a2a2a !important;
}

/* Forms */
input, textarea, select {
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    color: #b8b8b8 !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    background-color: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background-color: #2a2a2a;
}