/* ============================================================
   Indiagram Redesign Layer
   Brand-derived design tokens + sidebar + bento + theming.
   Loaded after style.css so it intentionally overrides legacy
   layout chrome while reusing the site's own brand identity.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS (derived from existing brand) ---------- */
:root {
    /* Indiagram — saffron orange + civic green + yellow */
    --sb-brand: #FF671F;
    --sb-brand-600: #E85A10;
    --sb-brand-700: #D14F0C;
    --sb-secondary: #046A38;
    --sb-accent: #FBD73D;
    --sb-accent-pink: #FB5F14;

    /* Light theme (default) */
    --sb-ink: #0c0b14;          /* primary text — black on light surfaces */
    --sb-ink-soft: #0c0b14;
    --sb-muted: #0c0b14;        /* no grey body copy on light theme */
    --sb-surface: #ffffff;      /* cards */
    --sb-surface-2: #f7f6f8;    /* page bg */
    --sb-surface-3: #FFF8F3;
    --sb-border: #F0D8C8;
    --sb-sidebar-bg: #ffffff;
    --sb-sidebar-ink: #3f3d59;
    --sb-sidebar-active-bg: #FFF0E6;
    --sb-topbar-bg: rgba(255,255,255,.9);

    /* Brand-tinted shadows */
    --sb-shadow-sm: 0 1px 2px rgba(63,61,89,.06), 0 1px 3px rgba(255,103,31,.08);
    --sb-shadow-md: 0 6px 18px rgba(255,103,31,.12), 0 2px 6px rgba(63,61,89,.06);
    --sb-shadow-lg: 0 18px 40px rgba(255,103,31,.18), 0 6px 14px rgba(63,61,89,.08);
    --sb-glow: 0 0 0 3px rgba(255,103,31,.22);

    /* Geometry / motion */
    --sb-radius: 18px;
    --sb-radius-sm: 12px;
    --sb-sidebar-w: 272px;
    --sb-sidebar-w-collapsed: 76px;
    --sb-topbar-h: 60px;
    --sb-ease: cubic-bezier(.4,0,.2,1);
    --sb-dur: .28s;

    --sb-font-head: 'Clash Display', 'Rubik', sans-serif;
    --sb-font-body: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
    --sb-grad: linear-gradient(100deg, #FB5F14 0%, #FF671F 42%, #FBD73D 100%);
    --sb-grad-soft: linear-gradient(135deg, rgba(251,95,20,.16), rgba(251,215,61,.12));
    color-scheme: light;
}

/* Light theme: no grey body copy anywhere */
html[data-theme="light"] body,
html:not([data-theme="dark"]) body,
html[data-theme="light"] #ifeatures,
html:not([data-theme="dark"]) #ifeatures,
html[data-theme="light"] .seo-prose,
html:not([data-theme="dark"]) .seo-prose,
html[data-theme="light"] .seo-prose p,
html:not([data-theme="dark"]) .seo-prose p {
    color: #0c0b14;
}

/* Dark theme: one toggle restyles the whole site via tokens. */
html[data-theme="dark"] {
    --sb-ink: #FFF4ED;
    --sb-ink-soft: #FFF4ED;
    --sb-muted: #FFF4ED;
    --sb-surface: #2A1A12;
    --sb-surface-2: #1A100A;
    --sb-surface-3: #3D2618;
    --sb-border: #4A3020;
    --sb-sidebar-bg: #1A100A;
    --sb-sidebar-ink: #FFF4ED;
    --sb-sidebar-active-bg: #3D2618;
    --sb-topbar-bg: rgba(26,16,10,.9);
    --sb-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --sb-shadow-md: 0 6px 18px rgba(0,0,0,.45);
    --sb-shadow-lg: 0 18px 40px rgba(0,0,0,.55);
    color-scheme: dark;
}

/* Smooth theme transition (suppressed before first paint by JS) */
html.sb-theme-ready,
html.sb-theme-ready body,
html.sb-theme-ready .sb-sidebar,
html.sb-theme-ready .sb-topbar,
html.sb-theme-ready .sb-bento,
html.sb-theme-ready .feature-box,
html.sb-theme-ready .mfeature-box {
    transition: background-color var(--sb-dur) var(--sb-ease),
                color var(--sb-dur) var(--sb-ease),
                border-color var(--sb-dur) var(--sb-ease),
                box-shadow var(--sb-dur) var(--sb-ease);
}

/* ---------- 2. GLOBAL SHELL ---------- */
html, body { background: var(--sb-surface-2); }

body.sb-shell {
    margin: 0;
    color: var(--sb-ink);
    font-family: var(--sb-font-body);
    padding-left: var(--sb-sidebar-w);
    transition: padding-left var(--sb-dur) var(--sb-ease);
    min-height: 100vh;
    overflow-x: hidden;
}
body.sb-shell.sb-collapsed { padding-left: var(--sb-sidebar-w-collapsed); }

/* Dark surfaces for legacy section blocks */
html[data-theme="dark"] body,
html[data-theme="dark"] #info,
html[data-theme="dark"] #services,
html[data-theme="dark"] #ifeatures,
html[data-theme="dark"] #page-head { background: var(--sb-surface-2); color: var(--sb-ink); }

/* Visible focus rings everywhere (accessibility) */
.sb-sidebar a:focus-visible,
.sb-sidebar button:focus-visible,
.sb-topbar button:focus-visible,
.sb-bento:focus-visible,
a.sb-bento:focus-visible {
    outline: none;
    box-shadow: var(--sb-glow);
    border-radius: var(--sb-radius-sm);
}

/* ---------- 3. FIXED LEFT SIDEBAR ---------- */
.sb-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sb-sidebar-w);
    background: var(--sb-sidebar-bg);
    border-right: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width var(--sb-dur) var(--sb-ease), transform var(--sb-dur) var(--sb-ease);
    font-family: var(--sb-font-body);
}
body.sb-collapsed .sb-sidebar { width: var(--sb-sidebar-w-collapsed); }

