/**
 * Mama County — supplementary component styles.
 *
 * Design stance: restraint. Typography is the signature (set big and tight in
 * theme.json); everything else is flat and quiet — hairline borders, almost no
 * shadow, amber used sparingly. theme.json owns tokens; this file owns the
 * components and block-style variants JSON can't express.
 *
 *   1.  Primitives & base       6.  Section heads        11. FAQ
 *   2.  Buttons / card / image  7.  Numbered steps        12. Gallery
 *   3.  Header                  8.  Highlights            13. Footer
 *   4.  Eyebrow / badges        9.  Stat grid             14. Icons / contact
 *   5.  Hero + collage / stats  10. Features / figure     15. Dark + responsive
 */

/* ------------------------------------------------------------------ */
/* 1. Primitives & base polish                                        */
/* ------------------------------------------------------------------ */

:root {
	--mc-ink: var(--wp--preset--color--ink, #1a1a1a);
	--mc-amber: var(--wp--preset--color--amber, #f59e0b);
	--mc-amber-deep: var(--wp--preset--color--amber-deep, #d97706);
	--mc-amber-soft: var(--wp--preset--color--amber-soft, #fffbeb);
	--mc-paper: var(--wp--preset--color--paper, #ffffff);
	--mc-sand: var(--wp--preset--color--sand, #efeee9);
	--mc-line: var(--wp--preset--color--line, #e3e0d9);
	--mc-muted: var(--wp--preset--color--muted, #6b6862);

	--mc-r-sm: 10px;
	--mc-r-md: 14px;
	--mc-r-lg: 18px;
	--mc-r-xl: 24px;
	--mc-r-pill: 999px;

	/* One restrained elevation, used only where depth is meaningful */
	--mc-shadow: 0 18px 48px -32px rgba(20, 18, 14, .4);

	--mc-ease: cubic-bezier(.4, 0, .2, 1);
	--mc-t: .18s var(--mc-ease);
	--mc-hair: 1px solid var(--mc-line);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

h1, h2, h3, .wp-block-heading { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--mc-amber); color: var(--mc-ink); }
/* Focus ring follows each element's own rounding (don't override radius). */
:focus-visible { outline: 2px solid var(--mc-amber-deep); outline-offset: 2px; }
/* Controls that carry their own focus ring opt out of the global outline. */
.mc-combo__input:focus-visible,
.mc-search__input:focus-visible,
.mc-select select:focus-visible,
.mc-input input:focus-visible,
.mc-stepper__input:focus-visible,
.mc-details__grid input:focus-visible { outline: none; }
[id] { scroll-margin-top: 88px; }
img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ */
/* 2. Buttons / card / image variants                                 */
/* ------------------------------------------------------------------ */

.wp-block-button__link { transition: background-color var(--mc-t), color var(--mc-t), border-color var(--mc-t); }

/* Amber — flat, no glow */
.wp-block-button.is-style-amber > .wp-block-button__link { background: var(--mc-amber); color: var(--mc-ink); font-weight: 600; }
.wp-block-button.is-style-amber > .wp-block-button__link:hover { background: var(--mc-amber-deep); }

/* Outline — hairline */
.wp-block-button.is-style-outline-ink > .wp-block-button__link { background: transparent; color: var(--mc-ink); border: 1.5px solid rgba(26, 24, 20, .22); font-weight: 600; }
.wp-block-button.is-style-outline-ink > .wp-block-button__link:hover { background: var(--mc-ink); color: #fff; border-color: var(--mc-ink); }
.has-ink-background-color .wp-block-button.is-style-outline-ink > .wp-block-button__link,
.mc-on-dark .wp-block-button.is-style-outline-ink > .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .3); }
.has-ink-background-color .wp-block-button.is-style-outline-ink > .wp-block-button__link:hover,
.mc-on-dark .wp-block-button.is-style-outline-ink > .wp-block-button__link:hover { background: #fff; color: var(--mc-ink); border-color: #fff; }

/* Card — flat, hairline; lifts only a hair on hover */
.wp-block-group.is-style-card {
	background: var(--mc-paper); border: var(--mc-hair); border-radius: var(--mc-r-lg);
	padding: clamp(1.5rem, 2.6vw, 2.1rem); transition: border-color var(--mc-t), transform var(--mc-t);
	height: 100%; /* fill the (stretched) column so cards in a row match height */
}
/* Columns stretch their items so cards align to the tallest one. */
.wp-block-columns .wp-block-column { display: flex; flex-direction: column; }
.wp-block-columns .wp-block-column > .is-style-card { flex: 1; }
.wp-block-group.is-style-card:hover { border-color: #dcdcda; transform: translateY(-2px); }

.wp-block-image.is-style-duotone-frame img { border-radius: var(--mc-r-lg); }

.wp-block-list.is-style-none { list-style: none; padding-left: 0; margin-left: 0; }

/* ------------------------------------------------------------------ */
/* 3. Header                                                          */
/* ------------------------------------------------------------------ */

header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.mc-header {
	background: color-mix(in srgb, var(--mc-paper) 80%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
	border-bottom: var(--mc-hair);
}
.mc-header .wp-block-site-title { font-weight: 800; letter-spacing: -.03em; }
.mc-header .wp-block-site-title a { color: var(--mc-ink); text-decoration: none; }
.mc-header .wp-block-navigation { font-weight: 500; font-size: .98rem; }
.mc-header .wp-block-navigation a { color: var(--mc-ink); transition: color var(--mc-t); }
.mc-header .wp-block-navigation a:hover { color: var(--mc-amber-deep); }
.mc-header .wp-block-button__link { padding-top: .62rem; padding-bottom: .62rem; }
.mc-logo-mark {
	display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--mc-r-sm);
	background: var(--mc-ink); color: var(--mc-amber); text-decoration: none;
	font-family: var(--wp--preset--font-family--display, sans-serif); font-weight: 900; font-size: 17px; line-height: 1;
}

/* Mobile menu overlay (driven by assets/js/nav.js — own class to avoid the
   core Interactivity runtime fighting us over .is-menu-open). */
html.mc-menu-open { overflow: hidden; }
/* The header's backdrop-filter creates a containing block that would trap the
   fixed overlay inside the header — drop it while the menu is open. */
html.mc-menu-open .mc-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
.mc-header .wp-block-navigation__responsive-container-open { color: var(--mc-ink); }
.mc-header .wp-block-navigation__responsive-container.mc-nav-open {
	display: flex !important; position: fixed; inset: 0; z-index: 99999; flex-direction: column;
	background: var(--mc-ink) !important; color: #fff; padding: 1.5rem;
	animation: mc-menu-in .22s var(--mc-ease);
}
@keyframes mc-menu-in { from { opacity: 0; } to { opacity: 1; } }
.mc-header .mc-nav-open .wp-block-navigation__responsive-container-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.mc-header .mc-nav-open .wp-block-navigation__container {
	display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%;
}
.mc-header .mc-nav-open .wp-block-navigation-item a,
.mc-header .mc-nav-open a.wp-block-navigation-item__content {
	color: #fff; font-family: var(--wp--preset--font-family--display, sans-serif);
	font-weight: 700; font-size: 2rem; letter-spacing: -.02em; padding: .4rem 1rem;
}
.mc-header .mc-nav-open .wp-block-navigation-item a:hover { color: var(--mc-amber); }
.mc-header .mc-nav-open .wp-block-navigation__responsive-container-close {
	position: absolute; top: 1.4rem; right: 1.4rem; width: 44px; height: 44px; color: #fff; z-index: 1;
}
.mc-header .mc-nav-open .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }

/* ------------------------------------------------------------------ */
/* 4. Eyebrow / badges                                                */
/* ------------------------------------------------------------------ */

.mc-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 600; color: var(--mc-amber-deep); }
.mc-on-dark .mc-eyebrow { color: var(--mc-amber); }

.mc-pill-badge {
	display: inline-flex; align-items: center; gap: 9px; background: transparent;
	color: var(--mc-muted); border: var(--mc-hair); padding: 7px 15px; border-radius: var(--mc-r-pill); font-size: .8rem; font-weight: 600;
}
.mc-on-dark .mc-pill-badge { color: #cfccc4; border-color: rgba(255, 255, 255, .22); }
.mc-pill-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mc-amber); }

/* ------------------------------------------------------------------ */
/* 5. Hero + collage / inline stats                                   */
/* ------------------------------------------------------------------ */

.mc-hero { position: relative; }
.mc-hero h1 { font-size: clamp(2.7rem, 6vw, 4.6rem); line-height: .96; }
.mc-hero__trust { color: var(--mc-muted); font-size: .92rem; font-weight: 500; letter-spacing: .01em; }

.mc-hero-collage { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 1 / 1; max-height: 540px; }
.mc-hero-collage figure { margin: 0; overflow: hidden; border-radius: var(--mc-r-lg); }
.mc-hero-collage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--mc-ease); }
.mc-hero-collage figure:hover img { transform: scale(1.04); }
.mc-hero-collage__main { grid-row: 1 / 3; }
.mc-hero-collage__chip {
	position: absolute; left: 14px; bottom: 14px; z-index: 2; background: var(--mc-ink); color: #fff;
	border-radius: var(--mc-r-md); padding: 10px 15px; max-width: 64%;
	display: flex; flex-direction: column; gap: 2px; font-size: .8rem; font-weight: 500;
}
.mc-hero-collage__stars { color: var(--mc-amber); letter-spacing: 2px; font-size: .78rem; }

.mc-stat .mc-stat__num { font-family: var(--wp--preset--font-family--display, sans-serif); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -.04em; color: var(--mc-ink); font-variant-numeric: tabular-nums; }
.mc-on-dark .mc-stat .mc-stat__num { color: #fff; }
.mc-stat .mc-stat__num em { color: var(--mc-amber); font-style: normal; }
.mc-stat .mc-stat__label { color: var(--mc-muted); font-size: .88rem; margin-top: 6px; }
.mc-on-dark .mc-stat .mc-stat__label { color: #b1ada4; }

/* ------------------------------------------------------------------ */
/* 6. Section heads                                                   */
/* ------------------------------------------------------------------ */

.mc-section-head { max-width: 680px; }
.mc-section-head.is-centered { max-width: 760px; margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------------ */
/* 7. Numbered steps                                                  */
/* ------------------------------------------------------------------ */

.mc-num {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
	background: transparent; color: var(--mc-amber-deep); border: 1.5px solid var(--mc-amber);
	font-family: var(--wp--preset--font-family--display, sans-serif); font-weight: 800; font-size: 1.15rem;
}

/* ------------------------------------------------------------------ */
/* 8. Highlights (big feature cards) — flat                           */
/* ------------------------------------------------------------------ */

.mc-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mc-highlight {
	border-radius: var(--mc-r-xl); padding: clamp(1.9rem, 3vw, 2.8rem); min-height: 300px;
	display: flex; flex-direction: column; justify-content: space-between; text-decoration: none;
	transition: transform var(--mc-t);
}
.mc-highlight:hover { transform: translateY(-3px); }
.mc-highlight__tag { display: inline-block; align-self: flex-start; font-size: .78rem; font-weight: 700; padding: 6px 14px; border-radius: var(--mc-r-pill); }
.mc-highlight h3 { font-family: var(--wp--preset--font-family--display, sans-serif); font-weight: 800; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.0; letter-spacing: -.035em; margin: 1.4rem 0 0; }
.mc-highlight p { margin: .85rem 0 0; font-size: 1.05rem; line-height: 1.5; max-width: 38ch; }
.mc-highlight__link { margin-top: 1.7rem; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.mc-highlight__link svg { width: 18px; height: 18px; transition: transform var(--mc-t); }
.mc-highlight:hover .mc-highlight__link svg { transform: translateX(4px); }
.mc-highlight--amber { background: var(--mc-amber); color: var(--mc-ink); }
.mc-highlight--amber .mc-highlight__tag { background: rgba(26, 24, 20, .14); }
.mc-highlight--ink { background: var(--mc-ink); color: #fff; }
.mc-highlight--ink .mc-highlight__tag { background: rgba(255, 255, 255, .14); color: #fff; }
.mc-highlight--ink p { color: #cbc8c1; }
.mc-highlight--ink h3 { color: #fff; }
.mc-highlight--ink .mc-highlight__link { color: var(--mc-amber); }

/* ------------------------------------------------------------------ */
/* 9. Stat grid — flat hairline                                       */
/* ------------------------------------------------------------------ */

.mc-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mc-statcard { background: var(--mc-paper); border: var(--mc-hair); border-radius: var(--mc-r-lg); padding: 28px; transition: border-color var(--mc-t); }
.mc-statcard:hover { border-color: #dcdcda; }
.mc-statcard__ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--mc-amber-soft); color: var(--mc-amber-deep); margin-bottom: 18px; }
.mc-statcard__ico svg { width: 20px; height: 20px; }
.mc-statcard__num { font-family: var(--wp--preset--font-family--display, sans-serif); font-weight: 800; font-size: clamp(2rem, 3vw, 2.6rem); letter-spacing: -.04em; line-height: 1; color: var(--mc-ink); font-variant-numeric: tabular-nums; }
.mc-statcard__label { color: var(--mc-muted); font-size: .9rem; margin-top: 7px; }

/* ------------------------------------------------------------------ */
/* 10. Features / figure stack                                        */
/* ------------------------------------------------------------------ */

.mc-featuregrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 28px; }
.mc-feature { display: flex; flex-direction: column; }
.mc-feature__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--mc-amber-soft); color: var(--mc-amber-deep); margin-bottom: 18px; }
.mc-feature__ico svg { width: 23px; height: 23px; }
.mc-feature h3 { font-size: 1.16rem; margin: 0 0 7px; letter-spacing: -.02em; }
.mc-feature p { margin: 0; color: var(--mc-muted); font-size: .96rem; line-height: 1.6; }
@media (max-width: 900px) { .mc-featuregrid { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; } }
@media (max-width: 560px) { .mc-featuregrid { grid-template-columns: 1fr; } }

.mc-figure-stack { position: relative; }
.mc-figure-stack__img { margin: 0; border-radius: var(--mc-r-xl); overflow: hidden; }
.mc-figure-stack__img img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; display: block; }
.mc-figure-stack__chip { position: absolute; right: -14px; bottom: -14px; background: var(--mc-amber); color: var(--mc-ink); border-radius: var(--mc-r-md); padding: 15px 19px; display: flex; flex-direction: column; line-height: 1.15; }
.mc-figure-stack__num { font-family: var(--wp--preset--font-family--display, sans-serif); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; }
.mc-figure-stack__label { font-size: .8rem; font-weight: 600; max-width: 150px; }

/* ------------------------------------------------------------------ */
/* 11. Testimonials                                                   */
/* ------------------------------------------------------------------ */

.mc-quote-card .mc-stars { color: var(--mc-amber); letter-spacing: 3px; font-size: 1rem; }
.mc-quote-card cite { font-style: normal; font-weight: 700; }
.mc-quote-card p { line-height: 1.6; }

/* ------------------------------------------------------------------ */
/* 12. FAQ                                                            */
/* ------------------------------------------------------------------ */

.mc-faq details { border-bottom: var(--mc-hair); }
.mc-faq summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; padding: 22px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mc-faq summary::-webkit-details-marker { display: none; }
.mc-faq summary::after {
	content: ""; flex: none; width: 12px; height: 12px;
	background: linear-gradient(var(--mc-ink), var(--mc-ink)) center/12px 1.5px no-repeat, linear-gradient(var(--mc-ink), var(--mc-ink)) center/1.5px 12px no-repeat;
	transition: transform var(--mc-t);
}
.mc-faq details[open] summary::after { transform: rotate(135deg); }
.mc-faq details > p { margin: -4px 0 22px; color: var(--mc-muted); line-height: 1.6; max-width: 64ch; }

/* ------------------------------------------------------------------ */
/* 13. Gallery                                                        */
/* ------------------------------------------------------------------ */

.mc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mc-gallery__tile { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--mc-r-lg); overflow: hidden; }
.mc-gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--mc-ease); }
.mc-gallery__tile:hover img { transform: scale(1.05); }
.mc-gallery__tile figcaption {
	position: absolute; inset: auto 0 0 0; padding: 36px 16px 15px; color: #fff; z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent); display: flex; flex-direction: column; gap: 1px;
}
.mc-gallery__tile figcaption strong { font-size: .96rem; font-weight: 700; }
.mc-gallery__tile figcaption span { font-size: .8rem; color: var(--mc-amber); font-weight: 600; }

/* Trust strip (kept minimal in case it is used) */
.mc-strip { border-top: var(--mc-hair); border-bottom: var(--mc-hair); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mc-strip__row { display: flex; gap: 2.75rem; white-space: nowrap; padding: 16px 0; animation: mc-marquee 48s linear infinite; }
.mc-strip__row span { font-weight: 600; font-size: .92rem; color: var(--mc-muted); display: inline-flex; align-items: center; }
.mc-strip__row span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--mc-amber); margin-right: 2.75rem; }
@keyframes mc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ */
/* 14. Footer / icons / contact                                       */
/* ------------------------------------------------------------------ */

.mc-footer { background: var(--mc-ink); color: #c7c4bd; }
.mc-footer a { color: #d4d1ca; text-decoration: none; transition: color var(--mc-t); }
.mc-footer a:hover { color: var(--mc-amber); }
.mc-footer .wp-block-heading { color: #fff; }
.mc-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); color: #8a8780; font-size: .85rem; }

.mc-ico { display: inline-flex; width: 18px; height: 18px; flex: none; }
.mc-ico svg { width: 100%; height: 100%; }
.mc-contact-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; font-size: .98rem; }
.mc-contact-list li { display: flex; align-items: center; gap: 10px; }
.mc-contact-list .mc-ico { color: var(--mc-amber); }
.mc-contact-card__ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--mc-amber-soft); color: var(--mc-amber-deep); margin-bottom: 14px; }
.mc-contact-card__ico svg { width: 22px; height: 22px; }

/* awards (optional) */
.mc-awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: center; }
.mc-award { display: flex; align-items: center; gap: 14px; }
.mc-award__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mc-amber-soft); color: var(--mc-amber-deep); }
.mc-award strong { display: block; font-size: .98rem; }
.mc-award span { display: block; font-size: .85rem; color: var(--mc-muted); }

