/*!
 * Smart Nav System — frontend styles
 * Vanilla CSS, no dependencies. Every color below is a tasteful default
 * meant to be overridden from the Elementor Style tabs.
 */

/* ==========================================================================
   0. Shared tokens & resets
   ========================================================================== */

.sns-nav ul,
.sns-panel-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sns-editor-note {
	padding: 14px 16px;
	border: 1px dashed rgba(255, 107, 44, 0.65);
	border-radius: 10px;
	background: rgba(255, 107, 44, 0.06);
	color: #8a4a22;
	font: 500 13px/1.5 system-ui, sans-serif;
}

/* Keyboard focus — visible, never on mouse click. */
.sns-link:focus-visible,
.sns-cta:focus-visible,
.sns-burger:focus-visible,
.sns-oc-trigger:focus-visible,
.sns-sub-toggle:focus-visible,
.sns-panel-close:focus-visible,
.sns-topbar-close:focus-visible,
.sns-soc:focus-visible,
.sns-contact-item:focus-visible {
	outline: 2px solid #ff6b2c;
	outline-offset: 3px;
	border-radius: 6px;
}

/* ==========================================================================
   1. Smart Nav Menu (desktop bar)
   ========================================================================== */

.sns-nav {
	position: relative;
}

.sns-menu {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.sns-layout-vertical .sns-menu {
	flex-direction: column;
	align-items: stretch;
}

.sns-item {
	position: relative;
}

.sns-link {
	display: flex;
	align-items: center;
	gap: var(--sns-ico-gap, 8px);
	padding: 10px 14px;
	text-decoration: none;
	color: inherit;
	position: relative;
	line-height: 1.3;
	border-radius: var(--sns-fx-radius, 8px);
	transition: color 0.25s ease;
}

.sns-txt {
	display: flex;
	flex-direction: column;
}

.sns-subtxt {
	font-size: 0.74em;
	font-weight: 400;
	opacity: 0.62;
	margin-top: 1px;
}

.sns-ico {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.sns-badge {
	display: inline-flex;
	align-items: center;
	margin-left: 2px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--sns-badge-bg, var(--sns-badge-bg-default, #ff6b2c));
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.5;
	transform: translateY(-1px);
}

.sns-caret {
	display: inline-flex;
	align-items: center;
	opacity: 0.7;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sns-item:hover > .sns-link .sns-caret,
.sns-item:focus-within > .sns-link .sns-caret {
	transform: rotate(180deg);
}

/* --- Hover effects ------------------------------------------------------ */

/* Animated underline (left → right). */
.sns-fx-underline .sns-menu > li > .sns-link::after,
.sns-fx-underline-c .sns-menu > li > .sns-link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 5px;
	height: 2px;
	border-radius: 2px;
	background: var(--sns-fx-c, #ff6b2c);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.sns-fx-underline-c .sns-menu > li > .sns-link::after {
	transform-origin: center;
}

.sns-fx-underline .sns-menu > li > .sns-link:hover::after,
.sns-fx-underline .sns-menu > li > .sns-link:focus-visible::after,
.sns-fx-underline .sns-menu > li.current-menu-item > .sns-link::after,
.sns-fx-underline .sns-menu > li.current-menu-ancestor > .sns-link::after,
.sns-fx-underline-c .sns-menu > li > .sns-link:hover::after,
.sns-fx-underline-c .sns-menu > li > .sns-link:focus-visible::after,
.sns-fx-underline-c .sns-menu > li.current-menu-item > .sns-link::after,
.sns-fx-underline-c .sns-menu > li.current-menu-ancestor > .sns-link::after {
	transform: scaleX(1);
}

/* Background slide. */
.sns-fx-bg .sns-menu > li > .sns-link {
	z-index: 0;
}

.sns-fx-bg .sns-menu > li > .sns-link::before {
	content: "";
	position: absolute;
	inset: 3px 0;
	z-index: -1;
	border-radius: var(--sns-fx-radius, 8px);
	background: var(--sns-fx-c, rgba(255, 107, 44, 0.12));
	opacity: 0;
	transform: scaleX(0.55);
	transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sns-fx-bg .sns-menu > li > .sns-link:hover::before,
.sns-fx-bg .sns-menu > li > .sns-link:focus-visible::before,
.sns-fx-bg .sns-menu > li.current-menu-item > .sns-link::before {
	opacity: 1;
	transform: scaleX(1);
}

/* Zoom. */
.sns-fx-zoom .sns-menu > li > .sns-link {
	transition: color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.sns-fx-zoom .sns-menu > li > .sns-link:hover,
.sns-fx-zoom .sns-menu > li > .sns-link:focus-visible {
	transform: translateY(-1px) scale(1.06);
}

/* Glow. */
.sns-fx-glow .sns-menu > li > .sns-link:hover,
.sns-fx-glow .sns-menu > li > .sns-link:focus-visible,
.sns-fx-glow .sns-menu > li.current-menu-item > .sns-link {
	text-shadow: 0 0 14px var(--sns-fx-c, rgba(255, 107, 44, 0.85));
}

/* --- Dropdowns ------------------------------------------------------------ */

.sns-nav .sns-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1200;
	min-width: 220px;
	margin-top: var(--sns-drop-gap, 8px);
	padding: 8px;
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 18px 40px -14px rgba(15, 18, 25, 0.24), 0 2px 8px rgba(15, 18, 25, 0.06);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.25s;
}

/* Invisible bridge so the pointer can cross the gap. */
.sns-nav .sns-item > .sns-submenu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--sns-drop-gap, 8px);
}

.sns-sub-slide .sns-submenu {
	transform: translateY(10px);
}

.sns-sub-scale .sns-submenu {
	transform: scale(0.95);
	transform-origin: top left;
}

.sns-nav .sns-item:hover > .sns-submenu,
.sns-nav .sns-item:focus-within > .sns-submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

/* Nested levels open sideways. */
.sns-nav .sns-submenu .sns-submenu {
	top: -8px;
	left: 100%;
	margin: 0 0 0 6px;
}

.sns-nav .sns-submenu .sns-submenu::before {
	inset: 0 100% 0 auto;
	width: 6px;
	height: auto;
}

/* Vertical layout: first level opens sideways too. */
.sns-layout-vertical .sns-menu > li > .sns-submenu {
	top: 0;
	left: 100%;
	margin: 0 0 0 6px;
}

.sns-nav .sns-submenu .sns-link {
	padding: 9px 12px;
	border-radius: 9px;
	color: #3a3f4a;
	font-size: 0.94em;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.sns-nav .sns-submenu .sns-link:hover,
.sns-nav .sns-submenu .sns-link:focus-visible {
	background-color: rgba(15, 18, 25, 0.05);
}

.sns-nav .sns-submenu .sns-caret {
	margin-left: auto;
	transform: rotate(-90deg);
}

/* ==========================================================================
   2. Burger button
   ========================================================================== */

.sns-panel-root {
	display: flex;
	align-items: center;
}

.sns-burger {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 10px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	border-radius: 10px;
	transition: background-color 0.2s ease;
}

.sns-burger-box {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: var(--sns-burger-w, 26px);
	height: calc(var(--sns-burger-bh, 2px) * 3 + 12px);
}

.sns-bbar {
	display: block;
	width: 100%;
	height: var(--sns-burger-bh, 2px);
	border-radius: 99px;
	background: var(--sns-burger-c, currentColor);
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, background-color 0.2s ease;
}

.sns-burger[aria-expanded="true"] .sns-bbar:nth-child(1) {
	transform: translateY(calc(var(--sns-burger-bh, 2px) + 6px)) rotate(45deg);
}

.sns-burger[aria-expanded="true"] .sns-bbar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.4);
}

.sns-burger[aria-expanded="true"] .sns-bbar:nth-child(3) {
	transform: translateY(calc(-1 * (var(--sns-burger-bh, 2px) + 6px))) rotate(-45deg);
}

/* Icon / text trigger for the offcanvas widget. */
.sns-oc-trigger.sns-oc-icon,
.sns-oc-trigger.sns-oc-label {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 10px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	font: inherit;
	border-radius: 10px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* ==========================================================================
   3. Off-canvas panel (mobile menu + offcanvas widget)
   ========================================================================== */

.sns-panelwrap {
	position: fixed;
	inset: 0;
	z-index: 99990;
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0.5s;
}

.sns-panelwrap.sns-open {
	pointer-events: auto;
	visibility: visible;
}

.sns-overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 18, 0.55);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.sns-open .sns-overlay {
	opacity: 1;
}

.sns-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(var(--sns-panel-w, 360px), 100%);
	background: #ffffff;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 22px;
	box-shadow: 0 24px 60px -16px rgba(10, 12, 18, 0.35);
	transition: transform 0.5s cubic-bezier(0.32, 0.72, 0.24, 1), opacity 0.35s ease;
}

.sns-side-right .sns-panel {
	right: 0;
	transform: translateX(103%);
}

.sns-side-left .sns-panel {
	left: 0;
	transform: translateX(-103%);
}

.sns-open .sns-panel {
	transform: translateX(0);
}

/* Fade variant. */
.sns-anim-fade .sns-panel {
	transform: none;
	opacity: 0;
}

.sns-anim-fade.sns-open .sns-panel {
	opacity: 1;
}

/* Fullscreen variant. */
.sns-anim-full .sns-panel {
	inset: 0;
	width: 100%;
	transform: scale(1.03);
	opacity: 0;
}

.sns-anim-full.sns-open .sns-panel {
	transform: scale(1);
	opacity: 1;
}

/* Push variant — panel slides like "slide", the page body is shifted by JS. */
html.sns-push {
	overflow-x: hidden;
}

html.sns-push body {
	transition: transform 0.5s cubic-bezier(0.32, 0.72, 0.24, 1);
}

html.sns-push-right body {
	transform: translateX(calc(-1 * var(--sns-panel-w-live, 360px)));
}

html.sns-push-left body {
	transform: translateX(var(--sns-panel-w-live, 360px));
}

/* Scroll lock with scrollbar-width compensation (no layout jump). */
body.sns-locked {
	overflow: hidden;
	padding-right: var(--sns-sbw, 0px);
}

/* --- Panel internals -------------------------------------------------------- */

.sns-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	min-height: 38px;
}