.sb-sidebar__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    min-height: var(--sb-topbar-h);
    border-bottom: 1px solid var(--sb-border);
}
.sb-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 1 1 auto; min-width: 0; }
.sb-logo img { height: 34px; width: auto; display: block; }
html[data-theme="dark"] .sb-logo img { filter: brightness(0) invert(1); }
.sb-logo__text {
    font-family: var(--sb-font-head);
    font-weight: 500;
    font-size: 18px;
    color: var(--sb-ink);
    white-space: nowrap;
}
body.sb-collapsed .sb-logo__text { display: none; }

/* Theme toggle button (sun/moon swap) */
.sb-theme-toggle {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--sb-border);
    background: var(--sb-surface-2);
    color: var(--sb-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.sb-theme-toggle:hover { border-color: var(--sb-brand); color: var(--sb-brand); }
.sb-theme-toggle .fa { position: absolute; transition: opacity var(--sb-dur) var(--sb-ease), transform var(--sb-dur) var(--sb-ease); }
.sb-theme-toggle .sb-sun { opacity: 1; transform: rotate(0) scale(1); }
.sb-theme-toggle .sb-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
html[data-theme="dark"] .sb-theme-toggle .sb-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
html[data-theme="dark"] .sb-theme-toggle .sb-moon { opacity: 1; transform: rotate(0) scale(1); }
body.sb-collapsed .sb-sidebar__header .sb-theme-toggle { display: none; }

/* Collapse / expand rail toggle */
.sb-rail-toggle {
    margin: 10px 16px 4px;
    width: calc(100% - 32px);
    height: 38px;
    border: 1px solid var(--sb-border);
    background: var(--sb-surface-2);
    color: var(--sb-muted);
    border-radius: var(--sb-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
}
.sb-rail-toggle:hover { color: var(--sb-brand); border-color: var(--sb-brand); }
.sb-rail-toggle .fa { transition: transform var(--sb-dur) var(--sb-ease); }
body.sb-collapsed .sb-rail-toggle .sb-rail-label { display: none; }
body.sb-collapsed .sb-rail-toggle .fa { transform: rotate(180deg); }

/* Scrollable nav body */
.sb-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px 24px;
    scrollbar-width: thin;
}
.sb-nav::-webkit-scrollbar { width: 8px; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--sb-border); border-radius: 8px; }

.sb-group { margin-bottom: 4px; }
.sb-group__label {
    display: block;
    padding: 6px 12px 4px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sb-muted);
    font-weight: 600;
}
body.sb-collapsed .sb-group__label { display: none; }

