/* variable branding: Refined Kernel Aesthetic */

:root:not([data-theme="dark"]),
[data-theme="light"],
[data-theme="dark"] {
    /* Updated Color Palette to match warm beige */
    --bg-color-beige: #e6e4dc;
    --color-charcoal: #2d2d2d;
    --color-variable-green: #3F7A2A;
    --color-variable-olive: #262626;
    /* Added olive accent */
    --color-grey-dark: #202020;
    --color-grey-medium: #666666;

    /* Secondary Backgrounds */
    --bg-color-grey-03: #f0f0f3;
    --bg-color-grey-05: #e0e1e6;
    --bg-color-grey-07: #d0d2d9;

    /* Pico.css overrides */
    --primary: var(--color-variable-green) !important;
    --primary-hover: #2F5F20 !important;
    --primary-focus: rgba(129, 179, 0, 0.125) !important;
    --primary-inverse: #FFF !important;

    --body-background-color: var(--bg-color-beige);
    --color: var(--color-charcoal);
    --h1-color: var(--color-grey-dark);
    --h2-color: var(--color-grey-dark);
    --h3-color: var(--color-grey-dark);

    /* Monospace for technical feel */
    --font-family-mono: "IBM Plex Mono", "Courier New", Courier, monospace;
    --font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-body: Arial, Helvetica, sans-serif;
}

body {
    background-color: var(--body-background-color);
    color: var(--color);
    font-family: var(--font-family-body);
    line-height: 1.6;
}

h1 {
    font-family: "Arial Black", var(--font-family-sans);
    letter-spacing: -0.02em;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-sans);
    letter-spacing: -0.01em;
}

/* Massive Hero Typography */
.hero-massive {
    font-size: 6rem;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 900;
}

code,
pre,
.mono {
    font-family: var(--font-family-mono);
}

/* Airy Section Spacing & Thin Borders */
section {
    border-bottom: 0.5px solid var(--color-charcoal);
    padding: 4rem 0;
    /* Reduced for tighter layout per user request */
    margin-bottom: 0;
}

section:last-of-type {
    border-bottom: none;
}

/* Massive Header Logo (Kernel Style) */
.header-logo-massive {
    display: block;
    font-family: "Poppins", var(--font-family-sans);
    font-size: 12rem;
    line-height: 0.8;
    letter-spacing: -0.06em;
    font-weight: 400;
    color: var(--color-charcoal);
    text-decoration: none;
    margin: 2rem 0 0 -0.5rem;
    /* Slight negative margin for optical alignment */
    transition: color 0.2s ease;
}

.header-logo-massive:hover {
    color: var(--color-variable-green);
}

/* Navbar: cleaned up for sub-logo placement */
nav {
    background-color: var(--bg-color-beige);
    border-bottom: 0.5px solid var(--color-charcoal);
    padding: 0.5rem 0;
    /* Tighter padding */
}

nav ul {
    gap: 2rem;
}

nav a.contrast {
    font-size: 1.1rem;
    color: var(--color-charcoal);
    font-weight: 500;
}

/* Custom section headers */
section hgroup h1,
section hgroup h2 {
    margin-bottom: 1rem;
}

/* Buttons and links with green branding */
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
    background-color: var(--color-variable-green) !important;
    border-color: var(--color-variable-green) !important;
    color: white !important;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.2s ease;
}

button:hover,
[role="button"]:hover,
button:focus,
[role="button"]:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Ensure links using primary color are green */
a.primary {
    color: var(--color-variable-green) !important;
}

/* Grid adjustments - Sharp but slightly rounded articles */
.grid article {
    border: 0.5px solid var(--color-charcoal);
    background: transparent;
    border-radius: 4px;
    /* Slightly rounded */
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

/* New: Utility for layering HTML text over background assets */
.card-image-overlay {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

/* Subtle dark overlay to ensure text readability against busy images */
.card-image-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(230, 228, 220, 0.5), rgba(230, 228, 220, 0.4));
    /* Reduced opacity for better visibility */
    z-index: -1;
    transition: background 0.3s ease;
}

.card-image-overlay:hover::before {
    background: linear-gradient(rgba(230, 228, 220, 0.2), rgba(230, 228, 220, 0.1));
}

/* Fix for Pico.css article headers clipping background images */
.card-image-overlay header {
    background: transparent !important;
    border-bottom: none !important;
    padding-bottom: 0;
}

/* Footer alignment */
footer {
    padding: 4rem 0;
    border-top: 0.5px solid var(--color-charcoal);
}

@media (max-width: 992px) {
    .header-logo-massive {
        font-size: 8rem;
    }

    .hero-massive {
        font-size: 4rem;
    }
}