/*
    Sanctuary - shared styling for the public site and the launcher's news panel.

    The palette is the launcher's own, transcribed from src/Sanctuary.Launcher/Theme.xaml
    ("warm parchment-and-ink, meant to sit next to the game rather than Windows"). Keep the
    two in step: banner.html is displayed inside the launcher, so any drift shows up as a
    seam down the middle of the window.

    No webfont, and no external request of any kind. system-ui resolves to Segoe UI on
    Windows, which is exactly what the launcher chrome around the banner uses - a webfont
    would make the panel visibly not belong. It also means the page loads instantly, works
    behind any firewall, and leaks nothing to a third party.
*/

:root {
    --backdrop: #14100C;
    --panel: #1E1812;
    --panel-raised: #272019;
    --gold: #D8B46A;
    --gold-bright: #E7C98D;
    --ink: #E8DCC8;
    --ink-muted: #9C9081;
    --edge: #3A3128;
    --good: #7FB069;
    --warn: #E0A458;
    --bad: #D9534F;

    --measure: 64rem;
    --radius: 4px;

    color-scheme: dark;
}

/* --- reset ------------------------------------------------------------- */

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

body {
    margin: 0;
    background: var(--backdrop);
    color: var(--ink);
    font: 16px/1.6 system-ui, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; }

a {
    color: var(--gold);
    text-underline-offset: 3px;
    text-decoration-color: rgba(216, 180, 106, .45);
}

a:hover { text-decoration-color: var(--gold); }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* --- shared pieces ------------------------------------------------------ */

.wordmark {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--gold);
    text-transform: uppercase;
    text-decoration: none;
}

.label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.card {
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    padding: 1.6rem;
}

.btn {
    display: inline-block;
    padding: .8rem 1.7rem;
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    color: var(--gold);
    background: transparent;
    transition: background-color .15s ease, color .15s ease;
}

.btn:hover { background: rgba(216, 180, 106, .14); }

.btn--primary { background: var(--gold); color: var(--backdrop); }
.btn--primary:hover { background: var(--gold-bright); }

/*
    The status pill.

    Three states, not two. "unknown" is the state the page ships in and the state a failed
    fetch returns to - because a fetch failing means the account service could not be
    reached, which is a different fact from the realm being down. Saying "down" there would
    be a guess presented as knowledge.
*/

.status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .9rem;
    border: 1px solid var(--edge);
    border-radius: 999px;
    background: var(--panel);
    font-size: .82rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

.status::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.status.is-up { color: var(--good); border-color: rgba(127, 176, 105, .5); }
.status.is-down { color: var(--bad); border-color: rgba(217, 83, 79, .5); }
.status.is-unknown { color: var(--ink-muted); }

@media (prefers-reduced-motion: no-preference) {
    .status.is-up::before { animation: pulse 2.4s ease-in-out infinite; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* ======================================================================== */
/* The public site                                                          */
/* ======================================================================== */

.wrap {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.4rem;
    border-bottom: 1px solid var(--edge);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    font-size: .9rem;
}

.site-nav a { text-decoration: none; color: var(--ink); }
.site-nav a:hover { color: var(--gold); }

/*
    The hero. Built from gradients rather than artwork - the launcher's world map is
    Blizzard's, and a public page is a different proposition from a local panel. The
    background is layered so a photograph can be dropped in later without touching
    anything else.
*/

.hero {
    position: relative;
    padding-block: 6rem 5rem;
    text-align: center;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(216, 180, 106, .10), transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(39, 32, 25, .8), transparent 70%);
    border-bottom: 1px solid var(--edge);
}

.hero h1 {
    font-size: clamp(2.4rem, 7vw, 4rem);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.1rem;
}

.hero .tagline {
    font-size: clamp(1.05rem, 2.4vw, 1.3rem);
    color: var(--ink);
    max-width: 34rem;
    margin-inline: auto;
}

.hero .sub {
    margin-top: .9rem;
    color: var(--ink-muted);
    max-width: 34rem;
    margin-inline: auto;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    justify-content: center;
    margin-top: 2.2rem;
}

.hero-note {
    margin-top: 1.1rem;
    font-size: .85rem;
    color: var(--ink-muted);
}

.hero-status { margin-top: 1.8rem; }

/* Sections ------------------------------------------------------------- */

.section { padding-block: 4.5rem; }
.section + .section { border-top: 1px solid var(--edge); }

.section-head {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto 2.8rem;
}

.section-head h2 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    color: var(--gold);
    margin-bottom: .7rem;
}