.sns-panel-logo img {
	display: block;
	max-width: 150px;
	height: auto;
}

.sns-panel-close {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin-left: auto;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgba(15, 18, 25, 0.06);
	color: #20242e;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease, color 0.2s ease;
}

.sns-panel-close:hover {
	transform: rotate(90deg);
	background: rgba(15, 18, 25, 0.1);
}

.sns-panel-body {
	display: flex;
	flex-direction: column;
	gap: 22px;
	flex: 1;
}

.sns-panel-title {
	font-size: 1.3em;
	font-weight: 700;
	color: #171b24;
	line-height: 1.25;
}

.sns-panel-text {
	color: #4a5060;
	line-height: 1.6;
}

.sns-panel-text p:first-child {
	margin-top: 0;
}

.sns-panel-text p:last-child {
	margin-bottom: 0;
}

/* Menu (accordion). */

/* Vertical stack by default: the <ul> inherits .sns-menu's horizontal
   flex, so it must be reset here. Horizontal is opt-in per widget. */
.sns-panel-menu .sns-panel-list {
	display: block;
}

.sns-panel-menu.sns-pm-horizontal .sns-panel-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
}

.sns-panel-list > li {
	border-bottom: 1px solid var(--sns-divider, rgba(15, 18, 25, 0.08));
}

