/* @import MUST be the first rule in the stylesheet (only @charset
   may precede it) - browsers silently drop it otherwise. It had
   been sitting below the footer rules below for this file's entire
   history, meaning Orbitron/Open Sans never actually loaded at all,
   site-wide, despite every font-family rule elsewhere "succeeding"
   (they just silently fell back to the sans-serif in the stack). */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Open+Sans:wght@400;600;700;800&display=swap');

/* SNES Freaks: 3-column footer menus (Social / Benutzermenü / Legal), site-specific override */
.container-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-col {
    flex: 1 1 200px;
}

/* ============================================================
   SNES dark theme, sourced from the 2018 Alexander Schmutz
   mockup (colors, fonts, header texture) + the 2016 template's
   controller-button palette. See Phase G of the migration plan.
   ============================================================ */

:root {
    --snes-blue: #3669AE;
    --snes-blue-h: #3c74c3;
    --snes-blue-a: #4f82c9;
    --snes-yellow: #E9BC00;
    --snes-yellow-h: #ffcc00;
    --snes-yellow-a: #ffd11a;
    --snes-green: #5AB32E;
    --snes-green-h: #66cb34;
    --snes-green-a: #76d049;
    --snes-red: #C20037;
    --snes-red-h: #e60041;
    --snes-red-a: #ff0048;
}

body {
    font-family: 'Open Sans', sans-serif;
}

/* -------- Header texture -------- */
.container-header {
    background-image: url('/media/templates/site/cassiopeia_extended/images/header-background.jpg');
    background-repeat: repeat-x;
    background-size: auto 100%;
    display: flex !important;
    flex-direction: column !important;
}

/* This element also gets .5em padding on all sides from core's
   .container-header .grid-child rule. The earlier padding-bottom
   override here was itself set to 0.5em - identical to that core
   default - so it never actually removed anything; only the
   short-lived negative-margin hacks changed the visible gap, and
   those were reverted. Confirmed via live DevTools inspection that
   this padding-bottom is the real remaining source of the grey gap
   below the nav pills; zeroing it here removes it for good. */
