/* =========================================================
   Forecan — Konstantin Ievlev
   Black + orange/red
   ========================================================= */

:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    --q2-accent: #ff541f;
    --q2-accent-contrast: #ffffff;
    --q2-link: #ff6a2f;
    --q2-focus-ring: rgba(255, 84, 31, .45);
}

/* Main background */
html,
body,
#page-wrapper,
main {
    background: #080808;
    color: #f3f3f3;
}

/* Header */
#header {
    background: rgba(8, 8, 8, .96);
    border-bottom: 1px solid #242424;
}

/* Navigation */
#header a,
.navbar a,
.dropmenu a {
    color: #f3f3f3;
}

#header a:hover,
.navbar a:hover,
.dropmenu a:hover {
    color: #ff541f;
}

/* Current navigation item */
.dropmenu .active > a,
.dropmenu a.active {
    color: #ff541f;
}

/* Links */
a {
    color: #ff6a2f;
}

a:hover {
    color: #ff8a5c;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff;
}

/* Selection */
::selection {
    background: #ff541f;
    color: #ffffff;
}

/* Buttons */
button,
.button,
.btn,
input[type="submit"] {
    border-color: #ff541f;
}

/* Content areas */
.content-item {
    color: #ededed;
}

/* Song pages */
.forecan-song {
    color: #ededed;
}

.song-type {
    color: #ff6a2f;
    opacity: 1;
}

.song-year {
    color: #a8a8a8;
}

.song-video-link a {
    border-color: #ff541f;
    color: #ff6a2f;
}

.song-video-link a:hover {
    background: #ff541f;
    color: #ffffff;
}

/* Footer */
footer {
    background: #080808;
    border-top-color: #242424;
}

/* Brand logo */
.forecan-logo {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1.05;
}

.forecan-logo-main {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.forecan-logo-sub {
    margin-top: .22rem;
    color: #ff541f;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.forecan-logo:hover .forecan-logo-main {
    color: #ff541f;
}

/* Active navigation item */
.dropmenu li.active > a,
.dropmenu a.active,
.dropmenu li.selected > a {
    background: #ff541f !important;
    color: #080808 !important;
    border-color: #ff541f !important;
}

.dropmenu li.active > a:hover,
.dropmenu a.active:hover,
.dropmenu li.selected > a:hover {
    background: #ff6a2f !important;
    color: #080808 !important;
}