/* ============================================================
   MyWiki Pro — Editorial Skin
   ------------------------------------------------------------
   Cormorant Garamond + Jost · cream paper · terracotta accent
   Layered on top of MyWiki's base stylesheet. Overrides via
   CSS custom properties where possible, plus targeted rules
   for components whose feel changes.
============================================================ */

/* ------------------------------------------------------------
   1. PALETTE & TYPE TOKENS (CSS variable overrides)
------------------------------------------------------------- */
:root {
    /* Paper-warm canvas — pulls slightly more amber than default */
    --mw-bg:             #f5f3ef;
    --mw-bg-card:        #ffffff;
    --mw-bg-soft:        #efece4;

    /* Ink */
    --mw-text:           #1a1a1a;
    --mw-text-muted:     #6b6b6b;
    --mw-text-soft:      #888888;
    --mw-text-faint:     #aaaaaa;

    /* Borders — softer, more print-like */
    --mw-border:         #e5e2dc;
    --mw-border-soft:    #ece9e2;
    --mw-border-strong:  #d8d3c8;

    /* Accent — deep terracotta */
    --mw-accent:         #c8522a;
    --mw-accent-dark:    #a4421f;
    --mw-accent-soft:    #f3e6df;

    /* Highlight — softer than default lemon */
    --mw-highlight:      #fdecd0;

    /* Type — Cormorant for headings, Jost for UI/body */
    --mw-serif:          'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --mw-sans:           'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mw-mono:           'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* Slightly tighter container for editorial reading rhythm */
    --mw-narrow:         720px;
}

/* ------------------------------------------------------------
   2. BASE TYPOGRAPHY
   Editorial swaps body type to Jost for a quieter feel.
------------------------------------------------------------- */
body {
    font-family: var(--mw-sans);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.005em;
}

/* All headings → Cormorant. MyWiki uses Inter on H2/H3 by default. */
h1, h2, h3, h4, h5, h6,
.mw-hero-title,
.mw-cat-title,
.mw-archive-item h3,
.mw-page-header h1,
.mw-archive-header h1,
.mw-section-head h2 {
    font-family: var(--mw-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

h1 { font-weight: 500; }
h2 { font-weight: 500; }
h3 { font-weight: 600; }

/* ------------------------------------------------------------
   3. HEADER
   Make the brand mark serif-italic (matches the docs.fasterthemes
   feel of "FasterThemes" + small caps eyebrow).
------------------------------------------------------------- */
.mw-header {
    background: rgba(245, 243, 239, 0.86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--mw-border);
}

.mw-brand-mark {
    border-radius: 8px;
    background: var(--mw-text);
    color: var(--mw-bg);
    font-family: var(--mw-serif);
    font-style: italic;
    font-weight: 600;
}

.mw-brand-text {
    font-family: var(--mw-serif);
    font-weight: 600;
}
.mw-brand-tagline {
    font-family: var(--mw-sans);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mw-text-muted);
}

/* Header search field — softer rounding, off-white fill */
.mw-header-search,
.mw-search-trigger {
    background: var(--mw-bg-card);
    border: 1px solid var(--mw-border);
    border-radius: 10px;
}
.mw-header-search:focus-within,
.mw-search-trigger:hover,
.mw-search-trigger:focus-visible {
    border-color: var(--mw-accent);
    box-shadow: 0 0 0 3px var(--mw-accent-soft);
}

/* CTA button — solid terracotta, serif italic accent works in larger sizes
   so we keep this in Jost for legibility at small size. */
.mw-cta {
    background: var(--mw-text);
    color: var(--mw-bg);
    border-radius: 999px;
    padding: 10px 20px;
    font-family: var(--mw-sans);
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background .2s ease, transform .2s ease;
}
.mw-cta:hover {
    background: var(--mw-accent);
    color: #fff;
    transform: translateY(-1px);
}

/* Nav links */
.mw-nav-list a {
    font-family: var(--mw-sans);
    font-weight: 500;
    color: var(--mw-text);
}
.mw-nav-list a:hover {
    color: var(--mw-accent);
}

/* ------------------------------------------------------------
   4. HERO
   Lean into editorial: large italic Cormorant, smaller eyebrow,
   centered alignment retained.
------------------------------------------------------------- */
.mw-hero {
    padding: 96px 0 72px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200, 82, 42, 0.04), transparent 60%),
        var(--mw-bg);
}

