/**
 * Recipe/collection-only styles.
 * Version 2.0 — Premium recipe page design.
 */

/* =====================================================================
 * Breadcrumbs
 * =================================================================== */
.hk-breadcrumbs { margin-bottom: var(--hk-space-3); }

.hk-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--hk-space-1);
	margin: 0; padding: 0;
	font-size: var(--hk-text-xs);
	color: var(--hk-color-text-muted);
}

.hk-breadcrumbs li:not(:last-child)::after {
	content: "›";
	margin-inline-start: var(--hk-space-1);
	color: var(--hk-color-border);
}

.hk-breadcrumbs a { color: var(--hk-color-text-muted); text-decoration: none; transition: color var(--hk-duration) var(--hk-ease); }
.hk-breadcrumbs a:hover { color: var(--hk-color-accent-dark); }
.hk-breadcrumbs [aria-current="page"] { color: var(--hk-color-text); font-weight: 500; }

/* =====================================================================
 * Recipe Header
 * =================================================================== */
.hk-recipe-header {
	padding-block: var(--hk-space-6) var(--hk-space-4);
}

.hk-recipe-header__eyebrow {
	font-size: var(--hk-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hk-color-accent);
	margin-bottom: var(--hk-space-3);
}

.hk-recipe-header__title {
	margin-bottom: var(--hk-space-3);
	font-size: var(--hk-text-4xl);
}

.hk-recipe-header__description {
	font-size: var(--hk-text-lg);
	color: var(--hk-color-text-muted);
	line-height: var(--hk-line-normal);
	margin-bottom: var(--hk-space-4);
	max-width: 72ch;
}

.hk-recipe-header__byline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--hk-space-3);
	color: var(--hk-color-text-muted);
	font-size: var(--hk-text-sm);
	margin: 0;
}

.hk-recipe-header__byline-avatar {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 2px solid var(--hk-color-border);
}

.hk-recipe-header__byline-sep {
	display: inline-block;
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--hk-color-border);
}

/* =====================================================================
 * Recipe Hero Image
 * =================================================================== */
.hk-recipe-hero {
	border-radius: var(--hk-radius-xl);
	overflow: hidden;
	margin-bottom: var(--hk-space-6);
	background: var(--hk-color-surface-alt);
	aspect-ratio: 16/9;
	box-shadow: var(--hk-shadow-md);
}

.hk-recipe-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =====================================================================
 * Jump / Save buttons
 * =================================================================== */
.hk-jump-save {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hk-space-3);
	margin-bottom: var(--hk-space-5);
	padding: var(--hk-space-4) var(--hk-space-5);
	background: var(--hk-color-surface-warm);
	border-radius: var(--hk-radius-lg);
	border: 1px solid var(--hk-color-border-light);
}

/* =====================================================================
 * Quick Info Strip
 * =================================================================== */
.hk-quick-info {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 0;
	background: var(--hk-color-surface);
	border: 1.5px solid var(--hk-color-border);
	border-radius: var(--hk-radius-lg);
	margin: 0 0 var(--hk-space-7);
	overflow: hidden;
}

@media (min-width: 480px) { .hk-quick-info { grid-template-columns: repeat(4,1fr); } }

.hk-quick-info__item {
	padding: var(--hk-space-4) var(--hk-space-3);
	text-align: center;
	border-right: 1px solid var(--hk-color-border-light);
	border-bottom: 1px solid var(--hk-color-border-light);
}

.hk-quick-info__item:last-child { border-right: none; }

@media (min-width: 480px) {
	.hk-quick-info__item:nth-child(4) { border-right: none; }
	.hk-quick-info__item { border-bottom: none; }
}

.hk-quick-info__item dt {
	font-size: var(--hk-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hk-color-text-muted);
	margin-bottom: var(--hk-space-2);
	font-weight: 600;
}

.hk-quick-info__item dd {
	margin: 0;
	font-weight: 700;
	font-size: var(--hk-text-xl);
	font-family: var(--hk-font-display);
	color: var(--hk-color-text);
}

.hk-quick-info__item dd small {
	display: block;
	font-size: var(--hk-text-xs);
	font-family: var(--hk-font-body);
	font-weight: 400;
	color: var(--hk-color-text-muted);
	margin-top: 2px;
}

/* =====================================================================
 * Recipe Intro (editor content)
 * =================================================================== */
.hk-recipe-intro {
	margin-bottom: var(--hk-space-7);
	font-size: var(--hk-text-base);
	line-height: var(--hk-line-normal);
}

.hk-recipe-intro :is(h2,h3) { margin-top: var(--hk-space-6); }

/* =====================================================================
 * Printable Recipe Card
 * =================================================================== */
.hk-recipe-card {
	background: var(--hk-color-surface);
	border: 2px solid var(--hk-color-border);
	border-radius: var(--hk-radius-xl);
	padding: var(--hk-space-6);
	margin-bottom: var(--hk-space-8);
	scroll-margin-top: var(--hk-space-5);
	box-shadow: var(--hk-shadow-sm);
}

