/*!
Theme Name:   Storefront Child
Theme URI:    https://makinsmilescoffee.com/
Description:  Child theme for Storefront. Consolidates the Makin' Smiles Coffee
              design-system CSS (tasting-note tags, roast-level dots, fresh
              badge, offers strip, social row, sub-callout) plus the button/
              typography rules that previously lived in Additional CSS, into
              one properly enqueued stylesheet instead of duplicated inline
              <style> blocks. See child-theme-build-notes.md at the project
              root for the full migration record.
Author:       Makin' Smiles Coffee
Template:     storefront
Version:      1.1.0
Text Domain:  storefront-child

This theme, like WordPress, is licensed under the GPL.
Storefront is (C) Automattic and licensed under the GPL as well.
Use it to make something cool, have fun, and share what you've learned.
*/

/* =========================================================================
 * Brand tokens
 * Single source of truth for the brand-brown used across buttons, links,
 * and (via inline style attributes elsewhere) the homepage hero overlay.
 * Change the color once here rather than hunting every rule that uses it.
 * ========================================================================= */
:root {
	--msc-brand-brown: #3d2115;
	--msc-brand-brown-dark: #2c170f;
}


/* =========================================================================
 * Typography
 * Storefront runs body text at full container width on desktop, which
 * produces an overly long, hard-to-read line. Was in Additional CSS
 * (post 5596); moved here so it actually renders (see build notes, Task 1).
 * ========================================================================= */
.entry-content p {
	max-width: 68ch;
	line-height: 1.7;
}
.site-content h1,
.site-content h2 {
	line-height: 1.2;
}


/* =========================================================================
 * Buttons + links — brand color
 * Covers both Gutenberg block buttons and classic WooCommerce buttons/links,
 * since they're two different styling systems on this theme (Storefront's
 * Customizer "Accent Colour" only reaches the classic ones). Was in
 * Additional CSS (post 5596); moved here so it actually renders.
 * ========================================================================= */
.wp-block-button .wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var(--msc-brand-brown) !important;
	border-color: var(--msc-brand-brown) !important;
	color: #fff !important;
}
.wp-block-button .wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--msc-brand-brown-dark) !important;
	border-color: var(--msc-brand-brown-dark) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--msc-brand-brown) !important;
	border-color: var(--msc-brand-brown) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--msc-brand-brown) !important;
	color: #fff !important;
}
.entry-content a,
.site-content a {
	color: var(--msc-brand-brown);
}


/* =========================================================================
 * Mobile float-photo fix
 * Was in Additional CSS (post 5596) and duplicated across several blog-post
 * revisions; canonical copy consolidated here.
 * ========================================================================= */
@media (max-width: 600px) {
	.mm-float-photo {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 0 1.5em 0 !important;
	}
	.mm-float-photo img {
		width: 100% !important;
		height: auto !important;
	}
}


/* =========================================================================
 * Design system: tasting notes, roast-level dots, fresh badge
 * Previously duplicated as an identical inline <style> block across 18
 * individual product pages (a 19th, Virginia Scenic Railway, carried a
 * trimmed copy without the roast-dot rules). Consolidated here verbatim
 * from the canonical version. Fixes product 5736 (10 LB Business
 * Subscription), which uses the .msc-fresh-badge markup but had no local
 * <style> block at all — it was rendering unstyled until now.
 * ========================================================================= */
.msc-tasting {
	margin: .75em 0 1.1em;
}
.msc-tasting__notes {
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
	margin-bottom: .65em;
}
.msc-note {
	display: inline-block;
	padding: .32em .85em;
	border-radius: 999px;
	font-size: .82em;
	font-weight: 600;
	color: #fff;
	letter-spacing: .02em;
	line-height: 1.3;
}
.msc-note--cacao { background: #6b4327; }
.msc-note--citrus { background: #f2721a; }
.msc-note--sweet { background: #b8842a; }
.msc-note--nutty { background: #a1793f; }
.msc-note--berry { background: #9c3f5c; }
.msc-note--floral { background: #c98fa8; }
.msc-note--spice { background: #b5451f; }

.msc-roast {
	display: flex;
	align-items: center;
	gap: .5em;
	font-size: .85em;
	color: #5c5044;
	flex-wrap: wrap;
}
.msc-roast__label {
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-size: .72em;
	color: #8a8074;
}
.msc-roast__scale {
	display: inline-flex;
	gap: .3em;
}
.msc-roast__dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	display: inline-block;
}
.msc-roast__word {
	font-weight: 600;
}

.msc-fresh-badge {
	display: inline-block;
	background: #3f6b4a;
	color: #fff;
	padding: .5em 1.1em;
	border-radius: 6px;
	font-weight: 600;
	font-size: .9em;
	margin: 0 0 1.1em;
}

/* Compact variant for shop-grid cards (Task 3) — same classes/colors as the
   product-page version above, tighter spacing to fit a narrow grid card. */
.msc-tasting--grid {
	margin: .5em 0 .3em;
	text-align: left;
}
.msc-tasting--grid .msc-note {
	font-size: .74em;
	padding: .26em .7em;
}
.msc-tasting--grid .msc-roast {
	font-size: .78em;
}


/* =========================================================================
 * Subscribe & Save callout
 * Previously duplicated identically across 15 product pages.
 * ========================================================================= */
.msc-sub-callout {
	display: block;
	background: #2f6b66;
	color: #fff;
	padding: .55em 1em;
	border-radius: 6px;
	font-weight: 600;
	font-size: .88em;
	margin: 0 0 .9em;
	text-align: center;
}
.msc-sub-callout a {
	color: #fff;
	text-decoration: underline;
	font-weight: 700;
}


/* =========================================================================
 * Homepage offers strip (Free Shipping $50+ / Subscribe & Save)
 * Sole source: page 19 (homepage). Not duplicated elsewhere, but centralized
 * here so it's on the same footing as everything else in this stylesheet.
 * ========================================================================= */
.msc-offers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	flex-wrap: wrap;
	margin: .8em 0 1.4em;
}
.msc-offer {
	display: inline-flex;
	align-items: center;
	padding: .5em 1.15em;
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	font-size: .95em;
	letter-spacing: .02em;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.msc-offer--ship { background: #c9962b; }
.msc-offer--sub { background: #2f6b66; }
.msc-offer--sub:hover,
.msc-offer--sub:focus { background: #25534f; }
@media (max-width: 480px) {
	.msc-offers { gap: .45em; }
	.msc-offer { font-size: .88em; padding: .45em .95em; }
}


/* =========================================================================
 * Homepage "Follow Along" social row
 * Sole source: page 19 (homepage).
 * ========================================================================= */
.msc-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .85em;
	flex-wrap: wrap;
	margin: 1.6em 0 2.2em;
}
.msc-social__label {
	margin: 0;
	font-size: .92em;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #7a7168;
}
.msc-social__links {
	display: flex;
	gap: .55em;
}
.msc-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	transition: transform .2s ease, box-shadow .2s ease;
}
.msc-social__link svg {
	width: 21px;
	height: 21px;
	fill: currentColor;
	display: block;
}
.msc-social__link:hover,
.msc-social__link:focus {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .22);
}
.msc-social__link--fb { background: #1877f2; }
.msc-social__link--ig {
	background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
@media (max-width: 480px) {
	.msc-social { gap: .6em; margin: 1.3em 0 1.8em; }
	.msc-social__label { width: 100%; text-align: center; }
}