/*
blacklisted.work — Header Component
Purpose:
- Header-only layout rules
- Header height fixed/maxed at 200px
- Logo centered, sized to 80% of header height
- Title aligned bottom-left under logo
*/

header.site-header {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);

    /* header size */
    height: 200px;
    max-height: 200px;

    #header {
        position: sticky;
        top: 0;
        z-index: 2000;
    }

    #nav {
        position: sticky;
        top: var(--header-h, 200px);
        z-index: 1999;
    }

    /* padding kept inside the 200px */
    padding: 14px 16px;
}

/* Column layout: logo on top, title below */
header.site-header .brand {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Logo: 80% of header height, centered */
header.site-header .site-logo {
    display: block;

    /* Use height-based sizing so it scales with header height */
    height: 90%;
    width: auto;
    max-width: 100%;

    /* Center the image horizontally */
    margin-left: auto;
    margin-right: auto;

    /* Prevent image overflow */
    object-fit: contain;
}

/* Title: align its left edge with the centered image's left edge */
header.site-header .title {
    margin-top: auto;
    padding-bottom: 15px;

    /* Make the title box shrink to its content width,
       then center that box the same way the logo is centered */
    width: fit-content;
    margin-left: auto;
    margin-right: auto;

    /* Text inside the box is left-aligned */
    text-align: left;

    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    text-shadow: var(--glow);
}

header.site-header {
    position: relative;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    height: 200px;
    max-height: 200px;
    padding: 14px 16px;
    overflow: hidden; /* contain overlays */
}

/* Subtle texture layer */
header.site-header::before {
    content: "";
    position: absolute;
    inset: 0;

    /* Optional: fade it out toward the center so logo stays clean */
    mask-image: radial-gradient(
        circle at 50% 40%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 70%
    );
}

/* Ensure your real header content stays above the overlay */
header.site-header .brand {
    position: relative;
    z-index: 1;
}