/* ── sk-sidebar.css v1.0 | Skymoon Infotech ──────────────────────────────────
   Upload to: /wp-content/themes/YOUR-CHILD-THEME/assets/sk-sidebar.css
   WP Rocket will minify + combine this automatically.

   SECTIONS
   ────────
   1.  CSS variables + shared card base
   2.  About Skymoon card
   3.  Services widget
   4.  Free Audit CTA card
   5.  Blog Categories
   6.  Responsive (≤768px)
   7.  Reduced-motion

   PERFORMANCE CONTRACT
   ────────────────────
   • backdrop-filter: ONE instance per card — one composited layer each
   • Transitions: color, background, opacity, transform ONLY — zero reflow
   • No JS — all hover/active states are CSS :hover / :focus-visible
   • No external fonts — inherits REM from parent
   • No images — SVG icons inline in PHP, zero HTTP requests
   • Decorative elements: CSS ::before/::after — zero DOM nodes
   ─────────────────────────────────────────────────────────────────────────── */


/* ── 1. Variables + shared card base ─────────────────────────────────────── */

:root {
    --sk-brand:         #006CFF;
    --sk-purple:        #745EFF;
    --sk-dark:          #0f172a;
    --sk-border:        rgba(147, 178, 255, .42);
    --sk-border-light:  rgba(147, 178, 255, .25);
    --sk-glass:         rgba(255, 255, 255, .78);
    --sk-radius:        16px;
    --sk-shadow:        0 1px 0 rgba(255,255,255,.40) inset,
                        0 1px 2px rgba(16,24,40,.06),
                        0 10px 28px rgba(2,33,89,.05);
    --sk-gap:           20px;
    --sk-font:          "REM", system-ui, sans-serif;
}

/* Every sidebar widget shares this base — no duplication */
.sk-sb {
    border-radius: var(--sk-radius);
    overflow: hidden;
    margin-bottom: var(--sk-gap);
    font-family: var(--sk-font);
    /* CLS fix: explicit display so there's no layout recalc on first paint */
    display: block;
}
.sk-sb:last-child { margin-bottom: 0 }


/* ══════════════════════════════════════════════════════════════════════════
   2. ABOUT SKYMOON CARD
   Dark gradient card — authoritative, not salesy
   ══════════════════════════════════════════════════════════════════════════ */

.sk-sb-about {
    position: relative;
    background: linear-gradient(145deg, #0f172a 0%, #1a2744 55%, #0e1f4a 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 4px 24px rgba(0,0,0,.25),
                0 1px 0 rgba(255,255,255,.06) inset;
}

/* Radial light glow — top-right corner */
.sk-sb-about::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 180px at 95% -10%,
            rgba(0,108,255,.22) 0%,
            transparent 60%),
        radial-gradient(circle 120px at 5% 110%,
            rgba(116,94,255,.16) 0%,
            transparent 60%);
}

.sk-sb-about__body {
    position: relative;
    z-index: 1;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Badge */
.sk-sb-about__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(255,255,255,.78);
    letter-spacing: .08em;
    text-transform: uppercase;
    width: fit-content;
}
.sk-sb-about__badge svg { opacity: .8 }

/* Heading */
.sk-sb-about__title {
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.22;
    margin: 0;
    letter-spacing: -.025em;
}

/* Body copy */
.sk-sb-about__text {
    font-size: 13px;
    color: rgba(255,255,255,.65);
    line-height: 1.65;
    margin: 0;
}

/* Stats row */
.sk-sb-about__stats {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sk-sb-about__stat {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sk-sb-about__stat strong {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.sk-sb-about__stat span {
    font-size: 10.5px;
    color: rgba(255,255,255,.50);
    font-weight: 400;
    letter-spacing: .02em;
}
.sk-sb-about__stat-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,.10);
    flex-shrink: 0;
}

/* CTA button */
.sk-sb-about__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 0;
    border-radius: 10px;
    background: #ffffff;
    color: var(--sk-brand);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -.01em;
    box-shadow: 0 2px 10px rgba(0,0,0,.16);
    transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s;
    -webkit-tap-highlight-color: transparent;
}
.sk-sb-about__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0,0,0,.24);
}
.sk-sb-about__btn:active { transform: translateY(0) }
.sk-sb-about__btn svg { transition: transform .18s }
.sk-sb-about__btn:hover svg { transform: translateX(2px) }


/* ══════════════════════════════════════════════════════════════════════════
   3. SERVICES WIDGET
   White card with gradient header + interactive service links
   ══════════════════════════════════════════════════════════════════════════ */

.sk-sb-services {
    background: #ffffff;
    border: 1px solid #e8eaf0;
    box-shadow: var(--sk-shadow);
}

/* Gradient header bar */
.sk-sb-services__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px 12px;
    background: linear-gradient(135deg, var(--sk-brand) 0%, var(--sk-purple) 100%);
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
}
.sk-sb-services__brand {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,.68);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* List reset */
.sk-sb-services__list {
    list-style: none;
    margin: 0;
    padding: 8px 10px 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sk-sb-services__item { margin: 0 }

/* Service link — CSS custom properties set inline by PHP for per-item colors */
.sk-sb-services__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #0f172a;
    transition: background .14s;
    -webkit-tap-highlight-color: transparent;
}
.sk-sb-services__link:hover {
    background: color-mix(in srgb, var(--sc, #006CFF) 8%, transparent);
}
/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 8%, transparent)) {
    .sk-sb-services__link:hover {
        background: rgba(0,108,255,.07);
    }
}