/* Row (link or group header button) */
.sb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--sb-radius-sm);
    color: var(--sb-sidebar-ink);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 14.5px;
    line-height: 1.2;
    text-align: left;
    position: relative;
    transition: background-color .18s var(--sb-ease), color .18s var(--sb-ease);
}
.sb-item:hover { background: var(--sb-grad-soft); color: var(--sb-brand); text-decoration: none; }
.sb-item__icon { flex: 0 0 22px; width: 22px; text-align: center; font-size: 16px; color: var(--sb-muted); }
.sb-item:hover .sb-item__icon,
.sb-item.is-open .sb-item__icon { color: var(--sb-brand); }
.sb-item__text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item__caret { flex: 0 0 auto; font-size: 12px; color: var(--sb-muted); transition: transform var(--sb-dur) var(--sb-ease); }
.sb-item.is-open .sb-item__caret { transform: rotate(180deg); }

/* Active state */
.sb-item[aria-current="page"] {
    background: var(--sb-grad-soft);
    color: var(--sb-brand);
    font-weight: 700;
}
.sb-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0; top: 7px; bottom: 7px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--sb-grad);
}
.sb-item[aria-current="page"] .sb-item__icon { color: var(--sb-brand); }

/* Collapsed rail: icon-only with tooltip */
body.sb-collapsed .sb-item__text,
body.sb-collapsed .sb-item__caret { display: none; }
body.sb-collapsed .sb-item { justify-content: center; padding: 11px 0; }
body.sb-collapsed .sb-submenu { display: none !important; }
body.sb-collapsed .sb-item[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--sb-ink);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1200;
    box-shadow: var(--sb-shadow-md);
}

/* Submenu with smooth flow-in (height animated by JS via max-height) */
.sb-submenu {
    list-style: none;
    margin: 2px 0 2px;
    padding: 0 0 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--sb-dur) var(--sb-ease), opacity var(--sb-dur) var(--sb-ease);
    opacity: .4;
}
.sb-item.is-open + .sb-submenu { opacity: 1; }
.sb-submenu .sb-item { padding-left: 30px; font-size: 13.5px; }
.sb-submenu .sb-item__icon { font-size: 13px; }
.sb-submenu .sb-submenu .sb-item { padding-left: 46px; }

/* Sidebar footer (account / language) */
.sb-sidebar__footer {
    border-top: 1px solid var(--sb-border);
    padding: 10px;
}
body.sb-collapsed .sb-sidebar__footer .sb-lang,
body.sb-collapsed .sb-sidebar__footer .sb-cartcount { display: none; }
.sb-lang select {
    width: 100%;
    margin-top: 8px;
    background: var(--sb-surface-2);
    color: var(--sb-ink);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    padding: 8px 10px;
    font-size: 13px;
}
.sb-cartcount {
    margin-left: auto;
    background: var(--sb-grad);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- 4. MOBILE TOP BAR + DRAWER ---------- */
.sb-topbar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--sb-topbar-h);
    background: var(--sb-topbar-bg);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--sb-border);
    box-shadow: 0 6px 20px -14px rgba(40,30,90,.5);
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    z-index: 1100;
}
.sb-topbar__btn {
    width: 44px; height: 44px;
    border: 0; background: none; cursor: pointer;
    color: var(--sb-ink);
    font-size: 20px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
}
.sb-topbar__btn:hover { background: var(--sb-surface-2); color: var(--sb-brand); }
.sb-topbar .sb-logo { justify-content: center; }
.sb-topbar .sb-logo img { height: 30px; }
.sb-overlay {
    position: fixed; inset: 0;
    background: rgba(10,9,20,.34);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
    backdrop-filter: blur(7px) saturate(120%);
    opacity: 0; visibility: hidden;
    transition: opacity var(--sb-dur) var(--sb-ease), visibility var(--sb-dur) var(--sb-ease);
    /* Must sit BELOW the sidebar (z:1000) so the veil dims the page content,
       not the menu itself. (The old value 1050 darkened the drawer.) */
    z-index: 990;
}
body.sb-drawer-open .sb-overlay { opacity: 1; visibility: visible; }

/* ---------- 5. BENTO LAYOUT ---------- */
.sb-bento-wrap { padding: 28px clamp(16px, 4vw, 40px); max-width: 1320px; margin: 0 auto; }
.sb-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

