/* Copyright © 2025 RPGScience. All rights reserved. No permission is granted to use, copy, modify, or distribute this file. */

/* Reuse before you add. The house rule for this site's CSS is at the top of
   tokens.css. */

/* The whole-page layouts: the landing view, the gallery, the FAQ, the pricing
   page and the site footer. Needs tokens.css and components.css before it, and a
   page that only shows a map does not need it at all.

   These rules are allowed to be specific to one page. Anything two pages share
   belongs in components.css instead. */

/* ============================================================
   Shared hero band and generator cards (.hub-*)
   Used by two pages: the landing view at "/" (#hub-view below)
   and the gallery at "/gallery". A dark hero band says what the
   app does, then four cards let the reader pick a generator.
   World is the big one, dungeon/cave/glade sit in a row below.
   Keep these class names out of page-specific styles so both
   pages stay in step.
   ============================================================ */
#hub-view {
    display: block;
    width: 100%;
    flex: 1;
    background: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

.hub-page {
    min-height: calc(100vh - var(--header-height, 44px));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* --- Dark hero band. Sits flush under the header, which shares --nav-bg. --- */
.hub-hero {
    background-color: var(--nav-bg);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 100%);
    padding: 44px 24px 40px;
    text-align: center;
}

.hub-hero-inner {
    max-width: 700px;
    margin: 0 auto;
}

.hub-logo {
    height: 96px;
    width: auto;
    display: block;
    margin: 0 auto 10px;
}

.hub-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
}

.hub-title {
    margin: 14px 0 10px;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 800;
    color: #ffffff;
}

/* text-wrap: balance evens out the lines, so a centred lede never ends on a
   single stranded word. Browsers that do not support it just wrap as before. */
.hub-lede {
    margin: 0 auto 14px;
    max-width: 34rem;
    font-size: 17px;
    line-height: 1.45;
    color: #d3d9de;
    text-wrap: balance;
}

.hub-trust {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #9aa5ae;
}

/* --- The chooser: four cards that all read as the same kind of thing. --- */
.hub-choose {
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: 36px 24px 56px;
    box-sizing: border-box;
}

/* The two section headings above the World card and the trio below it. Both sit
   above the card titles in the scale so nothing beneath them outranks them. */
.hub-choose-title,
.hub-row-label {
    margin: 0 0 18px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-headings);
}

/* The chooser's own heading matches .gal-h2, so on the gallery the chooser and
   the sections below it read as the same rank. The row label stays a step
   smaller, because it introduces a group inside the chooser. */
.hub-choose-title {
    font-size: 30px;
    font-weight: 800;
}

.hub-card {
    display: flex;
    text-decoration: none;
    color: inherit;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    box-shadow: var(--panel-shadow);
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.hub-card:hover,
.hub-card:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    transform: translateY(-3px);
}

.hub-card:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.hub-card-media {
    overflow: hidden;
    background: var(--border-color);
}

.hub-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.hub-kicker {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-byline);
}

/* All four cards share one title size so they read as a single choice set. */
.hub-card-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
}

.hub-card-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* CTAs look like buttons at rest so the cards are obviously clickable. All four
   share one width. The cap shrinks it when a narrow card cannot fit 210px. The
   face comes from the shared page CTA rules further down. */
.hub-cta {
    align-self: flex-start;
    width: 100%;
    max-width: 210px;
    margin-top: 8px;
}

