/*
 *  custom.css
 *
 * This file contains css values and hints for style elements that are frequently customised.
 * Note that this CSS file is loaded last so values defined here will override all others
 * including responsive.css
 */

/* Changing the header image
 * The header banner comes from ext/mdmx/tiedepalsta (template event overall_header_headerbar_after,
 * images in styles/all/theme/images/).
 */


/* link decoration
 * Uncomment the following lines to have all links underlined
 * and visited links re-coloured
 */
/*
a:link,a:visited {
	text-decoration: underline;
	color: #3f3f3f; }

a:focus,
a:hover, a:active {
	text-decoration: underline; }
*/

/*
 * Expandable nested quotes (template/bbcode.html, template/quotes.js). A quote nested in a
 * top-level quote of a post shows only its cite line and a toggle until expanded. Without
 * JavaScript (body without .hasjs) quotes stay fully open and the toggle stays hidden.
 */
.quote_showmore {
	visibility: hidden;
	cursor: pointer;
}

/* Inline after "... wrote:", as on the old forum; prosilver floats cite spans (the quote date) right. */
blockquote cite > .quote_showmore {
	float: none;
	display: inline-block;
}

.hasjs div.content > blockquote > div > blockquote > div > cite > .quote_showmore {
	visibility: visible;
}

.hasjs div.content > blockquote > div > blockquote > div:not(.quote-expanded) {
	height: 19px;
}

.dropdown li.separator {
    border-top: 4px;
    border: solid;
    border-color: #DCDCDC;
}

/*
 * Header geometry as on the old forum (we_universal + headerbanner, measured at 1280px):
 * a 49px top menu with a 1px border, 9px of page background, the header with the banner,
 * and the breadcrumbs 3px below the banner (their own margin) on the white content.
 */
.inventea-content {
	margin-top: 0;
	/* Keep the breadcrumbs' top margin inside the white content box. */
	display: flow-root;
}

 .inventea-wrapper {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 0px;
	padding-bottom: 14px;
 }

/* After .inventea-wrapper, whose bottom padding it overrides. */
.inventea-header {
	margin-top: 9px;
	padding-bottom: 0;
}

 /*
  * The top menu stays at the top of the viewport but, unlike position: fixed, also takes
  * its own height in the layout, so nothing below it needs an offset. It starts the page.
  */
 .wrap {
	padding-top: 0;
 }

 #wrap > div.inventea-headerbar {
	position: sticky;
    z-index: 99;
    width: 100%;
    top: 0px;
    border-bottom-width: 1px;
    border-bottom-color:var(--tp-topbar-border);
    border-bottom-style: solid;
    padding-bottom: 0px;
 }

 .inventea-userbar {
	padding-top: 8px;
 }

 #wrap > div.inventea-headerbar > nav > div {
	bottom: 8px;
 }

 /** reactions extension customization **/
 div.reactions > div.badge.icon-tpr.tpr-font {
	display: none;
 }

strong.reaction_count {
	background-color: #777777;
	font-size: 12px;
	margin-left: 0px;
}

a.user_alert {
    background-color: #00000010;
    border-width: 2px;
    border-color: #BBBBBB;
    border-style: solid;
    border-radius: 8px;
    padding: 2px;
}

a.user_alert_new {
    padding: 4px;
    float: right;
}

img.reaction_image {
/*    max-width: 30px; */
    max-height: 30px;
}

/** profile column and avatar size in posts view **/
dl.postprofile {
	width: 160px;
}

dd.profile-joined {
	display: none;
}
dd.profile-posts {
	display: none;
}

 a.avatar img.avatar {
	max-width: 80px;
	mix-blend-mode: var(--tp-avatar-blend);
 }

 a.header-avatar img {
	margin-bottom: 0px;
	max-height: 30px;
	vertical-align: bottom;
	width: auto;
}

.oldheader-avatar span {
	content: '\f0dd';
	display: inline-block;
	padding-left: 6px;
	padding-top: 10px;
	vertical-align: top;
	font-size: 16px;
}

.oldheader-avatar span:after {
	content: '\f0dd';
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	padding-left: 6px;
	padding-top: 2px;
	vertical-align: top;
}

a.header-avatar .topmenu-header::after {
    display: none;
}

a.header-avatar .topmenu-username-arrow::after {
    content: '\f0dd';
    display: inline-block;
    font: normal normal normal 18px/1 FontAwesome;
    padding-left: 3px;
    padding-top: 2px;
    vertical-align: top;
    margin-right: 8px;
}

 .topmenu-mainmenu {
	position:absolute; 
	left: 20px;
 }

.topmenu-menu-icon {
	font-size: 30px
}

.topmenu-username {
	font-size: 16px
}


.topmenu-header {
	font-size: 16px
}

