/* ==========================================================================
   Tasty Kitchen — design system for tastyhomecooks.com
   Child theme of Kadence. Anchored to the brand coral #E86156, sampled from
   the logo file.

   Contrast is the reason the palette has two corals. #E86156 is only 3.35:1 on
   white, which fails WCAG AA for body-size text, so it is used for large
   display type, rules and accents only. Anything at reading size — links,
   buttons, small labels — takes #BA4E45 at 4.93:1.

   Every featured image on this site is 2:3 portrait (896x1344), so cards and
   tiles are built portrait rather than cropped to landscape.
   ========================================================================== */

:root {
	--thc-coral:      #E86156;
	--thc-coral-deep: #BA4E45;
	--thc-coral-dark: #9E423A;
	--thc-ink:        #1A1A1A;
	--thc-body:       #3D3D3D;
	--thc-muted:      #6B6B6B;
	--thc-tint:       #FDEFEE;
	--thc-cream:      #F7F4F0;
	--thc-rule:       #E5E0D8;
	--thc-white:      #FFFFFF;

	--thc-radius:     14px;
	--thc-radius-sm:  8px;
	--thc-shadow:     0 1px 2px rgba(26,26,26,.05), 0 8px 24px -12px rgba(26,26,26,.18);

	/* A 4px-based spacing scale, so vertical rhythm stays predictable. */
	--thc-s1: .5rem;
	--thc-s2: 1rem;
	--thc-s3: 1.5rem;
	--thc-s4: 2rem;
	--thc-s5: 3rem;
	--thc-s6: 4.5rem;
}

/* --------------------------------------------------------------- baseline -- */

body { -webkit-font-smoothing: antialiased; }

a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Underline links in prose only.

   Wrapped in :where() so the whole selector contributes ZERO specificity. Every
   component below — chips, tiles, card titles, buttons — then wins on its own single
   class without a specificity race, and prose links still get the underline because
   nothing else targets them. Written the ordinary way this rule was 0,3,2 and quietly
   re-underlined half the homepage. */
:where(.entry-content) :where(p, li, td, dd, blockquote) > :where(a:not(.thc-btn):not(.wp-block-button__link)) {
	color: var(--thc-coral-deep);
	text-decoration: underline;
}
:where(.entry-content) :where(p, li, td, dd, blockquote) > :where(a:not(.thc-btn):not(.wp-block-button__link)):hover {
	color: var(--thc-coral-dark);
}

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

.site-header-row-container-inner { border-bottom: 1px solid var(--thc-rule); }

.site-branding img { height: auto; }

.header-navigation .header-menu-container > ul > li > a {
	letter-spacing: .01em;
}
/* A coral underline that grows from the centre — enough signal to read as
   interactive without adding a second colour to the header. */
.header-navigation ul li.menu-item > a::after {
	content: "";
	display: block;
	height: 2px;
	width: 0;
	margin-top: 3px;
	background: var(--thc-coral);
	transition: width .18s ease;
}
.header-navigation ul li.menu-item:hover > a::after,
.header-navigation ul li.current-menu-item > a::after { width: 100%; }
.header-navigation ul ul li.menu-item > a::after { display: none; }

/* ------------------------------------------------------- homepage: intro -- */

.thc-intro {
	background: var(--thc-cream);
	padding: var(--thc-s6) var(--thc-s2) var(--thc-s5);
	text-align: center;
	border-bottom: 1px solid var(--thc-rule);
}
.thc-intro .thc-intro__title {
	max-width: 18ch;
	margin: 0 auto var(--thc-s2);
	text-wrap: balance;
}
.thc-intro .thc-intro__lede {
	max-width: 56ch;
	margin: 0 auto var(--thc-s4);
	color: var(--thc-muted);
	font-size: 1.0625rem;
}

.thc-search { max-width: 34rem; margin: 0 auto var(--thc-s3); }
.thc-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--thc-rule);
	background: var(--thc-white);
	border-radius: 999px;
	padding: 4px 4px 4px 18px;
	box-shadow: var(--thc-shadow);
}
.thc-search .wp-block-search__input {
	border: 0;
	background: transparent;
	font-size: 1rem;
	padding: .55rem 0;
}
.thc-search .wp-block-search__input:focus { outline: none; }
.thc-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--thc-coral);
	box-shadow: 0 0 0 3px rgba(232,97,86,.18);
}
.thc-search .wp-block-search__button {
	background: var(--thc-coral-deep);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .6rem 1.4rem;
	font-weight: 600;
	cursor: pointer;
}
.thc-search .wp-block-search__button:hover { background: var(--thc-coral-dark); }

