/**
 * In The Kibble: dog food recalls, archive and single
 *
 * Same constraint as the homepage: Tailwind runs with `corePlugins.preflight = false`
 * (assets/js/tailwind-config.js) and Bootstrap 5's Reboot no longer ships a global
 * `img` rule, so nothing applies `max-width: 100%` / `height: auto`. Everything below
 * is scoped to `.itk-recalls` so the rest of the site keeps its current behaviour.
 */

/* ---------------------------------------------------------------- base */

.itk-recalls {
	--itk-red: #f15152;
	--itk-blue: #95caf3;
	--itk-ink: #1c2431;
	--itk-muted: #6b7482;
	--itk-line: #e4e7ec;
	--itk-bg-soft: #f7f8fa;

	max-width: 940px;
	margin: 0 auto;
	padding: 2rem 1rem 4rem;
	color: var(--itk-ink);
}

.itk-recalls img,
.itk-recalls svg {
	max-width: 100%;
	height: auto;
}

.itk-recalls a {
	text-decoration: none;
	color: inherit;
}

/* ---------------------------------------------------------------- header */

.itk-recalls__eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--itk-red);
	margin-bottom: 0.5rem;
}

.itk-recalls__head h1 {
	font-size: clamp(2rem, 5vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

.itk-recalls__lede {
	font-size: 1.05rem;
	color: var(--itk-muted);
	max-width: 60ch;
	margin: 0 0 1rem;
}

/* The whole point of the rebuild: make it obvious how current the page is. */
.itk-recalls__freshness {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--itk-muted);
	background: var(--itk-bg-soft);
	border: 1px solid var(--itk-line);
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	margin: 0;
}

.itk-recalls__freshness::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #21a35c;
	flex: none;
}

.itk-recalls__freshness--stale::before {
	background: #d9a300;
}

/* ---------------------------------------------------------------- latest */

.itk-recall-latest {
	display: block;
	margin: 2rem 0;
	padding: 1.5rem;
	border: 2px solid var(--itk-red);
	border-radius: 14px;
	background: #fff6f6;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.itk-recall-latest:hover,
.itk-recall-latest:focus-visible {
	box-shadow: 0 6px 22px rgba(241, 81, 82, 0.18);
	transform: translateY(-1px);
}

.itk-recall-latest__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--itk-red);
	margin-bottom: 0.5rem;
}

.itk-recall-latest h2 {
	font-size: 1.3rem;
	line-height: 1.35;
	margin: 0 0 0.75rem;
}

.itk-recall-latest__meta {
	font-size: 0.9rem;
	color: var(--itk-muted);
	margin: 0;
}

/* ---------------------------------------------------------------- controls */

.itk-recalls__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 2rem 0 1rem;
}

.itk-recalls__controls label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.itk-recalls__search {
	flex: 1 1 260px;
}

.itk-recalls input[type="search"],
.itk-recalls select {
	width: 100%;
	font-size: 0.95rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--itk-line);
	border-radius: 8px;
	background: #fff;
	color: var(--itk-ink);
}

.itk-recalls select {
	width: auto;
	min-width: 170px;
}

.itk-recalls input[type="search"]:focus,
.itk-recalls select:focus {
	outline: 2px solid var(--itk-blue);
	outline-offset: 1px;
	border-color: var(--itk-blue);
}

.itk-recalls__count {
	font-size: 0.85rem;
	color: var(--itk-muted);
	margin: 0 0 1rem;
}

/* ---------------------------------------------------------------- list */

.itk-recall-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--itk-line);
}

.itk-recall {
	border-bottom: 1px solid var(--itk-line);
}

.itk-recall > a {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 0.25rem 1.25rem;
	padding: 1.1rem 0.5rem;
	align-items: start;
	transition: background 0.12s ease;
}

.itk-recall > a:hover,
.itk-recall > a:focus-visible {
	background: var(--itk-bg-soft);
}

.itk-recall__date {
	font-size: 0.85rem;
	color: var(--itk-muted);
	font-variant-numeric: tabular-nums;
	padding-top: 0.15rem;
}

.itk-recall__title {
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 0.35rem;
}

.itk-recall__meta {
	grid-column: 2;
	font-size: 0.85rem;
	color: var(--itk-muted);
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* ---------------------------------------------------------------- badges */

.itk-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	white-space: nowrap;
}

.itk-badge--contamination {
	background: #fde8e8;
	color: #a4262c;
}

.itk-badge--foreign {
	background: #fdf1dc;
	color: #8a5a00;
}

.itk-badge--nutrient {
	background: #e6f1fb;
	color: #1c5a94;
}

.itk-badge--other {
	background: #eceef1;
	color: #4a5260;
}

/* ---------------------------------------------------------------- empty */

.itk-recalls__empty {
	padding: 2.5rem 0;
	text-align: center;
	color: var(--itk-muted);
}