/* ------------------------------------------------------------------ */
/* 15. Dark-section helpers + responsive                              */
/* ------------------------------------------------------------------ */

.mc-on-dark, .mc-on-dark p { color: #cbc8c1; }
.mc-on-dark .wp-block-heading, .mc-on-dark h1, .mc-on-dark h2, .mc-on-dark h3 { color: #fff; }

.wp-site-blocks { overflow-x: clip; }
/* Page regions and the full-width sections inside them carry their own padding,
   so the global block-gap margin must not add stray strips between the stacked
   bands (or above the footer). Only zeroes the top-level stacking — block-gap
   inside each section is untouched. */
.wp-site-blocks > *,
main.wp-block-group > *,
.wp-block-post-content > * { margin-block-start: 0; }
.mc-hero .is-style-card .wp-block-group { min-width: 0; }
.mc-hero .is-style-card .wp-block-group > .wp-block-paragraph { min-width: 0; }

@media (max-width: 920px) { .mc-statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 781px) {
	.mc-header .wp-block-group { flex-wrap: nowrap; gap: .5rem; }
	.mc-hero .wp-block-buttons { flex-wrap: wrap; }
	.mc-hero .wp-block-buttons .wp-block-button { flex: 1 1 auto; }
	.mc-hero .wp-block-buttons .wp-block-button__link { width: 100%; text-align: center; }
	.mc-highlights { grid-template-columns: 1fr; }
	.mc-gallery { grid-template-columns: repeat(2, 1fr); }
	.mc-awards { grid-template-columns: 1fr; gap: 18px; }
	.mc-figure-stack__chip { right: 0; }
}
@media (max-width: 600px) {
	.mc-header > .wp-block-group > .wp-block-buttons { display: none; }
	.mc-header .wp-block-site-title { font-size: 1.12rem; }
	.mc-statgrid, .mc-gallery { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}