/* Generic bento card */
.sb-bento {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 24px;
    box-shadow: var(--sb-shadow-sm);
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--sb-ink);
    transition: transform .22s var(--sb-ease), box-shadow .22s var(--sb-ease), border-color .22s var(--sb-ease);
    position: relative;
    overflow: hidden;
}
a.sb-bento:hover, .sb-bento.is-link:hover {
    transform: translateY(-4px);
    box-shadow: var(--sb-shadow-lg);
    border-color: var(--sb-brand);
}
.sb-bento--lg { grid-column: span 8; }
.sb-bento--full { grid-column: span 12; }
.sb-bento--half { grid-column: span 6; }
.sb-bento__icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    background: var(--sb-sidebar-active-bg);
    color: var(--sb-brand);
    margin-bottom: 14px;
}
.sb-bento__title { font-family: var(--sb-font-head); font-size: 19px; font-weight: 500; margin: 0 0 6px; color: var(--sb-ink); }
.sb-bento__desc { color: var(--sb-muted); font-size: 14px; line-height: 1.5; margin: 0; }
.sb-bento__stat { font-family: var(--sb-font-head); font-size: 34px; font-weight: 500; color: var(--sb-brand); line-height: 1; }

/* Hero / CTA bento */
.sb-bento--hero {
    grid-column: span 12;
    background: linear-gradient(135deg, var(--sb-brand) 0%, var(--sb-secondary) 100%);
    color: #fff;
    border: 0;
    padding: 40px clamp(24px,4vw,48px);
}
.sb-bento--hero .sb-bento__title { color: #fff; font-size: clamp(26px,3vw,38px); }
.sb-bento--hero .sb-bento__desc { color: rgba(255,255,255,.9); font-size: 16px; max-width: 60ch; }
.sb-cta-btn {
    align-self: flex-start;
    margin-top: 18px;
    background: #fff;
    color: var(--sb-brand);
    border-radius: 999px;
    padding: 12px 26px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--sb-shadow-md);
    transition: transform .2s var(--sb-ease);
}
.sb-cta-btn:hover { transform: translateY(-2px); color: var(--sb-brand-700); }

/* Reskin legacy service / feature boxes as bento cards in place */
.feature-box, .mfeature-box {
    background: var(--sb-surface) !important;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-sm);
    transition: transform .22s var(--sb-ease), box-shadow .22s var(--sb-ease), border-color .22s var(--sb-ease);
}
.feature-box:hover, .mfeature-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--sb-shadow-md);
    border-color: var(--sb-brand);
}
html[data-theme="dark"] .feature-title,
html[data-theme="dark"] .mfeature-title,
html[data-theme="dark"] .feature-details,
html[data-theme="dark"] .row-title,
html[data-theme="dark"] .info-text { color: var(--sb-ink) !important; }

/* Legacy section spacing tune so content breathes next to sidebar */
#info, #services, #ifeatures, #page-head { background: transparent; }

