/**
 * Structure Reordering CSS
 * Позволяет изменить порядок элементов в HTML без изменения визуального отображения
 */

/* Main Content - используем flexbox для переупорядочивания */
#main-content {
    display: flex;
    flex-direction: column;
}

/* Изменяем порядок секций через CSS order */
#main-content > .container:nth-child(1) { order: 1; }  /* Пустой контейнер */
#main-content > .container:nth-child(2) { order: 2; }  /* Hero + Benefits (reordered inside) */
#main-content > section[id="learning"] { order: 6; }   /* Training moved to end */
#main-content > .platforms { order: 3; }               /* Platforms */
#main-content > .container:nth-child(5) { order: 4; }  /* Quotes + FHSA */
#main-content > .newsletter-section { order: 5; }      /* Newsletter */

/* Внутри основного контейнера тоже используем flex */
.reordered-sections {
    display: flex;
    flex-direction: column;
}

/* Переупорядочиваем Hero и Benefits внутри контейнера */
/* В HTML: Benefits идет первым, Hero вторым */
/* В визуале: Hero первым, Benefits вторым */
.reordered-sections > .h8m2v6x { order: 2; }  /* Benefits вторым (было первым в HTML) */
.reordered-sections > .x7k2m9p { order: 1; }  /* Hero первым (было вторым в HTML) */

/* Footer sections переупорядочивание */
.page-footer .footer-top .container {
    display: flex;
    flex-wrap: wrap;
}

.page-footer .footer-nav-main {
    order: 1;
}

.page-footer .action-buttons {
    order: 2;
}

/* Обертки для дополнительной уникализации */
.content-wrapper-outer {
    width: 100%;
}

.content-wrapper-inner {
    position: relative;
}

.section-container {
    position: relative;
}

/* Grid layout для quote tabs - переупорядочивание */
.nav-tabs-lg {
    display: flex;
    flex-wrap: wrap;
}

.nav-tabs-lg > li {
    /* Порядок табов можно менять через order если нужно */
}

/* Login page structure reordering */
body.client-access #page {
    display: flex;
    flex-direction: column;
}

/* Header should appear first visually, even though it's after main in HTML */
body.client-access .page-header {
    order: 1;
}

body.client-access #main-content {
    order: 2;
}

body.client-access .page-footer {
    order: 3;
}

/* Responsive */
@media (max-width: 768px) {
    /* На мобильных устройствах сохраняем логичный порядок */
    #main-content > * {
        order: initial !important;
    }
    
    .reordered-sections > * {
        order: initial !important;
    }
    
    /* Login page mobile */
    body.client-access #page > * {
        order: initial !important;
    }
}

/* Дополнительные классы для обфускации структуры */
.w-container-alt {
    width: 100%;
}

.positioning-context {
    position: relative;
}

.flex-wrapper {
    display: flex;
    flex-direction: column;
}

.grid-wrapper {
    display: grid;
    grid-template-columns: 1fr;
}