/* =======================================================================
   Sahil Unsari — Main Stylesheet
   Mobile-first. Component order mirrors the template structure.
   ======================================================================= */

/* ---------- 1. Design Tokens ---------- */
:root{
	--su-primary: #0d5bd1;
	--su-primary-dark: #0a47a8;
	--su-navy: #0a1f44;
	--su-text: #1a2233;
	--su-text-muted: #5b6472;
	--su-bg: #ffffff;
	--su-bg-alt: #f6f8fb;
	--su-border: #e3e7ee;
	--su-card-bg: #ffffff;
	--su-radius: 6px;
	--su-radius-sm: 4px;
	--su-shadow: 0 1px 3px rgba(10, 31, 68, 0.06);
	--su-shadow-hover: 0 6px 20px rgba(10, 31, 68, 0.10);
	--su-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--su-font-heading: "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
	--su-container: 1240px;
	--su-header-height: 64px;
	--su-transition: 160ms ease;
}

[data-theme="dark"]{
	--su-text: #e7ecf5;
	--su-text-muted: #a6b0c3;
	--su-bg: #10151f;
	--su-bg-alt: #161d2b;
	--su-border: #262f42;
	--su-card-bg: #161d2b;
	--su-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	--su-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ---------- 2. Reset ---------- */
html, body{ max-width: 100%; overflow-x: hidden; }
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
	margin: 0;
	background: var(--su-bg);
	color: var(--su-text);
	font-family: var(--su-font-body);
	font-size: 16px;
	line-height: 1.65;
	overflow-x: hidden;
	transition: background var(--su-transition), color var(--su-transition);
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, textarea{ font: inherit; }
h1, h2, h3, h4, h5, h6{ font-family: var(--su-font-heading); color: var(--su-text); line-height: 1.25; margin: 0 0 0.5em; }
p{ margin: 0 0 1em; }

.screen-reader-text{
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.su-skip-link{
	position: absolute;
	top: -40px; left: 0;
	background: var(--su-primary);
	color: #fff;
	padding: 10px 16px;
	z-index: 10000;
	transition: top var(--su-transition);
}
.su-skip-link:focus{ top: 0; width: auto; height: auto; clip: auto; }

:focus-visible{
	outline: 2px solid var(--su-primary);
	outline-offset: 2px;
}

.su-container{
	max-width: var(--su-container);
	margin: 0 auto;
	padding: 0 16px;
}

/* ---------- 3. Icons (inline SVG via mask, no icon-font/library needed) ---------- */
.su-icon{ display: inline-block; width: 18px; height: 18px; background-color: currentColor; }
.su-icon-search{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center / contain; }
.su-icon-theme{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8Z'/%3E%3C/svg%3E") no-repeat center / contain; }
.su-icon-youtube{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 12s0-3.4-.4-5a3 3 0 0 0-2.1-2.1C17.9 4.5 12 4.5 12 4.5s-5.9 0-7.5.4A3 3 0 0 0 2.4 7C2 8.6 2 12 2 12s0 3.4.4 5a3 3 0 0 0 2.1 2.1c1.6.4 7.5.4 7.5.4s5.9 0 7.5-.4A3 3 0 0 0 21.6 17c.4-1.6.4-5 .4-5ZM10 15.5v-7l6 3.5Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 12s0-3.4-.4-5a3 3 0 0 0-2.1-2.1C17.9 4.5 12 4.5 12 4.5s-5.9 0-7.5.4A3 3 0 0 0 2.4 7C2 8.6 2 12 2 12s0 3.4.4 5a3 3 0 0 0 2.1 2.1c1.6.4 7.5.4 7.5.4s5.9 0 7.5-.4A3 3 0 0 0 21.6 17c.4-1.6.4-5 .4-5ZM10 15.5v-7l6 3.5Z'/%3E%3C/svg%3E") no-repeat center / contain; }
.su-icon-instagram{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") no-repeat center / contain; }
.su-icon-facebook{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.5 21v-7.5H16l.4-3H13.5V8.4c0-.9.3-1.5 1.6-1.5H16.5V4.3C16.2 4.3 15.2 4.2 14 4.2c-2.4 0-4 1.5-4 4.1v2.2H7.5v3H10V21Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.5 21v-7.5H16l.4-3H13.5V8.4c0-.9.3-1.5 1.6-1.5H16.5V4.3C16.2 4.3 15.2 4.2 14 4.2c-2.4 0-4 1.5-4 4.1v2.2H7.5v3H10V21Z'/%3E%3C/svg%3E") no-repeat center / contain; }

.su-icon-x{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.9 2H22l-6.77 7.74L23.2 22h-6.24l-4.89-6.4L6.48 22H3.37l7.24-8.28L2.8 2h6.4l4.42 5.84L18.9 2Zm-1.1 17.9h1.73L8.25 3.98H6.39L17.8 19.9Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.9 2H22l-6.77 7.74L23.2 22h-6.24l-4.89-6.4L6.48 22H3.37l7.24-8.28L2.8 2h6.4l4.42 5.84L18.9 2Zm-1.1 17.9h1.73L8.25 3.98H6.39L17.8 19.9Z'/%3E%3C/svg%3E") no-repeat center / contain; }
.su-icon-telegram{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M21.7 3.4 18.4 20c-.25 1.17-.96 1.46-1.95.91l-5.35-3.94-2.58 2.48c-.29.29-.53.53-1.08.53l.39-5.46 9.94-8.98c.43-.39-.09-.61-.67-.22L4.8 12.95.02 11.46c-1.04-.33-1.06-1.05.22-1.54L18.91 2.7c.87-.32 1.63.2 1.3.7Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M21.7 3.4 18.4 20c-.25 1.17-.96 1.46-1.95.91l-5.35-3.94-2.58 2.48c-.29.29-.53.53-1.08.53l.39-5.46 9.94-8.98c.43-.39-.09-.61-.67-.22L4.8 12.95.02 11.46c-1.04-.33-1.06-1.05.22-1.54L18.91 2.7c.87-.32 1.63.2 1.3.7Z'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ---------- 4. Top Bar ---------- */
.su-topbar{ background: var(--su-navy); color: #cfd8ea; font-size: 12.5px; }
.su-topbar-inner{ display: flex; align-items: center; justify-content: space-between; height: 34px; }
.su-topbar-trending{ display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-topbar-dot{ width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a; flex-shrink: 0; }
.su-topbar-social{ display: flex; gap: 12px; flex-shrink: 0; }
.su-topbar-social a{ color: #cfd8ea; opacity: 0.9; }
.su-topbar-social a:hover{ opacity: 1; color: #fff; }
.su-topbar-social .su-icon{ width: 15px; height: 15px; }

/* ---------- 5. Main Header ---------- */
.su-header{ background: var(--su-bg); border-bottom: 1px solid var(--su-border); position: sticky; top: 0; z-index: 500; }
.su-header-inner{ display: flex; align-items: center; justify-content: space-between; min-height: var(--su-header-height); gap: 16px; }

.su-branding{ display: flex; flex-direction: column; justify-content: center; flex-shrink: 0; }
.su-branding img{ max-height: 44px; width: auto; }
.su-site-title-link{ display: block; }
.su-site-title{ font-size: 22px; font-weight: 800; color: var(--su-navy); letter-spacing: -0.02em; }
[data-theme="dark"] .su-site-title{ color: #fff; }
.su-tagline{ font-size: 11px; color: var(--su-text-muted); letter-spacing: 0.02em; }

.su-primary-nav{ display: none !important; }
.su-menu{ display: flex; align-items: center; gap: 4px; }
.su-menu-item > a{
	display: block;
	padding: 10px 14px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--su-text);
	border-radius: var(--su-radius-sm);
	transition: color var(--su-transition), background var(--su-transition);
	white-space: nowrap;
}
.su-menu-item > a:hover,
.su-menu-item.current-menu-item > a{ color: var(--su-primary); background: var(--su-bg-alt); }

.su-header-actions{ display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.su-icon-btn{
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	color: var(--su-text);
	transition: background var(--su-transition);
}
.su-icon-btn:hover{ background: var(--su-bg-alt); }
.su-menu-toggle{ display: flex; }

.su-hamburger,
.su-hamburger::before,
.su-hamburger::after{
	display: block;
	width: 20px; height: 2px;
	background: currentColor;
	transition: transform var(--su-transition), opacity var(--su-transition);
}
.su-hamburger{ position: relative; }
.su-hamburger::before, .su-hamburger::after{ content: ""; position: absolute; left: 0; }
.su-hamburger::before{ top: -6px; }
.su-hamburger::after{ top: 6px; }
.su-menu-toggle[aria-expanded="true"] .su-hamburger{ background: transparent; }
.su-menu-toggle[aria-expanded="true"] .su-hamburger::before{ top: 0; transform: rotate(45deg); }
.su-menu-toggle[aria-expanded="true"] .su-hamburger::after{ top: 0; transform: rotate(-45deg); }

.su-search-panel{ border-top: 1px solid var(--su-border); background: var(--su-bg-alt); padding: 14px 0; }
.su-search-panel[hidden]{ display: none; }

/* ---------- 6. Mobile Drawer ---------- */
.su-mobile-drawer{
	position: fixed; top: 0; right: 0; height: 100%; width: min(320px, 86vw);
	background: var(--su-bg);
	box-shadow: -8px 0 30px rgba(0,0,0,0.15);
	z-index: 1000;
	padding: 20px 8px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 220ms ease;
}
.su-mobile-drawer.is-open{ transform: translateX(0); }
.su-mobile-drawer[hidden]{ display: none; }
.su-mobile-menu .su-menu-item > a{
	display: block; padding: 14px 16px; font-size: 16px; font-weight: 600;
	border-bottom: 1px solid var(--su-border); min-height: 44px;
}
.su-mobile-drawer-social{ display: flex; gap: 16px; padding: 20px 16px 8px; }
.su-mobile-drawer-social .su-icon-btn{ width: 44px; height: 44px; border: 1px solid var(--su-border); border-radius: 50%; }

.su-drawer-overlay{
	position: fixed; inset: 0; background: rgba(10,15,25,0.5);
	z-index: 900; opacity: 0; pointer-events: none; transition: opacity 220ms ease;
}
.su-drawer-overlay.is-open{ opacity: 1; pointer-events: auto; }
.su-drawer-overlay[hidden]{ display: none; }

/* ---------- 7. Ad Slots ---------- */
.su-ad-slot{
	background: var(--su-bg-alt);
	border: 1px dashed var(--su-border);
	border-radius: var(--su-radius);
	min-height: 90px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	margin: 20px auto;
	max-width: var(--su-container);
	padding: 8px;
}
.su-ad-label{ font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--su-text-muted); margin-bottom: 4px; }
.su-ad-code{ width: 100%; display: flex; justify-content: center; overflow: hidden; }
.su-ad-mobile{ display: block; }
@media (min-width: 768px){ .su-ad-mobile{ display: none; } }

/* ---------- 8. Section Titles / Layout Helpers ---------- */
.su-section{ margin: 32px 0; }
.su-section-header{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.su-section-title{
	font-size: 20px; font-weight: 800; color: var(--su-navy);
	border-left: 4px solid var(--su-primary);
	padding-left: 10px;
	margin: 0 0 16px;
}
[data-theme="dark"] .su-section-title{ color: #fff; }
.su-section-header .su-section-title{ margin-bottom: 0; }
.su-view-all{ font-size: 13.5px; font-weight: 700; color: var(--su-primary); white-space: nowrap; }
.su-view-all:hover{ text-decoration: underline; }

/* ---------- 9. Article Cards ---------- */
.su-card{
	background: var(--su-card-bg);
	border: 1px solid var(--su-border);
	border-radius: var(--su-radius);
	overflow: hidden;
	transition: box-shadow var(--su-transition), transform var(--su-transition), border-color var(--su-transition);
	display: flex;
	flex-direction: column;
}
.su-card:hover{ box-shadow: var(--su-shadow-hover); border-color: transparent; transform: translateY(-2px); }
.su-card-media{ display: block; aspect-ratio: 16 / 9; background: var(--su-bg-alt); overflow: hidden; }
.su-card-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.su-card:hover .su-card-media img{ transform: scale(1.04); }
.su-card-media-placeholder{ display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--su-bg-alt), var(--su-border)); }
.su-card-body{ padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.su-card-category{
	display: inline-block; align-self: flex-start;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--su-primary); background: rgba(13,91,209,0.09);
	padding: 3px 8px; border-radius: 3px;
}
.su-card-title{ font-size: 16px; font-weight: 700; margin: 2px 0 0; }
.su-card-title a:hover{ color: var(--su-primary); }
.su-card-excerpt{ font-size: 13.5px; color: var(--su-text-muted); margin: 0; }
.su-card-meta{ font-size: 12px; color: var(--su-text-muted); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 4px; }
.su-meta-dot{ opacity: 0.6; }

.su-card-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; width: 100%; }
@media (min-width: 560px){ .su-card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px){ .su-card-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Featured Latest News grid */
.su-latest-grid{ display: grid; grid-template-columns: 1fr; gap: 20px; }
.su-card--featured-large .su-card-title{ font-size: 22px; }
.su-card--featured-large .su-card-media{ aspect-ratio: 16/9; }
.su-card--featured-small .su-card-media{ aspect-ratio: 16/9; }
@media (min-width: 860px){
	.su-latest-grid{ grid-template-columns: 1.4fr 1fr; align-items: start; }
	.su-latest-grid .su-card--featured-small + .su-card--featured-small{ margin-top: 20px; }
}

/* Trending list */
.su-trending-list{ display: grid; grid-template-columns: 1fr; gap: 4px; border-top: 1px solid var(--su-border); }
.su-card--trending{
	flex-direction: row; align-items: center; gap: 12px;
	border: 0; border-bottom: 1px solid var(--su-border); border-radius: 0;
	background: transparent; padding: 10px 0;
}
.su-card--trending:hover{ transform: none; box-shadow: none; background: var(--su-bg-alt); }
.su-card-number{
	font-size: 22px; font-weight: 800; color: var(--su-border);
	width: 34px; flex-shrink: 0; text-align: center; font-family: var(--su-font-heading);
}
.su-card--trending .su-card-media{ width: 88px; height: 64px; flex-shrink: 0; aspect-ratio: auto; border-radius: var(--su-radius-sm); }
.su-card--trending .su-card-body{ padding: 0; gap: 3px; }
.su-card--trending .su-card-title{ font-size: 14.5px; }
.su-card-cat-inline{ text-transform: uppercase; font-weight: 700; font-size: 11px; color: var(--su-primary); }

/* List layout (search results, blog index) */
.su-card--list{ flex-direction: column; min-width: 0; }
.su-card--list .su-card-body{ min-width: 0; }
@media (min-width: 640px){
	.su-card--list{ flex-direction: row; }
	.su-card--list .su-card-media{
		width: 280px;
		flex: 0 0 280px;
		aspect-ratio: 16 / 9;
	}
	.su-card--list .su-card-body{ flex: 1 1 auto; }
	.su-card--list .su-card-title{ font-size: 18px; }
}

/* Search results must always be a single clean vertical list.
   The generic 4-column card grid is intentionally not used here. */
.su-search-results-grid{
	grid-template-columns: 1fr !important;
	gap: 18px;
}

@media (min-width: 1024px) and (max-width: 1279px){
	.su-archive-main > .su-card-grid:not(.su-search-results-grid){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.su-related-section .su-card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px){
	.su-archive-main > .su-card-grid:not(.su-search-results-grid){ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.su-related-section .su-card-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px){
	.su-archive-grid .su-card--featured-large{ grid-column: 1 / -1; }
}

/* ---------- 10. Homepage ---------- */
.su-homepage{ padding-top: 24px; padding-bottom: 24px; }

/* ---------- 11. Breadcrumbs ---------- */
.su-breadcrumbs{ font-size: 12.5px; color: var(--su-text-muted); margin: 18px 0 6px; }
.su-breadcrumbs ol{ display: flex; flex-wrap: wrap; gap: 6px; }
.su-breadcrumbs li:not(:last-child)::after{ content: "/"; margin-left: 6px; opacity: 0.5; }
.su-breadcrumbs a:hover{ color: var(--su-primary); }

/* ---------- 12. Single Article ---------- */
.su-single-layout{ display: grid; grid-template-columns: 1fr; gap: 32px; padding: 8px 16px 48px; }
@media (min-width: 992px){ .su-single-layout{ grid-template-columns: 1fr 320px; } }
.su-single-main{ min-width: 0; }

.su-article-category{
	display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase;
	color: var(--su-primary); background: rgba(13,91,209,0.09); padding: 4px 10px; border-radius: 3px; margin-bottom: 10px;
}
.su-article-title{ font-size: clamp(24px, 4vw, 36px); font-weight: 800; margin-bottom: 8px; }
.su-article-subtitle{ font-size: 17px; color: var(--su-text-muted); }
.su-article-meta{ display: flex; align-items: center; gap: 10px; margin: 16px 0; padding-bottom: 16px; border-bottom: 1px solid var(--su-border); }
.su-article-avatar img{ border-radius: 50%; width: 36px; height: 36px; }
.su-article-meta-text{ display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.su-article-author{ font-weight: 700; }
.su-article-dates{ color: var(--su-text-muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.su-article-featured-image{ margin: 0 0 24px; border-radius: var(--su-radius); overflow: hidden; }
.su-article-featured-image img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.su-toc{ background: var(--su-bg-alt); border: 1px solid var(--su-border); border-radius: var(--su-radius); margin: 0 0 28px; padding: 4px 0; }
.su-toc-toggle{ width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 700; font-size: 14.5px; }
.su-toc-arrow{ width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--su-transition); }
.su-toc-toggle[aria-expanded="false"] .su-toc-arrow{ transform: rotate(-45deg); }
.su-toc-list{ padding: 0 20px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.su-toc[data-collapsed="true"] .su-toc-list{ display: none; }
.su-toc-list li a{ color: var(--su-text-muted); }
.su-toc-list li a:hover{ color: var(--su-primary); }
.su-toc-list .su-toc-h3{ margin-left: 16px; }
.su-toc:empty, .su-toc-list:empty{ display: none; }

.su-article-content{ font-size: 17px; line-height: 1.8; }
.su-article-content h2{ font-size: 24px; margin-top: 2em; scroll-margin-top: 80px; }
.su-article-content h3{ font-size: 19px; margin-top: 1.6em; scroll-margin-top: 80px; }
.su-article-content p{ margin-bottom: 1.3em; }
.su-article-content img{ border-radius: var(--su-radius); margin: 1.5em 0; }
.su-article-content a{ color: var(--su-primary); text-decoration: underline; text-underline-offset: 2px; }
.su-article-content blockquote{ border-left: 3px solid var(--su-primary); margin: 1.5em 0; padding: 0.4em 0 0.4em 1.2em; color: var(--su-text-muted); font-style: italic; }
.su-article-content pre{ background: var(--su-bg-alt); border: 1px solid var(--su-border); border-radius: var(--su-radius-sm); padding: 14px; overflow-x: auto; }
.su-article-content code{ background: var(--su-bg-alt); padding: 2px 5px; border-radius: 3px; font-size: 0.9em; }
.su-article-content ul, .su-article-content ol{ margin: 0 0 1.3em; padding-left: 1.4em; list-style: revert; }
.su-article-content table{ width: 100%; border-collapse: collapse; margin: 1.5em 0; display: block; overflow-x: auto; }
.su-article-content th, .su-article-content td{ border: 1px solid var(--su-border); padding: 8px 12px; }

.su-author-box{ display: flex; gap: 16px; background: var(--su-bg-alt); border: 1px solid var(--su-border); border-radius: var(--su-radius); padding: 20px; margin: 32px 0; }
.su-author-avatar img{ border-radius: 50%; width: 64px; height: 64px; }
.su-author-label{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--su-text-muted); }
.su-author-name{ font-size: 17px; margin: 2px 0 6px; }
.su-author-bio{ font-size: 14px; color: var(--su-text-muted); margin-bottom: 10px; }
.su-author-links{ display: flex; gap: 14px; }
.su-author-links a{ font-size: 13px; font-weight: 700; color: var(--su-primary); }

.su-related-section{ margin: 40px 0; }

.su-post-nav{ display: grid; grid-template-columns: 1fr; gap: 12px; margin: 32px 0; }
@media (min-width: 640px){ .su-post-nav{ grid-template-columns: 1fr 1fr; } }
.su-post-nav-link{ display: block; border: 1px solid var(--su-border); border-radius: var(--su-radius); padding: 14px 16px; transition: border-color var(--su-transition); }
.su-post-nav-link:hover{ border-color: var(--su-primary); }
.su-post-nav-next{ text-align: right; }
.su-post-nav-label{ display: block; font-size: 12px; font-weight: 700; color: var(--su-primary); margin-bottom: 4px; }
.su-post-nav-title{ display: block; font-size: 14.5px; font-weight: 600; }

/* ---------- 13. Comments ---------- */
.su-comments{ margin-top: 40px; }
.su-comments-title{ font-size: 19px; margin-bottom: 16px; }
.su-comment-list{ display: flex; flex-direction: column; gap: 16px; }
.su-comment-list ol{ margin-left: 24px; margin-top: 16px; }
.su-comment-form input[type="text"],
.su-comment-form input[type="email"],
.su-comment-form input[type="url"],
.su-comment-form textarea{
	width: 100%; border: 1px solid var(--su-border); border-radius: var(--su-radius-sm);
	padding: 10px 12px; margin-bottom: 12px; background: var(--su-bg); color: var(--su-text);
}
.su-comment-form textarea{ min-height: 120px; }

/* ---------- 14. Sidebar ---------- */
.su-sidebar{ display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.su-archive-main, .su-page-main, .su-single-main{ min-width: 0; }
.su-widget{ background: var(--su-card-bg); border: 1px solid var(--su-border); border-radius: var(--su-radius); padding: 18px; }
.su-widget-title{ font-size: 15px; font-weight: 800; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--su-primary); display: inline-block; }
.su-widget-post-list{ display: flex; flex-direction: column; gap: 14px; }
.su-widget-post-list li{ display: flex; gap: 10px; }
.su-widget-post-thumb{ width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--su-radius-sm); overflow: hidden; background: var(--su-bg-alt); }
.su-widget-post-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.su-widget-post-info{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.su-widget-post-title{ font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.su-widget-post-title:hover{ color: var(--su-primary); }
.su-widget-post-info time{ font-size: 11.5px; color: var(--su-text-muted); }
.su-widget-categories-list li{ display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--su-border); font-size: 14px; }
.su-widget-categories-list li:last-child{ border-bottom: 0; }
.su-widget-categories-list a:hover{ color: var(--su-primary); }

.su-search-form{ display: flex; gap: 6px; }
.su-search-input{
	flex: 1; border: 1px solid var(--su-border); border-radius: var(--su-radius-sm);
	padding: 10px 12px; background: var(--su-bg); color: var(--su-text); min-height: 44px;
}
.su-search-submit{ width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--su-border); border-radius: var(--su-radius-sm); display: flex; align-items: center; justify-content: center; }
.su-search-submit:hover{ background: var(--su-primary); color: #fff; border-color: var(--su-primary); }

.su-newsletter-form input{ width: 100%; border: 1px solid var(--su-border); border-radius: var(--su-radius-sm); padding: 10px 12px; margin-bottom: 10px; min-height: 44px; background: var(--su-bg); color: var(--su-text); }
.su-newsletter-form button{ width: 100%; min-height: 44px; background: var(--su-primary); color: #fff; border-radius: var(--su-radius-sm); font-weight: 700; }
.su-newsletter-form button:hover{ background: var(--su-primary-dark); }
.su-newsletter-note{ font-size: 11px; color: var(--su-text-muted); margin: 8px 0 0; }

/* ---------- 15. Archive / Category / Search / Page ---------- */
.su-archive-layout, .su-page-layout{ display: grid; grid-template-columns: 1fr; gap: 32px; padding: 8px 16px 48px; }
@media (min-width: 992px){ .su-archive-layout{ grid-template-columns: 1fr 320px; } }
.su-page-layout--full{ grid-template-columns: 1fr; }
.su-archive-header{ margin-bottom: 24px; }
.su-archive-title{ font-size: 28px; font-weight: 800; }
.su-archive-description{ color: var(--su-text-muted); margin-top: 6px; max-width: 70ch; }
.su-archive-grid{ margin-bottom: 24px; }
.su-search-count{ color: var(--su-text-muted); font-size: 14px; }
.su-search-header-form{ max-width: 480px; margin-top: 12px; }
.su-no-results{ color: var(--su-text-muted); padding: 24px 0; }

.su-page-title{ font-size: 30px; font-weight: 800; margin-bottom: 20px; }
.su-page-body{ font-size: 16px; line-height: 1.8; max-width: 76ch; }
.su-page-body h2{ margin-top: 1.6em; }

.su-pagination ul{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.su-pagination a, .su-pagination span{
	display: flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 10px;
	border: 1px solid var(--su-border); border-radius: var(--su-radius-sm); font-size: 13.5px;
}
.su-pagination .current{ background: var(--su-primary); color: #fff; border-color: var(--su-primary); }
.su-pagination a:hover{ border-color: var(--su-primary); color: var(--su-primary); }

/* ---------- 16. 404 ---------- */
.su-404{ text-align: center; padding: 60px 16px; }
.su-404-title{ font-size: 72px; color: var(--su-primary); font-weight: 800; }
.su-404-text{ color: var(--su-text-muted); margin-bottom: 24px; }
.su-404-search{ max-width: 420px; margin: 0 auto 24px; }
.su-btn{ display: inline-block; padding: 12px 22px; border-radius: var(--su-radius-sm); font-weight: 700; font-size: 14px; }
.su-btn-primary{ background: var(--su-primary); color: #fff; }
.su-btn-primary:hover{ background: var(--su-primary-dark); }
.su-404 .su-section{ text-align: left; margin-top: 48px; }

/* ---------- 17. Footer ---------- */
.su-footer{ background: var(--su-navy); color: #c9d2e3; margin-top: 48px; }
.su-footer-grid{ display: grid; grid-template-columns: 1fr; gap: 32px; padding: 48px 16px 32px; }
@media (min-width: 720px){ .su-footer-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px){ .su-footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.su-footer-logo{ font-size: 20px; font-weight: 800; color: #fff; }
.su-footer-tagline{ color: var(--su-primary); font-size: 13px; font-weight: 700; margin: 4px 0 10px; }
.su-footer-desc{ font-size: 13.5px; line-height: 1.7; color: #a9b4cc; }
.su-footer-title{ color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; }
.su-footer-col ul{ display: flex; flex-direction: column; gap: 10px; }
.su-footer-col a{ font-size: 13.5px; color: #c9d2e3; }
.su-footer-col a:hover{ color: #fff; }
.su-footer-social{ display: flex; flex-direction: column; gap: 12px; }
.su-footer-social a{ display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.su-footer-social .su-icon{ opacity: 0.85; }
.su-footer-bottom{ border-top: 1px solid rgba(255,255,255,0.1); padding: 16px; text-align: center; font-size: 12.5px; color: #97a3bd; }

/* ---------- 18. Print sanity (avoid ad slots wasting ink) ---------- */
@media print{
	.su-header, .su-topbar, .su-sidebar, .su-ad-slot, .su-mobile-drawer, .su-footer{ display: none !important; }
}

/* =======================================================================
   19. Larger breakpoints — header nav reveal, spacing bumps
   ======================================================================= */
@media (min-width: 1024px){
	.su-primary-nav{ display: block !important; }
	.su-menu-toggle{ display: none !important; }
	.su-header-inner{ gap: 24px; }
}

/* Failsafe: whatever else happens, never let the header row itself wrap
   or overflow horizontally on small screens. */
.su-header-inner{ flex-wrap: nowrap; max-width: 100%; }
.su-branding{ min-width: 0; overflow: hidden; }
.su-site-title, .su-tagline{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 1280px){
	.su-container{ padding: 0 24px; }
}


/* =======================================================================
   20. Mobile navigation + homepage polish
   ======================================================================= */
.su-mobile-drawer .su-menu{
	display: block !important;
	width: 100%;
}
.su-mobile-drawer .su-menu-item{
	display: block;
	width: 100%;
}
.su-mobile-drawer .su-menu-item > a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 52px;
	padding: 14px 12px;
	font-size: 16px;
	font-weight: 650;
	color: var(--su-text);
	border-bottom: 1px solid var(--su-border);
	border-radius: 0;
}
.su-mobile-drawer .su-menu-item > a::after{
	content: "›";
	font-size: 21px;
	line-height: 1;
	color: var(--su-text-muted);
}
.su-mobile-drawer .su-menu-item > a:hover,
.su-mobile-drawer .su-menu-item.current-menu-item > a{
	color: var(--su-primary);
	background: var(--su-bg-alt);
}
.su-mobile-drawer-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 4px 16px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--su-border);
}
.su-mobile-drawer-brand{
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.su-mobile-drawer-title{
	font-size: 19px;
	font-weight: 800;
	color: var(--su-text);
	line-height: 1.2;
}
.su-mobile-drawer-tagline{
	font-size: 11px;
	color: var(--su-text-muted);
	margin-top: 3px;
}
.su-drawer-close{
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 1px solid var(--su-border);
	border-radius: 50%;
	font-size: 27px;
	line-height: 1;
	color: var(--su-text);
	background: var(--su-bg-alt);
}
.su-drawer-close:hover{ color: var(--su-primary); border-color: var(--su-primary); }
.su-mobile-drawer-social{
	margin-top: 12px;
	padding: 18px 8px 8px;
	border-top: 1px solid var(--su-border);
}

/* A single latest post should use the available desktop width instead of
   leaving an empty second column. */
@media (min-width: 860px){
	.su-latest-grid.su-latest-count-1 .su-card--featured-large{
		display: grid;
		grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
		align-items: stretch;
	}
	.su-latest-grid.su-latest-count-1 .su-card--featured-large .su-card-media{
		aspect-ratio: 16 / 9;
		height: 100%;
		min-height: 360px;
	}
	.su-latest-grid.su-latest-count-1 .su-card--featured-large .su-card-body{
		padding: 28px;
		justify-content: center;
	}
	.su-latest-grid.su-latest-count-1 .su-card--featured-large .su-card-title{
		font-size: clamp(24px, 2.3vw, 32px);
		line-height: 1.2;
	}
}

/* Explore Topics keeps the homepage useful even when only a few posts exist. */
.su-topic-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.su-topic-card{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-height: 120px;
	padding: 18px 48px 18px 18px;
	background: var(--su-card-bg);
	border: 1px solid var(--su-border);
	border-radius: var(--su-radius);
	transition: transform var(--su-transition), box-shadow var(--su-transition), border-color var(--su-transition);
}
.su-topic-card:hover{
	transform: translateY(-2px);
	border-color: rgba(13,91,209,0.35);
	box-shadow: var(--su-shadow-hover);
}
.su-topic-card-title{ font-size: 16px; font-weight: 800; color: var(--su-text); }
.su-topic-card-text{ font-size: 13px; line-height: 1.55; color: var(--su-text-muted); }
.su-topic-card-arrow{
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	font-weight: 500;
	color: var(--su-primary);
}
@media (min-width: 560px){
	.su-topic-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
	.su-topic-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* Footer: cleaner mobile spacing and no empty Follow Us block. */
@media (max-width: 719px){
	.su-footer-grid{ gap: 0; padding: 36px 16px 20px; }
	.su-footer-col{ padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.10); }
	.su-footer-col:first-child{ padding-top: 0; }
	.su-footer-col:last-child{ border-bottom: 0; }
	.su-footer-title{ margin-bottom: 12px; }
	.su-footer-col ul{ gap: 0; }
	.su-footer-col li a{ display: block; padding: 8px 0; }
	.su-footer-bottom{ padding: 14px 16px; }
}

/* Never expose a WordPress account email as a public byline. */
.su-card-author,
.su-article-author,
.su-author-name{ overflow-wrap: anywhere; }


/* =======================================================================
   21. Final responsive polish — v1.0.3
   ======================================================================= */

/* Homepage: real magazine layout with a useful desktop sidebar. */
.su-homepage-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:32px;
    align-items:start;
}
.su-homepage-main,
.su-homepage-sidebar{
    min-width:0;
}
.su-homepage-sidebar .su-sidebar{
    gap:20px;
}
@media (min-width: 1040px){
    .su-homepage-layout{
        grid-template-columns:minmax(0,1fr) 320px;
        gap:32px;
    }
    .su-homepage{
        padding-top:28px;
        padding-bottom:28px;
    }
}

/* Do not put article titles on top of the featured image. */
.su-latest-grid .su-card--featured-large{
    position:relative;
    isolation:isolate;
}
.su-latest-grid .su-card--featured-large .su-card-media,
.su-latest-grid .su-card--featured-large .su-card-body{
    position:relative;
    z-index:1;
}
.su-latest-grid.su-latest-count-1 .su-card--featured-large{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(280px,0.9fr);
    align-items:stretch;
}
.su-latest-grid.su-latest-count-1 .su-card--featured-large .su-card-media{
    height:auto;
    min-height:0;
    aspect-ratio:16 / 9;
}
.su-latest-grid.su-latest-count-1 .su-card--featured-large .su-card-body{
    justify-content:center;
    padding:28px;
    background:var(--su-card-bg);
}
@media (max-width: 859px){
    .su-latest-grid.su-latest-count-1 .su-card--featured-large{
        display:flex;
        flex-direction:column;
    }
    .su-latest-grid.su-latest-count-1 .su-card--featured-large .su-card-media{
        aspect-ratio:16 / 9;
    }
    .su-latest-grid.su-latest-count-1 .su-card--featured-large .su-card-body{
        padding:18px;
    }
}

/* Mobile drawer: always a true vertical menu. */
.su-mobile-drawer{
    width:min(360px,88vw);
    padding:18px 18px 24px;
    border-left:1px solid var(--su-border);
}
.su-mobile-drawer nav{
    width:100%;
}
.su-mobile-drawer .su-mobile-menu,
.su-mobile-drawer .su-menu{
    display:block !important;
    width:100% !important;
    margin:0;
    padding:0;
}
.su-mobile-drawer .su-mobile-menu > li,
.su-mobile-drawer .su-menu > li,
.su-mobile-drawer .su-menu-item{
    display:block !important;
    width:100% !important;
    margin:0;
}
.su-mobile-drawer .su-mobile-menu > li > a,
.su-mobile-drawer .su-menu > li > a,
.su-mobile-drawer .su-menu-item > a{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    width:100% !important;
    min-height:54px;
    padding:14px 10px !important;
    border-bottom:1px solid var(--su-border);
    border-radius:8px;
    font-size:16px;
    font-weight:650;
    color:var(--su-text);
}
.su-mobile-drawer .su-mobile-menu > li > a::after,
.su-mobile-drawer .su-menu > li > a::after,
.su-mobile-drawer .su-menu-item > a::after{
    content:"›";
    font-size:22px;
    line-height:1;
    color:var(--su-text-muted);
    transition:transform 160ms ease,color 160ms ease;
}
.su-mobile-drawer .su-mobile-menu > li > a:hover,
.su-mobile-drawer .su-menu > li > a:hover,
.su-mobile-drawer .su-menu-item.current-menu-item > a{
    background:var(--su-bg-alt);
    color:var(--su-primary);
}
.su-mobile-drawer .su-mobile-menu > li > a:hover::after,
.su-mobile-drawer .su-menu > li > a:hover::after{
    transform:translateX(3px);
    color:var(--su-primary);
}
.su-mobile-drawer-head{
    padding:4px 0 18px;
    margin-bottom:10px;
}
.su-mobile-drawer-social{
    display:flex;
    gap:10px;
    padding:22px 0 0;
    margin-top:12px;
    border-top:1px solid var(--su-border);
}
.su-mobile-drawer-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border:1px solid var(--su-border);
    border-radius:50%;
    color:var(--su-text);
    transition:transform 160ms ease,border-color 160ms ease,color 160ms ease;
}
.su-mobile-drawer-social a:hover{
    transform:translateY(-2px);
    border-color:var(--su-primary);
    color:var(--su-primary);
}

/* Footer: spacious, balanced and intentionally not glued to one line. */
.su-footer{
    margin-top:64px;
    background:
        radial-gradient(circle at 12% 0%, rgba(13,91,209,.16), transparent 30%),
        var(--su-navy);
}
.su-footer-grid{
    grid-template-columns:1.55fr 1fr 1fr 1fr;
    gap:54px;
    padding:58px 24px 48px;
}
.su-footer-grid:not(.su-footer-grid--social){
    grid-template-columns:1.55fr 1fr 1fr 1fr;
}
.su-footer-col{
    min-width:0;
}
.su-footer-about{
    padding-right:20px;
}
.su-footer-logo{
    display:block;
    font-size:24px;
    line-height:1.2;
    margin-bottom:10px;
}
.su-footer-tagline{
    margin:0 0 16px;
    font-size:13px;
}
.su-footer-desc{
    max-width:390px;
    margin:0;
    font-size:14px;
    line-height:1.8;
}
.su-footer-title{
    position:relative;
    display:inline-block;
    margin-bottom:20px;
    padding-bottom:8px;
    font-size:12px;
    letter-spacing:.08em;
}
.su-footer-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:30px;
    height:2px;
    background:var(--su-primary);
    border-radius:2px;
}
.su-footer-col ul{
    gap:13px;
}
.su-footer-col a{
    font-size:14px;
    color:#c9d2e3;
    transition:color 160ms ease,transform 160ms ease;
}
.su-footer-col li a:hover{
    color:#fff;
}
.su-footer-social{
    gap:13px;
}
.su-footer-social a{
    display:flex;
    align-items:center;
    gap:10px;
}
.su-footer-social .su-icon{
    width:17px;
    height:17px;
}
.su-footer-bottom{
    padding:20px 24px;
    background:rgba(0,0,0,.10);
}
.su-footer-bottom p{
    margin:0;
    font-size:12.5px;
}
@media (max-width:1039px){
    .su-footer-grid,
    .su-footer-grid:not(.su-footer-grid--social){
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:40px 50px;
    }
}
@media (max-width:719px){
    .su-footer{
        margin-top:48px;
    }
    .su-footer-grid,
    .su-footer-grid:not(.su-footer-grid--social){
        display:grid;
        grid-template-columns:1fr;
        gap:0;
        padding:42px 20px 26px;
    }
    .su-footer-about{
        padding-right:0;
    }
    .su-footer-col{
        padding:24px 0;
        border-bottom:1px solid rgba(255,255,255,.10);
    }
    .su-footer-col:first-child{
        padding-top:0;
    }
    .su-footer-col:last-child{
        border-bottom:0;
    }
    .su-footer-col ul{
        gap:0;
    }
    .su-footer-col li a{
        display:block;
        padding:8px 0;
    }
    .su-footer-bottom{
        padding:17px 20px;
    }
}

/* Search sidebar on homepage and archives. */
.su-widget-search{
    background:linear-gradient(180deg,var(--su-card-bg),var(--su-bg-alt));
}
.su-widget-search .su-search-form{
    margin-top:4px;
}
.su-widget-search .su-search-input{
    min-width:0;
}

/* Better placeholders instead of large empty grey boxes. */
.su-card-media-placeholder{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(13,91,209,.12), transparent 30%),
        linear-gradient(135deg,var(--su-bg-alt),var(--su-border));
}
.su-card-media-placeholder::before{
    content:"SU";
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border:1px solid rgba(13,91,209,.25);
    border-radius:50%;
    color:var(--su-primary);
    font-size:13px;
    font-weight:800;
}

/* Public byline must never look like an email address. */
.su-card-author,
.su-article-author,
.su-author-name{
    word-break:normal;
    overflow-wrap:normal;
}

/* Search result cards: deterministic desktop layout so images never become
   narrow/tall columns because of inherited grid rules. */
.su-search-results-grid .su-card--list{
    display:grid;
    grid-template-columns:minmax(220px,280px) minmax(0,1fr);
    align-items:stretch;
    width:100%;
    min-width:0;
}
.su-search-results-grid .su-card--list .su-card-media{
    width:auto;
    min-width:0;
    flex:initial;
    aspect-ratio:16 / 9;
    height:auto;
}
.su-search-results-grid .su-card--list .su-card-body{
    min-width:0;
    padding:20px;
}
@media (max-width:639px){
    .su-search-results-grid .su-card--list{
        display:flex;
        flex-direction:column;
    }
    .su-search-results-grid .su-card--list .su-card-media{
        width:100%;
        aspect-ratio:16 / 9;
    }
    .su-search-results-grid .su-card--list .su-card-body{
        padding:16px;
    }
}


/* =======================================================================
   23. v1.0.4 final polish
   ======================================================================= */

.su-topbar{display:none !important;}

@media (min-width:900px){
    .su-primary-nav{display:block !important;}
    .su-menu-toggle{display:none !important;}
}

/* Homepage: strong editorial feature with image above article text. */
.su-homepage-layout{
    grid-template-columns:minmax(0,1fr);
    gap:32px;
}
@media (min-width:1040px){
    .su-homepage-layout{
        grid-template-columns:minmax(0,1fr) 320px;
        gap:36px;
    }
}

.su-latest-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}
.su-latest-grid .su-card--featured-large{
    display:flex !important;
    flex-direction:column !important;
    width:100%;
    overflow:hidden;
}
.su-latest-grid .su-card--featured-large .su-card-media{
    width:100%;
    flex:0 0 auto;
    aspect-ratio:16 / 9 !important;
    height:auto !important;
    min-height:0 !important;
}
.su-latest-grid .su-card--featured-large .su-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.su-latest-grid .su-card--featured-large .su-card-body{
    padding:20px 22px 22px !important;
    background:var(--su-card-bg);
    display:flex;
    flex-direction:column;
    gap:7px;
}
.su-latest-grid .su-card--featured-large .su-card-title{
    font-size:clamp(22px, 2.2vw, 30px);
    line-height:1.18;
    margin:2px 0 0;
    max-width:760px;
}
.su-latest-grid .su-card--featured-large .su-card-excerpt{
    font-size:14px;
    line-height:1.65;
    max-width:760px;
}
.su-latest-grid .su-card--featured-small{min-width:0;}
@media (min-width:700px){
    .su-latest-grid:has(.su-card--featured-small){
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .su-latest-grid:has(.su-card--featured-small) .su-card--featured-large{
        grid-column:1 / -1;
    }
}
.su-card-media + .su-card-body{
    position:relative !important;
    inset:auto !important;
    z-index:1;
}

/* Search/archive cards stay proportional and readable. */
.su-search-results-grid .su-card--list{
    min-height:0;
    border-radius:var(--su-radius);
    overflow:hidden;
}
.su-search-results-grid .su-card--list .su-card-media img{object-fit:cover;}

/* No public comments or comment form. */
.su-comments,
.su-comments-wrap,
#comments,
.comment-respond,
.comments-area{display:none !important;}

.su-single-layout{padding-bottom:56px;}
.su-footer{margin-top:72px;}
@media (max-width:719px){.su-footer{margin-top:48px;}}


/* =======================================================================
   v1.0.5 — Final image, card, comments and responsive fixes
   ======================================================================= */

/* Editorial images must never be cropped or zoomed. */
.su-card-media,
.su-latest-grid .su-card--featured-large .su-card-media,
.su-search-results-grid .su-card--list .su-card-media{
    aspect-ratio:auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden;
    background:var(--su-bg-alt);
}

.su-card-media img,
.su-latest-grid .su-card--featured-large .su-card-media img,
.su-search-results-grid .su-card--list .su-card-media img{
    display:block;
    width:100% !important;
    height:auto !important;
    max-width:100%;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center;
    transform:none !important;
}

/* Do not enlarge article graphics on hover. */
.su-card:hover .su-card-media img,
.su-latest-grid .su-card--featured-large:hover .su-card-media img{
    transform:none !important;
}

/* Single article hero: preserve the complete source image. */
.su-article-featured-image{
    width:100%;
    margin:0 0 24px;
    padding:0;
    border-radius:var(--su-radius);
    overflow:hidden;
    background:var(--su-bg-alt);
}
.su-article-featured-image img{
    display:block;
    width:100% !important;
    height:auto !important;
    max-width:100%;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
}

/* Static page featured images follow the same no-crop rule. */
.su-page-featured-image{
    width:100%;
    margin:0 0 24px;
    border-radius:var(--su-radius);
    overflow:hidden;
    background:var(--su-bg-alt);
}
.su-page-featured-image img{
    display:block;
    width:100% !important;
    height:auto !important;
    max-width:100%;
    aspect-ratio:auto !important;
    object-fit:contain !important;
}

/* Search result cards: image and text are separate grid columns.
   minmax(0,1fr) prevents long titles from crossing into the image. */
.su-search-results-grid .su-card--list{
    display:grid !important;
    grid-template-columns:minmax(0,280px) minmax(0,1fr) !important;
    width:100%;
    min-width:0;
    overflow:hidden;
    align-items:stretch;
}
.su-search-results-grid .su-card--list .su-card-media{
    width:100%;
    min-width:0;
    grid-column:1;
    grid-row:1;
}
.su-search-results-grid .su-card--list .su-card-body{
    grid-column:2;
    grid-row:1;
    min-width:0 !important;
    width:100%;
    overflow:hidden;
    padding:20px;
}
.su-search-results-grid .su-card--list .su-card-title,
.su-search-results-grid .su-card--list .su-card-excerpt{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
}
@media (max-width:639px){
    .su-search-results-grid .su-card--list{
        display:flex !important;
        flex-direction:column !important;
    }
    .su-search-results-grid .su-card--list .su-card-media,
    .su-search-results-grid .su-card--list .su-card-body{
        width:100%;
        grid-column:auto;
        grid-row:auto;
    }
    .su-search-results-grid .su-card--list .su-card-body{
        padding:16px;
    }
}

/* Archive/category cards also get safe text wrapping. */
.su-card{
    min-width:0;
}
.su-card-body{
    min-width:0;
}
.su-card-title{
    min-width:0;
    overflow-wrap:anywhere;
    word-break:normal;
}

/* Comments are a publication-wide design decision: hide every common
   WordPress/theme comment wrapper even if a plugin injects one. */
#comments,
.comments-area,
.comment-respond,
.comment-list,
.comment-form,
.comments,
.su-comments,
.su-comments-wrap,
.su-comment-list,
.su-comment-form,
.wp-block-comments,
.wp-block-comment-template{
    display:none !important;
}

/* Never let media, embeds, tables or code create horizontal overflow. */
.su-site-main,
.su-container,
.su-homepage-layout,
.su-homepage-main,
.su-single-layout,
.su-single-main,
.su-archive-layout,
.su-archive-main,
.su-page-layout,
.su-page-main{
    min-width:0;
    max-width:100%;
}
.su-article-content img,
.su-article-content video,
.su-article-content iframe,
.su-article-content embed,
.su-article-content object{
    max-width:100%;
}
.su-article-content pre{
    max-width:100%;
    overflow-x:auto;
}
.su-article-content table{
    max-width:100%;
}

/* Stable responsive gutters. */
@media (max-width:479px){
    .su-container{
        padding-left:14px;
        padding-right:14px;
    }
    .su-homepage,
    .su-single-layout,
    .su-archive-layout,
    .su-page-layout{
        padding-left:14px;
        padding-right:14px;
    }
    .su-article-title{
        font-size:clamp(25px,8vw,32px);
    }
    .su-article-content{
        font-size:16px;
    }
    .su-sidebar{
        gap:16px;
    }
}

@media (min-width:480px) and (max-width:991px){
    .su-homepage-layout,
    .su-single-layout,
    .su-archive-layout{
        grid-template-columns:minmax(0,1fr);
    }
}

@media (min-width:992px){
    .su-homepage-layout,
    .su-single-layout,
    .su-archive-layout{
        grid-template-columns:minmax(0,1fr) 320px;
    }
}

@media (min-width:1280px){
    .su-container{
        padding-left:24px;
        padding-right:24px;
    }
}

/* Header never allows navigation to force horizontal scrolling. */
.su-header-inner,
.su-header-actions,
.su-primary-nav,
.su-menu{
    min-width:0;
}
@media (min-width:900px){
    .su-primary-nav{
        flex:1 1 auto;
        min-width:0;
    }
    .su-primary-nav .su-menu{
        justify-content:center;
        flex-wrap:wrap;
    }
}

/* Mobile drawer remains a true vertical menu with comfortable tap targets. */
@media (max-width:899px){
    .su-primary-nav{
        display:none !important;
    }
    .su-menu-toggle{
        display:flex !important;
    }
    .su-mobile-drawer{
        width:min(360px,90vw);
        max-width:360px;
    }
}

/* Remove any accidental empty comment spacing. */
body:not(.admin-bar) .su-comments-wrap:empty{
    display:none !important;
}


/* =======================================================================
   23. FINAL VISUAL FIX — v1.0.7
   Keep editorial images fully visible, restore compact magazine sizing,
   prevent title/image overlap, and keep the layout responsive.
   ======================================================================= */

/* Editorial images must NEVER be cropped. */
.su-card-media,
.su-card--featured-large .su-card-media,
.su-card--featured-small .su-card-media,
.su-card--list .su-card-media{
    aspect-ratio:auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden;
}
.su-card-media img,
.su-card--featured-large .su-card-media img,
.su-card--featured-small .su-card-media img,
.su-card--list .su-card-media img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
}
.su-card:hover .su-card-media img{ transform:none !important; }

/* Featured post: compact two-column magazine card instead of a giant banner. */
@media (min-width:860px){
    .su-latest-grid.su-latest-count-1 .su-card--featured-large{
        display:grid !important;
        grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr) !important;
        align-items:stretch !important;
    }
    .su-latest-grid.su-latest-count-1 .su-card--featured-large .su-card-media{
        height:auto !important;
        aspect-ratio:auto !important;
    }
    .su-latest-grid.su-latest-count-1 .su-card--featured-large .su-card-body{
        display:flex !important;
        justify-content:center !important;
        min-width:0 !important;
        padding:22px !important;
    }
    .su-latest-grid.su-latest-count-1 .su-card--featured-large .su-card-title{
        font-size:22px !important;
        line-height:1.28 !important;
    }
}

/* Normal latest layout stays compact and balanced. */
.su-latest-grid{ gap:16px !important; }
.su-card--featured-large .su-card-title{ font-size:20px !important; }
.su-card--featured-small .su-card-title{ font-size:16px !important; }

/* Search/archive cards: image and title are always separate blocks. */
.su-card--list{
    position:relative !important;
    overflow:hidden !important;
}
.su-card--list .su-card-media,
.su-card--list .su-card-body{
    position:static !important;
    z-index:auto !important;
}
.su-card--list .su-card-body{
    min-width:0 !important;
    overflow:hidden !important;
}
.su-card--list .su-card-title,
.su-card--list .su-card-title a{
    position:static !important;
    display:block !important;
    background:transparent !important;
    color:var(--su-text) !important;
    text-shadow:none !important;
    overflow-wrap:anywhere !important;
}
@media (min-width:640px){
    .su-card--list .su-card-media{
        width:250px !important;
        flex:0 0 250px !important;
    }
}

/* Article featured image: preserve its original proportions. */
.su-article-featured-image,
.su-page-featured-image{
    height:auto !important;
    max-height:none !important;
    overflow:hidden !important;
}
.su-article-featured-image img,
.su-page-featured-image img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
}

/* Keep the overall reading width close to the original compact theme. */
.su-container{ max-width:1180px; }
@media (min-width:1200px){
    .su-homepage-layout,
    .su-single-layout,
    .su-archive-layout{
        grid-template-columns:minmax(0,1fr) 290px !important;
        gap:26px !important;
    }
}
.su-homepage{ padding-top:22px !important; padding-bottom:22px !important; }
.su-section{ margin:26px 0 !important; }
.su-section-title{ font-size:19px !important; margin-bottom:13px !important; }
.su-widget{ padding:15px !important; }

/* Never let long titles visually escape their cards. */
.su-card,
.su-card-body,
.su-card-title,
.su-card-title a{ min-width:0 !important; }
.su-card-title a{ overflow-wrap:anywhere !important; word-break:normal !important; }

/* Public comments remain disabled everywhere. */
#comments,
.comments-area,
.comment-respond,
.comment-form,
form#commentform,
.wp-block-comments,
.wp-block-comment-template,
.wp-block-post-comments,
.su-comments,
.su-comments-wrap,
.comments-link,
.post-comments,
.entry-comments{ display:none !important; }

/* Mobile: image first, text second, no clipping and no oversized type. */
@media (max-width:859px){
    .su-latest-grid.su-latest-count-1 .su-card--featured-large{
        display:flex !important;
        flex-direction:column !important;
    }
    .su-latest-grid.su-latest-count-1 .su-card--featured-large .su-card-media{
        width:100% !important;
        height:auto !important;
        aspect-ratio:auto !important;
    }
    .su-latest-grid.su-latest-count-1 .su-card--featured-large .su-card-body{
        padding:16px !important;
    }
}
@media (max-width:639px){
    .su-card-media,
    .su-card--featured-large .su-card-media,
    .su-card--featured-small .su-card-media{
        aspect-ratio:auto !important;
    }
    .su-card-body{ padding:12px 14px 14px !important; }
    .su-card--featured-large .su-card-title{ font-size:19px !important; }
    .su-card--featured-small .su-card-title,
    .su-card-title{ font-size:16px !important; }
    .su-container{ padding-left:14px; padding-right:14px; }
}

/* =======================================================================
   22. Homepage category sections — compact magazine layout
   Fixes the large empty area when a category has only 1–2 posts.
   ======================================================================= */
@media (min-width: 1024px){
    .su-homepage .su-category-section .su-card-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        align-items: stretch;
    }

    /* One post: use the full content width instead of leaving 2/3 empty. */
    .su-homepage .su-category-section .su-card-grid > .su-card:only-child{
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
        min-height: 220px;
    }

    .su-homepage .su-category-section .su-card-grid > .su-card:only-child .su-card-media{
        aspect-ratio: 16 / 9;
        height: 100%;
        min-height: 220px;
    }

    .su-homepage .su-category-section .su-card-grid > .su-card:only-child .su-card-body{
        justify-content: center;
        padding: 22px 24px;
    }

    .su-homepage .su-category-section .su-card-grid > .su-card:only-child .su-card-title{
        font-size: 22px;
        line-height: 1.28;
    }

    .su-homepage .su-category-section .su-card-grid > .su-card:only-child .su-card-excerpt{
        font-size: 14px;
        line-height: 1.65;
    }

    /* Two posts: balanced two-column editorial cards. */
    .su-homepage .su-category-section .su-card-grid > .su-card:nth-child(1):nth-last-child(2),
    .su-homepage .su-category-section .su-card-grid > .su-card:nth-child(2):nth-last-child(1){
        min-width: 0;
    }
}

@media (min-width: 560px) and (max-width: 1023px){
    .su-homepage .su-category-section .su-card-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 559px){
    .su-homepage .su-category-section .su-card-grid{
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Keep the homepage visually tight and readable on desktop. */
@media (min-width: 1040px){
    .su-homepage-layout{ gap: 28px; }
    .su-homepage-sidebar{ width: 100%; }
    .su-homepage .su-section{ margin: 30px 0; }
    .su-homepage .su-category-section{ margin-top: 38px; }
}


/* =======================================================================
   v1.0.8 — Clean responsive navigation
   Desktop: show only the first five primary items.
   Mobile: show Home + quick links + an expandable Categories section.
   ======================================================================= */

/* Desktop header navigation: keep it compact and never show more than 5 items. */
@media (min-width: 900px){
    .su-primary-nav{
        display:block !important;
        flex:1 1 auto;
        min-width:0;
    }

    .su-primary-nav .su-menu{
        justify-content:center;
        flex-wrap:nowrap;
        overflow:hidden;
    }


    .su-menu-item > a{
        padding:9px 13px;
        font-size:14px;
    }

    .su-menu-toggle{
        display:none !important;
    }
}

/* Mobile drawer: clean information architecture. */
.su-mobile-nav{
    display:block;
}

.su-mobile-home-link,
.su-mobile-categories > summary,
.su-mobile-info-menu > .su-menu-item > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:50px;
    padding:13px 10px;
    box-sizing:border-box;
    color:var(--su-text);
    text-decoration:none;
    font-size:15.5px;
    font-weight:700;
    border-bottom:1px solid var(--su-border);
    transition:background var(--su-transition), color var(--su-transition);
}

.su-mobile-home-link:hover,
.su-mobile-info-menu > .su-menu-item > a:hover,
.su-mobile-categories > summary:hover{
    color:var(--su-primary);
    background:var(--su-bg-alt);
}

.su-mobile-arrow{
    font-size:22px;
    line-height:1;
    color:var(--su-text-muted);
    transition:transform 180ms ease;
}

.su-mobile-categories[open] > summary .su-mobile-arrow{
    transform:rotate(90deg);
}

.su-mobile-group-label{
    padding:16px 10px 7px;
    color:var(--su-text-muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.su-mobile-info-menu,
.su-mobile-menu{
    list-style:none;
    margin:0;
    padding:0;
}

.su-mobile-info-menu .su-menu-item{
    list-style:none;
    margin:0;
    padding:0;
}

.su-mobile-info-menu .su-sub-menu,
.su-mobile-menu .su-sub-menu{
    list-style:none;
    margin:0;
    padding:0;
}

.su-mobile-info-menu .su-menu-item > a::after{
    content:"›";
    font-size:21px;
    color:var(--su-text-muted);
}

.su-mobile-categories{
    margin:8px 0 0;
    border-top:1px solid var(--su-border);
}

.su-mobile-categories > summary{
    cursor:pointer;
    list-style:none;
    user-select:none;
    border-top:0;
}

.su-mobile-categories > summary::-webkit-details-marker{
    display:none;
}

.su-mobile-category-list{
    padding:2px 0 4px;
}

.su-mobile-category-list .su-mobile-menu > .su-menu-item{
    list-style:none;
    margin:0;
    padding:0;
}

.su-mobile-category-list .su-mobile-menu > .su-menu-item > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:47px;
    padding:11px 10px 11px 20px;
    border-bottom:1px solid var(--su-border);
    color:var(--su-text);
    text-decoration:none;
    font-size:14.5px;
    font-weight:600;
}

.su-mobile-category-list .su-mobile-menu > .menu-item-home{
    display:none !important;
}

.su-mobile-category-list .su-mobile-menu > .su-menu-item > a:hover{
    color:var(--su-primary);
    background:var(--su-bg-alt);
}

.su-mobile-category-list .su-sub-menu{
    padding-left:12px;
    background:var(--su-bg-alt);
}

.su-mobile-category-list .su-sub-menu .su-menu-item > a{
    display:block;
    padding:10px 10px 10px 22px;
    border-bottom:1px solid var(--su-border);
    color:var(--su-text-muted);
    font-size:13.5px;
}

@media (min-width:900px){
    .su-mobile-nav{
        display:none !important;
    }
}

@media (max-width:899px){
    .su-primary-nav{
        display:none !important;
    }

    .su-menu-toggle{
        display:flex !important;
    }

    .su-mobile-drawer{
        width:min(360px,90vw);
        max-width:360px;
        padding:20px 10px;
    }

    .su-mobile-drawer-head{
        padding-left:6px;
        padding-right:6px;
    }

    .su-mobile-drawer-social{
        margin-top:18px;
    }
}

/* =======================================================================
   v1.0.9 — Professional mobile navigation
   Quick Links and Categories are independent accordions. Categories are
   generated from WordPress categories, so new categories appear
   automatically without editing a menu.
   ======================================================================= */
.su-desktop-auto-menu{margin:0;padding:0;list-style:none;display:flex;align-items:center;justify-content:center;gap:2px;}
.su-desktop-auto-menu > .su-menu-item{margin:0;padding:0;list-style:none;}
.su-desktop-auto-menu > .su-menu-item > a{display:block;padding:9px 13px;color:var(--su-text);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap;border-radius:8px;transition:background .18s ease,color .18s ease;}
.su-desktop-auto-menu > .su-menu-item > a:hover,
.su-desktop-auto-menu > .su-menu-item.current-menu-item > a{color:var(--su-primary);background:var(--su-bg-alt);}

.su-mobile-quick-links,
.su-mobile-categories{margin:0 0 8px;border:0;border-radius:10px;overflow:hidden;background:transparent;}
.su-mobile-quick-links > summary,
.su-mobile-categories > summary{margin:0;min-height:52px;padding:0 12px;background:var(--su-bg-alt);border:1px solid var(--su-border);border-radius:10px;}
.su-mobile-quick-links[open] > summary,
.su-mobile-categories[open] > summary{border-radius:10px 10px 0 0;color:var(--su-primary);border-bottom-color:transparent;}
.su-mobile-quick-links > summary .su-mobile-arrow,
.su-mobile-categories > summary .su-mobile-arrow{transform:rotate(0deg);}
.su-mobile-quick-links[open] > summary .su-mobile-arrow,
.su-mobile-categories[open] > summary .su-mobile-arrow{transform:rotate(90deg);}
.su-mobile-quick-list,
.su-mobile-category-list{border:1px solid var(--su-border);border-top:0;border-radius:0 0 10px 10px;overflow:hidden;background:var(--su-bg);}
.su-mobile-quick-list a,
.su-mobile-category-list .su-mobile-menu > .su-menu-item > a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:47px;padding:11px 14px;color:var(--su-text);text-decoration:none;font-size:14px;font-weight:600;border-bottom:1px solid var(--su-border);transition:background .18s ease,color .18s ease;}
.su-mobile-quick-list a:last-child,
.su-mobile-category-list .su-mobile-menu > .su-menu-item:last-child > a{border-bottom:0;}
.su-mobile-quick-list a:hover,
.su-mobile-category-list .su-mobile-menu > .su-menu-item > a:hover{color:var(--su-primary);background:var(--su-bg-alt);}
.su-mobile-category-list{padding:0;}
.su-mobile-category-list .su-mobile-menu{margin:0;padding:0;list-style:none;}

@media (max-width:899px){
    .su-mobile-nav{padding-bottom:8px;}
    .su-mobile-home-link{margin-bottom:8px;border:1px solid var(--su-border);border-radius:10px;background:var(--su-bg);}
    .su-mobile-home-link:hover{background:var(--su-bg-alt);}
    .su-mobile-drawer{padding:18px 10px 20px;}
}


/* ---- Desktop: Home + max 4 categories (5 items total) ---- */
@media (min-width: 900px){
	.su-primary-nav{
		display:block !important;
		flex:1 1 auto;
		min-width:0;
	}
	.su-desktop-auto-menu{
		display:flex !important;
		flex-wrap:nowrap !important;
		justify-content:center !important;
		align-items:center;
		gap:4px;
		overflow:hidden;
	}
	.su-desktop-auto-menu > .su-menu-item{
		flex:0 0 auto;
	}
	.su-desktop-auto-menu > .su-menu-item > a{
		padding:9px 13px;
		font-size:14px;
		border-radius:8px;
	}
	.su-menu-toggle{
		display:none !important;
	}
}

@media (max-width: 899px){
	.su-primary-nav{display:none !important;}
	.su-menu-toggle{display:flex !important;}
}

/* ---- Mobile drawer: clean, premium accordion ---- */
@media (max-width: 899px){
	.su-mobile-drawer{
		width:min(380px, 92vw);
		max-width:380px;
		padding:18px 12px 24px;
		background:var(--su-bg);
		border-left:1px solid var(--su-border);
		box-shadow:-18px 0 50px rgba(0,0,0,.18);
		overscroll-behavior:contain;
	}
	.su-mobile-drawer-head{
		padding:6px 4px 16px !important;
		margin-bottom:12px !important;
		border-bottom:1px solid var(--su-border);
	}
	.su-mobile-drawer-title{
		font-size:20px !important;
		letter-spacing:-.02em;
	}
	.su-mobile-drawer-tagline{
		margin-top:3px;
		font-size:11px !important;
	}
	.su-drawer-close{
		width:42px;
		height:42px;
		display:flex;
		align-items:center;
		justify-content:center;
		border:1px solid var(--su-border);
		border-radius:50%;
		background:var(--su-bg-alt);
		color:var(--su-text);
		font-size:27px;
		line-height:1;
		transition:transform .18s ease, background .18s ease, color .18s ease;
	}
	.su-drawer-close:hover{
		transform:rotate(90deg);
		background:var(--su-primary);
		color:#fff;
	}
	.su-mobile-nav{
		display:block !important;
		padding-bottom:0;
	}
	.su-mobile-home-link,
	.su-mobile-quick-links > summary,
	.su-mobile-categories > summary{
		min-height:52px !important;
		padding:0 14px !important;
		display:flex !important;
		align-items:center !important;
		justify-content:space-between !important;
		border:1px solid var(--su-border) !important;
		border-radius:11px !important;
		background:var(--su-bg) !important;
		color:var(--su-text) !important;
		font-size:15px !important;
		font-weight:750 !important;
	}
	.su-mobile-home-link{
		margin-bottom:9px;
	}
	.su-mobile-quick-links,
	.su-mobile-categories{
		margin:0 0 9px !important;
		border:0 !important;
		border-radius:11px !important;
		overflow:hidden;
	}
	.su-mobile-quick-links[open] > summary,
	.su-mobile-categories[open] > summary{
		border-color:var(--su-primary) !important;
		background:color-mix(in srgb, var(--su-primary) 7%, var(--su-bg)) !important;
		color:var(--su-primary) !important;
		border-radius:11px 11px 0 0 !important;
	}
	.su-mobile-quick-links > summary::-webkit-details-marker,
	.su-mobile-categories > summary::-webkit-details-marker{
		display:none;
	}
	.su-mobile-quick-links > summary::marker,
	.su-mobile-categories > summary::marker{
		display:none;
	}
	.su-mobile-arrow{
		display:inline-flex !important;
		align-items:center;
		justify-content:center;
		width:24px;
		height:24px;
		flex:0 0 24px;
		font-size:22px !important;
		line-height:1 !important;
		color:var(--su-text-muted) !important;
		transform:rotate(0deg);
		transition:transform .18s ease, color .18s ease;
	}
	.su-mobile-quick-links[open] > summary .su-mobile-arrow,
	.su-mobile-categories[open] > summary .su-mobile-arrow{
		transform:rotate(90deg);
		color:var(--su-primary) !important;
	}
	.su-mobile-quick-list,
	.su-mobile-category-list{
		border:1px solid var(--su-border) !important;
		border-top:0 !important;
		border-radius:0 0 11px 11px !important;
		background:var(--su-bg) !important;
		overflow:hidden;
	}
	.su-mobile-quick-list a,
	.su-mobile-category-list .su-mobile-menu > .su-menu-item > a{
		min-height:48px !important;
		padding:11px 14px !important;
		display:flex !important;
		align-items:center;
		justify-content:space-between;
		gap:12px;
		border-bottom:1px solid var(--su-border) !important;
		background:transparent !important;
		color:var(--su-text) !important;
		font-size:14px !important;
		font-weight:600 !important;
	}
	.su-mobile-quick-list a:last-child,
	.su-mobile-category-list .su-mobile-menu > .su-menu-item:last-child > a{
		border-bottom:0 !important;
	}
	.su-mobile-quick-list a:hover,
	.su-mobile-category-list .su-mobile-menu > .su-menu-item > a:hover{
		background:var(--su-bg-alt) !important;
		color:var(--su-primary) !important;
	}
	/* CRITICAL: each category/quick-link has one arrow only. */
	.su-mobile-drawer .su-mobile-menu > li > a::after,
	.su-mobile-drawer .su-menu > li > a::after,
	.su-mobile-drawer .su-menu-item > a::after,
	.su-mobile-info-menu .su-menu-item > a::after{
		content:none !important;
		display:none !important;
	}
	.su-mobile-drawer .su-mobile-quick-list a::after{
		content:none !important;
		display:none !important;
	}
	.su-mobile-drawer-social{
		margin-top:16px;
		padding:18px 2px 0 !important;
		border-top:1px solid var(--su-border);
	}
}

/* ---- Dark mode navigation ---- */
[data-theme="dark"] .su-mobile-drawer{
	box-shadow:-18px 0 50px rgba(0,0,0,.55);
}
[data-theme="dark"] .su-mobile-quick-links[open] > summary,
[data-theme="dark"] .su-mobile-categories[open] > summary{
	background:var(--su-bg-alt) !important;
}

/* =======================================================================
   Final polish — reference footer + native system cursor
   ======================================================================= */
/* Native system cursor — no custom cursor or fake pointer.
 * Text/content uses the normal arrow cursor so screen recordings stay clean.
 * Interactive elements use the normal system hand pointer.
 * Editable fields retain the normal text cursor.
 */
html, body, body * { cursor: default !important; }
/* Native system hand only for real interactive controls. */
a[href], button, summary, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], .su-menu-toggle, .su-search-toggle, .su-theme-toggle, .su-drawer-close { cursor: pointer !important; }
/* Keep the normal text caret only inside fields where typing is expected. */
input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], textarea, [contenteditable="true"] { cursor: text !important; }
select { cursor: default !important; }


.su-footer{
    position: relative;
    overflow: hidden;
    margin-top: 72px;
    color: #d9e1ef;
    background:
        radial-gradient(circle at 50% 0%, rgba(13,91,209,.12), transparent 34%),
        linear-gradient(180deg, #0a2149 0%, #071a39 100%);
}
.su-footer-pattern{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.42;
    background:
        radial-gradient(circle, rgba(86,125,190,.34) 1px, transparent 1.4px) 0 0 / 7px 7px;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.85), transparent 30%, transparent 70%, rgba(0,0,0,.85));
    mask-image: linear-gradient(90deg, rgba(0,0,0,.85), transparent 30%, transparent 70%, rgba(0,0,0,.85));
}
.su-footer-grid--reference{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr 1fr;
    gap:58px;
    padding:52px 24px 42px;
}
.su-footer-about{padding-right:24px;}
.su-footer-logo{
    display:inline-block;
    color:#fff;
    font-size:20px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.02em;
    margin-bottom:6px;
}
.su-footer-tagline{
    color:#0d6cff;
    font-size:12px;
    font-weight:700;
    margin:0 0 14px;
}
.su-footer-desc{
    max-width:330px;
    margin:0;
    color:#b9c6da;
    font-size:13px;
    line-height:1.75;
}
.su-footer-title{
    position:relative;
    display:inline-block;
    color:#fff;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin:0 0 18px;
    padding-bottom:8px;
}
.su-footer-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:28px;
    height:2px;
    border-radius:2px;
    background:#0d6cff;
}
.su-footer-col ul{
    display:flex;
    flex-direction:column;
    gap:7px;
}
.su-footer-col a{
    display:inline-flex;
    align-items:center;
    color:#c8d3e5;
    font-size:13px;
    line-height:1.45;
    transition:color .16s ease, transform .16s ease;
}
.su-footer-col a:hover{color:#fff; transform:translateX(2px);}
.su-footer-chevron{
    display:inline-block;
    width:16px;
    margin-right:2px;
    color:#dce6f7;
    font-size:16px;
    line-height:1;
}
.su-footer-social--icons{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
}
.su-footer-social-icon{
    width:29px;
    height:29px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(126,165,225,.55);
    border-radius:50%;
    color:#fff !important;
    background:rgba(255,255,255,.035);
    transform:none !important;
}
.su-footer-social-icon:hover{
    color:#fff !important;
    border-color:#6ea4f5;
    background:rgba(13,91,209,.22);
}
.su-footer-social-icon .su-icon{width:14px;height:14px;}
.su-footer-bottom{
    position:relative;
    z-index:1;
    border-top:1px solid rgba(255,255,255,.10);
    background:rgba(3,15,34,.24);
    padding:16px 24px;
}
.su-footer-bottom-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.su-footer-bottom p{
    margin:0;
    color:#9eacc3;
    font-size:12px;
}
.su-footer-bottom-links{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:0;
}
.su-footer-bottom-links a{
    color:#9eacc3;
    font-size:11.5px;
    padding:0 12px;
    border-left:1px solid rgba(255,255,255,.18);
}
.su-footer-bottom-links a:first-child{border-left:0;}
.su-footer-bottom-links a:hover{color:#fff;}

@media (max-width:1039px){
    .su-footer-grid--reference{grid-template-columns:1.3fr 1fr 1fr;gap:42px 34px;}
    .su-footer-about{grid-column:1 / -1;padding-right:0;}
}
@media (max-width:719px){
    .su-footer{margin-top:48px;}
    .su-footer-grid--reference{grid-template-columns:1fr;gap:0;padding:40px 20px 24px;}
    .su-footer-about{grid-column:auto;padding:0 0 22px;}
    .su-footer-col{padding:20px 0;border-top:1px solid rgba(255,255,255,.09);}
    .su-footer-title{margin-bottom:14px;}
    .su-footer-col ul{gap:0;}
    .su-footer-col li a{display:flex;padding:7px 0;}
    .su-footer-bottom{padding:16px 20px;}
    .su-footer-bottom-inner{align-items:flex-start;flex-direction:column;gap:12px;}
    .su-footer-bottom-links{justify-content:flex-start;}
    .su-footer-bottom-links a{padding-left:10px;padding-right:10px;}
    .su-footer-bottom-links a:first-child{padding-left:0;}
}