/* ============================================================
   Cook Bake Taste — brand layer
   Loaded after the shared theme CSS. Everything here is
   site-specific styling for the cooking/baking niche.
   ============================================================ */

/* --- Header: dark cocoa bar with a cream wordmark --- */
.site-header {
    background: var(--color-header-bg);
    border-bottom: 1px solid rgba(253, 248, 240, 0.10);
}

.site-logo a {
    color: var(--color-on-dark);
    letter-spacing: -0.01em;
}

.logo-text {
    display: inline-flex;
    gap: 0.3em;
    font-weight: 800;
}

.logo-cook  { color: var(--color-on-dark); }
.logo-bake  { color: var(--color-primary-light); }
.logo-taste { color: #E3899B; }

.menu-toggle svg { stroke: var(--color-on-dark); }
.menu-toggle:hover { background: rgba(253, 248, 240, 0.12); }

/* Search box sitting on the dark bar */
.header-search input {
    background: rgba(253, 248, 240, 0.10);
    border-color: rgba(253, 248, 240, 0.22);
    color: var(--color-on-dark);
}
.header-search input::placeholder { color: var(--color-on-dark-muted); }
.header-search input:focus {
    background: rgba(253, 248, 240, 0.16);
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(201, 119, 47, 0.28);
}
.header-search button { color: var(--color-on-dark-muted); }
.header-search button:hover { color: var(--color-on-dark); }

/* --- Section headings get a small warm underline --- */
.section-title {
    position: relative;
    padding-bottom: 10px;
}
.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-berry));
}
.text-center .section-title::after,
.section-title.text-center::after { left: 50%; transform: translateX(-50%); }

/* --- Card badges in the food palette --- */
.card-badge.trivia {
    background: var(--color-accent-bg);
    color: var(--color-accent-dark);
}
.card-badge.personality {
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
}
.card-badge.article {
    background: var(--color-highlight-bg);
    color: var(--color-highlight-dark);
}
.card-badge.game {
    background: var(--color-berry-bg);
    color: var(--color-berry);
}

/* --- Category pills --- */
.category-pill {
    border: 1px solid var(--color-border-light);
}
.category-pill:hover {
    border-color: var(--color-primary-light);
}

/* --- Quotes / kitchen wisdom block --- */
.quotes-section {
    background: var(--color-highlight-bg);
    border: 1px solid var(--color-border);
}

/* --- Share + copy buttons --- */
.share-btn.copy { background: var(--color-accent); }

/* --- Homepage intro card --- */
.site-intro {
    background: linear-gradient(135deg, #FFF6E6 0%, var(--color-surface) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin: var(--space-xl) 0;
}
.site-intro h1,
.site-intro h2 {
    font-size: 1.6rem;
    margin-bottom: var(--space-sm);
}
.site-intro p {
    color: var(--color-text-muted);
    max-width: 68ch;
    margin-bottom: 0;
}

/* --- Footer --- */
.site-footer { border-top: 3px solid var(--color-primary); }

/* --- Sidebar nav accents --- */
.sidebar-section-title { color: var(--color-primary-dark); }