/*
	Bootstrap 3 compatibility for Bootstrap 5

	The theme (style.css) was built on Bootstrap 3.3.5. Bootstrap 5 changes many base
	styles, so this file puts back the Bootstrap 3 values the theme relied on.
	Load it after bootstrap.min.css and before style.css, so the theme still wins.
*/

/* Base typography */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: inherit;
	font-weight: 500;
	line-height: 1.1;
	color: inherit;
}
h1, .h1,
h2, .h2,
h3, .h3 {
	margin-top: 20px;
	margin-bottom: 10px;
}
h4, .h4,
h5, .h5,
h6, .h6 {
	margin-top: 10px;
	margin-bottom: 10px;
}
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

p {
	margin: 0 0 10px;
}
small, .small {
	font-size: 85%;
}
b, strong {
	font-weight: bold;
}
.lead {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
}
@media (min-width: 768px) {
	.lead {
		font-size: 21px;
	}
}

ul, ol {
	margin-top: 0;
	margin-bottom: 10px;
	padding-left: 40px;
}
ul ul, ul ol, ol ul, ol ol {
	margin-bottom: 0;
}
dl {
	margin-top: 0;
	margin-bottom: 20px;
}
dt { font-weight: bold; }
dd { margin-left: 0; }

blockquote {
	padding: 10px 20px;
	margin: 0 0 20px;
	font-size: 17.5px;
	border-left: 5px solid #eeeeee;
}

hr {
	margin-top: 20px;
	margin-bottom: 20px;
	border: 0;
	border-top: 1px solid #eeeeee;
	color: inherit;
	opacity: 1;
}

label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: bold;
}

th {
	text-align: left;
}

/* Bootstrap 3 form controls inherited text colour (the recipe filter buttons) */
button,
input,
optgroup,
select,
textarea {
	color: inherit;
}

/* Bootstrap 5 underlines links; Bootstrap 3 did not */
a {
	text-decoration: none;
}

/* Buttons */
.btn {
	line-height: 1.42857143;
}
.btn-lg {
	line-height: 1.3333333;
}
.btn-default {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;
}

/* Grid */

/* Bootstrap 3 here was compiled with 30px gutters; Bootstrap 5 defaults to 24px */
.row,
.container {
	--bs-gutter-x: 30px;
}

/* Bootstrap 3 fixed container widths (Bootstrap 5 caps at 540/720/960/1140/1320) */
.container {
	width: auto;
	max-width: none;
}
@media (min-width: 768px) {
	.container { width: 750px; }
}
@media (min-width: 992px) {
	.container { width: 970px; }
}
@media (min-width: 1200px) {
	.container { width: 1170px; }
}

/* Bootstrap 3 clearfixed rows and containers, which contains floats (the recipe tiles)
   and stops child margins escaping */
.row::before,
.row::after,
.container::before,
.container::after {
	content: "";
	display: table;
}
.row::after,
.container::after {
	clear: both;
}

/* Bootstrap 3 padded columns anywhere (the Testimonials heading sits inside the carousel,
   not a row) and floated them from their breakpoint up */
:where(:not(.row)) > [class*="col-"] {
	padding-left: 15px;
	padding-right: 15px;
}
@media (min-width: 768px) {
	:where(:not(.row)) > [class*="col-md-"] { display: flow-root; }
}
@media (min-width: 992px) {
	:where(:not(.row)) > [class*="col-lg-"] { display: flow-root; }
}

/* Bootstrap 5 pads every child of a row; Bootstrap 3 only padded columns */
.row > :where(:not([class*="col-"])) {
	padding-left: 0;
	padding-right: 0;
}

/* Bootstrap 3 columns stacked as plain blocks below their breakpoint, so child margins
   collapsed. Bootstrap 5 rows stay flex, which keeps every margin. Rows with no column
   active at the current width go back to block layout to match. */
.row:where(:not(:has(> [class*="col-"]))) {
	display: block;
}
@media (max-width: 991.98px) {
	.row:where(:not(:has(> :is(.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, [class*="col-md-"])))) {
		display: block;
	}
}
@media (max-width: 767.98px) {
	.row:where(:not(:has(> :is(.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12)))) {
		display: block;
	}
}

/* Theme-specific */

/* Rows that mix an active column with an inactive heading column stay flex, so the
   heading's last margin can't collapse into .ewd-heading's larger 5em margin as it did
   in Bootstrap 3. Dropping it gives the same spacing. */
@media (max-width: 991.98px) {
	.ewd-heading[class*="col-lg-"] > :last-child { margin-bottom: 0; }
}
@media (max-width: 767.98px) {
	.ewd-heading[class*="col-md-"] > :last-child { margin-bottom: 0; }
}

/* Flex rows stretch columns to equal height; keep the menu column its own height */
.ewd-nav .row {
	align-items: flex-start;
}

/* Bootstrap 5 makes href-less links inherit colour, which greys out "Advice" in the menu */
.ewd-nav ul li > a:not([href]) {
	color: #ffffff;
}
.ewd-nav ul li > a:not([href]):hover {
	color: #d1cfcf;
}

/* Recipe filter toggles .show, which Bootstrap 3 defined as display:block */
.filterDiv.show {
	display: block;
}