/*!
 * SUE Blog Design — Material Design 3 (primary #1A2956, secondary #9B8444).
 * Only the plugin's own classed elements are styled (scoped under .sbl-root), so the theme,
 * Elementor and the site header/footer are never affected. Logical properties mirror RTL.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
.sbl-root {
	--sbl-primary: #1A2956;
	--sbl-primary-2: #2A3F7E;
	--sbl-on-primary: #FFFFFF;
	--sbl-primary-container: #DDE2F6;
	--sbl-on-primary-container: #0E1740;
	--sbl-secondary: #9B8444;
	--sbl-secondary-strong: #7D6829;
	--sbl-secondary-container: #F3EAD0;
	--sbl-on-secondary-container: #3A2F0B;
	--sbl-gold-text: #735F27;
	--sbl-surface: #F6F7FB;
	--sbl-surface-lowest: #FFFFFF;
	--sbl-surface-low: #F1F3F9;
	--sbl-surface-container: #EBEEF5;
	--sbl-surface-high: #E4E7F0;
	--sbl-on-surface: #1A1C23;
	--sbl-on-surface-variant: #464A57;
	--sbl-outline: #767A89;
	--sbl-outline-variant: #D3D6E1;
	--sbl-divider: #E6E8EF;
	--sbl-elev-1: 0 1px 2px rgba(20, 30, 70, .10), 0 1px 3px 1px rgba(20, 30, 70, .06);
	--sbl-elev-2: 0 2px 4px rgba(20, 30, 70, .10), 0 4px 12px 2px rgba(20, 30, 70, .08);
	--sbl-elev-3: 0 6px 12px rgba(20, 30, 70, .12), 0 10px 28px 4px rgba(20, 30, 70, .10);
	--sbl-r-s: 8px;
	--sbl-r-m: 12px;
	--sbl-r-l: 16px;
	--sbl-r-xl: 20px;
	--sbl-r-xxl: 28px;
	--sbl-ease: cubic-bezier(.2, 0, 0, 1);
	--sbl-ease-emph: cubic-bezier(.05, .7, .1, 1);
	--sbl-dur: .25s;
	--sbl-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

	display: block;
	font-family: var(--sbl-font);
	font-size: 16px;
	line-height: 1.7;
	color: var(--sbl-on-surface);
	background: var(--sbl-surface);
	text-align: start;
	-webkit-font-smoothing: antialiased;
}
.sbl-root[dir="rtl"] { --sbl-font: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; line-height: 1.85; }
.sbl-root *, .sbl-root *::before, .sbl-root *::after { box-sizing: border-box; }
.sbl-root [hidden] { display: none !important; }
.sbl-root :focus-visible { outline: 3px solid var(--sbl-secondary); outline-offset: 2px; }
.sbl-root .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.sbl-root .material-symbols-rounded {
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	direction: ltr;
	flex-shrink: 0;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: 'liga';
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	user-select: none;
}
.sbl-root[dir="rtl"] .sbl-flip { transform: scaleX(-1); }

/* Shared text resets for the plugin's own headings / links / buttons. */
.sbl-root .sbl-hero__title, .sbl-root .sbl-hero__eyebrow, .sbl-root .sbl-hero__desc, .sbl-root .sbl-hero__lead, .sbl-root .sbl-hero__count,
.sbl-root .sbl-panel__title, .sbl-root .sbl-card__title, .sbl-root .sbl-card__excerpt, .sbl-root .sbl-section-title, .sbl-root .sbl-empty__title,
.sbl-root .sbl-sidebar__drawer-title, .sbl-root .sbl-end, .sbl-root .sbl-share__label {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--sbl-font);
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}
.sbl-root .sbl-card__title a, .sbl-root .sbl-tree__link, .sbl-root .sbl-chip, .sbl-root .sbl-breadcrumb a, .sbl-root .sbl-card__more,
.sbl-root .sbl-postnav__item, .sbl-root .sbl-toc a, .sbl-root .sbl-tree__all, .sbl-root .sbl-pagination a, .sbl-root .sbl-share__btn, .sbl-root .sbl-btn {
	text-decoration: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}
