/* Koelnshop theme: the layout override (Views/Themes/Koelnshop/Shared/_Layout.cshtml)
   carries most of this tenant's customization; this file is for incidental branding only. */

/* --accent/--accent-hover (links, footer headings, cart badge, search button, social
   icons / hover states, category-nav border, footer's top bar) used to be their own
   hardcoded hex values here, independent of --brand-primary (admin-editable via
   /Admin) - confirmed live as a real bug, not by design: changing the color on the
   /Admin config page updated buttons/cards (already wired to --brand-primary) but left
   everything below frozen at the old hardcoded red. --accent/--accent-hover are now
   aliased to --brand-primary/-hover centrally in _BrandingStyles.cshtml instead of
   redeclared per-theme - nothing to define here anymore, this file just consumes them. */
:root {
    --text-dark: #404040;      /* meta-nav/category-nav text */
    --surface: #fff;           /* component backgrounds - menu/meta-nav/content/category-nav/footer */
    --page-bg: #efefef;        /* page backdrop behind the white component "cards" */
}

a {
    color: var(--accent);
}

/* Bootstrap's own .container-fluid ships ~12px left/right padding - the real legacy
   shop zeroes this out (its own #main-menu/#categoryWrapper/#content are all plain
   .container-fluid divs, with the padding/centering coming from their INNER .container
   instead). Without this, #main-menu/#categoryWrapper/footer's own padding-left offsets
   the "static position" of their position:absolute ::before pseudo-elements
   (footer::before's red bar, in particular) by that same ~12px while the pseudo-element's
   own width:100% is computed against the (already-narrower) padded content box - the
   two didn't line up, so the red bar's right edge stuck out past the real viewport
   edge and forced a horizontal scrollbar on the whole page. */
.container-fluid
{
    padding: 0;
}

#meta-nav
{
    background: var(--surface);
    font-size: 12px;
    a
    {
        color: var(--text-dark);
        text-decoration: none;

        &:hover
        {
            color: var(--accent-hover);
        }
    }
}

#main-menu
{
    background: var(--surface);
}

footer::before
{
    content: " ";
    width: 100%;
    height: 27px;
    background: var(--accent-hover);
    position: absolute;
}

footer .row:first-child::before
{
    content: "";
    background-image: url(/tenants/koelnshop/logo-footer.png);
    background-color: var(--page-bg);
    width: 200px;
    height: 56px;
    position: absolute;
    top: -99px;
    left: 10px;
    background-size: contain;
    background-repeat: no-repeat;
}

.footer
{
    background-color: var(--surface);

    a
    {
        color: inherit;
    }

    font-size: 85%;

    .row
    {
        position: relative;
    }

    .container
    {
        padding-top: 70px;
    }
}

#page
{
    background: var(--page-bg);
}

#content
{
    padding: 20px;
    background-color: var(--surface);
    margin-bottom: 100px;
}

#categoryWrapper
{
    border-bottom: 1px solid var(--accent-hover);
    background-color: var(--surface);
    color: var(--text-dark);

    .navbar {
        padding-bottom: 0;
    }

    .navbar-nav li.nav-item
    {
        margin: 5px 10px;
        background-color: var(--surface);

        &:first-child
        {
            margin: 5px 10px 5px 0;
        }

        .nav-link
        {
            color: var(--text-dark);
        }

        &:hover, &:focus
        {
            transition: all 0.5s;
            background: var(--text-dark);

            .nav-link
            {
                color: var(--surface) !important;
            }
        }
    }
}

@media (max-width: 991px) {
    #categoryWrapper .navbar-nav li.nav-item {
        margin: 5px 0;
    }
}

@media (min-width: 992px) {
    #categoryWrapper .navbar-expand-lg li.nav-item {
        margin: 0 !important;
        padding: 5px 10px;
        border-radius: 4px 4px 0 0;
    }
}

/* --accent (now aliased to --brand-primary, see the :root block above). Targets this
   project's own element ids (#cartLink/#cartBadge, not the legacy's #header-cart/
   .shopping-cart-count, which don't exist in our markup) - #header-search is the one id
   that happens to match exactly already. */
#header-search
{
    background: var(--accent);
    color: var(--surface);
    border-color: rgba(255, 255, 255, 0.8);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#cartLink
{
    /* !important needed: the shared _CartLink.cshtml partial (also used by KVB, which
       relies on it as its own default) carries Bootstrap's .text-dark utility class,
       which sets color with !important - beats any plain-specificity override
       regardless of the #id selector's higher specificity. */
    color: var(--accent) !important;
}

    #cartLink i.material-icons-outlined
    {
        font-size: 2em;
    }

#cartBadge
{
    background-color: var(--accent);
}

.footer-link
{
    color: var(--accent);
    font-weight: bold;
}

#socials
{
    float: left;
    margin-bottom: 40px;

    .social-link
    {
        padding: 3px;
        background-color: var(--accent);
        display: inline-block;
        height: 40px;
        margin-right: 10px;
        border-radius: 4px;

        img
        {
            height: 35px;
        }
    }
}

.copyright {
    float: right;
    padding: 10px 0;
}

/* Ported from the real legacy shop's own landing-slider (css/templates/2/style.scss)
   for the homepage category carousels (_HomeCategoryCarousel.cshtml/_ProductTileMini.cshtml)
   - our carousel keeps Bootstrap's own carousel.js (data-bs-slide/data-bs-target still
   drive it; those attributes are what Bootstrap's JS listens for, not the class names),
   only the visual skin is legacy-styled. Not applied to the hero banner slider
   (_HomeHeroCarousel.cshtml) - the legacy's landing-slider was specifically the small
   item-tile carousels, not the full-bleed image banner.

   The legacy nests TWO wrapper divs, not one: an outer `.category-slider-container`
   (the bordered/padded box with the heading) around an inner `.landing-slider-container`
   (just position:relative, for the prev/next buttons) around the slider itself. #dadae5
   is a one-off neutral border tone from the legacy's own stylesheet, used nowhere else
   there either - not worth promoting to a --variable for a single use. */
.category-slider-container {
    border: 1px solid #dadae5;
    padding: 20px;
    border-radius: 4px;

    h2 {
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #dadae5;
    }
}

.landing-slider-container {
    position: relative;
    margin-bottom: 20px;
}

.landing-slide {
    position: relative;
    padding: 10px;
    text-align: center;
    height: 200px;

    .sliderImage {
        max-height: 70%;
        max-width: 100%;
        margin-bottom: 15px;
    }

    .landing-slide-title {
        margin: 0;
        font-weight: bold;
        color: var(--text-dark);

        a {
            color: inherit;
            text-decoration: none;
        }
    }
}

button.landing-prev,
button.landing-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: none;
    border-radius: 4px;
    color: var(--surface);
    background: var(--accent);

    &:hover, &:focus {
        background: var(--accent-hover);
    }
}

button.landing-prev {
    left: -10px;
}

button.landing-next {
    right: -10px;
}