/* ==========================================================================
   XP-ERA THEME (RED AERO VARIANT) — same structure/classes as the original
   XP theme (header/toolbar/nav, panels, photo frame, columns, bottom bar),
   restyled with the red-ribbon-on-black palette and TRUE Aero glass
   transparency (backdrop-filter blur + low-opacity backgrounds).

   HOW TO USE:
   1. Upload your background image into an "images" folder, e.g.
      images/Background07.jpg
   2. Confirm --xp-bg-image below matches that exact filename/path.
   3. Link this stylesheet in your <head>:
        <link rel="stylesheet" href="css/xp-theme.css">
   Your HTML doesn't need to change — same class names as before
   (.xp-header, .xp-panel, .xp-nav-links, .xp-photo-frame, etc.)
   ========================================================================== */

:root {
    /* --- Background image --- */
    --xp-bg-image: url('/images/Background07.jpg');

    /* --- Chrome gradient (title bars, nav) — red instead of blue --- */
    --xp-chrome-top: #ff4a4a;
    --xp-chrome-mid: #e2101c;
    --xp-chrome-bottom: #5a0509;

    /* --- Glass panels — THIS is what makes it transparent/Aero --- */
    /* Lower alpha = more background image shows through. */
    --xp-panel-bg: rgba(20, 0, 0, 0.22);
    --xp-panel-border: rgba(255, 90, 90, 0.5);
    --xp-panel-shadow: rgba(0, 0, 0, 0.6);
    --xp-glass-blur: 14px;

    /* --- Cream accent panel becomes a warm red-tinted glass panel --- */
    --xp-cream-bg: rgba(60, 10, 10, 0.35);
    --xp-cream-border: rgba(255, 120, 120, 0.4);

    /* --- Text --- */
    --xp-text-dark: #ffffff;
    --xp-text-light: #ffffff;
    --xp-text-muted: #ffcccc;
    --xp-link: #ff6b6b;

    /* --- Shape --- */
    --xp-radius: 12px;

    /* --- Typography --- */
    --xp-font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
}

/* ==========================================================================
   PAGE BACKGROUND — the red ribbon image instead of CSS sky/hills
   ========================================================================== */

.xp-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--xp-font-family);
    color: var(--xp-text-dark);
    background-color: #000;
    background-image: var(--xp-bg-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed; /* panels "float" over a still image while scrolling */
    position: relative;
    overflow-x: hidden;
}

.xp-content-wrap {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   HEADER / CHROME NAV BAR — now glass instead of solid
   ========================================================================== */

.xp-header {
    max-width: 760px;
    margin: 20px auto 0 auto;
    border: 1px solid var(--xp-panel-border);
    border-radius: var(--xp-radius);
    box-shadow: 4px 6px 16px var(--xp-panel-shadow);
    overflow: hidden;
    backdrop-filter: blur(var(--xp-glass-blur));
    -webkit-backdrop-filter: blur(var(--xp-glass-blur));
}

.xp-header .xp-titlebar {
    background: linear-gradient(to bottom, var(--xp-chrome-top), var(--xp-chrome-mid) 60%, var(--xp-chrome-bottom));
    color: var(--xp-text-light);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
    padding: 10px 14px;
    font-size: 0.95em;
    font-weight: bold;
}

.xp-header .xp-toolbar {
    background: rgba(20, 0, 0, 0.35);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid var(--xp-panel-border);
}

.xp-header .xp-brand {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--xp-text-light);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.xp-header .xp-tagline {
    font-size: 0.75em;
    color: var(--xp-text-muted);
    display: block;
}

.xp-header .xp-search input {
    padding: 5px 8px;
    border: 1px solid var(--xp-panel-border);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--xp-text-light);
}

.xp-header .xp-search button {
    padding: 5px 12px;
    border: 1px solid var(--xp-chrome-bottom);
    border-radius: 3px;
    background: linear-gradient(to bottom, var(--xp-chrome-top), var(--xp-chrome-bottom));
    color: var(--xp-text-light);
    cursor: pointer;
}