.hub-card:hover .hub-cta-solid {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

/* --- World: the dominant card, image beside a wider body. --- */
.hub-card-primary {
    align-items: stretch;
    margin-bottom: 34px;
}

.hub-card-primary .hub-card-media {
    width: 46%;
    flex: 0 0 auto;
    aspect-ratio: 3 / 2;
}

.hub-card-primary .hub-card-body {
    padding: 24px 28px;
}

/* --- The three standalone maps. --- */
.hub-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

.hub-card-small {
    flex-direction: column;
}

.hub-card-small .hub-card-media {
    aspect-ratio: 4 / 3;
}

.hub-card-small .hub-card-body {
    justify-content: flex-start;
}

.hub-card-small .hub-card-desc {
    flex: 1 1 auto;
}

/* --- Site footer, used by "/", /gallery and /faq. Same look as the light
   footer still written by hand on /pricing, /terms and /privacy. --- */
.hub-footer {
    /* auto keeps the footer at the bottom on very tall screens. */
    margin-top: auto;
    padding: 40px 20px 30px;
    text-align: center;
    font-size: 0.85rem;
    color: #666;
}

.hub-footer div {
    margin-bottom: 8px;
}

.hub-footer a {
    color: #666;
    text-decoration: none;
}

.hub-footer a:hover {
    text-decoration: underline;
}

.hub-footer-sep {
    margin: 0 12px;
    color: #999;
}

/* Needs the a to outrank the generic footer link colour above. */
.hub-footer a.hub-footer-discord {
    color: #507bea;
}

.hub-footer-discord svg {
    vertical-align: middle;
}

.hub-footer-copyright {
    margin-bottom: 0;
    color: #999;
}

.hub-footer-copyright a {
    color: #999;
}

@media (max-width: 860px) {
    .hub-title {
        font-size: 30px;
    }

    /* Step the section headings down with the hero so they stay below it. */
    .hub-choose-title,
    .hub-row-label {
        font-size: 22px;
    }

    .hub-choose-title {
        font-size: 24px;
    }

    .hub-logo {
        height: 72px;
    }

    .hub-card-primary {
        flex-direction: column;
    }

    .hub-card-primary .hub-card-media {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .hub-row {
        grid-template-columns: 1fr;
    }

    .hub-card-small {
        flex-direction: row;
    }

    .hub-card-small .hub-card-media {
        width: 38%;
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-card {
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .hub-card:hover,
    .hub-card:focus-visible {
        transform: none;
    }
}

/* ============================================
   LONG CONTENT PAGES (/gallery and /faq)
   ============================================
   The shell, section and button styles both long overlay pages use, so the two
   pages cannot drift apart. Anything only one of them needs (the gallery's
   figures and theme tiles, the FAQ's answer list) stays in that page's own
   <style> block, along with the :has() rule that names its section ids. */

.gal {
    background: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

/* One content column for every section, matching the width of .hub-choose. */
.gal-wrap {
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* --- Section switcher. Names the page's sections and stays on screen. --- */
.gal-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--panel-shadow);
}

.gal-nav-inner {
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: 8px 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gal-nav-label {
    margin-right: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-byline);
}

.gal-nav a {
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-control);
    border: 1px solid var(--border-color);
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.gal-nav a:hover,
.gal-nav a:focus-visible {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

/* Pushes the trailing links away from the rest, for entries that are a
   different kind of thing from the ones before them. */
.gal-nav-end {
    margin-left: auto;
}

/* --- Sections --- */
.gal-section {
    padding: 44px 0 52px;
    border-top: 1px solid var(--border-color);
}

.gal-section-alt {
    background: var(--bg-panel);
}

.gal-h2 {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 800;
    color: var(--text-headings);
}

.gal-h3 {
    margin: 34px 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-headings);
}

.gal-lede {
    margin: 0 0 22px;
    max-width: 64ch;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* --- Feature lists --- */
.gal-facts {
    margin: 0 0 24px;
    padding-left: 0;
    columns: 2;
    column-gap: 32px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Indent per item, not on the list. In a two column list a padding on
   the <ul> would push the second column's bullets outside its column. */
.gal-facts li {
    margin: 0 0 5px 20px;
    break-inside: avoid;
}

.gal-facts li::marker {
    color: var(--accent-primary);
}

.gal-facts-1 {
    columns: 1;
}

/* --- Buttons. Box and faces are shared with the hub CTAs; see PAGE CTAS. --- */
.gal-cta {
    margin-top: 4px;
}

.gal-cta:hover,
.gal-cta:focus-visible {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

/* Secondary action, so a download does not shout as loudly as
   the buttons that start a generator. */
.gal-cta-quiet:hover,
.gal-cta-quiet:focus-visible {
    color: var(--accent-primary);
    background: var(--bg-control);
    border-color: var(--accent-primary);
}

.gal-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

/* --- Closing band, the dark strip that ends the page. --- */
.gal-closing {
    padding: 48px 0 56px;
    text-align: center;
    background: var(--nav-bg);
}

.gal-closing h2 {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
}

.gal-closing p {
    margin: 0 auto;
    max-width: 46rem;
    font-size: 16px;
    line-height: 1.5;
    color: #d3d9de;
}

@media (max-width: 860px) {
    .gal-h2 {
        font-size: 24px;
    }

    .gal-facts {
        columns: 1;
    }
}

/* Below this width the switcher no longer fits on one line. It becomes
   two rows, so the anchor offset has to grow to match, and pushing the
   trailing links to the right stops making sense. */
@media (max-width: 700px) {
    .content-overlay {
        scroll-padding-top: 96px;
    }

    .gal-nav-end {
        margin-left: 0;
    }
}