/* Icon bubble */
.sk-sb-services__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-bg, rgba(0,108,255,.07));
    border: 1px solid var(--sc-border, rgba(0,108,255,.16));
    color: var(--sc, #006CFF);
    transition: background .14s, border-color .14s;
}
.sk-sb-services__link:hover .sk-sb-services__icon {
    background: color-mix(in srgb, var(--sc, #006CFF) 14%, transparent);
}

/* Text block */
.sk-sb-services__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sk-sb-services__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    transition: color .14s;
}
.sk-sb-services__link:hover .sk-sb-services__name {
    color: var(--sc, #006CFF);
}
.sk-sb-services__desc {
    display: block;
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.3;
}

/* Arrow */
.sk-sb-services__arrow {
    flex-shrink: 0;
    color: #d1d5db;
    transition: color .14s, transform .14s;
}
.sk-sb-services__link:hover .sk-sb-services__arrow {
    color: var(--sc, #006CFF);
    transform: translateX(2px);
}

/* Footer CTA row */
.sk-sb-services__footer {
    padding: 4px 10px 12px;
}
.sk-sb-services__all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sk-brand) 0%, var(--sk-purple) 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .15s;
    -webkit-tap-highlight-color: transparent;
}
.sk-sb-services__all-btn:hover { opacity: .88;
    color: #fff !important; }


/* ══════════════════════════════════════════════════════════════════════════
   4. FREE AUDIT CTA CARD
   Gradient card — brand blue to purple, white CTA button
   ══════════════════════════════════════════════════════════════════════════ */

.sk-sb-cta {
    position: relative;
    background: linear-gradient(135deg, var(--sk-brand) 0%, var(--sk-purple) 100%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 4px 28px rgba(0,108,255,.28);
}

/* Decorative circles */
.sk-sb-cta::before {
    content: "";
    position: absolute;
    top: -36px;
    right: -36px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    pointer-events: none;
}
.sk-sb-cta::after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: -16px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    pointer-events: none;
}

.sk-sb-cta__body {
    position: relative;
    z-index: 1;
    padding: 24px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Badge */
.sk-sb-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(255,255,255,.90);
    letter-spacing: .08em;
    text-transform: uppercase;
    width: fit-content;
}
.sk-sb-cta__badge svg { opacity: .85 }

/* Heading */
.sk-sb-cta__title {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.28;
    margin: 0;
    letter-spacing: -.02em;
}

/* Copy */
.sk-sb-cta__text {
    font-size: 13px;
    color: rgba(255,255,255,.75);
    line-height: 1.62;
    margin: 0;
}

/* Checklist */
.sk-sb-cta__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sk-sb-cta__checklist li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: rgba(255,255,255,.82);
    font-weight: 500;
}
.sk-sb-cta__checklist svg {
    flex-shrink: 0;
    opacity: .9;
    color: rgba(255,255,255,.9);
}

/* CTA button */
.sk-sb-cta__btn {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    background: #ffffff;
    color: var(--sk-brand);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -.01em;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
    margin-top: 4px;
    transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s;
    -webkit-tap-highlight-color: transparent;
}
.sk-sb-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.24);
}
.sk-sb-cta__btn:active { transform: translateY(0) }

/* Small note */
.sk-sb-cta__note {
    font-size: 10.5px;
    color: rgba(255,255,255,.52);
    text-align: center;
    margin: 0;
    letter-spacing: .02em;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. BLOG CATEGORIES
   Clean white card — dot-accented list, post count badges
   ══════════════════════════════════════════════════════════════════════════ */

.sk-sb-cats {
    background: #ffffff;
    border: 1px solid #e8eaf0;
    box-shadow: var(--sk-shadow);
}

/* Header row */
.sk-sb-cats__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
.sk-sb-cats__header svg { color: var(--sk-brand); flex-shrink: 0 }

/* List */
.sk-sb-cats__list {
    list-style: none;
    margin: 0;
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sk-sb-cats__item { margin: 0 }

/* Category link */
.sk-sb-cats__link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    transition: background .13s, color .13s;
    -webkit-tap-highlight-color: transparent;
}
.sk-sb-cats__link:hover {
    background: rgba(0,108,255,.05);
    color: var(--sk-brand);
}

/* Current category */
.sk-sb-cats__item.is-current .sk-sb-cats__link {
    background: rgba(0,108,255,.07);
    color: var(--sk-brand);
    font-weight: 600;
}

/* Dot indicator */
.sk-sb-cats__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sk-brand);
    flex-shrink: 0;
    opacity: .35;
    transition: opacity .13s;
}
.sk-sb-cats__link:hover .sk-sb-cats__dot,
.sk-sb-cats__item.is-current .sk-sb-cats__dot {
    opacity: 1;
}

/* Category name */
.sk-sb-cats__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Post count badge */
.sk-sb-cats__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 600;
    flex-shrink: 0;
    transition: background .13s, color .13s;
}
.sk-sb-cats__link:hover .sk-sb-cats__count,
.sk-sb-cats__item.is-current .sk-sb-cats__count {
    background: rgba(0,108,255,.10);
    color: var(--sk-brand);
}


/* ── 6. Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    :root { --sk-gap: 16px }

    .sk-sb-about__title   { font-size: 17px }
    .sk-sb-about__btn     { font-size: 13px }
    .sk-sb-cta__title     { font-size: 15.5px }
    .sk-sb-cta__btn       { font-size: 13.5px }
    .sk-sb-services__header { padding: 12px 16px 10px }
    .sk-sb-cats__header   { padding: 12px 16px 10px }
}


/* ── 7. Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .sk-sb-about__btn,
    .sk-sb-about__btn svg,
    .sk-sb-cta__btn,
    .sk-sb-services__link,
    .sk-sb-services__arrow,
    .sk-sb-services__name,
    .sk-sb-services__icon,
    .sk-sb-cats__link,
    .sk-sb-cats__dot,
    .sk-sb-cats__count,
    .sk-sb-services__all-btn {
        transition: none;
    }
}