/* ---------- 6. RESPONSIVE ---------- */
@media (max-width: 992px) {
    body.sb-shell { padding-left: 0; padding-top: var(--sb-topbar-h); }
    body.sb-shell.sb-collapsed { padding-left: 0; }
    .sb-topbar { display: flex; }
    .sb-sidebar {
        transform: translateX(-100%);
        width: min(86vw, 320px) !important;
        border-right: 0;
        border-radius: 0 22px 22px 0;
        box-shadow: 0 30px 80px -20px rgba(20,12,60,.45);
    }
    body.sb-drawer-open .sb-sidebar { transform: translateX(0); }
    /* On mobile the rail-toggle is irrelevant; groups become accordions */
    .sb-rail-toggle { display: none; }
    body.sb-collapsed .sb-item__text,
    body.sb-collapsed .sb-item__caret { display: inline; }
    body.sb-collapsed .sb-item { justify-content: flex-start; padding: 10px 12px; }
    .sb-bento-grid { gap: 14px; }
    .sb-bento, .sb-bento--lg, .sb-bento--half { grid-column: span 6; }
    .sb-bento--hero, .sb-bento--full { grid-column: span 12; }
}
@media (max-width: 600px) {
    .sb-bento, .sb-bento--lg, .sb-bento--half, .sb-bento--full { grid-column: span 12; }
    .sb-bento-wrap { padding: 18px 14px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Tap targets >= 44px on touch */
@media (pointer: coarse) {
    .sb-item, .sb-topbar__btn, .sb-theme-toggle, .sb-rail-toggle { min-height: 44px; }
}

/* ---------- 7. PREMIUM FOOTER (global) ---------- */
.sb-foot {
    background: var(--sb-surface);
    border-top: 1px solid var(--sb-border);
    font-family: var(--sb-font-body);
    margin-top: 40px;
}
.sb-foot__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) clamp(18px, 4vw, 40px) clamp(28px, 4vw, 44px);
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
}
.sb-foot__logo img { height: 36px; width: auto; }
html[data-theme="dark"] .sb-foot__logo img { filter: brightness(0) invert(1); }
.sb-foot__tag { color: var(--sb-muted); font-size: 14.5px; line-height: 1.65; margin: 16px 0 18px; max-width: 36ch; }
.sb-foot__social { display: flex; gap: 10px; }
.sb-foot__social a {
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sb-ink); background: var(--sb-surface-2);
    border: 1px solid var(--sb-border); font-size: 16px;
    transition: transform .3s var(--sb-ease), color .3s var(--sb-ease), border-color .3s var(--sb-ease);
}
.sb-foot__social a:hover { transform: translateY(-3px); color: var(--sb-brand); border-color: var(--sb-brand); }
.sb-foot__col h4 { font-family: var(--sb-font-head); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--sb-ink); margin: 4px 0 16px; font-weight: 500; }
.sb-foot__col ul { list-style: none; margin: 0; padding: 0; }
.sb-foot__col li { margin-bottom: 11px; }
.sb-foot__col a { color: var(--sb-muted); text-decoration: none; font-size: 14.5px; transition: color .2s var(--sb-ease); }
.sb-foot__col a:hover { color: var(--sb-brand); }
.sb-foot__bar {
    max-width: 1180px; margin: 0 auto;
    padding: 20px clamp(18px, 4vw, 40px);
    border-top: 1px solid var(--sb-border);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    color: var(--sb-muted); font-size: 13.5px;
}
.sb-foot__pay { display: inline-flex; align-items: center; gap: 8px; }
.sb-foot__pay .fa { color: var(--sb-accent); }
@media (max-width: 860px) {
    .sb-foot__inner { grid-template-columns: 1fr 1fr; gap: 30px; }
    .sb-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .sb-foot__inner { grid-template-columns: 1fr; }
    .sb-foot__bar { flex-direction: column; align-items: flex-start; }
}
.sb-blog-wrap, .sb-article {
    padding: clamp(24px,4vw,48px) clamp(16px,4vw,40px) 64px;
    max-width: 1180px;
    margin: 0 auto;
}

/* ---- shared bits ---- */
.sb-blog-cat {
    display: inline-block;
    font-family: var(--sb-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sb-brand);
    background: var(--sb-sidebar-active-bg);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.sb-blog-cat--onpurple { color: var(--sb-brand-700); background: var(--sb-accent); }
.sb-blog-meta { font-size: 13px; color: var(--sb-muted); font-family: var(--sb-font-body); }
.sb-blog-meta .sb-dot { margin: 0 7px; opacity: .6; }
.sb-blog-meta--onpurple { color: rgba(255,255,255,.78); }
.sb-blog-readmore {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    font-family: var(--sb-font-head);
    font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--sb-brand);
}
.sb-blog-readmore .fa { transition: transform .2s var(--sb-ease); }
a:hover .sb-blog-readmore .fa { transform: translateX(4px); }

/* abstract overlapping logo-mark used as image placeholder in frames */
.sb-blog-feature__mark, .sb-blog-card__mark, .sb-article-hero__mark {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 32% 38%, rgba(255,255,255,.9) 0 22%, transparent 23%),
        radial-gradient(circle at 64% 60%, var(--sb-accent) 0 24%, transparent 25%);
    opacity: .92;
}

/* ---- listing header ---- */
.sb-blog-head { margin-bottom: 36px; }
.sb-eyebrow {
    display: inline-block;
    font-family: var(--sb-font-head);
    font-size: 12px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--sb-brand); margin-bottom: 12px;
}
.sb-blog-title {
    font-family: var(--sb-font-head);
    text-transform: uppercase; font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.02;
    font-size: clamp(2.4rem,5vw,4.6rem);
    color: var(--sb-ink); margin: 0 0 14px;
    max-width: 18ch;
}
.sb-blog-sub { font-size: 17px; line-height: 1.7; color: var(--sb-muted); max-width: 60ch; margin: 0 0 18px; }

