/* ==========================================================================
   Kitchen With Mommy - Companion
   Layered on top of the theme. No theme files are modified.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MOBILE HEADER OVERFLOW  (the P1 bug)

   The theme header is a 3-column grid sized `auto auto 1fr` below 980px.
   Grid items default to min-width:auto, so the search field (min-width:110px
   plus padding and button) and the 193px logo could not shrink. That forced
   104-133px of horizontal page scroll on every phone.

   Fix: let the columns shrink, drop to two columns, and move the search into
   the collapsible panel. `.kwm-header__actions` follows `.kwm-header__nav` in
   the DOM, so the open state is expressible with a sibling selector - no JS.
   -------------------------------------------------------------------------- */
/* The same inability to shrink also overflowed small laptops and landscape
   tablets (measured: 108px of horizontal scroll at 1024px), because the
   desktop grid sizes the search column `auto` at its 278px intrinsic width.
   minmax(0, auto) lets that column give way before the page does. */
@media (min-width: 981px) {
	.kwm-header__inner {
		grid-template-columns: auto minmax(0, 1fr) minmax(0, auto);
	}
	.kwm-header__actions,
	.kwm-search,
	.kwm-search input {
		min-width: 0;
	}
	.kwm-search input {
		width: 100%;
	}
}

@media (max-width: 980px) {
	.kwm-header__inner {
		grid-template-columns: 1fr auto;
	}
	.kwm-header__brand,
	.kwm-header__actions,
	.kwm-search,
	.kwm-search input {
		min-width: 0;
	}
	.kwm-header__brand   { order: 1; }
	.kwm-nav-toggle      { order: 2; }
	.kwm-header__nav     { order: 3; }
	.kwm-header__actions { order: 4; }

	.kwm-header__nav,
	.kwm-header__actions {
		grid-column: 1 / -1;
	}

	.kwm-header__actions .kwm-search {
		width: 100%;
	}
	.kwm-search input {
		width: 100%;
		flex: 1 1 auto;
	}

	/* Tap target: the hamburger was under the 44px guideline. */
	.kwm-nav-toggle {
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
	}
	.kwm-header__nav.is-open .kwm-nav a {
		display: block;
		padding: 10px 4px;
	}
}

/* Tablets keep the inline search; only phones fold it into the menu, so we
   do not regress the 720-980px range that was working before. */
@media (max-width: 719px) {
	.kwm-header__actions {
		display: none;
	}
	.kwm-header__nav.is-open ~ .kwm-header__actions {
		display: flex;
		padding-bottom: 12px;
	}
}

@media (max-width: 420px) {
	.kwm-logo__text {
		font-size: 1rem;
		line-height: 1.2;
	}
}

/* --------------------------------------------------------------------------
   1b. REMAINING PHONE OVERFLOW

   Two further sources, found by measuring every element's right edge against
   the viewport at 320px:
   - `.kwm-product-box` is a flex row (icon + body) whose body could not shrink
     below its min-content width, pushing the card ~16px past its grid cell.
   - the decorative floating hero labels are absolutely positioned and sat
     outside the scene on very narrow screens.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.kwm-product-box {
		flex-wrap: wrap;
	}
	.kwm-product-box__body,
	.kwm-product-box__head,
	.kwm-product-box__pc {
		min-width: 0;
	}
	.kwm-product-box__body {
		flex: 1 1 100%;
	}
	.kwm-product-box__title,
	.kwm-product-box__best-for,
	.kwm-product-box__note,
	.kwm-pros li,
	.kwm-cons li {
		overflow-wrap: break-word;
		word-break: break-word;
	}
}

/* The interactive tools ship their own inline forms (routine tracker, pantry
   and toy planners, filters). Their inputs carry min-widths that exceed a
   narrow phone, so allow them to wrap and shrink. */
