/* 
 * ============================================================
 * 1. Базовые стили для body
 * ============================================================
 */
body {
    margin: 0 auto;
    width: 80%;
    max-width: 1000px;
    padding: 20px 0;
    display: block;
    font-family: Segoe UI, Roboto, system-ui,Tahoma, Arial, Ubuntu, Helvetica, sans-serif;
	line-height: 1.5em;
}

menu {
	padding-left: 0px;
	background: #e2e8f0;
	padding: 10px;
}

menu a {
	display:inline-block;
	margin-left:20px;
	text-decoration:none;
	color:rgba(0,0,0,.9)!important;
	font-size:20px;
}
.mmb {
	display:none;
}

/* 
 * ============================================================
 * 2. Контейнер для main и aside
 * ============================================================
 */
.wrapper {
    display: block;
    position:relative;
}

@supports (display: flex) {
    .wrapper {
        display: flex;
        /* Убираем wrap, чтобы элементы не переносились */
        flex-wrap: nowrap;
        gap: 20px;
        /* Для старых flex-браузеров, которые не понимают gap */
        margin: 0 -10px;
    }
}


main {
    display: block;
    width: 100%;
}

@supports (display: flex) {
    main {
        /* Занимает 80% свободного места */
        flex: 8 1 0;
        width: auto;
        padding: 0 10px;
        box-sizing: border-box;
        /* Минимальная ширина для читаемости */
        min-width: 0;
    }
}

/*
 * ============================================================
 * 4. Стили для aside
 * ============================================================
 */
aside {
    display: block;
    width: 100%;
    margin-top: 20px;
}

@supports (display: flex) {
    aside {
        /* Занимает 20% свободного места, но не более 320px */
        flex: 2 1 0;
        max-width: 320px;
        width: auto;
        margin-top: 0;
        padding: 0 10px;
        box-sizing: border-box;
    }
}

/*
 * ============================================================
 * 5. Медиазапрос для мобильных устройств
 * ============================================================
 */
@media screen and (max-width: 768px) {
    @supports (display: flex) {
        .wrapper {
            flex-wrap: wrap;
            flex-direction: column;
            /* Убираем gap на мобильных, чтобы управлять отступами вручную */
            gap: 0;
            margin: 0;
        }
        
        main {
            flex: 1 1 auto;
            width: 100%;
            padding: 0;
        }
        
        aside {
            flex: 1 1 auto;
            width: 100%;
            max-width: 100%;
            min-width: auto;
            margin-top: 20px;
            padding: 0;
        }
    }
    
    menu a {
		margin-left: 69px;
		width: 80%;
		height: 0;
		opacity: 0;
		max-height: 0;
		overflow: hidden;
		transform: translateY(-10px);
		transition: all 0.4s ease;
		display: none;
	}
	menu.o a {
		height: 48px;
		line-height: 48px;
		opacity: 1;
		max-height: 100px;
		transform: translateY(0);
		vertical-align: top;
	}
	.af {
		width: 65%;
		margin-left: 15px;
		display: inline-block;
		line-height: 37px;
		opacity: 1;
		height: 48px;
		max-height: 37px;
		vertical-align: mathematical;
	}
	.mmb {
		display: inline-block;
		border: #5695c2 solid 1px;
		border-radius: 10px;
		padding: 2px 10px;
		width: 25px;
		height: 37px;
		/*vertical-align:middle;*/
	}
	.mmb hr {
		color: #5695c2;
		
	}
}

/*
 * ============================================================
 * 6. Дополнительные стили для красоты (опционально)
 * ============================================================
 */
/* Для наглядности (уберите в реальном проекте) */
main {
    background: #f0f4f8;
    padding: 20px;
    border-radius: 8px;
}

aside {
    background: #e2e8f0;
    padding: 20px;
    border-radius: 8px;
}

aside img{
	max-width:100%;
}
aside ul li, aside ul{
	list-style-type:none;
	padding:0;
	margin:0;
	color:#212529;
	text-align:center;
}

aside ul li ul li {
	border-top:1px solid #83b9ff;
	padding-top:10px;
}

aside a, aside p, aside img{
	text-decoration:none;
	display:inline-block;
}

/* Класс для кнопки CTA */
.button {
    display: inline-block;
    background: #2d3748;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
}
.button:hover {
    background: #1a202c;
}

a, a:visited {
	color:#007bff;
}

a.button {
	color:#FFF;
}

footer {
  background: gray;
  color: #FFF;
  min-height: 100px;
  padding: 10px 0px;
  text-align: justify;
  margin-top: 20px;
}
footer ul li a, footer span{
	color: #FFF;
	word-break: break-all;
	overflow-wrap: break-word;
	font-size: 10px;
}
footer ul li a:visited{
	color: #FFF;
}

footer ul li{
  display: inline-block;
  max-width: 110px;
  margin: 25px 10px 11px 10px;
  vertical-align: top;
}
footer ul{
	margin: 0;
	padding: 0;
}

.cb label {
	font-size:12px;
}