/* 
Bootstrap breakpoints 
---------------------
Extra small	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px
*/

:root {

	--body-bg: 240, 240, 240;           /* Фон всего окна */
	--content-bg: 255, 255, 255;        /* Фон зоны контента */
	--font-color: 70, 70, 70;           /* Шрифт  */
	--font-color-inv: 255, 255, 255;    /* Шрифт (инверсия) */
	--links: 100, 140, 30;              /* Цвет ссылок */

	--color1: 130, 170, 60;       /* 1 Цвет (основной) */
	--color1-ui: 110, 150, 40;    /* 1 Цвет (линии, :hover...) */
	--color2: 250, 220, 120;      /* 2 Цвет (акцедентный) */
	--color2-ui: 255, 195, 45;    /* 2 Цвет (элементы UI) */
	
	/* Bootstrap override */
	--bs-body-font-size: 1.15rem;
	--bs-body-line-height: 1.5rem;
	--bs-form-control-bg: rgb(var(--content-bg));	
	--primary: rgb(var(--color1));
	--secondary: rgb(var(--color2));
	--bs-label-font-weight: 400;
}

:active, :focus, .btn { outline: 0 !important; box-shadow: 0 0 0 0 !important}

h1, .h1, h2, .h2, h3, .h3 {font-weight:400}
h1, .h1 {font-size:2rem; line-height:2rem; color:rgb(var(--color1)) }
h2, .h2 {font-size:1.5rem; line-height:1.5rem; color:rgb(var(--color1-ui)) }
h3, .h3 {font-size:1.25rem; line-height:1.25rem; }

a { color:rgb(var(--links)); text-underline-offset: 4px }
a:hover { color:rgb(var(--font-color)) }
a.no-link { opacity:.5 }

b {font-weight:500;}
.small {line-height:1rem}

.col-12 p:last-child { margin-bottom:0}


body { background-color:rgb(var(--body-bg)) }
.container {background-color:rgb(var(--content-bg));}
    @media (min-width: 1200px) {
        .container {max-width:1200px;}
    }

header { border-radius: .5rem .5rem 0 0; display:flex; flex-direction: row; justify-content:space-between; align-items: center;}
header .logo { flex-basis:35%; text-align:left}
header .logo img { width:100%; max-height:70px }
  
header .title { font-size:1.25rem; margin-bottom:0.5rem; padding:0 1.5rem;}
header .social {flex-basis:25%}
header .social a {margin:0 .35rem}
header .contacts { flex-basis:20%; font-size:1.25rem; text-align: right;} 
header .contacts a {text-decoration:none;}

    @media (max-width: 768px) {
        header {border-radius:0; padding:.5rem 0; flex-direction: column; justify-content:center;}
		header div {text-align:center}
		header .title {order:-1; font-size:1.1rem; line-height:1.25rem}
    }
	@media (max-width: 992px) {
	    header {flex-wrap: wrap}
        header .title {order:-1; flex-basis:100%; font-size: 1.1rem; text-align:center;}
        header .logo {flex-basis:40%}
		header .contacts {flex-basis:50%}
    }
	@media (max-width: 1200px) {
		header .logo {flex-basis:40%}
        header .contacts {flex-basis:30%}
    }

footer { border-radius: 0 0 .5rem .5rem}
    footer.container { background-color:rgb(var(--color1)); color:rgb(var(--font-color-inv)); text-align:center;}
    footer.container a { color:var(--base-main);}
    @media (max-width: 768px) {
        footer {border-radius:0}
    }

	
.img-top {background-color:rgba(var(--color2-ui), .5); overflow:hidden; width:100% }
.img-top img {aspect-ratio:3}
    @media (max-width: 576px) { .img-top img {aspect-ratio:.75} }

.frame { border: 2px dashed rgb(var(--color1-ui)); padding:.75rem 1rem; border-radius: .5rem }
.note { padding:.75rem 1rem; border-radius: .5rem; background-color:rgba(var(--color2), .25) }

.invalid { font-size:.9rem; line-height:1rem; color: #c00 } /* Ошибки в формах */

.breadcrumbs { background-color:rgb(var(--content-bg)) }
.breadcrumb { margin:0; padding:.5rem 1.5rem; background-color:rgba(var(--color1), .1)}
	@media (max-width: 992px) { .breadcrumb {padding:.5rem 1rem;} }
.breadcrumb a {text-decoration:none }
.breadcrumb li {opacity:.75 }
.breadcrumbs .separ {width:16px; height:16px; position:relative; margin:0 .5rem;}
.breadcrumbs i, .breadcrumbs i::after {position:absolute; width:9px; height:2px; background: rgba(var(--color1), .75); content: ""}
.breadcrumbs i {transform: rotate(45deg); top:8px; left:5px}
.breadcrumbs i::after {transform: rotate(-90deg); left:5px; top:4px;}

/* Theme switcher (светлая/тёмная тема BS6: data-bs-theme) */
.theme-switcher {position:fixed; top:0.625rem; right:0.625rem; width:1.5rem; height:1.5rem; z-index:1500;
	cursor:pointer; color:rgb(var(--font-color)); opacity:.65; transition:opacity .2s}
.theme-switcher:hover {opacity:1}
/* контраст: полый круг, закрашена нужная половина */
.theme-switcher i {position:absolute; top:0.25rem; left:0.25rem; width:1rem; height:1rem; border-radius:50%;
	display:block; border:2px solid currentcolor;
	background:linear-gradient(90deg, transparent 50%, currentcolor 50%)}
/* в тёмной теме закрашена противоположная половина */
.theme-switcher.theme-dark i {background:linear-gradient(270deg, transparent 50%, currentcolor 50%)}

/* Тёмная тема BS6 (data-bs-theme="dark"): перекрытие переменных сборки.
   Инлайновый :root с палитрой стоит в <head> ДО common.css —
   поэтому атрибутный селектор ниже гарантированно побеждает. */
[data-bs-theme="dark"] {
	--body-bg: 24, 26, 27;
	--content-bg: 33, 37, 41;
	--font-color: 222, 226, 230;
	--links: 158, 200, 80;
	--color1: 110, 145, 50;
	--color1-ui: 95, 128, 44;
	--color2: 250, 220, 120;
	--color2-ui: 255, 195, 45;
}