/*
Theme Name: Blogus Dark - Minus Sinus
Theme URI: http://www.minussinus.de
Description: Dark mode child theme for Blogus using the Minus Sinus color palette (msci).
Author: Christoph Neemann
Author URI: http://www.minussinus.de
Template: blogus
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blogusdark
*/

/* =============================================================
   MSCI COLOR PALETTE
   darkBackground:    #00032D   - page background
   darkTile:          #1b1f41   - card / content surface
   darkTileHighlight: #353657   - hover / active surface
   Blue:              #1C2C54   - nav / primary blue
   BlueShades[2]:     #45507C   - dropdown background
   DarkGray:          #444655   - borders
   LightGray:         #A8AABC   - secondary / menu text
   UltraLightGray:    #EAEFFF   - body text
   old Gold:          #DAC190   - headings
   --color-primary-500: #ecdcc0 - gold hover
   Gold:              #E0B773   - accent
   LightGreen:        #40D5C4   - links
   darkContrast1:     #6EFACC   - link hover
   darkRed:           #9C2121   - error / negative
   ============================================================= */

/* === CSS CUSTOM PROPERTIES ================================== */
:root {
    --bg-page:           #00032D;
    --bg-tile:           #1b1f41;
    --bg-tile-hover:     #353657;
    --bg-nav:            #1C2C54;
    --bg-dropdown:       #45507C;
    --border:            #444655;
    --border-subtle:     #353657;
    --text-body:         #EAEFFF;   /* UltraLightGray */
    --text-secondary:    #A8AABC;
    --text-heading:      #DAC190;
    --link:              #40D5C4;
    --link-hover:        #6EFACC;
    --accent-gold:       #E0B773;
    --accent-gold-light: #ecdcc0;
    --accent-orange:     #F4C43D;
    --accent-red:        #9C2121;
    --muted:             #A8AABC;
}

/* === GOOGLE FONTS =========================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* === BASE =================================================== */
html,
body {
    background-color: var(--bg-page) !important;
    color: var(--text-body) !important;
    font-family: 'Roboto', Tahoma, Arial, sans-serif !important;
    font-size: 15px;
    line-height: 1.75;
}

/* === TYPOGRAPHY ============================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-heading) !important;
    font-weight: 500;
}

a {
    color: var(--link) !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

a:visited {
    color: var(--muted) !important;
}

a:hover, a:focus {
    color: var(--link-hover) !important;
    text-decoration: none;
}

blockquote {
    border-left: 3px solid var(--accent-gold);
    color: var(--text-secondary);
    font-style: italic;
    padding: 0.5em 1em;
    margin: 0 0 1em;
    background-color: var(--bg-tile) !important;
    border-radius: 0 4px 4px 0;
}

pre, code, kbd {
    background-color: var(--bg-tile) !important;
    color: var(--accent-gold) !important;
    border: 1px solid var(--border);
    border-radius: 3px;
}

hr {
    border-color: var(--border);
    background-color: var(--border);
}

::selection {
    background-color: rgba(64, 213, 196, 0.25);
    color: var(--text-body);
}

/* === PAGE WRAPPER =========================================== */
#page,
.site,
.wrapper,
#custom-background-css {
    background-color: var(--bg-page) !important;
}

/* === TOP BAR ================================================ */
.blogus-top-bar,
.top-bar,
.topbar,
[class*="top-bar"],
[class*="topbar"] {
    background-color: var(--bg-tile) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}

.blogus-top-bar a,
.top-bar a,
.topbar a {
    color: var(--text-secondary) !important;
}

.blogus-top-bar a:hover,
.top-bar a:hover,
.topbar a:hover {
    color: var(--link) !important;
}

/* === HEADER ================================================= */
.site-header,
#masthead,
header.site-header {
    background-color: var(--bg-tile) !important;
    border-bottom: 1px solid var(--border) !important;
}

.site-title,
.site-title a,
.navbar-brand {
    color: var(--text-heading) !important;
    font-weight: 700;
}

.site-title a:hover,
.navbar-brand:hover {
    color: var(--accent-gold-light) !important;
}

.site-description {
    color: var(--muted) !important;
}

.header-image {
    display: block;
    max-width: 100%;
    height: auto;
}

