/*!
 * Satyrychetska theme for Typesetter CMS - Bootstrap 5.3 + Simplex look
 * Plain CSS, no build step. Loaded after bootstrap.min.css, before core/addon CSS
 * and the Layout Editor's custom.css.
 */

/* Josefin Sans (SIL Open Font License 1.1, see ../fonts/josefin-sans/OFL.txt), self-hosted
   woff2 subsets from @fontsource/josefin-sans 5.3.0 */
@font-face {
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/josefin-sans/josefin-sans-latin-ext-400-normal.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/josefin-sans/josefin-sans-latin-400-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/josefin-sans/josefin-sans-latin-ext-700-normal.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/josefin-sans/josefin-sans-latin-700-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ------------------------------------------------------------------
 * 1. Palette and Bootstrap variables (Simplex, WCAG-adjusted colours)
 * ------------------------------------------------------------------ */
:root,
[data-bs-theme=light] {
	--sr-primary: #3f7385;          /* links, .btn-info (5.25:1 on #fff) */
	--sr-primary-dark: #294b57;     /* link hover */
	--sr-success: #348000;
	--sr-body-bg: #f7f7f7;
	--sr-text: #333;
	--sr-footer-bg: #444;
	--sr-footer-link: #9cc0cc;      /* 5.02:1 on #444 */
	--sr-heading-font: 'Josefin Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	--bs-primary: #3f7385;
	--bs-primary-rgb: 63, 115, 133;
	--bs-info: #3f7385;
	--bs-info-rgb: 63, 115, 133;
	--bs-success: #348000;
	--bs-success-rgb: 52, 128, 0;
	--bs-body-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--bs-body-font-size: 1rem;      /* custom.css: body{font-size:16px} */
	--bs-body-line-height: 1.428571429;
	--bs-body-color: #333;
	--bs-body-color-rgb: 51, 51, 51;
	--bs-body-bg: #f7f7f7;
	--bs-body-bg-rgb: 247, 247, 247;
	--bs-emphasis-color: #333;
	--bs-heading-color: inherit;
	--bs-link-color: #3f7385;
	--bs-link-color-rgb: 63, 115, 133;
	--bs-link-hover-color: #294b57;
	--bs-link-hover-color-rgb: 41, 75, 87;
	--bs-link-decoration: none;
	--bs-border-color: #ddd;
	--bs-border-radius: 4px;
	--bs-focus-ring-color: rgba(63, 115, 133, .35);
}


/* ------------------------------------------------------------------
 * 2. Base typography (Bootstrap 3 / Simplex metrics)
 * ------------------------------------------------------------------ */
body {
	display: flex;               /* sticky footer */
	flex-direction: column;
	min-height: 100vh;
	padding-top: 50px;           /* fixed navbar */
	font-size: 16px;
	line-height: 1.428571429;
	color: var(--sr-text);
	background-color: var(--sr-body-bg);
}

a {
	color: var(--sr-primary);
	text-decoration: none;
}
a:hover,
a:focus {
	color: var(--sr-primary-dark);
	text-decoration: underline;
}

p {
	margin: 0 0 9px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--sr-heading-font);
	font-weight: 400;
	line-height: 1.1;
	color: inherit;
}
h1, .h1, h2, .h2, h3, .h3 {
	margin-top: 18px;
	margin-bottom: 9px;
}
h4, .h4, h5, .h5, h6, .h6 {
	margin-top: 9px;
	margin-bottom: 9px;
}
h1, .h1 { font-size: 33px; }
h2, .h2 { font-size: 27px; }
h3, .h3 { font-size: 22px; }
h4, .h4 { font-size: 17px; }
h5, .h5 { font-size: 13px; }
h6, .h6 { font-size: 12px; }

ul, ol {
	margin-top: 0;
	margin-bottom: 9px;
}
hr {
	margin: 18px 0;
	border: 0;
	border-top: 1px solid #ddd;
	opacity: 1;
}
small, .small {
	font-size: 85%;
}
code {
	font-size: 80%;
}
img {
	max-width: 100%;
	height: auto;
}

/* Bootstrap 3 container widths (content layout identical to the old theme) */
.container {
	--bs-gutter-x: 30px;
	max-width: none;
}
@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }


/* ------------------------------------------------------------------
 * 3. Accessibility
 * ------------------------------------------------------------------ */
.skip-link.visually-hidden-focusable:focus,
.skip-link.visually-hidden-focusable:active {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 2000;               /* above .fixed-top (1030) */
	width: auto !important;
	height: auto !important;
	padding: 10px 16px !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal;
	background-color: #fff;
	color: var(--sr-primary);
	border: 2px solid var(--sr-primary);
	font-weight: bold;
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.navbar-toggler:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--sr-primary);
	outline-offset: 2px;
	box-shadow: none;
}
.navbar-toggler:focus {
	box-shadow: none;
}