@media (min-width: 768px) { .hk-recipe-card { padding: var(--hk-space-7); } }

.hk-recipe-card:focus-visible { outline: 2px solid var(--hk-color-focus); outline-offset: 4px; }

/* Header */
.hk-recipe-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--hk-space-4);
	margin-bottom: var(--hk-space-5);
	padding-bottom: var(--hk-space-5);
	border-bottom: 1px solid var(--hk-color-border);
}

.hk-recipe-card__print-only-brand { display: none; }

.hk-recipe-card__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hk-space-5);
	margin-bottom: var(--hk-space-6);
}

@media (min-width: 600px) { .hk-recipe-card__top { grid-template-columns: 200px 1fr; } }
@media (min-width: 768px) { .hk-recipe-card__top { grid-template-columns: 240px 1fr; } }

.hk-recipe-card__intro { min-width: 0; }

.hk-recipe-card__image {
	aspect-ratio: 4/3;
	border-radius: var(--hk-radius-md);
	overflow: hidden;
	box-shadow: var(--hk-shadow-sm);
}

.hk-recipe-card__image img { width: 100%; height: 100%; object-fit: cover; }

.hk-recipe-card__title { margin-bottom: var(--hk-space-2); font-size: var(--hk-text-2xl); }

.hk-recipe-card__desc { color: var(--hk-color-text-muted); margin-bottom: var(--hk-space-3); font-size: var(--hk-text-sm); }

.hk-recipe-card__meta-line { font-size: var(--hk-text-sm); font-weight: 600; margin-bottom: var(--hk-space-4); }

.hk-recipe-card__heading {
	font-size: var(--hk-text-lg);
	margin-bottom: var(--hk-space-4);
	padding-bottom: var(--hk-space-2);
	border-bottom: 2px solid var(--hk-color-accent);
	display: flex;
	align-items: center;
	gap: var(--hk-space-2);
}

.hk-recipe-card__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hk-space-7);
}

@media (min-width: 640px) { .hk-recipe-card__body { grid-template-columns: 1fr 1.4fr; } }

.hk-recipe-card__notes,
.hk-nutrition {
	margin-top: var(--hk-space-6);
	padding-top: var(--hk-space-5);
	border-top: 1px solid var(--hk-color-border);
}

/* =====================================================================
 * Ingredients
 * =================================================================== */
.hk-ingredients__group-label {
	font-weight: 700;
	font-size: var(--hk-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hk-color-accent-dark);
	margin: var(--hk-space-4) 0 var(--hk-space-3);
	padding: var(--hk-space-2) var(--hk-space-3);
	background: var(--hk-color-surface-warm);
	border-radius: var(--hk-radius-sm);
}

.hk-ingredients__group-label:first-child { margin-top: 0; }

.hk-ingredients__list {
	list-style: none;
	margin: 0 0 var(--hk-space-2);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hk-ingredients__list li {
	padding: var(--hk-space-2) var(--hk-space-2) var(--hk-space-2) calc(var(--hk-space-5) + 4px);
	position: relative;
	border-bottom: 1px solid var(--hk-color-border-light);
	font-size: var(--hk-text-sm);
	line-height: var(--hk-line-snug);
}

.hk-ingredients__list li:last-child { border-bottom: none; }

.hk-ingredients__list li::before {
	content: "";
	position: absolute;
	left: var(--hk-space-2);
	top: 50%;
	transform: translateY(-50%);
	width: 8px; height: 8px;
	border-radius: 2px;
	background: var(--hk-color-accent);
	flex-shrink: 0;
}

/* =====================================================================
 * Instructions
 * =================================================================== */
.hk-instructions__list {
	list-style: none;
	counter-reset: hk-step;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hk-space-5);
}

.hk-instructions__step {
	counter-increment: hk-step;
	padding: var(--hk-space-4);
	padding-left: calc(var(--hk-space-7) + var(--hk-space-2));
	position: relative;
	background: var(--hk-color-bg);
	border-radius: var(--hk-radius-md);
	border: 1px solid var(--hk-color-border-light);
}

.hk-instructions__step::before {
	content: counter(hk-step);
	position: absolute;
	left: var(--hk-space-3);
	top: var(--hk-space-4);
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--hk-color-accent);
	color: var(--hk-color-accent-contrast);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-family: var(--hk-font-display);
	font-size: var(--hk-text-base);
	flex-shrink: 0;
	line-height: 1;
}

.hk-instructions__step-title {
	font-weight: 700;
	margin-bottom: var(--hk-space-2);
	font-size: var(--hk-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--hk-color-accent-dark);
}

.hk-instructions__step-text {
	margin-bottom: var(--hk-space-2);
	font-size: var(--hk-text-sm);
	line-height: var(--hk-line-normal);
	color: var(--hk-color-text);
}

.hk-instructions__step-image {
	border-radius: var(--hk-radius-md);
	margin-top: var(--hk-space-3);
	max-width: 100%;
}

/* =====================================================================
 * Nutrition
 * =================================================================== */
