/* Additions on top of the 2011 stylesheet: share links, no-JS replacements, and a responsive layer. */

p.shareLinks a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 2px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f7f7f2;
	color: #444 !important;
	font-size: 12px;
	text-decoration: none;
}
p.shareLinks a:hover { background: #fff; border-color: #999; }

/* Replaces the old equalizeAllHeight() script on the phase pages */
div.articleMiniHero2 > .innerPanel { min-height: 210px; }

/* The search box replaced the old Google CSE brand script */
#headerSearch input[type="search"] { -webkit-appearance: none; appearance: none; }

/* Bold and a shifted padding on hover resized the section buttons */
#mainMenu li.section a:hover { font-weight: normal; padding-top: 45px; }

#contentWrapper img { max-width: 100%; height: auto; }
#contentWrapper iframe { max-width: 100%; }

/* ---------- tablet & mobile ---------- */
@media (max-width: 1010px) {
	body { min-width: 360px; }

	.main {
		width: auto;
		max-width: 990px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.g100, .g200, .g300, .g400, .g500, .g600, .g700, .g800, .g900, .g1000 {
		float: none;
		display: block;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Header: the logo spans every row so its backdrop meets the strip at the bottom of #headerWrapper.
	   The last two rows match header-back.png: a 26px dark band, then 18px of page colour. */
	#header { display: grid; grid-template-columns: 117px minmax(0, 1fr) auto; grid-template-rows: auto 1fr 26px 18px; }
	#logo {
		position: static;
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		float: none;
	}
	#aboutMenu { display: contents; }
	#aboutMenu h2 { grid-column: 2; grid-row: 1; }
	#aboutMenu h3 { grid-column: 2; grid-row: 2; align-self: start; }
	#topMenu { grid-column: 2; grid-row: 3; align-self: center; margin: 0; padding: 0; }
	#headerSections { grid-column: 3; grid-row: 1 / 3; float: none; align-self: start; height: 80px; margin: 0 18px 0 0; }
	#headerSearch { grid-column: 3; grid-row: 3; align-self: center; float: none; width: auto; margin-right: 18px; padding: 0; }

	/* Content column, then sidebar underneath */
	#sidebar { margin-top: 18px; }
	#sidebar .panel, #sidebar > div { width: auto !important; }

	/* Recipe hero: photo scaled to fill the space left of the phases panel */
	#recipeIntro { container-type: inline-size; }
	#recipeIntro .innerPanel { background-size: auto 100% !important; background-position: left center !important; }
	#recipeIntro .infoSide { min-height: max(441px, calc((100cqw - 190px) * 0.75)); }

	div.recipeInfo, div.recipeShare { margin-bottom: 9px; }
	div.recipeIngredients .innerPanel { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); column-gap: 18px; }
	div.recipeIngredients h2 { grid-column: 1 / -1; }
	div.ingredientRow { display: contents; }
	div.recipeIngredient {
		float: none;
		width: auto;
		margin: 0 0 9px;
		padding-bottom: 18px;
		background: url('../img/ingredient-divider.png') no-repeat left bottom / 300% 9px;
	}
	div.instructionStep { display: flex; gap: 12px; align-items: flex-start; }
	#contentWrapper div.instructionStep div.step { float: none; flex: none; width: 47px !important; margin: 0; }
	div.instructionStep div.instruction { flex: 1; padding: 10px 0 0; }

	/* Recipe grids */
	div.recipe.g200 { display: inline-block !important; vertical-align: top; width: 48% !important; }
	div.recipePair, div.recipeRow { width: auto !important; }

	/* Recipe list: flatten the pair/row wrappers into one even grid */
	#content > .innerPanel:has(> .recipePair) { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); column-gap: 12px; }
	#content > .innerPanel:has(> .recipePair) > * { grid-column: 1 / -1; }
	#content > .innerPanel > .recipePair,
	#content > .innerPanel > .recipeRow { display: contents; }
	#content > .innerPanel div.recipe.g200 { grid-column: auto; width: auto !important; }
	#content > .innerPanel div.recipe h3 { overflow-wrap: anywhere; }
	.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: auto; margin: 0 0 9px; }
	.pagination ul li { margin: 0; }
	.pagination ul li a { display: inline-block; min-width: 28px; padding: 6px 4px; text-align: center; }
	div.articleMiniHero2 > .innerPanel { min-height: 0; }

	#contentWrapper div.floatLeft { float: none; width: auto !important; max-width: 100%; }

	/* Un-floated panels would otherwise let the .innerPanel margins collapse through them */
	.panel, .panelNarrow { display: flow-root; }

	/* Contain the floated tabs, otherwise the flow-root #content squeezes in beside them at 0 width */
	div.tabsMenu { display: flow-root; }
	div.tabsMenu ul { float: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 0 9px; }
	div.tabsMenu ul li { float: none; margin: 0; }

	/* Sidebar panels flow into as many columns as fit */
	#sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 9px; align-items: start; }
	#sidebar > p { grid-column: 1 / -1; }
	#sidebar .innerPanel > h2 { clear: both; }

	/* Recipe page: the sidebar sits under the recipe, so pack its uneven panels as masonry */
	.inside:has(> .hrecipe) + #sidebar { display: block; columns: 220px; column-gap: 9px; }
	.inside:has(> .hrecipe) + #sidebar > * { break-inside: avoid; }
	.inside:has(> .hrecipe) + #sidebar > p { column-span: all; }

	.homeBooks > a.floatLeft { float: none; display: inline-block; vertical-align: top; padding: 0 6px !important; }

	table { display: block; max-width: 100%; overflow-x: auto; }
	.slides_container, .slides_container div { width: auto !important; }
	#footer .container { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
	#footer ul { float: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; }
	#footer ul li { display: block; padding: 0; }
	#disclaimer { padding: 9px 18px; text-align: center; line-height: 1.5; }
}

