/* ==========================================================================
   Legal pages - /privacy-policy/, /return-policy/, /refund-policy/,
                 /shipping-policy/, /warranty-policy/, /term-conditions/
   ==========================================================================

   Loaded only on those pages (see mm-legal.php). Presentation only - not a
   word of the policies is added, removed or reworded.

   THE PROBLEM THESE PAGES HAD was not decoration, it was MEASURE. The content
   is a single full-width text-editor widget, so a line of body copy ran the
   entire width of the browser - about 200 characters at 1440px, against the
   45-75 that is comfortable to read - and every section heading was a bolded
   16px paragraph identical in size to the text around it. A reader could not
   find where one section ended and the next began. Hence: a fixed measure, a
   real typographic scale, and vertical rhythm that groups a heading with the
   text it belongs to.

   TYPOGRAPHY: no font-family is set anywhere in this file, on purpose. Astra
   sets Lato for body and h1-h6 site-wide, so inheriting guarantees Lato by
   construction and it cannot drift. Same rule as collection.css and faq.css.

   FONT WEIGHTS: this site loads Lato in 100, 400 and 700 ONLY (Astra's
   enqueue: family=Lato:400,100,700). Ask for 300 and the browser snaps to 100
   - Lato Thin - and a display headline renders as a ghost. 400 or 700, nothing
   else.

   COLOUR: the site palette is monochrome - Astra's globals are #000 headings,
   rgba(0,0,0,.6) body, #FFF ground. Nothing here leaves it. The cream accent
   used by the FAQ's support panel and the Our Gallery collection pages appears
   once, on the contact line, so these pages read as part of the same site.
   ========================================================================== */

.mm-legal {
	--mm-legal-ink: #000000;
	--mm-legal-body: rgba( 0, 0, 0, 0.66 );
	--mm-legal-muted: rgba( 0, 0, 0, 0.45 );
	--mm-legal-rule: #e2ded6;        /* the product accordion's hairline */
	--mm-legal-cream: #f5f1e8;

	/*
	 * MEASURED, not guessed. 720px at 17px came out at 84 characters a line
	 * (probes/legal-page.js counts the real line boxes); 680 at 18px is 75,
	 * which is the top of the comfortable 45-75 band. Narrower than the FAQ's
	 * 860 because that page is a list of short rows and this one is continuous
	 * prose that a reader has to track line to line.
	 */
	max-width: 680px;
	margin: 0 auto;
	padding: 72px 24px 104px;
	box-sizing: border-box;
	color: var( --mm-legal-body );
}

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

.mm-legal-head {
	margin-bottom: 44px;
	padding-bottom: 30px;
	border-bottom: 1px solid var( --mm-legal-rule );
}

.mm-legal-eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.17em;   /* matches the collection pages' eyebrow */
	text-transform: uppercase;
	color: var( --mm-legal-muted );
}

.mm-legal-title {
	margin: 0;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.012em;
	color: var( --mm-legal-ink );
}

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */

.mm-legal-body {
	font-size: 18px;
	line-height: 1.8;
}

.mm-legal-body p {
	margin: 0 0 20px;
}

/*
 * SECTION HEADINGS. The margin above is deliberately much larger than the one
 * below: a heading belongs to the text that FOLLOWS it, and equal margins make
 * it float between two blocks belonging to neither. The hairline gives the eye
 * something to scan for on a page of eleven sections.
 */
.mm-legal-h {
	margin: 54px 0 18px;
	padding-top: 26px;
	border-top: 1px solid var( --mm-legal-rule );
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var( --mm-legal-ink );
}

/* The first heading follows the header's own rule - a second one directly
   under it reads as a mistake. */
.mm-legal-body > .mm-legal-h:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.mm-legal-body > *:last-child {
	margin-bottom: 0;
}

/*
 * PARAGRAPHS THAT ARE REALLY LISTS. The source writes several of these as one
 * paragraph with <br> between the items ("Process and manage your orders<br>
 * Provide customer support<br>..."), and others as a label line followed by
 * its explanation. Both shapes are unreadable at prose line-height, because
 * nothing separates one line from the next.
 *
 * They are not rewritten into <ul> - the brief was that the content does not
 * change, and :has() lets the spacing be fixed without touching a single
 * character. A browser without :has() support renders exactly what it renders
 * today, so this can only improve the page.
 */
.mm-legal-body p:has( br ) {
	line-height: 2.05;
}

.mm-legal-body ul,
.mm-legal-body ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

.mm-legal-body li {
	margin-bottom: 10px;
}

.mm-legal-body li::marker {
	color: var( --mm-legal-muted );
}

/* strong inside body copy is emphasis; the section headings that USED to be
   <strong> are now <h2> and no longer come through here. */
.mm-legal-body strong,
.mm-legal-body b {
	font-weight: 700;
	color: var( --mm-legal-ink );
}

