/* ==================================================
   DECEPTION WATCH
   Shared Site Styles
   deception-watch.css
   ================================================== */


/* ==================================================
   COLOR PALETTE
   ================================================== */

:root {

    --dw-bg: #000000;

    --dw-panel: #222222;

    --dw-panel-alt: #333333;

    --dw-text: #d7d1c0;

    --dw-text-soft: #A4A4A4;

    --dw-accent: #918927;

    --dw-border: #918927;

    --dw-shadow:
        0 2px 8px rgba(0,0,0,.5);

}


/* ==================================================
   BASE
   ================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--dw-bg);
    color: var(--dw-text);
    margin: 0;
    padding: 0;
}


/* ==================================================
   GLOBAL LINKS
   ================================================== */

a:link,
a:visited {
    color: var(--dw-accent);
    text-decoration: none;
}

a:hover {
    color: var(--dw-accent);
    text-decoration: underline;
}

a:active {
    color: var(--dw-accent);
}


/* ==================================================
   MAIN CONTENT CONTAINER
   ================================================== */

.article-container {

    background: var(--dw-panel);

    color: #ffffff;

    max-width: 1400px;

    margin: 0 auto;

    border: 4px solid var(--dw-border);

    box-sizing: border-box;
}


/* ==================================================
   HEADER BAND
   ================================================== */

.dw-header-band {

    position: sticky;

    top: 0;

    z-index: 5000;

    background: var(--dw-panel);

    border-bottom: 1px solid var(--dw-border);

    box-shadow: var(--dw-shadow);
}


/* ==================================================
   PRIMARY NAVIGATION
   ================================================== */

.dw-nav {
    background: transparent;
}


.dw-nav-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    max-width: 1400px;

    margin: 0 auto;

    padding: .75rem 1.25rem;

    gap: 1rem;
}


.dw-brand {

    color: var(--dw-text-soft) !important;

    text-decoration: none;

    font-family: "Trebuchet MS", Arial, sans-serif;

    font-size: 1.3rem;

    font-weight: 600;

    white-space: nowrap;
}


.dw-menu {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 1.25rem 1.5rem;

    margin: 0;

    padding: 0;

    list-style: none;
}


.dw-menu a {

    color: var(--dw-text-soft) !important;

    text-decoration: none;

    font-family: Arial, sans-serif;
}


.dw-menu a:hover {

    color: var(--dw-accent) !important;

    text-decoration: underline;
}


/* ==================================================
   DROPDOWNS
   ================================================== */

.dw-dropdown {
    position: relative;
}


.dw-dropdown-menu {

    position: absolute;

    top: calc(100% + .75rem);

    left: 50%;

    transform: translateX(-50%);

    min-width: 240px;

    margin: 0;

    padding: 1rem 0;

    list-style: none;

    background: var(--dw-panel-alt);

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 8px 24px rgba(0,0,0,.45);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;

    z-index: 1000;
}


.dw-dropdown:hover .dw-dropdown-menu,
.dw-dropdown:focus-within .dw-dropdown-menu {

    opacity: 1;

    visibility: visible;
}


.dw-dropdown-menu a {

    display: block;

    padding: .75rem 2rem;

    color: var(--dw-text);

    text-decoration: none;

    transition: all .2s ease;
}


.dw-dropdown-menu a:hover {

    background: rgba(255,255,255,.06);

    color: #ffffff;

    padding-left: 2.3rem;
}


.dw-caret {

    display: inline-block;

    margin-left: .4rem;

    font-size: .7em;

    transition: transform .25s ease;
}


.dw-dropdown:hover .dw-caret {
    transform: rotate(180deg);
}


/* ==================================================
   POSTS
   ================================================== */

.dw-post {

    max-width: 720px;

    margin: 0 auto 5rem auto;
}


.dw-post-image-link {

    display: inline-block;

    width: auto;
}


/* ==================================================
   CONTENT ELEMENTS
   ================================================== */

.dw-category {

    display: inline-block;

    padding: .25rem .75rem;

    border: 1px solid var(--dw-border);

    color: var(--dw-accent);

    letter-spacing: .1em;

    font-size: .8rem;
}


.dw-divider {

    width: 160px;

    margin: 3rem auto;

    border-top: 1px solid #555555;
}


.dw-post + .dw-divider {

    margin-top: 4rem;

    margin-bottom: 4rem;
}


/* ==================================================
   TIMELINES
   ================================================== */

.timeline-row {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    gap: .5rem 2rem;

    font: 18px "Arial Narrow", Arial, sans-serif;

    color: #ffffff;
}


.timeline-row + .timeline-row {
    margin-top: 1rem;
}


.timeline-row--center {
    justify-content: center;
}


/* ==================================================
   BACK TO TOP
   ================================================== */

.back-to-top {

    background: rgba(0,0,0,.78);

    color: #e8e8e8;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 10px;

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    box-shadow:
        0 4px 12px rgba(0,0,0,.50),
        0 0 0 1px rgba(255,255,255,.03);

    transition:
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.back-to-top:hover {

    background: rgba(0,0,0,.90);

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(0,0,0,.60),
        0 0 0 1px rgba(255,255,255,.08);
}


.back-to-top:active {
    transform: translateY(0);
}


/* ==================================================
   RESPONSIVE NAVIGATION
   ================================================== */

@media (max-width: 1100px) {

    .dw-nav-inner {

        flex-direction: column;

        gap: .75rem;
    }

    .dw-menu {

        justify-content: center;

        gap: .75rem 1.25rem;
    }

}


/* ==================================================
   MOBILE DROPDOWNS
   ================================================== */

@media (max-width: 768px) {

    .dw-dropdown-menu {

        left: 0;

        transform: none;

        min-width: 220px;
    }

}