/*
Theme Name: Miss K's
Theme URI: https://missks.com.au
Author: Miss K's
Author URI: https://missks.com.au
Description: A soft, coastal-pastel block theme for Miss K's recipe journal. Sea-glass paper, teal and mint with a blossom-pink accent, hand-lettered touches, and recipe-first layouts with Google rich-result support via WP Recipe Maker.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: missks
Tags: blog, food, recipes, block-patterns, full-site-editing, custom-colors, custom-menu, featured-images, threaded-comments
*/

/* =========================================================
   Miss K's — supplemental styles
   (design tokens live in theme.json; this adds texture,
   motion, and component polish theme.json can't express)
   ========================================================= */

:root {
	--mk-shadow-sm: 0 2px 8px rgba(10, 78, 95, 0.07);
	--mk-shadow: 0 14px 34px -18px rgba(10, 78, 95, 0.30);
	--mk-shadow-lift: 0 22px 48px -20px rgba(10, 78, 95, 0.36);
	--mk-radius: 16px;
}

/* Soft paper grain on the page background */
body {
	background-color: var(--wp--preset--color--base);
	background-image: radial-gradient(rgba(15, 126, 154, 0.040) 1px, transparent 1px),
		radial-gradient(rgba(47, 111, 102, 0.030) 1px, transparent 1px);
	background-size: 22px 22px, 28px 28px;
	background-position: 0 0, 11px 14px;
}

/* Selection */
::selection { background: var(--wp--preset--color--tertiary); color: var(--wp--preset--color--contrast); }

/* Headings: tighten and warm */
h1, h2, h3, h4 { text-wrap: balance; }

/* Hand-lettered "eyebrow" label — apply the Caveat font family + this class */
.mk-eyebrow,
.has-script-font-family.mk-eyebrow {
	font-family: var(--wp--preset--font-family--script);
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: 0.01em;
}

/*
 * Eyebrow colour, 2026-08-26. Kristal asked for the handwritten text on the About
 * and Contact pages to be pink. It already was: blossom #FAACBC. The problem is
 * that blossom on the page paper is 1.65:1, so it reads as a pale grey smudge
 * rather than as pink at all. `rose` #C42E56 is 4.99:1, is already in the palette,
 * and reads as an unmistakable deep pink. It also brings in the cherry-red accent
 * the brand brief asks for and nothing was using.
 *
 * :not(.has-text-color) matters. On the dark footer and the teal newsletter panel
 * the eyebrows set their own colour, where blossom IS correct (5.16:1 on the deep
 * teal) and rose would be muddy. Those keep what they have; only the ones with no
 * colour of their own pick this up.
 */
.mk-eyebrow:not(.has-text-color) {
	color: var(--wp--preset--color--rose);
}

/* ---- Site header ---- */
.wp-block-template-part.site-header,
header.wp-block-template-part {
	/* backdrop-filter creates a stacking context, but without a z-index that context
	   sits at the default level — so the hero, which paints later in DOM order, covered
	   the Categories dropdown. Reported 2026-08-24; pre-dates the recolour. */
	position: relative;
	z-index: 100;
	background: rgba(242, 246, 248, 0.88);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* ---- Category tiles ----
   A grid, not columns: tiles stretch to equal height regardless of how many lines the
   label takes ("Mains" is one word where the others wrap, which left it visibly short),
   and new categories wrap onto a second row on their own. */
.mk-cat-tiles {
	/* WP's is-layout-flow puts margin-block-start on every child after the first, which
	   inside a grid pushes tiles 2..n down within their own cells and breaks the row
	   alignment. Zero it here. */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.25rem;
}
.mk-cat-tiles > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.mk-cat-tile {
	display: flex; flex-direction: column; justify-content: space-between;
	min-height: 150px;
	padding: 1.5rem;
	border-radius: var(--mk-radius);
	text-decoration: none;
	box-shadow: var(--mk-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mk-cat-tile:hover { transform: translateY(-3px); box-shadow: var(--mk-shadow); }
.mk-cat-tile__icon { font-size: 2.4rem; line-height: 1; }
.mk-cat-tile__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600; font-size: 1.3rem; line-height: 1.2;
	margin-top: 1rem;
}

/* The submenu's own z-index (core sets 2) only competes inside the header's context,
   so it needs to beat siblings there too. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container { z-index: 101; }

/* Navigation links */
.wp-block-navigation a {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0.01em;
}
.wp-block-navigation .wp-block-navigation-item__content { padding-bottom: 2px; }
.wp-block-navigation a:hover { color: var(--wp--preset--color--primary); }

/* ---- Buttons: gentle motion ---- */
.wp-block-button__link { transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease; box-shadow: var(--mk-shadow-sm); }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--mk-shadow); }
/* primary #0F7E9A on base is 4.32:1 — fine for large text but this is button-sized
   body text, so AA needs 4.5. primary-dark #0B5C70 gives 6.95. See issue #7. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--primary-dark);
	border: 2px solid var(--wp--preset--color--primary-dark); box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary); color: var(--wp--preset--color--surface);
}

/* ---- Images: rounded + soft shadow ---- */
.wp-block-post-featured-image img,
.wp-block-image img { border-radius: var(--mk-radius); }
.wp-block-post-featured-image { box-shadow: var(--mk-shadow); border-radius: var(--mk-radius); overflow: hidden; }

