/* ============================================================
   Semi Casual Custom Trucks – Dark Luxury Theme
   Color palette from GH-5 logo:
     Dark bg:       #0f1013
     Darker bg:     #0a0b0d
     Alt section:   #161820
     Accent blue:   #1f5aad
     Text primary:  #d8dce6
     Text secondary:#9aa0ab
     Border:        #22252a
   ============================================================ */

/* ----- Global ----- */

body {
    background-color: #0f1013;
    color: #9aa0ab;
}

body, input, select, textarea {
    color: #9aa0ab;
}

a {
    color: #9aa0ab;
    border-bottom-color: rgba(154, 160, 171, 0.3);
}

a:hover {
    color: #d8dce6;
    border-bottom-color: transparent;
}

strong, b {
    color: #d8dce6;
}

h1, h2, h3, h4, h5, h6 {
    color: #d8dce6;
}

h1:after, h2:after, h3:after, h4:after, h5:after, h6:after {
    border-bottom-color: #1f5aad;
}

blockquote {
    border-left-color: #22252a;
}

code {
    background: #161820;
    border-color: #22252a;
}

hr {
    border-bottom-color: #22252a;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    background-color: #161820;
    border: solid 1px #2e3340;
    color: #9aa0ab;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    border-color: #1f5aad;
    outline: none;
}

label {
    color: #c0c4cc;
}

/* ----- Buttons ----- */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
    color: #d8dce6 !important;
    box-shadow: inset 0 0 0 1px #3a4050;
    background-color: transparent;
}

    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover,
    button:hover,
    .button:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    input[type="submit"].primary,
    input[type="reset"].primary,
    input[type="button"].primary,
    button.primary,
    .button.primary {
        box-shadow: none;
        background-color: #1f5aad !important;
        color: #fff !important;
    }

        input[type="submit"].primary:hover,
        input[type="reset"].primary:hover,
        input[type="button"].primary:hover,
        button.primary:hover,
        .button.primary:hover {
            background-color: #2566c4 !important;
        }

        input[type="submit"].primary:active,
        .button.primary:active {
            background-color: #1a4d94 !important;
        }

/* ----- Header ----- */

#header {
    background-color: #0a0b0d;
    box-shadow: 0 1px 0.25em 0 rgba(0, 0, 0, 0.8);
}

#header h1 {
    color: #d8dce6;
}

#header h1 a {
    color: #d8dce6;
    border-bottom: 0;
}

#header h1 a img.logo {
    height: 2.0em;
    width: auto;
    vertical-align: middle;
    margin-top: -0.1em;
    display: inline-block;
}

#header nav > ul > li > a {
    color: #c0c4cc;
    border-bottom: 0;
}

#header nav > ul > li > a:hover {
    color: #fff;
}

#header nav > ul > li > a.button {
    background-color: #1f5aad;
    color: #fff !important;
    box-shadow: none;
    padding: 0 1.25em;
}

#header nav > ul > li > a.button:hover {
    background-color: #2566c4;
}

/* Transparent alt header on homepage over banner */
#header.alt {
    background-color: transparent !important;
    box-shadow: none !important;
}

#header.alt h1 a,
#header.alt nav > ul > li > a {
    color: #fff !important;
}

#header.alt nav > ul > li > a.button {
    background-color: rgba(31, 90, 173, 0.9) !important;
    box-shadow: none !important;
}

#header.alt nav > ul > li > a.button:hover {
    background-color: rgba(37, 102, 196, 0.95) !important;
}

/* Dropdown menus */
.dropotron {
    background-color: #0d0e10 !important;
    border: solid 1px #22252a !important;
    box-shadow: 0 0.25em 0.75em rgba(0,0,0,0.6) !important;
}

.dropotron li a {
    color: #c0c4cc !important;
    border-bottom: 0;
}

.dropotron li a:hover {
    color: #fff !important;
    background-color: rgba(31, 90, 173, 0.2) !important;
}

/* ----- Banner ----- */

#banner {
    background-color: #0a0b0d;
}

#banner .inner {
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.4) 55%,
        transparent 100%);
}

#banner .inner h2 {
    font-size: 1.65em;
    line-height: 1.35em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

#banner .inner h2 a {
    color: #fff;
    border-bottom: 0;
}

#banner .inner h2 a:hover {
    color: #7aa8e0;
}

/* ----- Wrappers ----- */

.wrapper {
    background-color: #0f1013;
}

.wrapper + .wrapper {
    border-top-color: #22252a;
}

.wrapper.style1 {
    background-color: #0a0b0d;
    color: #9aa0ab;
}

.wrapper.style1 h1, .wrapper.style1 h2, .wrapper.style1 h3,
.wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6 {
    color: #d8dce6;
}

.wrapper.style1 strong, .wrapper.style1 b {
    color: #d8dce6;
}

.wrapper.style1 a {
    color: #9aa0ab;
}

.wrapper.style1 .button {
    color: #d8dce6 !important;
    box-shadow: inset 0 0 0 1px #3a4050;
}

.wrapper.style1 .button.primary {
    background-color: #1f5aad !important;
    box-shadow: none;
    color: #fff !important;
}

.wrapper.style2 {
    background-color: #161820;
}

.wrapper.style2 h1, .wrapper.style2 h2, .wrapper.style2 h3,
.wrapper.style2 h4, .wrapper.style2 h5, .wrapper.style2 h6 {
    color: #d8dce6;
}

.wrapper.style2 strong, .wrapper.style2 b {
    color: #d8dce6;
}