.section-head p { color: var(--ink-muted); }

.grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.pillar h3 {
    font-size: 1.1rem;
    color: var(--gold);
    margin-bottom: .7rem;
}

.pillar p + p { margin-top: .7rem; }
.pillar .aside { color: var(--ink-muted); font-size: .92rem; }

/* Steps ----------------------------------------------------------------- */

.steps {
    list-style: none;
    counter-reset: step;
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.steps li {
    counter-increment: step;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    padding: 1.6rem;
}

.steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: .9rem;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
    font-weight: 700;
    font-size: .9rem;
}

.steps h3 { font-size: 1rem; margin-bottom: .5rem; }
.steps p { color: var(--ink-muted); font-size: .94rem; }

code {
    font-family: Consolas, ui-monospace, monospace;
    font-size: .92em;
    background: var(--panel-raised);
    border: 1px solid var(--edge);
    border-radius: 3px;
    padding: .1rem .4rem;
    color: var(--ink);
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--edge);
    padding-block: 2.4rem 2.8rem;
}

.social {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social a {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 1px solid var(--edge);
    border-radius: 50%;
    color: var(--ink-muted);
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.social a:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(216, 180, 106, .1);
}

/* Sized here rather than on the paths, which carry no colour of their own. */
.social svg {
    display: block;
    width: 1.3rem;
    height: 1.3rem;
}

/* ======================================================================== */
/* The launcher's news panel                                                */
/* ======================================================================== */

/*
    Sized for the WebView2 panel in the launcher, not for a browser window: about
    980 x 430 CSS px at the default window size, down to 838 x 328 at the launcher's
    minimum. There is no scrollbar affordance in that panel and no way to reach one
    comfortably, so this must fit without vertical scrolling at the smaller size.
*/

body.banner {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.7rem;
    background:
        radial-gradient(ellipse 70% 90% at 100% 0%, rgba(216, 180, 106, .09), transparent 65%),
        var(--backdrop);
}

.banner-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--edge);
    flex: none;
}

.banner-head h1 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold);
}

.banner-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 15rem;
    gap: 1.6rem;
    padding-top: 1.1rem;
}

.news {
    min-height: 0;
    overflow-y: auto;
    padding-right: .4rem;
}

.news .label, .news h2 { display: block; margin-bottom: .45rem; }

.news-item { padding-bottom: .55rem; }
.news-item + .news-item { border-top: 1px solid var(--edge); padding-top: .55rem; }

.news-item time {
    display: block;
    font-size: .72rem;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: .1rem;
}

.news-item h3 { font-size: .95rem; color: var(--ink); margin-bottom: .2rem; }

/*
    Clamped to two lines so every entry is the same height whatever gets written into it.
    Without this the panel's fit depends on how long the newest summary happens to be -
    three items with generous text overflow the default window and the last one is cut off
    mid-sentence, which reads as a broken page rather than a full one.
*/
.news-item p {
    font-size: .88rem;
    color: var(--ink-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.banner-side {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    align-items: flex-start;
    border-left: 1px solid var(--edge);
    padding-left: 1.6rem;
}

.banner-side .btn { width: 100%; text-align: center; padding: .6rem 1rem; font-size: .88rem; }
.banner-side p { font-size: .82rem; color: var(--ink-muted); }

/* The launcher's minimum window, where every spare pixel matters. */
@media (max-height: 380px) {
    body.banner { padding: 1.1rem 1.2rem; }
    .banner-body { grid-template-columns: 1fr 13rem; gap: 1.2rem; padding-top: .8rem; }
    .banner-side { padding-left: 1.2rem; }
    .news-item p { display: none; }
}

/* --- narrow screens ----------------------------------------------------- */

@media (max-width: 40rem) {
    .site-header { flex-direction: column; align-items: flex-start; gap: .9rem; }
    .site-nav { gap: 1.2rem; }
    .hero { padding-block: 4rem 3.5rem; }
    .section { padding-block: 3.2rem; }
    .hero-actions .btn { width: 100%; text-align: center; }
}