.mw-hero-eyebrow {
    font-family: var(--mw-sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mw-accent);
    font-weight: 600;
    margin-bottom: 18px;
}

.mw-hero-title {
    font-family: var(--mw-serif);
    font-weight: 400;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin-bottom: 22px;
}
.mw-hero-title-main {
    font-style: normal;
    font-weight: 500;
}
.mw-hero-title-italic,
.mw-italic-accent {
    font-family: var(--mw-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--mw-accent);
    display: block;
}

.mw-hero-sub,
.mw-hero-subtitle {
    font-family: var(--mw-sans);
    font-size: 1.15rem;
    color: var(--mw-text-muted);
    max-width: 640px;
    margin: 0 auto 40px;
    font-weight: 300;
    line-height: 1.6;
}

/* Hero search — pill, paper-white, with terracotta focus */
.mw-hero-search,
.mw-hero-search-wrap {
    background: var(--mw-bg-card);
    border: 1px solid var(--mw-border);
    border-radius: 14px;
    box-shadow: var(--mw-shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mw-hero-search:hover,
.mw-hero-search:focus-visible,
.mw-hero-search-wrap:focus-within {
    border-color: var(--mw-accent);
    box-shadow: 0 0 0 4px var(--mw-accent-soft);
}

.mw-hero-search-input {
    font-family: var(--mw-sans);
    font-weight: 400;
}

/* Hero stats — small caps Jost */
.mw-hero-stats {
    font-family: var(--mw-sans);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mw-text-muted);
    font-weight: 500;
}
.mw-hero-stats strong {
    font-family: var(--mw-serif);
    font-style: italic;
    font-weight: 600;
    color: var(--mw-accent);
    font-size: 1.15rem;
    letter-spacing: 0;
    text-transform: none;
}

/* ------------------------------------------------------------
   5. SECTIONS — eyebrow + serif heading rhythm
------------------------------------------------------------- */
.mw-section {
    padding: 72px 0;
}

.mw-section-eyebrow {
    font-family: var(--mw-sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mw-accent);
    font-weight: 600;
    margin-bottom: 14px;
}

.mw-section-head {
    text-align: center;
    margin-bottom: 56px;
}
.mw-section-head h2 {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 500;
    font-style: italic;
}

/* ------------------------------------------------------------
   6. CATEGORY GRID — cards
   Editorial cards: lighter shadow, subtle hover lift,
   serif titles, more whitespace.
------------------------------------------------------------- */
.mw-cat-card {
    background: var(--mw-bg-card);
    border: 1px solid var(--mw-border);
    border-radius: 14px;
    padding: 32px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mw-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
    border-color: var(--mw-border-strong);
}

.mw-cat-icon {
    border-radius: 10px;
}

.mw-cat-title {
    font-family: var(--mw-serif);
    font-size: 1.55rem;
    font-weight: 600;
    margin-bottom: 14px;
}
.mw-cat-title a {
    color: var(--mw-text);
    text-decoration: none;
}
.mw-cat-title a:hover {
    color: var(--mw-accent);
}

.mw-cat-count {
    font-family: var(--mw-sans);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mw-text-muted);
    font-weight: 500;
}

.mw-cat-list a {
    font-family: var(--mw-sans);
    color: var(--mw-text);
    text-decoration: none;
}
.mw-cat-list a:hover {
    color: var(--mw-accent);
}

.mw-cat-more {
    font-family: var(--mw-sans);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--mw-accent);
    font-weight: 500;
}

/* ------------------------------------------------------------
   7. ARCHIVE / LISTING
------------------------------------------------------------- */
.mw-archive-header h1 {
    font-family: var(--mw-serif);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 500;
    font-style: italic;
}