.topmenu-badge {
	float: right;
	margin: -3px 2px 0 6px;
	padding: 2px 4px 3px;
	border-radius: 2px;
	background: #bc2a4d;
	color: #ffffff;
	line-height: 1;
	font-size: 18px;
	font-weight: normal;
}

.topmenu-badge.hidden {
	display: none;
}


.inventea-time {
    display: none;
}

/* Behind the Board Announcements and the banner: the content wrapper's colour. */
.inventea-header {
	background: var(--tp-wrapper-bg);
}



/* Set the maximum forum width on wide screens
 * To set a maximum width that the forum will not grow beyond, uncomment the following lines
 * and set a value (1200px or 1899px are typical values)
 */
 /** max-width messes up the floating header menu at the moment, fixing at some point... */
.inventea-wrapper,
.inventea-header,
.inventea-footer {
	max-width: unset;
}


/* Allow post text to fill the available width on wide screens */
/*
.section-viewtopic .postbody .content {
	max-width: none;
}
*/

/*
 * Hide some non-essential menu items if desired
 */
/*
#menu_faq, #button_faq{
	display: none;
}
*/

/*
#menu_team, #button_team{
	display: none;
}
*/

/*
#menu_memberlist, #button_memberlist{
	display: none;
}*/


/*#topic_watch_button, #forum_watch_button,*/ #topic_bookmark_button, #topic_bump_button{
	display: none;
}

/*
 * Button hide threshold
 * The max-width here adjusts the screen widths for which the header buttons are replaced by a dropdown menu
 * set this value higher if the screen buttons start to wrap, or the text becomes ugly in your language.
 * The valid range of this value is 319px to 699px.
 * I prefer a value of 319px, but if you have added buttons, or use a language with long button labels,
 * a higher value may work better for you.
 */
@media only screen and (max-width:359px) {
	.inventea-menu li > a {
		   display: none;
	}

	.inventea-mobile-dropdown-menu {
		display: block;
	}
}

/*** begin buttons inside ***/
@media only screen and (max-width: 700px) {
	.topmenu-header {
		display: none;
	}
	.topmenu-badge {
		margin-left: 0px;
	}
	.topmenu-mainmenu {
		left: 0px;
	}
	.inventea-wrapper {
        padding: 0;
    }

	/* The menu button stays in the first row when the top menu wraps to a second row. */
	#wrap > div.inventea-headerbar > nav > div {
		top: 1px;
		bottom: auto;
	}
	.inventea-userbar {
		height: auto;
		min-height: 40px;
		display: flow-root;
		padding-top: 2px;
	}
	#wrap > div.inventea-headerbar > nav > ul {
		padding-top: 4px;
	}
}
/*** end buttons inside ***/


/* --- Editor's pick badge in topic title (RecentTopics extension) --- */
h2.topic-title .rt-editors-pick-badge {
    display: inline-flex;
    align-items: center;        /* center star + text within badge */
    margin-left: 8px;

    font-size: 0.6em !important;
    font-weight: bold !important;
    vertical-align: middle;     /* center badge in the line box */
    line-height: 1;             /* avoids weird extra height */
}

h2.topic-title .rt-editors-pick-star-title {
    color: var(--tp-editors-pick-star) !important;
    margin-right: 4px;
}

h2.topic-title .rt-editors-pick-text-title {
    /* just inherits the smaller font from the badge */
}

/* --- Recommend topic button (RecentTopics extension) --- */

