/* ============================================================
   CHRISLICIOUS — Warm Minimal Theme Overrides
   ============================================================
   Layered on top of Casper's screen.css
   Design: Cream background, serif headings, terracotta accent
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

/* ── Root Variables ───────────────────────────────────────── */
:root {
    /* Warm colour palette */
    --color-bg:          #FAF7F2;
    --color-bg-card:     #F5F0E8;
    --color-text:        #2C2C2C;
    --color-text-soft:   #5C5040;
    --color-text-muted:  #8C8070;
    --color-text-faint:  #B0A898;
    --color-accent:      #C4956A;
    --color-accent-hover:#B07D52;
    --color-border:      #E8E0D4;
    --color-border-light:#F0EBE2;

    /* Fonts */
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Override Ghost accent */
    --ghost-accent-color: #C4956A;
}

/* ── Base ─────────────────────────────────────────────────── */
body {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    font-family: var(--font-body) !important;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* ── Header / Navigation ──────────────────────────────────── */
.gh-head {
    background-color: var(--color-bg) !important;
    border-bottom: 1px solid var(--color-border);
}

.gh-head-logo {
    font-family: var(--font-heading) !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    letter-spacing: -0.5px;
}

.gh-head-logo:hover {
    color: var(--color-accent) !important;
}

.gh-head-menu a {
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: lowercase !important;
    color: var(--color-text-soft) !important;
    transition: color 0.3s ease !important;
    padding: 0.5rem 0.75rem !important;
}

.gh-head-menu a:hover {
    color: var(--color-accent) !important;
}

/* ── Site Header / Hero ───────────────────────────────────── */
.site-header-content {
    background-color: var(--color-bg) !important;
}

.site-header-content .site-title,
.site-header-inner h1 {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    font-size: 4.5rem !important;
    letter-spacing: -1px;
}

.site-header-content .site-description {
    font-family: var(--font-body) !important;
    font-style: italic !important;
    color: var(--color-text-muted) !important;
    font-size: 1.1rem !important;
    font-weight: 300 !important;
}

/* ── Post Feed ────────────────────────────────────────────── */
.site-main {
    background-color: var(--color-bg) !important;
}

/* Post Cards */
.post-card {
    background-color: transparent !important;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 2.5rem !important;
    margin-bottom: 2.5rem !important;
}

.post-card:last-child {
    border-bottom: none;
}

.post-card-title {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    font-size: 1.6rem !important;
    letter-spacing: -0.3px;
    line-height: 1.35 !important;
    transition: color 0.3s ease;
}

.post-card-content-link:hover .post-card-title {
    color: var(--color-accent) !important;
}

.post-card-primary-tag {
    font-family: var(--font-body) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--color-accent) !important;
}

.post-card-excerpt {
    font-family: var(--font-body) !important;
    color: var(--color-text-soft) !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    font-weight: 400;
}

.post-card-meta-date,
.post-card-meta-length {
    font-family: var(--font-body) !important;
    color: var(--color-text-faint) !important;
    font-size: 0.8rem !important;
}

/* Post Card Images */
.post-card-image {
    border-radius: 8px !important;
}

/* ── Single Post ──────────────────────────────────────────── */
.article-title {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
}

.article-tag a {
    color: var(--color-accent) !important;
    font-size: 0.75rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

.gh-content {
    font-family: var(--font-body) !important;
    color: var(--color-text-soft) !important;
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
}

.gh-content h2,
.gh-content h3,
.gh-content h4 {
    font-family: var(--font-heading) !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
}

.gh-content a {
    color: var(--color-accent) !important;
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.3s ease;
}

.gh-content a:hover {
    text-decoration-color: var(--color-accent);
}

/* Blockquotes */
.gh-content blockquote {
    border-left: 3px solid var(--color-accent) !important;
    font-family: var(--font-heading) !important;
    font-style: italic !important;
    color: var(--color-text-muted) !important;
}

/* ── Tag Page ─────────────────────────────────────────────── */
.tag-header {
    background-color: var(--color-bg) !important;
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
    background-color: var(--color-bg) !important;
    border-top: 1px solid var(--color-border) !important;
    color: var(--color-text-faint) !important;
}

.site-footer a {
    color: var(--color-text-muted) !important;
}

.site-footer a:hover {
    color: var(--color-accent) !important;
}

/* Hide "Powered by Ghost" */
.gh-powered-by {
    display: none !important;
}

/* ── Buttons & Accent Elements ────────────────────────────── */
.gh-head-button,
.gh-portal-btn {
    background-color: var(--color-accent) !important;
    color: #fff !important;
    border-radius: 4px !important;
}

.gh-head-button:hover {
    background-color: var(--color-accent-hover) !important;
}

/* ── Search ───────────────────────────────────────────────── */
.gh-search .gh-icon-btn {
    color: var(--color-text-muted) !important;
}

/* ── Responsive Embeds (Spotify, YouTube, etc.) ───────────── */
.gh-content iframe {
    border-radius: 8px;
    margin: 1.5rem 0;
}

/* ── Pagination ───────────────────────────────────────────── */
.pagination a {
    color: var(--color-text-soft) !important;
    font-family: var(--font-body) !important;
}

.pagination a:hover {
    color: var(--color-accent) !important;
}

/* ── Scrollbar (subtle) ───────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-faint);
}

/* ── Selection highlight ──────────────────────────────────── */
::selection {
    background-color: var(--color-accent);
    color: #fff;
}