/*
 * Made Hot Micro-Lessons — shop, collection, and lesson product blocks.
 *
 * Design tokens below are pulled from the site's existing checkout/cart/thank-you
 * CSS (custom.css) so these code-built pages match rather than looking generic:
 * accent #B59E8F, ink #101010, soft background #F4F2F0, "Editors Note Regular"
 * for headings. 2026-09-21: the shop hero's new primary CTA (.madehot-hero-book-btn)
 * and the restyled collection cards depart from the original flat/no-radius/
 * invert-on-hover treatment on purpose (pill button, rounded hairline cards,
 * lift-on-hover) — everything else on the page keeps the original flat style.
 */

@font-face {
	font-family: 'Editors Note Regular';
	src: url('../emails/fonts/EditorsNote-Regular.woff2') format('woff2'),
	     url('../emails/fonts/EditorsNote-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--madehot-ink: #101010;
	--madehot-accent: #B59E8F;
	--madehot-bg-soft: #F4F2F0;
	--madehot-border: rgba(16, 16, 16, 0.1);
	--madehot-white: #ffffff;
	--madehot-heading-font: 'Editors Note Regular', 'Playfair Display', serif;
	--madehot-body-font: 'Public Sans', 'Montserrat', sans-serif;
	/* 2026-09-25: shop FAQ band background, requested directly — no longer
	   tied to --testimonial-brown in microlessons-redesign.css (that file
	   isn't loaded on the shop page anyway, per "shop page keeps its
	   original typography" above). */
	--madehot-testimonial-brown: #706259;
	/* 2026-09-25: off-white band behind the intro copy + collection cards,
	   distinct from the pure-white disclaimer/thank-you sections below it. */
	--madehot-shop-section-bg: #EBE8E1;
}

/*
 * These pages are designed for a light background only. Without this, some
 * browsers' auto/forced dark mode (OS or browser-level, not a site feature —
 * this theme has no dark mode of its own) inverts unstyled ancestor
 * backgrounds to near-black while leaving our explicit dark ink text color
 * untouched, producing dark-on-dark, unreadable sections. `color-scheme`
 * tells the browser this content is intentionally light so it leaves it alone.
 */
.madehot-microlessons-shop,
.madehot-collection {
	color-scheme: light;
	background-color: var(--madehot-white);
	font-family: var(--madehot-body-font);
	color: var(--madehot-ink);
}

/*
 * The site header (Header Footer Elementor) is transparent with white text,
 * meant to overlay a dark hero image. The booking-confirmation page has no
 * hero image (plain white background), so the header disappears into it —
 * it forces dark ink instead. Mirrors the same dark-ink override the theme
 * already applies via `body.woocommerce-page` in custom.css, scoped instead
 * to WordPress's own automatic per-template body class
 * (`page-template-{template-file-name}`, added by WordPress core's
 * get_body_class() for any page assigned this template — no theme/plugin
 * filter needed, so this can't affect any other page the way the earlier
 * body_class-filter version of this fix once did).
 *
 * 2026-09-21: template-collection split out of this dark-ink group — its
 * .madehot-hero-banner (added this session) restored the dark hero image
 * this header was originally designed to overlay, so forcing dark ink
 * there now reads as near-invisible text on a dark brown photo instead.
 * It keeps the header's original white-on-transparent behavior below.
 *
 * 2026-09-25: template-microlessons-shop split out the same way — its new
 * .madehot-shop-hero image band means the header is back to overlaying a
 * dark photo here too, so it now joins template-collection in the
 * white-header group below instead of staying in this dark-ink group.
 */
body.page-template-template-booking-confirmation header .hfe-nav-menu-icon svg rect {
	fill: #101010;
}

body.page-template-template-booking-confirmation header a i {
	color: #101010;
}

body.page-template-template-microlessons-shop header ul#menu-1-b1aa330 li a,
body.page-template-template-collection header ul#menu-1-b1aa330 li a,
body.page-template-template-booking-confirmation header ul#menu-1-b1aa330 li a {
	color: #ffffff !important;
}

body.page-template-template-booking-confirmation ul#menu-1-4a8fb88 li a.hfe-menu-item {
	color: #101010 !important;
}

body.page-template-template-booking-confirmation ul#menu-1-4a8fb88 li.current-menu-item a.hfe-menu-item:after {
	background-color: #101010 !important;
}

/* "THE INSIDE" is a parent/dropdown nav item — Elementor's own generated
   header CSS (wp-content/uploads/elementor/css/post-9.css) gives every
   .menu-item.parent an unconditional white pointer line via :before/:after
   (not gated by :hover — it's just always there unless overridden by the
   more specific .parent.current-menu-item rule), separate from the text
   color rule above. Missed on the first pass; same black-header pages
   need this too or the line stays invisible-white. Two variants covered:
   the default "underline" pointer style (background-color) and the
   "framed" style (border-color) — whichever this menu is actually using. */