@media (min-width: 768px) and (max-width: 1010px) {
	/* Home: everything under the featured recipe pairs up */
	.homeContent { display: grid; grid-template-columns: 1fr 1fr; column-gap: 9px; }
	.homeContent > * { grid-column: 1 / -1; }
	.homeContent > .g400 { grid-column: auto; }
	.homeContent > .floatLeft.g400 { display: contents; }

	/* Recipe: details beside ingredients; share beside stickers */
	div.hrecipe { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 9px; }
	div.hrecipe > * { grid-column: 1 / -1; }
	div.hrecipe > div.recipeInfo { grid-column: 1; }
	div.hrecipe > div.g600 { display: contents; }
	div.hrecipe > div.g600 > * { grid-column: 1 / -1; }
	div.hrecipe > div.g600 > div.recipeIngredients { grid-column: 2; }

	div.recipeShare { display: grid; grid-template-columns: 1fr 1fr; column-gap: 9px; align-items: start; }
	div.recipeShare > * { grid-column: 1 / -1; }
	div.recipeShare > .sharePanel { grid-column: 1; grid-row: span 2; }
	div.recipeShare > .panelNarrow,
	div.recipeShare > .panelNarrow ~ * { grid-column: 2; }
}

@media (max-width: 767px) {
	/* Header: tabs become a column of coloured buttons; menu links and search share the dark band */
	#headerSections { width: auto; height: auto; margin: 6px 0 6px 9px; align-self: center; }
	#mainMenu { display: flex; flex-direction: column; gap: 4px; float: none; }
	#mainMenu li.section { position: relative; left: auto !important; width: auto; height: auto; margin: 0; border: 1px solid #fff; border-radius: 6px; }
	#mainMenu li.section a,
	#mainMenu li.section a:hover { position: static; display: block; width: auto; padding: 3px 10px; font-size: 13px; }
	#topMenu { justify-self: start; }
	#headerSearch { grid-column: 2 / -1; justify-self: end; margin-right: 0; }

	/* Recipe hero: photo on top, phases panel below */
	#recipeIntro .innerPanel {
		display: flex;
		flex-direction: column;
		background-size: 100% auto !important;
		background-position: center top !important;
		min-height: 0;
		height: auto;
	}
	#recipeIntro .innerPanel h1 { order: 1; position: static; align-self: flex-start; float: none; }
	#recipeIntro .innerPanel div.recipeQuote { order: 2; position: static; width: auto; margin: calc(75vw - 120px) 9px 9px; box-sizing: border-box; }
	#recipeIntro .infoSide { order: 3; float: none; width: auto; height: auto !important; min-height: 0; border-left: 0; border-radius: 0 0 9px 9px; padding-bottom: 9px; }
	#recipeIntro .innerPanel:not(:has(.recipeQuote)) .infoSide { margin-top: calc(75vw - 60px); }
	#recipeIntro .innerPanel > img[style*="hidden"] { display: none; }
}

@media (max-width: 560px) {
	/* No room for links and search side by side: search moves up under the tagline */
	#header { grid-template-rows: auto auto 1fr 26px 18px; }
	#headerSections { grid-row: 1 / 4; }
	#topMenu { grid-column: 2 / -1; grid-row: 4; justify-self: center; }
	#headerSearch { grid-column: 2; grid-row: 3; align-self: start; justify-self: stretch; margin-bottom: 6px; text-align: center; }
	#headerSearch input.text { width: calc(100% - 110px); }
}

@media (max-width: 440px) {
	#headerSearch label { font-size: 0; }
	#headerSearch input.text { width: calc(100% - 30px); margin-left: 0; font-size: 13px; }
}

@media (max-width: 480px) {
	h1 { font-size: 21px; }
	#aboutMenu h2 a { background-size: contain; }
}