/* ---- Recipe / post cards (query loop) ---- */
.mk-card-grid .wp-block-post {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mk-radius);
	overflow: hidden;
	box-shadow: var(--mk-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	display: flex; flex-direction: column;
}
.mk-card-grid .wp-block-post:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lift); }
.mk-card-grid .wp-block-post-featured-image { border-radius: 0; box-shadow: none; aspect-ratio: 4 / 3; }
.mk-card-grid .wp-block-post-featured-image img { border-radius: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.mk-card-grid .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.mk-card-grid .wp-block-post-title { font-size: 1.3rem; line-height: 1.2; margin: 0; }
.mk-card-grid .wp-block-post-title a { color: var(--wp--preset--color--contrast); }
.mk-card-grid .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.mk-card-grid .wp-block-post > * { padding-left: 1.25rem; padding-right: 1.25rem; }
.mk-card-grid .wp-block-post .wp-block-post-featured-image { padding: 0; }
.mk-card-grid .wp-block-post-excerpt { color: var(--wp--preset--color--muted); font-size: 0.96rem; }
/* Deep mint, not mint: at 0.78rem this is small text, so WCAG 2.2 AA needs 4.5:1.
   Mint #A3EBE0 on base is nowhere near it; deep mint #2F6F66 gives 5.38. See issue #7. */
.mk-card-grid .wp-block-post-terms,
.mk-card-grid .wp-block-post-date { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--secondary-dark); font-weight: 700; }
.mk-card-grid .wp-block-post:last-child > *:last-child { padding-bottom: 1.35rem; }

/* Category pill links */
.mk-pill a, a.mk-pill {
	display: inline-block; background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--primary-dark); border-radius: 999px;
	padding: 0.35em 0.9em; font-weight: 700; font-size: 0.82rem;
	text-decoration: none; transition: background 0.2s ease, color 0.2s ease;
}
.mk-pill a:hover, a.mk-pill:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--surface); }

/* ---- Single post content ---- */
.wp-block-post-content { font-size: 1.075rem; }
.entry-content > p:first-of-type, .wp-block-post-content > p:first-of-type { font-size: 1.18rem; color: var(--wp--preset--color--muted); }

/* ---- WP Recipe Maker card: dress it in the site palette ---- */
.wprm-recipe-container {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mk-radius);
	box-shadow: var(--mk-shadow);
	padding: clamp(1.25rem, 4vw, 2.25rem);
	margin: 2.5rem 0;
}
.wprm-recipe-name,
.wprm-recipe-container h2,
.wprm-recipe-container h3 { font-family: var(--wp--preset--font-family--display) !important; color: var(--wp--preset--color--contrast) !important; }
.wprm-recipe-header,
.wprm-recipe-name { border: none !important; }
.wprm-recipe-ingredients-header,
.wprm-recipe-instructions-header,
.wprm-recipe-notes-header,
.wprm-recipe-equipment-header {
	font-family: var(--wp--preset--font-family--display) !important;
	color: var(--wp--preset--color--primary-dark) !important;
	border-bottom: 2px solid var(--wp--preset--color--tertiary) !important;
	padding-bottom: 0.3rem;
}
.wprm-recipe-times-container { background: var(--wp--preset--color--sand) !important; border-radius: 12px; padding: 0.75rem 1rem; }
.wprm-recipe-time-container .wprm-recipe-time { color: var(--wp--preset--color--primary-dark) !important; }
.wprm-recipe-ingredient-checkbox-container input,
.wprm-recipe-instruction .wprm-recipe-instruction-text { accent-color: var(--wp--preset--color--primary); }
a.wprm-recipe-print, a.wprm-recipe-jump, a.wprm-recipe-jump-video {
	background: var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--surface) !important;
	border-radius: 999px !important; border: none !important; font-family: var(--wp--preset--font-family--body) !important;
}
.wprm-recipe-rating .wprm-rating-star.wprm-rating-star-full svg polygon,
.wprm-recipe-rating-details .wprm-rating-star-full { fill: var(--wp--preset--color--tertiary) !important; }

/* ---- Footer ---- */
.wp-block-template-part.site-footer,
footer.wp-block-template-part {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.site-footer a, footer.wp-block-template-part a { color: var(--wp--preset--color--tertiary); }
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
footer.wp-block-template-part h1, footer.wp-block-template-part h2, footer.wp-block-template-part h3 { color: var(--wp--preset--color--base); }

/* ---- Pagination ---- */
.wp-block-query-pagination a, .wp-block-query-pagination .current { padding: 0.4em 0.85em; border-radius: 999px; }
.wp-block-query-pagination .current { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--surface); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
	.mk-card-grid .wp-block-post:hover { transform: none; }
}