/**
 * damaplus.css (styleid=1)
 */
/**
 * DejaQ Theme Style
 *
 *
 * @package    DamaPlus
 * @author     Vincent M. <vince@dejaq.org>
 * @license    http://www.gnu.org/licenses/gpl-3.0-standalone.html
 * @link       https://damaplus.org/
 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&display=swap');

:root {
    --bg: #14171a;
    --panel: #1b1f22;
    --panel-2: #22272b;
    --accent: #2f8f46;
    --accent-2: #7ccf8c;
    --gold: #154c87;
    --gold-2: #5175b8;
    --parchment: #efe2bf;
    --ink: #2a2620;
    --text: #e6e6e6;
    --muted: #b7b7b7;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --radius: 1rem;
}

/* Global */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

body {
    background: var(--bg);
    color: #e6e6e6;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

main, .main, .content, .container-main {
    flex: 1 0 auto;
}

/* TODO Add to product */
.main p.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: inherit;
    margin: 0.5em 0;
}

.card-body {
    margin-bottom: -50px;
}

.post-meta .meta-left a {
    margin-right: 10px;
    color: inherit;
    text-decoration: none;
}

.post-meta .meta-left a:hover {
    color: #d5d5d5;
}

.post-meta .meta-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.title {
    font-family: "Cinzel", ui-serif, Georgia, serif;
    letter-spacing: .4px;
}
.main .panel,
.sidebar .panel {
margin-bottom: -10px;
overflow: hidden;
}
/**
 * SIDEBARS
 */
.sidebar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.sidebar > :first-child {
    margin-top: 0 !important;
}

.sidebar .mb-2 {
    background: rgba(0, 0, 0, .5);
    border: 1px solid #3b3b3b;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -webkit-box-shadow: inset 1px 1px 15px 1px #000000;
    -moz-box-shadow: inset 1px 1px 15px 1px #000000;
    box-shadow: inset 1px 1px 15px 1px #000000;
    position: relative;
    color: #eff4ff;
}

.sidebar a {
    color: #b8cbe4;
    text-decoration: none;
    transition: color .2s ease;
}

.sidebar a:hover {
    color: #82b1ff;
}

@media (min-width: 992px) {
    .sidebar {
        position: sticky;
        top: 12px;
    }
}

/* Navbar */
.navbar {
    background: linear-gradient(180deg, #111416, var(--panel));
    border-bottom: 1px solid rgba(200, 170, 110, .25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), var(--shadow);
}

.navbar .nav-link {
    color: #e6e6e6;
    opacity: .85;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--gold);
    opacity: 1;
}

.navbar-toggler {
    filter: invert(1) contrast(1.2);
}

/* Panels */
.panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .8)), var(--parchment);
    color: #e6e6e6;
    border-radius: var(--radius);
    border: 1px solid rgba(40, 30, 15, .25);
    box-shadow: var(--shadow);
}

.panel h1, .panel h2, .panel h3 {
    color: #e6e6e6;
}

/* Links */
.panel {
    --bs-link-color: #21334e;        /* normal */
    --bs-link-hover-color: #063a86;  /* hover/focus */
    --bs-link-underline-color: currentColor; /* optional: underline matches text */
}

.panel .nav-link,
.panel .btn-link,
.panel a:not(.btn):not(.nav-link) {
    color: var(--bs-link-color);
}
.panel .nav-link:hover,
.panel .btn-link:hover,
.panel a:hover {
    color: var(--bs-link-hover-color);
}

.panel a:visited { color: #21334e; }

/* Stone cards */
.card {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid rgba(200, 170, 110, .18);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: #e6e6e6;
}

.card .card-title,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    color: #c3c0b3;
}

.card .list-group-item {
    background: transparent;
    color: #e6e6e6;
    border-color: rgba(255, 255, 255, .06);
}

/* Links */
a,
.navbar .nav-link {
    color: #e6e6e6;
    opacity: .85;
    text-decoration: none;
}

/* --- Hover & focus states --- */
a:hover,
a:focus,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--parchment);
    opacity: 1;
    text-decoration: none;
}

/* --- Active links (not pressed state, but "active" class) --- */
.navbar .nav-link.active {
    color: #b3a786;
    opacity: 1;
}

