/* Layonara theme: the website's storm look over SMF 2.1's default theme (index.css).
   Only colours, surfaces and type change; the classic board layout stays as it is. */

:root {
	--layo-night: #0a0f14;
	--layo-panel: #101920;
	--layo-surface: #142029;
	--layo-surface-2: #182733;
	--layo-border: rgb(255 255 255 / 0.09);
	--layo-border-strong: rgb(255 255 255 / 0.16);
	--layo-text: #dfe7ec;
	--layo-text-dim: #9fb0ba;
	--layo-ember: #e0a64a;
	--layo-ember-bright: #f3c375;
	--layo-ember-deep: #c98f35;
}

/* Page */
body {
	background:
		radial-gradient(ellipse 90% 50% at 50% -10%, rgb(60 86 104 / 0.45), transparent 70%),
		var(--layo-night);
	background-attachment: fixed;
	color: var(--layo-text);
	font-family: "Inter", system-ui, sans-serif;
}
a,
a:link,
a:visited {
	color: var(--layo-ember-bright);
}
a:hover {
	color: #ffd99a;
	text-decoration: none;
}
h1,
h2,
h3,
h4,
.cat_bar h3,
.title_bar h3,
.title_bar h4,
#forumposts .display_title,
.forumtitle {
	font-family: "Cinzel", Georgia, serif;
	letter-spacing: 0.02em;
}

/* SMF's own top bar (messages, alerts, search) under the site header */
#top_section {
	background: rgb(16 25 32 / 0.92);
	border-bottom: 1px solid var(--layo-border);
	color: var(--layo-text-dim);
}
#top_section .welcome,
#top_section .button_login,
#top_section .button_signup {
	/* Guests: the site header already has Sign in. */
	display: none;
}
#top_info > li > a,
#top_info .top_menu {
	color: var(--layo-text);
}
#top_info > li > a.open,
#top_info > li > a:hover {
	background: var(--layo-surface-2);
	color: var(--layo-ember-bright);
}

/* The main panel */
#wrapper {
	/* The old logo banner used to sit here and space the panel off the top bar. */
	margin-top: 24px;
	background: rgb(16 25 32 / 0.9);
	border: 1px solid var(--layo-border);
	border-radius: 14px;
	box-shadow: 0 30px 80px rgb(0 0 0 / 0.5);
	backdrop-filter: blur(8px);
}
#upper_section {
	background: transparent;
	color: var(--layo-text-dim);
}
#upper_section ul li.greeting,
#upper_section .user time,
.news h2,
.news p {
	color: var(--layo-text-dim);
}
#inner_wrap {
	border-bottom-color: var(--layo-border);
}
#content_section {
	background: transparent;
	color: var(--layo-text);
}

/* Main menu */
.dropmenu li a {
	color: var(--layo-text);
}
.dropmenu li a.active,
.dropmenu li a.active:hover,
.dropmenu li:hover > a,
.dropmenu li a:focus {
	background: var(--layo-ember);
	color: var(--layo-night);
	box-shadow: none;
	border-color: var(--layo-ember);
}
.dropmenu li a.active .textmenu,
.dropmenu li:hover > a .textmenu {
	color: var(--layo-night);
}
.dropmenu li ul,
.top_menu,
.popup_window,
#mobile_user_menu .popup_window {
	background: var(--layo-panel);
	border: 1px solid var(--layo-border-strong);
	color: var(--layo-text);
	box-shadow: 0 20px 40px rgb(0 0 0 / 0.55);
}
.dropmenu li li a:hover {
	background: var(--layo-surface-2);
	color: var(--layo-ember-bright);
}

/* Breadcrumbs */
.navigate_section ul {
	background: var(--layo-surface);
	border: 1px solid var(--layo-border);
	box-shadow: none;
	color: var(--layo-text-dim);
}
.navigate_section ul li a {
	color: var(--layo-text);
}
.navigate_section ul li.last a,
.navigate_section ul li.last {
	color: var(--layo-ember-bright);
}

/* Section bars (categories, topic headers) */
.cat_bar,
.title_bar,
.cat_bar:not(.collapsed),
#forumposts .cat_bar {
	background: linear-gradient(180deg, #1c2b37 0%, #15212b 100%);
	border: 1px solid var(--layo-border-strong);
	border-radius: 8px 8px 0 0;
	color: var(--layo-ember-bright);
}
.cat_bar h3,
.cat_bar h3 a,
.title_bar h3,
.title_bar h4,
.title_bar h3 a,
.title_bar h4 a {
	color: var(--layo-ember-bright);
}
.cat_bar .desc {
	color: var(--layo-text-dim);
}