.sns-panel-menu .sns-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: static;
}

.sns-panel-menu .sns-link {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 2px;
	font-weight: 600;
	color: #171b24;
	text-decoration: none;
	border-radius: 0;
	transition: color 0.2s ease;
}

.sns-panel-menu .sns-link:hover {
	color: #ff6b2c;
}

/* Subtitles inside the panel: the label must stack above them. */
.sns-panel-menu .sns-txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sns-panel-menu .sns-subtxt {
	font-size: 0.78em;
	font-weight: 400;
	opacity: 0.6;
	margin-top: 2px;
	line-height: 1.35;
}

.sns-sub-toggle {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 12px;
	margin: 0;
	cursor: pointer;
	color: inherit;
	display: inline-flex;
	align-items: center;
	opacity: 0.7;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}

.sns-sub-toggle:hover,
.sns-sub-toggle:focus,
.sns-sub-toggle:focus-visible {
	opacity: 1;
}

/* Neutralise any theme <button> hover/focus background by default. The
   button is fully customisable from the "Submenu toggle" style controls. */
.sns-panel-menu .sns-sub-toggle,
.sns-panel-menu .sns-sub-toggle:hover,
.sns-panel-menu .sns-sub-toggle:focus,
.sns-panel-menu .sns-sub-toggle:focus-visible {
	background-color: transparent;
}

.sns-sub-toggle[aria-expanded="true"] {
	transform: rotate(180deg);
}

.sns-panel-menu .sns-submenu {
	flex: 0 0 100%;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	padding-left: var(--sns-sub-indent, 14px);
	transition: max-height 0.38s cubic-bezier(0.32, 0.72, 0.24, 1);
}

.sns-panel-menu .sns-submenu li {
	border: 0;
}

.sns-panel-menu .sns-submenu .sns-link {
	padding: 10px 2px;
	font-weight: 500;
	font-size: 0.95em;
	color: #4a5060;
}

/* CTA inside the panel. */
.sns-panel-cta .sns-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 12px;
	font-weight: 600;
	text-decoration: none;
	color: #ffffff;
	background: linear-gradient(135deg, #ff6b2c, #ff8f4d);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, filter 0.25s ease;
}

.sns-panel-cta .sns-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -10px rgba(255, 107, 44, 0.55);
}

/* CTA group — stacks the primary CTA and the optional second one. */
.sns-panel-cta-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Second CTA — secondary / outline look by default (fully customisable). */
.sns-panel-cta2 .sns-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 12px;
	font-weight: 600;
	text-decoration: none;
	background: transparent;
	color: #ff6b2c;
	border: 2px solid currentColor;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.sns-panel-cta2 .sns-cta:hover {
	background-color: rgba(255, 107, 44, 0.08);
	transform: translateY(-2px);
}

/* Contact rows. */
.sns-panel-contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sns-contact-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #20242e;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease;
}

.sns-contact-item:hover {
	color: #ff6b2c;
}

.sns-contact-item svg {
	width: 1em;
	height: 1em;
	max-width: none;
	max-height: none;
	flex: 0 0 auto;
	opacity: 0.75;
	font-size: 16px;
}

/* Socials. */
.sns-panel-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sns-soc {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(15, 18, 25, 0.06);
	color: #20242e;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease, color 0.25s ease;
}

.sns-soc:hover {
	transform: translateY(-2px);
	background: #ff6b2c;
	color: #ffffff;
}

.sns-soc svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Footer. */
.sns-panel-footer {
	margin-top: auto;
	font-size: 0.82em;
	line-height: 1.55;
	color: #7a8091;
}

.sns-panel-footer p {
	margin: 0 0 0.4em;
}

.sns-panel-footer p:last-child {
	margin-bottom: 0;
}

