/* Chroma theme — sampled from Ronneby demo #60 (Travel Agency).
   Modern condensed / energetic: Oswald uppercase headings + Raleway body,
   rose accent, rounded pills, soft-shadowed cards. All rules scoped under
   `.theme-chroma` (the class ThemeResolver.GetThemeCssClass() puts on `.kw-site`);
   the ChromaHeader/Footer/ProductCard components carry their own scoped
   structural CSS. */
.theme-chroma {
    --kw-accent: #e74858;          /* rose — travel-brand energy */
    --kw-accent-deep: #cf3446;
    --kw-accent-soft: #f4a7b0;
    --kw-light: #ffffff;
    --kw-dark: #232733;            /* cool slate-navy, not pure black */
    --kw-dark-soft: #333846;
    --kw-text: #2b2f3a;
    --kw-text-muted: #8890a0;
    --kw-border: rgba(35, 39, 51, 0.10);
    --kw-border-strong: #d7dbe3;
    --kw-font: 'Raleway', system-ui, -apple-system, sans-serif;
    --kw-font-heading: 'Oswald', system-ui, -apple-system, sans-serif;
    --kw-radius: 12px;
    --kw-border-width: 1px;
}

/* Condensed heading rhythm — uppercase Oswald, energetic section labels. */
.theme-chroma h1, .theme-chroma h2, .theme-chroma h3 {
    text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700;
}
.theme-chroma .fk-section-title { color: var(--kw-accent); letter-spacing: 0.16em; }

/* Buttons: pill-shaped, generous horizontal padding — the travel-CTA look. */
.theme-chroma .fk-btn {
    border-radius: 999px;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
}
.theme-chroma .fk-btn-accent:hover { background: var(--kw-accent-deep); }

/* Block titles pick up a short rose rule underneath — a friendly section accent. */
.theme-chroma .kw-block-featured-title,
.theme-chroma .kw-block-products-header h2,
.theme-chroma .kw-block-news-title,
.theme-chroma .kw-block-categories-title {
    position: relative;
    padding-bottom: 1rem;
}
.theme-chroma .kw-block-featured-title::after,
.theme-chroma .kw-block-products-header h2::after,
.theme-chroma .kw-block-news-title::after,
.theme-chroma .kw-block-categories-title::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 2.5rem; height: 3px;
    background: var(--kw-accent);
    border-radius: 999px;
}

/* Article route → opaque header lock (parallels Fotokrome). */
.kw-site.theme-chroma:has(.kw-page--article) .ch-header {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--kw-border);
}