/* =========================================================
   Theme: "Mission Black"
   Charcoal #151514, cream #fcf8e6 accent, blue #063056 when clicked, wide-tracked
   uppercase headings, sharp corners, outlined buttons.
   Remove the <link> to this file in index.html to undo.
   ========================================================= */

:root {
    --extra-color: #fcf8e6 !important;
    --mb-white: #fcf8e6;
    --mb-bg: #151514;
    --mb-panel: #1c1c1b;
    --mb-press: #063056;
    --mb-line: rgba(255, 255, 255, 0.14);
    --mb-line-strong: rgba(252, 248, 230, 0.85);
    --mb-text: #b8b8b8;
    --mb-muted: #6f6f6f;
}

body { background: var(--mb-bg) !important; color: var(--mb-text); }

/* ---- Sidebar ---- */
.header { background: var(--mb-bg) !important; border-right: 1px solid var(--mb-line); }
.header .logo { background: var(--mb-white) !important; }
.header .logo a { color: var(--mb-bg) !important; }
.header .logo a span { font-family: 'Inter', sans-serif !important; font-size: 22px !important; font-weight: 600 !important; }
.header .top-menu .icon { color: var(--mb-muted) !important; }
.header .top-menu li.active .icon,
.header .top-menu a:hover .icon { color: var(--mb-white) !important; }
.header .top-menu .link { background: var(--mb-white) !important; color: var(--mb-bg) !important; border-radius: 0 !important;
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px !important; font-weight: 500 !important; }

/* ---- Content panels ---- */
.card-inner .card-container .card-wrap { background: var(--mb-bg) !important; }
.card-box { background: var(--mb-panel) !important; border: 1px solid var(--mb-line); border-radius: 0 !important; box-shadow: none !important; }
.resume-items .resume-item:before { background: var(--mb-line) !important; }

/* Big faded background words (ABOUT ME, RESUME...) */
.title-bg { opacity: 0.045 !important; letter-spacing: 0.08em !important; }

/* ---- Headings: uppercase, wide tracking ---- */
.content .title {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--mb-white) !important;
}
.content .title .text-extra-color { color: var(--mb-muted) !important; }
.service-item .name,
.resume-item .name {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 14px !important;
    font-weight: 600 !important;
}
.resume-item .date { color: var(--mb-muted) !important; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px !important; }
.service-item p, .resume-item p { color: var(--mb-text); }

/* About intro */
.about-intro .about-lead { color: var(--mb-white) !important; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600 !important; font-size: 0.85em; line-height: 1.6 !important; }
.about-intro .about-para { color: var(--mb-text); }
.content.inner-top .text strong.text-extra-color { color: var(--mb-white) !important; }

/* ---- Buttons: outlined, fill white on hover ---- */
.circle-bts a {
    background: transparent !important;
    border: 1.5px solid var(--mb-line-strong) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background 0.25s ease, color 0.25s ease !important;
}
.circle-bts a span {
    color: var(--mb-white) !important;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px !important;
    font-weight: 600 !important;
}
.circle-bts a:hover { background: var(--mb-white) !important; }
.circle-bts a:hover span,
.circle-bts a:hover .icon { color: var(--mb-bg) !important; }
.circle-bts.contact-row .contact-email { color: var(--mb-text); letter-spacing: 0.04em; }
.circle-bts.contact-row .contact-email .email-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px; }

/* ---- Skills bars ---- */
.skills-list .progress { background: rgba(255, 255, 255, 0.1) !important; height: 2px !important; }
.skills-list .percentage { background: var(--mb-white) !important; }
.skills-list li { border-color: var(--mb-line) !important; }
.skills-list .name { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px !important; }

/* ---- Portfolio filters ---- */
.content.works .filter-menu .f_btn { text-transform: uppercase; letter-spacing: 0.14em; }
.content.works .filter-menu .f_btn.active { color: var(--mb-white) !important; }

/* Rounded corners off everywhere for the sharp look */
.card-box, .box-item, .box-item .image, .box-item img { border-radius: 0 !important; }

/* Skill sets line: tracked caps to match the headings */
.content.inner-top .text p > strong.text-extra-color {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72em;
    font-weight: 600 !important;
    line-height: 2;
}
.circle-bts.contact-row { gap: 12px 24px !important; }

/* Cream white everywhere the site used pure white text */
.text-white,
.header .top-menu a,
.card-inner .text-white,
.box-item .name { color: var(--mb-white) !important; }
.header .top-menu .link { color: var(--mb-bg) !important; }

/* ---- Clicked / selected state: deep blue #063056 ---- */
.circle-bts a:active,
.circle-bts a:focus-visible {
    background: var(--mb-press) !important;
    border-color: var(--mb-press) !important;
}
.circle-bts a:active span,
.circle-bts a:active .icon,
.circle-bts a:focus-visible span,
.circle-bts a:focus-visible .icon { color: var(--mb-white) !important; }

/* Sidebar: the page you're on gets a blue tile */
.header .top-menu li.active .icon {
    background: var(--mb-press) !important;
    color: var(--mb-white) !important;
    border-radius: 0 !important;
    margin: 0 6px !important;
}
.header .top-menu a:active .icon { background: var(--mb-press) !important; color: var(--mb-white) !important; }

/* Portfolio filters: real tappable buttons that wrap cleanly on phones */
.content.works .filter-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 28px;
    position: relative;
    z-index: 2;
}
.content.works .filter-menu .f_btn {
    margin: 0 !important;
    height: auto !important;
    padding: 0 !important;
}
.content.works .filter-menu .f_btn input {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    pointer-events: none;
}
.content.works .filter-menu .f_btn label {
    display: block;
    padding: 11px 14px;
    border: 1px solid var(--mb-line);
    color: var(--mb-white);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.content.works .filter-menu .f_btn:hover label { border-color: var(--mb-line-strong); }
.content.works .filter-menu .f_btn.active label,
.content.works .filter-menu .f_btn label:active {
    background: var(--mb-press);
    border-color: var(--mb-press);
    color: var(--mb-white) !important;
}
@media (max-width: 720px) {
    .content.works .filter-menu { justify-content: flex-start; margin-top: 12px; }
    .content.works .filter-menu .f_btn label { padding: 12px 13px; font-size: 11px; }
}

/* ---- Font: Inter everywhere (icon font left alone) ---- */
body,
body *:not(.la):not(.lab):not(.las):not(.lar) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}