/* ===================================================================
   EL-Salonki oma grid- ja apuluokkakirjasto
   Korvaa Bootstrap 3.3.7:n CDN-riippuvuuden. Toteuttaa VAIN ne luokat,
   joita teeman tiedostot oikeasti käyttävät, samoilla breakpointeilla
   ja samalla käytöksellä kuin Bootstrap 3 (xs<768, sm>=768, md>=992, lg>=1200).
   Lisätty 13.8.2026 modernisoinnin vaiheessa 5 (Bootstrapista luopuminen).
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Bootstrapin perus-"reboot"-saannot, joita teema kayttaa ilman erillista
   luokkaa (linkkien lepotilan alleviivauksen poisto). Lisatty 13.8.2026,
   koska style2022.css poistaa alleviivauksen vain hover/focus/active-tiloissa
   ja nojasi Bootstrapin omaan pohjatyyliin lepotilassa. */
a {
	text-decoration: none;
}

/* Bootstrap 3.3.7 asetti html-elementille font-size: 10px perustaksi.
   Teeman oma CSS kayttaa laajasti em-yksikoita (esim. body font-size: 1.5em)
   tama pohjan varaan. Ilman tata koko sivuston em-pohjainen tekstikoko
   kasvaa n. 60 % (16px selaimen oletus vs. 10px). Lisatty 13.8.2026. */
html {
	font-size: 10px;
}

/* Bootstrap nollasi body-elementin selaimen oletusmarginaalin (~8px).
   Ilman tata koko sivu (myos #header) valahtaa 8px reunoista sisaanpain,
   mika voi nakya ylimaaraisena rakona/viivana yla- ja sivureunoissa.
   Lisatty 13.8.2026. */
body {
	margin: 0;
}

/* --- Container --- */
.container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* --- Row & clearfix --- */
.row, .row-fluid {
	margin-left: -15px;
	margin-right: -15px;
}
.row::before, .row::after,
.clearfix::before, .clearfix::after {
	content: " ";
	display: table;
}
.row::after, .clearfix::after { clear: both; }

/* --- Sarakkeiden yhteiset ominaisuudet --- */
[class^="col-"], [class*=" col-"] {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}

.col-12 { width: 100%; }

/* --- xs: voimassa aina (myös alle 768px) --- */
.col-xs-1 { float: left; width: 8.33333333%; }
.col-xs-2 { float: left; width: 16.66666667%; }
.col-xs-3 { float: left; width: 25%; }
.col-xs-4 { float: left; width: 33.33333333%; }
.col-xs-5 { float: left; width: 41.66666667%; }
.col-xs-6 { float: left; width: 50%; }
.col-xs-7 { float: left; width: 58.33333333%; }
.col-xs-8 { float: left; width: 66.66666667%; }
.col-xs-9 { float: left; width: 75%; }
.col-xs-10 { float: left; width: 83.33333333%; }
.col-xs-11 { float: left; width: 91.66666667%; }
.col-xs-12 { float: left; width: 100%; }

/* --- sm: >=768px --- */
@media (min-width: 768px) {
	.col-sm-1 { float: left; width: 8.33333333%; }
	.col-sm-2 { float: left; width: 16.66666667%; }
	.col-sm-3 { float: left; width: 25%; }
	.col-sm-4 { float: left; width: 33.33333333%; }
	.col-sm-5 { float: left; width: 41.66666667%; }
	.col-sm-6 { float: left; width: 50%; }
	.col-sm-7 { float: left; width: 58.33333333%; }
	.col-sm-8 { float: left; width: 66.66666667%; }
	.col-sm-9 { float: left; width: 75%; }
	.col-sm-10 { float: left; width: 83.33333333%; }
	.col-sm-11 { float: left; width: 91.66666667%; }
	.col-sm-12 { float: left; width: 100%; }
}

/* --- md: >=992px --- */
@media (min-width: 992px) {
	.col-md-1 { float: left; width: 8.33333333%; }
	.col-md-2 { float: left; width: 16.66666667%; }
	.col-md-3 { float: left; width: 25%; }
	.col-md-4 { float: left; width: 33.33333333%; }
	.col-md-5 { float: left; width: 41.66666667%; }
	.col-md-6 { float: left; width: 50%; }
	.col-md-7 { float: left; width: 58.33333333%; }
	.col-md-8 { float: left; width: 66.66666667%; }
	.col-md-9 { float: left; width: 75%; }
	.col-md-10 { float: left; width: 83.33333333%; }
	.col-md-11 { float: left; width: 91.66666667%; }
	.col-md-12 { float: left; width: 100%; }
}

