/* ============================================================
   site.css — Werkstatte site-specific styles
   ------------------------------------------------------------
   ALL custom CSS for this site lives in this one file.
   - Do NOT edit style.css / bootstrap.css / responsive.css:
     they are generated template files (sources in /scss).
   - Do NOT paste <style> blocks into the HTML pages.
   Every page loads this file after css/responsive.css, so
   rules here win over the template styles.
   ============================================================ */

/* ------------------------------------------------------------
   Service page cards (service-page_*.html)
   Keeps the Book/Quote row pinned to the bottom of each card.
   ------------------------------------------------------------ */
.sBlock {
	display: flex;
	flex-direction: column;
}
.cta-row {
	margin-top: auto;
	white-space: nowrap;
}
.cta-row .readMore {
	display: inline;
}

/* ------------------------------------------------------------
   Mobile / tablet header (below the desktop lg breakpoint)
   ------------------------------------------------------------
   One fixed compact bar: logo left; phone + menu buttons right
   (plus the appointment button on tablet). The old behavior —
   a floating hamburger positioned with margin hacks, and the
   jQuery stickyScrollBlock bar that appeared on scroll — is
   disabled below; the bar simply stays fixed and never changes.
   Desktop (>= 992px) is untouched.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

	/* --- the fixed bar --- */
	#header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1030;
		background: #fff;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	}
	body {
		padding-top: 56px; /* = bar height: 8 + 40 + 8 */
	}
	#header .midBar {
		padding: 8px 0 !important;
	}
	#header .midBar .row {
		align-items: center;
	}
	#header .logo {
		display: flex;
		align-items: center;
	}
	#header .logo img {
		height: 40px !important;
		width: auto !important;
		max-width: none !important;
	}

	/* --- right side: phone + hamburger as matching 42px buttons --- */
	#header .contactList {
		margin: 0 !important;
	}
	#header .contactList > li {
		margin: 0 !important;
	}
	#header .contactList .ico {
		margin: 0 !important;
		padding: 0 !important;
	}
	#header .contactList .ico .icn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		font-size: 16px;
		color: #212529;
		background: #ffe823; /* theme yellow, same as the CTA buttons */
		border: 0;
		border-radius: 6px;
	}
	.midbar-toggler {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		margin-left: 8px;
		line-height: 0;
		background: transparent;
		border: 1px solid #d8dde2;
		border-radius: 6px;
		cursor: pointer;
		flex-shrink: 0;
	}
	.midbar-toggler:focus {
		outline: none;
		box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.35);
	}
	.midbar-toggler .navbar-toggler-icon {
		display: block;
		width: 20px;
		height: 20px;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23212529' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-size: contain;
	}

	/* --- tablet-only appointment button: a normal inline button,
	       not the old full-width absolute strip --- */
	#header .midBar .btnHolder {
		position: static;
		margin-left: 8px;
	}
	#header .midBar .btnHolder .btn {
		min-width: 0;
		border-radius: 6px;
		padding: 12px 14px;
		font-size: 12px;
	}

	/* --- retire the old floating toggler and sticky-scroll bar --- */
	.navHolder .toggleBar {
		display: none !important;
	}
	.navHolder {
		margin: 0 !important;
	}
	.sticky-wrap-menuHolder {
		height: auto !important;
		margin: 0 !important;
	}
	.menuHolder,
	.headerFixed .menuHolder {
		position: static !important;
		top: auto !important;
		padding: 0 !important;
		background: #fff !important;
		box-shadow: none !important;
	}
	.menuHolder .menuLogo,
	.headerFixed .menuLogo {
		display: none !important;
	}

	/* --- the open menu: dark full-width panel under the bar --- */
	.navCollapse {
		margin-top: 0 !important;
		background: #212121 !important;
		max-height: calc(100vh - 56px);
		overflow-y: auto;
	}
	.navCollapse .navbar-nav {
		margin: 0;
		padding: 6px 0;
	}
	.navCollapse .nav-item .nav-link {
		color: #fff;
		padding: 12px 22px;
	}
	.navCollapse .nav-item .nav-link:before {
		display: none;
	}
	.navCollapse .dropdown-menu {
		position: static;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
		background: #2c2c2c;
	}
	.navCollapse .dropMenu .dropdown-item {
		color: #cfcfcf;
		background: transparent;
		padding: 11px 34px;
	}
	.navCollapse .dropMenu .dropdown-item:hover,
	.navCollapse .dropMenu .dropdown-item:focus {
		color: #fff;
		background: #383838;
	}
}