/* css/style.css */

/* --- Basic Layout & Sticky Footer --- */
/* Ensure body takes full height, needed for sticky footer */
html, body {
    height: 100%;
}

/* Make main content area grow to push footer down */
/* .flex-shrink-0 class is added in main tag in header.php */
/* .mt-auto class is added to footer in footer.php */


/* --- Kundli Chart Styling (North Indian Style) --- */
.kundli-chart-container.north-indian {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columns for layout */
    grid-template-rows: repeat(6, 1fr);    /* 6 rows for layout */
    width: 350px; /* Increased size slightly */
    height: 350px; /* Increased size slightly */
    border: 2px solid black;
    margin: 2em auto; /* Center the chart */
    position: relative; /* For positioning diagonal lines */
    background-color: #fff;
}

/* Define grid areas for houses (visual positions 1-12) */
.kundli-house.house-pos-1 { grid-area: 1 / 1 / 3 / 3; } /* Top-left square */
.kundli-house.house-pos-2 { grid-area: 1 / 3 / 3 / 5; } /* Top-middle square */
.kundli-house.house-pos-3 { grid-area: 1 / 5 / 3 / 7; } /* Top-right square */
.kundli-house.house-pos-4 { grid-area: 3 / 5 / 5 / 7; } /* Middle-right square */
.kundli-house.house-pos-5 { grid-area: 5 / 5 / 7 / 7; } /* Bottom-right square */
.kundli-house.house-pos-6 { grid-area: 5 / 3 / 7 / 5; } /* Bottom-middle square */
.kundli-house.house-pos-7 { grid-area: 5 / 1 / 7 / 3; } /* Bottom-left square */
.kundli-house.house-pos-8 { grid-area: 3 / 1 / 5 / 3; } /* Middle-left square */
/* Center houses (triangles using clip-path) */
.kundli-house.house-pos-9 { grid-area: 4 / 3 / 6 / 5; clip-path: polygon(50% 100%, 0 0, 100% 0); } /* Bottom Triangle */
.kundli-house.house-pos-10 { grid-area: 3 / 4 / 5 / 6; clip-path: polygon(0 50%, 100% 0, 100% 100%); } /* Right Triangle */
.kundli-house.house-pos-11 { grid-area: 2 / 3 / 4 / 5; clip-path: polygon(50% 0, 0 100%, 100% 100%); } /* Top Triangle */
.kundli-house.house-pos-12 { grid-area: 3 / 2 / 5 / 4; clip-path: polygon(0 0, 0 100%, 100% 50%); } /* Left Triangle */


/* Styling for individual house boxes */
.kundli-house {
    border: 1px solid #aaa; /* Lighter border for inner lines */
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Stack planets vertically if needed */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2; /* Ensure houses are above any pseudo-element lines */
    font-size: 0.85em; /* Slightly larger font for planets */
    text-align: center;
    background-color: #fff; /* White background to cover grid lines */
    overflow: hidden; /* Hide overflow if too many planets */
    line-height: 1.2;
}

/* Remove borders where triangles visually meet squares */
.kundli-house.house-pos-9 { border-top: none; }
.kundli-house.house-pos-10 { border-left: none; }
.kundli-house.house-pos-11 { border-bottom: none; }
.kundli-house.house-pos-12 { border-right: none; }


/* Style Planets */
.planet {
    margin: 1px 2px; /* Minimal margin */
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: bold;
    display: inline-block; /* Allow planets to sit side-by-side before wrapping */
}

/* Optional: Color code planets (adjust colors as desired) */
.planet-su { color: #DC3545; } /* Red */
.planet-mo { color: #6C757D; } /* Gray */
.planet-ma { color: #A31A27; } /* Dark Red */
.planet-me { color: #198754; } /* Green */
.planet-ju { color: #FFC107; } /* Amber/Yellow */
.planet-ve { color: #D63384; } /* Pink */
.planet-sa { color: #0D6EFD; } /* Blue */
.planet-ra, .planet-ke { color: #212529; } /* Dark/Black */
.planet-as { color: #6f42c1; font-style: italic; } /* Purple, Italic for Ascendant */

/* Highlight Lagna House */
.lagna-house {
    background-color: #e9ecef; /* Light gray background */
    /* font-weight: bold; */ /* Optional: Make text bolder */
}

/* --- Optional: Responsive adjustments for smaller screens --- */
@media (max-width: 400px) {
    .kundli-chart-container.north-indian {
        width: 280px;
        height: 280px;
    }
    .kundli-house {
        font-size: 0.75em;
        padding: 3px;
    }
    .planet {
         margin: 1px;
         padding: 0 2px;
    }
}

/* --- Add any other custom styles below --- */