/*
Theme Name:   Interpos
Theme URI:    https://interpos.pro
Author:       Interpos
Description:  Собственная тема Interpos.pro: редактируемый контент через блоки WordPress, адаптивная вёрстка.
Version:      1.0.0
Text Domain:  interpos
*/

:root {
	--color-primary: #0084ea;
	--color-primary-dark: #0076d1;
	--color-secondary: #27a3d8;
	--color-text: #181818;
	--color-text-muted: #5c6570;
	--color-bg: #ffffff;
	--color-bg-alt: #f5f8fb;
	--color-border: #e2e6ea;
	--color-white: #ffffff;

	--font-base: "Roboto", Arial, sans-serif;

	--container-width: 1200px;
	--container-padding: 20px;

	--radius-s: 6px;
	--radius-m: 12px;
	--radius-l: 20px;

	--space-xs: 8px;
	--space-s: 16px;
	--space-m: 24px;
	--space-l: 48px;
	--space-xl: 80px;

	--shadow-card: 0 4px 20px rgba(24, 24, 24, 0.08);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 1.55;
	color: var(--color-text);
	background: var(--color-bg);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-primary);
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-s);
	font-weight: 700;
	line-height: 1.25;
}

h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: clamp(20px, 2.4vw, 24px); }

p { margin: 0 0 var(--space-s); }

ul, ol { padding-left: 1.2em; }

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.section {
	padding-block: var(--space-xl);
}

.section--alt {
	background: var(--color-bg-alt);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--radius-s);
	font-weight: 600;
	font-size: 16px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary {
	background: var(--color-primary);
	color: var(--color-white);
}

.btn-primary:hover {
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.btn-outline {
	background: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn-outline:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-primary);
	color: #fff;
	padding: 10px 16px;
	z-index: 10000;
}

.skip-link:focus {
	left: 10px;
	top: 10px;
}

@media (max-width: 768px) {
	.section { padding-block: var(--space-l); }
}