.sbl-root .sbl-icon-btn, .sbl-root .sbl-tree__toggle, .sbl-root .sbl-search__btn, .sbl-root .sbl-fab, .sbl-root .sbl-top, .sbl-root .sbl-btn, .sbl-root .sbl-share__btn {
	font-family: var(--sbl-font);
	margin: 0;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */
.sbl-root .sbl-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--sbl-on-primary);
	background:
		radial-gradient(900px 380px at 88% -10%, rgba(155, 132, 68, .45), transparent 60%),
		linear-gradient(135deg, #131F45 0%, var(--sbl-primary) 45%, #273C7A 100%);
	padding: 36px 24px 92px;
}
.sbl-root[dir="rtl"] .sbl-hero {
	background:
		radial-gradient(900px 380px at 12% -10%, rgba(155, 132, 68, .45), transparent 60%),
		linear-gradient(225deg, #131F45 0%, var(--sbl-primary) 45%, #273C7A 100%);
}
.sbl-root .sbl-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
	mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.sbl-root .sbl-hero--post::after {
	content: '';
	position: absolute;
	inset: -40px;
	z-index: -2;
	background-image: var(--sbl-hero-img, none);
	background-size: cover;
	background-position: center;
	filter: blur(28px) saturate(1.2);
	opacity: .22;
}
.sbl-root .sbl-hero__inner { position: relative; max-width: 1320px; margin: 0 auto; }
.sbl-root .sbl-hero__row { display: flex; align-items: center; gap: 20px; }
.sbl-root .sbl-hero__icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 22px;
	background: linear-gradient(145deg, #B39B57, var(--sbl-secondary-strong));
	box-shadow: 0 10px 24px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .3);
	flex-shrink: 0;
}
.sbl-root .sbl-hero__icon .material-symbols-rounded { font-size: 38px; color: #fff; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 40; }
.sbl-root .sbl-hero__eyebrow { font-size: 14px; font-weight: 700; color: #E9D9A6; }
.sbl-root .sbl-hero__title { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.3; font-weight: 800; color: #fff; margin: 2px 0 6px; }
.sbl-root .sbl-hero__title--post { max-width: 30ch; font-size: clamp(26px, 3.2vw, 42px); margin: 14px 0 10px; }
.sbl-root .sbl-hero__desc, .sbl-root .sbl-hero__lead { color: rgba(255, 255, 255, .85); max-width: 75ch; font-size: 16px; }
.sbl-root .sbl-hero__lead { font-size: 17px; margin-bottom: 14px; }
.sbl-root .sbl-hero__count { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13.5px; font-weight: 700; color: #fff; }
.sbl-root .sbl-hero .sbl-meta { color: rgba(255, 255, 255, .85); }
.sbl-root .sbl-hero .sbl-meta .material-symbols-rounded { color: #E0CC8E; }

.sbl-root .sbl-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 20px; font-size: 13.5px; color: rgba(255, 255, 255, .78); min-width: 0; }
.sbl-root .sbl-breadcrumb a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .92); }
.sbl-root .sbl-breadcrumb a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.sbl-root .sbl-breadcrumb .material-symbols-rounded { font-size: 18px; }
.sbl-root .sbl-breadcrumb [aria-current] { color: #E9D9A6; font-weight: 600; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* Shell, sidebar, drawer                                              */
/* ------------------------------------------------------------------ */
.sbl-root .sbl-shell {
	position: relative;
	max-width: 1320px;
	margin: -60px auto 0;
	padding: 0 24px 56px;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.sbl-root .sbl-sidebar { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.admin-bar .sbl-root .sbl-sidebar { top: 56px; }
.sbl-root .sbl-sidebar__drawer-head { display: none; }
.sbl-root .sbl-panel { background: var(--sbl-surface-lowest); border-radius: var(--sbl-r-xxl); box-shadow: var(--sbl-elev-2); padding: 20px; }
.sbl-root .sbl-panel__title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 16px; font-weight: 800; color: var(--sbl-primary); line-height: 1.4; }
.sbl-root .sbl-panel__title .material-symbols-rounded { color: var(--sbl-secondary-strong); font-size: 22px; }

.sbl-root .sbl-search { position: relative; display: flex; align-items: center; margin: 0; }
.sbl-root .sbl-search__icon { position: absolute; z-index: 1; left: 14px; right: auto; color: var(--sbl-outline); pointer-events: none; }
.sbl-root[dir="rtl"] .sbl-search__icon { left: auto; right: 14px; }
.sbl-root .sbl-search__input {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 52px 0 44px;
	border: 1px solid var(--sbl-outline-variant);
	border-radius: 999px;
	background: var(--sbl-surface-low);
	color: var(--sbl-on-surface);
	font: 500 15px/1 var(--sbl-font);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--sbl-dur), background-color var(--sbl-dur), box-shadow var(--sbl-dur);
}
.sbl-root[dir="rtl"] .sbl-search__input { padding: 0 44px 0 52px; }
.sbl-root .sbl-search__input:focus { outline: none; background: #fff; border-color: var(--sbl-primary); box-shadow: 0 0 0 1px var(--sbl-primary); }
.sbl-root .sbl-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sbl-root .sbl-search__btn,
.sbl-root .sbl-search__btn:hover,
.sbl-root .sbl-search__btn:focus {
	position: absolute;
	inset-inline-end: 5px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sbl-primary);
	color: #fff;
}

.sbl-root .sbl-tree__all {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 6px 14px;
	margin-bottom: 6px;
	border-radius: 999px;
	color: var(--sbl-on-surface-variant);
	font-weight: 700;
	font-size: 14.5px;
}
.sbl-root .sbl-tree__all:hover { background: rgba(26, 41, 86, .07); color: var(--sbl-primary); }
.sbl-root .sbl-tree__all.is-active { background: var(--sbl-secondary-container); color: var(--sbl-on-secondary-container); }
.sbl-root .sbl-tree, .sbl-root .sbl-tree__sub { list-style: none; margin: 0; padding: 0; }
.sbl-root .sbl-tree__sub { margin-inline-start: 18px; padding-inline-start: 10px; border-inline-start: 2px solid var(--sbl-divider); }
.sbl-root .sbl-tree__item { margin: 0; padding: 0; }
.sbl-root .sbl-tree__item::before, .sbl-root .sbl-tree__item::marker { content: none; }
.sbl-root .sbl-tree__row { display: flex; align-items: center; gap: 2px; }
.sbl-root .sbl-tree__link {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	padding: 6px 12px;
	border-radius: 999px;
	color: var(--sbl-on-surface-variant);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	transition: background-color var(--sbl-dur) var(--sbl-ease), color var(--sbl-dur) var(--sbl-ease);
}
.sbl-root .sbl-tree__link .material-symbols-rounded { color: var(--sbl-primary); opacity: .75; }
.sbl-root .sbl-tree__link:hover { background: rgba(26, 41, 86, .07); color: var(--sbl-primary); }
.sbl-root .sbl-tree__link.is-active { background: var(--sbl-secondary-container); color: var(--sbl-on-secondary-container); font-weight: 800; }
.sbl-root .sbl-tree__link.is-active .material-symbols-rounded { color: var(--sbl-secondary-strong); opacity: 1; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.sbl-root .sbl-tree__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sbl-root .sbl-tree__count { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--sbl-surface-container); color: var(--sbl-on-surface-variant); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.sbl-root .sbl-tree__link.is-active .sbl-tree__count { background: #fff; }
.sbl-root .sbl-tree__toggle,
.sbl-root .sbl-tree__toggle:hover,
.sbl-root .sbl-tree__toggle:focus { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sbl-on-surface-variant); }
.sbl-root .sbl-tree__toggle:hover { background: rgba(26, 41, 86, .07); }
.sbl-root .sbl-tree__toggle .material-symbols-rounded { transition: transform var(--sbl-dur) var(--sbl-ease); }
.sbl-root .sbl-tree__toggle[aria-expanded="true"] .material-symbols-rounded { transform: rotate(180deg); }

.sbl-root .sbl-main { min-width: 0; }
.sbl-root .sbl-scrim, .sbl-root .sbl-fab { display: none; }

/* ------------------------------------------------------------------ */
/* Chips, meta, buttons                                                */
/* ------------------------------------------------------------------ */
.sbl-root .sbl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sbl-root .sbl-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 10px; border-radius: var(--sbl-r-s); font-size: 12.5px; font-weight: 700; line-height: 1.3; transition: filter var(--sbl-dur); }
.sbl-root .sbl-chip .material-symbols-rounded { font-size: 16px; }
.sbl-root .sbl-chip--gold, .sbl-root .sbl-chip--gold:hover { background: var(--sbl-secondary-container); color: var(--sbl-on-secondary-container); }
.sbl-root .sbl-chip--gold .material-symbols-rounded { color: var(--sbl-secondary-strong); }
.sbl-root .sbl-chip--tonal, .sbl-root .sbl-chip--tonal:hover { background: var(--sbl-primary-container); color: var(--sbl-on-primary-container); }
.sbl-root .sbl-chip--outlined, .sbl-root .sbl-chip--outlined:hover { border: 1px solid var(--sbl-outline-variant); background: #fff; color: var(--sbl-on-surface-variant); }
.sbl-root .sbl-chip--more { background: var(--sbl-surface-container); color: var(--sbl-on-surface-variant); }
.sbl-root a.sbl-chip:hover { filter: brightness(.96); }
.sbl-root .sbl-chips--hero .sbl-chip--gold { background: var(--sbl-secondary); color: #fff; }
.sbl-root .sbl-chips--hero .sbl-chip--gold .material-symbols-rounded { color: #fff; }
.sbl-root .sbl-chips--hero .sbl-chip--tonal { background: rgba(255, 255, 255, .14); color: #fff; }

.sbl-root .sbl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--sbl-on-surface-variant); }
.sbl-root .sbl-meta__item { display: inline-flex; align-items: center; gap: 5px; }
.sbl-root .sbl-meta__item .material-symbols-rounded { font-size: 18px; color: var(--sbl-secondary); }

.sbl-root .sbl-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 22px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 700; background: transparent; color: var(--sbl-primary); transition: box-shadow var(--sbl-dur), background-color var(--sbl-dur), border-color var(--sbl-dur); }
.sbl-root .sbl-btn--outlined, .sbl-root .sbl-btn--outlined:hover, .sbl-root .sbl-btn--outlined:focus { background: #fff; border-color: var(--sbl-outline); color: var(--sbl-primary); }
.sbl-root .sbl-btn--outlined:hover { border-color: var(--sbl-primary); box-shadow: var(--sbl-elev-1); }
.sbl-root .sbl-btn--text, .sbl-root .sbl-btn--text:hover { background: transparent; color: var(--sbl-primary); padding-inline: 12px; }
.sbl-root .sbl-btn--text:hover { background: rgba(26, 41, 86, .07); }
.sbl-root .sbl-icon-btn, .sbl-root .sbl-icon-btn:hover, .sbl-root .sbl-icon-btn:focus { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sbl-on-surface-variant); }
.sbl-root .sbl-icon-btn:hover { background: rgba(26, 41, 86, .08); }

/* ------------------------------------------------------------------ */
/* Cards & feed                                                        */
/* ------------------------------------------------------------------ */
.sbl-root .sbl-feed, .sbl-root .sbl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sbl-root .sbl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--sbl-r-xl);
	background: var(--sbl-surface-lowest);
	box-shadow: var(--sbl-elev-1);
	border: 1px solid rgba(26, 41, 86, .05);
	transition: box-shadow var(--sbl-dur) var(--sbl-ease), transform var(--sbl-dur) var(--sbl-ease);
}
.sbl-root .sbl-card:hover { box-shadow: var(--sbl-elev-3); transform: translateY(-3px); }
.sbl-root .sbl-card.is-new { animation: sbl-rise .45s var(--sbl-ease-emph) both; }
@keyframes sbl-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.sbl-root .sbl-card__media, .sbl-root .sbl-card__media:hover { display: block; color: inherit; text-decoration: none; border: 0; box-shadow: none; }

/* Cover: whole image (contain) over a blurred copy — banners with text are never cropped. */
.sbl-root .sbl-cover {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	height: auto !important;
	overflow: hidden;
	isolation: isolate;
	background: var(--sbl-surface-container);
}
.sbl-root .sbl-cover::before {
	content: '';
	position: absolute;
	inset: -24px;
	z-index: -1;
	background-image: var(--sbl-cover, none);
	background-size: cover;
	background-position: center;
	filter: blur(18px) saturate(1.1);
	opacity: .6;
}
.sbl-root .sbl-cover__img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0;
	object-fit: contain;
	object-position: center;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: transform .6s var(--sbl-ease);
}
.sbl-root .sbl-card:hover .sbl-cover__img { transform: scale(1.03); }
.sbl-root .sbl-cover--empty { display: grid; place-items: center; color: var(--sbl-outline); }
.sbl-root .sbl-cover--empty .material-symbols-rounded { font-size: 44px; }

.sbl-root .sbl-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.sbl-root .sbl-card__title { font-size: 17.5px; line-height: 1.5; font-weight: 800; }
.sbl-root .sbl-card__title a { color: var(--sbl-on-surface); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sbl-root .sbl-card__title a:hover { color: var(--sbl-primary); }
.sbl-root .sbl-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.sbl-root .sbl-card .sbl-chips, .sbl-root .sbl-card__more { position: relative; z-index: 1; }
.sbl-root .sbl-card__excerpt { font-size: 14.5px; line-height: 1.75; color: var(--sbl-on-surface-variant); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sbl-root .sbl-card__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sbl-divider); }
.sbl-root .sbl-card__more { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 800; color: var(--sbl-primary); }
.sbl-root .sbl-card__more .material-symbols-rounded { font-size: 18px; transition: transform var(--sbl-dur) var(--sbl-ease); }
.sbl-root .sbl-card:hover .sbl-card__more .material-symbols-rounded { transform: translateX(3px); }
.sbl-root[dir="rtl"] .sbl-card:hover .sbl-card__more .material-symbols-rounded { transform: scaleX(-1) translateX(3px); }

.sbl-root .sbl-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.sbl-root .sbl-card--featured .sbl-card__media { height: 100%; }
.sbl-root .sbl-card--featured .sbl-cover { height: 100% !important; min-height: 300px; aspect-ratio: auto; }
.sbl-root .sbl-card--featured .sbl-card__body { padding: 28px; justify-content: center; }
.sbl-root .sbl-card--featured .sbl-card__title { font-size: clamp(20px, 2vw, 26px); }
.sbl-root .sbl-card--featured .sbl-card__excerpt { -webkit-line-clamp: 4; font-size: 15.5px; }

/* Pagination + auto-load */
.sbl-root .sbl-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 32px 0 0; }
.sbl-root .sbl-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--sbl-outline-variant); color: var(--sbl-on-surface-variant); font-weight: 700; font-size: 14.5px; }
.sbl-root .sbl-pagination a.page-numbers:hover { border-color: var(--sbl-primary); color: var(--sbl-primary); }
.sbl-root .sbl-pagination .page-numbers.current { background: var(--sbl-primary); border-color: var(--sbl-primary); color: #fff; }
.sbl-root .sbl-pagination .page-numbers.dots { border: 0; background: transparent; }
.sbl-root .sbl-autoload { display: none; justify-content: center; align-items: center; min-height: 72px; margin-top: 24px; }
.sbl-root.is-js .sbl-autoload { display: flex; }
.sbl-root.is-js .sbl-pagination { display: none; }
.sbl-root .sbl-autoload [data-sbl-more] { display: none; }
.sbl-root .sbl-autoload.is-manual [data-sbl-more] { display: inline-flex; }
.sbl-root .sbl-autoload.is-manual .sbl-spinner { display: none; }
.sbl-root .sbl-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--sbl-surface-high); border-top-color: var(--sbl-secondary); opacity: 0; }
.sbl-root .sbl-autoload.is-loading .sbl-spinner { opacity: 1; animation: sbl-spin .8s linear infinite; }
@keyframes sbl-spin { to { transform: rotate(360deg); } }
.sbl-root .sbl-end { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; color: var(--sbl-on-surface-variant); font-size: 14px; font-weight: 600; }
.sbl-root .sbl-end:empty { display: none; }
.sbl-root .sbl-end .material-symbols-rounded { color: var(--sbl-secondary); }

