/* בס״ד — Geshmak! Experiments — geshmak-contents.css */
/* DEVELOPED BY TOM GOLDSTEIN > GESHMAK! > https://geshmak.com.au/ */

/* ---------------------------------------------------------------------------
   STRUCTURAL RESETS
   Visual styling (colours, fonts, spacing, backgrounds) belongs in Atomic CSS
   classes configured in the widget panel. These rules only handle layout,
   positioning, and transitions.
---------------------------------------------------------------------------- */

.geshmak-contents__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.geshmak-contents__item-content {
	display: flex;
	align-items: center;
}

.geshmak-contents__bullet {
	display: block;
	flex-shrink: 0;
}

.geshmak-contents__bullet svg {
	display: block;
	width: 1em;
	height: 1em;
}

.geshmak-contents__link {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
   VISUALLY HIDDEN (accessible label text, e.g. on the popup trigger)
---------------------------------------------------------------------------- */

.geshmak-contents__visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   TOGGLE BUTTON (collapsible mode)
---------------------------------------------------------------------------- */

.geshmak-contents__toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: auto;
}

.geshmak-contents__icon {
	display: none;
}

.geshmak-contents__icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

.geshmak-contents__toggle.is-expanded .geshmak-contents__icon--expanded {
	display: inline-flex;
}

.geshmak-contents__toggle.is-collapsed .geshmak-contents__icon--collapsed {
	display: inline-flex;
}

/* ---------------------------------------------------------------------------
   POPUP MODE — trigger button
---------------------------------------------------------------------------- */

.geshmak-contents--popup {
	position: relative;
}

.geshmak-contents__trigger {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.geshmak-contents__trigger svg {
	display: block;
	width: 1.5em;
	height: 1.5em;
}

/* CSS-drawn hamburger fallback, shown only when no Trigger icon SVG is set. */
.geshmak-contents__trigger-icon {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 1.5em;
	height: 1.1em;
}

.geshmak-contents__trigger-icon span {
	display: block;
	height: 0.15em;
	background-color: currentColor;
	border-radius: 1px;
}

/* ---------------------------------------------------------------------------
   POPUP MODE — overlay + panel
   Positioning/z-index/visibility are marked !important: a fixed-position
   overlay/panel escaping normal document flow must not be silently overridden
   by a parent Flexbox/Grid/Div Block's own stretch or positioning defaults.
---------------------------------------------------------------------------- */

.geshmak-contents__overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9998 !important;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var( --geshmak-contents-duration, 300ms ) ease,
		visibility 0s linear var( --geshmak-contents-duration, 300ms );
}

.geshmak-contents__overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var( --geshmak-contents-duration, 300ms ) ease;
}

.geshmak-contents__panel {
	position: fixed !important;
	z-index: 9999 !important;
	visibility: hidden;
	pointer-events: none;
	overflow-y: auto;
	min-width: 260px;
	max-width: 90vw;
	transition:
		transform var( --geshmak-contents-duration, 300ms ) ease,
		opacity var( --geshmak-contents-duration, 300ms ) ease,
		visibility 0s linear var( --geshmak-contents-duration, 300ms );
}

.geshmak-contents__panel.is-open {
	visibility: visible;
	pointer-events: auto;
	transition:
		transform var( --geshmak-contents-duration, 300ms ) ease,
		opacity var( --geshmak-contents-duration, 300ms ) ease;
}

.geshmak-contents__panel[ data-contents-position="right" ] {
	top: 0;
	right: 0;
	bottom: 0;
	transform: translateX( 100% );
}
.geshmak-contents__panel[ data-contents-position="right" ].is-open {
	transform: translateX( 0 );
}

.geshmak-contents__panel[ data-contents-position="left" ] {
	top: 0;
	left: 0;
	bottom: 0;
	transform: translateX( -100% );
}
.geshmak-contents__panel[ data-contents-position="left" ].is-open {
	transform: translateX( 0 );
}

.geshmak-contents__panel[ data-contents-position="top" ] {
	top: 0;
	left: 0;
	right: 0;
	max-width: 100vw;
	transform: translateY( -100% );
}
.geshmak-contents__panel[ data-contents-position="top" ].is-open {
	transform: translateY( 0 );
}

.geshmak-contents__panel[ data-contents-position="bottom" ] {
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100vw;
	transform: translateY( 100% );
}
.geshmak-contents__panel[ data-contents-position="bottom" ].is-open {
	transform: translateY( 0 );
}

.geshmak-contents__panel[ data-contents-position="center" ] {
	top: 50%;
	left: 50%;
	max-height: 90vh;
	opacity: 0;
	transform: translate( -50%, -50% ) scale( 0.95 );
}
.geshmak-contents__panel[ data-contents-position="center" ].is-open {
	opacity: 1;
	transform: translate( -50%, -50% ) scale( 1 );
}

.geshmak-contents__close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.geshmak-contents__close svg {
	display: block;
	width: 1em;
	height: 1em;
}

/* Prevents the page from scrolling behind an open popup panel. */
body.geshmak-contents-lock-scroll {
	overflow: hidden !important;
}