.thc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}
.thc-intro .thc-chip,
.thc-chip {
	display: inline-block;
	padding: .4rem .9rem;
	border: 1px solid var(--thc-rule);
	border-radius: 999px;
	background: var(--thc-white);
	color: var(--thc-body);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s, color .15s;
}
.thc-chip:hover {
	border-color: var(--thc-coral);
	color: var(--thc-coral-deep);
}

/* ----------------------------------------------------- homepage: sections --
   The double-class selectors below are deliberate. Kadence's content.min.css sets
   `.single-content h1, .single-content h2, ...  { margin: 1.5em 0 0.5em }` at
   specificity 0,1,1, which beats a single class — the homepage H1 sat hard against
   the left edge until these were scoped to their section. Do not flatten them. */

.thc-section { padding: var(--thc-s6) var(--thc-s2); }
.thc-section--tint { background: var(--thc-tint); }

.thc-section .thc-section__title, .thc-intro .thc-section__title {
	text-align: center;
	margin: 0 0 var(--thc-s2);
	text-wrap: balance;
}
/* A short coral rule under each section heading — the one repeated brand
   gesture, cheap enough to use on every section without shouting. */
.thc-section .thc-section__title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: var(--thc-s2) auto 0;
	background: var(--thc-coral);
	border-radius: 2px;
}
.thc-section .thc-section__sub {
	text-align: center;
	max-width: 52ch;
	margin: 0 auto var(--thc-s4);
	color: var(--thc-muted);
}
.thc-section__title + .wp-block-query { margin-top: var(--thc-s4); }