.mw-archive-item {
    border-bottom: 1px solid var(--mw-border-soft);
    padding-bottom: 28px;
    margin-bottom: 28px;
}
.mw-archive-item h3 {
    font-family: var(--mw-serif);
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.mw-archive-item h3 a {
    color: var(--mw-text);
}
.mw-archive-item h3 a:hover {
    color: var(--mw-accent);
}
.mw-archive-meta {
    font-family: var(--mw-sans);
    font-size: 0.82rem;
    color: var(--mw-text-muted);
}
.mw-archive-excerpt {
    font-family: var(--mw-sans);
    color: var(--mw-text-muted);
    line-height: 1.65;
}

/* ------------------------------------------------------------
   8. SINGLE ARTICLE
   Serif title, Jost meta, terracotta tag pills, soft hr.
------------------------------------------------------------- */
.mw-page-header {
    border-bottom: 1px solid var(--mw-border-soft);
    padding-bottom: 32px;
    margin-bottom: 40px;
}
.mw-page-eyebrow {
    font-family: var(--mw-sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mw-accent);
    font-weight: 600;
    margin-bottom: 14px;
}
.mw-page-header h1 {
    font-family: var(--mw-serif);
    font-size: clamp(2.4rem, 4.5vw, 3.4rem);
    font-weight: 500;
    line-height: 1.1;
}

.mw-page-meta {
    font-family: var(--mw-sans);
    font-size: 0.82rem;
    color: var(--mw-text-muted);
}

.mw-article {
    font-family: var(--mw-sans);
    font-size: 1.05rem;
    line-height: 1.8;
}
.mw-article p { margin-bottom: 1.4em; }
.mw-article h2 {
    font-family: var(--mw-serif);
    font-size: 1.85rem;
    font-weight: 600;
    margin-top: 2.4em;
    margin-bottom: 0.5em;
}
.mw-article h3 {
    font-family: var(--mw-serif);
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 2em;
    margin-bottom: 0.4em;
}
.mw-article a {
    color: var(--mw-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.mw-article a:hover {
    text-decoration-thickness: 2px;
}

.mw-article blockquote {
    border-left: 3px solid var(--mw-accent);
    background: var(--mw-bg-soft);
    font-family: var(--mw-serif);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--mw-text);
    padding: 18px 24px;
    margin: 28px 0;
}

.mw-article code {
    font-family: var(--mw-mono);
    font-size: 0.92em;
    background: var(--mw-bg-soft);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--mw-text);
}
.mw-article pre {
    background: #1a1a1a;
    color: #f5f3ef;
    padding: 20px 22px;
    border-radius: 10px;
    overflow-x: auto;
    font-family: var(--mw-mono);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 28px 0;
}
.mw-article pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* Tags — terracotta pills */
.mw-tag {
    background: var(--mw-accent-soft);
    color: var(--mw-accent-dark);
    font-family: var(--mw-sans);
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 999px;
    padding: 4px 12px;
    text-decoration: none;
    transition: background .2s ease;
}
.mw-tag:hover {
    background: var(--mw-accent);
    color: #fff;
}

/* Helpful prompt */
.mw-helpful {
    background: var(--mw-bg-soft);
    border: 1px solid var(--mw-border-soft);
    border-radius: 12px;
    padding: 22px 26px;
}
.mw-helpful-q {
    font-family: var(--mw-serif);
    font-style: italic;
    font-size: 1.15rem;
    font-weight: 500;
}
.mw-helpful-btn {
    font-family: var(--mw-sans);
    font-weight: 500;
    border-radius: 999px;
}

/* Post nav (prev/next) */
.mw-post-nav-link {
    font-family: var(--mw-sans);
    border: 1px solid var(--mw-border);
    border-radius: 12px;
    transition: border-color .2s ease, transform .2s ease;
}
.mw-post-nav-link:hover {
    border-color: var(--mw-accent);
    transform: translateY(-1px);
}
.mw-post-nav-label {
    color: var(--mw-text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
}
.mw-post-nav-title {
    font-family: var(--mw-serif);
    font-weight: 600;
    color: var(--mw-text);
}

/* ------------------------------------------------------------
   9. TABLE OF CONTENTS — sidebar
   Editorial: tighter type, italic active state.
------------------------------------------------------------- */
.mw-toc {
    font-family: var(--mw-sans);
    border-left: 1px solid var(--mw-border);
    padding-left: 20px;
}
.mw-toc-title {
    font-family: var(--mw-sans);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mw-text-muted);
    font-weight: 600;
}
.mw-toc a {
    color: var(--mw-text-muted);
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.55;
    transition: color .2s ease;
}
.mw-toc a:hover {
    color: var(--mw-accent);
}
.mw-toc a.is-active {
    color: var(--mw-accent);
    font-style: italic;
    font-weight: 500;
}

/* ------------------------------------------------------------
   10. SEARCH MODAL & SUGGEST PANEL
   Cream paper, terracotta accents, serif title.
------------------------------------------------------------- */
.mw-search-modal {
    background: rgba(26, 26, 26, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.mw-search-box {
    background: var(--mw-bg-card);
    border: 1px solid var(--mw-border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.mw-search-input-wrap {
    border-bottom: 1px solid var(--mw-border-soft);
}
.mw-search-input {
    font-family: var(--mw-sans);
    font-size: 1.05rem;
}
.mw-search-results .mw-result-item {
    font-family: var(--mw-sans);
    border-bottom: 1px solid var(--mw-border-soft);
}
.mw-search-results .mw-result-item.is-selected,
.mw-search-results .mw-result-item:hover {
    background: var(--mw-accent-soft);
}
.mw-suggest-panel {
    background: var(--mw-bg-card);
    border: 1px solid var(--mw-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}
.mw-kbd {
    font-family: var(--mw-mono);
    background: var(--mw-bg-soft);
    border: 1px solid var(--mw-border);
    color: var(--mw-text-muted);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.72rem;
}

/* ------------------------------------------------------------
   11. FOOTER
------------------------------------------------------------- */
.mw-footer {
    background: var(--mw-bg-soft);
    border-top: 1px solid var(--mw-border);
    font-family: var(--mw-sans);
    color: var(--mw-text-muted);
}
.mw-footer-brand {
    font-family: var(--mw-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--mw-text);
}
.mw-footer a {
    color: var(--mw-text-muted);
    border-bottom: 1px solid transparent;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
.mw-footer a:hover {
    color: var(--mw-text);
    border-bottom-color: var(--mw-text);
}

/* ------------------------------------------------------------
   12. WIDGETS / SIDEBAR
------------------------------------------------------------- */
.mw-sidebar .widget-title,
.mw-widget-title {
    font-family: var(--mw-sans);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mw-text-muted);
    font-weight: 600;
    margin-bottom: 14px;
}
.mw-sidebar a {
    color: var(--mw-text);
    text-decoration: none;
}
.mw-sidebar a:hover {
    color: var(--mw-accent);
}

/* ------------------------------------------------------------
   13. UTILITIES & MISC
------------------------------------------------------------- */
::selection {
    background: var(--mw-accent);
    color: #fff;
}

hr {
    border: 0;
    border-top: 1px solid var(--mw-border-soft);
    margin: 36px 0;
}

/* Buttons in content (e.g. WP-generated) — Editorial pill style */
.mw-article .wp-block-button__link,
.mw-article button:not(.mw-helpful-btn):not(.mw-search-close) {
    font-family: var(--mw-sans);
    font-weight: 500;
    border-radius: 999px;
    background: var(--mw-text);
    color: var(--mw-bg);
    padding: 10px 22px;
    transition: background .2s ease;
}
.mw-article .wp-block-button__link:hover,
.mw-article button:not(.mw-helpful-btn):not(.mw-search-close):hover {
    background: var(--mw-accent);
    color: #fff;
}

/* Smooth out 404 + comments — they inherit cleanly via base CSS vars */

/* ------------------------------------------------------------
   14. RESPONSIVE TWEAKS
------------------------------------------------------------- */
@media (max-width: 768px) {
    .mw-hero {
        padding: 64px 0 48px;
    }
    .mw-hero-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }
    .mw-section {
        padding: 56px 0;
    }
    .mw-cat-card {
        padding: 24px;
    }
    .mw-page-header h1 {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }
}

/* ============================================================
   FOOTER FIX — stronger contrast for Editorial skin
============================================================ */
body .mw-footer {
    background: var(--mw-bg-soft);
    border-top: 1px solid var(--mw-border);
    color: var(--mw-text);
    font-family: var(--mw-sans);
}
body .mw-footer .mw-widget-title,
body .mw-footer h3 {
    font-family: var(--mw-sans);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mw-text);
    font-weight: 600;
    margin-bottom: 18px;
    opacity: 1;
}
body .mw-footer a,
body .mw-footer-col a,
body .mw-footer-col li a {
    color: var(--mw-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, color .2s ease;
    opacity: 1;
}
body .mw-footer a:hover,
body .mw-footer-col a:hover,
body .mw-footer-col li a:hover {
    color: var(--mw-accent);
    border-bottom-color: var(--mw-accent);
}
body .mw-footer-bottom,
body .mw-footer-bottom-left,
body .mw-footer-bottom-right {
    color: var(--mw-text-muted);
    font-size: 0.85rem;
    opacity: 1;
}
body .mw-footer-bottom a {
    color: var(--mw-text-muted);
}
body .mw-footer-divider {
    background: var(--mw-border);
    height: 1px;
    margin: 32px 0 24px;
}
body .mw-footer-desc {
    color: var(--mw-text-muted);
    font-family: var(--mw-serif);
    font-style: italic;
    font-size: 1.05rem;
    margin-top: 12px;
    line-height: 1.5;
}
body .mw-footer-brand {
    color: var(--mw-text);
    font-family: var(--mw-serif);
    font-weight: 600;
    text-decoration: none;
}
body .mw-footer-social a {
    color: var(--mw-text-muted);
    border: 1px solid var(--mw-border);
    border-radius: 8px;
    padding: 8px;
    transition: border-color .2s ease, color .2s ease;
}
body .mw-footer-social a:hover {
    color: var(--mw-accent);
    border-color: var(--mw-accent);
}

/* Kill any leftover purple/blue gradient bleed */
body .mw-footer::before,
body .mw-footer::after {
    background: transparent;
}

/* ============================================================
   FOOTER — Editorial overrides (specificity-matched, no !important)
   Theme assumes dark footer with white text. Editorial paints
   the footer cream, so we re-paint links + headings in ink.
============================================================ */

/* Headings (matches theme selector .mw-footer h2, h3, ...) */
.mw-footer h2,
.mw-footer h3,
.mw-footer h4,
.mw-footer h5,
.mw-footer h6 {
    color: var(--mw-text);
    font-family: var(--mw-sans);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 18px;
}

/* Widget link color (matches theme selector .mw-footer .widget li a) */
.mw-footer .widget li a,
.mw-footer .mw-footer-col li a,
.mw-footer-col ul li a {
    color: var(--mw-text);
    font-family: var(--mw-sans);
    font-size: 0.92rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.mw-footer .widget li a:hover,
.mw-footer .mw-footer-col li a:hover,
.mw-footer-col ul li a:hover,
.mw-footer-list a:hover {
    color: var(--mw-accent);
    border-bottom-color: var(--mw-accent);
}

/* Bottom strip (matches theme's .mw-footer-bottom a) */
.mw-footer .mw-footer-bottom,
.mw-footer .mw-footer-bottom-left,
.mw-footer .mw-footer-bottom-right {
    color: var(--mw-text-muted);
}
.mw-footer .mw-footer-bottom a,
.mw-footer-bottom a {
    color: var(--mw-text-muted);
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.mw-footer .mw-footer-bottom a:hover,
.mw-footer-bottom a:hover {
    color: var(--mw-text);
    border-bottom-color: var(--mw-text);
}

/* Theme uses .mw-footer .widget .mw-widget-title with white color
   for dark-footer assumption. Match the selector to override on cream. */
.mw-footer .widget .mw-widget-title {
    color: var(--mw-text);
}