@media (max-width: 760px) {
	.kwm-routine__add,
	.kwm-form-grid,
	.kwm-productdb__filters,
	.kwm-tool form,
	.kwm-newsletter-card__form {
		flex-wrap: wrap;
	}
	.kwm-routine__add > *,
	.kwm-form-grid > *,
	.kwm-newsletter-card__form > * {
		min-width: 0;
	}
	.kwm-routine__add input,
	.kwm-newsletter-card__form input {
		flex: 1 1 100%;
	}
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="number"],
	select,
	textarea {
		max-width: 100%;
		min-width: 0;
	}
}

@media (max-width: 600px) {
	.kwm-hero__visual,
	.kwm-hero__scene {
		overflow: hidden;
	}
	.kwm-hero__card {
		max-width: calc(100% - 20px);
	}
}

/* Safety net only - the real overflow causes are fixed above. */
body {
	overflow-x: clip;
}

/* --------------------------------------------------------------------------
   1c. DUPLICATE H1 ON LANDING PAGES

   The theme prints the page title twice at 52px: once in `.kwm-page__head`
   and again as `.kwm-section__title` inside the shortcode, which also carries
   the standfirst. `display:none` (rather than a visually-hidden class) removes
   the redundant one from the accessibility tree as well, so screen readers
   announce the heading exactly once.
   -------------------------------------------------------------------------- */
body.kwmc-landing .kwm-page__title {
	display: none;
}
/* Keep the breadcrumb row's spacing sane once the title is gone. */
body.kwmc-landing .kwm-page__head {
	padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   1d. DROPDOWN NAVIGATION

   The theme ships no submenu styling at all — the original menu was six flat
   links. Adding child items made every submenu render expanded inline, which
   destroyed the header. These rules plus the matching JS provide hover,
   keyboard and touch behaviour.
   -------------------------------------------------------------------------- */
.kwm-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 981px) {
	.kwm-nav > li {
		position: relative;
	}
	.kwm-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 232px;
		padding: 8px;
		background: #fff;
		border: 1px solid var(--kwm-line, #e8ded4);
		border-radius: 14px;
		box-shadow: 0 14px 34px rgba(60, 40, 25, .13);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity .14s ease, transform .14s ease, visibility .14s;
		z-index: 60;
	}
	/* Bridges the gap so the menu survives the pointer crossing into it. */
	.kwm-nav > li.menu-item-has-children::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 14px;
	}
	.kwm-nav > li:hover > .sub-menu,
	.kwm-nav > li:focus-within > .sub-menu,
	.kwm-nav > li.kwmc-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.kwm-nav .sub-menu a {
		display: block;
		padding: 9px 12px;
		border-radius: 9px;
		white-space: nowrap;
		font-weight: 500;
	}
	.kwm-nav .sub-menu a:hover,
	.kwm-nav .sub-menu a:focus-visible {
		background: var(--kwm-cream, #f7f1ea);
		text-decoration: none;
	}
	/* The last two menus would run off the right edge. */
	.kwm-nav > li:nth-last-child(-n + 2) > .sub-menu {
		left: auto;
		right: 0;
	}
	/* Caret indicator on parents. */
	.kwm-nav > li.menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 5px;
		height: 5px;
		margin-left: 6px;
		vertical-align: 2px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		opacity: .55;
	}
	.kwmc-subnav-toggle {
		display: none;
	}
}