/* ---- featured post ---- */
.sb-blog-feature {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 40px;
    transition: transform .22s var(--sb-ease), box-shadow .22s var(--sb-ease), border-color .22s var(--sb-ease);
}
.sb-blog-feature:hover { transform: translateY(-4px); box-shadow: var(--sb-shadow-lg); border-color: var(--sb-brand); }
.sb-blog-feature__media { position: relative; background: var(--sb-brand); min-height: 300px; }
.sb-blog-feature__body { padding: clamp(24px,3vw,40px); display: flex; flex-direction: column; justify-content: center; }
.sb-blog-feature__title {
    font-family: var(--sb-font-head);
    text-transform: uppercase; font-weight: 700; letter-spacing: -0.01em; line-height: 1.05;
    font-size: clamp(1.6rem,2.6vw,2.4rem); color: var(--sb-ink); margin: 0 0 12px;
}
.sb-blog-feature__excerpt { font-size: 15.5px; line-height: 1.7; color: var(--sb-muted); margin: 0 0 16px; }

/* ---- post grid ---- */
.sb-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sb-blog-card {
    display: flex; flex-direction: column;
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    overflow: hidden;
    text-decoration: none;
    transition: transform .22s var(--sb-ease), box-shadow .22s var(--sb-ease), border-color .22s var(--sb-ease);
}
.sb-blog-card:hover { transform: translateY(-4px); box-shadow: var(--sb-shadow-lg); border-color: var(--sb-brand); }
.sb-blog-card__media { position: relative; background: var(--sb-brand); aspect-ratio: 16/9; }
.sb-blog-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.sb-blog-card__title {
    font-family: var(--sb-font-head);
    text-transform: uppercase; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1;
    font-size: 18px; color: var(--sb-ink); margin: 0 0 10px;
}
.sb-blog-card__excerpt { font-size: 14px; line-height: 1.65; color: var(--sb-muted); margin: 0 0 12px; flex: 1 1 auto; }

/* ---- newsletter CTA ---- */
.sb-blog-cta {
    margin-top: 48px;
    background: var(--sb-brand);
    border-radius: var(--sb-radius);
    padding: clamp(28px,4vw,44px);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
    position: relative; overflow: hidden;
}
.sb-blog-cta__title { font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700; color: #fff; margin: 0 0 8px; font-size: clamp(1.4rem,2.4vw,2rem); }
.sb-blog-cta__sub { color: rgba(255,255,255,.82); margin: 0; font-size: 15px; }
.sb-blog-cta__form { display: flex; gap: 10px; flex: 0 1 auto; }
.sb-blog-cta__form input {
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.1);
    color: #fff;
    border-radius: 999px;
    padding: 12px 18px;
    min-width: 200px;
    font-family: var(--sb-font-body);
}
.sb-blog-cta__form input::placeholder { color: rgba(255,255,255,.6); }
.sb-blog-cta__form input:focus { outline: none; border-color: var(--sb-accent); }

/* ============================================================
   ARTICLE TEMPLATE
   ============================================================ */
