@charset "utf-8";

body { padding: 0; margin: 0; font-size: 16px; }

/* header and footer heights */
.header, .footer { background: #fff; }
.header { min-height: 3.125rem; /* 3.125rem = 50px */ }
.footer { min-height: 3.125rem; }

/* content spacing */
.content-spaced { margin-bottom: 1.25rem; }
.content-spaced-lg { margin-bottom: 2.5rem; }
.remove-padding { padding: 0; }
.remove-margin { margin: 0; }

/* vertical center the content view (header + footer + content-spaced-lg) */
.align-items-center.align-vertical-center {
	min-height: calc(100% - (6.25rem + 2.5rem)); 
	min-height: calc(100vh - (6.25rem + 2.5rem)) !important;
}

/* unstyled links for clickable rows */
.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
	color: inherit;
	text-decoration: inherit;
}

/* Sticky footer: flexbox version (for mobile devices) */
body { height: 100%; overflow-y: scroll; }
.flex-grow { -webkit-flex: 2; flex: 2; }

@media only screen and (max-width: 768px) {
	.flex-grow { width: 100%; }

	/* Column count for the Föli info page */
	.card-columns {
		column-count: 1;
	}
}

/* sticky footer and header: fixed position (for display units, doesn't scroll) */
.body-sticky-padding { z-index: 0; padding-top: calc(3.125rem + 1.25rem); padding-bottom: calc(3.125rem + 1.25rem); /* header/footer height + content-spaced-lg */ }
.header-sticky { z-index: 1; position: fixed; top: 0; width: 100%; }
.footer-sticky { z-index: 1; position: fixed; bottom: 0; width: 100%; }

.body-sticky-padding .list-group-item:hover {
	z-index: 0 !important;
}

/* style scrollbar on chrome, cross browser styling/hiding is a huge pain (because of bootstrap, sticky header and footer) */
::-webkit-scrollbar {
	width: 6px;
	background-color: #BFC0C2;
}

.hide-scrollbar::-webkit-scrollbar {
	width: 0;
	visibility: hidden !important;
}

::-webkit-scrollbar-thumb {
	border-radius: 3px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #f7aa00;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 3px;
	background-color: #BFC0C2;
}

/**
 * centering of modal dialogs: https://stackoverflow.com/a/24829651/5156018
 * - this may or may not have accessibility concerns (pointer-events may not affect keyboard navigation)
 */
div.modal > .vertical-align-wrapper {
	display: table;
	height: 100%;
	width: 100%;
	pointer-events: none;
}

div.modal > .vertical-align-wrapper .vertical-align-center {
	display: table-cell;
	vertical-align: middle;
	pointer-events: none;
}

div.modal > .vertical-align-wrapper .modal-content {
	/* bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
	width:inherit;
	max-width:inherit; /* for bootstrap 4 - to avoid the modal window stretching full width */
	height:inherit;
	margin: 0 auto;
	pointer-events: all;
}

/* header and footer styles */
.header.border {
	border-width: 0 0 2px 0 !important;
}

.footer.border {
	border-width: 2px 0 0 0 !important;
}