.itk-recalls__source {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--itk-line);
	font-size: 0.85rem;
	color: var(--itk-muted);
}

.itk-recalls__source a {
	color: #1c5a94;
	text-decoration: underline;
}

/* ---------------------------------------------------------------- single recall */

.itk-recall-single {
	max-width: 1140px;
}

.itk-recall-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 2.5rem;
	align-items: start;
}

.itk-recall-single__back {
	margin-bottom: 1.25rem;
	font-size: 0.9rem;
}

.itk-recall-single__back a {
	color: var(--itk-muted);
}

.itk-recall-single__back a::before {
	content: "\2190";
	margin-right: 0.4rem;
}

.itk-recall-single__back a:hover {
	color: var(--itk-ink);
}

.itk-recall-single__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.85rem;
	color: var(--itk-muted);
	margin: 0 0 0.75rem;
}

.itk-recall-single__head h1 {
	font-size: clamp(1.6rem, 3.4vw, 2.15rem);
	line-height: 1.25;
	margin: 0 0 1.5rem;
}

/* The structured summary, rebuilt from the ACF fields rather than reprinting
   FDA's own table out of post_content. */
.itk-recall-facts {
	background: var(--itk-bg-soft);
	border: 1px solid var(--itk-line);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 2rem;
}

.itk-recall-facts__title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--itk-muted);
	margin: 0 0 0.9rem;
}

.itk-recall-facts dl {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: 0.55rem 1rem;
	margin: 0;
}

.itk-recall-facts dt {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--itk-muted);
	margin: 0;
}

.itk-recall-facts dd {
	margin: 0;
	font-size: 0.95rem;
}

.itk-recall-single__body {
	font-size: 1rem;
	line-height: 1.65;
}

.itk-recall-single__body h2,
.itk-recall-contact h2 {
	font-size: 1.15rem;
	margin: 2rem 0 0.85rem;
}

.itk-recall-single__body h3 {
	font-size: 1.02rem;
	margin: 1.5rem 0 0.6rem;
}

.itk-recall-single__body p,
.itk-recall-single__body ul,
.itk-recall-single__body ol {
	margin: 0 0 1rem;
}

.itk-recall-single__body a {
	color: #1c5a94;
	text-decoration: underline;
}

.itk-recall-single__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1rem;
	font-size: 0.9rem;
	display: block;
	overflow-x: auto;
}

.itk-recall-single__body th,
.itk-recall-single__body td {
	border: 1px solid var(--itk-line);
	padding: 0.5rem 0.65rem;
	text-align: left;
}

/* FDA ships contact blocks as Bootstrap column markup; neutralise the float/width
   so it sits inside our own box. */
.itk-recall-contact {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--itk-line);
	border-radius: 12px;
}

.itk-recall-contact h2 {
	margin-top: 0;
}

.itk-recall-contact .row,
.itk-recall-contact [class*="col-"] {
	display: block;
	width: auto;
	max-width: none;
	float: none;
	padding: 0;
	margin: 0;
}

.itk-recall-contact dl {
	margin: 0 0 1rem;
}

.itk-recall-contact dt {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--itk-muted);
	margin-bottom: 0.25rem;
}

.itk-recall-contact dd {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
}

.itk-recall-contact a {
	color: #1c5a94;
	text-decoration: underline;
}

.itk-recall-single__aside {
	position: sticky;
	top: 1.5rem;
}

.itk-recall-single__aside .no-disc {
	list-style: none;
	margin: 0;
	padding: 0;
}

.itk-recall-single__aside img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------- more recalls */

.itk-recall-more {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--itk-line);
}

.itk-recall-more h2 {
	font-size: 1.15rem;
	margin: 0 0 0.75rem;
}

.itk-recall-more__all {
	margin: 1rem 0 0;
	font-size: 0.9rem;
}

.itk-recall-more__all a {
	color: #1c5a94;
	text-decoration: underline;
}

.itk-recall-comments {
	margin-top: 3rem;
}

/* ---------------------------------------------------------------- small screens */

@media (max-width: 640px) {
	.itk-recall > a {
		grid-template-columns: 1fr;
		gap: 0.3rem;
	}

	.itk-recall__meta {
		grid-column: 1;
	}

	.itk-recalls select {
		width: 100%;
	}

	.itk-recall-facts {
		padding: 1rem 1.1rem;
	}

	.itk-recall-facts dl {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.itk-recall-facts dd {
		margin-bottom: 0.65rem;
	}
}

@media (max-width: 900px) {
	.itk-recall-single__layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* Not `static`: the recall-alert widget positions its illustration with
	   `position: absolute; bottom: 0`, so the aside has to stay a containing
	   block or the artwork escapes and lands on top of the article text. */
	.itk-recall-single__aside {
		position: relative;
		top: auto;
	}
}