/* Teleported wrapper (front only) must not affect layout. */
.sns-teleport {
	position: static !important;
	width: 0;
	height: 0;
	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================================================
   4. Smart Sticky Header
   ========================================================================== */

.sns-sticky {
	z-index: var(--sns-z, 990);
	transition:
		background var(--sns-transition, 0.35s) ease,
		box-shadow var(--sns-transition, 0.35s) ease,
		padding var(--sns-transition, 0.35s) ease,
		backdrop-filter var(--sns-transition, 0.35s) ease,
		transform 0.38s cubic-bezier(0.32, 0.72, 0.24, 1);
}

/* Transparent header floating over the hero. */
.sns-overlap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--sns-z, 990);
}

/* Stuck state — added by JS after the scroll offset. */
.sns-stuck {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100% !important;
	max-width: none !important;
	z-index: var(--sns-z, 990);
}

/* Hide-on-scroll-down. */
.sns-stuck.sns-hide {
	transform: translateY(-110%);
	box-shadow: none !important;
}

/* --- Floating mode -------------------------------------------------------
   The header is detached from the screen edges FROM THE START — not only
   once stuck — so it looks strictly identical before and after sticking.

   Width is forced with !important because Elementor sets its own width on
   sections/containers (.e-con { width: var(--width) }), which would
   otherwise win over these rules.

   Side spacing comes from either:
     • --sns-float-gap : identical gap left & right (width is computed)
     • --sns-float-w   : an explicit width (remaining space splits evenly)

   In flow → centered with auto margins (no transform needed).
   Stuck   → position:fixed, centered with left:50% + translateX(-50%),
             which keeps it centered whatever its width.
   -------------------------------------------------------------------------- */
.sns-floatable {
	width: var(--sns-float-w, calc(100% - (var(--sns-float-gap, 24px) * 2))) !important;
	max-width: calc(100% - (var(--sns-float-gap, 0px) * 2)) !important;

	/* Centering: left:50% moves the left edge to the middle of the parent,
	   translateX(-50%) pulls it back by half its own width → truly centered,
	   whatever the width. Auto margins are NOT used, because Elementor sets
	   its own margin-inline-* on sections/containers and would fight them. */
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;

	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-inline-start: 0 !important;
	margin-inline-end: 0 !important;
	margin-top: var(--sns-float-top, 16px) !important;

	/* Only paint properties animate: the geometry must NOT morph on scroll. */
	transition:
		background var(--sns-transition, 0.35s) ease,
		box-shadow var(--sns-transition, 0.35s) ease,
		padding var(--sns-transition, 0.35s) ease,
		backdrop-filter var(--sns-transition, 0.35s) ease;
}

/* `left` only takes effect on a positioned element. Overlap mode already
   sets position:absolute, so don't override it there. */
.sns-floatable:not(.sns-overlap):not(.sns-stuck) {
	position: relative;
}

/* Once stuck: same width, same centering — only the positioning changes.
   Width is restated to beat the generic `.sns-stuck { width:100% }` rule,
   which carries the same specificity. */
.sns-stuck.sns-floatable {
	position: fixed !important;
	top: var(--sns-float-top, 16px);
	width: var(--sns-float-w, calc(100% - (var(--sns-float-gap, 24px) * 2))) !important;
	max-width: calc(100% - (var(--sns-float-gap, 0px) * 2)) !important;
	margin-top: 0 !important;
}

/* Hide-on-scroll: both transforms must be combined, otherwise translateY
   would cancel the centering. */
.sns-stuck.sns-floatable.sns-hide {
	transform: translateX(-50%) translateY(calc(-100% - var(--sns-float-top, 16px) - 10px)) !important;
	transition: transform 0.38s cubic-bezier(0.32, 0.72, 0.24, 1);
}