@media (max-width: 980px) {
	/* Collapsed by default: 41 links expanded would be an unusable menu. */
	.kwm-header__nav .kwm-nav .sub-menu {
		display: none;
		padding: 2px 0 8px 14px;
		border-left: 2px solid var(--kwm-line, #e8ded4);
		margin: 2px 0 6px 4px;
	}
	.kwm-header__nav .kwm-nav > li.kwmc-open > .sub-menu {
		display: block;
	}
	.kwm-header__nav .kwm-nav > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.kwm-header__nav .kwm-nav > li > a {
		flex: 1 1 auto;
	}
	.kwm-header__nav .kwm-nav > li > .sub-menu {
		flex: 1 1 100%;
	}
	.kwm-header__nav .kwm-nav .sub-menu a {
		display: block;
		padding: 9px 4px;
		font-weight: 400;
	}
	.kwmc-subnav-toggle {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		cursor: pointer;
		color: inherit;
		padding: 0;
	}
	.kwmc-subnav-toggle::before {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .18s ease;
		opacity: .7;
	}
	.kwmc-subnav-toggle[aria-expanded="true"]::before {
		transform: rotate(-135deg) translate(-2px, -2px);
	}
}

/* Jump links must not land under the sticky header. */
:target,
#kwmc-recipe,
.kwmc-article__body h2,
.kwmc-article__body h3 {
	scroll-margin-top: 96px;
}

/* --------------------------------------------------------------------------
   2. PHOTOGRAPHY
   The theme ships icon and gradient placeholders. These rules style the real
   images the plugin injects and retire the gradient when a photo is present.
   -------------------------------------------------------------------------- */
.kwmc-figure {
	margin: 0;
	overflow: hidden;
	background: var(--kwm-cream, #f7f1ea);
}
.kwmc-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero */
.kwm-hero__scene.has-kwmc-photo .kwm-hero__scene-bg {
	background: none;
}
.kwm-hero__scene .kwmc-figure--hero {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 0;
}
.kwm-hero__scene .kwmc-figure--hero img {
	border-radius: inherit;
}
.kwm-hero__scene.has-kwmc-photo .kwm-hero__card {
	z-index: 2;
}
/* Keep the floating labels legible over photography. */
.kwm-hero__scene.has-kwmc-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.22) 100%);
	z-index: 1;
	pointer-events: none;
}

/* Product cards: photo replaces the icon block. */
.kwm-product-box.has-kwmc-photo .kwm-product-box__icon {
	display: none;
}
.kwmc-figure--card {
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	margin-bottom: 12px;
}
.kwmc-figure--wide {
	aspect-ratio: 16 / 9;
	border-radius: 14px;
}

/* --------------------------------------------------------------------------
   3. MAGAZINE LAYER
   -------------------------------------------------------------------------- */
.kwmc-section {
	padding: 48px 0;
}
.kwmc-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.kwmc-section__title {
	margin: 0;
	font-size: clamp(1.35rem, 3vw, 1.9rem);
}
.kwmc-section__link {
	font-weight: 600;
	white-space: nowrap;
}

.kwmc-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kwmc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kwmc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) {
	.kwmc-grid,
	.kwmc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.kwmc-grid,
	.kwmc-grid--4,
	.kwmc-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

.kwmc-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.kwmc-card__media {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--kwm-cream, #f7f1ea);
}
.kwmc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.kwmc-card:hover .kwmc-card__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
	.kwmc-card__media img { transition: none; }
	.kwmc-card:hover .kwmc-card__media img { transform: none; }
}
.kwmc-card__cat {
	display: inline-block;
	margin: 12px 0 6px;
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--kwm-terra, #b5613c);
}
.kwmc-card__title {
	margin: 0 0 6px;
	font-size: 1.06rem;
	line-height: 1.35;
}
.kwmc-card__title a { color: inherit; }
.kwmc-card__excerpt {
	margin: 0 0 8px;
	font-size: .92rem;
	line-height: 1.55;
	opacity: .85;
}
.kwmc-card__meta {
	font-size: .8rem;
	opacity: .7;
	margin-top: auto;
}

