/**
 * DSS Footer — frontend styles.
 *
 * Everything is scoped under .dssf-footer and uses !important so the footer
 * renders identically regardless of the host theme's global resets. Colours
 * come from inline CSS custom properties set on the .dssf-footer element
 * (--dssf-bg, --dssf-accent, …) with hard-coded fallbacks here.
 *
 * Desktop-first. Columns are fully dynamic (flex-wrap), so any number of
 * admin-added columns lays out cleanly. Mobile (<=768px) turns each column
 * into a tap-to-collapse accordion.
 */

/* -------------------------------------------------------------------------
 * Root + box model reset (scoped)
 * ---------------------------------------------------------------------- */
.dssf-footer,
.dssf-footer *,
.dssf-footer *::before,
.dssf-footer *::after {
	box-sizing: border-box !important;
}

.dssf-footer {
	--dssf-bg: #0d0d0d;
	--dssf-text: #b8b8b8;
	--dssf-heading: #ffffff;
	--dssf-accent: #f5c400;
	--dssf-link: #bdbdbd;
	--dssf-link-hover: #ffffff;
	--dssf-border: #f5c400;
	--dssf-divider: #262626;
	--dssf-max: 1200px;

	display: block !important;
	position: relative !important;
	background: var(--dssf-bg) !important;
	color: var(--dssf-text) !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	-webkit-font-smoothing: antialiased !important;
	border-top: 0 !important;
}

