/*
 * Mobile fixes, loaded after the parent theme + abmf-helper CSS (see functions.php).
 * Theme breakpoints: phone <= 454px, tablet 455-991px, desktop >= 992px.
 * Only the first rule applies on desktop.
 */

/* The narrower Yanone Kaffeesatz heading font (restored in functions.php) lets the
   "Hide Comments" link share the heading line, where it wrapped mid-label. */
.comments-title .read-comments-link {
	display: inline-block;
	white-space: nowrap;
}

/* Phones and tablets */
@media (max-width: 991px) {
	/* The empty desktop header wrapper keeps margin-bottom:20px !important from abmf-helper,
	   which collapsed into a grey strip above the mobile header. */
	.main-header-w {
		margin-bottom: 0 !important;
	}

	.mobile-header-w .mobile-header .mobile-logo img {
		max-height: 64px;
	}

	/* Collapse unfilled AdSense slots instead of leaving blank boxes */
	ins.adsbygoogle[data-ad-status="unfilled"] {
		display: none !important;
	}

	/* Bigger hit area for servings -/+ without changing the bar's size (theme padding is 0 5px) */
	.ingredient-serves .ingredient-serves-decr,
	.ingredient-serves .ingredient-serves-incr {
		padding: 10px 8px;
		margin: -10px -3px;
	}

	/* Author box printed an empty avatar band when there's no avatar image */
	.single-post-about-author .author-avatar-w:not(:has(img)) {
		display: none;
	}
}

/* Phones */
@media (max-width: 454px) {
	/*
	 * Recipe pages: the sidebar column (photo, share bar, ingredients, nutrition) stacked above the
	 * main column, so the title showed up ~2,000px down the page. Flatten both columns into one
	 * flex column: title, cuisine, time/serves, then photo + ingredients, then everything else in
	 * its old order. The theme's sticky-sidebar script doesn't run at phone width.
	 */
	.single-panel {
		display: flex;
		flex-direction: column;
		padding: 0 10px 20px;
	}

	.single-panel .single-panel-details,
	.single-panel .single-panel-details-i,
	.single-panel .single-panel-main {
		display: contents;
	}

	.single-panel .single-panel-main > * {
		order: 4;
	}

	.single-panel .single-panel-details-i > * {
		order: 3;
	}

	.single-panel .single-panel-main > .single-title {
		order: 1;
		padding: 10px 0 0;
	}

	.single-panel .single-panel-main > .single-recipe-custom-taxonomies,
	.single-panel .single-panel-main > .single-meta:not(.single-meta-at-bottom) {
		order: 2;
	}

	.single-panel .single-panel-main > .single-meta:not(.single-meta-at-bottom) {
		margin: 0 0 12px;
	}

	.single-panel .single-panel-main .single-title h1 {
		margin: 8px 0;
		font-size: 40px;
		line-height: 1.1;
	}

	.single-panel .single-panel-main .single-meta ul li {
		font-size: 17px;
	}

	.single-panel .single-panel-main .quick-description-quote {
		margin-top: 10px;
		padding: 14px 26px;
		font-size: 19px;
	}

	.single-panel .single-panel-main .quick-description-quote:before,
	.single-panel .single-panel-main .quick-description-quote:after {
		font-size: 32px;
	}

	.single-panel .single-panel-main .quick-description-quote:before {
		top: 0;
		left: 0;
	}

	.single-panel .single-panel-main .quick-description-quote:after {
		right: 0;
		bottom: 0;
	}

	.single-panel .single-content .bordered-title {
		margin-top: 20px;
	}

	.single-content p,
	.single-content li {
		line-height: 1.6;
	}

	.image-credit {
		font-size: 14px;
		color: #666;
	}

	/* Nutrition header ran into its collapse toggle; tiles were inline-blocks that wrapped unevenly */
	.single-nutritions h3 {
		padding-right: 44px;
	}

	.single-nutritions .single-nutritions-list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.single-nutritions .single-nutritions-list .single-nutrition {
		width: auto;
		margin: 0;
	}

	/* Bigger hit area for the collapse toggles; the icon stays put */
	.single-ingredients .close-btn,
	.single-nutritions .close-btn {
		padding: 12px;
		margin: -12px;
	}

	/* FAQ block (abmf-helper) sets padding:50px inline, leaving ~290px for text */
	section.faq {
		padding: 10px 20px 30px !important;
	}

	section.faq h3 {
		font-size: 22px;
	}

	.main-footer .menu li a {
		display: inline-block;
		padding: 10px 4px;
		margin: -10px -4px;
	}
}