/* ========================================
   STAR WARS SKIN
   Black-of-space background with the iconic opening-crawl yellow as the
   primary accent. Overrides the shared custom properties defined per-skin
   in assets/css/skin-fallout.css / inc/theme-skins.php. Selectors include
   the .login variant explicitly so this file wins on specificity
   regardless of stylesheet print order.
   ======================================== */

/* Freeware, commercial use requires donation - see assets/fonts/ */
@font-face {
    font-family: 'Soloist';
    src: url('../fonts/soloist.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body.dwh-skin-starwars,
body.login.dwh-skin-starwars {
    --dwh-background: #000000;
    --dwh-surface: #0d0d0d;
    --dwh-surface-hover: #1c1c1c;
    --dwh-text: #e8e8e8;
    --dwh-text-secondary: #b0b0b0;
    --dwh-text-muted: #6b6b6b;
    --dwh-primary: #ffe81f;
    --dwh-primary-hover: #fff27a;
    --dwh-border: #ffe81f;
    --dwh-border-muted: #4a4310;
    --dwh-error: #e0402a;
    --dwh-success: #2fbf2f;
    --dwh-warning: #ffe81f;

    /* A faint blue rim layered under the yellow glow, echoing the crossed
       lightsabers' green/blue duel rather than pure monochrome yellow */
    --dwh-glow: 0 0 6px rgba(255, 232, 31, 0.55);
    --dwh-glow-strong: 0 0 10px rgba(255, 232, 31, 0.75), 0 0 22px rgba(255, 232, 31, 0.4), 0 0 34px rgba(46, 125, 214, 0.18);
    --dwh-form-shadow: 0 0 24px rgba(255, 232, 31, 0.15), inset 0 0 20px rgba(255, 232, 31, 0.04);

    --dwh-font-primary: 'Oswald', 'Arial Narrow', sans-serif;
    --dwh-font-heading: 'Soloist', 'Oswald', 'Arial Narrow', sans-serif;

    --dwh-font-size-base: 16px;
    --dwh-font-size-sm: 14px;
    --dwh-font-size-lg: 18px;
    --dwh-font-size-xl: 24px;
    --dwh-font-size-2xl: 32px;
}

@media (max-width: 480px) {
    body.dwh-skin-starwars {
        --dwh-font-size-base: 14px;
    }
}

/* Oswald is condensed and reads best bold/uppercase with a bit of room */
body.dwh-skin-starwars h1,
body.dwh-skin-starwars h2,
body.dwh-skin-starwars h3,
body.dwh-skin-starwars h4,
body.dwh-skin-starwars h5,
body.dwh-skin-starwars h6 {
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Site title on the login screen, tilted back into the distance like the
   opening crawl. A real 3D perspective tilt reads truer to "the classic
   scrawl" than italics on a font with no italic face of its own. Soloist
   already has a strong built-in slant and runs wider than the shared 32px/
   4px-letter-spacing default was sized for (it was overflowing the login
   box's fixed width), so both are dialed back here. */
body.login.dwh-skin-starwars h1 a {
    display: inline-block;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0;
    transform: perspective(280px) rotateX(24deg);
    transform-origin: center top;
}

/* A deep-space starfield behind everything - plain black read as "just a
   dark theme" without it. Scattered dots (mostly white, one yellow) tiled
   across a 400x400 field so it doesn't visibly repeat at normal viewport
   widths. Sits behind every surface, which all set their own solid
   background-color, so it only shows in the page gutters/margins. */
body.dwh-skin-starwars,
body.login.dwh-skin-starwars {
    background-color: var(--dwh-background);
    background-repeat: repeat;
    background-size: 400px 400px;
    background-image:
        radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.9), transparent 100%),
        radial-gradient(1px 1px at 65px 120px, rgba(255, 255, 255, 0.6), transparent 100%),
        radial-gradient(1.5px 1.5px at 140px 60px, rgba(255, 255, 255, 0.8), transparent 100%),
        radial-gradient(1px 1px at 180px 190px, rgba(255, 255, 255, 0.5), transparent 100%),
        radial-gradient(2px 2px at 240px 40px, rgba(255, 232, 31, 0.7), transparent 100%),
        radial-gradient(1px 1px at 280px 150px, rgba(255, 255, 255, 0.7), transparent 100%),
        radial-gradient(1px 1px at 320px 90px, rgba(255, 255, 255, 0.4), transparent 100%),
        radial-gradient(1.5px 1.5px at 350px 220px, rgba(255, 255, 255, 0.9), transparent 100%),
        radial-gradient(1px 1px at 40px 250px, rgba(255, 255, 255, 0.5), transparent 100%),
        radial-gradient(1px 1px at 100px 300px, rgba(255, 255, 255, 0.7), transparent 100%),
        radial-gradient(2px 2px at 200px 280px, rgba(255, 255, 255, 0.6), transparent 100%),
        radial-gradient(1px 1px at 380px 320px, rgba(255, 255, 255, 0.5), transparent 100%),
        radial-gradient(1px 1px at 10px 380px, rgba(255, 255, 255, 0.4), transparent 100%),
        radial-gradient(1.5px 1.5px at 160px 350px, rgba(255, 255, 255, 0.8), transparent 100%),
        radial-gradient(1px 1px at 300px 380px, rgba(255, 255, 255, 0.6), transparent 100%);
}

/* The header/body divider is three lightsaber colors side by side instead
   of a single yellow line - green and blue match the crossed-lightsabers
   mascot exactly, red stands in for the Sith/Vader blade. border-image
   is used instead of border-color so the bar can carry a gradient. */
body.dwh-skin-starwars .site-header {
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(to right, #2fbf2f 0%, #2fbf2f 33.33%, #2e7dd6 33.33%, #2e7dd6 66.66%, #c0392b 66.66%, #c0392b 100%) 1;
}

/* Same tricolor bar on the footer's top edge, the other bar separating
   page body from chrome */
body.dwh-skin-starwars .site-footer {
    border-top: 4px solid transparent;
    border-image: linear-gradient(to right, #2fbf2f 0%, #2fbf2f 33.33%, #2e7dd6 33.33%, #2e7dd6 66.66%, #c0392b 66.66%, #c0392b 100%) 1;
}

/* Homepage hero title only (not the persistent nav-bar logo, which stays
   the shared neutral text color so the sticky header doesn't tilt on
   every page) - yellow and tilted back like the opening crawl, echoing
   the login title treatment on the very first thing you see. */
body.dwh-skin-starwars .home-hero .site-title {
    display: inline-block;
    color: var(--dwh-primary);
    text-shadow: var(--dwh-glow-strong);
    transform: perspective(500px) rotateX(20deg);
    transform-origin: center top;
}

/* Recolor the select-arrow SVG (style.css hardcodes a green fill) to match */
body.dwh-skin-starwars select,
body.login.dwh-skin-starwars .language-switcher select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffe81f' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}