/* the fixed navbar must not cover the target of the skip link */
#main-content {
	scroll-margin-top: 60px;
}
#main-content:focus {
	outline: none;
}


/* ------------------------------------------------------------------
 * 4. Navbar (Simplex "navbar-default": white, thin grey border)
 * ------------------------------------------------------------------ */
.site-navbar {
	--bs-navbar-padding-y: 0;
	--bs-navbar-color: #333;
	--bs-navbar-hover-color: var(--sr-primary);
	--bs-navbar-active-color: var(--sr-primary);
	--bs-navbar-brand-color: #333;
	--bs-navbar-brand-hover-color: var(--sr-primary);
	--bs-navbar-nav-link-padding-x: 15px;
	--bs-navbar-toggler-padding-y: 9px;
	--bs-navbar-toggler-padding-x: 10px;
	--bs-navbar-toggler-border-color: #ddd;
	--bs-navbar-toggler-border-radius: 4px;
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23888' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	min-height: 41px;
	background-color: #fff;
	border-bottom: 1px solid #dfdfdf;
	font-family: var(--sr-heading-font);
}
.site-navbar > .container {
	flex-wrap: wrap;
}
.site-navbar .navbar-brand {
	padding: 14px 15px 8px;
	margin: 0 0 0 -15px;
	font-size: 17px;
	line-height: 18px;
	height: 40px;
	color: #333;
}
.site-navbar .navbar-brand:hover,
.site-navbar .navbar-brand:focus {
	color: var(--sr-primary);
	text-decoration: none;
}
.site-navbar .navbar-nav .nav-link {
	padding: 13px 15px 9px;
	font-size: 16px;
	line-height: 18px;
	color: #333;
}
.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .nav-link:focus {
	color: var(--sr-primary);
	background-color: transparent;
	text-decoration: none;
}
.site-navbar .navbar-nav .nav-link.active,
.site-navbar .navbar-nav .show > .nav-link {
	color: var(--sr-primary);
	background-color: transparent;
}
.site-navbar .navbar-toggler {
	margin: 3px 0 3px auto;
	padding: 5px 10px;
}
.site-navbar .navbar-toggler:hover,
.site-navbar .navbar-toggler:focus {
	background-color: #ddd;
}
.site-navbar .navbar-toggler-icon {
	width: 22px;
	height: 22px;
}

/* dropdown (BS3 look) */
.site-navbar .dropdown-menu {
	--bs-dropdown-font-size: 13px;
	--bs-dropdown-border-color: rgba(0, 0, 0, .15);
	--bs-dropdown-border-radius: 4px;
	--bs-dropdown-padding-y: 5px;
	--bs-dropdown-spacer: 0;
	--bs-dropdown-link-color: #333;
	--bs-dropdown-link-hover-color: #fff;
	--bs-dropdown-link-hover-bg: #3f7385;
	--bs-dropdown-link-active-color: #fff;
	--bs-dropdown-link-active-bg: #3f7385;
	--bs-dropdown-item-padding-x: 20px;
	--bs-dropdown-item-padding-y: 3px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, .176);
	font-family: var(--sr-heading-font);
	min-width: 160px;
}
.site-navbar .dropdown-item {
	line-height: 1.428571429;
}
.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus {
	text-decoration: none;
}
@media (min-width: 768px) {
	.site-navbar .navbar-collapse {
		justify-content: space-between;
	}
	.site-navbar .dropdown-menu {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		margin-top: 0;
	}
}
@media (max-width: 767.98px) {
	.site-navbar .navbar-collapse {
		margin: 0 -15px;
		padding: 0 15px;
		border-top: 1px solid #e7e7e7;
		max-height: calc(100vh - 41px);
		overflow-y: auto;
	}
	.site-navbar .navbar-nav {
		margin: 7.5px -15px;
	}
	.site-navbar .navbar-nav .nav-link {
		padding: 10px 15px;
		line-height: 20px;
	}
	.site-navbar .dropdown-menu {
		box-shadow: none;
		border: 0;
		background-color: transparent;
		padding: 0;
	}
	.site-navbar .dropdown-item {
		padding: 5px 15px 5px 25px;
		line-height: 20px;
		color: #333;
		font-size: 16px;
	}
	.site-navbar .dropdown-item:hover,
	.site-navbar .dropdown-item:focus,
	.site-navbar .dropdown-item.active {
		color: var(--sr-primary);
		background-color: transparent;
	}
}

/* Typesetter: editable areas inside the navbar */
.site-navbar .GPAREA {
	display: inline;
}
.site-navbar div.GPAREA:after {
	display: none;
}


/* ------------------------------------------------------------------
 * 5. Layout: content and sticky footer
 * ------------------------------------------------------------------ */
