/* habboh client CSS overrides.
 *
 * WHY THIS FILE EXISTS HERE AND NOT IN nitro-client/:
 * nitro-client/ is a git submodule pointing at an upstream repo (Gurkengewuerz/nitro) we do
 * not control and cannot push to. Editing its SCSS would mean moving the submodule pointer to
 * a local-only commit, which breaks every other clone and the Railway build. So instead we
 * ship a plain stylesheet from OUR repo and inject a <link> into the built index.html - same
 * spirit as docker/nitro-client/entrypoint.sh generating the runtime config rather than
 * committing it into the submodule.
 *
 * It is linked LAST (immediately before </head>, after the bundle's own stylesheet), so plain
 * specificity is enough to win - no !important needed. Every rule below is scoped under
 * .nitro-hotel-view so nothing here can leak into the in-room UI, toolbar, navigator or
 * catalog.
 *
 * WHAT IT FIXES:
 * Upstream styles only the child 150x150 image inside `widgetcontainer` / `promoarticle` and
 * nothing else, so the widgets render as unstyled text. The goal here is to match the real
 * Habbo hotel view: NO panel behind the text, a circular promo image, dark readable text, and
 * a green call-to-action button.
 *
 * Deliberately NOT adding a dark panel behind these widgets: an earlier attempt did (copying
 * .hall-of-fame's treatment) and it looked wrong - real Habbo puts this text straight onto the
 * background art. The readability problem it was trying to solve is better handled by the
 * text-shadow below, which doesn't box in the content.
 */

/* Habbo's promo images are circles, not squares. Upstream sets the size/background but leaves
 * them square. `background-size: cover` stops non-square source images from letterboxing
 * inside the circle. */
.nitro-hotel-view .widgetcontainer .widgetcontainer-image,
.nitro-hotel-view .promo-articles .promo-article-image {
    border-radius: 50%;
    background-size: cover;
    background-position: center center;
}

/* The sky background is light but not uniform (buildings, sun glare), and upstream's inherited
 * `.nitro-hotel-view { color: #000 }` alone can wash out over the brighter areas. A subtle
 * light halo keeps the dark text legible everywhere without boxing it in. */
.nitro-hotel-view .widgetcontainer,
.nitro-hotel-view .promo-articles {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

/* Give the 2x2 grid rows breathing room. Upstream's slots sit flush against each other, which
 * reads as cramped once more than one slot is populated. */
.nitro-hotel-view .widget-slot {
    margin-bottom: 1rem;
}

/* POSITIONING - why the widgets were pinned to the top of the screen:
 * An unused slot is not absent from the DOM. WidgetSlotView always renders
 * <div class="widget-slot slot-N">, and GetWidgetLayout returns null for a "" widget type, so
 * unused slots are empty-but-present divs. Slot 6 carries Bootstrap's `mt-auto`, and in a flex
 * column an auto margin absorbs ALL remaining free space - so that one empty div was shoving
 * every populated widget hard against the top edge, into the toolbar and the hotel logo.
 * Dropping empty slots out of the layout releases that space. :empty is exact here (React
 * renders no child nodes at all for null), and a slot that later gets a widget stops matching
 * and returns automatically. */
.nitro-hotel-view .widget-slot:empty {
    display: none;
}

/* With the empty slots no longer eating the column, centre the populated widgets in the
 * available height - real Habbo's hotel view sits them in the middle band of the screen, not
 * flush against the top. */
.nitro-hotel-view .landing-widgets .col-9 {
    justify-content: center;
}

/* PromoArticleWidgetView hardcodes its text column as Bootstrap `col-3` - a fixed 25% of the
 * slot - so the title/body wrapped into a ~120px ribbon and ran illegibly over the background
 * art, while the sibling widgetcontainer (which sets no width) rendered fine. Let it use the
 * space the slot actually gives it, which also makes the two widgets visually consistent. */
.nitro-hotel-view .promo-article > .col-3 {
    flex: 1 1 auto;
    width: auto;
    /* Not `none`: unconstrained it stretched across the whole slot, which reads as a banner
     * rather than a promo card. ~300px matches both the sibling widgetcontainer and the line
     * length in real Habbo's hotel view. */
    max-width: 300px;
}

/* Habbo's hotel-view call-to-action is a green button; upstream uses `.btn-gainsboro` (grey).
 * Scoped to the hotel view so it can't restyle buttons anywhere else in the client. */
.nitro-hotel-view .widgetcontainer .btn,
.nitro-hotel-view .promo-articles .btn {
    background-color: #5a9e2f;
    border-color: #4a8626;
    color: #fff;
    text-shadow: none;
    /* The promo-article button sets no align-self, so as a flex-column child it stretched to
     * the full column width. (widgetcontainer's button already sets align-self-start.) */
    align-self: flex-start;
    padding-left: 1rem;
    padding-right: 1rem;
}

.nitro-hotel-view .widgetcontainer .btn:hover,
.nitro-hotel-view .promo-articles .btn:hover {
    background-color: #68b537;
    border-color: #5a9e2f;
    color: #fff;
}

/* `.nitro-hotel-view hr { background: $black }` is a heavy black rule across the promo widget.
 * Soften it so it reads as a separator rather than a bar. */
.nitro-hotel-view .promo-articles hr {
    background: rgba(0, 0, 0, 0.25);
    box-shadow: none;
}