/* ==========================================================================
   MediMix — pages.css (pages, posts, blog, search, 404)
   ========================================================================== */

.mx-page { padding-bottom: var(--mx-s10); }
.mx-prose { max-width: 820px; font-size: var(--mx-fs-md); line-height: 1.9; }
.mx-page--wide .mx-prose { max-width: none; }
.mx-prose > * + * { margin-top: var(--mx-s4); }
.mx-prose h2 { margin-top: var(--mx-s8); }
.mx-prose h3 { margin-top: var(--mx-s6); }
.mx-prose a { color: var(--mx-gold-ink); font-weight: 500; }
.mx-prose ul, .mx-prose ol { padding-inline-start: 1.4em; }
.mx-prose li + li { margin-top: 6px; }
.mx-prose img { border-radius: var(--mx-r-md); height: auto; }
.mx-prose blockquote { margin-inline: 0; padding: var(--mx-s4) var(--mx-s5); border-inline-start: 3px solid var(--mx-gold); background: var(--mx-surface); border-radius: var(--mx-r-md); }
.mx-prose table { border: 1px solid var(--mx-line); }
.mx-prose th, .mx-prose td { padding: 10px 12px; border-bottom: 1px solid var(--mx-line-2); text-align: start; }
.mx-prose .alignleft { float: left; margin: 0 var(--mx-s4) var(--mx-s4) 0; }
.mx-prose .alignright { float: right; margin: 0 0 var(--mx-s4) var(--mx-s4); }
.mx-prose .aligncenter { margin-inline: auto; }
.mx-prose .wp-caption-text, .mx-prose figcaption { font-size: var(--mx-fs-sm); color: var(--mx-muted); text-align: center; }

/* Blog */
.mx-posts-wrap { padding-bottom: var(--mx-s10); }
.mx-posts { display: grid; gap: var(--mx-s5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .mx-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mx-posts { grid-template-columns: repeat(3, 1fr); } }
.mx-post-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--mx-line-2); border-radius: var(--mx-r-lg); overflow: hidden; background: #fff; }
.mx-post-card:hover { box-shadow: var(--mx-shadow-md); }
.mx-post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mx-post-card__body { padding: var(--mx-s4); }
.mx-post-card__meta { margin: 0 0 4px; font-size: var(--mx-fs-xs); color: var(--mx-muted); }
.mx-post-card__title { font-size: var(--mx-fs-h4); }
.mx-post-card__title a { text-decoration: none; }
.mx-post-card__title a::after { content: ""; position: absolute; inset: 0; }
.mx-post-card__excerpt { margin: 0; font-size: var(--mx-fs-sm); color: var(--mx-ink-2); }
.mx-article__meta { color: var(--mx-muted); font-size: var(--mx-fs-sm); margin: 0; }
.mx-article__media { margin: 0 0 var(--mx-s6); }
.mx-article__media img { width: 100%; border-radius: var(--mx-r-lg); }
.post-navigation { margin: var(--mx-s10) 0; }
.post-navigation .nav-links { display: grid; gap: var(--mx-s3); }
@media (min-width: 600px) { .post-navigation .nav-links { grid-template-columns: 1fr 1fr; } }
.post-navigation a { display: block; padding: var(--mx-s4); border: 1px solid var(--mx-line); border-radius: var(--mx-r-md); text-decoration: none; }
.mx-postnav__label { display: block; font-size: var(--mx-fs-xs); color: var(--mx-muted); }
.mx-comments { margin: var(--mx-s10) 0; }
.mx-comments__list { padding: 0; list-style: none; }

/* 404 */
.mx-404 { max-width: 720px; padding-block: var(--mx-s12); text-align: center; }
.mx-404__code { margin: 0; font-size: clamp(4rem, 3rem + 5vw, 7rem); font-weight: 700; line-height: 1; color: var(--mx-gold); }
.mx-404__title { margin-top: var(--mx-s3); }
.mx-404__text { color: var(--mx-ink-2); }
.mx-404__search { max-width: 520px; margin: var(--mx-s6) auto; }
.mx-404 .mx-chips { margin-bottom: var(--mx-s6); }

/* ==========================================================================
   Info pages: about, contact, how to order, policies (page-*.php)
   ========================================================================== */
.mx-eyebrow { margin: 0 0 var(--mx-s2); font-size: var(--mx-fs-sm); font-weight: 700; color: var(--mx-gold-ink); }

