/**
 * Components lifted from TEMPLATEprivate (css/raw/styles.css), rule for rule.
 *
 * Only the colours are changed. When lifting more, copy the rules verbatim and apply
 * this substitution, nothing else:
 *
 *   #3e3f5e  template ink            → #0d0d0d  Saint Life black
 *   #2e2e47  ink hover               → #262626
 *   #23d2e2  cyan accent (fills)     → #fbca5c  Saint Life gold
 *   #00c7d9  cyan accent (text)      → #b57a00  dark gold (gold is unreadable as text on white)
 *   #615dfa  purple secondary        → #fbca5c  gold
 *   #adafca  muted icon / text       → #a4a4b0
 *   #8f91ac  muted text              → #8a8a96
 *   #eaeaf5  hairline divider        → #ecebe5
 *   #dedeea  outline                 → #e2e1db
 *   rgba(94, 92, 154, …) shadows     → rgba(29, 30, 44, …)
 *
 * Sections: 1. section navigation · 2. section header · 3. event preview · 4. date sticker
 *           5. decorated text + meta line · 6. button · 7. template icon sizes
 *           8. event information · 9. widget box · 10. user avatar list · 11. button.tertiary
 *
 *   #fd4350  template red (tertiary) → #960202  Saint Life dark red
 */

/* ── 1. SECTION NAVIGATION (template §4, §5) ─────────────────────────── */

.section-navigation {
  height: 80px;
  padding: 0 43px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 0 40px 0 rgba(29, 30, 44, 0.06);
  position: relative;
}

.section-navigation .slider-controls .slider-control {
  width: 43px;
  height: 80px;
  position: absolute;
  top: 0;
}

.section-navigation .slider-controls .slider-control.left {
  left: 0;
}

.section-navigation .slider-controls .slider-control.right {
  right: 0;
}

.section-menu {
  height: 80px;
  overflow: hidden;
}

/* Template floats the items; flex does the same job and suits Bootstrap's .nav, which
   the tab component needs on the container. */
