/* styles/main.css */
@import url("utils/variables.css");
@import url("utils/animations.css");
@import url("components/header.css");
@import url("components/footer.css");
@import url("components/sidebar.css");
@import url("components/fullScreenSections.css");
@import url("components/intro.css");
@import url("utils/responsive.css");

/* Global Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    height: 100%;
}

body {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    font-family: var(--font-primary);
    font-weight: var(--fw-light);
    font-style: italic;
    line-height: 1.6;
    background-color: #000000; /* Force black background */
    color: var(--color-text);
    padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
}

main {
    grid-area: main;
    padding: var(--spacing-lg);
    margin-top: var(--header-height);
    margin-left: var(--sidebar-width);
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--fw-light);
    font-style: italic;
    color: var(--color-heading);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p {
    margin-bottom: var(--spacing-md);
}

/* Links */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary-dark);
}

/* Container */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Utility Classes */
.text-center { text-align: center; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

/* Make sure safe areas blend with site content */
@supports (padding: max(0px)) {
    body {
        padding-left: max(var(--spacing-md), var(--safe-area-inset-left));
        padding-right: max(var(--spacing-md), var(--safe-area-inset-right));
        padding-bottom: max(var(--spacing-md), var(--safe-area-inset-bottom));
    }
}