.container-header .container-nav {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Logo: sized and centered to match the mockup. 50% of our own
   1320px header content (660px) actually rendered larger than the
   mockup, since our header has less side padding than the mockup's
   own container - so the width below is pinned to the mockup's own
   measured absolute pixel width (585px at a 1400px viewport)
   instead of re-deriving a percentage of a differently-proportioned
   container. Core's own "margin-inline-end: auto" on .navbar-brand
   pushes it left by default (eating the row's free space on the
   right), so that needs resetting to 0 for justify-content:center
   on the row to actually center it. The nav row shares the same
   bare ".grid-child" class, so :not(.container-nav) scopes this to
   the logo's row only. */
.container-header .grid-child:not(.container-nav) {
    justify-content: center;
}

.container-header .navbar-brand {
    margin-inline-end: 0;
}

.container-header .navbar-brand img {
    width: 585px;
    max-width: 100%;
    height: auto;
}

/* -------- Breadcrumb: white, top-aligned, underlined -------- */
.mod-breadcrumbs.breadcrumb {
    background: #FFF;
    border-bottom: 1px solid #DFDFDF;
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

/* -------- Footer texture (matches header) -------- */
.container-footer,
.footer.container-footer {
    background-image: url('/media/templates/site/cassiopeia_extended/images/header-background.jpg');
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.footer-col a,
.footer-col .mod-menu a {
    color: #EEE;
}

.footer-col a:hover {
    color: #FFF;
}

/* -------- Main navigation: colored pills --------
   High-specificity selectors + !important throughout: Cassiopeia's own
   nav CSS apparently applies transparent-background / link-colored /
   underlined styling specifically to <a> tags (not <button>) at the
   same specificity, and wins the source-order tie against a plain
   two-class selector. Pinning tag name + full ancestor chain avoids
   depending on load order. */

/* Confirmed via live DevTools inspection: core rule
   .metismenu.mod-menu .metismenu-item sets padding: .5em 1em on the
   <li> itself, on top of (not instead of) whatever padding the pill
   <a>/<button>/<span> inside it has - stacking with the 12px 20px pill
   padding below to make the whole row visibly taller than intended.
   Zero out the vertical component only; the 1em horizontal component
   is the gutter between adjacent pills and is still needed. */
.metismenu.mod-menu .metismenu-item {
    padding: 0 1em !important;
}
ul.mod-menu_dropdown-metismenu li.metismenu-item > a.pill-blue,
ul.mod-menu_dropdown-metismenu li.metismenu-item > a.pill-yellow,
ul.mod-menu_dropdown-metismenu li.metismenu-item > a.pill-green,
ul.mod-menu_dropdown-metismenu li.metismenu-item > a.pill-red,
ul.mod-menu_dropdown-metismenu li.metismenu-item > button.pill-blue,
ul.mod-menu_dropdown-metismenu li.metismenu-item > button.pill-yellow,
ul.mod-menu_dropdown-metismenu li.metismenu-item > button.pill-green,
ul.mod-menu_dropdown-metismenu li.metismenu-item > button.pill-red,
ul.mod-menu_dropdown-metismenu li.metismenu-item > span.pill-blue,
ul.mod-menu_dropdown-metismenu li.metismenu-item > span.pill-yellow,
ul.mod-menu_dropdown-metismenu li.metismenu-item > span.pill-green,
ul.mod-menu_dropdown-metismenu li.metismenu-item > span.pill-red {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 0.75rem !important;
    color: #FFF !important;
    text-decoration: none !important;
    border: none !important;
    /* Dropdown items render as <button class="mm-toggler">, which
       carries core's own ".mm-toggler { height: 100%; display: flex; }"
       - it stretches to the flex row's full cross-axis height. Plain
       <a>/<span> pills (no dropdown) have no such rule and just size
       to their own content, ending up shorter. Force identical sizing
       on every pill regardless of tag: height:100% (not a fixed px
       guess - the li's own height is set by core's own metismenu-item
       rule and shouldn't be hardcoded here) + inline-flex centering
       wins over ".mm-toggler" via specificity and makes the arrow
       icon (a ::after on the button) center the same way. A fixed
       height here previously left a small gap since it undershot the
       li's real height, which core's align-items:center on the li
       then centered the pill within. */
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;
    box-shadow: inset 0 -20px 20px -30px rgba(0, 0, 0, 0.6);
}

ul.mod-menu_dropdown-metismenu li.metismenu-item > .pill-blue { background: var(--snes-blue) !important; }
ul.mod-menu_dropdown-metismenu li.metismenu-item > .pill-yellow { background: var(--snes-yellow) !important; }
ul.mod-menu_dropdown-metismenu li.metismenu-item > .pill-green { background: var(--snes-green) !important; }
ul.mod-menu_dropdown-metismenu li.metismenu-item > .pill-red { background: var(--snes-red) !important; }

ul.mod-menu_dropdown-metismenu li.metismenu-item > .pill-blue:hover { background: var(--snes-blue-h) !important; }
ul.mod-menu_dropdown-metismenu li.metismenu-item > .pill-yellow:hover { background: var(--snes-yellow-h) !important; }
ul.mod-menu_dropdown-metismenu li.metismenu-item > .pill-green:hover { background: var(--snes-green-h) !important; }
ul.mod-menu_dropdown-metismenu li.metismenu-item > .pill-red:hover { background: var(--snes-red-h) !important; }

ul.mod-menu_dropdown-metismenu li.metismenu-item > .pill-blue:active { background: var(--snes-blue-a) !important; }
ul.mod-menu_dropdown-metismenu li.metismenu-item > .pill-yellow:active { background: var(--snes-yellow-a) !important; }
ul.mod-menu_dropdown-metismenu li.metismenu-item > .pill-green:active { background: var(--snes-green-a) !important; }
ul.mod-menu_dropdown-metismenu li.metismenu-item > .pill-red:active { background: var(--snes-red-a) !important; }

/* MetisMenu uses its own mm-collapse/mm-show class pair (not Bootstrap's
   collapse/show), and ships no CSS of its own for the collapsed state -
   it relies entirely on JS-driven inline styles that, in practice, leave
   the submenu visibly expanded until first toggled. Latent bug, not
   something this reskin introduced - just newly obvious with color. */
.mod-menu_dropdown-metismenu ul.mm-collapse:not(.mm-show) {
    display: none;
}

/* Submenu dropdowns: match each panel's background to its own
   parent pill's color, rather than core's default white. The
   toggler <button>/<a> and its <ul class="mm-collapse"> are
   siblings under the same <li>, so :has() picks the right color
   per item instead of needing 4 separately-authored submenus. */
.mod-menu_dropdown-metismenu li.metismenu-item:has(> .pill-blue) > ul.mm-collapse {
    background: var(--snes-blue) !important;
}
.mod-menu_dropdown-metismenu li.metismenu-item:has(> .pill-yellow) > ul.mm-collapse {
    background: var(--snes-yellow) !important;
}
.mod-menu_dropdown-metismenu li.metismenu-item:has(> .pill-green) > ul.mm-collapse {
    background: var(--snes-green) !important;
}
.mod-menu_dropdown-metismenu li.metismenu-item:has(> .pill-red) > ul.mm-collapse {
    background: var(--snes-red) !important;
}

/* Mockup uses Orbitron uppercase for submenu items too, just at a
   lighter weight (700 vs the top-level pills' 900) - not a plain
   body-font fallback like this was set to before. */
/* The li.metismenu-item padding:0 fix earlier in this file (for the
   top-level pills' double-padding bug) also zeroed vertical padding
   on these level-2 submenu items, since that selector isn't scoped
   to level-1 only - leaving them visually flat. Padding it back out
   here, on the link itself rather than the li. */
.mod-menu_dropdown-metismenu ul.mm-collapse a {
    color: #FFF !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 0.75rem !important;
    padding: 12px 20px !important;
}

.mod-menu_dropdown-metismenu ul.mm-collapse a:hover {
    text-decoration: underline;
}

/* Active-page pill: core's own current-page indicator is a 2px
   white ::after at only 20% opacity - barely visible against the
   pill's own color. Boost it to full opacity and a bit thicker. */
.mod-menu_dropdown-metismenu a[aria-current="page"]::after {
    opacity: 0.6 !important;
    height: 4px !important;
    background: #FFF !important;
}

/* -------- Login: collapsible red key icon -------- */
.login-key-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--snes-red);
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

.login-key-toggle:hover {
    background: var(--snes-red-h);
}

.login-key-toggle img {
    width: 22px;
    height: 22px;
}

.login-dropdown-panel {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0;
    background: var(--snes-red);
    padding: 1.25rem;
    min-width: 260px;
    z-index: 200;
}

.login-dropdown-panel .mod-login__username input,
.login-dropdown-panel .mod-login__password input {
    background: #FFF;
}

.login-dropdown-panel label,
.login-dropdown-panel .form-check-label,
.login-dropdown-panel a {
    color: #FFF;
}

/* -------- Search: collapsible blue icon, sits left of the login key -------- */
.container-search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-icon-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--snes-blue);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    color: #FFF;
    font-size: 1rem;
}