/* --- lg: >=1200px --- */
@media (min-width: 1200px) {
	.col-lg-1 { float: left; width: 8.33333333%; }
	.col-lg-2 { float: left; width: 16.66666667%; }
	.col-lg-3 { float: left; width: 25%; }
	.col-lg-4 { float: left; width: 33.33333333%; }
	.col-lg-5 { float: left; width: 41.66666667%; }
	.col-lg-6 { float: left; width: 50%; }
	.col-lg-7 { float: left; width: 58.33333333%; }
	.col-lg-8 { float: left; width: 66.66666667%; }
	.col-lg-9 { float: left; width: 75%; }
	.col-lg-10 { float: left; width: 83.33333333%; }
	.col-lg-11 { float: left; width: 91.66666667%; }
	.col-lg-12 { float: left; width: 100%; }
}


/* ===================================================================
   Yleiset apuluokat (Bootstrap 3 -yhteensopivat)
   =================================================================== */

.text-center     { text-align: center; }
.text-uppercase  { text-transform: uppercase; }
.pull-right      { float: right !important; }
.pull-left       { float: left !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;
}

.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
	border-color: #66afe9;
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

/* --- Responsiiviset näkyvyysluokat --- */
@media (max-width: 767px) {
	.hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
	.hidden-lg { display: none !important; }
}

.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 767px) {
	.visible-xs { display: block !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.visible-sm { display: block !important; }
}

/* ===================================================================
   Navbar + Collapse (Bootstrap 3.3.7:n alkuperäiset säännöt niille
   luokille, joita teema oikeasti käyttää: navbar, navbar-header,
   navbar-brand, navbar-nav, navbar-toggle, navbar-collapse, navbar-form,
   collapse/in, icon-bar). Säilyttää täsmälleen saman käytöksen kuin
   Bootstrapilla oli, jotta mobiilivalikko toimii identtisesti.
   =================================================================== */

.navbar {
	position: relative;
	min-height: 50px;
	margin-bottom: 20px;
	border: 1px solid transparent;
}
@media (min-width: 768px) {
	.navbar { border-radius: 4px; }
}

.navbar-header::before, .navbar-header::after {
	content: " ";
	display: table;
}
.navbar-header::after { clear: both; }
@media (min-width: 768px) {
	.navbar-header { float: left; }
}

.navbar-brand {
	float: left;
	height: 50px;
	padding: 15px;
	font-size: 18px;
	line-height: 20px;
}
@media (min-width: 768px) {
	.navbar > .container .navbar-brand { margin-left: 0; }
}

.navbar-toggle {
	position: relative;
	float: right;
	margin-right: 15px;
	padding: 9px 10px;
	margin-top: 8px;
	margin-bottom: 8px;
	background-color: transparent;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
}
.navbar-toggle:focus { outline: 0; }
@media (min-width: 768px) {
	.navbar-toggle { display: none; }
}

.icon-bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background-color: #888;
}
.icon-bar + .icon-bar { margin-top: 4px; }

.navbar-nav {
	margin: 7.5px -15px;
}
.navbar-nav > li { float: none; }
.navbar-nav > li > a {
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 20px;
}
@media (min-width: 768px) {
	.navbar-nav { float: left; margin: 0; }
	.navbar-nav > li { float: left; }
}

.navbar-form {
	margin: 0 -15px;
	padding: 10px 15px;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
}
@media (min-width: 768px) {
	.navbar-form {
		width: auto;
		border: 0;
		margin-left: 0;
		margin-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		box-shadow: none;
	}
}

/* --- Collapse: piilotus/näyttö + JS:n vaihtama .in-luokka --- */
.collapse {
	display: none;
}
.collapse.in { display: block; }

.navbar-collapse {
	overflow-x: hidden;
	padding-right: 15px;
	padding-left: 15px;
	border-top: 1px solid transparent;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
	-webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
	.navbar-collapse {
		width: auto;
		border-top: 0;
		box-shadow: none;
	}
	.navbar-collapse.collapse {
		display: block !important;
		height: auto !important;
		padding-bottom: 0;
		overflow: visible !important;
	}
}
@media (max-width: 767px) {
	.navbar-collapse.collapse { display: none !important; }
	.navbar-collapse.in { display: block !important; }
}