/*
Theme Name: Simuze
Description: Simuze theme for Modular CMS
Author: Atypisch / Simuze
Version: 1.0
*/

@import url('css/fonts/fonts.css');

/* ==========================================================================
   STYLE.CSS - Design Tokens, Typography, Base Elements
   ========================================================================== */

:root {
	--color-bg: #0B0C0F;
	--color-bg-card: #111318;
	/* Board list rows: clearly above page bg (#0B0C0F), hover one step lighter */
	--color-board-item-bg: #161a22;
	--color-board-item-bg-hover: #1e242f;
	--color-text: #FFFFFF;
	--color-text-subtle: #8A8E99;
	--color-border: #B8BAC1;
	--color-accent: #A8D5BA;
	--color-accent-hover: #8FC4A3;
	--color-surface-light: #F5F6F8;

	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-24: 24px;
	--space-32: 32px;
	--space-48: 48px;
	--space-64: 64px;

	--gap: var(--space-24);
	--container-max-width: 1440px;
	--sticky-top-offset: 32px;
	--header-height: 60px;
	--header-height-scrolled: 60px;
	--button-color: var(--color-accent);
	--button-color-hover: var(--color-accent-hover);
}

/* --------------------------------------------------------------------------
   Board list (homepage + /board) — flat rows, full-width tap targets
   -------------------------------------------------------------------------- */
