/*
 * Page frame: background, header bars, mobile menu, notices, footer.
 * Derived from the Radio Nukular phpBB style (#nav_nklr, #nklr_footer, …).
 */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* 13px base (the original design used 12px, which read too small); rem-based shared styles scale along. */
html { font-size: 81.25%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-variation-settings: "wght" 450;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--bg);
    background-image: url("images/nukular-bg-aTN9-hY.webp");
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

.rn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.rn-wrap {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 5px;
}

/* ---- Header ------------------------------------------------------------ */

.rn-header {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0 0 10px;
}

.rn-mainnav {
    background-color: var(--rn-bar-bg);
    border-bottom: 4px solid var(--rn-ink);
    color: #000;
}

.rn-mainnav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    min-height: 75px;
}

.rn-leftnav { display: flex; align-items: center; gap: 5px; }
.rn-navbuttons { display: flex; flex-wrap: wrap; gap: 5px 10px; }

.rn-navbutton,
.rn-burger {
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid var(--rn-ink);
    border-radius: var(--radius);
    background-color: #fff;
    background-image: linear-gradient(#ffffff4d 4%, #0000 8% 92%, #0000001c 96%);
    box-shadow: 0 3px 2px var(--rn-yellow-shadow), 0 3px 2px #e3dfd7 inset;
    color: #000;
    font: inherit;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.rn-navbutton:hover,
.rn-navbutton:focus-visible,
.rn-burger:hover,
.rn-burger[aria-expanded="true"] {
    background-color: var(--rn-coral);
    color: #fff;
    text-shadow: 1px 1px #000;
    box-shadow: 0 3px 2px var(--rn-yellow-shadow);
}

.rn-burger { display: none; padding: 6px 12px; }

.rn-logo { display: block; line-height: 0; }
.rn-logo img { height: 55px; width: auto; }

.rn-userbox {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 5px;
}

.rn-usercard {
    padding: 5px 8px;
    border: 2px solid var(--rn-ink);
    border-radius: var(--radius-lg);
    background: #fff;
    color: #000;
    text-align: right;
}

.rn-usercard a { color: #000; }
.rn-usercard a:hover { color: var(--rn-coral); }
.rn-greeting { display: block; }
.rn-greeting a { font-weight: bold; text-decoration: none; }

.rn-usernav {
    display: flex;
    justify-content: flex-end;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.rn-usernav li { padding: 0 3px; border-left: 1px solid #ccc; }
.rn-usernav li:first-child { border-left: 0; }
.rn-usernav a { text-decoration: none; white-space: nowrap; }
.rn-usernav-label { margin-left: 2px; }

.rn-usernav .notif-badge,
.rn-usernav .pm-badge {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--rn-red);
    color: #fff;
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
}

.rn-guestcard { display: flex; gap: 12px; font-weight: bold; text-transform: uppercase; }
.rn-guestcard a { text-decoration: none; }
.rn-guestcard .fa-fw { margin-right: 3px; }

.rn-avatar { line-height: 0; }
.rn-avatar img,
.rn-avatar .rn-avatar-dummy {
    width: 55px;
    height: 55px;
    border: 2px solid var(--rn-ink);
    border-radius: var(--radius-lg);
    background: #fff;
    object-fit: cover;
}

.rn-avatar-dummy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #000;
    font-size: 32px;
}

.rn-mobilenav {
    background-color: var(--rn-bar-bg);
    border-bottom: 2px solid var(--rn-ink);
    padding: 5px;
    font-size: 1.2em;
}

.rn-mobilenav ul { margin: 0; padding: 0; list-style: none; }
.rn-mobilenav a {
    display: block;
    padding: 8px 12px;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}
.rn-mobilenav a:hover { color: #fff; }

.rn-subnav {
    background-color: var(--rn-subnav-bg);
    border-bottom: 2px solid var(--rn-ink);
    color: var(--rn-subnav-text);
}

.rn-subnav .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    min-height: 2.25em;
    padding: 4px 0;
    font-weight: bold;
}

.rn-subnav .breadcrumb a { color: var(--link); text-decoration: none; }
.rn-subnav .breadcrumb a:hover { color: var(--link-hover); text-decoration: underline; }
.rn-subnav .breadcrumb .fa-house { margin-right: 4px; }
.rn-crumb-sep { color: var(--text-faint); }

.rn-modnav {
    background-color: var(--rn-modnav-bg);
    border-bottom: 2px solid var(--rn-modnav-border);
    color: var(--rn-modnav-text);
    padding: 3px 0;
}

.rn-modnav a { color: inherit; font-weight: bold; }

/* Notification panel (shared markup): above the sticky header, opening below the yellow bar. */
.notif-overlay {
    z-index: 20;
    padding-top: 85px;
}

/* ---- Content & notices ------------------------------------------------- */

.rn-content { flex: 1 0 auto; }


.flash,
.verify-banner {
    width: calc(100% - 10px);
    max-width: var(--page-width);
    margin: 0 auto 10px;
    padding: 8px 12px;
    border: 2px solid var(--rn-ink);
    border-radius: var(--radius);
    box-shadow: var(--rn-box-shadow);
    font-weight: bold;
}

.flash-success { background: var(--flash-success-bg); color: var(--flash-success-text); }
.flash-error { background: var(--flash-error-bg); color: var(--flash-error-text); }
.flash-warning { background: var(--flash-warning-bg); color: var(--flash-warning-text); }

.verify-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    background: var(--flash-warning-bg);
    color: var(--flash-warning-text);
}
.verify-banner form { margin: 0; }

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

.rn-footer {
    position: relative;
    margin-top: 20px;
    overflow-x: clip; /* the corner artwork is partly pushed off-screen */
}

.rn-footer > .rn-wrap {
    position: relative;
    z-index: 1;
}

.rn-footer-deco {
    position: absolute;
    bottom: 0;
    z-index: 0;
    width: auto;
    height: 220px;
    pointer-events: none;
}

.rn-footer-deco-left { left: -95px; }
.rn-footer-deco-right { right: -95px; }

/* Only where the corners beside the footer are wide enough (~200px each beside the 1419px
   page width); otherwise it runs into the copyright row. */
@media (max-width: 1819px) {
    .rn-footer-deco { display: none; }
}

.rn-footer-frame {
    padding: 5px;
    border: 2px solid var(--rn-ink);
    border-radius: var(--radius-lg);
    background-color: #fff;
}

.rn-footer-panel {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px 40px;
    min-height: 150px;
    padding: 40px;
    border-radius: var(--radius);
    background-color: var(--rn-bar-bg);
    color: #000;
}

.rn-footer-brand { flex: 0 0 auto; }
.rn-footer-logo { display: block; width: 150px; height: auto; }

.rn-social { display: flex; flex-wrap: wrap; margin-top: 20px; }
.rn-social a { display: block; width: 24px; height: 24px; margin: 0 7px; color: #000; }
.rn-social a:first-child { margin-left: 0; }
.rn-social a:hover { color: #333; }
.rn-social svg { display: block; width: 24px; height: 24px; }

/* The barbarian stands in front of the panel and is cut off at the bottom of the page. */
.rn-footer-barbarian {
    position: absolute;
    bottom: 0;
    left: 42%;
    z-index: 2;
    width: 270px;
    height: auto;
    pointer-events: none;
}

/* Below this width he would cover the cart and the link columns. */
@media (max-width: 1099px) {
    .rn-footer-barbarian { display: none; }
}

/* The cart hangs out over the bottom edge of the panel. */
.rn-footer-picture {
    position: relative;
    z-index: 2;
    align-self: flex-end;
    width: 250px;
    height: auto;
    margin-bottom: -100px;
}

.rn-footer-columns { display: flex; flex-wrap: wrap; gap: 20px 30px; margin-left: auto; }
.rn-footer-column h2 { margin: 0 0 4px; font-size: 1.25em; font-weight: 700; text-transform: uppercase; }
.rn-footer-column ul { margin: 0; padding: 0; list-style: none; }
.rn-footer-column li { line-height: 2em; text-transform: uppercase; }
.rn-footer-panel a { color: #000; text-decoration: none; }
.rn-footer-panel a:hover,
.rn-footer-panel a:focus { color: #000; text-decoration: underline; }

.rn-copyright { min-height: 90px; padding: 10px 0 20px; color: #fff; text-align: right; }
.rn-copyright p { margin: 0 0 4px; }
.rn-copyright a { color: #eee; }

/* ---- Small screens ----------------------------------------------------- */

@media (max-width: 900px) {
    .rn-burger { display: inline-block; }
    .rn-navbuttons { display: none; }
    .rn-greeting,
    .rn-usernav-label,
    .rn-avatar { display: none; }
    .rn-usercard { padding: 4px 6px; }
    .rn-guestcard { flex-direction: column; gap: 0; text-align: right; }
    .rn-footer-picture { display: none; }
    .rn-copyright { min-height: 0; }
    .rn-copyright .rn-credit { display: block; }
    .rn-footer-panel { padding: 20px; }
    .rn-footer-columns { margin-left: 0; }
    /* Below the overview the home crumb shows only its icon; the label stays for screen readers. */
    .rn-crumb-home .rn-crumb-home-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .rn-crumb-home .fa-house { margin-right: 0; }
}

@media (min-width: 901px) {
    /* The mobile menu never shows on wide screens, even if it was left open. */
    .rn-mobilenav { display: none !important; }
}