/* ============================================
   Vacco Brand Overrides
   Matching https://vacco.us design language
   ============================================ */

/* --- CSS Variable Overrides --- */
:root {
    --ghost-accent-color: #111 !important;
    --color-darkgrey: #111;
    --color-midgrey: #555;
    --color-secondary-text: #767676;
    --color-lightgrey: #f7f7f7;
    --color-border: #e0e0e0;
    --color-wash: #f7f7f7;
    --font-sans: 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Global Typography --- */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    color: #111;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    color: #111;
    letter-spacing: -0.01em;
}

/* --- Navigation --- */
.gh-head {
    background-color: #fff !important;
    border-bottom: 1px solid #f0f0f0;
}

.has-cover:not(.home-template) .gh-head {
    background-color: #111 !important;
}

.gh-head-logo {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.gh-head-menu .nav a {
    font-weight: 400;
    letter-spacing: 0;
    transition: opacity 0.3s ease;
}

.gh-head-menu .nav a:hover {
    opacity: 0.6;
}

/* --- Header / Hero --- */
.site-header {
    background: #111 !important;
}

.site-header-content {
    padding-bottom: 12vmin;
    padding-top: calc(12vmin + 44px);
}

.has-cover .site-header-content {
    background-color: #111 !important;
    min-height: 420px;
}

.site-title {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.site-description {
    font-weight: 300;
    letter-spacing: 0;
}

:is(.site-logo, .site-title) + .site-description {
    font-weight: 300;
    opacity: 0.8;
}

/* --- Post Cards --- */
.post-card {
    transition: transform 0.3s ease;
}

.post-card:hover {
    transform: translateY(-2px);
}

.post-card-image-link {
    border-radius: 8px;
    overflow: hidden;
}

.post-card-image {
    transition: transform 0.6s ease;
}

.post-card:hover .post-card-image {
    transform: scale(1.03);
}

.post-card-title {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.post-card-excerpt {
    color: #555;
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
}

.post-card-tags {
    color: #767676;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1.2rem;
}

.post-card-meta {
    color: #767676;
}

/* --- Article / Post --- */
.article-title {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #111;
}

.article-excerpt {
    color: #555;
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 300;
}

.gh-content > blockquote:not([class]),
.gh-content > dl,
.gh-content > ol,
.gh-content > p,
.gh-content > ul {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    color: #333;
    line-height: 1.7;
}

.gh-content a {
    color: #111 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.3s ease;
}

.gh-content a:hover {
    opacity: 0.6;
}

.gh-content > blockquote:not([class]):before {
    background: #111;
}

.gh-content :not(pre) > code {
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #111;
}

.gh-content pre {
    background: #111;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* --- Buttons / CTA --- */
.gh-head-button {
    background: #111 !important;
    color: #fff !important;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: all 0.3s ease;
}

.gh-head-button:hover {
    background: #333 !important;
    transform: translateY(-1px);
}

.has-cover .gh-head-button {
    background: #fff !important;
    color: #111 !important;
}

.has-cover .gh-head-button:hover {
    background: rgba(255,255,255,0.9) !important;
}

.footer-cta-button span {
    background: #111;
    border-radius: 4px;
    font-weight: 500;
}

/* --- Footer --- */
.site-footer {
    background: #111;
    padding-bottom: 80px;
}

.site-footer .inner {
    color: rgba(255,255,255,0.6);
}

.site-footer a {
    color: rgba(255,255,255,0.6);
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: #fff;
}

.site-footer .copyright a {
    color: #fff;
    font-weight: 500;
}

/* --- Selection color --- */
::selection {
    background: rgba(17,17,17,0.1);
}

/* --- Featured badge --- */
.post-card-featured {
    color: #111 !important;
}

/* --- Image treatment --- */
.article-image img {
    border-radius: 8px;
}

/* --- Dropdown menu --- */
.gh-dropdown {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
}

/* --- Misc spacing and refinements --- */
.post-feed {
    gap: 4vmin 3vmin;
}

.article-byline-meta .author-name {
    font-weight: 600;
    color: #111;
}

.gh-powered-by a {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.gh-powered-by a:hover {
    opacity: 0.7;
}

/* --- Dark mode overrides --- */
html.dark-mode body {
    background: #111 !important;
}

html.dark-mode .gh-head {
    background-color: #111 !important;
    border-bottom-color: #222;
}

html.dark-mode .gh-content a {
    color: #fff !important;
}

html.dark-mode .gh-content pre {
    background: #0a0a0a;
}

html.dark-mode .site-footer {
    background: #0a0a0a;
}