.search-icon-toggle:hover {
    background: var(--snes-blue-h);
}

.search-dropdown-panel {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0;
    background: var(--snes-blue);
    padding: 1rem;
    min-width: 260px;
    z-index: 200;
}

.search-dropdown-panel .js-finder-search-query {
    width: 100%;
}

.search-dropdown-panel label {
    color: #FFF;
}

/* -------- Content typography -------- */
.item-title,
.section-content h2,
article h1,
article h2 {
    font-family: 'Orbitron', sans-serif;
}

.main-breadcrumb,
.breadcrumb-text {
    font-family: 'Open Sans', sans-serif;
    color: #8E9294;
}

/* -------- Category list-layout tables: lightweight theming, no structural change -------- */
.com-content-category__table {
    font-family: 'Open Sans', sans-serif;
}

.com-content-category__table thead {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.com-content-category__table .list-title a {
    color: var(--snes-blue);
    font-weight: 700;
}

.com-content-category__table .list-title a:hover {
    color: var(--snes-blue-h);
}

/* -------- Footer: social icon row, top-right corner --------
   Core's own ".footer .grid-child { padding: 2.5rem .5em;
   align-items: center; }" vertically centers the flex row and gives
   it 40px of top padding - fine for the footer-col columns, but the
   mockup pins the icon row flush to the very top of the grey area,
   independent of the columns' own vertical rhythm. Rather than
   fight that shared row's padding/alignment, take the icons out of
   flow entirely and pin them to the grid-child's own top-right
   corner directly. */
.container-footer .grid-child {
    position: relative;
}

/* Core gives every Custom HTML module's own wrapper div
   ".mod-custom { position: relative; }" unconditionally - that div
   sits directly between grid-child and .footer-social-icons in the
   DOM, so it (not grid-child) was becoming the actual containing
   block for the absolute positioning below, anchoring "top" to its
   own in-flow (vertically-centered) position instead of the grey
   area's real top edge. Neutralize it back to static so grid-child
   is the containing block, as intended. */
.container-footer .mod-custom {
    position: static;
}

.footer-social-icons {
    display: flex;
    gap: 5px;
    position: absolute;
    top: 0;
    right: 0.5em;
}

.footer-social-icons a,
.footer-social-icons__placeholder {
    display: block;
    line-height: 0;
}

.footer-social-icons img {
    display: block;
    width: 40px;
    height: 40px;
}

.footer-social-icons a:hover img {
    opacity: 0.85;
}

/* -------- Blog layout: category blog_item.php override --------
   Shared by com_content's blog category view AND the featured/home
   view (both wrap each item in the same ".blog-item" class), so a
   divider between consecutive items and image/meta styling apply
   consistently to both rather than needing separate rules. */
.blog-item + .blog-item {
    border-top: 1px solid #DFDFDF;
    margin-top: 2rem;
    padding-top: 2rem;
}

/* The lead article (featured view) sits in its own ".items-leading"
   wrapper, a separate parent from the intro items' ".blog-items" -
   so the adjacent-sibling rule above never spans the two groups.
   This targets the first intro item specifically when a leading
   group precedes it. */
.blog-items.items-leading + .blog-items > .blog-item:first-child {
    border-top: 1px solid #DFDFDF;
    margin-top: 2rem;
    padding-top: 2rem;
}

/* Mockup's article title is plain text (not even a link) - inherits
   the body's dark color, no blue/underline. Keep it a real link for
   navigation, but style it to match: no link-blue/underline default,
   underline only on hover as an affordance. */
.item-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.item-title a:hover {
    text-decoration: underline !important;
}

.blog-item .item-content::after {
    content: "";
    display: table;
    clear: both;
}

.blog-item .item-image {
    float: left;
    max-width: 220px;
    margin: 0 20px 10px 0;
}

.blog-item .item-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.blog-meta {
    font-family: 'Open Sans', sans-serif;
    color: #8E9294;
    font-size: 0.85rem;
    margin: 0.25rem 0 1rem;
}

.blog-meta a {
    color: #8E9294;
}

/* -------- Spielebibliothek image gallery -------- */
.game-gallery-main {
    width: 100%;
    max-height: 420px;
    /* "cover" was cropping the top/bottom off images whose aspect
       ratio didn't match the fixed box - "contain" always shows the
       whole image, letterboxed instead of cropped. */
    object-fit: contain;
    background: #F2F2F2;
    border-radius: 4px;
    display: block;
}

.game-gallery-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.game-gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow: hidden;
}