.thc-more { text-align: center; margin-top: var(--thc-s4); }
.thc-more a {
	display: inline-block;
	padding: .7rem 1.6rem;
	border: 1.5px solid var(--thc-coral-deep);
	border-radius: 999px;
	color: var(--thc-coral-deep);
	font-weight: 700;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.thc-more a:hover { background: var(--thc-coral-deep); color: #fff; }

/* Belt and braces for the components that DO sit inside a paragraph in some
   templates, so the prose rule above would otherwise catch them. */
.entry-content p > a.thc-btn,
.entry-content p.thc-more > a { text-decoration: none; }

/* -------------------------------------------------------- category tiles -- */

.thc-tiles {
	list-style: none;
	margin: var(--thc-s4) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--thc-s3);
}
.thc-tile {
	position: relative;
	display: block;
	border-radius: var(--thc-radius);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	text-decoration: none;
	box-shadow: var(--thc-shadow);
}
.thc-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.thc-tile:hover img { transform: scale(1.05); }
/* The scrim is what makes white text legible over an unknown photograph —
   without it the label depends on whatever the image happens to look like. */
.thc-tile__label {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.5rem .9rem .9rem;
	background: linear-gradient(to top, rgba(20,14,13,.85), rgba(20,14,13,0));
	color: #fff;
	font-weight: 800;
	font-size: 1.0625rem;
	line-height: 1.25;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.thc-tile__label small {
	font-weight: 500;
	font-size: .75rem;
	opacity: .85;
}

/* ------------------------------------------------------------ post cards -- */

.thc-grid .wp-block-post-template {
	gap: var(--thc-s3) var(--thc-s3);
}
.thc-grid .wp-block-post-template > li {
	background: var(--thc-white);
	border: 1px solid var(--thc-rule);
	border-radius: var(--thc-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}
.thc-grid .wp-block-post-template > li:hover {
	box-shadow: var(--thc-shadow);
	transform: translateY(-2px);
}
.thc-grid .wp-block-post-featured-image {
	margin: 0;
	border-radius: 0;
}
.thc-grid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.thc-grid .thc-card__cat {
	margin: var(--thc-s2) var(--thc-s2) 0;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.thc-grid .thc-card__cat a {
	color: var(--thc-coral-deep);
	text-decoration: none;
}
.thc-grid .thc-card__cat a:hover { text-decoration: underline; }
.thc-grid .wp-block-post-title {
	margin: .35rem var(--thc-s2) var(--thc-s3);
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 700;
}
.thc-grid .wp-block-post-title a {
	color: var(--thc-ink);
	text-decoration: none;
}
.thc-grid .wp-block-post-title a:hover { color: var(--thc-coral-deep); }

/* -------------------------------------------------------------- about band -- */

.thc-about {
	background: var(--thc-coral-deep);
	color: #fff;
	padding: var(--thc-s6) var(--thc-s2);
}
.thc-about__inner { max-width: 62ch; margin: 0 auto; text-align: center; }
.thc-about__photo {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto var(--thc-s3);
	display: block;
	border: 4px solid rgba(255,255,255,.35);
}
.thc-about .thc-about__eyebrow {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .8;
	margin: 0 0 var(--thc-s1);
}
.thc-about .thc-about__inner h2 { color: #fff; margin: 0 0 var(--thc-s2); }
.thc-about .thc-about__inner h2::after { display: none; }
.thc-about p { color: rgba(255,255,255,.92); }
.thc-btn {
	display: inline-block;
	margin-top: var(--thc-s2);
	padding: .75rem 1.75rem;
	background: #fff;
	color: var(--thc-coral-deep);
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}
.thc-btn:hover { background: var(--thc-cream); color: var(--thc-coral-dark); }

/* ------------------------------------------------------------ single post -- */

/* The title band carries the breadcrumb Kadence supplies and Foodica never had. */
.entry-hero .entry-header { padding-block: var(--thc-s5); }
.entry-hero .kadence-breadcrumbs {
	font-size: .8125rem;
	color: var(--thc-muted);
	margin-bottom: var(--thc-s2);
}
.entry-hero .kadence-breadcrumbs a { color: var(--thc-muted); }
.entry-hero .kadence-breadcrumbs a:hover { color: var(--thc-coral-deep); }
.entry-hero .entry-taxonomies a {
	color: var(--thc-coral-deep);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .75rem;
}

.single .entry-content { font-size: 1.0625rem; }
.single .entry-content > h2 { margin-top: var(--thc-s5); }
.single .entry-content > h3 { margin-top: var(--thc-s4); }
.single .entry-content img { border-radius: var(--thc-radius-sm); }

.single .entry-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: .9375rem;
}
.single .entry-content th {
	background: var(--thc-cream);
	text-align: left;
	font-weight: 700;
}
.single .entry-content th,
.single .entry-content td {
	border: 1px solid var(--thc-rule);
	padding: .6rem .75rem;
}

/* The recipe card is the thing readers scroll for — give it a real edge. */
.wprm-recipe-container {
	border: 1px solid var(--thc-rule) !important;
	border-top: 4px solid var(--thc-coral) !important;
	border-radius: var(--thc-radius) !important;
	overflow: hidden;
}

.primary-sidebar .widget { margin-bottom: var(--thc-s4); }
.primary-sidebar .widget-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--thc-coral);
}


/* ----------------------------------------------------------- page templates --
   Pages run at Kadence's 'narrow' measure (820px). Anything wider and a paragraph
   of body copy runs past a comfortable line length — About was setting prose at
   1152px before this. */

.page .entry-content > * + * { margin-top: var(--thc-s3); }
.page .entry-content h2 {
	margin-top: var(--thc-s5);
	margin-bottom: var(--thc-s2);
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--thc-tint);
}
.page .entry-content h2:first-child { margin-top: 0; }
.page .entry-content h3 { margin-top: var(--thc-s4); margin-bottom: var(--thc-s1); }

.page .entry-content > .wp-block-image { margin-block: var(--thc-s4); }
.page .entry-content > .wp-block-image img { border-radius: var(--thc-radius); }

/* The lede that replaced Contact's sentence-as-H1, and the same treatment anywhere
   a page opens with a standfirst. */
.thc-page__lede {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--thc-muted);
}

/* A page's opening image is a portrait, not a banner. Rounding it and centring it stops a
   768px square from reading as a mis-sized hero, and the cap keeps it from filling the
   whole first screen on a laptop. */
.page .entry-content > .wp-block-image:first-of-type img,
.page .entry-content > .wp-block-image:nth-of-type(1) img {
	border-radius: var(--thc-radius);
}
.page .entry-content > .wp-block-image:first-of-type {
	max-width: 30rem;
	margin-inline: auto;
}