.hk-nutrition__disclaimer { font-size: var(--hk-text-xs); color: var(--hk-color-text-muted); margin-bottom: var(--hk-space-3); }

.hk-nutrition__list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
	gap: var(--hk-space-2);
}

.hk-nutrition__list li {
	padding: var(--hk-space-3);
	border-radius: var(--hk-radius-md);
	background: var(--hk-color-surface-alt);
	border: 1px solid var(--hk-color-border-light);
	font-size: var(--hk-text-xs);
	text-align: center;
}

.hk-nutrition__label {
	display: block;
	font-weight: 700;
	font-size: var(--hk-text-sm);
	color: var(--hk-color-text);
	margin-bottom: 2px;
}

/* =====================================================================
 * Recipe Sections (Tips, Storage, FAQ)
 * =================================================================== */
.hk-recipe-section {
	padding-block: var(--hk-space-6);
	border-top: 1px solid var(--hk-color-border);
}

.hk-recipe-section__title {
	margin-bottom: var(--hk-space-4);
}

.hk-recipe-section__content > * + * { margin-top: var(--hk-space-3); }

/* FAQ */
.hk-faq { margin: 0; }

.hk-faq__item {
	border-bottom: 1px solid var(--hk-color-border-light);
}

details.hk-faq__item summary { list-style: none; }
details.hk-faq__item summary::-webkit-details-marker { display: none; }

.hk-faq__question {
	cursor: pointer;
	font-weight: 600;
	font-size: var(--hk-text-base);
	padding: var(--hk-space-4) 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hk-space-4);
	color: var(--hk-color-text);
	user-select: none;
}

.hk-faq__question::after {
	content: '';
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--hk-color-surface-alt);
	border: 1.5px solid var(--hk-color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236b5e52' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform var(--hk-duration) var(--hk-ease), background-color var(--hk-duration) var(--hk-ease);
}

details.hk-faq__item[open] .hk-faq__question::after { transform: rotate(180deg); background-color: var(--hk-color-accent-light); border-color: var(--hk-color-accent); }

.hk-faq__answer {
	padding: 0 0 var(--hk-space-4) 0;
	color: var(--hk-color-text-muted);
	font-size: var(--hk-text-base);
	line-height: var(--hk-line-normal);
}

/* Author box */
.hk-author-box {
	display: flex;
	gap: var(--hk-space-5);
	align-items: flex-start;
	padding: var(--hk-space-6);
	background: var(--hk-color-surface-alt);
	border-radius: var(--hk-radius-xl);
	margin-block: var(--hk-space-7);
	border: 1px solid var(--hk-color-border-light);
}

.hk-author-box__avatar {
	border-radius: 50%;
	flex-shrink: 0;
	width: 72px; height: 72px;
	border: 3px solid var(--hk-color-border);
}

.hk-author-box__body { flex: 1; min-width: 0; }

.hk-author-box__label {
	font-size: var(--hk-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hk-color-accent);
	font-weight: 700;
	margin-bottom: var(--hk-space-1);
}

.hk-author-box__name {
	font-weight: 700;
	margin: 0 0 var(--hk-space-2);
	font-size: var(--hk-text-lg);
}

.hk-author-box__bio { color: var(--hk-color-text-muted); font-size: var(--hk-text-sm); line-height: var(--hk-line-normal); }

/* =====================================================================
 * Collection Item List
 * =================================================================== */
.hk-item-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hk-space-4);
}

.hk-item-list__item {
	display: grid;
	grid-template-columns: auto 88px 1fr;
	gap: var(--hk-space-4);
	align-items: center;
	padding: var(--hk-space-4);
	background: var(--hk-color-surface);
	border: 1px solid var(--hk-color-border-light);
	border-radius: var(--hk-radius-lg);
	transition: box-shadow var(--hk-duration) var(--hk-ease), border-color var(--hk-duration) var(--hk-ease);
}

.hk-item-list__item:hover { box-shadow: var(--hk-shadow-sm); border-color: var(--hk-color-border); }

.hk-item-list__number {
	font-family: var(--hk-font-display);
	font-size: var(--hk-text-2xl);
	font-weight: 700;
	color: var(--hk-color-accent);
	min-width: 2ch;
	text-align: center;
}

.hk-item-list__thumb {
	display: block;
	width: 88px;
	aspect-ratio: 1/1;
	border-radius: var(--hk-radius-md);
	overflow: hidden;
	background: var(--hk-color-surface-alt);
}

.hk-item-list__thumb img { width: 100%; height: 100%; object-fit: cover; }

.hk-item-list__body { min-width: 0; }

.hk-item-list__title { margin-bottom: var(--hk-space-1); font-size: var(--hk-text-base); }
.hk-item-list__title a { text-decoration: none; color: var(--hk-color-text); transition: color var(--hk-duration) var(--hk-ease); }
.hk-item-list__title a:hover { color: var(--hk-color-accent-dark); }
.hk-item-list__note { color: var(--hk-color-text-muted); font-size: var(--hk-text-sm); margin-bottom: var(--hk-space-1); }