.sb-article { max-width: 820px; }
.sb-article-head {
    background: var(--sb-brand);
    border-radius: var(--sb-radius);
    padding: clamp(28px,4vw,48px);
    margin-bottom: 0;
}
.sb-article-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--sb-accent); font-family: var(--sb-font-head);
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    text-decoration: none; margin-bottom: 18px;
}
.sb-article-back:hover { color: #cdf72a; }
.sb-article-title {
    font-family: var(--sb-font-head);
    text-transform: uppercase; font-weight: 700; letter-spacing: -0.01em; line-height: 1.04;
    font-size: clamp(2rem,4vw,3.4rem); color: #fff; margin: 10px 0 16px;
}
/* off-center rectangular hero frame (bottom-right energy) */
.sb-article-hero {
    position: relative;
    height: clamp(220px,32vw,360px);
    background: var(--sb-brand-700);
    border-radius: var(--sb-radius);
    margin: 18px 0 0 auto;
    width: 92%;
    overflow: hidden;
    box-shadow: var(--sb-shadow-md);
}

.sb-article-body { padding-top: 32px; }
.sb-article-lead {
    font-size: 20px; line-height: 1.6; color: var(--sb-ink-soft);
    font-weight: 500; margin: 0 0 28px;
}
.sb-article-body h2 {
    font-family: var(--sb-font-head);
    text-transform: uppercase; font-weight: 700; letter-spacing: -0.005em;
    font-size: clamp(1.5rem,2.4vw,2rem); color: var(--sb-ink);
    margin: 38px 0 14px; line-height: 1.1;
}
.sb-article-body h3 {
    font-family: var(--sb-font-head);
    text-transform: uppercase; font-weight: 600;
    font-size: 1.15rem; color: var(--sb-ink);
    margin: 26px 0 10px;
}
.sb-article-body p { font-size: 17px; line-height: 1.8; color: var(--sb-muted); margin: 0 0 18px; }
.sb-article-list { margin: 0 0 22px; padding: 0; list-style: none; }
.sb-article-list li {
    position: relative; padding: 6px 0 6px 28px;
    font-size: 16.5px; line-height: 1.7; color: var(--sb-muted);
}
.sb-article-list li::before {
    content: ""; position: absolute; left: 0; top: 15px;
    width: 12px; height: 12px; border-radius: 3px;
    background: var(--sb-accent);
}
.sb-article-quote {
    margin: 28px 0;
    padding: 6px 0 6px 24px;
    border-left: 4px solid var(--sb-accent);
    font-family: var(--sb-font-head);
    text-transform: none;
    font-size: 1.4rem; line-height: 1.4; font-weight: 500;
    color: var(--sb-ink);
}
.sb-article-cta {
    background: var(--sb-sidebar-active-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 28px;
    margin: 30px 0;
    text-align: center;
}
.sb-article-cta p {
    font-family: var(--sb-font-head); text-transform: uppercase;
    font-weight: 700; font-size: 1.2rem; color: var(--sb-ink) !important;
    margin: 0 0 16px !important;
}

/* share + author */
.sb-article-share { display: flex; align-items: center; gap: 16px; margin: 28px 0; flex-wrap: wrap; }
.sb-article-share__label {
    font-family: var(--sb-font-head); text-transform: uppercase;
    font-size: 12px; letter-spacing: .08em; font-weight: 700; color: var(--sb-muted);
}
.sb-article-author {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--sb-surface-2);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 24px; margin: 28px 0;
}
.sb-article-author__avatar {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
    background:
        radial-gradient(circle at 32% 38%, #fff 0 36%, transparent 37%),
        radial-gradient(circle at 66% 62%, var(--sb-accent) 0 38%, transparent 39%),
        var(--sb-brand);
}
.sb-article-author strong { display: block; font-family: var(--sb-font-head); text-transform: uppercase; color: var(--sb-ink); font-size: 15px; }
.sb-article-author__role { display: block; font-size: 13px; color: var(--sb-brand); margin: 2px 0 8px; font-weight: 500; }
.sb-article-author p { font-size: 14.5px; line-height: 1.6; color: var(--sb-muted); margin: 0; }

/* related */
.sb-article-related { margin-top: 44px; }
.sb-article-related__title {
    font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700;
    font-size: 1.5rem; color: var(--sb-ink); margin: 0 0 20px;
}
.sb-article-related .sb-blog-card__media { aspect-ratio: 16/7; }

/* dark theme blog/article text */
html[data-theme="dark"] .sb-blog-title,
html[data-theme="dark"] .sb-blog-feature__title,
html[data-theme="dark"] .sb-blog-card__title,
html[data-theme="dark"] .sb-article-body h2,
html[data-theme="dark"] .sb-article-body h3,
html[data-theme="dark"] .sb-article-quote,
html[data-theme="dark"] .sb-article-author strong,
html[data-theme="dark"] .sb-article-related__title { color: #fff; }
html[data-theme="dark"] .sb-article-lead { color: var(--sb-ink-soft); }

/* ---- blog responsive ---- */
@media (max-width: 900px) {
    .sb-blog-grid { grid-template-columns: repeat(2, 1fr); }
    .sb-blog-feature { grid-template-columns: 1fr; }
    .sb-blog-feature__media { min-height: 200px; }
}
@media (max-width: 600px) {
    .sb-blog-grid { grid-template-columns: 1fr; }
    .sb-blog-cta { flex-direction: column; align-items: flex-start; }
    .sb-blog-cta__form { width: 100%; }
    .sb-blog-cta__form input { flex: 1 1 auto; min-width: 0; }
    .sb-article-hero { width: 100%; }
}

/* ---- /blogs/ hub — left category sidebar + imported WP body ---- */
.sb-blog-hub-page .sb-blog-wrap { max-width: 1320px; }
.sb-blog-hub {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}
.sb-blog-sidebar {
    position: sticky;
    top: calc(var(--sb-topbar-h) + 16px);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 22px 18px;
    max-height: calc(100vh - var(--sb-topbar-h) - 32px);
    overflow: auto;
}
.sb-blog-sidebar__head { margin-bottom: 14px; }
.sb-blog-sidebar__title {
    font-family: var(--sb-font-head);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1rem;
    color: var(--sb-ink);
    margin: 4px 0 0;
}
.sb-blog-sidebar__nav { display: flex; flex-direction: column; gap: 4px; }
.sb-blog-sidebar__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--sb-radius-sm);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--sb-ink-soft);
    transition: background .18s var(--sb-ease), color .18s var(--sb-ease);
}
.sb-blog-sidebar__link:hover {
    background: var(--sb-sidebar-active-bg);
    color: var(--sb-brand);
}
.sb-blog-sidebar__link.is-active {
    background: var(--sb-brand);
    color: #fff;
    font-weight: 600;
}
.sb-blog-sidebar__link.is-active .sb-blog-sidebar__count {
    background: var(--sb-accent);
    color: var(--sb-brand-700);
}
.sb-blog-sidebar__count {
    flex: 0 0 auto;
    font-family: var(--sb-font-head);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--sb-surface-3);
    color: var(--sb-muted);
}
.sb-blog-hub__main { min-width: 0; }
.sb-blog-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin: 0 0 20px;
    color: var(--sb-muted);
    font-family: var(--sb-font-body);
}
.sb-blog-crumb a { color: var(--sb-muted); text-decoration: none; }
.sb-blog-crumb a:hover { color: var(--sb-brand); }
.sb-blog-crumb span { opacity: .55; }
.sb-blog-grid--hub { margin-bottom: 28px; }
.sb-blog-empty {
    font-size: 16px;
    color: var(--sb-muted);
    padding: 32px 0;
}
.sb-blog-empty a { color: var(--sb-brand); font-weight: 600; }
.sb-blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 8px 0 36px;
}
.sb-blog-pagination__btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid var(--sb-border);
    border-radius: 999px;
    font-family: var(--sb-font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sb-brand);
    text-decoration: none;
    background: var(--sb-surface);
    transition: border-color .18s var(--sb-ease), background .18s var(--sb-ease);
}
.sb-blog-pagination__btn:hover:not(.is-disabled) {
    border-color: var(--sb-brand);
    background: var(--sb-sidebar-active-bg);
}
.sb-blog-pagination__btn.is-disabled {
    opacity: .35;
    pointer-events: none;
}
.sb-blog-pagination__info {
    font-family: var(--sb-font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sb-muted);
}
.sb-hl { color: var(--sb-brand); }
.sb-divider--lime {
    display: block;
    width: 72px;
    height: 4px;
    background: var(--sb-accent);
    border-radius: 2px;
}
.sb-article-body--imported h2,
.sb-article-body--imported h3,
.sb-article-body--imported h4 {
    font-family: var(--sb-font-head);
    color: var(--sb-ink);
    margin: 28px 0 12px;
    line-height: 1.2;
}
.sb-article-body--imported h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); text-transform: uppercase; font-weight: 700; }
.sb-article-body--imported h3 { font-size: 1.25rem; font-weight: 600; }
.sb-article-body--imported h4 { font-size: 1.1rem; font-weight: 600; text-transform: none; }
.sb-article-body--imported p,
.sb-article-body--imported li {
    font-size: 17px;
    line-height: 1.8;
    color: var(--sb-muted);
}
.sb-article-body--imported ul,
.sb-article-body--imported ol { margin: 0 0 18px 24px; }
.sb-article-body--imported a { color: var(--sb-brand); font-weight: 600; }
.sb-article-body--imported a:hover { color: var(--sb-brand-700); }
.sb-article-body--imported img { max-width: 100%; height: auto; border-radius: var(--sb-radius-sm); margin: 16px 0; }
.sb-article-footer-cta {
    margin-top: 36px;
    padding: 28px;
    background: var(--sb-sidebar-active-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    text-align: center;
}
.sb-article-footer-cta p {
    font-family: var(--sb-font-head);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--sb-ink);
    margin: 0 0 14px;
}
.sb-blog-hub--article .sb-article { max-width: none; }
@media (max-width: 992px) {
    .sb-blog-hub { grid-template-columns: 1fr; }
    .sb-blog-sidebar {
        position: static;
        max-height: none;
    }
    .sb-blog-sidebar__nav {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 6px;
    }
}
@media (max-width: 600px) {
    .sb-blog-sidebar__nav { grid-template-columns: 1fr 1fr; }
}