.sbl-root .sbl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px; border-radius: var(--sbl-r-xxl); background: #fff; box-shadow: var(--sbl-elev-1); text-align: center; }
.sbl-root .sbl-empty__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--sbl-secondary-container); color: var(--sbl-secondary-strong); }
.sbl-root .sbl-empty__icon .material-symbols-rounded { font-size: 36px; }
.sbl-root .sbl-empty__title { font-size: 22px; font-weight: 800; color: var(--sbl-primary); }
.sbl-root .sbl-empty .sbl-search { width: min(420px, 100%); margin-top: 8px; }

/* ------------------------------------------------------------------ */
/* Single article                                                      */
/* ------------------------------------------------------------------ */
.sbl-root .sbl-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 99990; height: 4px; background: transparent; pointer-events: none; }
.admin-bar .sbl-root .sbl-progress { top: 32px; }
.sbl-root .sbl-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sbl-secondary), #C9B070); transition: width .1s linear; }
.sbl-root[dir="rtl"] .sbl-progress span { margin-inline-start: 0; }

.sbl-root .sbl-article { background: #fff; border-radius: var(--sbl-r-xxl); box-shadow: var(--sbl-elev-1); overflow: hidden; }
.sbl-root .sbl-article__media { margin: 0; }
.sbl-root .sbl-article__media .sbl-cover { aspect-ratio: 2 / 1; }
.sbl-root .sbl-article__media figcaption { padding: 10px 28px 0; font-size: 13px; color: var(--sbl-on-surface-variant); }

/* Prose: moderate specificity so Elementor widget styles inside the body still win. */
.sbl-root .sbl-prose { padding: 32px 40px 8px; font-size: 17px; line-height: 1.95; color: var(--sbl-on-surface); overflow-wrap: anywhere; }
.sbl-root[dir="ltr"] .sbl-prose { line-height: 1.8; }
.sbl-root .sbl-prose > *:first-child { margin-top: 0; }
.sbl-root .sbl-prose p { margin: 0 0 1.1em; }
.sbl-root .sbl-prose h2, .sbl-root .sbl-prose h3, .sbl-root .sbl-prose h4 { font-family: var(--sbl-font); color: var(--sbl-primary); line-height: 1.45; font-weight: 800; letter-spacing: normal; text-transform: none; scroll-margin-top: 110px; }
.sbl-root .sbl-prose h2 { font-size: 1.45em; margin: 1.6em 0 .6em; padding-bottom: .35em; border-bottom: 3px solid var(--sbl-secondary-container); }
.sbl-root .sbl-prose h3 { font-size: 1.2em; margin: 1.4em 0 .5em; }
.sbl-root .sbl-prose h4 { font-size: 1.05em; margin: 1.2em 0 .4em; }
.sbl-root .sbl-prose a { color: var(--sbl-primary); text-decoration: underline; text-decoration-color: var(--sbl-secondary); text-underline-offset: 3px; }
.sbl-root .sbl-prose img { max-width: 100%; height: auto; border-radius: var(--sbl-r-l); }
.sbl-root .sbl-prose figure { margin: 1.4em 0; }
.sbl-root .sbl-prose figcaption { font-size: 13.5px; color: var(--sbl-on-surface-variant); text-align: center; margin-top: 6px; }
.sbl-root .sbl-prose ul, .sbl-root .sbl-prose ol { margin: 0 0 1.1em; padding-inline-start: 1.4em; }
.sbl-root .sbl-prose li { margin-bottom: .35em; }
.sbl-root .sbl-prose ul > li::before, .sbl-root .sbl-prose ol > li::before { content: none; }
.sbl-root .sbl-prose ul li::marker { color: var(--sbl-secondary); }
.sbl-root .sbl-prose blockquote { margin: 1.4em 0; padding: 16px 22px; border-inline-start: 4px solid var(--sbl-secondary); border-radius: var(--sbl-r-m); background: var(--sbl-surface-low); color: var(--sbl-on-surface-variant); font-size: 1.02em; }
.sbl-root .sbl-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 15px; }
.sbl-root .sbl-prose th, .sbl-root .sbl-prose td { padding: 10px 12px; border: 1px solid var(--sbl-outline-variant); text-align: start; }
.sbl-root .sbl-prose th { background: var(--sbl-surface-container); color: var(--sbl-primary); }
.sbl-root .sbl-prose iframe, .sbl-root .sbl-prose video { max-width: 100%; border-radius: var(--sbl-r-l); }
.sbl-root .sbl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 1.4em 0; }
.sbl-root .sbl-gallery a { display: block; border-radius: var(--sbl-r-m); overflow: hidden; }
.sbl-root .sbl-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; transition: transform .4s var(--sbl-ease); }
.sbl-root .sbl-gallery a:hover img { transform: scale(1.04); }
.sbl-root .sbl-page-links { display: flex; gap: 6px; margin: 1em 0; }