/* Pressed / already-recommended state */
.action-bar a.button.rt-recommend.rt-recommend--on {
	/* reset inherited button styles */
	all: unset;

	/* base button look */
	display: inline-block;
	float: left;
	margin-right: 5px;

	padding: 2px 8px;
	border-radius: 4px;
	border: 1px solid #777;

	background: #a0a0a0;
	color: #c5003b;

	font: 600 13px "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
	line-height: 1.4;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;

	/* smooth hover */
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hover / focus / active for pressed state */
.action-bar a.button.rt-recommend.rt-recommend--on:hover,
.action-bar a.button.rt-recommend.rt-recommend--on:focus,
.action-bar a.button.rt-recommend.rt-recommend--on:active {
	background-color: #b3b3b3;
	box-shadow: 0 0 0 1px #666 inset;
}

/* --- Star icons --- */

/* Default (NOT recommended yet) → outlined grey star */
a.button.rt-recommend:not(.rt-recommend--on)::before {
	content: "\f006";                  /* outlined star */
	font-family: "FontAwesome";
	margin-right: .3em;
	color: #777;
}

/* Hover before recommending → filled gold star */
a.button.rt-recommend:not(.rt-recommend--on):hover::before {
	content: "\f005";                  /* filled star */
	color: var(--tp-recommend-star);
}

/* Recommended (pressed) → filled gold star */
a.button.rt-recommend.rt-recommend--on::before {
	content: "\f005";                  /* filled star */
	font-family: "FontAwesome";
	margin-right: .3em;
	color: var(--tp-recommend-star);
	text-shadow: 0 0 1px rgba(0, 0, 0, .4);
}

/* Hover over Unrecommend → outlined grey star */
a.button.rt-recommend.rt-recommend--on:hover::before {
	content: "\f006";                  /* outlined star */
	color: #777;
}

.rt-editors-pick-star {
    color: var(--tp-editors-pick-star);
    margin-right: 4px;    /* little gap before the title */
}

/* Viewers' recommend star: outlined, golden, distinct from Editor's pick */
.rt-viewers-recommend-star {
    color: #ffa24d; /* gold */
    text-shadow: 0 0 1px rgba(0, 0, 0, .4);
    margin-right: .25em;
}

/* Outlined gold star for viewer recommendations */
.rt-user-recommend-star {
    color: #ffa24d;
    text-shadow: 0 0 1px rgba(0, 0, 0, .4);
    margin-right: .25em;
}

/*
 * Behaviour the old forum got from patches to prosilver's own files (theme/common.css,
 * theme/links.css, template/index_body.html), shared by its Light and Dark styles.
 */
.dropdown-contents {
	font-size: 16px;
}

/* prosilver's own selector, so this wins over its 300px (the old forum's common.css had 500px). */
.dropdown .dropdown-contents {
	max-height: 500px;
}

a.forumtitle,
a.topictitle {
	font-size: 1.4em;
}

/*
 * The pagination arrows' "Previous"/"Next" labels are screen-reader text (.sr-only, 1px). The
 * pagination link padding of prosilver's common.css also matched them, which pushed the label
 * a few pixels past the right edge of the page on narrow screens.
 */
.pagination li .sr-only {
	padding: 0;
}

/* No "Mark forums read" bar above the forum list. */
.section-index .action-bar.compact {
	display: none;
}

/*
 * Rules the old Dark style added, shared by both themes (Dark is the reference where the
 * old styles differed in more than colour).
 */
.notification_list p.notification-time {
	font-size: 12px;
}

/* Read notifications in the UCP list have nothing to mark: their checkbox column is hidden. */
#ucp div.notification_list > ul.topiclist.cplist.two-columns > li.bg1 > dl > dd,
#ucp div.notification_list > ul.topiclist.cplist.two-columns > li.bg2 > dl > dd {
	visibility: collapse;
}

p.post-notice {
	border-width: 1px;
	border-style: solid;
	border-radius: 5px;
}

/* Your own vote in a poll is marked by more than colour. */
fieldset > dl.voted > dt {
	text-decoration: underline;
}

.tiedepalsta-style-switcher select {
    font-size: 16px;
    font-family: inherit;
}

.tiedepalsta-style-switcher-guest {
    font-size: 16px;
}

.tiedepalsta-style-switcher-guest label > span {
    font-size: 16px;
    margin-right: 5px;
    vertical-align: middle;
}

/* Placed like the old forum's style selector (a form with 5px padding). */
@media only screen and (min-width: 701px) {
    ul.linklist > li.tiedepalsta-style-switcher-guest {
        padding: 5px;
    }
}

.tiedepalsta-style-switcher-guest::before {
    content: none !important;
}

/*
 * phpbb/collapsiblecategories: the collapse button's place on the section bar as on the old
 * forum (the extension's styles/we_universal/theme/collapsiblecategories.css; the Tiedepalsta
 * styles get only its styles/all CSS, which is loaded after this file).
 */
.forabg li.header .collapse-btn {
	margin: -26px 6px 0;
}

/*
 * dmzx/newtopic: on the old forum the "Aloita uusi keskustelu" selector was shown at every
 * width (its template was edited to drop responsive-hide). Shown here the same way, without
 * editing the extension; its own <li> is the only li.right.rightside on the breadcrumb row.
 */
@media (max-width: 700px) {
	#nav-breadcrumbs > li.right.rightside.responsive-hide {
		display: list-item !important;
	}
}

/*
 * The selector lists only forums the user can post in, so its natural width would vary per
 * user. Fixed at the width the old forum's full forum list gave it; prosilver's select
 * max-width (260px at <=500px, 240px at <=320px) still applies below that.
 */
#nav-breadcrumbs > li.right.rightside > select {
	width: 269px;
}

/*
 * With the selector on the row, phpBB's forum_fn.js would cap the breadcrumbs at its 240px
 * minimum and shorten them ("B… / Erik… / Testi…"). The old forum never capped them (its row
 * also held the announcements and banner, so the script skipped it): the crumbs keep their
 * full width and the right-hand items wrap below them.
 */
#nav-breadcrumbs:has(> li.right.rightside > select) > li.breadcrumbs {
	max-width: none !important;
}