/*
Theme Name: Manjimup Farmers Market Collective
Theme URI: https://scottaussie.com/
Author: SATM
Author URI: https://scottaussie.com/
Description: Child theme of Frost for the Manjimup Farmers Market Collective — a hyper-local, grower-direct community farmers market in the Southern Forests WA. Brand colours, typography and produce-icon system per the MFMC brand guidelines v1.1.
Template: frost
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: mfmc
*/

/* -----------------------------------------------------------------------------
   Most styling lives in theme.json (brand palette, fonts, scale). This file
   holds only the small amount of custom CSS that theme.json cannot express.
   Brand rule: 60 neutrals / 30 Karri Green / 10 produce accents.
-------------------------------------------------------------------------------*/

/* Produce-accent "why come along" cards: thin top rule in the accent colour. */
.mfmc-accent-card {
	border-top: 4px solid currentColor;
	padding-top: var(--wp--preset--spacing--small, 30px);
}

/* Produce icons / logos placed via the [mfmc_icon] shortcode (rendered as
   <img> so each SVG's styles stay isolated and colours render correctly). */
.mfmc-icon-img {
	display: inline-block;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}
.mfmc-logo-img {
	display: inline-block;
	height: auto;
	max-width: 100%;
}

/* Inline produce icons sit on the text baseline, sized to the heading. */
.mfmc-icon {
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	vertical-align: middle;
}
.mfmc-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Stallholder directory grid. */
.mfmc-stallholder-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 28px;
}
.mfmc-stallholder-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base, #ffffff);
	border-radius: 10px;
	overflow: hidden;
	height: 100%;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #2b2b28);
	box-shadow: 0 1px 4px rgba(43, 43, 40, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mfmc-stallholder-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(43, 43, 40, 0.14);
}
.mfmc-stallholder-card__media img,
.mfmc-stallholder-card__media .mfmc-img-ph {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	min-height: 0;
	border: 0;
	border-radius: 0;
}
.mfmc-stallholder-card__body { padding: 20px 22px 24px; }
.mfmc-stallholder-card__name {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--primary, #2e4a3b);
	font-size: 1.25rem;
}
.mfmc-stallholder-card__sells { margin: 0; }

