/*
 * Modus Customer Commerce UI — shared shell layout
 * Public header, logged-in header, sidebar, footer, breadcrumbs.
 * Targets Huraga's existing Bootstrap markup — no Twig structure changes required
 * beyond the mc-* classes added in html_custom/layout_default.html.twig and
 * html_custom/layout_public.html.twig.
 */

/* ---- Header ---- */
.mc-header {
    background: var(--mc-surface-raised);
    border-bottom: 1px solid var(--mc-border-subtle);
}

.mc-header .navbar {
    min-height: 72px;
    padding-block: var(--mc-space-3);
}

@media (min-width: 768px) {
    .mc-header .navbar { min-height: 80px; }
}

.mc-header.mc-header--sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow var(--mc-duration-normal) var(--mc-ease-standard);
}

.mc-header.mc-header--sticky.mc-header--stuck {
    box-shadow: var(--mc-shadow-sm);
}

.mc-header .navbar-brand img {
    max-height: 36px;
    width: auto;
}

.mc-header .nav-link {
    font-weight: 600;
    color: var(--mc-text-primary);
    padding-inline: var(--mc-space-3);
}

.mc-header .nav-link.active,
.mc-header .nav-link:hover,
.mc-header .nav-link:focus-visible {
    color: var(--mc-color-primary-600);
}

/* Compact logged-in header */
.mc-header--portal .navbar {
    min-height: 60px;
    padding-block: var(--mc-space-2);
}

/* Desktop "Login" button — a clear call-to-action in the top-right header,
   not a plain text link easily missed among the nav items. */
.mc-header-login-button {
    margin-inline-start: var(--mc-space-2);
    padding-inline: var(--mc-space-5);
    white-space: nowrap;
}

/* Mobile header actions: a small login/account icon that stays visible next
   to the hamburger toggle, so a returning customer can reach /login without
   opening the menu first. */
.mc-mobile-header-actions {
    gap: var(--mc-space-3);
}

.mc-mobile-account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--mc-border-subtle);
    color: var(--mc-text-primary);
    background: var(--mc-surface-raised);
}

.mc-mobile-account-link:hover,
.mc-mobile-account-link:focus-visible {
    color: var(--mc-color-primary-600);
    border-color: var(--mc-color-primary-300);
}

.mc-mobile-account-link .icon {
    width: 20px;
    height: 20px;
}

.mc-mobile-account-link img,
.mc-mobile-account-link svg {
    border-radius: 999px;
}

/* ---- Sidebar (logged-in portal) ---- */
.mc-sidebar {
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border-subtle);
    border-radius: var(--mc-radius-md);
    padding: var(--mc-space-4);
}

.mc-sidebar .list-group-item {
    border: 0;
    border-radius: var(--mc-radius-sm) !important;
    font-weight: 600;
    color: var(--mc-text-secondary);
    padding: var(--mc-space-3) var(--mc-space-3);
}

.mc-sidebar .list-group-item.active,
.mc-sidebar .list-group-item:hover {
    background: var(--mc-color-primary-50);
    color: var(--mc-color-primary-700);
}

/* ---- Breadcrumbs ---- */
.breadcrumb {
    font-size: var(--mc-text-sm);
}

.breadcrumb-item.active {
    color: var(--mc-text-muted);
}

/* ---- Page heading ---- */
.mc-page-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mc-space-4);
    margin-bottom: var(--mc-space-6);
}

/* Centred variant for marketing sections (homepage category grid heading etc.)
   — the default is left-aligned + space-between for portal page headers,
   but a centred eyebrow+heading reads as a proper section intro instead of
   an abrupt block of bold text sitting right under the hero. */
.mc-page-heading--centered {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mc-space-2);
    margin-bottom: var(--mc-space-10);
}

/* :not(.mc-display-section) matters here: marketing sections combine
   .mc-page-heading-title with .mc-display-section (mc-base.css) for the
   large hero-adjacent size. Without this exclusion, this descendant selector
   is more specific than the single-class .mc-display-section and would
   always win, silently shrinking every "big" section heading back down to
   portal-header size regardless of which classes were combined on it. */
.mc-page-heading h1,
.mc-page-heading .mc-page-heading-title:not(.mc-display-section) {
    font-family: var(--mc-font-display);
    font-size: var(--mc-text-2xl);
    font-weight: 750;
    letter-spacing: 0;
    margin: 0;
}

@media (min-width: 768px) {
    .mc-page-heading h1,
    .mc-page-heading .mc-page-heading-title:not(.mc-display-section) {
        font-size: var(--mc-text-3xl);
    }
}

/* ---- Footer ---- */
.mc-footer {
    background: var(--mc-surface-raised);
    border-top: 1px solid var(--mc-border-subtle);
    padding-block: var(--mc-space-12);
    color: var(--mc-text-secondary);
    font-size: var(--mc-text-sm);
}

.mc-footer--storefront {
    margin-block: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
}

.mc-footer-inner {
    width: 100%;
    max-width: var(--mc-storefront-max);
    margin-inline: auto;
    padding-inline: var(--mc-page-gutter);
    gap: var(--mc-space-3);
    text-align: center;
}

.mc-footer--storefront .justify-content-center {
    flex-wrap: wrap;
    row-gap: var(--mc-space-2);
}

.mc-footer a {
    color: var(--mc-text-secondary);
}

.mc-footer a:hover,
.mc-footer a:focus-visible {
    color: var(--mc-color-primary-600);
}

.mc-footer--portal {
    padding-block: var(--mc-space-6);
}

/* ---- Announcement bar ---- */
.mc-announcement {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-3);
    padding-inline: var(--mc-page-gutter);
    background: var(--mc-surface-dark);
    color: var(--mc-text-inverse);
    font-size: var(--mc-text-sm);
    text-align: center;
}

.mc-announcement .btn-close {
    filter: invert(1);
}

/* ---- Showcase banner (settings.showcase_* — staff-editable, existing
   content, not a brief placeholder) — replaces the raw Bootstrap
   alert-info that visually clashed sitting directly above the dark hero. ---- */
.mc-showcase-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--mc-space-4);
    margin-top: var(--mc-space-4);
    padding: var(--mc-space-3) var(--mc-space-5);
    border-radius: var(--mc-radius-pill);
    background: var(--mc-color-primary-50);
    border: 1px solid var(--mc-color-primary-100);
    text-align: center;
}

.mc-showcase-banner-text {
    color: var(--mc-color-primary-800);
    font-weight: 600;
    font-size: var(--mc-text-sm);
}

.mc-showcase-banner-text strong {
    color: var(--mc-color-primary-900);
    font-weight: 800;
}

.mc-showcase-banner-text span {
    margin-left: var(--mc-space-2);
    color: var(--mc-text-secondary);
    font-weight: 600;
}

.mc-showcase-banner-text p {
    margin: 0;
}

.mc-showcase-banner-action {
    flex: 0 0 auto;
}

/* ---- Utility links row (News / Knowledge Base on the homepage) — kept
   deliberately lightweight, not full duplicate cards, since Login/Register/
   Order/Dashboard already live in the header nav. ---- */
.mc-utility-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mc-space-6);
    padding-block: var(--mc-space-4);
}

.mc-utility-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-space-2);
    color: var(--mc-text-secondary);
    font-weight: 600;
    text-decoration: none;
}

.mc-utility-link:hover,
.mc-utility-link:focus-visible {
    color: var(--mc-color-primary-600);
}

.mc-utility-link .icon {
    width: 18px;
    height: 18px;
}