/* Single article */
.kwmc-article { max-width: 760px; margin: 0 auto; }
.kwmc-article__header { margin-bottom: 22px; }
.kwmc-article__title {
	font-size: clamp(1.8rem, 4.4vw, 2.7rem);
	line-height: 1.18;
	margin: 8px 0 12px;
}
.kwmc-article__standfirst {
	font-size: 1.12rem;
	line-height: 1.6;
	opacity: .9;
	margin: 0 0 16px;
}
.kwmc-article__byline {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: .9rem;
	padding: 12px 0;
	border-top: 1px solid var(--kwm-line, #e8ded4);
	border-bottom: 1px solid var(--kwm-line, #e8ded4);
}
.kwmc-article__hero { margin: 22px 0; border-radius: 16px; overflow: hidden; }
.kwmc-article__hero img { width: 100%; height: auto; display: block; }
.kwmc-article__body > * + * { margin-top: 1.05em; }
.kwmc-article__body h2 { margin-top: 1.9em; font-size: clamp(1.3rem, 2.6vw, 1.65rem); }
.kwmc-article__body h3 { margin-top: 1.5em; font-size: 1.12rem; }
.kwmc-article__body ul,
.kwmc-article__body ol { padding-left: 1.25rem; }
.kwmc-article__body li + li { margin-top: .4em; }
.kwmc-article__body img { max-width: 100%; height: auto; border-radius: 12px; }

.kwmc-toolbar {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 18px 0;
}
.kwmc-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid var(--kwm-line, #e8ded4);
	background: #fff;
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	min-height: 44px;
	color: inherit;
}
.kwmc-btn--primary {
	background: var(--kwm-terra, #b5613c);
	border-color: var(--kwm-terra, #b5613c);
	color: #fff;
}
.kwmc-btn:hover { text-decoration: none; filter: brightness(.97); }

/* Author box */
.kwmc-author {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px;
	border: 1px solid var(--kwm-line, #e8ded4);
	border-radius: 16px;
	background: var(--kwm-cream, #f7f1ea);
	margin: 36px 0;
}
.kwmc-author__avatar { border-radius: 50%; flex: 0 0 auto; }
.kwmc-author__name { margin: 0 0 4px; font-size: 1.05rem; }
.kwmc-author__bio { margin: 0; font-size: .92rem; line-height: 1.55; }

/* Recipe card */
.kwmc-recipe {
	border: 2px solid var(--kwm-line, #e8ded4);
	border-radius: 18px;
	padding: 22px;
	margin: 32px 0;
	background: #fff;
}
.kwmc-recipe__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 14px 0;
	margin: 14px 0;
	border-top: 1px solid var(--kwm-line, #e8ded4);
	border-bottom: 1px solid var(--kwm-line, #e8ded4);
	font-size: .88rem;
}
.kwmc-recipe__meta div { min-width: 90px; }
.kwmc-recipe__meta strong {
	display: block;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	opacity: .65;
}

/* Tools-used block - the natural affiliate placement inside a recipe. */
.kwmc-tools {
	border-left: 3px solid var(--kwm-terra, #b5613c);
	padding: 4px 0 4px 16px;
	margin: 26px 0;
}
.kwmc-tools h3 { margin: 0 0 8px; font-size: 1rem; }
.kwmc-tools ul { margin: 0; padding-left: 1.1rem; font-size: .93rem; }
.kwmc-disclosure {
	font-size: .78rem;
	opacity: .72;
	margin-top: 8px;
	line-height: 1.5;
}

/* Comparison tables become stacked cards on phones. */
.kwmc-table-wrap { margin: 24px 0; }
.kwmc-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.kwmc-table th,
.kwmc-table td {
	padding: 12px;
	text-align: left;
	border-bottom: 1px solid var(--kwm-line, #e8ded4);
	vertical-align: top;
}
.kwmc-table th {
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .7;
}
@media (max-width: 720px) {
	.kwmc-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.kwmc-table tr {
		display: block;
		border: 1px solid var(--kwm-line, #e8ded4);
		border-radius: 14px;
		padding: 8px 12px;
		margin-bottom: 14px;
	}
	.kwmc-table td { display: block; border: 0; padding: 7px 0; }
	.kwmc-table td::before {
		content: attr(data-label);
		display: block;
		font-size: .7rem;
		text-transform: uppercase;
		letter-spacing: .06em;
		opacity: .6;
		margin-bottom: 2px;
	}
}

/* Accessibility: the theme inherited the UA default focus ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--kwm-terra, #b5613c);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Print: recipe pages should print cleanly. */
@media print {
	.kwm-header,
	.kwm-footer,
	.kwmc-toolbar,
	.kwm-mobile-sticky,
	.kwmc-author,
	.kwmc-section--related,
	#wpadminbar { display: none !important; }
	.kwmc-article { max-width: none; }
	body { background: #fff; }
}