/*
Theme Name: Starter Theme
Description: Minimal theme for learning WordPress step by step.
Version: 0.1.2
Text Domain: starter-theme
*/

body {
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	padding: 0;
	overflow-x: clip;
	display: flex;
	flex-direction: column;
	font-family: "Inter", Arial, sans-serif;
	color: #111;
	background: #fff;
}

.site-template-part,
.site-footer {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.site-template-part {
	position: relative;
	z-index: 2;
}

.site-footer {
	flex-shrink: 0;
}

.site-header__page-container{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	flex: 1;
	margin-top: -10%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

@media (max-width: 900px) {
	.site-header__page-container{
		margin-top: -8%;
	}
}


.site-header__page-text {
	width: max-content;
	max-width: calc(100% - 40px);
	margin: 0;
	color: #fff;
	font-size: clamp(24px, 2vw, 50px);
	font-weight: 400;
	line-height: 1.25;
}

@media (max-width: 1199px) {
	.site-header__page-text {
		font-weight: 300;
	}
	.site-header__page-container{
		align-items: center;
	}
}
.site-header {
	display: flex;
	flex-direction: column;
	position: relative;
	border-bottom: 1px solid #ddd;
	width: 100%;
	min-height: 298px;

	background-image: url("./assets/background.png");
	background-repeat: no-repeat;

	background-size: cover;
	background-position: 50% 20%;

	.header-background-container{
		position: absolute;
		z-index: 0;
		opacity: .75;
		width: 100%;
		height: 100%;
		position: absolute;
		background: linear-gradient(
			175deg, #787878 7%, #434343 23%, #000000 53%
		);
	}
	.header-nav-block{
		padding: 20px;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		justify-content: center;

	
		.header-contrainer {
			width: 100%;
			max-width: 1320px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

}


/* Большие мониторы */
.site-header {
    min-height: 1200px;
    background-size: cover;
    background-position: center 50%;
}

@media (max-width: 2000px) {
    .site-header {
        min-height: 550px;
        background-position: center 50%;
    }
}

@media (max-width: 1500px) {
    .site-header {
        min-height: 500px;
        background-position: center 50%;
    }
}

/* Ноутбуки и планшеты */
@media (max-width: 1200px) {
    .site-header {
        min-height: 400px;
        background-position: 50% 50%;
    }
}

/* Планшеты */
@media (max-width: 768px) {
    .site-header {
        min-height: 298px;
		height: 298px;
        background-position: center 29%;
		background-size: auto 147%;
    }
}

/* Телефоны */
@media (max-width: 480px) {
    .site-header {
        min-height: 280px;
		max-height: 298px;
        background-position: 50% 29%;
		background-size: auto 130%;
		height: 298px;
    }
}

@media (max-width: 300px) {
    .site-header {
        
		height: 260px;
		max-height: 260px;
		background-size: auto 120%;
		background-position: 50% 20%;
    }
}

.site-template-part--header .header-nav-block > .wp-block-group__inner-container {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
}

.site-template-part--header .header-contrainer > .wp-block-group__inner-container {
	width: 100%;
}

.site-template-part--header .header-logo-block {
	margin-right: 0;
	margin-left: 0;
}
.header-logo-block{
	position: relative;
	z-index: 2;
	display: flex;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.header-logo,
#header-logo{
	width: 64px;
	max-width: 64px;
}

.header-logo {
	margin: 0;
}

.header-logo img {
	display: block;
}

.header-text{
	display: flex;
	flex-direction: column;
	justify-content: center;

	.platform-name{
		font-family: "Inter";
		font-weight: 600;
		font-size: 16px;
		color: #fff;

	}

	.autor-name{
		font-family: "Inter";
		font-weight: 400;
		font-size: 16px;
		color: #E5BD4A;

	}
}

.header-text p {
	margin: 0;
}

p{
	color: #BE9028;
}




main {
	/* width: min(100% - 40px, 960px); */
	
}
/* Page layout with a block-based navigation sidebar. */
.site-main {
	flex: 1 0 auto;
	/* width: min(100% - 40px, 1320px); */
}

.content-layout.has-sidebar {
	display: grid;
	grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.page-sidebar {
	position: sticky;
	top: 32px;
	padding-right: 28px;
	border-right: 1px solid #ddd;
}

.page-sidebar__widget {
	margin: 0;
}

.page-sidebar__title {
	margin: 0 0 24px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.content-column {
	min-width: 0;
}

@media (max-width: 768px) {
	.site-main {
	flex: 1 0 auto;
		margin: 0px auto;
	}

	.content-layout.has-sidebar {
		display: block;
	}

	.page-sidebar {
		display: none;
	}
}

.wp-block-columns{
	margin-bottom: 16px;
}

/* Gutenberg Columns: navigation on the left, content on the right. */
.page-columns,
.wp-block-columns.is-style-navigation-content {
	width: 100%;
	display: grid !important;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 16px;

	padding-inline: max(
		40px,
		calc((100% - 1120px) / 2)
	);
	grid-template-columns: clamp(220px, 22vw, 260px) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.page-columns > .wp-block-column,
.wp-block-columns.is-style-navigation-content > .wp-block-column {
	min-width: 0;
}

.page-columns > .wp-block-column:first-child,
.wp-block-columns.is-style-navigation-content > .wp-block-column:first-child {
	position: sticky;
	top: 32px;
}



.wp-block-group.is-style-platform-border-strategy {
    background: #07152A;
    color: #ffffff;

    padding: clamp(2rem, 5vw, 5rem);

	box-sizing: border-box;
	width: 100%;

	padding-inline: max(
		40px,
		calc((100% - 1120px) / 2)
	);
    font-family: var(--wp--preset--font-family--secondary);
}

/* Заголовки внутри секции */
.wp-block-group.is-style-platform-border-strategy
:is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
    font-family: var(--wp--preset--font-family--secondary);
    font-weight: 500;
}

/* Обычный текст внутри секции */
.wp-block-group.is-style-platform-border-strategy
:is(p, li) {
    color: #ffffff;
    font-family: inherit;
}

/* Ссылки */
.wp-block-group.is-style-platform-border-strategy a {
    color: inherit;
}

/* Кнопки */
.wp-block-group.is-style-platform-border-strategy
.wp-block-button__link {
    font-family: inherit;
}

@media (max-width: 768px) {
	.page-columns,
	.wp-block-columns.is-style-navigation-content {
		display: block !important;
	}

	.page-columns > .wp-block-column:first-child,
	.wp-block-columns.is-style-navigation-content > .wp-block-column:first-child {
		display: none;
	}
}

/* Gutenberg font-weight styles for paragraphs and headings. */
:where(p, h1, h2, h3, h4, h5, h6).is-style-font-weight-100 { font-weight: 100; }
:where(p, h1, h2, h3, h4, h5, h6).is-style-font-weight-200 { font-weight: 200; }
:where(p, h1, h2, h3, h4, h5, h6).is-style-font-weight-300 { font-weight: 300; }
:where(p, h1, h2, h3, h4, h5, h6).is-style-font-weight-400 { font-weight: 400; }
:where(p, h1, h2, h3, h4, h5, h6).is-style-font-weight-500 { font-weight: 500; }
:where(p, h1, h2, h3, h4, h5, h6).is-style-font-weight-600 { font-weight: 600; }
:where(p, h1, h2, h3, h4, h5, h6).is-style-font-weight-700 { font-weight: 700; }
:where(p, h1, h2, h3, h4, h5, h6).is-style-font-weight-800 { font-weight: 800; }
:where(p, h1, h2, h3, h4, h5, h6).is-style-font-weight-900 { font-weight: 900; }

/* Board Strategy Gutenberg color utilities. */
.has-board-light-gray-color { color: #D6D8DB !important; }
.has-board-white-color { color: #FFFFFF !important; }
.has-board-gold-color { color: #D59A38 !important; }

.has-board-light-gray-background-color { background-color: #D6D8DB !important; }
.has-board-white-background-color { background-color: #FFFFFF !important; }
.has-board-gold-background-color { background-color: #D59A38 !important; }

.mobile-menu-toggle,
.mobile-drawer,
.mobile-menu-backdrop {
	display: none;
}

@media (max-width: 768px) {
	body.mobile-menu-open {
		overflow: hidden;
	}

	.mobile-menu-toggle {
		top: 20px;
		right: 20px;
		display: flex;
		width: 44px;
		height: 44px;
		padding: 11px 9px;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		border: 0;
		background: transparent;
		color: #FFFFFF;
		cursor: pointer;
	}

	.mobile-menu-toggle span {
		display: block;
		width: 26px;
		height: 2px;
		background: currentColor;
	}

	.mobile-menu-backdrop {
		position: fixed;
		z-index: 9998;
		inset: 0;
		display: block;
		background: rgb(0 0 0 / 55%);
		opacity: 0;
		transition: opacity 220ms ease;
	}

	.mobile-menu-backdrop.is-visible {
		opacity: 1;
	}

	.mobile-menu-backdrop[hidden] {
		display: none;
	}

	.mobile-drawer {
		position: fixed;
		z-index: 9999;
		top: 0;
		right: 0;
		display: block;
		overflow-y: auto;
		width: min(100%, 360px);
		/* width: 100%; */
		height: 100vh;
		height: 100dvh;
		box-sizing: border-box;
		padding: 24px 20px 48px 20px;
		background: #080808;
		color: #FFFFFF;
		transform: translateX(100%);
		transition: transform 220ms ease;
		overscroll-behavior: contain;
	}

	.mobile-drawer.is-open {
		transform: translateX(0);
	}

	.mobile-drawer__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 48px;
	}

	.mobile-drawer__brand {
		color: #FFFFFF;
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
	}

	.mobile-drawer__close {
		display: grid;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #FFFFFF;
		cursor: pointer;
		font-size: 30px;
		font-weight: 300;
		line-height: 1;
		place-items: center;
	}

	.mobile-drawer__eyebrow {
		margin: 0 0 14px;
		color: #D59A38;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.mobile-drawer__navigation {
		margin-bottom: 42px;
	}

	.mobile-drawer__menu {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.mobile-drawer__menu a {
		display: block;
		color: #D6D8DB;
		text-decoration: none;
	}

	.mobile-drawer__menu--primary > li > a {
		padding: 10px 0;
		border-bottom: 1px solid rgb(214 216 219 / 18%);
		color: #FFFFFF;
		font-size: 20px;
		font-weight: 700;
	}

	.mobile-drawer__menu--sections > li > a {
		padding: 8px 0;
		font-size: 15px;
		font-weight: 400;
	}

	.mobile-drawer__menu .sub-menu {
		margin: 4px 0 8px;
		padding: 0 0 0 16px;
		list-style: none;
	}

	.mobile-drawer__menu .sub-menu a {
		padding: 7px 0;
		font-size: 14px;
	}

	.mobile-drawer__menu a:hover,
	.mobile-drawer__menu a:focus-visible {
		color: #D59A38;
	}

	.mobile-drawer__contact {
		display: grid;
		width: 132px;
		min-height: 44px;
		margin-top: 8px;
		border: 1px solid #FFFFFF;
		background: #FFFFFF;
		color: #111111;
		font-size: 11px;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		place-items: center;
	}

	.mobile-drawer__contact:hover,
	.mobile-drawer__contact:focus-visible {
		background: transparent;
		color: #FFFFFF;
	}
}