.xp-header .xp-nav-links {
    background: linear-gradient(to bottom, rgba(90, 5, 9, 0.7), rgba(20, 0, 0, 0.7));
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 10px;
}

.xp-header .xp-nav-links a {
    color: var(--xp-text-light);
    text-decoration: none;
    font-size: 0.85em;
    padding: 4px 8px;
    border-radius: 3px;
}

.xp-header .xp-nav-links a:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   PANEL — now genuinely see-through glass, same class names as before
   ========================================================================== */

.xp-panel {
    position: relative;
    background: var(--xp-panel-bg);
    border: 1px solid var(--xp-panel-border);
    border-radius: var(--xp-radius);
    box-shadow: 4px 6px 16px var(--xp-panel-shadow);
    margin-bottom: 16px;
    backdrop-filter: blur(var(--xp-glass-blur));
    -webkit-backdrop-filter: blur(var(--xp-glass-blur));
    overflow: hidden;
}

/* Glossy sheen across the top, like the other Aero panels */
.xp-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.xp-panel .xp-panel-title {
    background: linear-gradient(to bottom, var(--xp-chrome-top), var(--xp-chrome-mid) 60%, var(--xp-chrome-bottom));
    color: var(--xp-text-light);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    font-weight: bold;
    position: relative;
}

.xp-panel .xp-panel-body {
    padding: 12px;
    position: relative;
}

/* More opaque variant for text-heavy panels — add class="xp-panel xp-panel--solid" */
.xp-panel--solid {
    background: rgba(15, 0, 0, 0.55);
}

/* Accent panel variant (was cream, now a warm red-tinted glass) */
.xp-panel--cream .xp-panel-body {
    background: var(--xp-cream-bg);
    border-top: 1px solid var(--xp-cream-border);
}

/* ==========================================================================
   PHOTO FRAME
   ========================================================================== */

.xp-photo-frame {
    width: 120px;
    height: 120px;
    border: 6px ridge rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
    background: rgba(60, 60, 60, 0.5); /* placeholder swatch — replace with a real photo */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ddd;
    font-size: 0.8em;
    text-align: center;
}

/* ==========================================================================
   TWO-COLUMN LAYOUT (unchanged structure)
   ========================================================================== */

.xp-columns {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    gap: 16px;
    padding: 16px 0;
    align-items: flex-start;
}

.xp-col-left {
    width: 260px;
    flex-shrink: 0;
}

.xp-col-right {
    flex-grow: 1;
}

@media (max-width: 650px) {
    .xp-columns { flex-direction: column; }
    .xp-col-left { width: 100%; }
}

/* ==========================================================================
   LINK LIST
   ========================================================================== */

.xp-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.xp-link-list li {
    padding: 6px 4px;
    border-bottom: 1px dashed var(--xp-cream-border);
}

.xp-link-list li:last-child {
    border-bottom: none;
}

.xp-link-list a {
    color: var(--xp-link);
    text-decoration: underline;
}

/* ==========================================================================
   BOTTOM BAR — red/black gradient instead of green
   ========================================================================== */

.xp-bottom-bar {
    background: linear-gradient(to bottom, rgba(90, 5, 9, 0.75), rgba(10, 0, 0, 0.85));
    backdrop-filter: blur(var(--xp-glass-blur));
    -webkit-backdrop-filter: blur(var(--xp-glass-blur));
    color: var(--xp-text-light);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
    padding: 8px 14px;
    display: flex;
    gap: 14px;
    font-size: 0.85em;
    position: relative;
    z-index: 1;
}

.xp-bottom-bar a {
    color: var(--xp-text-light);
    text-decoration: none;
}

.xp-bottom-bar a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 650px) {
    .xp-body {
        background-attachment: scroll; /* fixed backgrounds can be janky on mobile */
    }
}