/* Explain: Colourful shared component styles and decorative accents */
.site-header {
    position: sticky;
}

.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--coral-color), var(--accent-color), var(--lavender-color));
}

.kg-soft-page {
    background:
        radial-gradient(circle at top left, rgba(254, 243, 199, 0.95) 0, transparent 34%),
        radial-gradient(circle at top right, rgba(204, 251, 241, 0.8) 0, transparent 30%),
        linear-gradient(180deg, var(--surface-color) 0%, var(--background-color) 100%);
}

.kg-warm-section {
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 228, 223, 0.8) 0, transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(224, 242, 254, 0.75) 0, transparent 26%),
        linear-gradient(135deg, var(--surface-warm), var(--surface-color));
}

.kg-footer-gradient {
    background:
        linear-gradient(135deg, rgba(254, 243, 199, 0.9), rgba(204, 251, 241, 0.65)),
        var(--surface-color);
}

.kg-card-accent {
    position: relative;
    overflow: hidden;
}

.kg-card-accent::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--coral-color), var(--accent-color));
    z-index: 1;
}

.kg-colour-chip {
    box-shadow: 0 14px 35px rgba(202, 138, 4, 0.14);
}