body.page-template-template-booking-confirmation ul#menu-1-4a8fb88 .menu-item.parent a.hfe-menu-item:before,
body.page-template-template-booking-confirmation ul#menu-1-4a8fb88 .menu-item.parent a.hfe-menu-item:after {
	background-color: #101010 !important;
	border-color: #101010 !important;
}

body.page-template-template-collection .menu-icon .hfe-active-menu div.hfe-nav-menu-icon svg rect,
body.page-template-template-booking-confirmation .menu-icon .hfe-active-menu div.hfe-nav-menu-icon svg rect {
	fill: #ffffff !important;
}

/* template-collection and template-microlessons-shop keep the header white
   over their dark hero banner — same menu-icon/`a i` fill as the default
   transparent header, and the #menu-1-4a8fb88 instance (the one actually
   rendering in the screenshot that prompted this) forced white instead of
   dark ink. */
body.page-template-template-collection header .hfe-nav-menu-icon svg rect,
body.page-template-template-microlessons-shop header .hfe-nav-menu-icon svg rect {
	fill: #ffffff;
}

body.page-template-template-collection header a i,
body.page-template-template-microlessons-shop header a i {
	color: #ffffff;
}

body.page-template-template-collection ul#menu-1-4a8fb88 li a.hfe-menu-item,
body.page-template-template-microlessons-shop ul#menu-1-4a8fb88 li a.hfe-menu-item {
	color: #ffffff !important;
}

body.page-template-template-collection ul#menu-1-4a8fb88 li.current-menu-item a.hfe-menu-item:after,
body.page-template-template-microlessons-shop ul#menu-1-4a8fb88 li.current-menu-item a.hfe-menu-item:after {
	background-color: #ffffff !important;
}

body.page-template-template-microlessons-shop ul#menu-1-4a8fb88 .menu-item.parent a.hfe-menu-item:before,
body.page-template-template-microlessons-shop ul#menu-1-4a8fb88 .menu-item.parent a.hfe-menu-item:after {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
}

body.page-template-template-microlessons-shop .menu-icon .hfe-active-menu div.hfe-nav-menu-icon svg rect {
	fill: #ffffff !important;
}

.madehot-microlessons-shop h1,
.madehot-microlessons-shop h2,
.madehot-collection h1,
.madehot-collection h2 {
	font-family: var(--madehot-heading-font);
	font-weight: 400;
	color: var(--madehot-ink);
}

.madehot-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Eyebrow / meta line — small uppercase labels used above/below headings. */
.madehot-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	font-size: 0.8rem;
	color: var(--madehot-accent);
	margin: 0 0 0.75rem;
}

.madehot-meta-line {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 500;
	font-size: 0.85rem;
	color: var(--madehot-ink);
	opacity: 0.7;
}

/*
 * 2026-09-25: shop hero image band — eyebrow/tagline/subhead/CTA overlaid
 * directly on the photo (unlike the collection pages' split banner+content
 * design), per approved shop redesign. Image is client-replaceable, see
 * Madehot_Microlessons::shop_hero_image_url(). The gradient overlay (not
 * just a flat dark tint) keeps text readable across whatever photo gets
 * dropped in without needing per-image tuning.
 */
.madehot-shop-hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #2a2420;
	background-image: linear-gradient(rgba(20, 16, 14, 0.55), rgba(20, 16, 14, 0.55)), var(--madehot-hero-image);
	background-size: cover;
	background-position: center;
	padding: 200px 20px;
	text-align: center;
}