.board-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.board-item,
a.board-item {
	padding: 0.85rem 1rem;
	border: none;
	border-radius: 8px;
	background-color: var(--color-board-item-bg);
	/* Subtle edge without a light “ring” border */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
	text-decoration: none;
	color: var(--color-text);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

a.board-item--interactive:hover,
a.board-item.board-item--interactive:hover {
	background-color: var(--color-board-item-bg-hover);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.board-item--static {
	cursor: default;
}

.board-page .board-item-header,
#hp-board .board-item-header {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 0.15rem;
}

.board-type-badge {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.18rem 0.5rem;
	border-radius: 20px;
	background: rgba(168, 213, 186, 0.12);
	color: var(--color-accent, #a8d5ba);
	white-space: nowrap;
	flex-shrink: 0;
}

.board-item .board-title,
.board-page .board-title {
	font-size: 0.95rem;
	font-weight: 500;
	margin: 0;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.board-item .board-body,
.board-page .board-body {
	font-size: 0.88rem;
	color: var(--color-text-subtle);
	margin: 0.2rem 0 0;
}

.board-item .board-meta,
.board-page .board-meta {
	font-size: 0.78rem;
	color: var(--color-text-subtle);
	margin-top: 0.15rem;
}

.board-item .board-row-cta {
	font-size: 0.78rem;
	margin-top: 0.35rem;
	color: var(--color-accent);
	font-weight: 500;
}

.board-page .board-list {
	gap: 0.85rem;
}

.board-page .board-title {
	font-size: 1rem;
}

.board-page a.board-item {
	padding: 0.9rem 1.1rem;
}

/* Reset & Base Styles */
* {
	box-sizing: border-box;
}

html, body {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
	color: var(--color-text);
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.45;
	font-weight: 400;
	text-align: left;
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
}

button,
input[type="button"],
input[type="submit"] {
	font-weight: 500;
	line-height: 1.2;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: "Inter Tight", "IBM Plex Sans", sans-serif;
	font-weight: 500;
	padding: 0 0 16px 0;
	margin: 0;
	color: var(--color-text);
	line-height: 1.2;
}

h1, h1.page_title {
	font-weight: 600;
	font-size: clamp(2.5rem, 3vw, 3.5rem);
	line-height: 1.2;
	padding: 0 0 16px 0;
	margin: 10px 0 20px 0;
}

h1.page_parent {
	font-size: 1.75rem;
	line-height: 1.2;
	font-weight: 500;
	padding: 0 0 8px 0;
	margin: 0;
	background: transparent;
}

h2 {
	font-size: clamp(2rem, 2.4vw, 2.75rem);
	font-weight: 500;
}

/* In-page tool headers: override global h1/h2 display scale */
.board-page .board-page-header .board-page-title,
.messages-page .messages-compose-header .messages-compose-title,
.shows-start-page .shows-start-header .shows-start-title {
	font-size: 0.98rem !important;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	padding: 0 !important;
	margin: 0 !important;
}

/* Left arrow on “Back to …” actions (outline buttons) */
a.button.simuze-btn-back::before {
	content: '\2190\00a0';
	display: inline-block;
	margin-right: 0;
}

h3, h4 {
	font-size: 1.5rem;
	font-weight: 500;
}

h5, h6 {
	font-size: 1.25rem;
	font-weight: 500;
}

p, li, span, label {
	font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
	font-weight: 400;
	line-height: 1.45;
	color: var(--color-text);
}

small, .meta, .subtext {
	color: var(--color-text-subtle);
	font-size: 0.85rem;
	line-height: 1.4;
}

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

/* Board cards are full-row links: keep text color + no underline (global a / a:hover would win otherwise) */
a.board-item,
a.board-item:visited {
	color: var(--color-text);
	text-decoration: none;
	background-color: var(--color-board-item-bg);
}

a.board-item.board-item--interactive:hover {
	color: var(--color-text);
	text-decoration: none;
}

a.board-item .board-meta,
a.board-item .board-body {
	color: var(--color-text-subtle);
}

a.board-item .board-row-cta {
	color: var(--color-accent);
}

/* Heading size overrides */
h2 {
	font-size: 32px;
	line-height: 38px;
}

h2.nospace {
	padding: 0 !important;
	margin: 0 !important;
}

h3 {
	font-size: 25px;
	font-weight: 500;
}

h4, h5, h6 {
	font-size: 22px;
	font-weight: 500;
}

/* Lists */
ol {
	padding: 0 0 30px 20px;
	margin: 0;
}

ul {
	padding: 0 0 30px 20px;
	margin: 0;
	list-style: none !important;
}

.column ul li {
	padding: 0 0 0 15px;
	list-style: circle;
}

/* Text Elements */
b, strong {
	font-weight: 500;
}

hr {
	border: 0;
	height: 1px;
	width: 100%;
	background-color: rgba(255,255,255,0.1);
	padding: 0;
	margin: 20px 0 0 0;
}

blockquote {
	clear: both;
	float: none;
	width: 60%;
	padding: 0 0 5px 0;
	margin: 40px 0 60px 0;
	font-size: 30px;
	font-style: italic;
	line-height: 36px;
	font-weight: 300;
}

/* Images */
a img, img a {
	border: 0 !important;
	outline: 0 !important;
}

img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

img.alignright {
	float: right;
	margin: 0 0 1em 1em;
}

img.alignleft {
	float: left;
	margin: 0 1em 1em 0;
}

/* Links */
a:link, a:visited {
	color: var(--color-accent);
	text-decoration: none;
	outline: 0;
}

a:hover, a:active {
	color: var(--color-accent-hover);
}

/* Transitions */
.transition {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* Board page: match active filter with homepage Discover button tone */
.board-page .board-filter-bar a.active {
	background: var(--button-color, #a8d5ba) !important;
	border-color: var(--button-color, #a8d5ba) !important;
	color: #111 !important;
}

/* Color Utilities */
.color_white, h3.color_white { color: #fff !important; }
.color_black { color: #1d1d1b !important; }
.color_grey { color: #e6e6e6 !important; }
.color_green { color: #51ac32 !important; }
.color_blue { color: #009de1 !important; }
.color_purple { color: #722774 !important; }
.color_yellow { color: #ffdb00 !important; }

/* Text Alignment */
.text_centered { text-align: center; }
.text_left { text-align: left; }
.alignright { float: right; }
.alignleft { float: left; }

/* Utility */
.no-padding { padding: 0; }
.no-space { padding: 0; margin: 0; }

/* Footer */
.footer_wrap {
	position: relative;
	width: 100%;
	padding: 60px 0 20px 0;
	margin: 0;
	border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-grid {
	margin: 30px 0 30px 0;
}

.footer-column {
	background: transparent !important;
	border: none !important;
	padding: 0 var(--gap) !important;
}

.footer-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 15px 0;
	padding: 0;
	text-transform: lowercase;
	letter-spacing: 0.5px;
}

.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	padding: 0;
	margin: 0 0 5px 0;
	list-style: none;
}

.footer-links li a {
	color: rgba(159, 159, 159, 0.844);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s ease;
	display: inline-block;
}

.footer-links li a:hover {
	color: #fff;
	text-decoration: underline;
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	margin-top: 20px;
}

.footer h1 {
	font-size: 20px;
	background: transparent;
	padding: 0;
	margin: 0;
	line-height: 34px;
}

.footer-logo {
	flex: 0 0 auto;
}

/* Background Colors */
.bg_color_white { background-color: #fff; }
.bg_color_grey { background-color: #e6e6e6; }
.bg_color_green { background-color: #51ac32; }
.bg_color_blue { background-color: #009de1; }
.bg_color_purple { background-color: #722774; }
.bg_color_yellow { background-color: #ffdb00; }
.bg_color_red { background-color: red; }
.bg_color_yellow_light { background: #fffbe3; }

/* Border Utilities */
.border_top_white { border-top: 1px solid #fff; }
.border_black { border: 1px solid #1d1d1b; }
.no-border { border: 0; }

/* Font Utilities */
.font_size_m { font-size: 18px; letter-spacing: 0.5px; }
.font_weight_light { font-weight: 100; }

/* Social Media Buttons */
.social_btns {
	float: left;
	width: 100%;
	padding: 0;
	margin: 20px 0 0 0;
}

.social_btns a:link, .social_btns a:visited {
	float: left;
	width: 40px;
	height: 40px;
	margin: 0 10px 0 0;
	padding: 0;
	background-repeat: no-repeat;
	background-size: cover;
	text-decoration: none;
}

.social_btns a:hover, .social_btns a:active {
	transition: all 0.3s ease;
	opacity: 0.5;
}

/* Legacy Button Styles */
a.full_link:link, a.full_link:visited {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 1;
	text-decoration: none;
}

a.full_link:hover, a.full_link:active {
	background-color: #fff;
	opacity: 0.5;
}

/* Light ticket button for event lists */
.event-ticket-btn-light {
	display: inline-block;
	font-size: .72rem;
	font-weight: 500;
	padding: .25rem .6rem;
	border-radius: 5px;
	background: rgba(255,255,255,.1);
	color: var(--color-text-muted, #aaa);
	border: 1px solid var(--color-border, #333);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.2;
	transition: background .15s, color .15s;
}
.event-ticket-btn-light:hover {
	background: rgba(255,255,255,.18);
	color: #fff;
}

/* Inline-to-class migration utilities (Simuze templates) */
.muted-text { color: var(--color-text-muted, #888); }
.muted-text-center { color: var(--color-text-muted, #888); text-align: center; }
.text-subtle { color: var(--color-text-subtle); }
.w-full-center { width: 100%; text-align: center; }
.mt-075 { margin-top: .75rem; }
.mb-075 { margin-bottom: .75rem; }
.mb-125 { margin-bottom: 1.25rem; }
.mt-0 { margin-top: 0; }
.p-y-2 { padding: 2rem 0; }
.sticky-top-55 { position: sticky; top: 5.5rem; }
.fs-0875 { font-size: .875rem; }

/* Homepage layout (moved from inline <style>) */
#hp-board { margin-bottom: 2.5rem; }
#hp-board .hp-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
#hp-board .hp-section-header h2 { margin: 0; font-size: 1.25rem; }
#hp-upcoming { margin-bottom: 2.5rem; }
#hp-upcoming .hp-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; flex-wrap: wrap; gap: .4rem; }
#hp-upcoming .hp-section-header h2 { margin: 0; font-size: 1.15rem; }
#hp-upcoming .hp-section-header .hp-header-actions { display: flex; gap: .4rem; align-items: center; }
#hp-upcoming .event-list { list-style: none; padding: 0; margin: 0; }
#hp-upcoming .event-list-item { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--color-border, #2a2a2a); }
#hp-upcoming .event-list-item:last-child { border-bottom: none; }
#hp-upcoming .event-date-badge { min-width: 44px; text-align: center; background: #1f2937; color: #fff; border-radius: 6px; padding: .3rem .4rem; font-size: .68rem; line-height: 1.15; }
#hp-upcoming .event-date-badge .day { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1; }
#hp-upcoming .event-info { flex: 1; min-width: 0; }
#hp-upcoming .event-title { display: block; font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; margin: 0; padding: 0; }
#hp-upcoming .event-meta { font-size: .75rem; color: var(--color-text-muted, #888); margin-top: 0; line-height: 1.2; }
#hp-upcoming .event-ticket-btn-light { margin-left: auto; }

/* Messages page */
.messages-page { padding: 2rem 0; }
.messages-compose-board { max-width: 100%; }
.messages-compose-row { align-items: flex-start; }
.messages-compose-header {
	margin-bottom: 2.25rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .15rem;
}
.messages-compose-nav { margin-bottom: 1.1rem; width: 100%; }
.messages-compose-kicker { margin: 0 0 .5rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted, #888); }
.messages-compose-title { margin: 0; letter-spacing: 0; }
.messages-compose-lede { margin: .7rem 0 0; font-size: .9rem; color: var(--color-text-muted, #888); line-height: 1.5; max-width: 38rem; }
.messages-compose-reply-ref {
	margin: .45rem 0 0;
	font-size: .88rem;
	color: var(--color-text-muted, #888);
	line-height: 1.35;
	max-width: 38rem;
}
.messages-compose-reply-ref-title { color: var(--color-text, #fff); font-weight: 600; }
.messages-compose-main { margin-top: .3rem; }
.messages-compose-main .form-error { margin: 0 0 1.25rem; }
.messages-compose-sidebar { padding-top: .15rem; }
.messages-compose-context {
	border: 1px solid rgba(184, 186, 193, 0.2);
	border-radius: 10px;
	padding: 1.25rem 1.2rem;
	background: rgba(255, 255, 255, 0.03);
	position: sticky;
	top: calc(var(--header-height, 60px) + 1rem);
}
.messages-compose-context-kicker {
	margin: 0 0 .85rem;
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--color-text-muted, #888);
}
.messages-compose-context .board-item { margin: 0; }
.messages-compose-context .board-body { max-height: 12rem; overflow: auto; white-space: pre-wrap; }
.messages-compose-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 1.5rem; }
.messages-compose-main .form-actions.messages-compose-actions { margin-top: 1.35rem; }
.messages-success-banner { padding: .75rem 1rem; background: rgba(168,213,186,.15); border-radius: 8px; margin-bottom: 1rem; }
.messages-row-start { align-items: flex-start; }
.messages-thread-list { list-style: none; padding: 0; margin: 0; }
.messages-thread-item { margin-bottom: .35rem; }
.messages-thread-link { display: block; padding: .45rem .6rem; border-radius: 6px; text-decoration: none; color: inherit; }
.messages-thread-link.active { background: rgba(168,213,186,.12); }
.messages-thread-label { font-size: .8rem; }
.messages-thread-code { font-size: .75rem; word-break: break-all; }
.messages-thread-unread { font-size: .7rem; margin-left: .35rem; }
.messages-bubble-list { display: flex; flex-direction: column; gap: .75rem; }
.messages-bubble { padding: .6rem .85rem; border-radius: 8px; max-width: 100%; }
.messages-bubble--sent { background: rgba(168,213,186,.1); align-self: flex-end; }
.messages-bubble--received { background: rgba(255,255,255,.06); align-self: flex-start; }
.messages-bubble-body { font-size: .9rem; white-space: pre-wrap; }
.messages-bubble-time { font-size: .72rem; color: var(--color-text-muted); margin-top: .35rem; }

/* Board page */
.board-page { padding-top: 1.5rem; padding-bottom: 2.5rem; }
.board-page .board-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.board-page .board-page-header h1,
.board-page .board-page-header h2 { margin: 0; padding: 0; }
.board-page .board-page-header.board-page-header--subtle {
	align-items: stretch;
	justify-content: flex-start;
}
.board-page-header--subtle { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; }
.board-page-header--subtle .board-page-header-nav { width: 100%; }
.board-page-header--subtle .board-page-header-text { width: 100%; }
.board-page-header--subtle.board-page-header--split { flex-direction: column; align-items: stretch; }
.board-page-header-nav { margin: 0; }
.board-page-header-text { flex: 1; min-width: 0; }
.board-page-kicker { margin: 0 0 .35rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted, #888); }
.board-page-title { margin: 0; word-break: break-word; }
.board-page-desc { margin: .65rem 0 0; font-size: .9rem; color: var(--color-text-muted, #888); line-height: 1.45; max-width: 38rem; }
.board-page-header-actions { flex-shrink: 0; align-self: flex-start; }
@media (min-width: 640px) {
	.board-page-header--subtle.board-page-header--split {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1rem;
	}
	.board-page .board-page-header.board-page-header--subtle.board-page-header--split {
		align-items: flex-end;
		justify-content: space-between;
	}
	.board-page-header--split .board-page-header-text { flex: 1; min-width: 0; }
	.board-page-header-actions { align-self: center; }
}
.board-page .board-filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.board-page .board-filter-bar a { font-size: .82rem; padding: .3rem .75rem; border-radius: 20px; border: 1px solid var(--color-border); text-decoration: none; color: inherit; }
.board-page .board-filter-bar a.active { background: var(--color-primary,#0284c7); color: #fff; border-color: var(--color-primary,#0284c7); }
.board-sidebar { padding-top: .25rem; }
.board-sidebar .sidebar-box { border: 1px solid var(--color-border); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.25rem; }
.board-sidebar .sidebar-box h3 { margin: 0 0 .75rem; font-size: .95rem; }
.board-sidebar .sidebar-filter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.board-sidebar .sidebar-filter-list a { font-size: .875rem; text-decoration: none; color: inherit; display: block; padding: .2rem 0; }
.board-sidebar .sidebar-filter-list a.active { color: var(--color-accent,#A8D5BA); font-weight: 600; }
.board-post-form { max-width: 620px; }
.board-post-form .form-group { margin-bottom: 1rem; }
.board-post-form label { display: block; font-size: .88rem; font-weight: 500; margin-bottom: .35rem; }
.board-post-form input[type=text], .board-post-form select, .board-post-form textarea { width: 100%; }
.board-post-form textarea { min-height: 100px; resize: vertical; }
.board-post-form .form-error { color: #dc2626; margin-bottom: .75rem; font-size: .9rem; }
.board-view-detail { max-width: 100%; }
.board-view-detail .board-item { cursor: default; padding: 1.1rem 1.2rem; gap: 0.45rem; }
.board-view-detail .board-view-actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; margin-top: 1.35rem; padding-top: .25rem; }
.board-view-error-wrap { margin: 0 0 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.board-view-error { color: var(--color-text-muted); margin: 0; padding: 0; font-size: .95rem; line-height: 1.45; max-width: 40rem; }
.board-view-body { margin-top: .75rem; white-space: pre-wrap; }
.board-view-meta { margin-top: 1rem; }
.button-disabled-static { pointer-events: none; opacity: .85; }

/* Global avatar shape contract */
img.user-avatar,
img.member-avatar,
img.friend-avatar,
img.requester-avatar,
img.thread-avatar,
img.participant-avatar {
	border-radius: 50% !important;
}

img.group-avatar,
img.map-group-avatar.group-avatar,
.network-card img.group-avatar {
	border-radius: 8px !important;
}