/* Single stallholder layout: photo beside the details. */
.mfmc-stallholder-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 40px;
	align-items: start;
}
@media (max-width: 781px) {
	.mfmc-stallholder-single { grid-template-columns: 1fr; gap: 24px; }
}
.mfmc-stallholder-single__photo img,
.mfmc-stallholder-single__photo .mfmc-img-ph {
	width: 100%;
	border-radius: 10px;
	display: block;
}
.mfmc-detail { margin: 0 0 10px; font-size: 1.05rem; }
.mfmc-detail--season {
	background: rgba(205, 161, 60, 0.15);
	border-left: 4px solid var(--wp--preset--color--potato, #cda13c);
	padding: 10px 14px;
	border-radius: 4px;
}

/* Hero: keep the full-colour logo legible on Karri Green. */
.mfmc-hero img.mfmc-hero-logo {
	max-width: 420px;
	height: auto;
}

/* Site logo (header). The brand SVG has a viewBox but no width/height, so it
   collapses to nothing inside the flex header without an explicit CSS size. */
.wp-block-site-logo a,
.wp-block-site-logo img.custom-logo,
img.custom-logo {
	width: 240px;
	height: auto;
	max-width: 100%;
	display: block;
}
@media (max-width: 600px) {
	.wp-block-site-logo img.custom-logo,
	img.custom-logo { width: 180px; }
}

/* Logo lockups (inline via [mfmc_icon ... folder="logo"]). */
.mfmc-logo {
	display: inline-block;
	max-width: 100%;
}
.mfmc-logo svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Produce-character divider row. */
.mfmc-divider {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 14px;
	flex-wrap: wrap;
	margin: 8px 0;
}
.mfmc-divider .mfmc-icon-img { margin: 0; }

/* Produce character sitting inside a Market Notes category badge. */
.mfmc-badge { display: inline-flex; align-items: center; gap: 6px; }
.mfmc-badge .mfmc-icon-img { width: 18px; height: auto; }

/* Image placeholder — used everywhere a real photo will go at handoff.
   Brand rule: no real images sourced at draft stage. */
.mfmc-img-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 260px;
	padding: 30px;
	background: repeating-linear-gradient(
		45deg,
		rgba(46, 74, 59, 0.06),
		rgba(46, 74, 59, 0.06) 12px,
		rgba(46, 74, 59, 0.12) 12px,
		rgba(46, 74, 59, 0.12) 24px
	);
	border: 2px dashed var(--wp--preset--color--primary, #2e4a3b);
	border-radius: 8px;
	color: var(--wp--preset--color--primary, #2e4a3b);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.95rem;
	font-weight: 500;
}
.mfmc-img-ph.is-tall { min-height: 420px; }

/* MailerLite / Gravity Forms embed placeholder. */
.mfmc-embed-ph {
	border: 2px dashed var(--wp--preset--color--secondary, #6f4a2f);
	border-radius: 8px;
	padding: 30px;
	background: rgba(111, 74, 47, 0.05);
	color: var(--wp--preset--color--secondary, #6f4a2f);
	text-align: center;
}

/* ---- Market Notes (posts) ---- */
.mfmc-notes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}
.mfmc-note-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base, #ffffff);
	border-radius: 10px;
	overflow: hidden;
	height: 100%;
	box-shadow: 0 1px 4px rgba(43, 43, 40, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mfmc-note-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(43, 43, 40, 0.14);
}
.mfmc-note-card__media { display: block; }
.mfmc-note-card__media img,
.mfmc-note-card__media .mfmc-img-ph {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	min-height: 0;
	border: 0;
	border-radius: 0;
}
.mfmc-note-card__body { padding: 18px 22px 24px; }
.mfmc-note-card__title { margin: 12px 0 6px; font-size: 1.2rem; }
.mfmc-note-card__title a { text-decoration: none; color: var(--wp--preset--color--primary, #2e4a3b); }
.mfmc-note-card__meta { margin: 0 0 8px; font-size: 0.85rem; color: var(--wp--preset--color--secondary, #6f4a2f); }
.mfmc-note-card__excerpt { margin: 0 0 14px; }
.mfmc-note-card__more { font-weight: 600; text-decoration: none; }

/* Native Query Loop variant of the notes grid (home page).
   The Query Loop renders <ul.wp-block-post-template.mfmc-notes-grid> with each
   post in an <li.wp-block-post>; display:contents lets the inner
   <article.mfmc-note-card> sit directly in the grid so all the card styling
   above applies unchanged. */
.mfmc-notes-grid.wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.mfmc-notes-grid > li.wp-block-post { display: contents; }

/* Category badge (also used on single posts). */
.mfmc-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--wp--preset--color--primary, #2e4a3b);
	padding: 4px 10px;
	border-radius: 999px;
	text-decoration: none;
}
.mfmc-badge--market-news    { background: var(--wp--preset--color--primary, #2e4a3b); }
.mfmc-badge--grower-stories { background: var(--wp--preset--color--cherry, #8f2c3c); }
.mfmc-badge--in-season      { background: var(--wp--preset--color--avocado, #6d9f43); }
.mfmc-badge--recipes        { background: var(--wp--preset--color--strawberry, #d0495c); }

/* Single Market Note layout. */
.mfmc-note-single__header { margin-bottom: 24px; }
.mfmc-note-single__meta { margin: 8px 0 0; font-size: 0.9rem; color: var(--wp--preset--color--secondary, #6f4a2f); }
.mfmc-note-single .mfmc-img-ph { width: 100%; border-radius: 10px; margin-bottom: 24px; }

/* Make SVGs in the Media Library render at a sensible size (SATM standard). */
.wp-admin .media-icon img[src$=".svg"],
.wp-admin img[src$=".svg"].attachment-thumbnail {
	width: 100% !important;
	height: auto !important;
}

/* Footer "Website by" credit — keep the link legible on the dark green footer. */
.mfmc-footer-credit,
.mfmc-footer-credit a { color: var(--wp--preset--color--base, #ffffff); }
.mfmc-footer-credit a { text-decoration: underline; }
.mfmc-footer-credit a:hover { text-decoration: none; }

/* Footer brand logo — centred above the "An initiative of…" tagline. */
.mfmc-footer-logo { display: block; margin: 0 auto 10px; }

/* Footer "Next market" block — each line has to fit the narrow footer column on
   one line instead of wrapping (Sam feedback, Jun 2026).

   Sized by measurement, not by eye. The column is 239px at the 1200px wide
   layout. At 16px the longest line ("Sunday 20 September 2026") is 217px and
   the note ("Fortnightly, Sunday mornings") is 198px at 14px — so both clear
   the column with ~22px to spare. The date line reaches the edge at about
   17.5px, which is the ceiling if this is ever bumped again.

   The previous 14px/13px fixed the wrapping but overshot: it left 41px of the
   column unused and read as too small (Andy, Sep 2026). Wrapping is left
   enabled deliberately — if the copy ever grows, a wrapped line degrades more
   gracefully than text overflowing into the next column. */
.mfmc-footer-market { font-size: 1rem; line-height: 1.55; margin-top: 0; }
.mfmc-footer-market .mfmc-footer-note { display: inline-block; font-size: 0.875rem; opacity: 0.9; }

/* --------------------------------------------------------------------------
   Fluent Forms — brand palette
   --------------------------------------------------------------------------
   Fluent Forms exposes four custom properties for theming. Setting these is
   the supported way in; chasing its internal selectors means re-fixing the
   form on every plugin update. Without this the form ships a stock blue
   button and a red asterisk onto the MFMC palette.
   -------------------------------------------------------------------------- */

.fluentform {
	--fluentform-primary: #2E4A3B;   /* Karri Green — buttons, focus rings */
	--fluentform-secondary: #FFFFFF; /* text on primary */
	--fluentform-danger: #8F2C3C;    /* Cherry — validation errors, not stock red */
	--fluentform-border-radius: 8px;
}

/* Section breaks carry the form's structure across 11 sections, so give them
   the same weight as a heading rather than the plugin's faint default rule. */
.fluentform .ff-el-group.ff_section_break_wrapper {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 2px solid var(--wp--preset--color--neutral, #F3ECDD);
}

.fluentform .ff-el-group.ff_section_break_wrapper h3 {
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--primary, #2E4A3B);
}

/* The required asterisk defaults to a colour that clashes with the palette. */
.fluentform .ff-el-is-required.asterisk-right .ff-el-input--label label:after,
.fluentform .ff-el-is-required.asterisk-left .ff-el-input--label label:before {
	color: var(--fluentform-danger);
}

/* --------------------------------------------------------------------------
   Featured images — consistent shape whatever gets uploaded
   --------------------------------------------------------------------------
   The page rhythm shouldn't depend on whether whoever adds a post happened to
   have a landscape photo. Two of the five Southern Forests recipe images are
   portrait (one is 3274x4092), and dropped in raw they push the body copy a
   screen and a half down the page.

   The templates set aspectRatio + scale on their own post-featured-image
   blocks, which WordPress renders as an inline style and which therefore wins
   over anything here. This is the fallback for a featured image added later
   with no ratio set — a new template, or a Query Loop the client builds in the
   Site Editor. Belt and braces, so the default is "looks right" rather than
   "looks right if someone remembered".

   16/9 matches the Market Note cards; stallholder cards stay 4/3, set on the
   block in single-stallholder.html.

   Deliberately scoped to FEATURED images only. Images placed inside post
   content keep their natural shape — cropping those would be us overriding an
   editorial choice, not fixing a layout. */
/* object-position is slightly above centre: cropping a tall photo to 16/9 from
   dead centre tends to cut the top off a plated dish or a face. CSS cannot
   select on an image's own aspect ratio, so this applies to all of them — it is
   a safe default for landscape shots and a noticeably better one for portrait. */
.wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center 40%;
	display: block;
}

/* --------------------------------------------------------------------------
   MailerLite footer signup
   --------------------------------------------------------------------------
   MailerLite injects its own inline styles, so the builder settings are only
   a fallback; this locks the form to the footer it sits in. Scoped to the
   wrapper in parts/footer.html so it cannot leak into any other embed. The
   !important flags are deliberate — they are the only thing that beats
   MailerLite's inline declarations. */

.mfmc-footer-signup .ml-form-embedContainer,
.mfmc-footer-signup .ml-form-embedWrapper,
.mfmc-footer-signup .ml-form-embedBody {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	font-family: var(--wp--preset--font-family--primary, "Work Sans", system-ui, sans-serif) !important;
}

.mfmc-footer-signup .ml-form-embedWrapper {
	border: 0 !important;
}

.mfmc-footer-signup input[type="email"],
.mfmc-footer-signup input[type="text"] {
	background: var(--wp--preset--color--base, #ffffff) !important;
	color: var(--wp--preset--color--contrast, #2b2b28) !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	padding: 10px 14px !important;
	height: auto !important;
}

.mfmc-footer-signup button[type="submit"],
.mfmc-footer-signup .ml-form-embedSubmit button {
	background: var(--wp--preset--color--neutral, #f3ecdd) !important;
	color: var(--wp--preset--color--primary, #2e4a3b) !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	padding: 10px 18px !important;
	height: auto !important;
	cursor: pointer;
}

.mfmc-footer-signup button[type="submit"]:hover,
.mfmc-footer-signup .ml-form-embedSubmit button:hover {
	background: var(--wp--preset--color--base, #ffffff) !important;
}

.mfmc-footer-signup .ml-form-successBody,
.mfmc-footer-signup .ml-form-successContent,
.mfmc-footer-signup .ml-form-embedContent p,
.mfmc-footer-signup .ml-form-successContent p {
	color: var(--wp--preset--color--base, #ffffff) !important;
	font-family: inherit !important;
}