/* =============================================
   Szivárvány Óvoda — Téma CSS
   ============================================= */

:root {
    --purple:   #5b3b7a;
    --purple-d: #3b2252;
    --purple-dd:#2d1a3f;
    --teal:     #48b5c4;
    --green:    #82b440;
    --green-d:  #6c9832;
    --yellow:   #ffca28;
    --white:    #ffffff;
    --gray-100: #f3f4f6;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-700: #374151;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: #1e293b;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.font-heading { font-family: 'Fredoka', sans-serif; }

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ===== KONTÉNER ===== */
.sziv-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* =============================================
   NAV
   ============================================= */
.sziv-nav {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    border-bottom: 1px solid var(--gray-100);
}
.sziv-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.sziv-nav-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    flex-shrink: 0;
}
.sziv-nav-logo {
    width: 3rem; height: 3rem;
    background: var(--purple);
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(91,59,122,.35);
    flex-shrink: 0;
}
.sziv-nav-logo svg { width: 1.75rem; height: 1.75rem; }
.sziv-nav-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--purple);
    letter-spacing: .02em;
}
.sziv-nav-title span { color: var(--teal); }

/* Desktop links */
.sziv-nav-links {
    display: none;
    gap: 2rem;
    align-items: center;
    list-style: none;
    margin: 0; padding: 0;
}
.sziv-nav-links a {
    color: var(--gray-500);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s;
    font-size: .95rem;
}
.sziv-nav-links a:hover { color: var(--teal); }
.sziv-nav-links a.active { color: var(--purple); font-weight: 700; }
.sziv-nav-links .sziv-btn-contact {
    background: var(--green);
    color: #fff;
    padding: .6rem 1.5rem;
    border-radius: 9999px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(130,180,64,.3);
    transition: background .2s;
}
.sziv-nav-links .sziv-btn-contact:hover { background: var(--green-d); color: #fff; }

/* Hamburger */
.sziv-nav-hamburger {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--purple);
    padding: .25rem;
    transition: color .2s;
}
.sziv-nav-hamburger:hover { color: var(--teal); }
.sziv-nav-hamburger svg { width: 2rem; height: 2rem; }

/* Mobile menu */
.sziv-mobile-menu {
    display: none;
    background: #fff;
    border-top: 1px solid var(--gray-100);
    padding: .5rem 1.5rem 1rem;
}
.sziv-mobile-menu.open { display: block; }
.sziv-mobile-menu a {
    display: block;
    padding: .6rem .75rem;
    border-radius: .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-700);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sziv-mobile-menu a:hover { background: var(--gray-100); color: var(--purple); }
.sziv-mobile-menu a.active { background: #f4f0f8; color: var(--purple); font-weight: 700; }
.sziv-mobile-menu a.contact { color: var(--green); font-weight: 700; }

@media (min-width: 768px) {
    .sziv-nav-links { display: flex; }
    .sziv-nav-hamburger { display: none; }
    .sziv-mobile-menu { display: none !important; }
}

/* =============================================
   FOOTER
   ============================================= */
.sziv-footer {
    background: var(--purple-d);
    padding: 5rem 0 2.5rem;
    border-top: 8px solid var(--yellow);
}
.sziv-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 4rem;
}
@media (min-width: 640px)  { .sziv-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sziv-footer-grid { grid-template-columns: 1fr 1fr 2fr; } }

.sziv-footer h4 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sziv-footer h4 svg { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }

/* Contact list */
.sziv-footer-contacts {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: .875rem;
    color: var(--gray-300);
}
.sziv-footer-contacts li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.sziv-footer-contacts li svg {
    width: 1.25rem; height: 1.25rem;
    color: var(--green);
    flex-shrink: 0;
    margin-top: .1rem;
}
.sziv-footer-contacts .sziv-coordinator {
    padding-top: .5rem;
    display: block;
}
.sziv-footer-contacts strong { color: #fff; display: block; margin-bottom: .2rem; }

/* Docs list */
.sziv-footer-docs {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    font-size: .875rem;
    color: var(--gray-300);
}
.sziv-footer-docs a {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--gray-300);
    text-decoration: none;
    transition: color .2s;
}
.sziv-footer-docs a:hover { color: var(--teal); }
.sziv-footer-docs .dot {
    width: .4rem; height: .4rem;
    background: var(--teal);
    border-radius: 9999px;
    flex-shrink: 0;
}