/* Placeholder inserted by JS to prevent layout jump. */
.sns-spacer {
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Elementor editor safety
   Sticky behaviour is disabled while editing (see smart-nav.js), so the
   header must render as a plain in-flow section. Every sticky/floating
   transform is neutralised here too: the centering trick used by the
   floating style (left:50% + translateX(-50%)) otherwise pushes the header
   a few pixels past the right edge and adds a horizontal scrollbar to the
   editing canvas — a scrollbar that does NOT exist on the live page.
   -------------------------------------------------------------------------- */
body.elementor-editor-active .sns-stuck,
body.elementor-editor-active .sns-floatable {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	width: auto !important;
	max-width: 100% !important;
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --------------------------------------------------------------------------
   Distraction-free editing
   The injected global header / footer show in PREVIEW mode only (panel
   hidden) so you can judge the whole page, and stay hidden while the editing
   panel is open so they never sit on top of the section being built.
   The `.sns-editing` class is toggled on the preview <body> by
   assets/js/smart-nav-editor.js. If that bridge never runs the parts stay
   visible — i.e. the previous behaviour, no regression.
   -------------------------------------------------------------------------- */
body.sns-editing .sns-global-header,
body.sns-editing .sns-global-footer {
	display: none !important;
}

/* Smooth link/logo color changes between the two states. */
.sns-sticky .sns-link,
.sns-sticky .sns-cta,
.sns-sticky .sns-bbar,
.sns-sticky .sns-logo img {
	transition-property: color, background, background-color, box-shadow, width, opacity, transform;
	transition-duration: var(--sns-transition, 0.35s);
	transition-timing-function: ease;
}

/* Global header / footer wrappers (output by the built-in parts).
   `display: flow-root` gives each its own block-formatting context, so a top
   margin set on the FIRST section of the page can no longer collapse through
   the header and drag the whole layout (header included) down. */
.sns-global-header {
	position: relative;
	display: flow-root;
}

.sns-global-footer {
	display: flow-root;
}

/* Reserves the header's height, as an empty block right after it, on pages
   that have no hero for an overlapping (transparent) header to float over —
   WooCommerce, blog, archives, plain pages. Without it their content slides
   underneath the header. Output server-side only where needed; the height is
   fed live by smart-nav.js via --sns-header-h. */
.sns-header-spacer {
	height: var(--sns-header-h, 0px);
	pointer-events: none;
}

/* An overlapping (transparent) header floats OVER the content, so the page
   must start at the very top — otherwise the top spacing of the first section
   (or of a wrapper around it) shows as an empty strip above the header.
   Scoped to overlap pages only (body.sns-overlap-active, added server-side).

   The gap can live on several ancestors depending on the theme, so we clear
   the top margin on the whole chain from the Elementor root down to the first
   section, and drop flow-root on the wrapper (useless when the header is
   absolutely positioned anyway). */
body.sns-overlap-active .sns-global-header {
	display: block;
}

body.sns-overlap-active .elementor,
body.sns-overlap-active .elementor > .elementor-section-wrap,
body.sns-overlap-active .elementor > .elementor-section-wrap > .elementor-section:first-child,
body.sns-overlap-active .elementor > .elementor-section:first-child,
body.sns-overlap-active .elementor > .e-con:first-child,
body.sns-overlap-active .elementor > .e-con:first-of-type {
	margin-top: 0 !important;
}

/* First section flush to the top: kill any top margin it carries, whichever
   Elementor structure (section or container) is in use. */
body.sns-overlap-active .elementor-section.elementor-top-section:first-of-type,
body.sns-overlap-active .e-con.e-parent:first-of-type {
	margin-top: 0 !important;
}

/* Safety net for a very common trap: an EMPTY Elementor container left at the
   top of the page. Elementor gives every container 10px top/bottom padding, so
   an empty one is a ~20px strip that shows as a blank band above the first real
   section once a transparent (overlap) header floats over it. Collapse it —
   front only (never in the editor, where an empty container is a live drop
   zone) and only when it is genuinely empty AND first, so a container that
   actually holds content is never touched. */
body.sns-overlap-active:not(.elementor-editor-active) .elementor > .e-con:first-child:has(> .e-con-inner:empty),
body.sns-overlap-active:not(.elementor-editor-active) .elementor > .e-con.e-con-full:first-child:empty {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: 0 !important;
}

/* Same trap, but INSIDE the rendered header/footer itself: a header/footer
   built in Elementor sometimes keeps a leftover empty container next to the
   real one. Being empty it still carries the default ~20px padding and, since
   it sits in normal flow (only the real header is absolute/overlap), it adds
   phantom height to the part — a blank strip above the page (or below it, for
   the footer). Collapse any genuinely-empty top-level container inside a global
   part, front only. The real header/footer container holds content, so it is
   never matched. */
body:not(.elementor-editor-active) .sns-global-header .elementor > .e-con:has(> .e-con-inner:empty),
body:not(.elementor-editor-active) .sns-global-header .elementor > .e-con.e-con-full:empty,
body:not(.elementor-editor-active) .sns-global-footer .elementor > .e-con:has(> .e-con-inner:empty),
body:not(.elementor-editor-active) .sns-global-footer .elementor > .e-con.e-con-full:empty {
	display: none !important;
}

/* ==========================================================================
   5. Smart CTA Button
   ========================================================================== */

.sns-cta-wrap {
	display: flex;
}

.sns-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 26px;
	border-radius: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: #ffffff;
	background: linear-gradient(135deg, #ff6b2c, #ff8f4d);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.25s ease,
		background 0.25s ease,
		color 0.25s ease,
		filter 0.25s ease;
}

.sns-cta-sm {
	padding: 9px 18px;
	font-size: 0.9em;
}

.sns-cta-lg {
	padding: 16px 34px;
	font-size: 1.06em;
}

.sns-cta-full {
	width: 100%;
}

.sns-cta-ico {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.sns-cta-ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Hover effects. */
.sns-ctafx-lift:hover,
.sns-ctafx-lift:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -10px rgba(255, 107, 44, 0.55);
}

.sns-ctafx-grow:hover,
.sns-ctafx-grow:focus-visible {
	transform: scale(1.05);
}

.sns-ctafx-shine::before {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 45%;
	height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	transform: skewX(-20deg);
	transition: left 0.65s ease;
	z-index: 1;
	pointer-events: none;
}

.sns-ctafx-shine:hover::before,
.sns-ctafx-shine:focus-visible::before {
	left: 140%;
}

.sns-ctafx-pulse {
	animation: sns-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes sns-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 107, 44, 0.45);
	}
	70% {
		box-shadow: 0 0 0 14px rgba(255, 107, 44, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 107, 44, 0);
	}
}