.madehot-shop-hero-inner {
	max-width: 640px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.madehot-shop-hero .madehot-eyebrow {
	color: var(--madehot-white);
	opacity: 0.85;
	font-family: var(--madehot-body-font);
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 2.71px;
	text-align: center;
	text-transform: uppercase;
}

.madehot-shop-hero h1 {
	color: var(--madehot-white);
	font-size: 2.75rem;
	line-height: 1.25;
	margin: 0 0 1.25rem;
	letter-spacing: 0px;
	text-align: center;
}

.madehot-shop-hero-subhead {
	color: #E8E2DC;
	opacity: 0.92;
	margin: 0 0 2rem;
	font-family: var(--madehot-body-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 100%;
	letter-spacing: 0px;
	text-align: center;
}

.madehot-shop-hero .madehot-hero-book-btn {
	margin: 0 auto;
}

@media (max-width: 600px) {
	.madehot-shop-hero {
		min-height: 420px;
		/* 200px top/bottom is a desktop-scale amount of breathing room —
		   left uncapped here it would push most of the hero off small
		   screens, so this scales it back down. */
		padding: 80px 20px;
	}

	.madehot-shop-hero h1 {
		font-size: 2rem;
	}
}

/* Shop page intro — 2026-09-25: section itself is full-bleed
   (--madehot-shop-section-bg spans full width, continuing under the cards
   section below with no visible seam); .madehot-microlessons-intro-inner
   holds the actual 720px centered text column. */
.madehot-microlessons-intro {
	background-color: var(--madehot-shop-section-bg);
	color: var(--madehot-ink);
	text-align: center;
	padding: 60px 20px;
}

.madehot-microlessons-intro-inner {
	max-width: 720px;
	margin: 0 auto;
}

.madehot-microlessons-intro-copy p {
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 1rem;
}

/* Hero booking row — pricing meta line + primary "Book a session" CTA,
   combined onto one line per the 2026-09-21 hero redesign (previously the
   hero ended on the meta line alone with no way to book). */
.madehot-hero-booking-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

.madehot-hero-booking-row .madehot-meta-line {
	margin: 0;
}

/* 2026-09-25: reverted to --madehot-accent's raw #B59E8F per request — this
   is ~2.5:1 against white text, under WCAG AA's 4.5:1 minimum for text this
   size. #8A6F5C (same warm clay/taupe family, darkened for ~4.7:1) was the
   AA-passing alternative in place here before; flagging the regression
   rather than silently keeping the old color. */
.madehot-hero-book-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #B59E8F;
	color: var(--madehot-white);
	font-family: var(--madehot-body-font);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	padding: 10px 22px;
	border: 1px solid transparent;
	border-radius: 1px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Ghost/outline hover — text is --madehot-ink, not white: the button sits
   on .madehot-microlessons-intro's white background, so white text on a
   transparent fill would be invisible (0:1 contrast) the moment the solid
   fill drops away on hover. Ink on transparent is ~19:1, well past AA. */
.madehot-hero-book-btn:hover,
.madehot-hero-book-btn:focus-visible {
	border: 1px solid var(--madehot-accent);
	background: transparent;
	color: var(--madehot-ink);
}

/* Short policy line under the CTA — replaces the full Booking window /
   Rescheduling / Late cancellation / No-show block that used to sit
   directly under the hero; the full wording now lives in the Quick
   Questions FAQ (see shop_faq()) and the linked Terms page. */
.madehot-hero-policy-line {
	font-size: 0.8rem;
	color: var(--madehot-ink);
	opacity: 0.7;
	margin: 0.75rem 0 0;
}

.madehot-hero-policy-line a {
	color: var(--madehot-accent);
	font-weight: 600;
	text-decoration: underline;
}

/* Collection entry cards on the shop page — the section itself is
   full-bleed with the same --madehot-shop-section-bg as
   .madehot-microlessons-intro above it, so the two read as one continuous
   band up to the brown FAQ section; .madehot-collections-grid holds the
   actual 1140px centered grid. */
.madehot-collections {
	background-color: var(--madehot-shop-section-bg);
	padding-bottom: 60px;
}

/* 2026-09-25: capped card width (was minmax(280px, 1fr), stretching each
   card to ~558px wide at desktop widths — much wider/shorter than the
   approved reference, which shows tall, narrow, portrait-ish cards).
   justify-content centers the row once the tracks stop growing at 380px. */
.madehot-collections-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
	justify-content: center;
	gap: 1.5rem;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Quick FAQ — shop page, after both collections. 2026-09-25: now a
   full-bleed brown band (was a plain white, narrow column) — the section
   itself spans full width with the brown background, and
   .madehot-shop-faq-inner holds the actual 720px centered column. */
.madehot-shop-faq {
	background-color: var(--madehot-testimonial-brown);
	padding: 4rem 20px;
}

.madehot-shop-faq-inner {
	max-width: 720px;
	margin: 0 auto;
}

.madehot-shop-faq .madehot-eyebrow {
	color: var(--madehot-white);
	margin-bottom: 1.5rem;
	font-family: var(--madehot-heading-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 15px;
	letter-spacing: 3px;
	text-align: center;
	text-transform: uppercase;
}

.madehot-faq-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	padding: 1.25rem 0;
}

.madehot-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1rem;
	color: var(--madehot-white);
	list-style: none;
}

.madehot-faq-item summary::-webkit-details-marker {
	display: none;
}

.madehot-faq-item summary::after {
	content: '+';
	float: right;
	font-weight: 400;
	color: var(--madehot-white);
}

.madehot-faq-item[open] summary::after {
	content: '\2212';
}

.madehot-faq-item p {
	font-size: 0.95rem;
	line-height: 1.7;
	margin: 1rem 0 0;
	color: var(--madehot-white);
	opacity: 0.85;
}

.madehot-shop-disclaimer {
	max-width: 720px;
	margin: 0 auto;
	padding: 2rem 20px 3rem;
	text-align: center;
	border-top: 1px solid var(--madehot-border);
}

.madehot-shop-disclaimer h2 {
	font-size: 1.25rem;
	margin: 0 0 1rem;
}

.madehot-shop-disclaimer p {
	font-size: 0.85rem;
	line-height: 1.6;
	opacity: 0.75;
	margin: 0 0 0.75rem;
}

.madehot-terms-link a {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--madehot-accent);
	text-decoration: underline;
}