/* Foundation box */
.sziv-foundation-box {
    background: var(--purple-dd);
    padding: 1.5rem;
    border-radius: 1rem;
}
.sziv-foundation-box p {
    font-size: .875rem;
    color: var(--gray-400);
    line-height: 1.7;
    margin: 0 0 1rem;
}
.sziv-foundation-numbers {
    background: var(--purple-d);
    padding: 1rem;
    border-radius: .75rem;
    border: 1px solid rgba(255,255,255,.08);
}
.sziv-foundation-numbers p {
    font-size: .875rem;
    color: var(--gray-300);
    margin: 0 0 .25rem;
}
.sziv-foundation-numbers p:last-child { margin: 0; }
.sziv-foundation-numbers strong { color: #fff; }
.sziv-foundation-note {
    font-size: .75rem;
    color: var(--green);
    margin: 1rem 0 0 !important;
}

/* =============================================
   HERO
   ============================================= */
.sziv-hero { background: var(--purple); position: relative; padding: 6rem 0 8rem; overflow: hidden; }
.sziv-hero-deco { position: absolute; inset: 0; overflow: hidden; opacity: .08; pointer-events: none; }
.sziv-hero-deco-s1 { position: absolute; left: 2.5rem; top: 2.5rem; width: 8rem; height: 8rem; }
.sziv-hero-deco-s2 { position: absolute; right: 5rem; bottom: 5rem; width: 10rem; height: 10rem; }
.sziv-hero-deco-s3 { position: absolute; left: 40%; top: 1rem; width: 5rem; height: 5rem; }
.sziv-hero-inner { position: relative; z-index: 10; }
.sziv-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .sziv-hero-grid { grid-template-columns: 1fr 1fr; }
}
.sziv-hero-h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 800; color: #fff; line-height: 1.15; margin: 0 0 1.5rem; }
.sziv-hero-h1 span { color: var(--yellow); }
.sziv-hero-lead { font-size: .92rem; color: #e0d4f0; line-height: 1.8; margin: 0 0 2rem; max-width: 36rem; }

.sziv-btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: var(--green); color: #fff; padding: .9rem 2rem; border-radius: 9999px; font-weight: 700; font-size: 1rem; text-decoration: none; box-shadow: 0 4px 16px rgba(130,180,64,.4); transition: background .2s, transform .2s; }
.sziv-btn-primary:hover { background: var(--green-d); transform: translateY(-2px); color: #fff; }
.sziv-btn-primary svg { width: 1.1rem; height: 1.1rem; }

.sziv-hero-img-wrap { position: relative; }
.sziv-hero-img-glow { position: absolute; inset: 0; background: linear-gradient(135deg, var(--teal), var(--green)); border-radius: 2.5rem; transform: rotate(3deg) scale(1.05); opacity: .45; filter: blur(20px); }
.sziv-hero-img-wrap img { position: relative; z-index: 1; width: 100%; height: 500px; object-fit: cover; border-radius: 2.5rem; box-shadow: 0 25px 60px rgba(0,0,0,.25); border: 4px solid rgba(255,255,255,.2); }
.sziv-hero-badge { position: absolute; bottom: -1.5rem; left: -1.5rem; background: #fff; padding: 1rem 1.25rem; border-radius: 1.5rem; box-shadow: 0 8px 30px rgba(0,0,0,.12); z-index: 2; display: flex; align-items: center; gap: .75rem; }
.sziv-hero-badge-icon { width: 3rem; height: 3rem; background: var(--yellow); border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: var(--purple); }
.sziv-hero-badge-icon svg { width: 1.4rem; height: 1.4rem; }
.sziv-hero-badge-count { font-weight: 800; color: var(--purple); font-size: 1.1rem; margin: 0; }
.sziv-hero-badge-sub { font-size: .78rem; color: #94a3b8; font-weight: 600; margin: 0; }

.sziv-wave { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; }
.sziv-wave svg { display: block; width: 100%; }
.sziv-wave--hero { z-index: 10; }
.sziv-wave--groups { z-index: 1; }

/* =============================================
   CSOPORTOK
   ============================================= */
.sziv-groups { padding: 7rem 0; background: #e6f4f1; position: relative; overflow: hidden; }
.sziv-groups-blob { position: absolute; border-radius: 9999px; filter: blur(60px); pointer-events: none; }
.sziv-groups-blob--1 { top: 2.5rem; right: 2.5rem; width: 16rem; height: 16rem; background: rgba(255,255,255,.4); }
.sziv-groups-blob--2 { bottom: 2.5rem; left: 2.5rem; width: 20rem; height: 20rem; background: rgba(72,181,196,.15); }
.sziv-groups-inner { position: relative; z-index: 1; }
.sziv-section-header { text-align: center; margin-bottom: 5rem; }
.sziv-section-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; color: var(--purple); margin: 0 0 .75rem; }
.sziv-section-sub { color: #64748b; font-size: 1.05rem; max-width: 36rem; margin: 0 auto; }

.sziv-groups-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4.5rem 1.5rem;
    padding-top: 3.5rem;
}
@media (min-width: 640px)  { .sziv-groups-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sziv-groups-grid { grid-template-columns: repeat(4, 1fr); } }

.sziv-group-card { background: #fff; border-radius: 1.5rem; padding: 3rem 2rem 2rem; position: relative; box-shadow: 0 4px 24px rgba(0,0,0,.07); border-bottom: 8px solid var(--card-border, var(--purple)); transition: transform .25s, box-shadow .25s; }
.sziv-group-card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(0,0,0,.12); }
.sziv-group-icon { position: absolute; top: -3rem; left: 50%; transform: translateX(-50%); width: 6rem; height: 6rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.1); background-color: var(--card-icon-bg, #f4f0f8); }
.sziv-group-emoji { font-size: 2.2rem; line-height: 1; }
.sziv-group-img { width: 100%; height: 100%; object-fit: contain; border-radius: 9999px; padding: 12px; }
.sziv-group-name { font-size: 1.15rem; font-weight: 800; color: var(--purple); text-align: center; margin: 0 0 .75rem; }
.sziv-group-text { color: #64748b; text-align: center; font-size: .83rem; line-height: 1.7; margin: 0 0 1.25rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sziv-group-action { text-align: center; }
.sziv-btn-teal { display: inline-block; background: var(--teal); color: #fff; padding: .5rem 1.4rem; border-radius: 9999px; font-weight: 700; font-size: .82rem; text-decoration: none; transition: background .2s; }
.sziv-btn-teal:hover { background: #3ba1b0; color: #fff; }
.sziv-groups-all { text-align: center; margin-top: 3.5rem; }
.sziv-link-all { display: inline-flex; align-items: center; gap: .4rem; color: var(--purple); font-weight: 700; font-size: 1rem; text-decoration: none; transition: color .2s; }
.sziv-link-all:hover { color: var(--teal); }
.sziv-link-all svg { width: 1.1rem; height: 1.1rem; }

/* =============================================
   HÍREK
   ============================================= */
.sziv-news { padding: 6rem 0; background: var(--green); position: relative; overflow: hidden; }
.sziv-news-inner { position: relative; z-index: 1; }
.sziv-news-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem; }
.sziv-news-h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: #fff; margin: 0 0 .4rem; }
.sziv-news-subtitle { color: #e8f5d0; font-size: 1rem; margin: 0; }
.sziv-btn-news-all { background: #fff; color: var(--green); padding: .7rem 1.5rem; border-radius: 9999px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s; }
.sziv-btn-news-all:hover { background: #f0f9e8; }
.sziv-news-empty { color: #fff; }

.sziv-news-outer { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.sziv-news-left  { display: flex; flex-direction: column; gap: 1.5rem; }
.sziv-news-small { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.sziv-news-right { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
@media (min-width: 640px)  { .sziv-news-small { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sziv-news-outer { grid-template-columns: 2fr 1fr; } }

/* Featured card */
.sziv-news-featured { background: #fff; border-radius: 1.5rem; overflow: hidden; display: grid; grid-template-columns: 1fr; box-shadow: 0 8px 28px rgba(0,0,0,.1); text-decoration: none; transition: transform .25s, box-shadow .25s; min-height: 320px; }
.sziv-news-featured--has-img { grid-template-columns: 45% 1fr; }
.sziv-news-featured:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.15); }
.sziv-news-featured-img { overflow: hidden; position: relative; }
.sziv-news-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sziv-news-featured-date-badge { position: absolute; top: .75rem; left: .75rem; background: #e91e8c; color: #fff; font-size: .65rem; font-weight: 800; padding: .2rem .7rem; border-radius: 999px; z-index: 1; }
.sziv-news-featured-body { padding: 1.75rem 2rem; display: flex; flex-direction: column; justify-content: center; }
.sziv-news-featured-meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.sziv-news-featured-cat { font-size: .68rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .08em; }
.sziv-news-featured-sep { color: #d1d5db; font-size: .65rem; }
.sziv-news-featured-date { font-size: .72rem; color: #94a3b8; font-weight: 600; }
.sziv-news-featured-title { font-size: 1.3rem; font-weight: 800; color: var(--purple); margin: 0 0 .75rem; line-height: 1.3; }
.sziv-news-featured-excerpt { color: #64748b; font-size: .88rem; line-height: 1.7; margin: 0 0 1.25rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sziv-news-featured-more { color: #e91e8c; font-size: .85rem; font-weight: 700; display: flex; align-items: center; gap: .3rem; }
.sziv-news-featured-more svg { width: .9rem; height: .9rem; }

/* Small cards */
.sziv-news-small-card { background: #fff; border-radius: 1.25rem; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(0,0,0,.08); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.sziv-news-small-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.13); }
.sziv-news-small-img { height: 8rem; overflow: hidden; flex-shrink: 0; }
.sziv-news-small-img img { width: 100%; height: 100%; object-fit: cover; }
.sziv-news-small-placeholder { height: 5rem; background: linear-gradient(135deg, #e6f4f1, #f4f0f8); }
.sziv-news-small-body { padding: 1.5rem 1.75rem; flex: 1; display: flex; flex-direction: column; }
.sziv-news-small-date { font-size: .7rem; color: var(--teal); font-weight: 700; margin-bottom: .5rem; }
.sziv-news-small-title { font-size: .95rem; font-weight: 800; color: var(--purple); margin: 0 0 .5rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sziv-news-small-excerpt { color: #64748b; font-size: .8rem; line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Side cards */
.sziv-news-side-card { background: #fff; border-radius: 1.25rem; padding: 1.25rem; display: flex; align-items: flex-start; gap: .9rem; box-shadow: 0 4px 16px rgba(0,0,0,.08); text-decoration: none; transition: transform .2s, box-shadow .2s; flex: 1; }
.sziv-news-side-card--hl { background: var(--purple); }
.sziv-news-side-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.13); }
.sziv-news-side-icon { flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: .75rem; background-color: var(--icon-bg, #fff8e1); display: flex; align-items: center; justify-content: center; }
.sziv-news-side-icon svg { width: 1.2rem; height: 1.2rem; color: var(--icon-color, #f59e0b); }
.sziv-news-side-meta { flex: 1; min-width: 0; }
.sziv-news-side-date { font-size: .7rem; color: var(--teal); font-weight: 700; display: block; margin-bottom: .25rem; }
.sziv-news-side-card--hl .sziv-news-side-date { color: #c4b5fd; }
.sziv-news-side-title { font-size: .9rem; font-weight: 800; color: var(--purple); margin: 0 0 .35rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sziv-news-side-card--hl .sziv-news-side-title { color: #fff; }
.sziv-news-side-excerpt { font-size: .78rem; color: #64748b; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sziv-news-side-card--hl .sziv-news-side-excerpt { color: #e9d5ff; }
.sziv-news-side-badge { display: inline-block; margin-top: .75rem; background: #fff; color: var(--purple); font-size: .75rem; font-weight: 700; padding: .3rem .9rem; border-radius: 999px; }

/* =============================================
   WIDGET STRIPE VARIÁNSOK (archive + single)
   ============================================= */
.sz-widget-stripe--blue   { background: linear-gradient(to right, #60a5fa, #a855f7); }
.sz-widget-stripe--green  { background: linear-gradient(to right, #34d399, #14b8a6); }
.sz-widget-stripe--pink   { background: linear-gradient(to right, #f472b6, #fb7185); }
.sz-widget-stripe--orange { background: linear-gradient(to right, #fbbf24, #f97316); }

/* JS state üzenetek */
.sz-state-loading { color: #9ca3af; padding: 2rem; text-align: center; }
.sz-state-empty   { color: #9ca3af; padding: 2rem; text-align: center; }
.sz-state-error   { color: #ef4444; padding: 1rem; }
.sz-result-count  { color: #6b7280; font-size: .85rem; margin-top: .5rem; }
.sz-highlight     { color: #2563eb; }

/* Segéd */
.sziv-flex-center { display: flex; align-items: center; }

/* Footer bottom */
.sziv-footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
    font-size: .875rem;
    color: var(--gray-500);
}
@media (min-width: 640px) {
    .sziv-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}
.sziv-footer-bottom a { color: var(--gray-500); text-decoration: none; transition: color .2s; }
.sziv-footer-bottom a:hover { color: #fff; }

/* =============================================
   SINGLE POST PAGE  (single.php)
   ============================================= */
.sp-wrap       { max-width:1200px; margin:0 auto; padding:0 1.5rem 4rem; }

/* Hero */
.sp-hero       { position:relative; min-height:420px; display:flex; align-items:flex-end; margin-bottom:2.5rem; overflow:hidden; }
.sp-hero-bg    { position:absolute; inset:0; background-size:cover; background-position:center; }
.sp-hero-bg-ph { position:absolute; inset:0; background:linear-gradient(135deg,#5b3b7a 0%,#48b5c4 60%,#82b440 100%); }
.sp-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(30,10,50,.85) 0%, rgba(30,10,50,.45) 50%, rgba(30,10,50,.15) 100%); }
.sp-hero-meta  { position:relative; z-index:2; width:100%; padding:3rem 2.5rem 2.5rem; }
.sp-hero-cats  { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
.sp-hero-cat   { background:#ffca28; color:#5b3b7a; font-size:0.68rem; font-weight:800; padding:0.3rem 0.9rem; border-radius:999px; text-transform:uppercase; letter-spacing:.08em; text-decoration:none; transition:background .2s; }
.sp-hero-cat:hover { background:#fde047; }
.sp-hero-title { font-size:1.9rem; font-weight:900; color:#fff; line-height:1.2; margin-bottom:1.25rem; text-shadow:0 2px 12px rgba(0,0,0,.4); }
@media (min-width:768px) { .sp-hero-title { font-size:2.8rem; } }
.sp-hero-chips { display:flex; flex-wrap:wrap; gap:0.6rem; }
.sp-chip       { display:flex; align-items:center; gap:0.3rem; background:rgba(255,255,255,.15); backdrop-filter:blur(6px); color:#fff; font-size:0.78rem; font-weight:600; padding:0.35rem 0.9rem; border-radius:999px; border:1px solid rgba(255,255,255,.25); }

/* Layout */
.sp-layout     { display:flex; gap:2.5rem; align-items:flex-start; }
.sp-main       { flex:1; min-width:0; }
.sp-sidebar    { width:320px; flex-shrink:0; position:sticky; top:7rem; }
@media (max-width:900px) {
    .sp-layout  { flex-direction:column; }
    .sp-sidebar { width:100%; position:static; }
}

/* Article */
.sp-article    { background:#fff; border-radius:1.5rem; padding:2rem 2.5rem; box-shadow:0 2px 12px rgba(0,0,0,.06); border:1px solid #e5e7eb; }
.sp-content p  { margin-bottom:1.4rem; line-height:1.8; color:#374151; font-size:1.05rem; }
.sp-content ul { list-style:disc; padding-left:1.5rem; margin-bottom:1.4rem; color:#374151; }
.sp-content ol { list-style:decimal; padding-left:1.5rem; margin-bottom:1.4rem; color:#374151; }
.sp-content li { margin-bottom:0.4rem; }
.sp-content img { max-width:100%; height:auto; border-radius:1rem; margin:1.5rem 0; box-shadow:0 8px 20px rgba(0,0,0,.1); }
.sp-content blockquote { border-left:4px solid #60a5fa; padding:1.2rem 1.5rem; background:#eff6ff; border-radius:0 1rem 1rem 0; margin:1.5rem 0; color:#4b5563; font-style:italic; }
.sp-content a  { color:#ec4899; font-weight:600; text-decoration:none; border-bottom:2px solid #fbcfe8; }
.sp-content a:hover { border-color:#ec4899; }
.sp-content pre { background:#1f2937; color:#f3f4f6; padding:1.5rem; border-radius:1rem; overflow-x:auto; margin:1.5rem 0; }
.sp-content code { font-family:monospace; background:#f3f4f6; padding:2px 5px; border-radius:4px; font-size:.875em; color:#be185d; }
.sp-content pre code { background:transparent; color:inherit; padding:0; }

/* Content headings injected by TOC builder */
.sp-content-h2 { font-size:1.5rem; font-weight:800; color:#1e3a8a; margin:2rem 0 1rem; padding-bottom:0.5rem; border-bottom:2px solid #bfdbfe; }
.sp-content-h3 { font-size:1.2rem; font-weight:800; color:#1e3a8a; margin:2rem 0 1rem; padding-bottom:0.5rem; border-bottom:2px solid #bfdbfe; }

/* Share bar */
.sp-share      { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; background:#fff; border-radius:1rem; padding:1.25rem 1.5rem; margin-top:1.5rem; border:1px solid #e5e7eb; gap:1rem; }
.sp-share-label { font-weight:700; color:#1e3a8a; font-size:1rem; }
.sp-share-btns { display:flex; gap:0.6rem; }
.sp-share-btn  { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .25s; }
.sp-share-fb   { background:#eff6ff; color:#2563eb; }
.sp-share-fb:hover { background:#2563eb; color:#fff; }
.sp-share-tw   { background:#f0f9ff; color:#0284c7; }
.sp-share-tw:hover { background:#0284c7; color:#fff; }

/* Sidebar widgets */
.sp-widget     { background:#fff; border-radius:1.5rem; padding:1.5rem; border:1px solid #e5e7eb; box-shadow:0 1px 4px rgba(0,0,0,.05); margin-bottom:1.5rem; position:relative; overflow:hidden; }
.sp-widget-bar { position:absolute; top:0; left:0; width:100%; height:4px; }
.sp-widget h3  { font-size:1.05rem; font-weight:800; color:#1f2937; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.sp-search-wrap { position:relative; }
.sp-search-in  { width:100%; padding:.65rem 2.8rem .65rem 1rem; border:1px solid #e5e7eb; border-radius:.75rem; font-size:.875rem; background:#f9fafb; outline:none; transition:all .2s; box-sizing:border-box; }
.sp-search-in:focus { border-color:#60a5fa; background:#fff; box-shadow:0 0 0 3px rgba(96,165,250,.15); }
.sp-search-btn { position:absolute; right:.4rem; top:50%; transform:translateY(-50%); width:2rem; height:2rem; background:#dbeafe; border:none; border-radius:.5rem; color:#2563eb; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.sp-search-btn:hover { background:#2563eb; color:#fff; }
.sp-cat-list   { list-style:none; padding:0; margin:0; }
.sp-cat-list li a { display:flex; align-items:center; justify-content:space-between; padding:.55rem .75rem; border-radius:.75rem; color:#4b5563; font-size:.85rem; font-weight:600; text-decoration:none; transition:all .2s; }
.sp-cat-list li a:hover { background:#eff6ff; color:#2563eb; }
.sp-cat-dot    { width:8px; height:8px; border-radius:50%; background:#d1d5db; margin-right:8px; flex-shrink:0; transition:background .2s; }
.sp-cat-list li a:hover .sp-cat-dot { background:#3b82f6; }
.sp-toc        { list-style:none; padding:0; margin:0; max-height:280px; overflow-y:auto; }
.sp-toc li a   { display:block; padding:.45rem .75rem; border-radius:.5rem; color:#6b7280; font-size:.82rem; font-weight:600; text-decoration:none; border-left:2px solid transparent; transition:all .2s; }
.sp-toc li a:hover { background:#fff1f2; color:#e11d48; border-left-color:#fb7185; }
.sp-toc .toc-h3 { padding-left:1.5rem; }
.sp-recent-list { list-style:none; padding:0; margin:0; }
.sp-recent-item { display:flex; gap:.65rem; align-items:center; padding:.5rem .4rem; border-radius:.75rem; text-decoration:none; transition:background .2s; }
.sp-recent-item:hover { background:#f9fafb; }
.sp-recent-thumb { width:52px; height:52px; border-radius:.6rem; overflow:hidden; flex-shrink:0; background:linear-gradient(135deg,#93c5fd,#c4b5fd); }
.sp-recent-thumb img { width:100%; height:100%; object-fit:cover; }
.sp-recent-title { font-size:.8rem; font-weight:700; color:#1f2937; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; }
.sp-recent-item:hover .sp-recent-title { color:#2563eb; }

/* Related posts */
.sp-related    { margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid #e5e7eb; }
.sp-related-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.sp-related-header h2 { font-size:1.6rem; font-weight:800; color:#1f2937; }
.sp-related-link { font-size:.85rem; font-weight:600; color:#2563eb; text-decoration:none; display:flex; align-items:center; gap:.25rem; }
.sp-related-link:hover { text-decoration:underline; }
.sp-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:900px) { .sp-related-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .sp-related-grid { grid-template-columns:1fr; } }
.sp-rel-card   { background:#fff; border-radius:1.25rem; overflow:hidden; border:1px solid #e5e7eb; box-shadow:0 1px 4px rgba(0,0,0,.05); text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.sp-rel-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.09); }
.sp-rel-img    { height:170px; overflow:hidden; background:linear-gradient(135deg,#93c5fd,#a78bfa); flex-shrink:0; position:relative; }
.sp-rel-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.sp-rel-card:hover .sp-rel-img img { transform:scale(1.05); }
.sp-rel-badge  { position:absolute; top:10px; left:10px; background:rgba(255,255,255,.9); color:#1e40af; font-size:.65rem; font-weight:700; padding:3px 8px; border-radius:4px; }
.sp-rel-body   { padding:1.1rem; flex:1; display:flex; flex-direction:column; }
.sp-rel-title  { font-size:.95rem; font-weight:700; color:#1f2937; margin-bottom:.5rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; }
.sp-rel-card:hover .sp-rel-title { color:#2563eb; }
.sp-rel-excerpt { font-size:.8rem; color:#6b7280; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:.75rem; }
.sp-rel-more   { font-size:.75rem; font-weight:700; color:#6b7280; display:flex; align-items:center; gap:.2rem; border-top:1px solid #f3f4f6; padding-top:.65rem; margin-top:auto; }

/* Search highlight (single page) */
.sp-search-hl  { background:rgba(96,165,250,0.25); color:#1d4ed8; border-radius:3px; padding:0 2px; font-style:normal; }
.sp-hl-banner  { display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#eff6ff; border:1px solid #bfdbfe; border-radius:.75rem; padding:.75rem 1.1rem; margin-bottom:1.5rem; font-size:.88rem; font-weight:600; color:#1d4ed8; }
.sp-hl-banner button { background:none; border:none; cursor:pointer; color:#93c5fd; font-size:1.1rem; line-height:1; flex-shrink:0; }
.sp-hl-banner button:hover { color:#1d4ed8; }