/* --- Global Styles --- */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: white;
    overflow: hidden;
}

.background {
    /* Essential for positioning hexagons absolutely within it */
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/img/crescent-international-school-backoffice.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* Removed display: flex; as we are using absolute positioning now */
}

/* --- Hexagon Base Dimensions and Styling (from the corrected code) --- */

/* Hexagon dimensions (hard-coded values from calculation) */
/* Outer Width: 320px | Outer Height (Central Part): 173.21px */
/* Border Thickness: 10px | Triangle Height (Outer): 96.61px */

.hexagon-link {
    /* Makes the link wrapper the positioning context */
    position: absolute;
    width: 320px; 
    height: 350px; /* Approximate total visual height including triangles */
    cursor: pointer;
    /* The transform centers the link container itself */
    top: 50%;
    left: 50%;
}

.hexagon-border {
    position: relative;
    width: 320px; 
    height: 173.21px;
    background-color: #00285b;
    /* Margin removed; positioning is handled by .hexagon-link */
    margin: 0; 
    box-shadow: 0 0 50px rgba(0,255,255,1);
    transition: 0.3s;
}

.hexagon-border:before, .hexagon-border:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    border-left: 160px solid transparent; 
    border-right: 160px solid transparent; 
    transition: 0.3s;
}

.hexagon-border:before {
    bottom: 100%;
    border-bottom: 96.61px solid #00285b; 
}

.hexagon-border:after {
    top: 100%;
    border-top: 96.61px solid #00285b; 
}

/* --- Inner Hexagon (The Fill) --- */

.hexagon-fill {
    position: absolute;
    top: 10px; 
    left: 10px; 
    width: 300px; 
    height: 153.21px; 
    background-color: #ffffff;
    z-index: 1; 
    transition: 0.3s;
}

.hexagon-fill:before, .hexagon-fill:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    border-left: 150px solid transparent; 
    border-right: 150px solid transparent; 
    transition: 0.3s;
}

.hexagon-fill:before {
    bottom: 100%;
    border-bottom: 86.61px solid #ffffff; 
}

.hexagon-fill:after {
    top: 100%;
    border-top: 86.61px solid #ffffff; 
}

/* --- Content Span --- */

.hexagon-fill span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #00285b;
    font-size: 25px;
    z-index: 2;
    position: relative;
}

/* --- Positioning of the 6 Hexagons --- */

.hexagon-link {
    /* Keep the absolute position */
    position: absolute;
    width: 320px; 
    height: 350px; 
    cursor: pointer;
    
    /* Center the origin of all link containers at the middle of the screen */
    left: 50%;
    top: 50%;
    
    /* CORRECTED: Shift the entire group UP so the center is exposed */
    /* This shifts the center point of the hexagon group roughly 150px up from the screen center */
    margin-left: -160px; /* -320px / 2 */
    margin-top: -300px; /* Adjusted UP (was -175px) */
}

/* ---------------------------------------------------- */
/* Row 1: Top Row (Hexagons 1 and 4) */
/* ---------------------------------------------------- */

/* 1. Left Top */
.link-1 {
    /* Moved LEFT (-300px) and slightly DOWN (50px) relative to the new origin */
    transform: translate(-400px, -80px); 
}

/* 4. Right Top */
.link-4 {
    /* Moved RIGHT (0px) and slightly DOWN (50px) relative to the new origin */
    transform: translate(400px, -80px); 
}

/* ---------------------------------------------------- */
/* Row 2: Middle Row (Hexagons 2 and 5) - Interlocking Position */
/* ---------------------------------------------------- */

/* 2. Left Middle */
.link-2 {
    /* Moved further LEFT (-380px) and substantially DOWN (225px) to sit between 1 & 3 */
    transform: translate(-520px, 215px); 
}

/* 5. Right Middle */
.link-5 {
    /* Moved further RIGHT (80px) and substantially DOWN (225px) to sit between 4 & 6 */
    transform: translate(520px, 215px); 
}

/* ---------------------------------------------------- */
/* Row 3: Bottom Row (Hexagons 3 and 6) - Interlocking Position */
/* ---------------------------------------------------- */

/* 3. Left Bottom */
.link-3 {
    /* Moved LEFT (-300px) and furthest DOWN (400px) */
    transform: translate(-400px, 510px); 
}

/* 6. Right Bottom */
.link-6 {
    /* Moved RIGHT (0px) and furthest DOWN (400px) */
    transform: translate(400px, 510px); 
}

/* --- Hover Effects --- */
.hexagon-border:hover {
    background-color: #f47721;
    box-shadow: 0 0 50px rgba(244, 119, 33, 1);
}

.hexagon-border:hover:before {
    border-bottom-color: #f47721;
}

.hexagon-border:hover:after {
    border-top-color: #f47721;
}

.hexagon-border:hover .hexagon-fill {
    background-color: #2b2f38;
}

.hexagon-border:hover .hexagon-fill:before {
    border-bottom-color: #2b2f38;
}

.hexagon-border:hover .hexagon-fill:after {
    border-top-color: #2b2f38;
}

.hexagon-border:hover span {
    color: #f47721;
}