/* Board and topic rows, posts, boxes */
.windowbg,
.windowbg2,
.up_contain,
.roundframe,
.descbox,
.information,
.plainbox,
.generic_list_wrapper,
#forumposts .windowbg {
	background: var(--layo-surface);
	border-color: var(--layo-border);
	box-shadow: none;
	color: var(--layo-text);
}
.windowbg:nth-of-type(even),
.windowbg.alternate,
.windowbg2 {
	background: var(--layo-surface-2);
}
.windowbg:hover {
	background: #1b2c38;
}
.board_description,
.stats,
.lastpost,
.lastpost p,
.childboards,
.moderators,
.floatleft .smalltext,
.smalltext,
.board_stats p,
.info .description,
#display_head .description,
#display_head p {
	color: var(--layo-text-dim);
}
.info h4 a,
.info a.subject {
	font-weight: 600;
}
.board_icon .board_on,
.board_icon .board_off {
	filter: saturate(0.8);
}

/* Topic page */
#display_head,
.pagesection,
#moderationbuttons {
	color: var(--layo-text);
}
#display_head .display_title,
#display_head h2 {
	color: #fff;
}
.poster h4,
.poster h4 a {
	color: var(--layo-ember-bright);
}
.poster li,
.poster .membergroup,
.poster .postcount,
.keyinfo .smalltext,
.keyinfo .postinfo,
.moderatorbar,
.signature {
	color: var(--layo-text-dim);
}
.postarea .keyinfo,
.post_wrapper .postarea .keyinfo {
	border-bottom-color: var(--layo-border);
}
.inner,
.post .inner {
	color: var(--layo-text);
	border-top-color: var(--layo-border);
}
.signature {
	border-top-color: var(--layo-border);
}

/* Quotes and code */
blockquote.bbc_standard_quote,
blockquote.bbc_alternate_quote,
.bbc_standard_quote,
.bbc_alternate_quote {
	background: #0e171e;
	border-left: 3px solid var(--layo-ember);
	color: var(--layo-text);
}
blockquote cite,
.quoteheader,
.codeheader {
	color: var(--layo-text-dim);
}
.bbc_code,
code.bbc_code {
	background: #0b1218;
	border: 1px solid var(--layo-border);
	color: #e6edf0;
}

/* Buttons */
.button,
a.button,
input[type="submit"],
input[type="button"],
button,
.buttonlist a,
.pagelinks .button {
	background: var(--layo-surface-2);
	border: 1px solid var(--layo-border-strong);
	color: var(--layo-text);
	box-shadow: none;
}
.button:hover,
a.button:hover,
input[type="submit"]:hover,
button:hover,
.buttonlist a:hover,
.button.active,
.buttonlist a.active {
	background: var(--layo-ember);
	border-color: var(--layo-ember);
	color: var(--layo-night);
}
.pagelinks strong,
.pagelinks .current_page {
	color: var(--layo-ember-bright);
}
.pagelinks a.nav_page {
	color: var(--layo-text);
}

/* Form fields */
input,
select,
textarea,
.input_text,
.input_password {
	background: #0b1218;
	border: 1px solid var(--layo-border-strong);
	color: var(--layo-text);
}
input:focus,
select:focus,
textarea:focus {
	border-color: var(--layo-ember);
	outline: 2px solid rgb(224 166 74 / 0.3);
	outline-offset: 0;
	box-shadow: none;
}
::placeholder {
	color: rgb(201 214 220 / 0.45);
}

/* Notices */
.noticebox {
	background: #2a2210;
	border-color: rgb(224 166 74 / 0.4);
	color: #f6e3bf;
}
.errorbox {
	background: #2a1414;
	border-color: rgb(220 90 90 / 0.4);
	color: #f3c9c9;
}
.infobox {
	background: #12261c;
	border-color: rgb(90 190 130 / 0.35);
	color: #cdeedb;
}

/* Tables (member list, stats) */
.table_grid tr.title_bar,
.table_grid thead th {
	background: #1c2b37;
	color: var(--layo-ember-bright);
}
.table_grid td,
.table_grid tr {
	border-color: var(--layo-border);
}

/* Footer */
#footer {
	background: transparent;
	color: var(--layo-text-dim);
}
#footer a {
	color: var(--layo-text-dim);
}
#footer a:hover {
	color: var(--layo-ember-bright);
}