.wrapper.style2 a {
    color: #9aa0ab;
}

.wrapper.style2 input, .wrapper.style2 select, .wrapper.style2 textarea {
    color: #9aa0ab;
    background-color: #0f1013;
    border-color: #2e3340;
}

.wrapper.style2 hr {
    border-bottom-color: #22252a;
}

.wrapper.style2 .button {
    color: #d8dce6 !important;
    box-shadow: inset 0 0 0 1px #3a4050;
}

.wrapper.style2 .button:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.wrapper.style2 .button.primary {
    background-color: #1f5aad !important;
    color: #fff !important;
    box-shadow: none;
}

.wrapper.split > .inner > *:before {
    background-color: #22252a !important;
}

/* ----- Icon wrappers (features section) ----- */

.icon-wrapper.major {
    color: #1f5aad;
    border-color: #22252a;
}

/* ----- Features grid dividers ----- */

.features > section:before {
    background-color: #22252a !important;
}

/* ----- Posts / Gallery grid ----- */

.post {
    border-color: #22252a !important;
}

.wrapper.style2 .posts .post .content h3 {
    color: #1f5aad;
}

.post .content h3 a {
    color: #d8dce6;
}

.post .content h3 a:hover {
    color: #7aa8e0;
}

/* ----- Contact section ----- */

#contact {
    background-color: #0a0b0d;
    border-top-color: #22252a;
}

#contact h2 {
    color: #d8dce6;
}

#contact .bulleted-icons h3 {
    color: #d8dce6;
}

#contact .bulleted-icons a {
    color: #7aa8e0;
}

#contact .bulleted-icons .icon-wrapper {
    color: #1f5aad;
}

/* ----- Footer ----- */

#footer {
    background-color: #0a0b0d;
    border-top-color: #22252a !important;
}

#footer .copyright,
#footer .menu,
#footer .menu a {
    color: #555b66;
}

#footer .menu a:hover {
    color: #9aa0ab;
}

/* ----- Nav panel (mobile drawer) ----- */

#navPanel {
    background-color: #0a0b0d;
}

#navPanel .link {
    color: #c0c4cc;
    border-top-color: #22252a;
}

#navPanel .link:hover {
    color: #fff;
}

/* ----- Major header (inner page title) ----- */

header.major h2 {
    font-size: 1.6em;
    color: #d8dce6;
}

header.major p {
    color: #9aa0ab;
}

/* ----- Responsive video embed ----- */

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 2em 0;
    border: solid 1px #22252a;
    border-radius: 4px;
    background-color: #000;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ----- Equipment lists (product page) ----- */

.equipment-section {
    margin: 0 0 2.5em 0;
}

.equipment-section > h3 {
    color: #7aa8e0 !important;
}

.equipment-section ul {
    list-style: disc;
    padding-left: 1.5em;
    line-height: 1.9em;
}

/* ----- Engine option cards (product page) ----- */

.engine-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    margin: 0 0 2.5em 0;
    list-style: none;
    padding: 0;
}

.engine-card {
    flex: 1;
    min-width: 220px;
    background-color: #161820;
    border: solid 1px #1f5aad;
    padding: 1.5em;
    border-radius: 4px;
}

.engine-card h4 {
    color: #7aa8e0;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    margin-bottom: 0.4em;
    padding-bottom: 0;
}

.engine-card h4:after {
    display: none;
}

.engine-card .stat {
    font-size: 1.3em;
    font-weight: 700;
    color: #d8dce6;
    font-family: "Raleway", Helvetica, sans-serif;
    line-height: 1.3em;
    margin-bottom: 0.5em;
}

.engine-card p {
    font-size: 0.85em;
    color: #9aa0ab;
    margin-bottom: 0;
}

/* ----- Photo gallery grid ----- */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75em;
    margin: 2em 0;
}

.gallery-grid a {
    display: block;
    overflow: hidden;
    border: solid 1px #22252a;
    border-bottom: solid 1px #22252a;
    border-radius: 3px;
    line-height: 0;
}

.gallery-grid a img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.gallery-grid a:hover {
    border-color: #1f5aad;
}

.gallery-grid a:hover img {
    transform: scale(1.05);
    opacity: 0.85;
}

/* ----- Highlight / callout box ----- */

.highlight-box {
    background-color: #161820;
    border-left: solid 4px #1f5aad;
    padding: 1.5em 2em;
    margin: 2em 0;
    border-radius: 0 4px 4px 0;
}

.highlight-box h3 {
    color: #7aa8e0;
    margin-bottom: 0.4em;
    padding-bottom: 0;
}

.highlight-box h3:after {
    display: none;
}

.highlight-box p {
    margin: 0;
    color: #9aa0ab;
}

/* ----- Tagline styling ----- */

.tagline {
    font-family: "Raleway", Helvetica, sans-serif;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    color: #1f5aad;
    letter-spacing: 0.15em;
    margin-bottom: 1em;
    display: block;
}

/* ----- Spotlight image border ----- */

.spotlight .image img {
    border: solid 1px #22252a;
}

/* ----- Image fit on inner pages ----- */

.image.fit {
    margin-bottom: 2em;
    border: solid 1px #22252a;
    overflow: hidden;
    border-radius: 3px;
}

.image.fit img {
    max-height: 480px;
    object-fit: cover;
    width: 100%;
}

/* ----- Responsive ----- */

@media screen and (max-width: 736px) {
    .engine-options {
        flex-direction: column;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .gallery-grid a img {
        height: 160px;
    }
}