.game-gallery-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 3px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.game-gallery-thumb.is-hidden {
    display: none;
}

.game-gallery-thumb-active {
    border-color: var(--snes-yellow);
}

.game-gallery-arrow {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    background: var(--snes-blue);
    color: #FFF;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.game-gallery-arrow:hover {
    background: var(--snes-blue-h);
}

.game-gallery-arrow.is-disabled {
    visibility: hidden;
}

/* -------- Spielebibliothek entry: two-column spec-sheet layout --------
   "Option A" from a design review with the user - gallery + cross-link
   buttons on the left, a compact spec table / release-year table /
   ratings on the right. Only applied to Spielebibliothek categories via
   the article view override; other articles keep the generic layout. */
.game-spec-subtitle {
    font-size: 14px;
    color: #8E9294;
    margin: 0 0 24px;
}

.game-spec {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.game-spec-main {
    flex: 1 1 560px;
    min-width: 0;
}

.game-spec-side {
    flex: 0 0 320px;
}

.game-spec-box {
    border: 1px solid #DFDFDF;
    border-radius: 4px;
    overflow: hidden;
}

.game-spec-box + .game-spec-box {
    margin-top: 16px;
}

.game-spec-box-head {
    background: #22262A;
    color: #FFF;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    padding: 10px 16px;
}

.game-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.game-spec-table tr:not(:last-child) td {
    border-bottom: 1px solid #DFDFDF;
}

.game-spec-table td {
    padding: 8px 16px;
}

.game-spec-table td:first-child {
    color: #8E9294;
    width: 42%;
}

.game-spec-table td:last-child {
    font-weight: 600;
}

.game-spec-mono {
    font-family: monospace;
}

.game-spec-years {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: center;
}

.game-spec-years th {
    padding: 8px;
    color: #8E9294;
    font-weight: 400;
    border-bottom: 1px solid #DFDFDF;
}

.game-spec-years th:not(:last-child) {
    border-right: 1px solid #DFDFDF;
}

.game-spec-years td {
    padding: 10px;
    font-weight: 700;
}

.game-spec-years td:not(:last-child) {
    border-right: 1px solid #DFDFDF;
}

.game-spec-ratings {
    margin-top: 16px;
}

.game-spec-ratings .game-spec-box-head {
    background: none;
    color: #22262A;
    padding: 0 0 10px;
}

.game-spec-rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.game-spec-rating-label {
    width: 90px;
    font-size: 12px;
    color: #8E9294;
}

.game-spec-rating-bar {
    flex: 1;
    height: 8px;
    background: #EEE;
    border-radius: 4px;
    overflow: hidden;
}

.game-spec-rating-bar > div {
    height: 100%;
}

.game-spec-rating-value {
    width: 32px;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.game-spec-rating-row-total {
    margin-bottom: 10px;
}

.game-spec-rating-row-total .game-spec-rating-label {
    color: #22262A;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.game-spec-rating-bar-total {
    height: 10px;
    border-radius: 5px;
}

.game-spec-rating-row-total .game-spec-rating-value {
    font-size: 13px;
    font-weight: 900;
}

.game-spec-rating-divider {
    border-top: 1px solid #DFDFDF;
    margin: 0 0 10px;
}

.game-crosslinks {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.game-crosslink {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    color: #FFF !important;
    text-decoration: none !important;
    padding: 12px 20px;
    box-shadow: inset 0 -20px 20px -30px rgba(0, 0, 0, 0.6);
}

.game-crosslink-blue { background: var(--snes-blue); }
.game-crosslink-blue:hover { background: var(--snes-blue-h); }
.game-crosslink-yellow { background: var(--snes-yellow); }
.game-crosslink-yellow:hover { background: var(--snes-yellow-h); }
.game-crosslink-green { background: var(--snes-green); }
.game-crosslink-green:hover { background: var(--snes-green-h); }

/* -------- Genre sidebar (mod_articles_categories) --------
   Mirrors the mockup's bordered-header + colored-block genre list.
   Color is themeable per module instance via moduleclass_sfx, so each
   section's sidebar can match the nav pill a visitor clicked to arrive
   here (default: red, Spielebibliothek's own pill color); add a new
   .sidebar-theme-<color> block below for any further section. */
.container-sidebar-left {
    flex: 0 0 260px;
}

.sidebar-left.card {
    --sidebar-accent: var(--snes-red);
    --sidebar-accent-h: var(--snes-red-h);
    border: 2px solid var(--sidebar-accent);
    border-radius: 0;
    background: none;
}

.sidebar-left.card.sidebar-theme-green {
    --sidebar-accent: var(--snes-green);
    --sidebar-accent-h: var(--snes-green-h);
}

.sidebar-left .card-header {
    background: #FFF;
    color: var(--sidebar-accent);
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    text-align: center;
    border: none;
    border-radius: 0;
    padding: 14px 10px;
}

.sidebar-left .card-body {
    padding: 0;
}

.mod-articlescategories {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mod-articlescategories li {
    border-top: 1px solid var(--sidebar-accent);
}

.mod-articlescategories li a {
    display: block;
    background: var(--sidebar-accent);
    color: #FFF !important;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
    text-decoration: none !important;
    padding: 12px 16px;
}

.mod-articlescategories li a:hover {
    background: var(--sidebar-accent-h);
}

.mod-articlescategories li.active a {
    background: #FFF;
    color: var(--sidebar-accent) !important;
}

/* -------- Spielebibliothek article list: title-only, no strikethrough
   default link styling from the generic table treatment -------- */
.com-content-category__table .list-title a {
    text-decoration: none;
}

.com-content-category__table .list-title a:hover {
    text-decoration: underline;
}