/* =========================================
   GLOBAL RESET
========================================= */
html, body, .home {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* prevent scroll */
}

/* =========================================
   HIDE ASTRA HEADER & FOOTER ON FRONT PAGE
========================================= */
.home .ast-primary-header,
.home .ast-mobile-header-wrap,
.home .site-footer,
.home footer {
    display: none !important;
}

/* CUSTOM FRONT PAGE HEADER (TITLE ONLY) */
.custom-front-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
}

.custom-front-header .custom-site-title {
    font-size: 28px;
    font-weight: bold;
    pointer-events: auto;
    text-align: center;

    position: relative;
    left: -12px;
}

/* Letter colors */
.custom-front-header .custom-site-title .white {
    color: #ffffff;
}

.custom-front-header .custom-site-title .black {
    color: #000000;
}

/* Mobile */
@media (max-width: 768px) {
    .custom-front-header {
        height: 50px;
    }

    .custom-front-header .custom-site-title {
        font-size: 20px;
        left: 0;
    }
}


/* =========================================
   FULL SCREEN SPLIT LAYOUT
========================================= */
.home .wp-block-columns {
    display: flex !important;
    flex-direction: row;
    width: 100% !important;
    height: 100vh !important;   /* full viewport height */
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
}

.home .wp-block-column {
    flex: 1;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================
   FULL COLUMN CLICKABLE AREA
========================================= */
.full-link {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 5; /* below the header */
    text-decoration: none;
}


/* =========================================
   HOVER-FOLLOW IMAGES
========================================= */
.follower-img {
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    pointer-events: none;
    position: absolute;
    will-change: transform, opacity;
    z-index: 4;
    transition: transform 0.3s ease, opacity 0.5s ease;
}

/* =========================================
   COLUMN TITLES
========================================= */
.column-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    text-align: center;
    pointer-events: none;
    z-index: 10;

    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    text-transform: uppercase;
    white-space: nowrap;

    filter: blur(3px);
    transition: filter 0.3s ease, color 0.3s ease;
}

@media (max-width: 768px) {
    .column-title {
        font-size: 28px;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .column-title {
        font-size: 28px;   /* smaller text for mobile */
    }
}

/* =========================================
   COLUMN COLORS & HOVER EFFECTS
========================================= */

/* LEFT COLUMN (VFX) */
.left-half {
    background-color: #000000;
    transition: background-color 0.3s ease;
}

.left-half .column-title {
    color: #ffffff;
}

.left-half:hover {
    background-color: #9D9D9D;
}

.left-half:hover .column-title {
    color: #ffffff;
    filter: blur(0);
}

/* RIGHT COLUMN (GRAFIKS) */
.right-half {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

/* DEFAULT STATE — ALWAYS BLACK */
.right-half .column-title {
    color: #000000;
}

/* HOVER STATE — GREEN */
.right-half:hover .column-title {
    color: #000000; /* your green */
    filter: blur(0);
}

/* BACKGROUND ON HOVER */
.right-half:hover {
    background-color: #9D9D9D;
}