/* bootstrap like color utilities */
.border-foli, .pagination-foli .page-link { border-color: #c48c15 !important; }
.bg-foli { background-color: #f7aa00 !important; }
.text-foli, .pagination-foli a.page-link, .pagination-foli a.page-link:hover, .pagination-foli a.page-link:focus { color: #f7aa00 !important; }
.list-group-item-foli {
	background-color: #f7aa00;
	color: #c48c15;
}

/* common interface elements (adapted from: mockups/stylesheet.css) */
body {
	background: url("../img/foli_bgpattern.png") #bfc0c2;
}

.dynamicContentHeader {
	background: url("../img/dynamic_content_placeholder.jpg");
	background-size: 100% 100%;
}

#foliLogo {
	background: url("../img/foli_logo.png");
	background-size: 100% 100%;
	min-width: 7rem;
}

.contentHeader {
	font-size: 2.5rem;
	text-transform: uppercase;
	padding: 0 0.625rem; 
}

.contentHeader h1 {
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
	font-size: 2.5rem;
}

#homeLink {
	font-size: 1.1rem;
}

.lang-en {
	background-image: url("../img/gb.svg");
}

.lang-fi {
	background-image: url("../img/fi.svg");
}

.lang-se {
	background-image: url("../img/se.svg");
}

.lang {
	background-size: cover;
	background-repeat: no-repeat;
	width: 40px;
	height: 27.5px;
}

/* home cards */
.menu-card {
	border-radius: 2rem;
}

.menu-card.bg-foli {
	color: #fff !important;
	border-color: #c48c15;
}

.menu-card > .card-header {
	border-radius: 2rem 2rem 0 0;
	padding: 0.5rem 2rem;
	font-size: 1.5rem;
	text-transform: uppercase;
	font-weight: 100;
	text-align: center;
}

.menu-card.bg-foli > .card-header {
	background-color: #c48c15;
}

.menu-card > .card-img-top,
.menu-card > .card-img-bottom {
	border-radius: 2rem 2rem 0 0;
}

.menu-card > .card-body,
.menu-card > .card-img {
	border-radius: 2rem;
}

.menu-card.bg-foli > .card-body {
	background-color: #f7aa00 !important;
}

.menu-card > .card-img-overlay {
	height: 50%;
	margin: 25% 0;
}

.menu-card > .card-img-overlay > .btn {
	-webkit-box-shadow: 2px 2px 5px 0 #0006;
	box-shadow: 2px 2px 5px 0 #0006;
}

.menu-card > .card-img-overlay > .card-title,
.menu-card > .card-img-overlay > .card-text {
	-webkit-text-shadow: 2px 2px 1px #0006;
	text-shadow: 2px 2px 1px #0006;
}

/* bootstrap like drop shadow utilities */
.text-shadow {
	-webkit-text-shadow: 2px 2px 1px #0006;
	text-shadow: 2px 2px 1px #0006;
}

.box-shadow,
.pagination-foli > li {
	-webkit-box-shadow: 2px 2px 5px 0 #0006;
	box-shadow: 2px 2px 5px 0 #0006;
}

/* this sort of works, but only centers the top of the element */
.center-vertical {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.card-img-overlay.center-vertical {
	position: absolute !important;
}

#map-canvas {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/* Föli info page cards */
.foli-card {
    border: 1px solid #f7aa00;
}

.foli-card .card-header {
    background-color: #f7aa00;
}

th .text-muted {
	font-size: 14px;
	font-style: normal;
	margin: 0;
}

/* Info page cards */
.info-card {
    height: 600px;
    background-color: #f7aa00;
    border: 1px solid #f7aa00;
    margin-bottom: 30px;
}

/* Föli application page*/
.app-card {
    border: 1px solid #f7aa00;
    margin-top: 30px;
}

.app-card .card-header {
    background-color: #f7aa00;
}

.app-image {
	margin-bottom: 25px;
	width: 100%;
}

/* larger screen layout */
@media (min-width: 768px) {
	.header { min-height: 33.63rem; /* 33.63rem = 538.5px, font-size 16 (half of the current image height) */ }
	.footer { min-height: 9.375rem; /* 150px or ca. 7.5 cm on 46'' display */ }

	/* vertical center the content view (header + footer + content-spaced-lg) */
	.align-items-center.align-vertical-center {
		min-height: calc(100% - (33.63rem + 9.375rem + 2.5rem)); 
		min-height: calc(100vh - (33.63rem + 9.375rem + 2.5rem)) !important;
	}

	/* Sticky footer and header: fixed position (for display units, doesn't scroll), demo: map mockup */
	.body-sticky-padding { padding-top: calc(33.63rem + 1.25rem); padding-bottom: calc(9.375rem + 1.25rem); /* header/footer height + content-spaced-lg */ }

	.contentHeader,
	.contentHeader h1,
	#homeLink {
		font-size: 2.5rem;
	}

	.lang {
		width: 80px;
		height: 55px;
	}

	/* Column count for the Föli info page */
	.card-columns {
		column-count: 2;
	}
}
