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

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

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

/* Your main content area grows to fill space */
main, .dq-main, .content, .container-main { /* use whichever you have */
    flex: 1 0 auto;
}

/* Rune?style headline */
.dq-title {
    font-family: "Cinzel", ui-serif, Georgia, serif;
    letter-spacing: .4px;
}

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

.dq-navbar .nav-link {
    color: var(--dq-text);
    opacity: .85;
}

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

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

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

.dq-parchment h1, .dq-parchment h2, .dq-parchment h3 {
    color: #231f18;
}

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

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

.dq-parchment a:visited { color: #21334e; }

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

.dq-card .card-title {
    color: var(--dq-gold);
}

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

/* Links */
a,
.dq-navbar .nav-link {
    color: var(--dq-text);
    opacity: .85;
    text-decoration: none;
}

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

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

/* --- Pressed (mouse down) state --- */
a:active,
.dq-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(--dq-gold);
    --bs-btn-border-color: var(--dq-gold-2);
    --bs-btn-hover-bg: #d8b97d;
    --bs-btn-hover-border-color: #d8b97d;
}

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

.badge-darker-blue {
    background: linear-gradient(180deg, #2079b1, var(--dq-bg));
    color: #b1dbe3;
    border: 1px solid var(--dq-gold-2);
}

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

/* Icon ring */
.dq-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(--dq-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(--dq-panel), #0f1214);
    color: var(--dq-muted);
}

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

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

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

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

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