/*
Theme Name: База спорт
Theme URI: https://sport.tapline.ru/
Author: IT Sumnikoff Group
Description: Кастомная классическая тема WordPress для сайта базы отдыха «Спорт»
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 8.0
Text Domain: sport-theme
*/

@font-face {
    font-family: "Manrope";
    src: url("assets/fonts/Manrope-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}

:root {
    --color-primary: #D7192D;
    --color-primary-hover: #C02225;
    --color-text: #2B2A29;
    --color-text-secondary: #747A7E;
    --color-border: #E8EBEF;
    --color-soft: #FFF2F3;
    --color-green: #69B33D;
    --color-blue: #248FD5;
    --color-orange: #F68B2D;
    --color-purple: #9C3BB4;
    --color-white: #FFFFFF;
    --font-main: "Manrope", sans-serif;
    --font-hero: 56px;
    --font-h2: 40px;
    --font-h3: 32px;
    --font-title: 24px;
    --font-body: 16px;
    --gap-section: 50px;
    --gap-card: 24px;
    --radius-small: 16px;
    --radius-large: 24px;
    --radius-pill: 999px;
    --transition: 0.5s;
}

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

body {
    margin: 0;
    background: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: var(--font-body);
}

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

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

a:hover {
    color: var(--color-primary);
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.siteContainer {
    width: min(calc(100vw - 200px), 1400px);
    margin-inline: auto;
}

.siteMain {
    padding-block: var(--gap-section);
}

.pageTitle {
    margin: 0;
    font-size: var(--font-h2);
    font-weight: 800;
}

.entryContent {
    margin-top: 24px;
}

.postsList {
    display: grid;
    gap: var(--gap-card);
    margin-top: 24px;
}

.postItem {
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}

.postTitle {
    margin: 0;
    font-size: var(--font-title);
    font-weight: 700;
}

.postExcerpt {
    color: var(--color-text-secondary);
}

.skipLink {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000;
    padding: 16px;
    background: var(--color-white);
    color: var(--color-text);
    transform: translateY(-150%);
}

.skipLink:focus {
    transform: translateY(0);
}

@media(max-width:1440px) {
    .siteContainer {
        width: calc(100vw - 100px);
    }
}

@media(max-width:1200px) {
    .siteContainer {
        width: calc(100vw - 50px);
    }
}

@media(max-width:700px) {
    .siteContainer {
        width: calc(100vw - 20px);
    }

    .pageTitle {
        font-size: 32px;
    }
}