.section-menu.nav {
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.section-menu.nav::-webkit-scrollbar {
  display: none;
}

.section-menu.medium .section-menu-item {
  width: 160px;
}

.section-menu .section-menu-item {
  flex: 0 0 auto;
  width: 122px;
  height: 80px;
  position: relative;
  border-bottom: 4px solid transparent;
  cursor: pointer;
}

.section-menu .section-menu-item.active,
.section-menu .section-menu-item:hover,
.section-menu.secondary .section-menu-item.active,
.section-menu.secondary .section-menu-item:hover {
  border-bottom: 4px solid #fbca5c;
}

.section-menu .section-menu-item.active .section-menu-item-icon,
.section-menu.secondary .section-menu-item.active .section-menu-item-icon {
  fill: #0d0d0d;
  opacity: 1;
}

.section-menu .section-menu-item:hover .section-menu-item-icon {
  transform: translate(0, -20px);
  opacity: 0;
  visibility: hidden;
}

.section-menu .section-menu-item:hover .section-menu-item-text {
  transform: translate(0, 0);
  opacity: 1;
  visibility: visible;
}

.section-menu .section-menu-item::after {
  content: '';
  width: 1px;
  height: 20px;
  background-color: #ecebe5;
  position: absolute;
  top: 30px;
  right: 0;
}

.section-menu .section-menu-item:first-child::before {
  content: '';
  width: 1px;
  height: 20px;
  background-color: #ecebe5;
  position: absolute;
  top: 30px;
  left: 0;
}

.section-menu .section-menu-item .section-menu-item-icon {
  fill: #a4a4b0;
  opacity: .6;
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -10px;
  transition: opacity .25s ease-in-out, visibility .25s ease-in-out, transform .25s ease-in-out;
}

.section-menu .section-menu-item .section-menu-item-text {
  width: 100%;
  margin: 0;
  color: #0d0d0d;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  position: absolute;
  top: 34px;
  transform: translate(0, 20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease-in-out, visibility .25s ease-in-out, transform .25s ease-in-out;
}

/* Keyboard users get the text too, not just mouse hover. */
.section-menu .section-menu-item:focus-visible {
  outline: none;
  border-bottom-color: #fbca5c;
}

.section-menu .section-menu-item:focus-visible .section-menu-item-icon {
  transform: translate(0, -20px);
  opacity: 0;
  visibility: hidden;
}

.section-menu .section-menu-item:focus-visible .section-menu-item-text {
  transform: translate(0, 0);
  opacity: 1;
  visibility: visible;
}

/* Slider control (template §19) */
.slider-control {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

.slider-control .slider-control-icon {
  fill: #a4a4b0;
  pointer-events: none;
  opacity: .6;
  transition: fill .2s ease-in-out, opacity .2s ease-in-out;
}

.slider-control.left .slider-control-icon {
  transform: rotate(180deg);
}

.slider-control:hover .slider-control-icon {
  fill: #0d0d0d;
  opacity: 1;
}

.slider-control.disabled,
.slider-control[aria-disabled=true] {
  opacity: .5;
  cursor: default;
}

.slider-control.disabled:hover .slider-control-icon,
.slider-control[aria-disabled=true]:hover .slider-control-icon {
  fill: #a4a4b0;
  opacity: .5;
}

/* ── 2. SECTION HEADER ───────────────────────────────────────────────── */

.section-header {
  display: flex;
  justify-content: space-between;
}

.section-header-info .section-pretitle {
  margin: 0;
  color: #8a8a96;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.section-header-info .section-title {
  margin: 8px 0 0;
  color: #0d0d0d;
  font-size: 1.625rem;
  font-weight: 700;
}

.section-header-info .section-title .highlighted {
  color: #b57a00;
}

/* ── 3. EVENT PREVIEW ────────────────────────────────────────────────── */

.event-preview-list .event-preview {
  margin-bottom: 32px;
}

.event-preview-list .event-preview:last-child {
  margin-bottom: 0;
}

.event-preview {
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 0 40px 0 rgba(29, 30, 44, 0.06);
}

.event-preview .event-preview-cover {
  display: block;
  width: 100%;
  height: 98px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-size: cover;
  background-position: center;
}

.event-preview .event-preview-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 385px;
  padding: 40px 28px 32px;
  position: relative;
}

.event-preview .event-preview-info .date-sticker {
  position: absolute;
  top: -42px;
  left: 28px;
}

.event-preview .event-preview-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.event-preview .event-preview-title a {
  color: #0d0d0d;
}

.event-preview .event-preview-timestamp {
  margin: 10px 0 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.event-preview .event-preview-timestamp .bold {
  font-weight: 700;
}

.event-preview .event-preview-text {
  margin: 20px 0 0;
  color: #0d0d0d;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4285714286em;
}

.event-preview .meta-line {
  margin-top: 26px;
}

.event-preview .button {
  width: 100%;
  margin-top: 38px;
}

/* ── 4. DATE STICKER (template §24) ──────────────────────────────────── */

.date-sticker {
  width: 44px;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

.date-sticker .date-sticker-day,
.date-sticker .date-sticker-month {
  margin: 0;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.date-sticker .date-sticker-day {
  padding: 10px 0 6px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: #0d0d0d;
  font-size: 1.25rem;
}

.date-sticker .date-sticker-month {
  padding: 4px 0;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: #fbca5c;
  color: #0d0d0d;
  font-size: 0.75rem;
}

/* ── 5. DECORATED TEXT + META LINE ───────────────────────────────────── */

.decorated-text {
  display: flex;
  align-items: center;
}

.decorated-text .decorated-text-icon {
  flex: 0 0 auto;
  margin-right: 8px;
  fill: #fbca5c;
}

.decorated-text .decorated-text-content {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.meta-line {
  display: flex;
  align-items: center;
}

.meta-line + .meta-line {
  margin-left: 22px;
}

.meta-line .meta-line-text {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
}

.meta-line .meta-line-timestamp {
  color: #8a8a96;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ── 6. BUTTON ───────────────────────────────────────────────────────── */

.button {
  display: inline-block;
  height: 48px;
  border-radius: 10px;
  background-color: #0d0d0d;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.button:hover {
  color: #fff;
  background-color: #262626;
}

.button.white {
  background-color: transparent;
  border: 1px solid #e2e1db;
  color: #a4a4b0;
  box-shadow: none;
}

.button.white:hover {
  color: #fff;
  background-color: #262626;
  border-color: #262626;
}

/* Template .secondary is a purple fill with white text; ours is gold, so black text. */
.button.secondary {
  background-color: #fbca5c;
  color: #0d0d0d;
  box-shadow: 4px 7px 12px 0 rgba(251, 202, 92, 0.35);
}

.button.secondary:hover {
  background-color: #f2b93a;
  color: #0d0d0d;
}

/* ── 7. TEMPLATE ICON SIZES ──────────────────────────────────────────── */

.icon-info,
.icon-events,
.icon-members,
.icon-photos,
.icon-timeline,
.icon-forum,
.icon-videos,
.icon-pin {
  width: 20px;
  height: 20px;
}

.icon-small-arrow {
  width: 6px;
  height: 8px;
}

/* ── 8. EVENT INFORMATION (template `.popup-event`, used as a page) ───── */

/* The template's popup is 584px wide and hidden until opened; as a page it fills its
   column and is always visible. Every inner rule below is the template's own. */
.popup-event.popup-event--page {
  width: 100%;
  max-width: none;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 0 40px 0 rgba(29, 30, 44, 0.06);
  opacity: 1;
  visibility: visible;
}

.popup-event .popup-event-cover {
  display: block;
  width: 100%;
  height: 204px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-size: cover;
  background-position: center;
}

.popup-event .popup-event-info {
  padding: 32px 28px;
  position: relative;
}

.popup-event .popup-event-info .user-avatar-list {
  margin-top: 18px;
}

.popup-event .popup-event-info .g-map {
  height: 260px;
  margin-top: 22px;
}

.popup-event .popup-event-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.popup-event .popup-event-subtitle {
  margin: 32px 0 0;
  font-size: 1rem;
  font-weight: 700;
}

.popup-event .popup-event-text {
  margin: 16px 0 0;
  font-size: 0.875rem;
  line-height: 1.7142857143em;
  font-weight: 500;
  color: #0d0d0d;
}

.popup-event .decorated-feature-list {
  margin-top: 14px;
}

.popup-event .popup-event-button {
  width: 200px;
  position: absolute;
  top: -30px;
  right: 28px;
}

.decorated-feature-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.decorated-feature-list .decorated-feature {
  width: 50%;
  margin-top: 18px;
}

.decorated-feature {
  display: flex;
}

.decorated-feature .decorated-feature-icon {
  margin-top: 6px;
  flex-shrink: 0;
  fill: #fbca5c;
}

.decorated-feature .decorated-feature-info {
  margin-left: 12px;
  min-width: 0;
}

.decorated-feature .decorated-feature-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.decorated-feature .decorated-feature-text {
  margin: 2px 0 0;
  color: #8a8a96;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4285714286em;
}

/* ── 9. WIDGET BOX ───────────────────────────────────────────────────── */

.widget-box {
  padding: 32px 28px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 0 40px 0 rgba(29, 30, 44, 0.06);
  position: relative;
}

.widget-box .widget-box-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.widget-box .widget-box-title .highlighted {
  color: #b57a00;
}

.widget-box .widget-box-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7142857143em;
  font-weight: 500;
}

.widget-box .widget-box-text.light {
  color: #8a8a96;
}

.widget-box .widget-box-content {
  margin-top: 36px;
}

.widget-box .widget-box-content:first-child {
  margin-top: 0;
}

.widget-box .widget-box-content.small-margin-top {
  margin-top: 28px;
}

.widget-box .widget-box-button {
  width: 100%;
  margin-top: 32px;
}

/* ── 10. USER AVATAR LIST ────────────────────────────────────────────── */
/* Template avatars are hexagons drawn by its own canvas script; ours are the site's
   round avatars (with the halo ring), overlapped the way the template overlaps its. */

.user-avatar-list {
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.user-avatar-list.reverse {
  flex-direction: row;
  justify-content: flex-start;
}

.user-avatar-list.medium .user-avatar {
  margin-left: -10px;
}

.user-avatar-list.reverse.medium .user-avatar:first-child {
  margin-left: 0;
}

/* ── 11. BUTTON (template .tertiary) ─────────────────────────────────── */

.button.tertiary {
  background-color: #960202;
  box-shadow: 4px 7px 12px 0 rgba(150, 2, 2, 0.2);
}

.button.tertiary:hover {
  background-color: #7a0202;
}

.icon-ticket,
.icon-clock,
.icon-share,
.icon-public,
.icon-private,
.icon-join-group,
.icon-return,
.icon-events-monthly {
  width: 20px;
  height: 20px;
}

.icon-check {
  width: 12px;
  height: 9px;
}

.icon-facebook {
  width: 12px;
  height: 12px;
}

.icon-big-arrow {
  width: 8px;
  height: 12px;
}

/* ── 12. INFORMATION LINE (template §28, §29) ───────────────────────────
   Group info box. Title column widened from 80px for "Members from churches"-length
   labels; #8f91ac → #8a8a96 per the colour map above. */

.information-line-list .information-line {
  margin-bottom: 14px;
}

.information-line-list .information-line:last-child {
  margin-bottom: 0;
}

.information-line {
  display: flex;
}

.information-line .information-line-title,
.information-line .information-line-text {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4285714286em;
}

.information-line .information-line-title {
  flex-shrink: 0;
  width: 110px;
  color: #8a8a96;
}

.information-line .information-line-text .bold {
  font-weight: 700;
}

.widget-box .widget-box-content .paragraph + .information-line-list {
  margin-top: 24px;
}

/* ── 13. USER PREVIEW — group cards (template §user-preview, §11, §12, §18, §22) ─
   The template's groups.html card. Deviations: the avatar is a round kind icon rather
   than the canvas-drawn hexagon (as on the event page); the cover is a background
   image on a link rather than a .liquid figure; no member-face row, because a public
   card must not show who is in a group. Colours per the map at the top. */

.user-preview {
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 0 40px 0 rgba(94, 92, 154, 0.06);
}

.user-preview .user-preview-cover {
  display: block;
  height: 96px;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  background-color: #262626;
  background-position: center;
  background-size: cover;
}

.user-preview .user-preview-info {
  padding: 0 28px 32px;
  position: relative;
}

.user-preview .user-preview-info .tag-sticker {
  position: absolute;
  top: -12px;
  right: 28px;
}

.user-preview .user-preview-info .user-short-description .user-short-description-title {
  font-size: 1.25rem;
}

.user-preview .user-preview-info .user-short-description .user-short-description-text {
  font-size: 0.75rem;
}

.user-preview .user-preview-info .user-short-description + .user-stats {
  margin-top: 30px;
}

.user-preview .user-preview-info .user-preview-text {
  width: 95%;
  margin: 22px auto 0;
  color: #3d3d45;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4285714286em;
  text-align: center;
}

.user-preview .user-preview-info .user-preview-actions {
  display: flex;
  margin-top: 30px;
}

.user-preview .user-preview-info .user-preview-actions .button {
  width: 100%;
  margin-right: 16px;
}

.user-preview .user-preview-info .user-preview-actions .button:last-child {
  margin-right: 0;
}

.button.full {
  width: 100%;
}

.user-short-description {
  padding-top: 84px;
  position: relative;
}

.user-short-description .user-short-description-avatar {
  position: absolute;
  top: -54px;
  left: 50%;
  margin-left: -54px;
}

.user-short-description .user-short-description-title,
.user-short-description .user-short-description-text {
  font-weight: 700;
  text-align: center;
}

.user-short-description .user-short-description-title {
  font-size: 1.125rem;
}

.user-short-description .user-short-description-title a {
  color: #0d0d0d;
  font-weight: 700;
}

.user-short-description .user-short-description-text {
  margin-top: 10px;
  color: #a4a4b0;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
}

.user-stats {
  display: flex;
  justify-content: center;
}

.user-stats .user-stat {
  position: relative;
}

.user-stats .user-stat::after {
  content: '';
  width: 1px;
  height: 20px;
  background-color: #ecebe5;
  position: absolute;
  top: 6px;
  right: 0;
}

.user-stats .user-stat:last-child::after {
  display: none;
}

.user-stat {
  padding: 0 20px;
}

.user-stat .user-stat-title,
.user-stat .user-stat-text {
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.user-stat .user-stat-title {
  color: #0d0d0d;
  font-size: 0.875rem;
}

.user-stat .user-stat-text {
  margin-top: 10px;
  color: #a4a4b0;
  font-size: 0.6875rem;
}

.tag-sticker {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 3px 5px 20px 0 rgba(94, 92, 154, 0.1);
}

.tag-sticker .tag-sticker-icon {
  fill: #0d0d0d;
}

.tag-sticker .tag-sticker-icon.primary {
  fill: #b57a00;
}