.sns-ctafx-icon-slide:hover .sns-ico-right,
.sns-ctafx-icon-slide:focus-visible .sns-ico-right {
	transform: translateX(4px);
}

.sns-ctafx-icon-slide:hover .sns-ico-left,
.sns-ctafx-icon-slide:focus-visible .sns-ico-left {
	transform: translateX(-4px);
}

/* ==========================================================================
   6. Smart Logo
   ========================================================================== */

.sns-logo {
	display: flex;
	align-items: center;
}

.sns-logo a {
	display: inline-flex;
	line-height: 0;
}

.sns-logo img {
	display: block;
	height: auto;
	max-width: 100%;
}

.sns-logo .sns-logo-alt {
	display: none;
}

.sns-stuck .sns-logo.sns-has-alt .sns-logo-main {
	display: none;
}

.sns-stuck .sns-logo.sns-has-alt .sns-logo-alt {
	display: block;
}

/* ==========================================================================
   7. Smart Top Bar
   ========================================================================== */

.sns-topbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 10px 48px;
	background: #101318;
	color: #ffffff;
	font-size: 0.9em;
	line-height: 1.4;
	text-align: center;
}

.sns-topbar-msg p {
	margin: 0;
}

.sns-topbar a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sns-topbar-close {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.25s ease;
}

.sns-topbar-close:hover {
	background: rgba(255, 255, 255, 0.26);
	transform: translateY(-50%) rotate(90deg);
}

.sns-topbar.sns-tb-hide {
	display: none;
}

/* ==========================================================================
   7bis. Smart Search
   ========================================================================== */

.sns-search {
	display: flex;
	align-items: center;
	position: relative;
}