/* === NAVIGATION / BOOTSTRAP NAVBAR ========================= */
.navbar,
.main-navigation,
#site-navigation,
.blogus-main-navigation {
    background-color: var(--bg-nav) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.navbar-nav .nav-link,
.main-navigation a,
.nav-menu a,
.blogus-menu a {
    color: var(--muted) !important;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.navbar-nav .nav-link:hover,
.main-navigation a:hover,
.nav-menu a:hover {
    color: var(--link) !important;
    background-color: var(--bg-tile-hover) !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .active > .nav-link,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: var(--link) !important;
    border-bottom: 2px solid var(--accent-gold);
}

/* Dropdowns */
.dropdown-menu,
.main-navigation ul ul,
#site-navigation ul ul {
    background-color: var(--bg-dropdown) !important;
    border: 1px solid #6E78A7 !important;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dropdown-item,
.main-navigation ul ul a,
#site-navigation ul ul a {
    background-color: var(--bg-dropdown) !important;
    color: var(--muted) !important;
    border-bottom: 1px solid rgba(110, 120, 167, 0.3);
}

.dropdown-item:hover,
.main-navigation ul ul a:hover,
#site-navigation ul ul a:hover {
    background-color: var(--bg-tile-hover) !important;
    color: var(--link) !important;
}

.dropdown-divider {
    border-color: var(--border) !important;
}

/* Mobile togglers */
.navbar-toggler {
    background-color: var(--bg-tile-hover) !important;
    border: 1px solid var(--border) !important;
}

.navbar-toggler-icon {
    filter: invert(1) brightness(1.5);
}

.menu-toggle {
    background-color: var(--bg-tile-hover) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
    border-radius: 3px;
}

.menu-toggle:hover {
    background-color: var(--bg-nav) !important;
    color: var(--link) !important;
}

/* === CONTENT AREA =========================================== */
#content,
.site-content,
#primary,
.content-area {
    background-color: var(--bg-page) !important;
}