/* --- Pressed (mouse down) state --- */
a:active,
.navbar .nav-link:active {
    color: #fff;
    box-shadow: 0 0 18px rgba(27, 42, 78, 0.6);
    transform: translateY(-1px);
}

/* Buttons */
.btn-dq {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1b2a4e; /* deep navy */
    --bs-btn-border-color: #16213b;
    --bs-btn-hover-bg: #16213b;
    --bs-btn-hover-border-color: #11182c;
    --bs-btn-active-bg: #0d1323;
    --bs-btn-active-border-color: #0a0e19;
    --bs-btn-focus-shadow-rgb: 27, 42, 78;

    font-weight: 600;
    border-radius: 0.45rem;
    padding: 0.55rem 1.35rem;
    transition: all 0.25s ease-in-out;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

    background-color: var(--bs-btn-bg);
    background-image: linear-gradient(180deg, #1b2a4e, #11182c); /* dark gradient */
    border-color: var(--bs-btn-border-color);
}

.btn-dq:hover {
    color: #fff;
    background-color: var(--bs-btn-hover-bg);
    background-image: linear-gradient(180deg, #22376a, #16213b); /* brighter top, deep base */
    border-color: var(--bs-btn-hover-border-color);
    box-shadow: 0 0 18px rgba(27, 42, 78, 0.6);
    transform: translateY(-1px);
}

.btn-dq:active {
    background-color: var(--bs-btn-active-bg);
    background-image: linear-gradient(180deg, #0d1323, #0a0e19);
    border-color: var(--bs-btn-active-border-color);
    transform: translateY(0);
    box-shadow: 0 0 8px rgba(10, 14, 25, 0.5);
}


.btn-gold {
    --bs-btn-color: #231f18;
    --bs-btn-bg: var(--gold);
    --bs-btn-border-color: var(--gold-2);
    --bs-btn-hover-bg: #d8b97d;
    --bs-btn-hover-border-color: #d8b97d;
}

/* Badges */
.badge-gold {
    background: linear-gradient(180deg, #e3c992, var(--gold));
    color: #231f18;
    border: 1px solid var(--gold-2);
}

/* Decorative rule */
.rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 170, 110, .5), transparent);
}

/* Icon ring */
.ring {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .06), transparent 40%), var(--panel-2);
    border: 1px solid rgba(200, 170, 110, .25);
}

/* Footer */
footer {
    margin-top: auto;
    border-top: 1px solid rgba(200, 170, 110, .18);
    background: linear-gradient(180deg, var(--panel), #0f1214);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    line-height: normal;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
    width: 100%;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

.footer_links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1.25rem;
}

.footer_links li a {
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.footer_links li a:hover {
    text-shadow: 0 0 4px rgba(130, 177, 255, 0.4);
}

.footer-center {
    text-align: center;
    flex: 1;
    font-size: 0.9rem;
}

.footer-center a {
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer_select select {

}

.footer_select select:hover,
.footer_select select:focus {

}

@media (max-width: 767.98px) {
    footer.footer {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center;
        row-gap: 12px;
        text-align: center;
    }

    /* 1) Make the links list vertical and centered */
    footer.footer ul#footer_links.footer_links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        white-space: normal !important; /* defeat any nowrap elsewhere */
        list-style: none;
    }

    footer.footer ul#footer_links.footer_links li {
        display: block !important;
        width: 100%;
        max-width: 480px;
    }

    /* 2) Center the middle text block */
    footer.footer .footer-center {
        width: 100%;
        max-width: 680px;
    }

    /* 3) Make the style chooser sit on its own row and fit */
    footer.footer .footer_select {
        width: 100% !important;
        max-width: 340px;
        margin: 0 auto;
    }
}

@media (max-width: 360px) {
    .footer_links {
        gap: 0.75rem;
    }
}

/* Utilities */
.shadow-deep {
    box-shadow: var(--shadow);
}

/* Modes (simple toggles) */
body.parchment-mode {
    background: var(--parchment);
    color: var(--ink);
}

body.parchment-mode .navbar {
    background: linear-gradient(180deg, #fffdf6, #f6ecd0);
    color: var(--ink);
    border-bottom-color: #d6c28f;
}

body.parchment-mode .card {
    background: #fff7dc;
    color: var(--ink);
    border-color: #e0cd9a;
}

body.parchment-mode .parchment {
    background: #fff8e2;
}