/* Dashed accent line across the very top. */
.dssf-footer::before {
	content: "" !important;
	display: block !important;
	width: 100% !important;
	 
 
	opacity: 0.9 !important;
	pointer-events: none;
    z-index: 2;
    background-image: linear-gradient(135deg, #000 25%, transparent 0, transparent 75%, #000 0), linear-gradient(135deg, #000 25%, #ffc107 0, #ffc107 75%, #000 0);
    background-position: 0 0, 15px 0;
    background-repeat: repeat-x;
    background-size: 50px 20px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.dssf-footer .dssf-inner {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 34px 44px !important;
	max-width: var(--dssf-max) !important;
	margin: 0 auto !important;
	padding: 56px 24px 44px !important;
	width: 100% !important;
}

/* -------------------------------------------------------------------------
 * Columns (generic)
 * ---------------------------------------------------------------------- */
.dssf-footer .dssf-col {
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.dssf-footer .dssf-about {
	flex: 1 1 260px !important;
	max-width: 320px !important;
}

.dssf-footer .dssf-column {
	flex: 1 1 170px !important;
	min-width: 150px !important;
}

/* -------------------------------------------------------------------------
 * About column
 * ---------------------------------------------------------------------- */
.dssf-footer .dssf-logo {
	display: inline-block !important;
	max-width: 230px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 18px !important;
	border: 0 !important;
}

.dssf-footer .dssf-logo--text {
	font-size: 1.35rem !important;
	font-weight: 800 !important;
	color: var(--dssf-heading) !important;
	letter-spacing: -0.01em !important;
}

.dssf-footer .dssf-about-text {
	margin: 0 0 20px !important;
	padding: 0 !important;
	color: var(--dssf-text) !important;
	font-size: 0.92rem !important;
	line-height: 1.65 !important;
}

.dssf-footer .dssf-subdivider {
	height: 1px !important;
	width: 100% !important;
	background: var(--dssf-divider) !important;
	margin: 4px 0 18px !important;
	border: 0 !important;
}

.dssf-footer .dssf-follow {
	color: var(--dssf-heading) !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	margin: 0 0 14px !important;
	letter-spacing: 0.01em !important;
}

.dssf-footer .dssf-socials {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.dssf-footer .dssf-social {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	background: var(--dssf-accent) !important;
	color: #141414 !important;
	text-decoration: none !important;
	overflow: hidden !important;
	transition: transform 0.18s ease, filter 0.18s ease !important;
	box-shadow: none !important;
}

.dssf-footer .dssf-social:hover,
.dssf-footer .dssf-social:focus-visible {
	transform: translateY(-2px) !important;
	filter: brightness(1.08) !important;
	outline: none !important;
}

.dssf-footer .dssf-social:focus-visible {
	outline: 2px solid var(--dssf-link-hover) !important;
	outline-offset: 2px !important;
}

.dssf-footer .dssf-social svg {
	width: 17px !important;
	height: 17px !important;
	display: block !important;
	fill: currentColor !important;
}

.dssf-footer .dssf-social img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	display: block !important;
}

/* -------------------------------------------------------------------------
 * Column headings + collapse wrapper
 * ---------------------------------------------------------------------- */
.dssf-footer .dssf-col-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	color: var(--dssf-heading) !important;
	cursor: default !important;
	user-select: none !important;
}

.dssf-footer .dssf-col-title strong {
	font-weight: 700 !important;
	font-size: 1rem !important;
	color: var(--dssf-heading) !important;
	line-height: 1.3 !important;
}

.dssf-footer .dssf-col-chevron {
	display: none !important;
	flex: 0 0 auto !important;
	width: 12px !important;
	height: 12px !important;
	border-right: 2px solid var(--dssf-text) !important;
	border-bottom: 2px solid var(--dssf-text) !important;
	transform: rotate(45deg) !important;
	transition: transform 0.3s ease !important;
	margin-bottom: 3px !important;
}

.dssf-footer .dssf-collapse {
	overflow: visible !important;
}

/* -------------------------------------------------------------------------
 * Link lists
 * ---------------------------------------------------------------------- */
.dssf-footer .dssf-links {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.dssf-footer .dssf-links li {
	list-style: none !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
}

.dssf-footer .dssf-links li::before {
	content: none !important;
}

.dssf-footer .dssf-links a,
.dssf-footer .dssf-links span {
	color: var(--dssf-link) !important;
	text-decoration: none !important;
	font-size: 0.9rem !important;
	line-height: 1.4 !important;
	transition: color 0.18s ease, padding-left 0.18s ease !important;
	display: inline-block !important;
}

.dssf-footer .dssf-links a:hover,
.dssf-footer .dssf-links a:focus-visible {
	color: var(--dssf-link-hover) !important;
	padding-left: 4px !important;
	outline: none !important;
}

.dssf-footer .dssf-links a:focus-visible {
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}

/* -------------------------------------------------------------------------
 * Contact block
 * ---------------------------------------------------------------------- */
.dssf-footer .dssf-contact-list {
	margin: 0 !important;
	padding: 0 !important;
}

.dssf-footer .dssf-contact,
.dssf-footer .dssf-contact--link {
	display: block !important;
	margin: 0 0 13px !important;
	padding: 0 !important;
	text-decoration: none !important;
	color: inherit !important;
}

.dssf-footer a.dssf-contact--link {
	transition: transform 0.18s ease !important;
}

.dssf-footer a.dssf-contact--link:hover {
	transform: translateX(2px) !important;
}

.dssf-footer .dssf-contact p {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.9rem !important;
	line-height: 1.45 !important;
	color: var(--dssf-text) !important;
}

.dssf-footer .dssf-contact strong {
	display: block !important;
	color: var(--dssf-heading) !important;
	font-weight: 700 !important;
	font-size: 0.86rem !important;
	margin: 0 0 2px !important;
	letter-spacing: 0.01em !important;
}

.dssf-footer .dssf-contact-value {
	display: block !important;
	color: var(--dssf-text) !important;
}

.dssf-footer a.dssf-contact--link:hover .dssf-contact-value {
	color: var(--dssf-link-hover) !important;
}

.dssf-footer .dssf-contact-sub {
	display: inline-block !important;
	color: #8c8c8c !important;
	font-size: 0.78rem !important;
	margin-top: 2px !important;
}

/* -------------------------------------------------------------------------
 * Action buttons
 * ---------------------------------------------------------------------- */
.dssf-footer .dssf-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 18px 0 0 !important;
}

.dssf-footer .dssf-action-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 9px 16px !important;
	border-radius: 8px !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease, color 0.18s ease !important;
	border: 2px solid var(--dssf-accent) !important;
}

.dssf-footer .dssf-action-btn svg {
	width: 16px !important;
	height: 16px !important;
	display: block !important;
	fill: currentColor !important;
	flex: 0 0 auto !important;
}

.dssf-footer .dssf-action-btn--primary {
	background: var(--dssf-accent) !important;
	color: #141414 !important;
}

.dssf-footer .dssf-action-btn--primary:hover,
.dssf-footer .dssf-action-btn--primary:focus-visible {
	filter: brightness(1.08) !important;
	transform: translateY(-2px) !important;
	outline: none !important;
}

.dssf-footer .dssf-action-btn--secondary {
	background: transparent !important;
	color: var(--dssf-accent) !important;
}

.dssf-footer .dssf-action-btn--secondary:hover,
.dssf-footer .dssf-action-btn--secondary:focus-visible {
	background: var(--dssf-accent) !important;
	color: #141414 !important;
	transform: translateY(-2px) !important;
	outline: none !important;
}

.dssf-footer .dssf-action-btn:focus-visible {
	outline: 2px solid var(--dssf-link-hover) !important;
	outline-offset: 2px !important;
}

/* -------------------------------------------------------------------------
 * Bottom bar
 * ---------------------------------------------------------------------- */
.dssf-footer .dssf-bottom {
	max-width: var(--dssf-max) !important;
	margin: 0 auto !important;
	padding: 22px 24px !important;
	border-top: 1px solid var(--dssf-divider) !important;
	text-align: center !important;
}

.dssf-footer .dssf-bottom p {
	margin: 0 !important;
	padding: 0 !important;
	color: #8c8c8c !important;
	font-size: 0.82rem !important;
	line-height: 1.5 !important;
}

.dssf-footer .dssf-bottom a {
	color: var(--dssf-link) !important;
	text-decoration: none !important;
}

.dssf-footer .dssf-bottom a:hover {
	color: var(--dssf-link-hover) !important;
	text-decoration: underline !important;
}

/* -------------------------------------------------------------------------
 * Scroll reveal (progressive enhancement; gated behind .is-reveal added by JS)
 * ---------------------------------------------------------------------- */
.dssf-footer.is-reveal [data-dssf-reveal] {
	opacity: 0 !important;
	transform: translateY(16px) !important;
	transition: opacity 0.6s ease, transform 0.6s ease !important;
	will-change: opacity, transform !important;
}

.dssf-footer.is-reveal [data-dssf-reveal].is-visible {
	opacity: 1 !important;
	transform: none !important;
}

/* -------------------------------------------------------------------------
 * Mobile (<=768px) — accordion + stacking
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) {
	.dssf-footer .dssf-inner {
		padding: 40px 20px 32px !important;
		gap: 8px !important;
		flex-direction: column !important;
	}

	.dssf-footer .dssf-about {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		margin-bottom: 18px !important;
	}

	.dssf-footer .dssf-column {
		flex: 1 1 100% !important;
		min-width: 0 !important;
		width: 100% !important;
		border-top: 1px solid var(--dssf-divider) !important;
		padding: 4px 0 !important;
	}

	.dssf-footer .dssf-col-title {
		cursor: pointer !important;
		margin: 0 !important;
		padding: 16px 2px !important;
	}

	.dssf-footer .dssf-col-chevron {
		display: inline-block !important;
	}

	/* Collapsed by user action; default state is open (no flash). */
	.dssf-footer .dssf-column .dssf-collapse {
		max-height: 2000px !important;
		overflow: hidden !important;
		transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease !important;
		opacity: 1 !important;
		padding-bottom: 18px !important;
	}

	.dssf-footer .dssf-column.is-collapsed .dssf-collapse {
		max-height: 0 !important;
		opacity: 0 !important;
		padding-bottom: 0 !important;
	}

	.dssf-footer .dssf-column.is-collapsed .dssf-col-chevron {
		transform: rotate(-135deg) !important;
		margin-bottom: 0 !important;
		margin-top: 3px !important;
	}

	.dssf-footer .dssf-actions {
		margin-top: 14px !important;
	}
}

/* Very small phones — keep social row tidy. */
@media (max-width: 360px) {
	.dssf-footer .dssf-social {
		width: 34px !important;
		height: 34px !important;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.dssf-footer.is-reveal [data-dssf-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.dssf-footer .dssf-social,
	.dssf-footer .dssf-action-btn,
	.dssf-footer .dssf-links a,
	.dssf-footer .dssf-col-chevron,
	.dssf-footer .dssf-collapse {
		transition: none !important;
	}
}