/*
 * Retrog template - lightweight grid
 *
 * Joomla 4 ships Bootstrap 5, which no longer provides the Bootstrap 2 grid
 * classes (.row-fluid, .span*, .container) that this template's markup uses.
 * These rules reproduce just what the layout needs, so the template renders
 * identically on Joomla 4 without depending on any Bootstrap version.
 */

.container {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

.row-fluid {
	width: 100%;
}

.row-fluid:before,
.row-fluid:after {
	content: "";
	display: table;
	line-height: 0;
}

.row-fluid:after {
	clear: both;
}

.row-fluid [class*="span"] {
	float: left;
	min-height: 1px;
	box-sizing: border-box;
}

.span3  { width: 25%; }
.span9  { width: 75%; }
.span12 { width: 100%; }

/* Navbar collapse: visible on desktop, toggled on mobile */
.nav-collapse.collapse {
	display: block;
}

/* Stack columns and collapse the menu on small screens */
@media (max-width: 767px) {
	.row-fluid [class*="span"] {
		float: none;
		width: 100%;
	}

	.nav-collapse.collapse {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * [J4 fix] Bits that Joomla 3's JUI Bootstrap 2 provided but Joomla 4 no
 * longer loads. Restores the configurator to how it renders on the Joomla 3
 * site (retrog.nl).
 * ------------------------------------------------------------------------- */

/* Responsive images (Bootstrap 2 default "img { max-width:100% }"). Without it
 * the configurator product image kept its full 500px natural width and
 * overflowed its ~200px column. Scoped to the configurator so the header logo
 * and module images are untouched. */
#pb_mainPage img,
.product_left_col img {
	max-width: 100%;
	height: auto;
}

/*
 * Menus. Joomla 4's mod_menu renders the "Menu Class Suffix" as a separate
 * class (e.g. "... nav _main" / "... nav _top") instead of Joomla 3's
 * concatenated "menu_main" / "menu_top", so the ul.menu_main / ul.menu_top
 * rules in template_retrog.css no longer match and the menus fell back to a
 * plain vertical list. Re-apply that styling to the real J4 markup (both
 * menus always carry the .nav class inside their wrapper).
 */

/* Logo menu (header logo, left). Joomla 4's mod_menu adds .mod-list to the ul;
 * without Bootstrap 2 there is no list-style reset, so the logo showed a
 * bullet next to it. */
#logomenu,
#logomenu li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Main menu (top-right, horizontal).
 * De ruimte boven het menu is gelijkgetrokken met retrogdakluiken.nl. Daar
 * staat op .nav-menu (de ul) margin-top:5px + padding-top:10px en op .nav-link
 * (de links) margin-top:19px; samen 34px boven de menu-items. */
#mainmenualign ul.nav {
	float: right;
	margin: 5px 0 0 0;
	padding: 10px 0 0 0;
	list-style: none;
}

#mainmenualign ul.nav > li {
	display: inline;
	float: none;
	list-style: none;
	padding: 0;
	margin: 0;
}

#mainmenualign ul.nav > li > a {
	display: inline-table;
	padding: 20px 10px;
	margin: 19px 0 2px;
	font-size: 22px;
	font-weight: 300;
	color: #222;
	line-height: 36px;
}

/* Zelfde stap als op retrogdakluiken.nl: onder 991px worden de menu-items
 * kleiner en vervalt de padding boven de ul. */
@media (max-width: 991px) {
	#mainmenualign ul.nav {
		padding-top: 0;
	}

	#mainmenualign ul.nav > li > a {
		font-size: 18px;
	}
}

/* Top menu (Offerte aanvraag / Login bordered buttons) */
#topmenu ul.nav {
	margin: 3px 0 0 0;
	padding: 0;
	list-style: none;
}

#topmenu ul.nav > li {
	display: inline;
	float: left;
	list-style: none;
	padding: 0;
}

#topmenu ul.nav > li > a {
	display: inline-table;
	text-transform: uppercase;
	font-size: 13px;
	color: #000;
	font-weight: 400;
	margin-top: 2px;
	margin-right: 10px;
	border: 1px solid #000;
	padding: 5px;
}

#topmenu ul.nav > li > a:hover {
	background-color: #fff100;
	color: #000;
}

/* The Bootstrap 2 "hamburger" toggle is only for small screens; without
 * Bootstrap it showed as an unstyled bar next to the desktop menu. */
.btn-navbar {
	display: none;
}

@media (max-width: 767px) {
	.btn-navbar {
		display: inline-block;
	}

	#mainmenualign ul.nav {
		float: none;
	}

	#mainmenualign ul.nav > li,
	#mainmenualign ul.nav > li > a {
		display: block;
		float: none;
	}
}