/*
 * Links.
 *
 * `!important` on the colour, which is not the house style and is the right
 * call here. Elementor emits a PER-ELEMENT link colour for whichever widget
 * has one set in the editor:
 *
 *     .elementor-2168 .elementor-element.elementor-element-5aa42a5 a
 *         { color: var(--e-global-color-primary) }
 *
 * at (0,3,1). That outranks anything this file can write with its own two
 * classes, and the only selectors that would beat it on specificity are built
 * out of `.elementor-element-<id>` - generated per site, so a rule keyed on it
 * matches nothing on dev (CLAUDE.md, Point F). Chaining Elementor's generic
 * wrapper classes instead gets to (0,3,1) exactly, which is a TIE decided by
 * enqueue order - the outcome this project has repeatedly been bitten by.
 * `!important` is the only deterministic answer that is not a hardcoded ID.
 *
 * Worth overriding on its merits, not just for consistency: only the Privacy
 * Policy widget carries that setting, so its two email links rendered in
 * Elementor's default primary, #6EC1E4, at about 2:1 against white - well
 * under the 4.5:1 WCAG asks for - while the same link on the other five pages
 * was already black. It reads as an accident, because it is one.
 *
 * The states are pinned as well as the base. Astra colours a:visited from its
 * global palette, which is what turned the Our Gallery CONTINUE button
 * black-on-black the moment a visitor had been to the target.
 */
.mm-legal-body a,
.mm-legal-body a:link,
.mm-legal-body a:visited,
.mm-legal-body a:hover,
.mm-legal-body a:focus {
	color: var( --mm-legal-ink ) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.mm-legal-body a:hover,
.mm-legal-body a:focus {
	text-decoration-thickness: 2px;
}

.mm-legal-body a:focus-visible {
	outline: 2px solid var( --mm-legal-ink );
	outline-offset: 3px;
}

/*
 * THE CLOSING CONTACT BLOCK.
 *
 * A long legal document ends with the one thing a reader is usually looking
 * for - how to get in touch - and it was indistinguishable from the four
 * paragraphs of prose above it. The tint makes it findable at a glance.
 *
 * Keyed on a class the transform puts on the page's closing contact SECTION,
 * not on `p:last-child:has(a[href^="mailto"])`, which was the first version
 * and fired on exactly one of the six pages: only Privacy Policy actually ends
 * on an address. See mm_legal_assemble() for why the heading is the reliable
 * signal and the address is not.
 */
.mm-legal-contact {
	margin-top: 4px;
	padding: 26px 28px;
	background: var( --mm-legal-cream );
	border-radius: 12px;
}

.mm-legal-contact > *:last-child {
	margin-bottom: 0;
}

/*
 * The address sits on the same line as the words that introduce it.
 *
 * The source writes "...please contact us at:<br />info@mmspecs.com", so the
 * address dropped to a line of its own inside the panel and read as an orphan.
 * The <br> is CONTENT, so it is not removed - it is simply not rendered as a
 * break here, which is a presentation decision and leaves the stored copy
 * untouched.
 *
 * `br:has( + a )` hits only a break that is immediately followed by the
 * address. A contact block that is genuinely several lines keeps every other
 * break it has, which a blanket `br { display: none }` would have flattened.
 *
 * The gap is a MARGIN, not a generated `content: " "` - generated content
 * would put a real character into the rendered text, and this whole file is
 * built on not doing that.
 */
.mm-legal-contact br:has( + a[href^="mailto" ] ) {
	display: none;
}

.mm-legal-contact br + a[href^="mailto" ] {
	margin-left: 0.3em;
}

/* The heading that introduces the panel sits directly on top of it, so the
   rule it normally carries would draw a line across nothing. */
.mm-legal-h:has( + .mm-legal-contact ) {
	margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   Breakpoints - 1024 / 767, the two the rest of this site uses
   -------------------------------------------------------------------------- */

@media ( max-width: 1024px ) {
	.mm-legal {
		padding: 56px 24px 84px;
	}

	.mm-legal-title {
		font-size: 36px;
	}
}

@media ( max-width: 767px ) {
	.mm-legal {
		padding: 40px 20px 64px;
	}

	.mm-legal-head {
		margin-bottom: 32px;
		padding-bottom: 22px;
	}

	.mm-legal-title {
		font-size: 29px;
	}

	/*
	 * Scaled down explicitly per breakpoint rather than inherited from
	 * desktop - a 17px measure on a 320px screen is about 34 characters a
	 * line, which wraps mid-phrase constantly.
	 */
	.mm-legal-body {
		font-size: 15px;
		line-height: 1.75;
	}

	.mm-legal-h {
		margin: 38px 0 14px;
		padding-top: 20px;
		font-size: 19px;
	}

	.mm-legal-body p:has( br ) {
		line-height: 2;
	}

	.mm-legal-contact {
		padding: 20px 20px;
	}
}