/* Shared: closing band */
.mx-info-cta {
	display: grid; gap: var(--mx-s5); align-items: center; margin-top: var(--mx-s12); padding: var(--mx-s6);
	border-radius: var(--mx-r-lg); background: var(--mx-ink); color: #fff;
}
@media (min-width: 900px) { .mx-info-cta { grid-template-columns: minmax(0, 1fr) auto; gap: var(--mx-s8); padding: var(--mx-s8) var(--mx-s10); } }
.mx-info-cta__title { margin: 0 0 var(--mx-s2); color: #fff; font-size: var(--mx-fs-h2); }
.mx-info-cta p { margin: 0; color: rgb(255 255 255 / 80%); }
.mx-info-cta__actions { display: flex; flex-wrap: wrap; gap: var(--mx-s3); }
@media (max-width: 599px) { .mx-info-cta__actions .mx-btn { flex: 1 1 100%; } }
.mx-btn--on-dark { --_fg: #fff; --_bd: rgb(255 255 255 / 40%); }
.mx-btn--on-dark:hover { --_bg: rgb(255 255 255 / 10%); --_fg: #fff; --_bd: #fff; }

/* Shared: icon discs */
.mx-value__icon, .mx-mv-card__icon, .mx-social-card__icon, .mx-channel__icon, .mx-help-link__icon, .mx-policy-card__icon, .mx-legal-help__icon {
	display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--mx-gold-soft); color: var(--mx-gold-ink);
}

/* ---------- About ---------- */
.mx-about-hero { padding-block: var(--mx-s6) var(--mx-s8); background: var(--mx-surface); border-bottom: 1px solid var(--mx-line-2); }
@media (min-width: 900px) { .mx-about-hero { padding-block: var(--mx-s8) var(--mx-s12); } }
.mx-about-hero__row { display: grid; gap: var(--mx-s6); margin-top: var(--mx-s6); align-items: center; }
@media (min-width: 900px) { .mx-about-hero__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--mx-s12); } }
.mx-about-hero__title { margin: 0; font-size: var(--mx-fs-h1); }
.mx-about-hero__lead { margin: var(--mx-s4) 0 0; max-width: 64ch; font-size: var(--mx-fs-lg); line-height: 1.95; color: var(--mx-ink-2); }
.mx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mx-s3); margin: 0; padding: 0; list-style: none; }
.mx-stats li { display: flex; flex-direction: column; gap: 2px; padding: var(--mx-s4) var(--mx-s5); border: 1px solid var(--mx-line-2); border-radius: var(--mx-r-lg); background: #fff; }
.mx-stats strong { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); line-height: 1.25; font-variant-numeric: tabular-nums; }
.mx-stats span { font-size: var(--mx-fs-sm); color: var(--mx-muted); }

.mx-about-story { display: grid; gap: var(--mx-s8); padding-block: var(--mx-s10); }
@media (min-width: 900px) { .mx-about-story { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--mx-s12); align-items: start; } }
.mx-about-story__text { max-width: none; }
.mx-about-values__title { margin: 0 0 var(--mx-s4); font-size: var(--mx-fs-h3); }
.mx-values { display: grid; gap: var(--mx-s3); margin: 0; padding: 0; list-style: none; }
.mx-value { display: flex; align-items: flex-start; gap: var(--mx-s3); padding: var(--mx-s4); border: 1px solid var(--mx-line-2); border-radius: var(--mx-r-lg); }
.mx-value__icon { width: 44px; height: 44px; }
.mx-value__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.6; }
.mx-value__text span { font-size: var(--mx-fs-sm); color: var(--mx-ink-2); }

.mx-about-mv { display: grid; gap: var(--mx-s4); }
@media (min-width: 900px) { .mx-about-mv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mx-s6); } }
.mx-mv-card { padding: var(--mx-s6); border-radius: var(--mx-r-lg); background: var(--mx-surface); }
@media (min-width: 900px) { .mx-mv-card { padding: var(--mx-s8); } }
.mx-mv-card__icon { width: 48px; height: 48px; margin-bottom: var(--mx-s4); background: #fff; }
.mx-mv-card__title { margin: 0 0 var(--mx-s3); font-size: var(--mx-fs-h3); }
.mx-mv-card .mx-prose { color: var(--mx-ink-2); }

.mx-about-social { padding-top: var(--mx-s10); }
.mx-about-social .mx-section__title, .mx-contact-help .mx-section__title { margin-bottom: var(--mx-s5); }
.mx-social-cards { display: grid; gap: var(--mx-s3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 480px) { .mx-social-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .mx-social-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mx-s4); } }
@media (min-width: 1200px) { .mx-social-cards { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
/* Each card: icon + name/handle, one line of text, and the action pinned to the bottom so all cards line up. */
.mx-social-card {
	--net: var(--mx-ink);
	display: flex; flex-direction: column; gap: var(--mx-s3); height: 100%; padding: var(--mx-s5);
	border: 1px solid var(--mx-line); border-radius: var(--mx-r-lg); background: #fff; text-decoration: none; color: var(--mx-ink);
	transition: border-color .15s, box-shadow .15s, transform .15s var(--mx-ease);
}
.mx-social-card--facebook { --net: #1877f2; }
.mx-social-card--messenger { --net: #0a7cff; }
.mx-social-card--instagram { --net: #d62976; }
.mx-social-card--youtube { --net: #e62117; }
.mx-social-card--tiktok { --net: #111; }
.mx-social-card--linkedin { --net: #0a66c2; }
.mx-social-card:hover { border-color: var(--net); box-shadow: var(--mx-shadow-md); transform: translateY(-2px); color: var(--mx-ink); }
.mx-social-card__head { display: flex; align-items: center; gap: var(--mx-s3); }
.mx-social-card__icon { width: 48px; height: 48px; background: var(--net); color: #fff; }
.mx-social-card--instagram .mx-social-card__icon { background: linear-gradient(45deg, #feda75, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5); }
.mx-social-card__id { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.mx-social-card__id strong { font-size: var(--mx-fs-md); }
.mx-social-card__id bdi { font-size: var(--mx-fs-xs); color: var(--mx-muted); text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-social-card__desc { font-size: var(--mx-fs-sm); line-height: 1.7; color: var(--mx-ink-2); }
.mx-social-card__cta {
	display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: auto; padding: 6px 14px;
	border-radius: var(--mx-r-pill); background: var(--mx-surface); font-size: var(--mx-fs-sm); font-weight: 700; color: var(--mx-ink);
	transition: background .15s, color .15s;
}
.mx-social-card:hover .mx-social-card__cta { background: var(--net); color: #fff; }
@media (prefers-reduced-motion: reduce) { .mx-social-card { transition: none; } .mx-social-card:hover { transform: none; } }

/* ---------- Contact ---------- */
.mx-channels { display: grid; gap: var(--mx-s3); margin: var(--mx-s2) 0 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .mx-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mx-channels { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--mx-s4); } }
.mx-channel {
	display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon label" "icon value" "icon hint";
	column-gap: var(--mx-s4); row-gap: 2px; height: 100%; padding: var(--mx-s5);
	border: 1px solid var(--mx-line); border-radius: var(--mx-r-lg); background: #fff; text-decoration: none; color: var(--mx-ink);
	transition: border-color .15s, box-shadow .15s, transform .15s var(--mx-ease);
}
.mx-channel:hover { border-color: var(--mx-ink); box-shadow: var(--mx-shadow-md); transform: translateY(-2px); color: var(--mx-ink); }
.mx-channel__icon { grid-area: icon; width: 52px; height: 52px; }
.mx-channel--whatsapp .mx-channel__icon { background: #e7f6ec; color: #1b7547; }
.mx-channel__label { grid-area: label; font-size: var(--mx-fs-sm); color: var(--mx-muted); }
.mx-channel__value { grid-area: value; justify-self: start; font-size: var(--mx-fs-lg); font-weight: 700; overflow-wrap: anywhere; }
.mx-channel__hint { grid-area: hint; font-size: var(--mx-fs-sm); color: var(--mx-ink-2); }
.mx-contact-help { padding-top: var(--mx-s10); }
.mx-help-links { display: grid; gap: var(--mx-s3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .mx-help-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mx-help-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mx-help-link { display: flex; align-items: center; gap: var(--mx-s3); height: 100%; padding: var(--mx-s4); border-radius: var(--mx-r-lg); background: var(--mx-surface); text-decoration: none; color: var(--mx-ink); }
.mx-help-link:hover { background: var(--mx-surface-2); color: var(--mx-ink); }
.mx-help-link__icon { width: 40px; height: 40px; background: #fff; }
.mx-help-link__text { display: flex; flex: 1; flex-direction: column; line-height: 1.5; }
.mx-help-link__text span { font-size: var(--mx-fs-sm); color: var(--mx-ink-2); }
.mx-help-link__arrow { flex: none; color: var(--mx-muted); }

/* ---------- How to order ---------- */
.mx-howto__grid { display: grid; gap: var(--mx-s6); }
@media (min-width: 900px) {
	.mx-howto__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--mx-s10); align-items: start; }
	.mx-howto__aside { position: sticky; top: calc(var(--mx-head-offset, 134px) + 16px); transition: top .3s var(--mx-ease); }
}
.mx-howto__steps > ol { counter-reset: mx-step; display: grid; gap: var(--mx-s3); margin: 0; padding: 0; list-style: none; }
.mx-howto__steps > ol > li {
	counter-increment: mx-step; position: relative; min-height: 88px;
	padding: var(--mx-s5); padding-inline-start: calc(var(--mx-s5) + 48px + var(--mx-s4));
	border: 1px solid var(--mx-line-2); border-radius: var(--mx-r-lg); background: #fff; line-height: 1.8; color: var(--mx-ink-2);
}
.mx-howto__steps > ol > li::before {
	content: counter(mx-step); position: absolute; top: var(--mx-s5); inset-inline-start: var(--mx-s5);
	display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: var(--mx-ink); color: #fff; font-size: var(--mx-fs-lg); font-weight: 700;
}
.mx-howto__steps > ol > li > strong:first-child { display: block; margin-bottom: 2px; font-size: var(--mx-fs-lg); color: var(--mx-ink); }
.mx-howto__steps > p { color: var(--mx-ink-2); }
.mx-info-box { padding: var(--mx-s5); border-radius: var(--mx-r-lg); background: var(--mx-surface); }
.mx-info-box + .mx-info-box { margin-top: var(--mx-s3); }
.mx-info-box__title { display: flex; align-items: center; gap: var(--mx-s2); margin: 0 0 var(--mx-s3); font-size: var(--mx-fs-md); }
.mx-info-box__title .mx-icon { color: var(--mx-gold-ink); }
.mx-info-box p { margin: 0; font-size: var(--mx-fs-sm); line-height: 1.8; color: var(--mx-ink-2); }
.mx-info-box p + p { margin-top: var(--mx-s3); }
.mx-info-box .mx-chips { display: flex; flex-wrap: wrap; gap: var(--mx-s2); margin: 0; padding: 0; list-style: none; }
.mx-pay-list { display: grid; gap: var(--mx-s2); margin: 0; padding: 0; list-style: none; }
.mx-pay-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--mx-s3); min-height: 48px; padding: 8px var(--mx-s3); border: 1px solid var(--mx-line); border-radius: var(--mx-r-md); background: #fff; }
.mx-pay-list__title { font-weight: 700; font-size: var(--mx-fs-sm); }
.mx-pay-list__logos { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.mx-pay-list__logos img { display: block; height: 22px; width: auto; max-width: 110px; object-fit: contain; }
.mx-pay-list__icon { display: inline-grid; place-items: center; color: var(--mx-gold-ink); }

/* ---------- Policies ---------- */
.mx-legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mx-s6); }
.mx-legal__aside, .mx-legal__main { min-width: 0; } /* the scrolling menu must not widen the column */
@media (min-width: 900px) {
	.mx-legal { grid-template-columns: 270px minmax(0, 1fr); gap: var(--mx-s10); align-items: start; }
	.mx-legal--hub { grid-template-columns: minmax(0, 1fr); }
	.mx-legal__aside { position: sticky; top: calc(var(--mx-head-offset, 134px) + 16px); transition: top .3s var(--mx-ease); max-height: calc(100vh - var(--mx-head-offset, 134px) - 36px); overflow-y: auto; scrollbar-width: thin; }
}
.mx-legal-nav ul { display: flex; gap: var(--mx-s2); margin: 0; padding: 0 0 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.mx-legal-nav ul::-webkit-scrollbar { display: none; }
.mx-legal-nav a {
	display: flex; align-items: center; gap: var(--mx-s2); min-height: 44px; padding: 8px 14px;
	border: 1px solid var(--mx-line); border-radius: var(--mx-r-md); white-space: nowrap; font-weight: 500; text-decoration: none; color: var(--mx-ink-2);
}
.mx-legal-nav a:hover { background: var(--mx-surface); color: var(--mx-ink); }
.mx-legal-nav a[aria-current="page"] { background: var(--mx-ink); border-color: var(--mx-ink); color: #fff; }
@media (min-width: 900px) {
	.mx-legal-nav ul { flex-direction: column; gap: 4px; overflow: visible; }
	.mx-legal-nav a { border-color: transparent; }
}
.mx-toc { margin-top: var(--mx-s4); border: 1px solid var(--mx-line); border-radius: var(--mx-r-lg); }
.mx-toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: var(--mx-s2) var(--mx-s4); font-weight: 700; cursor: pointer; list-style: none; }
.mx-toc summary::-webkit-details-marker { display: none; }
.mx-toc summary .mx-icon { transition: transform .2s; }
.mx-toc[open] summary .mx-icon { transform: rotate(180deg); }
.mx-toc ol { counter-reset: mx-toc; margin: 0; padding: 0 var(--mx-s4) var(--mx-s3); list-style: none; font-size: var(--mx-fs-sm); }
.mx-toc li { counter-increment: mx-toc; }
.mx-toc a { display: flex; gap: var(--mx-s2); padding: 6px 0; line-height: 1.5; text-decoration: none; color: var(--mx-ink-2); }
.mx-toc a::before { content: counter(mx-toc) "."; min-width: 1.5em; color: var(--mx-muted); font-variant-numeric: tabular-nums; }
.mx-toc a:hover { color: var(--mx-ink); text-decoration: underline; }
.mx-toc a.is-active { font-weight: 700; color: var(--mx-ink); }

.mx-legal__main .mx-prose { max-width: 78ch; }
.mx-legal .mx-prose h2 { margin-top: var(--mx-s10); padding-top: var(--mx-s6); border-top: 1px solid var(--mx-line-2); font-size: var(--mx-fs-h3); scroll-margin-top: 150px; }
.mx-legal .mx-prose h3 { margin-top: var(--mx-s6); font-size: var(--mx-fs-h4); }
.mx-prose .mx-updated { display: inline-block; margin: 0; padding: 4px 12px; border-radius: var(--mx-r-pill); background: var(--mx-surface); font-size: var(--mx-fs-sm); color: var(--mx-muted); }
.mx-prose .mx-inshort { padding: var(--mx-s3) var(--mx-s4); border-inline-start: 3px solid var(--mx-gold); border-radius: var(--mx-r-sm); background: var(--mx-gold-soft); font-size: var(--mx-fs-sm); }
.mx-prose li::marker { color: var(--mx-gold-ink); }
.mx-prose a[href^="mailto:"] { overflow-wrap: anywhere; }

.mx-policy-cards { display: grid; gap: var(--mx-s3); margin: var(--mx-s6) 0 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .mx-policy-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--mx-s4); } }
.mx-policy-card {
	display: flex; flex-direction: column; gap: var(--mx-s2); height: 100%; padding: var(--mx-s5);
	border: 1px solid var(--mx-line); border-radius: var(--mx-r-lg); text-decoration: none; color: var(--mx-ink);
	transition: border-color .15s, box-shadow .15s, transform .15s var(--mx-ease);
}
.mx-policy-card:hover { border-color: var(--mx-ink); box-shadow: var(--mx-shadow-md); transform: translateY(-2px); color: var(--mx-ink); }
.mx-policy-card__icon { width: 48px; height: 48px; margin-bottom: var(--mx-s2); }
.mx-policy-card__title { font-size: var(--mx-fs-lg); }
.mx-policy-card__text { flex: 1; font-size: var(--mx-fs-sm); line-height: 1.7; color: var(--mx-ink-2); }
.mx-policy-card__more { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mx-fs-sm); font-weight: 700; color: var(--mx-gold-ink); }
.mx-legal-help { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mx-s3) var(--mx-s4); margin-top: var(--mx-s10); padding: var(--mx-s5); border-radius: var(--mx-r-lg); background: var(--mx-surface); }
.mx-legal-help__icon { width: 44px; height: 44px; background: #fff; }
.mx-legal-help p { flex: 1 1 220px; margin: 0; }