.sbl-root .sbl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 40px 0; padding-top: 18px; border-top: 1px solid var(--sbl-divider); }
.sbl-root .sbl-tags > .material-symbols-rounded { color: var(--sbl-secondary); }

.sbl-root .sbl-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 40px 0; padding: 16px 20px; border-radius: var(--sbl-r-l); background: var(--sbl-surface-low); scroll-margin-top: 110px; }
.sbl-root .sbl-share__label { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--sbl-primary); font-size: 15px; }
.sbl-root .sbl-share__label .material-symbols-rounded { color: var(--sbl-secondary-strong); }
.sbl-root .sbl-share__list { display: flex; flex-wrap: wrap; gap: 8px; }
.sbl-root .sbl-share__btn,
.sbl-root .sbl-share__btn:hover,
.sbl-root .sbl-share__btn:focus { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--sbl-primary); transition: transform var(--sbl-dur) var(--sbl-ease), box-shadow var(--sbl-dur); }
.sbl-root .sbl-share__btn:hover { transform: translateY(-2px); box-shadow: var(--sbl-elev-2); }
.sbl-root .sbl-share__btn--facebook, .sbl-root .sbl-share__btn--facebook:hover { background: #1877F2; }
.sbl-root .sbl-share__btn--x, .sbl-root .sbl-share__btn--x:hover { background: #111; }
.sbl-root .sbl-share__btn--whatsapp, .sbl-root .sbl-share__btn--whatsapp:hover { background: #1FAF55; }
.sbl-root .sbl-share__btn--linkedin, .sbl-root .sbl-share__btn--linkedin:hover { background: #0A66C2; }
.sbl-root .sbl-share__btn--copy, .sbl-root .sbl-share__btn--copy:hover { background: var(--sbl-secondary-strong); }
.sbl-root .sbl-share__btn.is-done { background: #1E6B3A; }

.sbl-root .sbl-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 40px 36px; scroll-margin-top: 110px; }
.sbl-root .sbl-postnav__item { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--sbl-r-l); border: 1px solid var(--sbl-outline-variant); background: #fff; color: var(--sbl-on-surface); transition: border-color var(--sbl-dur), box-shadow var(--sbl-dur); }
.sbl-root .sbl-postnav__item:hover { border-color: var(--sbl-primary); box-shadow: var(--sbl-elev-1); color: var(--sbl-on-surface); }
.sbl-root .sbl-postnav__item--next { text-align: end; align-items: flex-end; }
.sbl-root .sbl-card__title[dir="auto"], .sbl-root .sbl-card__excerpt[dir="auto"] { text-align: start; }
.sbl-root .sbl-postnav__item--empty { border: 0; background: transparent; }
.sbl-root .sbl-postnav__label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--sbl-gold-text); }
.sbl-root .sbl-postnav__item--next .sbl-postnav__label { flex-direction: row-reverse; }
.sbl-root .sbl-postnav__title { font-weight: 700; font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sbl-root .sbl-comments { margin-top: 20px; padding: 24px 32px; background: #fff; border-radius: var(--sbl-r-xxl); box-shadow: var(--sbl-elev-1); }

/* Table of contents */
.sbl-root .sbl-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; }
.sbl-root .sbl-toc__list li { margin: 0; padding: 0; }
.sbl-root .sbl-toc__list li::before { content: none; }
.sbl-root .sbl-toc a { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-radius: var(--sbl-r-m); color: var(--sbl-on-surface-variant); font-size: 14px; font-weight: 600; line-height: 1.5; transition: background-color var(--sbl-dur), color var(--sbl-dur); }
.sbl-root .sbl-toc a:hover { background: rgba(26, 41, 86, .06); color: var(--sbl-primary); }
.sbl-root .sbl-toc a.is-active { background: var(--sbl-secondary-container); color: var(--sbl-on-secondary-container); font-weight: 800; }
.sbl-root .sbl-toc__num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--sbl-primary-container); color: var(--sbl-primary); font-size: 12px; font-weight: 800; flex-shrink: 0; }
.sbl-root .sbl-toc a.is-active .sbl-toc__num { background: var(--sbl-secondary); color: #fff; }
.sbl-root .sbl-toc .is-sub a { padding-inline-start: 34px; font-size: 13.5px; }
.sbl-root .sbl-readbar { height: 4px; margin-top: 14px; border-radius: 999px; background: var(--sbl-surface-container); overflow: hidden; }
.sbl-root .sbl-readbar span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--sbl-primary), var(--sbl-secondary)); }