/* === BOOTSTRAP CARDS ======================================== */
.card {
    background-color: var(--bg-tile) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
    border-color: var(--border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.card-body {
    background-color: var(--bg-tile) !important;
    color: var(--text-body) !important;
}

.card-title,
.card-title a {
    color: var(--text-heading) !important;
}

.card-title a:hover {
    color: var(--accent-gold-light) !important;
}

.card-text {
    color: var(--text-body) !important;
}

.card-footer {
    background-color: var(--bg-tile-hover) !important;
    border-top: 1px solid var(--border-subtle) !important;
    color: var(--muted) !important;
}

/* === POST / ARTICLE ========================================= */
.hentry,
.post,
.bs-blog-post,
article {
    background-color: var(--bg-tile) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    margin-bottom: 2rem;
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.entry-header {
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
}

.entry-title,
.entry-title a {
    color: var(--text-heading) !important;
    text-decoration: none;
}

.entry-title a:hover {
    color: var(--accent-gold-light) !important;
}

.entry-meta,
.entry-footer,
.post-meta {
    color: var(--muted) !important;
    font-size: 0.8125rem;
}

.entry-meta a,
.entry-footer a,
.post-meta a {
    color: var(--muted) !important;
}

.entry-meta a:hover,
.entry-footer a:hover,
.post-meta a:hover {
    color: var(--link) !important;
}

.entry-content,
.entry-summary,
.post-content {
    color: var(--text-body) !important;
}

.entry-content a,
.entry-summary a {
    color: var(--link) !important;
    text-decoration: underline;
    text-decoration-color: rgba(64, 213, 196, 0.4);
}

.entry-content a:hover,
.entry-summary a:hover {
    color: var(--link-hover) !important;
}

/* Read more */
.more-link,
.read-more,
a.read-more {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.3rem 0.8rem;
    background-color: var(--bg-tile-hover) !important;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--accent-gold) !important;
    font-size: 0.8125rem;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.more-link:hover,
.read-more:hover {
    background-color: var(--bg-nav) !important;
    color: var(--accent-gold-light) !important;
}

/* Category / tag badges */
.cat-links a,
.tags-links a,
.badge {
    background-color: var(--bg-tile-hover) !important;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-secondary) !important;
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cat-links a:hover,
.tags-links a:hover {
    background-color: var(--bg-nav) !important;
    color: var(--link) !important;
    border-color: var(--link);
}

/* === IMAGE CAPTIONS ========================================= */
.wp-caption {
    background-color: var(--bg-tile) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 0.4rem;
    max-width: 100%;
}

.wp-caption-text,
.wp-caption p,
figcaption,
.gallery-caption {
    color: var(--text-secondary) !important;
    font-size: 0.8125rem;
    text-align: center;
    margin: 0.3rem 0 0.2rem;
}

/* === SIDEBAR / WIDGETS ====================================== */
#secondary,
.widget-area,
.sidebar {
    background-color: var(--bg-page) !important;
}

.widget,
.bs-widget,
.blogus-widget,
.sidebar-widget,
.bs-sidebar-widget,
#secondary .widget,
.widget-area .widget,
[class*="bs-widget"],
[class*="blogus-widget"] {
    background-color: var(--bg-tile) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    padding: 1.2rem 1.4rem;
}

.widget-title,
.widgettitle {
    color: var(--accent-gold) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget ul li {
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.3rem 0;
    color: var(--text-body);
}

.widget ul li:last-child { border-bottom: none; }

.widget a {
    color: var(--text-secondary) !important;
    text-decoration: none;
}

.widget a:hover {
    color: var(--link) !important;
}

/* Search */
.search-form .search-field {
    background-color: var(--bg-tile-hover) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    border-radius: 3px 0 0 3px;
    padding: 0.4rem 0.8rem;
}

.search-form .search-field:focus {
    border-color: var(--link) !important;
    outline: none;
}

.search-form .search-submit {
    background-color: var(--bg-nav) !important;
    border: 1px solid var(--border) !important;
    border-left: none !important;
    color: var(--link) !important;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    padding: 0.4rem 0.8rem;
}

.search-form .search-submit:hover {
    background-color: var(--bg-tile-hover) !important;
    color: var(--link-hover) !important;
}

/* === BOOTSTRAP UTILITIES ==================================== */
.bg-white,
.bg-light {
    background-color: var(--bg-tile) !important;
}

.bg-dark {
    background-color: var(--bg-nav) !important;
}

.text-dark,
.text-body {
    color: var(--text-body) !important;
}

.text-muted {
    color: var(--muted) !important;
}

.text-light,
.text-white {
    color: var(--text-body) !important;
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: var(--border) !important;
}

.btn-primary {
    background-color: var(--bg-nav) !important;
    border-color: var(--link) !important;
    color: var(--link) !important;
}

.btn-primary:hover {
    background-color: var(--link) !important;
    color: var(--bg-page) !important;
}

.btn-secondary,
.btn-light {
    background-color: var(--bg-tile-hover) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

.btn-secondary:hover,
.btn-light:hover {
    background-color: var(--bg-nav) !important;
    color: var(--link) !important;
}

.btn-outline-primary {
    border-color: var(--link) !important;
    color: var(--link) !important;
}

.btn-outline-primary:hover {
    background-color: var(--link) !important;
    color: var(--bg-page) !important;
}

.list-group-item {
    background-color: var(--bg-tile) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-body) !important;
}

.list-group-item:hover {
    background-color: var(--bg-tile-hover) !important;
}

.list-group-item.active {
    background-color: var(--bg-nav) !important;
    border-color: var(--link) !important;
    color: var(--link) !important;
}

.alert-info {
    background-color: rgba(28, 44, 84, 0.6) !important;
    border-color: var(--link) !important;
    color: var(--text-body) !important;
}

.alert-warning {
    background-color: rgba(244, 196, 61, 0.15) !important;
    border-color: var(--accent-orange) !important;
    color: var(--accent-orange) !important;
}

.alert-danger {
    background-color: rgba(156, 33, 33, 0.2) !important;
    border-color: var(--accent-red) !important;
    color: var(--accent-red) !important;
}

/* === TABLES ================================================= */
.table,
table {
    color: var(--text-body) !important;
}

.table th,
th {
    background-color: var(--bg-nav) !important;
    color: var(--text-heading) !important;
    border-color: var(--border) !important;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table td,
td {
    border-color: var(--border-subtle) !important;
    color: var(--text-body) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-tile) !important;
}

.table-hover tbody tr:hover td {
    background-color: var(--bg-tile-hover) !important;
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--border) !important;
}

/* === PAGINATION ============================================= */
.pagination,
.page-numbers,
.bs-pagination,
[class*="pagination"] {
    background-color: transparent !important;
}

.pagination .page-item,
.page-numbers li {
    background-color: var(--bg-tile) !important;
}

.pagination .page-link,
.page-numbers a,
.page-numbers span,
.page-numbers .current {
    background-color: var(--bg-tile) !important;
    border-color: var(--border) !important;
    color: var(--link) !important;
}

.pagination .page-link:hover,
.page-numbers a:hover {
    background-color: var(--bg-tile-hover) !important;
    border-color: var(--border) !important;
    color: var(--link-hover) !important;
}

.pagination .page-item.active .page-link,
.page-numbers .current {
    background-color: var(--bg-nav) !important;
    border-color: var(--link) !important;
    color: var(--link) !important;
}

.pagination .page-item.disabled .page-link {
    background-color: var(--bg-tile) !important;
    color: var(--muted) !important;
}

.nav-links,
.paging-navigation,
.post-navigation {
    background-color: var(--bg-tile) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    margin: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links a,
.paging-navigation a,
.post-navigation a {
    color: var(--link) !important;
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
}

.nav-links a:hover,
.paging-navigation a:hover,
.post-navigation a:hover {
    background-color: var(--bg-tile-hover) !important;
    color: var(--link-hover) !important;
}

/* === COMMENTS =============================================== */
#comments {
    background-color: var(--bg-tile) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 1.5rem 2rem;
    margin-top: 2rem;
}

.comments-title,
.comment-reply-title {
    color: var(--text-heading) !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.comment-body {
    background-color: var(--bg-page) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

.comment-author .fn {
    color: var(--accent-gold) !important;
    font-weight: 500;
}

.comment-metadata,
.comment-metadata a {
    color: var(--muted) !important;
    font-size: 0.8125rem;
}

.comment-content {
    color: var(--text-body) !important;
}

.comment-form label {
    color: var(--text-secondary) !important;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    background-color: var(--bg-tile-hover) !important;
    border: 1px solid var(--border) !important;
    border-radius: 3px;
    color: var(--text-secondary) !important;
    padding: 0.5rem 0.75rem;
    width: 100%;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--link) !important;
    outline: none;
}

/* === FORMS (GENERAL) ======================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select,
.form-control {
    background-color: var(--bg-tile-hover) !important;
    border: 1px solid var(--border) !important;
    border-radius: 3px;
    color: var(--text-secondary) !important;
    padding: 0.5rem 0.75rem;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--link) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(64, 213, 196, 0.15) !important;
}

.form-control::placeholder {
    color: var(--muted) !important;
    opacity: 0.7;
}

input[type="submit"],
button[type="submit"] {
    background-color: var(--bg-nav) !important;
    border: 1px solid var(--link) !important;
    border-radius: 3px;
    color: var(--link) !important;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 0.5rem 1.2rem;
    text-transform: uppercase;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--link) !important;
    color: var(--bg-page) !important;
}

/* === FOOTER ================================================= */
.site-footer,
#colophon,
footer {
    background-color: var(--bg-tile) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--muted) !important;
    margin-top: 3rem;
}

.site-footer a,
#colophon a,
footer a {
    color: var(--muted) !important;
}

.site-footer a:hover,
#colophon a:hover,
footer a:hover {
    color: var(--link) !important;
}

.site-info {
    color: var(--muted) !important;
    text-align: center;
}

.footer-widgets,
.footer-sidebar,
.footer-widget-area {
    background-color: var(--bg-tile) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

/* === RELATED POSTS ========================================== */
.relpost-block-single,
.relpost-block,
[class*="relpost"] {
    background-color: var(--bg-tile) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 6px;
    color: var(--text-body) !important;
}

.relpost-block-single a,
.relpost-block a {
    color: var(--text-heading) !important;
}

.relpost-block-single a:hover,
.relpost-block a:hover {
    color: var(--accent-gold-light) !important;
}

/* === BLOGUS-SPECIFIC COMPONENTS ============================ */

.mainfeatured,
.blogus-featured {
    background-color: var(--bg-page) !important;
}

.blogus-block-title,
.section-title,
.widget-block-title {
    color: var(--text-heading) !important;
    border-left: 3px solid var(--accent-gold);
    padding-left: 0.6rem;
}

.blogus-trending,
.trending-label,
.popular-label {
    background-color: var(--accent-gold) !important;
    color: var(--bg-page) !important;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
}

.blogus-ticker,
.breaking-news,
[class*="ticker"] {
    background-color: var(--bg-nav) !important;
    color: var(--text-body) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.blogus-ticker .ticker-label,
.breaking-news .label {
    background-color: var(--accent-red) !important;
    color: #fff !important;
}

.blogus-social a,
.social-links a {
    color: var(--text-secondary) !important;
}

.blogus-social a:hover,
.social-links a:hover {
    color: var(--link) !important;
}

/* === SCROLLBAR ============================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }