/* ============================================================
   4TU.ResearchData - Additional CSS (full replacement)
   Header: logo left, search/login right, menu centred on row 2
   ============================================================ */

/* ---------- Links ---------- */
/* Low-specificity base rule: menu, buttons, footer and other
   elements with their own color rules keep their colors. */
a {
	color: #ff6829;
}

a:hover {
	color: #d97e00;
}

/* ---------- Logo ---------- */
.site .site-header-container #site-logo .site-title img.bb-logo {
	width: auto;
	max-height: 100px;
}

.site-title {
	border-bottom: none;
}

/* ---------- Header layout ---------- */
/* Real flex row: logo + aside on row 1, menu wraps to row 2 */
.site-header .site-header-container.flex {
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: none;
	padding-top: 10px;
}

/* Search / login block pushed to the right edge */
.header-aside {
	float: none;
	width: auto;
	margin-top: 0;
	margin-left: auto;
}

/* Menu on its own full-width centred row below logo */
.site-header .main-navigation,
.default-header .main-navigation {
	order: 3;
	flex: 0 0 100%;
	width: 100%;
	float: none;
	text-align: center;
	margin: 0 auto;
	padding: 14px 0 18px;
	border-bottom: none;
}

/* Grey line directly under the menu, full browser width.
   The 100vw + translate trick makes it full-bleed even though
   the nav sits inside a padded container. */
.site-header .main-navigation::before,
.default-header .main-navigation::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 1px;
	background: #cccccc;
}

/* Cream band below the grey line, also full-bleed */
.site-header .main-navigation::after,
.default-header .main-navigation::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 18px;
	background: #fbf5e9;
}

/* The menu itself is a flex list: center it explicitly */
.site-header .main-navigation .primary-menu,
.site-header .primary-menu {
	display: flex;
	justify-content: center;
	float: none;
	margin: 0 auto;
}

/* Breathing room between menu items */
.site-header .primary-menu > li > a {
	padding-left: 16px;
	padding-right: 16px;
}

/* No band on the header itself (it landed above the menu) */
.site-header {
	border-bottom: none;
}

/* The theme gives the header a fixed height, so the wrapped menu
   row was overflowing and hanging over the content. Let it grow. */
.site-header,
.site-header .site-header-container.flex,
.site-header .bb-header-row {
	height: auto !important;
	min-height: 0 !important;
}

/* Solid background so content can never show through the menu row */
.site-header .main-navigation,
.default-header .main-navigation {
	background: #fff;
	position: relative;
	z-index: 10;
}

/* Blank space between the cream band and the start of the content.
   The band is out of flow now, so it eats ~18px of this padding. */
.site-content,
#content {
	padding-top: 48px;
}

/* ---------- Search bar: visible, centred at the top ---------- */
/* BuddyBoss normally hides the search form behind the magnifier
   icon; force it visible and park it in the middle of the top row. */
.site-header {
	position: relative;
}

.site-header .header-search-wrap {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	width: 340px;
	height: 48px;
	background: #fff;
	box-shadow: none;
	border: 2px solid #eeeeee;
	border-radius: 8px;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

/* The input itself was collapsing to nothing; force it open */
.site-header .header-search-wrap input[type="search"],
.site-header .header-search-wrap input[type="text"],
.site-header .header-search-wrap .search-field {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	height: 44px !important;
	min-width: 0;
}

/* The overlay search positions its inner elements absolutely and
   adds its own container padding; flatten all of that so the input
   simply fills the 340px box. */
.site-header .header-search-wrap * {
	position: static !important;
	transform: none !important;
}

.site-header .header-search-wrap .container,
.site-header .header-search-wrap > div {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.site-header .header-search-wrap form {
	position: relative !important;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.site-header .header-search-wrap input.search-field,
.site-header .header-search-wrap input[type="search"] {
	font-size: 15px;
	background: #fff;
	border: none;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0 56px 0 14px;
}

/* CSS cannot rewrite placeholder text, so: hide the real
   placeholder and paint 'Search' on top of the empty field. */
.site-header .header-search-wrap input::placeholder {
	color: transparent;
}

.site-header .header-search-wrap form::before {
	content: 'Search';
	position: absolute !important;
	left: 14px;
	top: 0;
	line-height: 44px;
	font-size: 15px;
	color: #9a9a9a;
	pointer-events: none;
	z-index: 2;
}

/* Remove the fake placeholder while typing or when text is present */
.site-header .header-search-wrap form:focus-within::before,
.site-header .header-search-wrap form:has(input:not(:placeholder-shown))::before {
	content: none;
}

/* Magnifier block on the right of the input, like the new design.
   Purely visual (submitting happens on Enter). */
.site-header .header-search-wrap form::after {
	content: '\f002';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute !important;
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	line-height: 44px;
	text-align: center;
	color: #333;
	background: #f4f4f4;
	border-left: 2px solid #eeeeee;
	pointer-events: none;
}

/* Hide leftovers of the overlay search UI */
.site-header .header-search-wrap .close-search,
.site-header .header-search-wrap label,
.site-header .header-search-wrap .search-form__icon {
	display: none !important;
}

/* Hide the magnifier toggle in the right-hand icon strip */
.site-header .header-search-link {
	display: none;
}

/* ---------- LOG IN button ---------- */
/* Covers BuddyBoss's sign-in header button; the .login-btn class
   is for a menu item you tag yourself (see instructions). */
.site-header .bb-header-buttons a.signin-button,
.site-header a.signin-button,
.site-header .login-button,
.primary-menu .login-btn > a {
	background: #f29100 !important;
	color: #ffffff !important;
	border: none;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
}

.site-header .bb-header-buttons a.signin-button:hover,
.site-header a.signin-button:hover,
.site-header .login-button:hover,
.primary-menu .login-btn > a:hover {
	background: #d97e00 !important;
	color: #ffffff !important;
}

.site-header .bb-header-buttons a.signin-button:active,
.site-header a.signin-button:active,
.site-header .login-button:active,
.primary-menu .login-btn > a:active {
	background: #b36700 !important;
	color: #ffffff !important;
}

/* Menu hover: corporate hover orange */
.primary-menu li a:hover {
	color: #d97e00;
}

/* Sign up: plain text link, not a button.
   Broad selectors: the register link by href, and any header button
   that is not the sign-in button. */
.site-header .bb-header-buttons a.signup,
.site-header a.button.signup,
.site-header .signup-button,
.site-header .bb-header-buttons a:not(.signin-button):not(.login-button),
.site-header a[href*="register"],
.site-header a[href*="sign-up"],
.site-header a[href*="signup"] {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 10px 8px;
	color: #555 !important;
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
	box-shadow: none !important;
}

.site-header .bb-header-buttons a.signup:hover,
.site-header a.button.signup:hover,
.site-header .signup-button:hover,
.site-header .bb-header-buttons a:not(.signin-button):not(.login-button):hover,
.site-header a[href*="register"]:hover,
.site-header a[href*="sign-up"]:hover,
.site-header a[href*="signup"]:hover {
	color: #f29100 !important;
	text-decoration: underline;
	background: transparent !important;
}

.site-header .bb-header-row {
	display: flex;
	justify-content: center;
}

/* ---------- Menu typography ---------- */
/* Normal case, 18px, like the new design */
.site-header .menu-item-has-children > a,
.site-header .primary-menu > li > a {
	text-transform: none;
	font-size: 18px;
}

.site-header .sub-menu a {
	text-transform: none;
	font-size: 14px;
}

/* All (sub)menu links in dark grey */
.primary-menu li a,
.site-header .sub-menu a,
#navbar-extend .primary-menu a {
	color: #3c3c3c;
}

.user-wrap.menu-item-has-children .user-name {
	font-size: 11px;
}

/* Dropdown caret */
#navbar-extend .menu-item-has-children:after,
.primary-menu .menu-item-has-children:not(.hideshow):after {
	content: '\f0d7';
	font-family: "Font Awesome 5 Free";
	font-weight: 510;
	font-size: 14px;
}

/* Active / hover menu colors */
.primary-menu > .current-menu-parent > a,
.primary-menu > .current-menu-ancestor > a,
.primary-menu > .current-menu-item > a,
.primary-menu .current_page_item > a,
.primary-menu > .current-menu-parent > a:hover,
.primary-menu > .current-menu-ancestor > a:hover,
.primary-menu > .current-menu-item > a:hover,
.primary-menu .current_page_item > a:hover,
.primary-menu .current-menu-item > a > i,
.primary-menu .current-menu-item > a:hover > i,
.site-header .sub-menu .current-menu-parent > a,
.site-header .sub-menu .current-menu-ancestor > a {
	color: #3c3c3c;
}

.primary-menu > .current-menu-parent > a:hover,
.primary-menu > .current-menu-ancestor > a:hover {
	color: #d97e00;
}

/* ---------- Page frame ---------- */
#page {
	border-top: #f29100 5px solid;
}

/* ---------- Content headings ---------- */
/* Headings: uppercase, no borders by default */
h1, h2, h3 {
	border-bottom: none;
	text-transform: uppercase;
	line-height: 40px;
}

.entry-title {
	line-height: 40px;
}

/* Page/post titles: thin grey rule like NEWS */
body.buddypress article.page > .entry-header .entry-title {
	margin: 20px 20px 10px 5px;
	margin-top: 20px;
	padding: 0 0 8px 0;
	border-bottom: 1px solid #cccccc;
	text-transform: uppercase;
	font-size: 26px;
	line-height: 27px;
}

.entry-header .entry-title,
h1.entry-title {
	border-bottom: 1px solid #cccccc;
	padding-bottom: 8px;
}

/* ---------- Typography ---------- */
body.bb-custom-typo {
	font-family: 'Source Sans Pro', sans-serif;
}

.bb-custom-typo h1, .bb-custom-typo .h1,
.bb-custom-typo h2, .bb-custom-typo .h2,
.bb-custom-typo h3, .bb-custom-typo .h3,
.bb-custom-typo h4, .bb-custom-typo .h4,
.bb-custom-typo h5, .bb-custom-typo .h5,
.bb-custom-typo h6, .bb-custom-typo .h6,
.bb-custom-typo .bb-course-footer,
.bb-custom-typo .ld-table-list-header .ld-text,
.bb-custom-typo .gamipress-achievement-points {
	font-family: 'Source Sans Pro', sans-serif;
}

/* ---------- Widgets ---------- */
.widget {
	background: transparent;
	border: 1px solid #cccccc;
}

body .widget-area:not(.widget-area-secondary) {
	padding-top: 0;
}

/* Our Services icons: dark grey line language, consistent with
   the new icon set. Change to #f29100 to make them orange again. */
.widget .list-group a i {
	color: #3c3c3c;
}

/* ---------- BuddyPress ---------- */
body.buddypress .site-content {
	background: #fff;
}

body.buddypress #page #primary {
	background: #f7f5f5;
}

.directory.document .document-options {
	top: 40px;
}

.buddypress-wrap .subnav-filters {
	margin: 0;
}

.subnav-search.groups-search {
	margin-top: -80px;
}

#group-invites-container .bb-groups-invites-left .group-invites-members-listing .action button {
	background: url(/wp-content/themes/buddyboss-theme/assets/css/../images/svg/circle-add.svg) no-repeat;
	background-size: contain;
}

.bb-buddypanel .bb-footer,
.bb-buddypanel .header-search-wrap,
.bb-buddypanel .site-content,
.bb-buddypanel .site-header {
	padding: 0;
}

/* ---------- Icons / social ---------- */
.fa, .fas, .far, .fab {
	margin: 5px;
	color: gray;
}

.social-networks-wrap svg {
	width: 135%;
}

.align-items-center span.social {
	display: inline-block;
	margin-right: 3px;
	margin-top: 0;
	width: 28px;
}

.align-items-center svg path {
	fill: #808080;
}

.align-items-center .social-networks-wrap span.social {
	display: inline-block;
	width: 20px;
	margin-right: 10px;
}

/* ---------- Login page ---------- */
body.login form#loginform input[type=text] {
	width: 40px;
	color: blue;
}

/* ============================================================
   HOMEPAGE / NEWS GRID
   Scoped to .home so the theme's other post-grids (e.g. the
   Related Articles strip under posts) keep their own layout.
   ============================================================ */

/* Section headings: one shared style for NEWS and widget titles */
.home .post-grid::before,
.widget .widget-title {
	font-family: 'Space Grotesk', 'Source Sans Pro', sans-serif !important;
	font-size: 26px !important;
	font-weight: 400 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #3c3c3c;
	border-bottom: 1px solid #cccccc;
	padding: 0 0 8px 0;
	line-height: 1.2;
}

/* Placement (kept separate: only these differ per context) */
.home .post-grid::before {
	content: 'NEWS';
	display: block;
	flex: 0 0 100%;
	width: 100%;
	margin: 0 10px 24px 10px;
}

.widget .widget-title {
	margin: 0 0 14px 0;
	border-bottom: none;
	color: #3c3c3c;
}

/* Uniform tiles: three equal columns, the first article included */
.home .post-grid article,
.home .post-grid article.first {
	flex: 0 0 33.333% !important;
	max-width: 33.333% !important;
	border: none;
	background: transparent;
}

/* Equal-size cards: every tile in the grid gets the same height */
.home .post-grid {
	align-items: stretch;
}

.home .post-grid article {
	display: flex;
}

.home .post-grid .post-inner-wrap {
	height: 100% !important;
	width: 100%;
	display: flex;
	flex-direction: column;
	background: #ffffff !important;
	border: 1px solid #cccccc;
}

/* Image area: hard-locked to 160px on every card */
.home .post-grid .post-inner-wrap .ratio-wrap,
.home .post-grid .post-inner-wrap .entry-img,
.home .post-grid .post-inner-wrap figure {
	height: 160px !important;
	min-height: 160px !important;
	max-height: 160px !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden;
	position: relative;
}