/* Related */
.sbl-root .sbl-related { padding: 8px 24px 64px; }
.sbl-root .sbl-related__inner { max-width: 1320px; margin: 0 auto; }
.sbl-root .sbl-related__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.sbl-root .sbl-section-title { position: relative; font-size: 26px; font-weight: 800; color: var(--sbl-primary); padding-bottom: 10px; line-height: 1.35; }
.sbl-root .sbl-section-title::after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 56px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--sbl-secondary), #C9B070); }

/* ------------------------------------------------------------------ */
/* Article search page                                                 */
/* ------------------------------------------------------------------ */
.sbl-root .sbl-hero--search { padding-bottom: 96px; }
.sbl-root .sbl-searchhero { max-width: 860px; margin: 8px auto 0; text-align: center; }
.sbl-root .sbl-searchhero__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #E9D9A6; font-size: 14px; font-weight: 700; font-family: var(--sbl-font); }
.sbl-root .sbl-searchhero__eyebrow .material-symbols-rounded { font-size: 20px; }
.sbl-root .sbl-searchhero__title { margin: 0 0 22px; padding: 0; border: 0; background: none; font-family: var(--sbl-font); font-size: clamp(24px, 3.2vw, 38px); line-height: 1.35; font-weight: 800; color: #fff; letter-spacing: normal; text-transform: none; }
.sbl-root .sbl-searchhero__label { display: block; font-size: .5em; font-weight: 600; color: rgba(255, 255, 255, .75); margin-bottom: 4px; }
.sbl-root .sbl-searchhero__query { color: #fff; overflow-wrap: anywhere; }
.sbl-root .sbl-searchhero__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; color: rgba(255, 255, 255, .85); font-size: 14.5px; font-family: var(--sbl-font); }
.sbl-root .sbl-searchhero__count { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: var(--sbl-secondary); color: #fff; font-weight: 800; }
.sbl-root .sbl-searchhero__count .material-symbols-rounded { font-size: 18px; }
.sbl-root .sbl-searchhero__cat strong { color: #E9D9A6; }

/* Large search field on the dark hero */
.sbl-root .sbl-search--xl { max-width: 760px; margin: 0 auto; }
.sbl-root .sbl-search--xl .sbl-search__input {
	height: 64px;
	padding: 0 76px 0 58px;
	border: 2px solid transparent;
	background: #fff;
	font-size: 17px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
.sbl-root[dir="rtl"] .sbl-search--xl .sbl-search__input { padding: 0 58px 0 76px; }
.sbl-root .sbl-search--xl .sbl-search__input:focus { border-color: var(--sbl-secondary); box-shadow: 0 12px 32px rgba(0, 0, 0, .28), 0 0 0 4px rgba(155, 132, 68, .35); }
.sbl-root .sbl-search--xl .sbl-search__icon { left: 20px; font-size: 26px; color: var(--sbl-primary); }
.sbl-root[dir="rtl"] .sbl-search--xl .sbl-search__icon { left: auto; right: 20px; }
.sbl-root .sbl-search--xl .sbl-search__btn,
.sbl-root .sbl-search--xl .sbl-search__btn:hover,
.sbl-root .sbl-search--xl .sbl-search__btn:focus { inset-inline-end: 8px; width: 50px; height: 50px; background: var(--sbl-secondary-strong); }

/* Toolbar: category filter chips + sort */
.sbl-root .sbl-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin-bottom: 20px;
	padding: 14px 16px;
	border-radius: var(--sbl-r-xl);
	background: var(--sbl-surface-lowest);
	box-shadow: var(--sbl-elev-1);
}
.sbl-root .sbl-facets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; flex: 1 1 420px; }
.sbl-root .sbl-toolbar__label { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 4px; color: var(--sbl-on-surface-variant); font-size: 13.5px; font-weight: 700; }
.sbl-root .sbl-toolbar__label .material-symbols-rounded { color: var(--sbl-secondary-strong); }
.sbl-root .sbl-facet,
.sbl-root .sbl-facet:hover {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 4px 12px;
	border: 1px solid var(--sbl-outline-variant);
	border-radius: var(--sbl-r-s);
	background: #fff;
	color: var(--sbl-on-surface-variant);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--sbl-dur), border-color var(--sbl-dur), color var(--sbl-dur);
}
.sbl-root .sbl-facet:hover { border-color: var(--sbl-primary); color: var(--sbl-primary); }
.sbl-root .sbl-facet.is-selected, .sbl-root .sbl-facet.is-selected:hover { border-color: transparent; background: var(--sbl-secondary-container); color: var(--sbl-on-secondary-container); }
.sbl-root .sbl-facet .material-symbols-rounded { font-size: 18px; }
.sbl-root .sbl-facet__count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--sbl-surface-container); font-size: 11.5px; display: inline-grid; place-items: center; }
.sbl-root .sbl-facet.is-selected .sbl-facet__count { background: #fff; }

.sbl-root .sbl-sort { display: inline-flex; border: 1px solid var(--sbl-outline); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.sbl-root .sbl-sort__btn,
.sbl-root .sbl-sort__btn:hover {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 4px 16px;
	background: #fff;
	color: var(--sbl-on-surface-variant);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.sbl-root .sbl-sort__btn + .sbl-sort__btn { border-inline-start: 1px solid var(--sbl-outline); }
.sbl-root .sbl-sort__btn:hover { background: var(--sbl-surface-low); color: var(--sbl-primary); }
.sbl-root .sbl-sort__btn.is-selected, .sbl-root .sbl-sort__btn.is-selected:hover { background: var(--sbl-secondary-container); color: var(--sbl-on-secondary-container); }
.sbl-root .sbl-sort__btn .material-symbols-rounded { font-size: 18px; }

/* Highlighted search words */
.sbl-root mark.sbl-mark { padding: 0 .15em; border-radius: 4px; background: #F7E7B0; color: inherit; box-shadow: inset 0 -2px 0 rgba(155, 132, 68, .55); }

/* Empty state + suggestions */
.sbl-root .sbl-tips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: start; }
.sbl-root .sbl-tips li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; color: var(--sbl-on-surface-variant); font-size: 15px; }
.sbl-root .sbl-tips li::before { content: none; }
.sbl-root .sbl-tips .material-symbols-rounded { color: var(--sbl-secondary); }
.sbl-root .sbl-tips a { color: var(--sbl-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sbl-root .sbl-suggest { margin-top: 32px; }
.sbl-root .sbl-suggest .sbl-section-title { margin-bottom: 18px; }

/* Latest articles mini list */
.sbl-root .sbl-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sbl-root .sbl-mini li { margin: 0; padding: 0; }
.sbl-root .sbl-mini li::before { content: none; }
.sbl-root .sbl-mini__item,
.sbl-root .sbl-mini__item:hover { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--sbl-r-m); color: var(--sbl-on-surface); text-decoration: none; }
.sbl-root .sbl-mini__item:hover { background: rgba(26, 41, 86, .06); }
.sbl-root .sbl-mini__thumb { display: grid; place-items: center; width: 64px; height: 48px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--sbl-surface-container); color: var(--sbl-outline); }
.sbl-root .sbl-mini__thumb img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; margin: 0; border-radius: 0; }
.sbl-root .sbl-mini__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sbl-root .sbl-mini__title { font-size: 13.5px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: start; }
.sbl-root .sbl-mini__date { font-size: 12px; color: var(--sbl-on-surface-variant); }

@media (max-width: 991px) {
	.sbl-root .sbl-hero--search { padding-bottom: 84px; }
	.sbl-root .sbl-toolbar { padding: 12px; }
	.sbl-root .sbl-facets { flex-wrap: nowrap; overflow-x: auto; flex-basis: 100%; padding-bottom: 4px; scrollbar-width: thin; }
	.sbl-root .sbl-facet { flex-shrink: 0; }
	.sbl-root .sbl-toolbar__label { flex-shrink: 0; }
}
@media (max-width: 680px) {
	.sbl-root .sbl-search--xl .sbl-search__input { height: 56px; font-size: 16px; }
	.sbl-root .sbl-search--xl .sbl-search__btn, .sbl-root .sbl-search--xl .sbl-search__btn:hover { width: 44px; height: 44px; }
	.sbl-root .sbl-sort { width: 100%; }
	.sbl-root .sbl-sort__btn { flex: 1; justify-content: center; }
}

/* Back to top */
.sbl-root .sbl-top,
.sbl-root .sbl-top:hover,
.sbl-root .sbl-top:focus { position: fixed; z-index: 9989; left: 16px; right: auto; bottom: 20px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--sbl-primary); box-shadow: var(--sbl-elev-3); }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 1280px) {
	.sbl-root .sbl-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sbl-root .sbl-shell { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 1024px) {
	.sbl-root .sbl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
	.sbl-root .sbl-hero { padding: 26px 16px 76px; }
	.sbl-root .sbl-shell { grid-template-columns: minmax(0, 1fr); padding: 0 16px 88px; margin-top: -52px; }
	.sbl-root .sbl-sidebar {
		position: fixed;
		z-index: 100000;
		top: 0;
		bottom: 0;
		inset-inline-start: 0;
		width: min(340px, 88vw);
		gap: 12px;
		padding: 0 14px 20px;
		overflow-y: auto;
		background: var(--sbl-surface);
		border-radius: 0 var(--sbl-r-xxl) var(--sbl-r-xxl) 0;
		box-shadow: var(--sbl-elev-3);
		transform: translateX(-105%);
		transition: transform .3s var(--sbl-ease-emph);
	}
	.sbl-root[dir="rtl"] .sbl-sidebar { border-radius: var(--sbl-r-xxl) 0 0 var(--sbl-r-xxl); transform: translateX(105%); }
	.admin-bar .sbl-root .sbl-sidebar { top: 46px; }
	.sbl-root.is-drawer-open .sbl-sidebar { transform: none; }
	.sbl-root .sbl-sidebar__drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -14px; padding: 12px 14px 12px 20px; background: var(--sbl-primary); color: #fff; }
	.sbl-root .sbl-sidebar__drawer-title { font-size: 16px; font-weight: 800; color: #fff; }
	.sbl-root .sbl-sidebar__drawer-head .sbl-icon-btn, .sbl-root .sbl-sidebar__drawer-head .sbl-icon-btn:hover { color: #fff; }
	.sbl-root .sbl-sidebar__drawer-head .sbl-icon-btn:hover { background: rgba(255, 255, 255, .14); }
	.sbl-root .sbl-panel { box-shadow: var(--sbl-elev-1); padding: 16px; }
	.sbl-root .sbl-toc__list { max-height: none; }
	.sbl-root .sbl-scrim { display: block; position: fixed; inset: 0; z-index: 99999; background: rgba(10, 14, 30, .45); }

	/* Sidebar button: always bottom-LEFT in both languages (chat widgets sit on the right). */
	.sbl-root .sbl-fab,
	.sbl-root .sbl-fab:hover,
	.sbl-root .sbl-fab:focus {
		position: fixed;
		z-index: 9990;
		bottom: 20px;
		left: 16px;
		right: auto;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 52px;
		padding: 0 18px 0 14px;
		border: 0;
		border-radius: 18px;
		background: var(--sbl-primary);
		color: #fff;
		font-weight: 700;
		font-size: 14.5px;
		white-space: nowrap;
		box-shadow: var(--sbl-elev-3);
	}
	.sbl-root[dir="rtl"] .sbl-fab { padding: 0 14px 0 18px; }
	.sbl-root .sbl-fab .material-symbols-rounded { color: #E0CC8E; font-size: 24px; }
	.sbl-root .sbl-top, .sbl-root .sbl-top:hover, .sbl-root .sbl-top:focus { bottom: 84px; }
	.sbl-root .sbl-card--featured { grid-template-columns: minmax(0, 1fr); }
	.sbl-root .sbl-card--featured .sbl-cover { height: auto !important; min-height: 0; aspect-ratio: 2 / 1; }
	.sbl-root .sbl-card--featured .sbl-card__body { padding: 20px; }
	.sbl-root .sbl-prose { padding: 24px 20px 4px; font-size: 16.5px; }
	.sbl-root .sbl-tags, .sbl-root .sbl-share { margin-inline: 20px; }
	.sbl-root .sbl-postnav { margin: 20px 20px 28px; }
	.sbl-root .sbl-related { padding: 0 16px 96px; }
}

@media (max-width: 680px) {
	.sbl-root .sbl-feed, .sbl-root .sbl-grid { grid-template-columns: minmax(0, 1fr); }
	.sbl-root .sbl-hero__row { align-items: flex-start; gap: 14px; }
	.sbl-root .sbl-hero__icon { width: 54px; height: 54px; border-radius: 18px; }
	.sbl-root .sbl-hero__icon .material-symbols-rounded { font-size: 28px; }
	.sbl-root .sbl-breadcrumb [aria-current] { max-width: 24ch; }
	.sbl-root .sbl-postnav { grid-template-columns: minmax(0, 1fr); }
	.sbl-root .sbl-postnav__item--empty { display: none; }
	.sbl-root .sbl-share { justify-content: center; }
	.sbl-root .sbl-section-title { font-size: 22px; }
	.sbl-root .sbl-fab, .sbl-root .sbl-fab:hover, .sbl-root .sbl-fab:focus { height: 48px; font-size: 14px; bottom: 16px; left: 12px; }
	.sbl-root .sbl-top, .sbl-root .sbl-top:hover, .sbl-root .sbl-top:focus { left: 12px; bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
	.sbl-root *, .sbl-root *::before, .sbl-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
	.sbl-root .sbl-sidebar, .sbl-root .sbl-fab, .sbl-root .sbl-top, .sbl-root .sbl-progress, .sbl-root .sbl-share, .sbl-root .sbl-related { display: none !important; }
	.sbl-root .sbl-shell { display: block; margin: 0; }
	.sbl-root .sbl-article { box-shadow: none; }
}