/* Default theme surfaces that share its light gradient */
#inner_section,
.inline_mod_check,
.post_options ul,
.quickbuttons > li,
.quickbuttons li ul,
.popup_content,
.notify_dropdown {
	background: transparent;
	color: var(--layo-text);
}
.quickbuttons > li,
.quickbuttons li ul,
.post_options ul,
.inline_mod_check {
	background: var(--layo-surface-2);
	border-color: var(--layo-border-strong);
}
.quickbuttons > li:hover,
.quickbuttons li ul li a:hover,
.post_options ul a:hover,
.notify_dropdown a:hover {
	background: var(--layo-ember);
	color: var(--layo-night);
}
.quickbuttons li a,
.quickbuttons li ul li a {
	color: var(--layo-text);
}
.navigate_section ul li {
	color: var(--layo-text-dim);
	text-shadow: none;
}
.navigate_section ul li .dividers {
	color: var(--layo-ember);
}
.info .subject,
.info a.subject {
	color: var(--layo-ember-bright);
}
.lastpost strong,
.dropmenu li strong {
	color: var(--layo-text-dim);
}
.boardindex_table .board_stats p,
.up_contain .lastpost,
#mobile_action .notify_dropdown a {
	border-color: var(--layo-border-strong);
}
input:focus,
textarea:focus,
select:focus {
	background: #0b1218;
}
#footer {
	border-top: 1px solid var(--layo-border);
}
.keyinfo,
.postarea .keyinfo,
#forumposts .keyinfo {
	border-color: var(--layo-border);
}
.inner {
	box-shadow: none;
}

/* Row striping and row states (topic lists, member lists, tables). The default theme's
   :nth-of-type stripes outrank the plain .windowbg rule above, so they're repeated here. */
.windowbg:nth-of-type(odd),
.bg.odd,
.stripes:nth-of-type(odd) {
	background: var(--layo-surface);
}
.windowbg:nth-of-type(even),
.bg.even,
.stripes:nth-of-type(even) {
	background: var(--layo-surface-2);
}
tr.windowbg:hover,
#topic_container .windowbg:hover {
	background: #1b2c38;
}
.windowbg:target {
	background: #2a2210;
}
.windowbg.locked {
	background: #121a21;
}
.windowbg.sticky {
	background: #1a2a22;
}
.windowbg.sticky.locked {
	background: #1f2420;
}
.windowbg.approvetopic,
.windowbg.approvepost,
.approvebg,
.approvebg2 {
	background: #2a1a14;
	color: var(--layo-text);
}
#topic_container .windowbg,
.generic_list_wrapper table.table_grid {
	border-color: var(--layo-border);
}
.list_posts {
	border-top-color: var(--layo-border);
	box-shadow: none;
}

/* Calendar (calendar.css) */
#month_grid table,
#main_grid table {
	background: var(--layo-surface);
	border-color: var(--layo-border);
}
#month_grid th:first-child,
#month_grid th.days,
#month_grid td.weeks,
#main_grid th:first-child,
#main_grid th.days,
#main_grid td.weeks {
	background: #1c2b37;
	color: var(--layo-text-dim);
}
#month_grid td,
#main_grid td {
	border-color: var(--layo-border);
}
#month_grid td.disabled,
#main_grid td.disabled {
	background: #0e161c;
}
.calendar_today,
td.days:hover,
#month_grid td.calendar_today,
#main_grid td.calendar_today {
	background: #2a2210;
}
#month_grid td.events,
#main_grid td.events {
	background: rgba(90, 190, 130, 0.14);
}
#month_grid td.holidays,
#main_grid td.holidays {
	background: rgba(90, 150, 230, 0.14);
}
#month_grid td.birthdays,
#main_grid td.birthdays {
	background: rgba(170, 120, 240, 0.14);
}
#main_grid td.days,
#month_grid td.days,
#main_grid td.disabled,
#month_grid td.disabled,
#main_grid tbody tr:nth-child(2) td.days,
#month_grid tbody tr:nth-child(2),
#main_grid tbody tr.days_wrapper > td:nth-child(2),
#month_grid tr.days_wrapper > td:nth-child(2),
#main_grid tr.days_wrapper:nth-child(2) > td.weeks,
#main_grid table:last-child td.weeks,
.event_wrapper:not(:last-child) {
	border-color: var(--layo-border);
}
#main_grid td.events:hover,
#main_grid td.holidays:hover,
#main_grid td.birthdays:hover,
#main_grid td.days:hover {
	background: #1b2c38;
}