/**
 * Main Layout & Design System Core Styles
 *
 * @package sitekhub-template
 */

/* ==========================================================
 * 1. Base Reset & Root Canvas
 * ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--sk-color-background, #000000);
    color: var(--sk-color-text, #f8fafc);
    font-family: var(--sk-font-family-base, sans-serif);
    font-size: var(--sk-font-size-base, 16px);
    line-height: var(--sk-line-height-base, 1.7);
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 100vh;
}

/* ==========================================================
 * 2. Main Layout Containers (No-Sidebar Structure)
 * ========================================================== */

.site-container {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--sk-space-md, 1rem);
    padding-left: var(--sk-space-md, 1rem);
}

/* Restricts the width of classic text content templates (page/single) to contentSize */
.site-content-area {
    width: 100%;
    max-width: var(--wp--style--global--content-size, 800px);
    margin-right: auto;
    margin-left: auto;
}

.site-main {
    padding-top: var(--sk-space-xl, 2rem);
    padding-bottom: var(--sk-space-xl, 2rem);
}

/* ==========================================================
 * 3. Header & Navigation Structure
 * ========================================================== */

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sk-space-md, 1rem);
    padding-top: var(--sk-space-md, 1rem);
    padding-bottom: var(--sk-space-md, 1rem);
}

.site-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sk-space-md, 1rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Responsive improvements for Header Navigation on mobile devices */
@media (max-width: 768px) {
    .site-header__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--sk-space-sm, 0.5rem);
    }

    .site-menu {
        justify-content: center;
        width: 100%;
    }
}

/* ==========================================================
 * 4. Geometric Pattern Canvas Overlay
 * ========================================================== */

body::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: var(--sk-background-pattern-image, none);
    background-size: var(--sk-background-pattern-size, 40px 40px);
    pointer-events: none;
    z-index: 0;
}

/*
 * Keep all primary layout sections above the decorative
 * background pattern.
 */
#page,
.site-chrome-shell,
.site-header,
.site-footer,
main {
    position: relative;
    z-index: 1;
}

/* ==========================================================
 * 5. Surface Containers
 * ========================================================== */

.sk-card,
.content-card,
.wp-block-group.is-style-surface-card {
    background-color: var(--sk-color-surface, #0f172a);
    border: var(--sk-border-width, 1px) solid
        var(--sk-color-border, #1e293b);
    border-radius: var(--sk-border-radius-md, 12px);
    box-shadow: var(
        --sk-shadow-surface,
        0 8px 24px rgba(0, 0, 0, 0.5)
    );
    padding: var(--sk-space-md, 1rem);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.content-card {
    margin-bottom: var(--sk-space-lg, 1.5rem);
}

/* ==========================================================
 * 6. Typography Elements
 * ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--sk-color-heading, #ffffff);
    font-family: var(--sk-font-family-heading, sans-serif);
    margin-top: 0;
}