/*
 * Nosterest MAIN site (nosterest.com): Cassiopeia shell polish. Install as media/templates/site/cassiopeia/css/user.css.
 *
 * user.css is the customization file the ACTUAL Cassiopeia 6.1.4 supports: its joomla.asset.json registers `template.user` (uri user.css)
 * and index.php calls useStyle('template.user') after the template preset. The stock package ships no user.css, so a Joomla update never
 * overwrites it. No plugin, no child template, no edit of any Cassiopeia file, no external request, identical for every viewer.
 *
 * NO PALETTE IS DEFINED HERE. Every colour comes from Cassiopeia's own custom properties, which are set per request from the ACTIVE Community
 * Builder template by the message-layout override (templates/cassiopeia/html/layouts/joomla/system/message.php + nosterest/CbShellBridge.php).
 * Where CB information is unavailable, Cassiopeia's stock values apply.
 *
 * Scope: shell only (header, brand, header menu, module cards in Cassiopeia's own positions, footer, base type and spacing).
 * CB-native content is not restyled: cards are scoped to Cassiopeia's module containers, type/spacing rules skip body.com_comprofiler.
 */
html body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Header and brand */
html body .container-header {
  background-color: var(--body-bg, #fff);
  background-image: none;
  color: var(--body-color, #22262a);
  border-bottom: var(--border-width, 1px) solid var(--border-color, #dee2e6);
  box-shadow: none;
}

html body .container-header :is(.navbar-brand, .brand-logo, .site-description) {
  color: var(--cassiopeia-color-primary);
}

html body .container-header .mod-menu :is(a, span) {
  color: var(--link-color);
}

html body .container-header .navbar-toggler {
  color: var(--cassiopeia-color-primary);
  border-color: var(--border-color, #dee2e6);
}

html body .container-header .navbar-brand {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: .01em;
}

html body .container-header .brand-logo {
  text-decoration: none;
}

html body .container-header .brand-logo img {
  max-height: 2.75rem;
  width: auto;
}

html body .container-header .site-description {
  opacity: .85;
  font-size: .9rem;
}

/* Header menu */
html body .container-header .mod-menu > li > a,
html body .container-header .mod-menu > li > span {
  font-weight: 600;
  padding: .4rem .15rem;
}

@media (width >= 992px) {
  html body .container-header .mod-menu > li + li {
    margin-left: 1.35em;
  }

  html body .container-header .container-nav {
    padding-bottom: .5em;
  }

  html body .site-grid {
    grid-gap: 0 1.75em;
  }
}

/*
 * Header navigation for a long, hierarchical menu. Cassiopeia's supported header layout is the module layout "collapse-metismenu"
 * (nav + toggler + dropdown panels, mobile collapse); these rules only keep long menus usable and carry CB values onto the panels.
 */
@media (width >= 992px) {
  html body .container-header .metismenu {
    flex-wrap: wrap;
  }

  html body .container-header .metismenu .mm-collapse {
    min-width: 13rem;
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    background-color: var(--body-bg, #fff);
    color: var(--body-color, #22262a);
    border: var(--border-width, 1px) var(--border-style, solid) var(--border-color, #dee2e6);
    border-radius: var(--border-radius-lg, .3rem);
    box-shadow: 0 8px 24px rgba(var(--body-color-rgb, 34, 38, 42), .14);
  }

  html body .container-header .metismenu .mm-collapse a {
    color: var(--body-color, #22262a);
  }
}

@media (width < 992px) {
  html body .container-header .navbar-collapse {
    max-height: 70vh;
    overflow-y: auto;
  }

  /* panels flow inline in the collapsed mobile menu (Cassiopeia already does this for nested panels) so the scroll container never clips them */
  html body .container-header .metismenu .mm-collapse {
    position: relative;
    box-shadow: none;
    background-color: var(--body-bg, #fff);
    color: var(--body-color, #22262a);
    border-radius: var(--border-radius-lg, .3rem);
    margin-block: .25rem .5rem;
    margin-inline-end: 0;
    flex-basis: 100%;
  }

  html body .container-header .metismenu .mm-collapse a {
    color: var(--body-color, #22262a);
  }
}

/* Home hero: styles the `banner` position container itself (it exists only when a banner module is published), so any hero content inherits it */
html body .container-banner {
  margin-bottom: 0;
  padding: 2.5rem 1rem 2rem;
  text-align: center;
  background-color: color-mix(in srgb, var(--cassiopeia-color-primary) 6%, var(--body-bg, #fff));
  border-bottom: var(--border-width, 1px) var(--border-style, solid) var(--border-color, #dee2e6);
}

/* Module cards in Cassiopeia's own positions only (never CB's internal cards) */
html body :is(.container-top-a, .container-top-b, .container-sidebar-left, .container-sidebar-right, .container-bottom-a, .container-bottom-b) > .card,
html body .container-component > .card {
  border-radius: var(--border-radius-lg, .3rem);
  border-color: var(--border-color, #dee2e6);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(var(--body-color-rgb, 34, 38, 42), .06), 0 4px 14px rgba(var(--body-color-rgb, 34, 38, 42), .05);
}

html body :is(.container-top-a, .container-top-b, .container-sidebar-left, .container-sidebar-right, .container-bottom-a, .container-bottom-b) > .card > .card-header,
html body .container-component > .card > .card-header {
  background-color: color-mix(in srgb, var(--cassiopeia-color-primary) 7%, var(--body-bg, #fff));
  color: var(--body-color, #22262a);
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom-color: rgba(var(--body-color-rgb, 34, 38, 42), .1);
}

/*
 * Cassiopeia recolours .btn-primary from its primary colour but leaves .btn-outline-primary on a fixed stock blue, so outline buttons would ignore the
 * active CB template. In Cassiopeia's own positions and non-CB pages they follow the same primary as .btn-primary.
 */
html body :is(.container-banner, .container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b, .container-sidebar-left, .container-sidebar-right) .btn-outline-primary,
html body:not(.com_comprofiler) .container-component .btn-outline-primary {
  /* Resting text/border use the bridge's guarded outline colour; hover/active text uses its guarded on-primary colour (never the raw page
     colour, which a dark or tinted CB template can leave unreadable on the primary fill). Without them Cassiopeia's own pair stands: white on its stock primary. */
  /* The button carries the page colour as its own surface. The resting text is guarded against exactly that colour, so it stays readable on the tinted
     hero (primary 6% into the page) and tinted card headers (7%), on card bodies and on plain page areas alike; a transparent button would sit on
     whatever surface those containers happen to have, which the guard cannot know. */
  --btn-bg: var(--body-bg, #fff);
  --btn-disabled-bg: var(--body-bg, #fff);
  --btn-color: var(--nosterest-outline-color, var(--cassiopeia-color-primary));
  --btn-border-color: var(--nosterest-outline-color, var(--cassiopeia-color-primary));
  --btn-hover-color: var(--nosterest-on-primary, #fff);
  --btn-hover-bg: var(--cassiopeia-color-primary);
  --btn-hover-border-color: var(--cassiopeia-color-primary);
  --btn-active-color: var(--nosterest-on-primary, #fff);
  --btn-active-bg: var(--cassiopeia-color-primary);
  --btn-active-border-color: var(--cassiopeia-color-primary);
  --btn-disabled-color: var(--nosterest-outline-color, var(--cassiopeia-color-primary));
  --btn-disabled-border-color: var(--nosterest-outline-color, var(--cassiopeia-color-primary));
}

/* Type and spacing: not inside Community Builder pages (CB-native canvas) */
html body:not(.com_comprofiler) main {
  padding-block: 1.5rem 2rem;
}

html body:not(.com_comprofiler) :is(h1, h2, h3) {
  letter-spacing: -.01em;
  line-height: 1.2;
}

/* Footer */
html body .footer {
  background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, color-mix(in srgb, var(--cassiopeia-color-primary) 78%, #000) 100%);
}

html body .footer .grid-child {
  padding: 1.75rem .75em;
}

/* Accessibility */
html body :is(a, button, .btn, input, select, textarea):focus-visible {
  outline: 2px solid var(--link-color, #224faa);
  outline-offset: 2px;
}

/* Compact mobile header */
@media (width < 768px) {
  html body .container-header .navbar-brand {
    font-size: 1.4rem;
  }

  html body .container-header .grid-child {
    padding: .35em .75em;
  }

  html body .container-header .container-nav {
    padding-bottom: .5em;
  }
}

/* Approved profile reference, 2026-10-05: native sidebar with quiet teal selection.
 * CB controls its own cover/avatar/tabs/cards; do not invent profile selectors here.
 */
html body .container-sidebar-left .mod-menu {
  gap: .35rem;
}

html body .container-sidebar-left .mod-menu > li > :is(a, span) {
  display: block;
  padding: .7rem .85rem;
  border-radius: var(--border-radius-lg, .3rem);
  color: var(--body-color, #22262a);
  text-decoration: none;
  font-weight: 600;
}

html body .container-sidebar-left .mod-menu > li.active > a,
html body .container-sidebar-left .mod-menu > li > a:hover {
  color: var(--nosterest-sidebar-color, var(--link-color));
  background-color: var(--nosterest-sidebar-bg, var(--body-bg, #fff));
}

@media (width >= 992px) {
  html body .container-sidebar-left {
    align-self: start;
  }
}

/* BEGIN preserved-main-customizations */
/* Persistent main sidebar: native links, no disclosure control. */
html body .nr-sidebar-title { margin: 0 0 .75rem; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--body-color); }
html body .nr-sidebar-links { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; }
html body .nr-sidebar-links .nav-item { width: 100%; padding: 0; }
html body .nr-sidebar-links .nav-item > a { display: block; padding: .6rem .75rem; border-radius: .5rem; text-decoration: none; font-weight: 500; }
html body .nr-sidebar-links .nav-item > a:hover,
html body .nr-sidebar-links .nav-item.active > a { background: var(--nosterest-sidebar-bg, var(--body-bg)); color: var(--nosterest-sidebar-color, var(--link-color)); }
html body .nr-sidebar-links .nav-item.active > a { font-weight: 700; }
html body .nr-sidebar-links .divider { margin-top: .6rem; padding: .5rem .75rem .2rem; border-top: 1px solid var(--border-color); font-size: .8rem; color: var(--body-color); }

/* Mike review: native CB Online avatars, ten rows before scrolling. */
.cbOnlineUsers:has(.nr-online-avatar) { max-height: 480px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
.cbOnlineUsers .cbOnlineUser:has(.nr-online-avatar) { display: flex; align-items: center; gap: 10px; height: 48px; box-sizing: border-box; padding: 6px 0; margin: 0; }
.cbOnlineUsers .nr-online-avatar { flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.cbOnlineUsers .nr-online-avatar img { width: 36px !important; height: 36px !important; max-width: 36px !important; object-fit: cover; border-radius: 50%; margin: 0 !important; }
.cbOnlineUsers .nr-online-avatar a, .cbOnlineUsers .nr-online-avatar .cbImgAvatar { display: block; margin: 0; }
.cbOnlineUsers .nr-online-name { flex: 1; min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.cbOnlineUsers .nr-online-name a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-transform: none; }/* Member cards match Meet new people. */
.cb_template .cbUserListRow > .cbCanvasLayout,
.cb_template .gjGroupUsersUser > .cbCanvasLayout { border-radius:15px!important; overflow:hidden; }
/* END preserved-main-customizations */