.page .entry-content ul:not(.wp-block-list--plain) li { margin-bottom: .4rem; }

/* Contact Form 7 — it ships almost unstyled, so it inherits nothing useful. */
.wpcf7 { margin-top: var(--thc-s4); }
.wpcf7 label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--thc-ink); }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: .7rem .9rem;
	border: 1px solid var(--thc-rule);
	border-radius: var(--thc-radius-sm);
	background: var(--thc-white);
	font: inherit;
	font-size: 1rem;
}
.wpcf7 input:focus, .wpcf7 textarea:focus {
	outline: none;
	border-color: var(--thc-coral);
	box-shadow: 0 0 0 3px rgba(232,97,86,.18);
}
.wpcf7 textarea { min-height: 170px; resize: vertical; }
.wpcf7 p { margin-bottom: var(--thc-s3); }
.wpcf7 input[type="submit"] {
	background: var(--thc-coral-deep);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .8rem 2rem;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background .15s;
}
.wpcf7 input[type="submit"]:hover { background: var(--thc-coral-dark); }
.wpcf7-not-valid-tip { color: var(--thc-coral-dark); font-size: .875rem; }
.wpcf7 .wpcf7-response-output {
	border-radius: var(--thc-radius-sm);
	border-width: 1px;
	padding: .8rem 1rem;
	font-size: .9375rem;
}

/* The sidebar portrait, so it reads as a person rather than a floating square. */
.thc-bio__photo img {
	border-radius: 50%;
	border: 3px solid var(--thc-tint);
}


/* ------------------------------------------------- single post: the tail --
   Related posts, the author box and the post navigation are the whole reason a
   search visitor who landed on one recipe sees a second one, so they get the same
   card treatment as the homepage rather than the theme's defaults. */

/* Kadence sets `.has-sidebar .entry-related { background: transparent }` at 0,2,0, so a
   bare `.entry-related` here loses on every post that has a sidebar — which is all of
   them. Both selectors are listed rather than reaching for !important. */
.entry-related,
.has-sidebar .entry-related {
	background: var(--thc-cream);
	padding-block: var(--thc-s5);
	margin-top: var(--thc-s5);
}
.entry-related-title {
	text-align: center;
	margin-bottom: var(--thc-s4);
}
.entry-related-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: var(--thc-s2) auto 0;
	background: var(--thc-coral);
	border-radius: 2px;
}
/* The static grid from the child theme's entry_related.php. Same card language as the
   homepage rows so a reader recognises them as the same kind of thing. */
.thc-related__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--thc-s3);
}
.thc-related__item { margin: 0; }
.thc-related__link {
	display: block;
	background: var(--thc-white);
	border: 1px solid var(--thc-rule);
	border-radius: var(--thc-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--thc-ink);
	height: 100%;
	transition: transform .18s ease, box-shadow .18s ease;
}
.thc-related__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--thc-shadow);
}
.thc-related__link img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.thc-related__cat {
	display: block;
	margin: .8rem .9rem .3rem;
	color: var(--thc-coral-deep);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.thc-related__title {
	display: block;
	margin: 0 .9rem 1rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}
.thc-related__link:hover .thc-related__title { color: var(--thc-coral-deep); }

@media (max-width: 900px) {
	.thc-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.thc-related__grid { gap: var(--thc-s2); }
	.thc-related__title { font-size: .9375rem; margin-inline: .7rem; }
	.thc-related__cat { margin-inline: .7rem; font-size: .625rem; }
	.thc-related__link:hover { transform: none; }
}

.entry-author-profile {
	background: var(--thc-tint);
	border: 1px solid var(--thc-rule);
	border-radius: var(--thc-radius);
	padding: var(--thc-s4);
	margin-top: var(--thc-s5);
}
.entry-author-profile .entry-author-avatar img { border-radius: 50%; }
.entry-author-profile .author-title { margin-bottom: .35rem; }
.entry-author-profile .author-title a { color: var(--thc-ink); text-decoration: none; }

.post-navigation {
	border-top: 1px solid var(--thc-rule);
	border-bottom: 1px solid var(--thc-rule);
	margin-top: var(--thc-s5);
	padding-block: var(--thc-s3);
}
.post-navigation a { color: var(--thc-ink); text-decoration: none; font-weight: 600; }
.post-navigation a:hover { color: var(--thc-coral-deep); }

#comments { margin-top: var(--thc-s5); }
#comments .comment-reply-title, #comments .comments-title { margin-bottom: var(--thc-s3); }
#comments .submit {
	background: var(--thc-coral-deep);
	border: 0;
	border-radius: 999px;
	padding: .75rem 1.9rem;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}
