/*!
Theme Name: Spare Parts
Theme URI: http://underscores.me/
Author: New Fayl LTD
Author URI: https://fayl.one
Description: New Fayl LTD, Templates
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: spare_parts
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Spare Parts is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*
Theme Name: Spare Parts
Theme URI: https://example.com
Author: New Fayl LTD
Description: Чистая адаптивная тема WordPress на Flexbox
Version: 1.0
Text Domain: spare_parts
*/

/* ========== RESET ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Arial", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #222;
    background: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* ========== CONTAINER ========== */
.site {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ========== HEADER ========== */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

.site-branding {
    display: flex;
    flex-direction: column;
}

.site-title a {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
}

.site-description {
    font-size: 0.9rem;
    color: #777;
}

/* Навигация */
.main-navigation {
    position: relative;
}

.main-navigation ul {
    display: flex;
    gap: 20px;
}

.main-navigation a {
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.3s;
}

.main-navigation a:hover {
    background: #f5f5f5;
}

.menu-toggle {
    display: none;
    background: none;
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

/* Мобильное меню */
@media (max-width: 768px) {
    .main-navigation ul {
        display: none;
        position: absolute;
        top: 50px;
        right: 0;
        flex-direction: column;
        background: #fff;
        border: 1px solid #ddd;
        padding: 10px;
        width: 200px;
    }

    .main-navigation ul.active {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }
}

/* Обёртка хедера */
.header-wrapper {
    max-width: 1420px;
    margin: 0 auto;
    padding: 10px 20px;
}

/* Хедер */
.site-header {
    display: flex;
    justify-content: space-between;
    /* логотип слева, меню справа */
    align-items: center;
    /* выравнивание по вертикали */
    gap: 30px;
}

/* Логотип и название */
.site-branding {
    display: flex;
    align-items: center;
    gap: 15px;
}

.site-branding img {
    max-height: 60px;
    /* чтобы не раздувало шапку */
    height: auto;
    width: auto;
}

.site-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Меню */
.main-navigation {
    display: flex;
    align-items: center;
}

.main-navigation ul {
    display: flex;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li a {
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    transition: color 0.3s ease;
}

.main-navigation li a:hover {
    color: #0073e6;
}

/* ========== CONTENT ========== */
.site-main {
    flex: 1;
    padding: 40px 0;
}

.site-main article {
    margin-bottom: 40px;
}

.site-main h1,
.site-main h2,
.site-main h3 {
    margin-bottom: 15px;
    font-weight: bold;
}

.site-main p {
    margin-bottom: 15px;
}

/* ========== FOOTER ========== */
.site-footer {
    padding: 20px 0;
    border-top: 1px solid #ddd;
    text-align: center;
    font-size: 0.9rem;
    color: #777;
}

.site-footer a {
    color: #555;
}

/* Header */
/* ================= HEADER ================= */

.header-wrapper {
    background: #fff;
    border-bottom: 1px solid #eaeaea;
}

.site-header {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 20px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

/* Логотип и текст */
.site-branding {
    display: flex;
    align-items: center;
    gap: 15px;
}

.site-branding img {
    max-height: 50px;
    width: auto;
}

.site-title a {
    font-size: 1.6rem;
    font-weight: 700;
    color: #222;
}

.site-description {
    font-size: 0.9rem;
    color: #666;
    margin-top: 3px;
}

/* Меню */
.main-navigation ul {
    display: flex;
    gap: 25px;
}

.main-navigation li {
    list-style: none;
}

.main-navigation a {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    padding: 8px 0;
    position: relative;
    transition: color 0.3s;
}

.main-navigation a:hover {
    color: #0073e6;
}

/* Бургер */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle .burger {
    width: 25px;
    height: 3px;
    background: #333;
    border-radius: 2px;
}

/* Адаптив */
@media (max-width: 992px) {
    .main-navigation ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 80px;
        right: 20px;
        background: #fff;
        border: 1px solid #ddd;
        padding: 15px;
        gap: 15px;
        width: 220px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .main-navigation ul.active {
        display: flex;
    }

    .menu-toggle {
        display: flex;
    }
}

/* Page */
/* ========== MAIN WRAPPER ========== */
.main-wrapper {
    max-width: 1420px;
    margin: 0 auto;
    padding: 40px 20px;
}

.content-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* Основной контент */
.site-main {
    flex: 1;
    background: #fff;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Сайдбары */
.sidebar {
    flex: 0 0 250px;
    background: #fafafa;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.sidebar-left {
    order: -1;
    /* левый будет всегда слева */
}

/* Заголовки внутри сайдбаров */
.sidebar h2,
.sidebar h3 {
    margin-bottom: 15px;
    font-size: 1.2rem;
    border-bottom: 2px solid #0073e6;
    padding-bottom: 5px;
}

/* Адаптив */
@media (max-width: 1200px) {
    .sidebar {
        flex: 0 0 200px;
    }
}

@media (max-width: 992px) {
    .content-layout {
        flex-direction: column;
    }

    .sidebar {
        flex: 1 1 auto;
        margin-bottom: 20px;
    }

    .sidebar-left {
        order: 0;
    }
}

/* Footer */
/* ========== FOOTER SIDEBAR ========== */
.footer-sidebar {
    max-width: 1420px;
    margin: 0 auto;
    padding: 40px 20px;
}

.footer-sidebar .widget-area {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-sidebar .widget {
    flex: 1 1 300px;
    background: #fafafa;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.footer-sidebar .widget-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    border-bottom: 2px solid #0073e6;
    padding-bottom: 5px;
}

/* ========== FOOTER MAIN ========== */
.footer-wrapper {
    background: #222;
    color: #ccc;
    padding: 50px 20px 20px;
}

.footer-inner {
    max-width: 1420px;
    margin: 0 auto 30px;
    display: flex;
    gap: 40px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-column {
    flex: 1 1 300px;
}

.footer-column h3 {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 15px;
}

.footer-column p,
.footer-column li,
.footer-column a {
    font-size: 0.95rem;
    color: #ccc;
    transition: color 0.3s;
}

.footer-column a:hover {
    color: #fff;
}

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

.contacts li {
    margin-bottom: 8px;
}

/* Инфо снизу */
.site-info {
    max-width: 1420px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.85rem;
    border-top: 1px solid #444;
    padding-top: 15px;
    color: #777;
}

.site-info a {
    color: #aaa;
}

.site-info a:hover {
    color: #fff;
}

/* Адаптив */
@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========== SIDEBARS ========== */
.widget-area {
    flex: 0 0 250px;
    background: #fafafa;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.widget {
    margin-bottom: 25px;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    border-bottom: 2px solid #0073e6;
    padding-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    margin-bottom: 8px;
}

.widget ul li a {
    color: #444;
    transition: color 0.3s;
}

.widget ul li a:hover {
    color: #0073e6;
}

/* Левый сайдбар */
.sidebar-left {
    order: -1;
}

/* Правый сайдбар */
.sidebar-right {
    order: 1;
}

/* Адаптивность */
@media (max-width: 1200px) {
    .widget-area {
        flex: 0 0 200px;
    }
}

@media (max-width: 992px) {
    .content-layout {
        flex-direction: column;
    }

    .widget-area {
        flex: 1 1 auto;
        margin-bottom: 20px;
    }

    .sidebar-left,
    .sidebar-right {
        order: 0;
    }
}

/* Page Templates */
/* Full width */
.site-main.fullwidth {
    flex: 1 1 100%;
}

/* Если один сайдбар отсутствует — контент занимает всё */
.content-layout:has(.site-main.fullwidth) {
    display: block;
}

/* Full Width Page */
.site-main.fullwidth {
    max-width: 1420px;
    width: 100%;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    /* или оставь padding:20px если нужен отступ */
    background: transparent;
    /* убираем фон, если нужен чистый контент */
}