/* --- Trigger --- */
.sns-search-trigger {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 10px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	line-height: 1;
	transition: color 0.2s ease, background-color 0.25s ease, transform 0.25s var(--sns-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.sns-search-trigger:hover {
	transform: scale(1.06);
}

/* --- The form (shared) --- */
.sns-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 4px 6px 4px 14px;
	background: rgba(15, 18, 25, 0.05);
	border: 1px solid rgba(15, 18, 25, 0.1);
	border-radius: 12px;
	transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.sns-search-form:focus-within {
	border-color: #ff6b2c;
	box-shadow: 0 0 0 4px rgba(255, 107, 44, 0.12);
}

.sns-field-ico {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	opacity: 0.55;
	color: inherit;
}

.sns-search-input {
	flex: 1;
	min-width: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	outline: none;
	font: inherit;
	color: inherit;
	padding: 10px 0;
	line-height: 1.3;
}

/* Kill the native clear cross for a cleaner look. */
.sns-search-input::-webkit-search-decoration,
.sns-search-input::-webkit-search-cancel-button,
.sns-search-input::-webkit-search-results-button {
	-webkit-appearance: none;
}

.sns-search-submit {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 9px;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, #ff6b2c, #ff8f4d);
	transition: transform 0.25s var(--sns-ease, cubic-bezier(0.22, 1, 0.36, 1)), filter 0.25s ease, background 0.25s ease;
}

.sns-search-submit.sns-has-text {
	padding: 10px 18px;
}

.sns-search-submit:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

/* --- Static field --- */
.sns-search-static .sns-search-form {
	width: 260px;
	max-width: 100%;
}

/* --- Inline expanding --- */
.sns-search-inline {
	gap: 0;
}

.sns-search-inline .sns-search-form {
	width: 0;
	padding-left: 0;
	padding-right: 0;
	opacity: 0;
	border-color: transparent;
	background: transparent;
	overflow: hidden;
	pointer-events: none;
	transition: width 0.42s var(--sns-ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 0.3s ease, padding 0.42s var(--sns-ease, cubic-bezier(0.22, 1, 0.36, 1)), background-color 0.3s, border-color 0.3s;
}

.sns-search-inline.sns-open .sns-search-form {
	width: 260px;
	max-width: 60vw;
	padding-left: 14px;
	padding-right: 6px;
	opacity: 1;
	pointer-events: auto;
	background: rgba(15, 18, 25, 0.05);
	border-color: rgba(15, 18, 25, 0.1);
}

.sns-search-inline.sns-open .sns-search-trigger {
	margin-right: 6px;
}

/* --- Dropdown --- */
.sns-search-drop {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 1200;
	width: 320px;
	max-width: 84vw;
	padding: 12px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 44px -16px rgba(15, 18, 25, 0.3), 0 2px 8px rgba(15, 18, 25, 0.06);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.28s ease, transform 0.3s var(--sns-ease, cubic-bezier(0.22, 1, 0.36, 1)), visibility 0.28s;
}

.sns-search-dd.sns-open .sns-search-drop {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* --- Fullscreen overlay --- */
.sns-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 99995;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 12, 18, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s;
}

/* Open state: the overlay carries its own class, because the JS teleports it
   to <body> (escaping any transformed ancestor such as a floating header). */
.sns-search-ov.sns-open .sns-search-overlay,
.sns-search-overlay.sns-open {
	opacity: 1;
	visibility: visible;
}

.sns-search-overlay-inner {
	width: 100%;
	max-width: 620px;
	transform: translateY(14px) scale(0.98);
	transition: transform 0.45s var(--sns-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.sns-search-ov.sns-open .sns-search-overlay-inner,
.sns-search-overlay.sns-open .sns-search-overlay-inner {
	transform: none;
}

.sns-search-title {
	font-size: 1.7em;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	text-align: center;
	margin-bottom: 22px;
}

/* Bigger, airier field inside the overlay. */
.sns-search-overlay .sns-search-form {
	padding: 6px 8px 6px 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.sns-search-overlay .sns-search-input {
	padding: 15px 0;
	font-size: 1.05em;
	color: #fff;
}

.sns-search-overlay .sns-search-input::placeholder {
	color: rgba(255, 255, 255, 0.5);
	opacity: 1;
}

.sns-search-overlay .sns-field-ico {
	opacity: 0.7;
}

.sns-search-close {
	position: absolute;
	top: 26px;
	right: 26px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s var(--sns-ease, cubic-bezier(0.22, 1, 0.36, 1)), background-color 0.25s ease;
}

.sns-search-close:hover {
	transform: rotate(90deg);
	background: rgba(255, 255, 255, 0.18);
}

/* --- Search field inside the off-canvas panel --- */
.sns-panel-search {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 4px 14px;
	background: rgba(15, 18, 25, 0.05);
	border: 1px solid rgba(15, 18, 25, 0.1);
	border-radius: 12px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sns-panel-search:focus-within {
	border-color: #ff6b2c;
	box-shadow: 0 0 0 4px rgba(255, 107, 44, 0.12);
}

.sns-panel-search .sns-search-input {
	padding: 11px 0;
}

.sns-panel-search-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	font-size: 20px; /* drives the icon size — see below */
	border-radius: 9px;
	color: #fff;
	background: linear-gradient(135deg, #ff6b2c, #ff8f4d);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease, background 0.25s ease;
}

/* Sized in `em`, driven by the button's font-size. Many themes ship
   `svg { max-width:100%; height:auto }`, which would otherwise squeeze the
   icon to fit its button — making the size control look broken. */
.sns-panel-search-btn svg {
	width: 1em;
	height: 1em;
	max-width: none;
	max-height: none;
	flex: 0 0 auto;
	align-self: center;
	display: block;
}

.sns-panel-search-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}


/* --------------------------------------------------------------------------
   Inline icon sizing — the robust way.

   Every icon SVG is sized in `em` and driven by its parent's font-size.
   Two reasons:
     • flex containers would otherwise shrink the SVG to fit the button;
     • many themes ship `svg { max-width: 100%; height: auto }`, which caps
       the icon to its container — making the size controls look broken.
   The Style tab controls therefore set the PARENT's font-size.
   -------------------------------------------------------------------------- */
.sns-panel-close,
.sns-search-submit,
.sns-search-trigger,
.sns-search-close,
.sns-topbar-close,
.sns-sub-toggle,
.sns-field-ico,
.sns-caret,
.sns-contact-item svg,
.sns-panel-search-btn {
	line-height: 1;
}

.sns-panel-close svg,
.sns-panel-search-btn svg,
.sns-search-submit svg,
.sns-search-trigger svg,
.sns-search-close svg,
.sns-topbar-close svg,
.sns-sub-toggle svg,
.sns-field-ico svg,
.sns-caret svg {
	width: 1em;
	height: 1em;
	max-width: none;
	max-height: none;
	flex: 0 0 auto;
	align-self: center;
	display: block;
}

/* Default icon sizes (each overridable from the Style tab). */
.sns-panel-close { font-size: 18px; }
.sns-panel-search-btn { font-size: 20px; }
.sns-search-submit { font-size: 17px; }
.sns-search-trigger { font-size: 20px; }
.sns-search-close { font-size: 18px; }
.sns-topbar-close { font-size: 12px; }
.sns-sub-toggle { font-size: 14px; }
.sns-field-ico { font-size: 17px; }
.sns-caret { font-size: 12px; }

/* ==========================================================================
   8. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.sns-link,
	.sns-link::before,
	.sns-link::after,
	.sns-submenu,
	.sns-panel,
	.sns-overlay,
	.sns-bbar,
	.sns-cta,
	.sns-cta-ico,
	.sns-sticky,
	.sns-sub-toggle,
	.sns-panel-close,
	html.sns-push body {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ==========================================================================
   9. Content templates — post & archive widgets
   ========================================================================== */

.sns-post-title {
	margin: 0;
	line-height: 1.15;
}

.sns-post-title a {
	color: inherit;
	text-decoration: none;
}

.sns-post-image img {
	display: block;
	width: 100%;
	height: auto;
}

.sns-post-content > *:first-child {
	margin-top: 0;
}

.sns-post-content > *:last-child {
	margin-bottom: 0;
}

/* --- Post meta --- */
.sns-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	font-size: 0.92em;
}

.sns-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sns-meta-avatar img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: block;
}

.sns-post-meta a {
	color: inherit;
	text-decoration: none;
}

.sns-post-meta a:hover {
	text-decoration: underline;
}

/* --- Archive title --- */
.sns-archive-title {
	margin: 0;
	line-height: 1.15;
}

.sns-archive-count {
	margin-top: 8px;
	opacity: 0.7;
	font-size: 0.9em;
}

/* --- Post grid --- */
.sns-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.sns-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 14px 40px -22px rgba(15, 18, 25, 0.35);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.sns-card-media {
	position: relative;
	display: block;
	height: 210px;
	overflow: hidden;
	background: rgba(15, 18, 25, 0.06);
}

.sns-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sns-card-noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(255, 107, 44, 0.18), rgba(255, 143, 77, 0.06));
}

.sns-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 11px;
	border-radius: 99px;
	background: #ff6b2c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.5;
}

.sns-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	flex: 1;
}

