/* inclusive-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inclusive Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/inclusive-sans-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inclusive-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inclusive Sans';
  font-style: italic;
  font-weight: 400;
  src: url('/static/fonts/inclusive-sans-v1-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.d-nojs-none {
	display: none;
}

/* for email "at" */
.ritole {
	direction: rtl;
	unicode-bidi: bidi-override;
	text-align: left;
}

* {
	font-family: "Inclusive Sans", sans-serif;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* https://payalord.github.io/xZoom/docs/index.html#usefultips */

.xzoom-gallery {
	margin-left: 0 !important;
	margin-bottom: 0 !important;
	max-height: 6em;
}

/* toggle navbar without javascript */
input.toggler {
	display: none;
}
.close {
	display: none;
}
:is(input.toggler:checked, input.toggler:target) ~ div.collapse {
	display: block;
}
:is(input.toggler:checked, input.toggler:target) ~ .open {
	display: none;
}
:is(input.toggler:checked, input.toggler:target) ~ * .open {
	display: none;
}
:is(input.toggler:checked, input.toggler:target) ~ .close {
	display: block;
}
:is(input.toggler:checked, input.toggler:target) ~ * .close {
	display: block;
}

.nav-item.active {
	background-color: var(--bs-tertiary-bg);
	border-top: solid black 2px;
}

/* from util.html */
.selected-category {
	font-weight: bold;
}

/* footer flex-grow  */
html, body {
	height: 100%;
}
body {
	display: flex;
	flex-flow: column;
}
footer {
	flex-grow: 1;

	font-size: small;
	margin-top: 2em;
	padding: 2em 0.75em 0.75em 0.75em;
}

footer ul {
	padding-left: 0;
}

footer li {
	list-style-type: none;
	padding-bottom: 0.33em;
}

/* links */
a {
	text-decoration: none;
}

/* style all blockquotes independently from bootstrap */
blockquote {
	border-left: solid 5px var(--bs-secondary);
	font-style: italic;
	padding-left: 0.5em;
}

/* make all images responsive */
img {
	max-width: 100%;
	height: auto;
}

/* headings */
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; }

pre {
	background-color: var(--bs-tertiary-bg);
	border-radius: 0.375rem;
	padding: 0.6em 0.8em;
}

/* class d-hide-spinner for hiding plus/minus buttons */

input.d-hide-spinner::-webkit-outer-spin-button,
input.d-hide-spinner::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input.d-hide-spinner[type=number] {
	-moz-appearance: textfield;
}

/* scroll shadows */

@keyframes scroll-indicator {
	0%   { opacity: 0; }
	15%  { opacity: 1; }
	100% { opacity: 1; }
}

.scroll-shadows {
	scroll-timeline-name: --scroll-timeline;
	scroll-timeline-axis: block;
	&::before, &::after {
	content: "";
		animation-name: scroll-indicator;
		animation-timeline: --scroll-timeline;
		display: block;
		height: 1rem;
		opacity: 0;
		pointer-events: none;
		position: sticky;
		z-index: 999999;
	}
	&::before {
		background: linear-gradient(180deg, rgba(0.5, 0.5, 0.5, 0.33), transparent);
		margin-bottom: -1rem;
		top: 0;
	}
	&::after {
		animation-direction: reverse;
		background: linear-gradient(0deg, rgba(0.5, 0.5, 0.5, 0.33), transparent);
		bottom: 0;
		margin-top: -1rem;
	}
}

/* improve dark mode */
@media (prefers-color-scheme: dark) {
	/* make primary brighter */
	:root {
		--bs-primary-rgb: 56, 230, 95; /*#38e65f;*/
		--bs-link-color-rgb: 56, 230, 95; /*#38e65f;*/
	}
	/* make btn-outline-primary brighter */
	.btn-outline-primary {
		--bs-btn-color: #38e65f;
		--bs-btn-border-color: #38e65f;
		--bs-btn-focus-shadow-rgb: 56, 230, 95;
		--bs-btn-active-color: #fff;
		--bs-btn-active-bg: #38e65f;
		--bs-btn-active-border-color: #38e65f;
		--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		--bs-btn-disabled-color: #38e65f;
		--bs-btn-disabled-bg: transparent;
		--bs-btn-disabled-border-color: #38e65f;
		--bs-gradient: none;
	}
}