/*
 * 2026-09-25: cards are now photographic (one image per collection,
 * client-replaceable — see collection_card_image_url()), text bottom-aligned
 * over a dark gradient, matching the approved shop redesign. Previously a
 * plain soft-beige card with left-aligned dark text and no image.
 */
.madehot-collection-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* 2026-09-25: aspect-ratio (was a flat min-height: 420px) — that made
	   cards land wider-than-tall as soon as the grid stretched them past
	   ~420px wide. Tying height to width instead keeps the tall,
	   portrait-ish proportions from the approved reference at any card
	   width the grid produces. */
	aspect-ratio: 5 / 6;
	padding: 2.5rem 2rem;
	background-color: #1a1a1a;
	background-image: linear-gradient(to top, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.15) 55%, rgba(10, 10, 10, 0.05) 100%), var(--madehot-card-image);
	background-size: cover;
	background-position: center;
	border-radius: 12px;
	text-align: left;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	gap: 10px;
}

.madehot-collection-card .madehot-eyebrow {
	color: var(--madehot-white);
	opacity: 0.85;
}

.madehot-collection-card h2 {
	margin: 0 0 0.5rem;
	font-size: 1.75rem;
	color: var(--madehot-white);
}

.madehot-collection-card-description {
	color: var(--madehot-white);
	opacity: 0.9;
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0 0 1.25rem;
}

.madehot-collection-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--madehot-accent);
}

/* Hover reads as "clickable" via a lift + shadow instead of the previous
   border/background-color inversion, which doesn't read on a photo. */
.madehot-collection-card:hover,
.madehot-collection-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(16, 16, 16, 0.28);
}

/*
 * .madehot-collection-header (the old plain-header, pre-hero layout) is
 * dead — removed from the template on 2026-09-18 in favor of
 * .madehot-hero. Its rules lived here and are removed too; nothing else
 * uses that class.
 */

.madehot-collection-intro-copy p {
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 1rem;
}

/*
 * Lesson product block styling (grid/cards/CTA/etc.) used to live here too,
 * but those classes (.madehot-lesson-grid, .madehot-lesson-block, and
 * everything inside a card) are exclusive to the collection page template —
 * confirmed by grepping template-microlessons-shop.php, which never uses
 * them. Moved entirely into css/microlessons-redesign.css (collection-page-
 * only) on 2026-09-18 so the collection page has one single source of truth
 * for its own card styling instead of two stylesheets each partially
 * defining/overriding the same selectors. This file keeps only what the
 * shop page actually shares with the collection page below.
 */

/*
 * [madehot_policy_notice] shortcode output — rendered in every lesson product
 * block, right above its CTA, per "Policy visibility — must not be missable."
 * Wording must stay byte-identical everywhere it appears (see the plugin).
 */
.madehot-policy-notice {
	color: var(--madehot-ink);
	font-size: 0.75rem;
	line-height: 1.5;
	opacity: 0.75;
	border-top: 1px solid var(--madehot-border);
	padding-top: 0.75rem;
}

.madehot-policy-notice p {
	margin: 0 0 0.4rem;
}

/* "Who you're talking to" bio section */
.madehot-collection-bio {
	background-color: var(--madehot-white);
	color: var(--madehot-ink);
	max-width: 720px;
	margin: 0 auto;
	padding: 80px 20px 100px;
	text-align: center;
}

.madehot-collection-bio h2 {
	font-size: 2rem;
	margin: 0 0 1.5rem;
}

.madehot-collection-bio p {
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 1rem;
}

/* Editor-only TODO notes — never shown to real visitors, see current_user_can() guards in the templates. */
.madehot-admin-note {
	font-size: 0.8rem;
	font-family: var(--madehot-body-font);
	color: #7a1616;
	background: #fbeaea;
	border: 1px dashed rgba(179, 45, 46, 0.4);
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
}

@media (max-width: 600px) {
	/* Belt-and-suspenders — auto-fit/minmax(280px, 380px) already collapses
	   to one column around this width, this just guarantees the stack.
	   .madehot-collection-card's aspect-ratio handles height on its own,
	   no override needed here any more. */
	.madehot-collections-grid {
		grid-template-columns: 1fr;
	}
}