#comments .submit:hover { background: var(--thc-coral-dark); }

/* --------------------------------------------------------- 404 and search -- */

.error404 .entry-content-wrap > p,
.error404 .entry-content-wrap > .search-form,
.error404 .entry-content-wrap > form { max-width: 30rem; margin-inline: auto; }
.error404 .page-title, .error404 .entry-content-wrap > p { text-align: center; }

/* The routes out, printed by tasty_dead_end_routes(). Shared by the 404 and the
   no-results search, so it is styled once and keyed off its own class rather than off
   either page's body class. */
.thc-deadend {
	margin-top: var(--thc-s5);
	padding-top: var(--thc-s4);
	border-top: 1px solid var(--thc-rule);
}
.thc-deadend__title {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: center;
	margin: 0 0 var(--thc-s3);
}
.thc-deadend__title + .thc-chips { margin-bottom: var(--thc-s5); }

.thc-deadend__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--thc-s3);
}
.thc-deadend__list > li { margin: 0; }
.thc-deadend__list a {
	display: block;
	text-decoration: none;
	color: var(--thc-ink);
}
.thc-deadend__list img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--thc-radius);
	margin-bottom: .6rem;
}
.thc-deadend__list span {
	display: block;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.35;
}
.thc-deadend__list a:hover span { color: var(--thc-coral-deep); }
/* Four across is only readable while a title fits in two lines. Below ~900px they wrap
   to four, so drop to two columns before the tablet breakpoint rather than at it. */
@media (max-width: 900px) {
	.thc-deadend__list { grid-template-columns: 1fr 1fr; }
}

.search-results .entry-title mark,
.entry-content mark { background: var(--thc-tint); padding: 0 .15em; }

/* ---------------------------------------------------------------- footer -- */

.site-footer { border-top: 0; }
.site-footer .widget-title { color: #fff; font-size: 1rem; }
.site-footer, .site-footer p, .site-footer li { color: #C9C4BC; }
.site-footer a { color: #E8E4DE; text-decoration: none; }
.site-footer a:hover { color: var(--thc-coral); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
	.thc-tiles { grid-template-columns: repeat(3, 1fr); }
	.thc-section { padding: var(--thc-s5) var(--thc-s2); }
}

@media (max-width: 767px) {
	.thc-intro { padding: var(--thc-s5) var(--thc-s2) var(--thc-s4); }
	.thc-tiles { grid-template-columns: repeat(2, 1fr); gap: var(--thc-s2); }
	.thc-tile__label { font-size: .9375rem; padding: 2rem .7rem .7rem; }
	.thc-section { padding: var(--thc-s5) var(--thc-s2); }
	.thc-section__title + .wp-block-query { margin-top: var(--thc-s3); }
	.thc-grid .wp-block-post-template { gap: var(--thc-s2); }
	/* Two across on a phone, not one: portrait cards are tall, and a single
	   column pushes the second section far below the fold. */
	.thc-grid .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr 1fr; }
	.thc-grid .wp-block-post-title { font-size: .9375rem; margin-inline: .7rem; }
	.thc-grid .thc-card__cat { margin-inline: .7rem; font-size: .625rem; }
	.thc-about { padding: var(--thc-s5) var(--thc-s2); }
}

@media (max-width: 400px) {
	.thc-chips { gap: .35rem; }
	.thc-deadend__list { grid-template-columns: 1fr 1fr; }
	.thc-chip { padding: .35rem .7rem; font-size: .8125rem; }
}

@media (prefers-reduced-motion: reduce) {
	.thc-tile img,
	.thc-grid .wp-block-post-template > li,
	.header-navigation ul li.menu-item > a::after { transition: none; }
	.thc-tile:hover img { transform: none; }
	.thc-grid .wp-block-post-template > li:hover { transform: none; }
}