.home .post-grid .post-inner-wrap .ratio-wrap img,
.home .post-grid .post-inner-wrap .entry-img img,
.home .post-grid .post-inner-wrap figure img {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* Card text area: white, compact padding */
.home .post-grid article .entry-content-wrap {
	background: #ffffff !important;
	padding: 14px 16px 16px !important;
}

.home .post-grid .ratio-wrap {
	width: 100%;
	margin: 0;
}

.entry-img {
	background: lightgray;
}

/* Tile typography: Space Grotesk titles at 16, preview at 12.
   One scale for every tile, the first article included. */
.home .post-grid article .entry-title,
.home .post-grid article .entry-title a {
	font-family: 'Space Grotesk', 'Source Sans Pro', sans-serif !important;
	font-size: 16px !important;
	line-height: 1.35 !important;
	border-bottom: none;
	margin: 0 0 8px 0;
}

.home .post-grid article .entry-content,
.home .post-grid article .entry-summary,
.home .post-grid article p {
	font-size: 12px !important;
	line-height: 1.5 !important;
	margin-bottom: 0;
}

/* Excerpts capped at 3 lines with an ellipsis, so every card
   ends near its text and the boxes stay short */
.home .post-grid article .entry-content,
.home .post-grid article .entry-summary {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* No underline on titles inside homepage previews */
.home .post-grid h1, .home .post-grid h2,
.home .post-grid h3, .home .post-grid h4,
.home .post-grid article .entry-header .entry-title {
	border-bottom: none;
}

/* Preview meta: no author, no date */
.home .post-grid article .entry-meta,
.home .post-grid article .post-meta,
.home .post-grid article .bs-post-meta {
	display: none !important;
}

/* ---------- RFW widgets ---------- */
.rfw-class .widget_dock li img {
	width: 150px;
}

.rfw_dock h3 {
	font-size: 20px;
	border-bottom: none;
	text-transform: uppercase;
	color: gray;
}

.rfw-class .widget_dock li > div.text_div {
	line-height: none;
	font-size: 14px;
	padding: 0;
}

.rfw_list.rfw_dock li {
	background: #f7f5f5;
	padding: 15px;
}

/* ---------- Footer ---------- */
#page .footer-bottom {
	border-top: 35px #f29100 solid;
}

.footer {
	position: relative;
	bottom: 0;
	width: auto;
	background-color: #fff;
	padding: 0;
	border-bottom: 3px solid #f29100;
}

.footer > .container {
	background: #3c3c3c;
	color: #fff;
	width: auto;
	padding: 0 0 20px 0;
}

.footer > .container a {
	color: #fff;
	text-decoration: underline;
}

.footer > .container p {
	color: #fff;
}

.footer-bottom-right {
	color: white;
}

.container .footer-loto img {
	width: 300px;
	max-width: none;
	max-height: none;
}

.naam p, .footertext p, .urls p {
	font-size: 13px;
	text-align: justify;
}

.logos {
	display: block;
	background: #f29100;
	height: 40px;
	margin-bottom: 20px;
}

.naam {
	float: left;
	margin-left: 20px;
	height: auto;
	max-width: 400px;
	margin: 0 20px 0 20px;
}

.naam H5, .footertext H5 {
	color: white;
	font-weight: bold;
	font-size: 19px;
	margin-bottom: 7px;
}

.footertext {
	max-width: 350px;
	display: inline-block;
	margin: 0 20px 0 20px;
	vertical-align: top;
}

.urls {
	width: 300px;
	display: inline-block;
}

.urls .navbar-brand > img {
	height: 60px;
}

.urls p {
	margin-left: 30px;
}

.whitelogos {
	float: right;
}

.whitelogos img {
	margin: 10px;
}

.social {
	width: 75px;
	float: right;
	margin-top: -36px;
}

.twitter, .linkedIn, .youTube, .facebook {
	float: none;
}

.urls .fa, .urls .fas, .urls .fab {
	margin: 0 7px 0 0;
	color: white;
}

.urls .far {
	margin: 0 3px 0 0;
	color: white;
}

.bb-grid .footer-widget {
	max-width: 100%;
	flex: 0 0 100%;
}

/* Our Services: floating vertical list, small icons */
.widget:has(.services-list) {
	background: transparent;
	border: none;
	padding-left: 0;
	padding-right: 0;
}

.services-list a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 7px 0;
	font-size: 15px;
	color: #3c3c3c;
	text-decoration: none;
}

.services-list img {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
}

.services-list a:hover span {
	color: #d97e00;
	text-decoration: underline;
}