/* =============================================================================
   CORE component — Router Module - default theme
   Generated by Fehmi Demiralp
   ============================================================================= */

.router-content {
  flex: 1;
}


/* ── Composite page layout ───────────────────────────────────────────────── */

.composite-page--vertical {
    display: block;
}

.composite-page--vertical > .slot-wrapper--v {
    display: block;
    width: 100%;
}

/*
 * Horizontal layout: each slot is exactly as wide as the router container.
 * Slots are placed side by side — total width = N * router-width.
 * The user scrolls horizontally to move between slots.
 * Vertical scroll works normally within each slot.
 */
.composite-page--horizontal {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.composite-page--horizontal > .slot-wrapper--h {
    flex: 0 0 100%;   /* each slot = full router width, no shrink/grow */
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    scroll-snap-align: start;
    overflow-y: auto;
}

/* Horizontal scrollbar visibility */
.composite-page--horizontal {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
.composite-page--horizontal::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari — hidden by default */
}

.composite-page--horizontal.scrollbar-visible {
    scrollbar-width: thin;          /* Firefox */
    -ms-overflow-style: auto;
}
.composite-page--horizontal.scrollbar-visible::-webkit-scrollbar {
    display: block;
    height: 6px;
}
.composite-page--horizontal.scrollbar-visible::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
}

/* ── Nested composite: split layout (no scroll, flex split) ─────────────── */

/* Nested horizontal: slots share width equally, no scroll */
.composite-page--horizontal.composite-page--nested {
    overflow-x: visible;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: auto;
}

.composite-page--horizontal.composite-page--nested > .slot-wrapper--h {
    flex: 1 1 0%;     /* equal share, not full-width */
    min-width: 0;
    scroll-snap-align: none;
    overflow-y: visible;
}

/* ── Slot title ──────────────────────────────────────────────────────────── */
/* Rendered above slot content, independent of slot direction.               */
/* Appears at full slot width, always on its own line above the content.    */
.slot-title {
    display: block;
    width: 100%;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    margin-bottom: 16px;
    text-align: left;
}
.slot-title--center { text-align: center; }
.slot-title--right  { text-align: right;  }