/* Retruc: everything that makes this style differ from Milk v2, in one file.
 *
 * Linked last by overall_header.html, after Milk and its colour preset. Every
 * rule starts at #phpbb (the body's id) so that it outranks Milk's own rules,
 * light and dark (.fd_dark ...), without !important.
 *
 * The colours are retruc-pwa's (src/theme/variables.scss): the forum is shown
 * inside the app, and should look like a page of it.
 */

@font-face {
	font-family: "Fredoka";
	src: url("fonts/Fredoka-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fredoka";
	src: url("fonts/Fredoka-latin-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Layout: Retruc's own spacing, kept from the previous version of the style
---------------------------------------- */

/* No banner: the page starts at the quick login (or straight at the breadcrumbs,
 * once logged in), and #inner-wrap comes after the breadcrumbs instead of
 * overlapping the banner as Milk's does (milk.css pulls it up with !important). */
#phpbb #inner-wrap {
	margin-top: 10px !important;
	padding: 5px;
}

#phpbb.body-layout-Fluid #inner-wrap {
	width: auto;
	margin: 0 5px;
}

#phpbb ul.navlinks {
	display: flow-root;
	margin: 15px 15px 0 15px;
}

#phpbb ul.forums {
	padding: 6px;
}

#phpbb ul.topics {
	padding: 0;
}

#phpbb ul.notification_list {
	list-style-type: none;
}

/* The quick links' user name stays visible on a phone. */
@media (max-width: 500px) {
	#phpbb .quick-links .dropdown-trigger span {
		display: inline;
	}
}

/* The app's look: its font, its cards framed in wood, its rounded buttons
---------------------------------------- */

:root {
	--retruc-crema: #fffaf0;
	--retruc-paper: #f6efdf;
	--retruc-vora: #ddd0b4;
	--retruc-fusta: #8b5a2b;
	--retruc-tinta: #3b2f1e;
	--retruc-ombra: rgba(0, 0, 0, .15);
	--retruc-font: Fredoka, system-ui, sans-serif;
}

html.fd_dark {
	--retruc-crema: #271b11;
	--retruc-paper: #1d140c;
	--retruc-vora: rgba(255, 240, 210, .08);
	--retruc-fusta: #5a3d26;
	--retruc-tinta: #ecdfc6;
	--retruc-ombra: rgba(0, 0, 0, .4);
}

#phpbb,
#phpbb input,
#phpbb select,
#phpbb textarea,
#phpbb button {
	font-family: var(--retruc-font);
}

/* milk.css paints #inner-wrap white, and dark.css repaints it with !important. */
#phpbb #inner-wrap,
#phpbb #page-header .topiclist li.row {
	background: var(--retruc-crema) !important;
	border: 3px solid var(--retruc-fusta);
	border-radius: 14px;
	box-shadow: 0 4px 12px var(--retruc-ombra);
}

#phpbb #page-header {
	margin: 5px 5px 0;
}

#phpbb input.button1, #phpbb a.button1, #phpbb input.button2, #phpbb a.button2, #phpbb input.button3,
#phpbb .specialbutton, #phpbb .button, #phpbb select,
#phpbb .inputbox[type=text], #phpbb .inputbox[type=url], #phpbb .inputbox[type=password] {
	border-radius: 12px;
}

#phpbb .button {
	font-weight: 600;
}

#phpbb .search-box .inputbox {
	border-radius: 12px 0 0 12px;
}

#phpbb .search-box a.button-search-end {
	border-radius: 0 12px 12px 0;
}

/* Titles in the text's colour, not the links' (the preset paints every dark-mode link green). */
#phpbb h2.topic-title a,
#phpbb h2.forum-title a,
#phpbb a.forumtitle,
#phpbb a.topictitle {
	color: var(--retruc-tinta);
}

/* Dark mode: a group's colour (an inline style, from the database) is chosen for
 * a light page, and some -- blue, black, purple -- vanish on dark wood. Coloured
 * names keep their colour on a light tag of their own. */
html.fd_dark #phpbb .username-coloured {
	background: #f3e9d6;
	border-radius: 6px;
	padding: 0 4px;
}

/* Inside the app (html.retruc-app, from the retruc/sso extension) the app signs the
 * player in and out: the board's own login box and logout link would only disagree
 * with it. */
html.retruc-app #phpbb #page-header,
html.retruc-app #phpbb li:has(> a[href*="mode=logout"]) {
	display: none;
}

/* The app's own bar (overall_header.html): only inside the app, where it stands for the menu
 * beside the player's name, which the app's own menu repeats. */
.retruc-app-bar {
	display: none;
}

html.retruc-app #phpbb .retruc-app-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
}

html.retruc-app #phpbb .retruc-app-search {
	flex: 1;
	min-width: 0;
}

html.retruc-app #phpbb .retruc-app-search .inputbox {
	width: 100%;
	box-sizing: border-box;
}

html.retruc-app #phpbb #quick-links {
	display: none;
}