/* ==================================================
   LAYOUT.CSS – FINAL SAFE
   HERO DARK + WHITE SECTION ZONES
   BLOCKSY / STACKABLE SAFE VERSION
================================================== */

/* ==================================================
   1. GLOBAL BASE
================================================== */

html,
body {
    overflow-x: hidden;
}

body.home {
    background: #0f0e17 !important;
}

#page {
    background: transparent !important;
}

/* ==================================================
   2. BASE CONTENT LAYER
================================================== */

.home .entry-content {
    position: relative;
    z-index: 1;
}

/* ==================================================
   3. HERO SECTION – FULL-BLEED DARK
   stk-5cc302c = hero block
================================================== */

.home .wp-block-stackable-columns.stk-5cc302c {
    position: relative !important;
    z-index: 5 !important;
    background: transparent !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 60px;
}

.home .wp-block-stackable-columns.stk-5cc302c::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #0f0e17 !important;
    z-index: -1;
    pointer-events: none;
}

/* ==================================================
   4. HERO TEXT COLOR
================================================== */

.home .wp-block-stackable-columns.stk-5cc302c,
.home .wp-block-stackable-columns.stk-5cc302c h1,
.home .wp-block-stackable-columns.stk-5cc302c h2,
.home .wp-block-stackable-columns.stk-5cc302c h3,
.home .wp-block-stackable-columns.stk-5cc302c h4,
.home .wp-block-stackable-columns.stk-5cc302c h5,
.home .wp-block-stackable-columns.stk-5cc302c h6,
.home .wp-block-stackable-columns.stk-5cc302c p,
.home .wp-block-stackable-columns.stk-5cc302c li,
.home .wp-block-stackable-columns.stk-5cc302c span {
    color: #ffffff !important;
}

.home .wp-block-stackable-columns.stk-5cc302c a {
    color: #b80000 !important;
}

.home .wp-block-stackable-columns.stk-5cc302c a:hover {
    color: #ffffff !important;
}

/* ==================================================
   5. HERO IMAGE + BUTTON STYLING
================================================== */

.home .wp-block-stackable-columns.stk-5cc302c .ct-image-container,
.home .wp-block-stackable-columns.stk-5cc302c .wp-block-image {
    opacity: 1;
    visibility: visible;
}

.home .wp-block-stackable-columns.stk-5cc302c .button,
.home .wp-block-stackable-columns.stk-5cc302c .wp-block-button__link {
    background-color: #b80000 !important;
    border-color: #b80000 !important;
    color: #ffffff !important;
}

.home .wp-block-stackable-columns.stk-5cc302c .button:hover,
.home .wp-block-stackable-columns.stk-5cc302c .wp-block-button__link:hover {
    background-color: #8f0000 !important;
    border-color: #8f0000 !important;
    color: #ffffff !important;
}

/* ==================================================
   6. WHITE ZONE START
   Add class .akj-white-start to the first white section
================================================== */

.home .akj-white-start {
    position: relative !important;
    z-index: 6 !important;
    isolation: isolate;
    background: #ffffff !important;
    margin-top: 0 !important;
    padding-top: 60px;
}

.home .akj-white-start::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff !important;
    z-index: -1;
    pointer-events: none;
}

/* ==================================================
   7. WHITE ZONE TEXT COLOR
   Safe only for the controlled white section
================================================== */

.home .akj-white-start,
.home .akj-white-start h1,
.home .akj-white-start h2,
.home .akj-white-start h3,
.home .akj-white-start h4,
.home .akj-white-start h5,
.home .akj-white-start h6,
.home .akj-white-start p,
.home .akj-white-start li,
.home .akj-white-start span {
    color: #111111 !important;
}

.home .akj-white-start a {
    color: #b80000 !important;
}

.home .akj-white-start a:hover {
    color: #000000 !important;
}

.home .akj-white-start .button,
.home .akj-white-start .wp-block-button__link {
    background-color: #b80000 !important;
    border-color: #b80000 !important;
    color: #ffffff !important;
}

.home .akj-white-start .button:hover,
.home .akj-white-start .wp-block-button__link:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* ==================================================
   8. OPTIONAL WHITE ZONES
   Add class .white-zone manually to sections
================================================== */

.home .white-zone {
    position: relative;
    isolation: isolate;
    background: #ffffff !important;
    color: #111111 !important;
}

.home .white-zone h1,
.home .white-zone h2,
.home .white-zone h3,
.home .white-zone h4,
.home .white-zone h5,
.home .white-zone h6,
.home .white-zone p,
.home .white-zone li,
.home .white-zone span {
    color: #111111 !important;
}

.home .white-zone a {
    color: #b80000 !important;
}

.home .white-zone a:hover {
    color: #000000 !important;
}

.home .white-zone .button,
.home .white-zone .wp-block-button__link {
    background-color: #b80000 !important;
    border-color: #b80000 !important;
    color: #ffffff !important;
}

.home .white-zone .button:hover,
.home .white-zone .wp-block-button__link:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* ==================================================
   9. OPTIONAL DARK ZONES
================================================== */

.home .dark-zone {
    position: relative;
    isolation: isolate;
    background: #0f0e17 !important;
    color: #ffffff !important;
}

.home .dark-zone h1,
.home .dark-zone h2,
.home .dark-zone h3,
.home .dark-zone h4,
.home .dark-zone h5,
.home .dark-zone h6,
.home .dark-zone p,
.home .dark-zone li,
.home .dark-zone span {
    color: #ffffff !important;
}

.home .dark-zone a {
    color: #b80000 !important;
}

.home .dark-zone a:hover {
    color: #ffffff !important;
}

.home .dark-zone .button,
.home .dark-zone .wp-block-button__link {
    background-color: #b80000 !important;
    border-color: #b80000 !important;
    color: #ffffff !important;
}

.home .dark-zone .button:hover,
.home .dark-zone .wp-block-button__link:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* ==================================================
   10. KEEP INNER CONTAINERS TRANSPARENT
================================================== */

.home .akj-white-start .ct-container,
.home .akj-white-start .ct-container-fluid,
.home .akj-white-start .entry-content,
.home .akj-white-start .stk-inner-blocks,
.home .akj-white-start .stk-block-content,
.home .white-zone .ct-container,
.home .white-zone .ct-container-fluid,
.home .white-zone .entry-content,
.home .white-zone .stk-inner-blocks,
.home .white-zone .stk-block-content,
.home .dark-zone .ct-container,
.home .dark-zone .ct-container-fluid,
.home .dark-zone .entry-content,
.home .dark-zone .stk-inner-blocks,
.home .dark-zone .stk-block-content {
    background: transparent !important;
}

/* ==================================================
   11. RESPONSIVE ADJUSTMENTS
================================================== */

@media (max-width: 991px) {
    .home .wp-block-stackable-columns.stk-5cc302c::before,
    .home .akj-white-start::before {
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 575px) {
    .home .wp-block-stackable-columns.stk-5cc302c,
    .home .akj-white-start {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .home .wp-block-stackable-columns.stk-5cc302c h1,
    .home .wp-block-stackable-columns.stk-5cc302c h2,
    .home .akj-white-start h1,
    .home .akj-white-start h2 {
        font-size: clamp(24px, 5vw, 32px);
    }
}