.site-main {
	flex: 1 0 auto;
	padding-top: 20px;
	padding-bottom: 0;
}

.site-footer {
	flex-shrink: 0;
	min-height: 60px;
	margin: 0;
	background-color: var(--sr-footer-bg);   /* custom.css: #footer > .container{background-color:@panel-footer-bg} */
}
.site-footer > .container {
	background-color: var(--sr-footer-bg);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}
.site-footer .footer-nav {
	margin: 20px 0 0;
}
.site-footer .nav {
	flex-direction: column;
	margin: 0 -15px;
}
.site-footer .nav-link {
	padding: 10px 15px;
	line-height: 20px;
	font-size: 16px;
}
@media (min-width: 768px) {
	.site-footer .nav {
		flex-direction: row;
	}
	.site-footer .nav-link {
		padding: 13px 15px 9px;
		line-height: 18px;
	}
}
.site-footer a {
	color: var(--sr-footer-link);
}
.site-footer a:hover,
.site-footer a:focus {
	color: #fff;
	background-color: transparent;
	text-decoration: underline;
}
.site-footer a:focus-visible {
	outline-color: var(--sr-footer-link);
}
.site-footer span {
	padding-right: 10px;
}
.site-footer .footer-admin {
	margin: 20px 0 0;
}


/* ------------------------------------------------------------------
 * 6. Buttons and forms (Simplex)
 * ------------------------------------------------------------------ */
.btn {
	font-family: var(--sr-heading-font);
	font-size: 13px;
	line-height: 1.538461538;
	border-radius: 4px;
	padding: 6px 12px;
}
.btn-info {
	/* custom.css: .btn-info,.btn-info:hover{padding:8px 12px 6px 12px} */
	--bs-btn-color: #fff;
	--bs-btn-bg: #3f7385;
	--bs-btn-border-color: #2f5562;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #386777;
	--bs-btn-hover-border-color: #2f5562;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #386777;
	--bs-btn-active-border-color: #2f5562;
	margin: 3px;
	padding: 8px 12px 6px;
	color: #fff;
	background-image: linear-gradient(#5e9db3, #3f7385 6%, #386777);
	background-repeat: no-repeat;
	border: 1px solid #2f5562;
}
.btn-info:hover,
.btn-info:focus {
	color: #fff;
	padding: 8px 12px 6px;
	background-image: linear-gradient(#518ea4, #386777 6%, #315a69);
	text-decoration: none;
}
.btn-success,
input.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-bg: #348000;
	--bs-btn-border-color: #2a6600;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #2b6b00;
	--bs-btn-hover-border-color: #225500;
	color: #fff;
	background-image: linear-gradient(#4aa60b, #348000 6%, #2e7300);
	background-repeat: no-repeat;
	border: 1px solid #2a6600;
}
.btn-default {
	--bs-btn-color: #fff;
	--bs-btn-bg: #474949;
	--bs-btn-border-color: #2e2f2f;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #3a3c3c;
	--bs-btn-hover-border-color: #2e2f2f;
	background-image: linear-gradient(#5d6060, #474949 6%, #3a3c3c);
	background-repeat: no-repeat;
}
/* buttons inside headings keep the heading's size rhythm */
h1 .btn, h2 .btn, h3 .btn, h4 .btn {
	vertical-align: baseline;
}

.form-control {
	font-size: 13px;
	line-height: 1.428571429;
	color: #333;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	min-height: 36px;
	padding: 6px 12px;
}
.form-control:focus {
	color: #333;
	background-color: #fff;
}
.form-control:focus {
	border-color: #3f7385;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(63, 115, 133, .6);
}
label {
	font-weight: 700;
	margin-bottom: 5px;
}


/* ------------------------------------------------------------------
 * 7. Bootstrap 3 compatibility (classes that may appear in page content)
 * ------------------------------------------------------------------ */
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-rounded { border-radius: 6px; }
.img-circle { border-radius: 50%; }
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
	position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
}
.caret {
	display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle;
	border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent;
}
.btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.btn-lg { padding: 10px 16px; font-size: 17px; line-height: 1.33; border-radius: 6px; }
.btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.panel { margin-bottom: 18px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid #ddd; }
.panel-body { padding: 15px; }
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; }
.col-xs-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-xs-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3 { flex: 0 0 auto; width: 25%; }
.col-xs-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-6 { flex: 0 0 auto; width: 50%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 767.98px) { .visible-xs { display: block !important; } .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .visible-sm { display: block !important; } .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .visible-md { display: block !important; } .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .visible-lg { display: block !important; } .hidden-lg { display: none !important; } }


/* ------------------------------------------------------------------
 * 8. Typesetter content
 * ------------------------------------------------------------------ */
/* embedded maps/videos must not cause horizontal scrolling on phones */
#gpx_content iframe {
	max-width: 100%;
}