.sns-card-date {
	font-size: 0.82em;
	opacity: 0.65;
}

.sns-card-title {
	margin: 0;
	font-size: 1.16em;
	line-height: 1.3;
}

.sns-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.sns-card-excerpt {
	margin: 0;
	font-size: 0.94em;
	line-height: 1.6;
	opacity: 0.8;
}

.sns-card-more {
	margin-top: auto;
	padding-top: 6px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9em;
	font-weight: 600;
	color: #ff6b2c;
	text-decoration: none;
	line-height: 1;
}

.sns-card-more svg {
	width: 1em;
	height: 1em;
	max-width: none;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.sns-card-more:hover svg {
	transform: translateX(4px);
}

/* Hover effects. */
.sns-cardfx-lift .sns-card:hover,
.sns-cardfx-both .sns-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 56px -26px rgba(15, 18, 25, 0.45);
}

.sns-cardfx-zoom .sns-card:hover .sns-card-media img,
.sns-cardfx-both .sns-card:hover .sns-card-media img {
	transform: scale(1.07);
}

.sns-grid-empty {
	opacity: 0.7;
}

/* --- Pagination --- */
.sns-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
}

.sns-pagination a,
.sns-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sns-pagination a:hover {
	background: rgba(15, 18, 25, 0.06);
}

.sns-pagination .current {
	background: #ff6b2c;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.sns-card,
	.sns-card-media img,
	.sns-card-more svg {
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   10. Smart Table of Contents
   ========================================================================== */

.sns-toc {
	--sns-toc-indent: 16px;
	background: rgba(15, 18, 25, 0.03);
	border: 1px solid rgba(15, 18, 25, 0.08);
	border-radius: 14px;
	padding: 22px 24px;
}

/* Hidden until the JS knows whether there are headings — no empty flash. */
.sns-toc-pending {
	visibility: hidden;
}

/* The sticky positioning itself lives on the Elementor widget wrapper (see
   the widget's controls) — a flex child would otherwise be stretched to full
   height and sticky would have nowhere to travel. */
.sns-toc-sticky {
	align-self: flex-start;
}

.sns-toc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-bottom: 14px;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
}

button.sns-toc-head {
	cursor: pointer;
}

.sns-toc-title {
	font-weight: 700;
	font-size: 1.02em;
	line-height: 1.3;
}

.sns-toc-caret {
	width: 1em;
	height: 1em;
	max-width: none;
	flex: 0 0 auto;
	font-size: 16px;
	opacity: 0.6;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sns-toc-toggle[aria-expanded="false"] .sns-toc-caret {
	transform: rotate(-90deg);
}

.sns-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	counter-reset: sns-toc;
}

.sns-toc-item {
	counter-increment: sns-toc;
}

/* Hierarchy: indent by depth. */
.sns-toc-nested .sns-toc-item {
	padding-left: calc(var(--sns-toc-depth, 0) * var(--sns-toc-indent, 16px));
}

.sns-toc-link {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	line-height: 1.45;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Reading marker — the vertical bar. */
.sns-toc-link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 2px;
	border-radius: 2px;
	background: #ff6b2c;
	opacity: 0;
	transform: scaleY(0.4);
	transform-origin: center;
	transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sns-toc-item.sns-active > .sns-toc-link {
	color: #ff6b2c;
	font-weight: 600;
}

.sns-toc-item.sns-active > .sns-toc-link::before {
	opacity: 1;
	transform: scaleY(1);
}

.sns-toc-numbered .sns-toc-num::before {
	content: counter(sns-toc) ".";
	font-variant-numeric: tabular-nums;
	opacity: 0.6;
	font-weight: 600;
}

.sns-toc-txt {
	flex: 1;
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sns-toc-link,
	.sns-toc-link::before,
	.sns-toc-caret {
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   11. Theme compatibility
   ========================================================================== */

/* Some themes (Astra, Kadence…) inject their own dropdown toggle into the
   menu item title through the `nav_menu_item_title` filter. We render our
   own caret, so hide theirs to avoid a duplicate arrow. */
.sns-link .dropdown-menu-toggle,
.sns-link .ast-header-navigation-arrow,
.sns-link .menu-item-toggle,
.sns-panel-menu .dropdown-menu-toggle {
	display: none !important;
}

/* Screen-reader text injected by themes must stay invisible but readable. */
.sns-link .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}