/*
Theme Name: MIAOKE Child
Theme URI: https://miaokehome.com/
Description: Material-led MIAOKE factory website. Presentation only.
Author: MIAOKE
Template: twentytwentyfive
Version: 1.1.1
Requires at least: 6.7
Requires PHP: 8.0
Text Domain: miaoke-child
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
    --mk-white: oklch(1 0 0);
    --mk-surface: oklch(.965 0 0);
    --mk-ink: oklch(.22 .004 85);
    --mk-muted: oklch(.43 .005 85);
    --mk-gold: oklch(.77 .13 80);
    --mk-gold-ink: oklch(.43 .085 75);
    --mk-line: oklch(.86 .005 85);
    --mk-on-dark: oklch(.975 0 0);
    --mk-font: "Bahnschrift", "Aptos", "Segoe UI", Arial, sans-serif;
    --mk-gutter: clamp(1.25rem, 3.35vw, 3rem);
    --mk-wide: 80rem;
    --mk-space: clamp(4rem, 7.5vw, 7rem);
    --mk-layer-header: 10;
    --mk-layer-menu: 20;
    --mk-layer-focus: 30;
}

html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { margin: 0; color: var(--mk-ink); background: var(--mk-white); font-family: var(--mk-font); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
img { max-width: 100%; height: auto; vertical-align: middle; }
figure { margin: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a, button, summary { -webkit-tap-highlight-color: oklch(.77 .13 80 / .2); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--mk-gold-ink); outline-offset: 5px; }
h1, h2, h3, h4, .wp-block-post-title { color: inherit; font-family: var(--mk-font); font-weight: 500; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.5rem, 5.8vw, 5.5rem); line-height: 1.08; letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 3.25vw, 3.4rem); line-height: 1.14; letter-spacing: -.025em; }
h3 { font-size: clamp(1.375rem, 1.8vw, 1.75rem); line-height: 1.25; letter-spacing: -.01em; }
p { text-wrap: pretty; }
.mk-wrap { width: min(calc(100% - var(--mk-gutter) * 2), var(--mk-wide)); margin-inline: auto; }
.mk-skip { position: fixed; inset-block-start: .5rem; inset-inline-start: 1rem; z-index: var(--mk-layer-focus); padding: .75rem 1rem; color: var(--mk-ink); background: var(--mk-white); transform: translateY(-200%); }
.mk-skip:focus { transform: translateY(0); }

/* The logo and straightforward navigation lead directly to real content pages. */
.mk-site-header { position: relative; z-index: var(--mk-layer-header); background: var(--mk-white); border-block-end: 1px solid var(--mk-line); }
.mk-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.75rem; min-height: 6.25rem; }
.mk-brand { display: inline-flex; align-items: center; gap: .85rem; flex-shrink: 0; text-decoration: none; }
.mk-brand img { width: 6.5rem; height: auto; }
.mk-wordmark { display: flex; flex-direction: column; gap: .15rem; line-height: 1; }
.mk-wordmark small { max-width: 8rem; color: var(--mk-muted); font-size: .69rem; line-height: 1.2; letter-spacing: .04em; }
.mk-nav { display: flex; gap: clamp(1.1rem, 2.1vw, 2rem); align-items: center; }
.mk-nav a { padding-block: 1rem; text-decoration: none; font-size: .9375rem; white-space: nowrap; }
.mk-nav a:hover { color: var(--mk-gold-ink); }
.mk-nav a::after { content: ""; display: block; width: 0; height: 1px; margin-block-start: .2rem; background: currentColor; transition: width .18s ease-out; }
.mk-nav a:hover::after, .mk-nav a:focus-visible::after { width: 100%; }
.mk-mobile-menu { display: none; }
.mk-header-contact { font-size: .9375rem; white-space: nowrap; }
.mk-mobile-menu summary { cursor: pointer; min-height: 2.75rem; padding: .625rem .75rem; list-style: none; border: 1px solid var(--mk-ink); font-size: .9375rem; }
.mk-mobile-menu summary::-webkit-details-marker { display: none; }
.mk-mobile-menu summary::after { content: "+"; display: inline-block; margin-inline-start: .7rem; font-size: 1.125rem; line-height: 1; }
.mk-mobile-menu[open] summary::after { content: "−"; }
.mk-mobile-menu nav { position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: var(--mk-layer-menu); display: flex; flex-direction: column; padding: 1rem var(--mk-gutter) 1.5rem; background: var(--mk-white); border-block-end: 1px solid var(--mk-ink); }
.mk-mobile-menu nav a { padding: .85rem 0; border-block-end: 1px solid var(--mk-line); text-decoration: none; }
.mk-mobile-menu nav a:last-child { border: 0; color: var(--mk-gold-ink); }

/* One template-owned H1; the editor owns all succeeding page content. */
.mk-main { margin: 0; min-height: 55vh; }
.mk-page-heading { width: min(calc(100% - var(--mk-gutter) * 2), var(--mk-wide)); margin: clamp(3rem, 5.5vw, 5.5rem) auto 2.25rem; max-width: var(--mk-wide); }
.mk-page-heading { padding-inline-end: 12%; }
.mk-home-main .mk-page-heading { margin-block-end: 2.5rem; }
.mk-page-content { width: min(calc(100% - var(--mk-gutter) * 2), var(--mk-wide)); margin-inline: auto; margin-block: 0; }
.mk-page-content > * { max-width: 100%; }
.mk-page-content > p, .mk-page-content > ul, .mk-page-content > ol { max-width: 65ch; }
.mk-page-content > p:first-child { color: var(--mk-muted); font-size: clamp(1.125rem, 1.6vw, 1.35rem); }
.mk-page-content > :last-child { margin-block-end: 0; }
.mk-page-content { padding-block-end: var(--mk-space); }
.mk-page-content p { max-width: 65ch; }
.mk-page-content h2, .mk-page-content h3 { margin-block-start: 0; }
.mk-page-content > h2 { margin-block-start: 3.5rem; }
.mk-page-content > .mk-flow { max-width: 100%; }
.mk-page-content .mk-section, .mk-page-content .mk-split, .mk-page-content .mk-contact, .mk-page-content .mk-band { margin-block-start: var(--mk-space); }
.mk-page-content > .mk-hero:first-child, .mk-page-content > .mk-contact:first-child, .mk-page-content > .mk-split:first-child { margin-block-start: 0; }
.mk-page-content p + p { margin-block-start: 1rem; }

.mk-hero { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: clamp(2rem, 4.8vw, 5rem); align-items: start; }
.mk-hero-copy { padding-block-start: .25rem; }
.mk-hero p { margin-block-start: 0; color: var(--mk-muted); font-size: clamp(1.0625rem, 1.35vw, 1.2rem); }
.mk-hero figure { min-width: 0; }
.mk-hero figure img { display: block; width: 100%; aspect-ratio: 1.25; object-fit: cover; }
.mk-hero figcaption { margin-block-start: .65rem; color: var(--mk-muted); font-size: .8rem; line-height: 1.45; }
.mk-hero .mk-actions { align-items: flex-start; margin-block-start: 2rem; flex-direction: column; }
.mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-block-start: 1.75rem; }
.mk-button, a.mk-button, .wp-element-button { display: inline-flex; justify-content: center; align-items: center; gap: 1.25rem; min-height: 3.125rem; padding: .85rem 1.4rem; border: 1px solid var(--mk-ink); border-radius: 0; background: var(--mk-ink); color: var(--mk-white); font: inherit; font-size: .9375rem; line-height: 1.3; text-decoration: none; cursor: pointer; transition: color .18s ease-out, background-color .18s ease-out; }
.mk-button::after { content: "↗"; font-family: Arial, sans-serif; font-size: 1.2em; }
.mk-button:hover { background: var(--mk-gold-ink); color: var(--mk-white); border-color: var(--mk-gold-ink); text-decoration: none; }
.mk-button--outline, a.mk-button--outline { background: transparent; color: var(--mk-ink); }
.mk-button--outline:hover { background: var(--mk-ink); color: var(--mk-white); }
.mk-link { display: inline-block; padding-block: .5rem; font-size: .9375rem; text-decoration: underline; text-underline-offset: .35em; }
.mk-link:hover { color: var(--mk-gold-ink); }
.mk-section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-block-end: 2.5rem; }
.mk-section-head h2 { max-width: 18ch; margin: 0; }
.mk-section-head p { margin: 0; max-width: 34ch; color: var(--mk-muted); }

/* Product images and open captions; variable proportions replace repeated boxes. */
.mk-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: 3rem; }
.mk-product-grid > :nth-child(even) { padding-block-start: 5rem; }
.mk-product { min-width: 0; }
.mk-product figure { overflow: hidden; background: var(--mk-surface); }
.mk-product img { display: block; width: 100%; aspect-ratio: 1.35; object-fit: cover; transition: transform .35s ease-out; }
.mk-product-grid > :nth-child(even) img { aspect-ratio: 1.05; }
.mk-product:hover img { transform: scale(1.015); }
.mk-product h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 .55rem; }
.mk-product h3 a { text-decoration: none; }
.mk-product h3 a:hover { text-decoration: underline; }
.mk-product p { margin: .5rem 0; color: var(--mk-muted); font-size: 1rem; }
.mk-product .mk-link { color: var(--mk-gold-ink); }
.mk-product-caption { display: flex; justify-content: space-between; gap: 1rem; padding-block-start: 1rem; }
.mk-product-caption h3 { margin: 0; }
.mk-product-caption a { flex-shrink: 0; }
.mk-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.mk-split > * { min-width: 0; }
.mk-split figure img { display: block; width: 100%; }
.mk-split h2 { max-width: 17ch; }
.mk-split p { color: var(--mk-muted); }
.mk-split--reverse figure { order: 2; }
.mk-band { position: relative; padding-block: clamp(3rem, 6vw, 6rem); background: var(--mk-ink); color: var(--mk-on-dark); box-shadow: 0 0 0 100vmax var(--mk-ink); clip-path: inset(0 -100vmax); }
.mk-band h2, .mk-band h3, .mk-band a, .mk-band p { color: inherit; }
.mk-band p { opacity: 1; }
.mk-band .mk-button { border-color: var(--mk-gold); background: var(--mk-gold); color: var(--mk-ink); }
.mk-band .mk-button:hover { border-color: var(--mk-white); background: var(--mk-white); color: var(--mk-ink); }
.mk-band a:focus-visible, .mk-site-footer a:focus-visible { outline-color: var(--mk-gold); }
.mk-band .mk-link:hover { color: var(--mk-gold); }
.mk-band .mk-split { margin-block-start: 0; }
.mk-flow { counter-reset: mk-step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3.5vw, 3.5rem); list-style: none; padding: 0; margin-block: 2.5rem 0; }
.mk-flow li { counter-increment: mk-step; border-block-start: 1px solid var(--mk-line); padding-block-start: 1.25rem; }
.mk-flow li::before { content: "0" counter(mk-step); display: inline-block; color: var(--mk-gold-ink); font-size: 1rem; margin-block-end: 1.5rem; }
.mk-flow h3 { margin: 0 0 .75rem; }
.mk-flow p { margin: 0; color: var(--mk-muted); font-size: 1rem; }
.mk-band .mk-flow li::before { color: var(--mk-gold); }
.mk-band .mk-flow p { color: var(--mk-on-dark); }
.mk-contact { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.mk-contact h2 { max-width: 16ch; }
.mk-contact-details { padding: 2rem; background: var(--mk-surface); }
.mk-contact-details p { margin: 0 0 1.35rem; }
.mk-contact-details p:last-child { margin-block-end: 0; }
.mk-contact-details small { display: block; margin-block-end: .25rem; color: var(--mk-muted); font-size: .875rem; }
.mk-contact-details a { overflow-wrap: anywhere; }
.mk-contact-details strong { font-weight: 500; font-size: 1.35rem; }
.mk-list { list-style: none; padding: 0; margin-block: 1.5rem; }
.mk-list li { border-block-start: 1px solid var(--mk-line); padding-block: 1rem; }
.mk-list li:last-child { border-block-end: 1px solid var(--mk-line); }
.mk-faq { max-width: 54rem; }
.mk-faq details { border-block-start: 1px solid var(--mk-line); padding-block: 1.25rem; }
.mk-faq details:last-child { border-block-end: 1px solid var(--mk-line); }
.mk-faq summary { padding-inline-end: 1.5rem; cursor: pointer; font-size: 1.125rem; line-height: 1.5; }
.mk-faq details p { margin: 1rem 0 0; color: var(--mk-muted); }
.mk-table-wrap, .wp-block-table { overflow-x: auto; max-width: 100%; }
.mk-page-content table { width: 100%; border-collapse: collapse; font-size: 1rem; text-align: start; }
.mk-page-content th, .mk-page-content td { border: 0; border-block-end: 1px solid var(--mk-line); padding: 1rem .75rem; vertical-align: top; }
.mk-page-content th { font-weight: 600; background: var(--mk-surface); }
.mk-note { color: var(--mk-muted); font-size: .875rem; }
.mk-intro { max-width: 65ch; font-size: clamp(1.125rem, 1.6vw, 1.35rem); color: var(--mk-muted); }
.mk-image-wide img { display: block; width: 100%; max-height: 46rem; object-fit: cover; }
.mk-image-wide figcaption { padding-block-start: .75rem; color: var(--mk-muted); font-size: .8rem; }

.mk-site-footer { padding: clamp(3.5rem, 6vw, 6rem) 0 1.75rem; background: var(--mk-ink); color: var(--mk-on-dark); }
.mk-footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
.mk-footer-brand .mk-brand { padding: .4rem .6rem .4rem 0; color: var(--mk-white); }
.mk-footer-brand .mk-brand img { width: 6.5rem; background: var(--mk-white); }
.mk-footer-brand .mk-wordmark small { color: var(--mk-on-dark); }
.mk-footer-brand p { max-width: 32ch; font-size: .9375rem; line-height: 1.7; margin-block: 1.5rem 0; }
.mk-footer-title { margin: .5rem 0 1.3rem; font-size: 1.0625rem; font-weight: 600; }
.mk-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; font-size: .9375rem; }
.mk-footer-links a { text-decoration: none; overflow-wrap: anywhere; }
.mk-footer-links a:hover { color: var(--mk-gold); text-decoration: underline; }
.mk-footer-links span { font-size: .875rem; }
.mk-footer-bottom { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-block-start: 4rem; padding-block-start: 1.25rem; border-block-start: 1px solid oklch(.52 .005 85); font-size: .75rem; line-height: 1.65; }
.mk-footer-bottom p { margin: 0; }
.mk-footer-bottom a { text-decoration: none; }
.mk-footer-bottom a:hover { text-decoration: underline; }
.mk-post-list .wp-block-post-title { font-size: 2rem; }
.mk-post-list .wp-block-post { padding-block: 2rem; border-block-end: 1px solid var(--mk-line); }
.mk-post-meta { color: var(--mk-muted); font-size: .875rem; }
.mk-empty { padding-block: 5rem; }

@media (max-width: 1100px) {
    .mk-header-inner { gap: 1rem; }
    .mk-nav { gap: 1.2rem; }
    .mk-header-contact { display: none; }
}
@media (max-width: 980px) {
    .mk-header-inner { min-height: 5.3rem; }
    .mk-nav { display: none; }
    .mk-mobile-menu { display: block; }
    .mk-brand img { width: 5rem; }
    .mk-hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: 2rem; }
    .mk-footer-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .mk-footer-brand { grid-row: span 2; }
}
@media (max-width: 760px) {
    html { scroll-padding-top: 2rem; }
    h1 { font-size: clamp(2.4rem, 8.8vw, 3.6rem); letter-spacing: -.03em; }
    .mk-page-heading { margin-block: 2.75rem 1.75rem; padding-inline-end: 0; }
    .mk-home-main .mk-page-heading { margin-block-end: 1.75rem; }
    .mk-hero, .mk-split, .mk-contact { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .mk-hero .mk-actions { flex-direction: row; align-items: center; margin-block-start: 1.5rem; }
    .mk-hero figure img { aspect-ratio: 1.2; }
    .mk-section-head { display: block; }
    .mk-section-head p { margin-block-start: 1.25rem; max-width: 45ch; }
    .mk-product-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .mk-product-grid > :nth-child(even) { padding-block-start: 0; }
    .mk-product-grid > :nth-child(even) img { aspect-ratio: 1.35; }
    .mk-split--reverse figure { order: 0; }
    .mk-flow { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .mk-flow li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem 1rem; }
    .mk-flow li::before { grid-row: span 2; margin: .1rem 0 0; }
    .mk-flow h3 { margin: 0; }
    .mk-flow p { grid-column: 2; }
    .mk-contact-details { padding: 1.5rem; }
    .mk-footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 1.5rem; }
    .mk-footer-brand { grid-column: 1 / -1; grid-row: auto; }
    .mk-footer-brand p { max-width: 45ch; }
    .mk-footer-bottom { margin-block-start: 2.5rem; flex-direction: column; gap: .75rem; }
}
@media (max-width: 400px) {
    .mk-wordmark small { max-width: 6rem; font-size: .625rem; }
    .mk-brand { gap: .55rem; }
    .mk-brand img { width: 5rem; }
    .mk-footer-top { grid-template-columns: minmax(0, 1fr); }
    .mk-footer-brand { grid-column: auto; }
    .mk-button { width: 100%; }
}
/* A readable project brief, using the existing MIAOKE brand tokens. */
.mk-rfq-form { max-width: 58rem; margin-block: 2.5rem; padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--mk-surface); }
.mk-rfq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.mk-rfq-field { min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.mk-rfq-field--wide { grid-column: 1 / -1; }
.mk-rfq-field label { font-weight: 600; line-height: 1.45; }
.mk-rfq-field input, .mk-rfq-field select, .mk-rfq-field textarea { width: 100%; min-height: 3.125rem; margin: 0; border: 1px solid var(--mk-muted); border-radius: 0; padding: .75rem; color: var(--mk-ink); background: var(--mk-white); font: inherit; }
.mk-rfq-field textarea { min-height: 10rem; resize: vertical; }
.mk-rfq-field input::placeholder, .mk-rfq-field textarea::placeholder { color: var(--mk-muted); opacity: 1; }
.mk-rfq-field small, .mk-rfq-note { color: var(--mk-muted); font-size: .9375rem; }
.mk-rfq-error { color: oklch(.4 .14 27); font-size: .9375rem; line-height: 1.45; }
.mk-rfq-field [aria-invalid="true"] { border-color: oklch(.4 .14 27); outline: 2px solid oklch(.4 .14 27); outline-offset: 1px; }
.mk-rfq-status { margin-block: 1.5rem 0; overflow-wrap: anywhere; }
.mk-rfq-status:empty { display: none; }
.mk-rfq-status--error { color: oklch(.4 .14 27); }
.mk-rfq-form [data-rfq-submit] { margin-block-start: 1.5rem; }
.mk-rfq-form [data-rfq-submit]:disabled { opacity: .7; cursor: wait; }
.mk-rfq-form [hidden] { display: none !important; }
.mk-rfq-honeypot { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mk-rfq-data { max-width: 65ch; margin-block: 2.5rem; }
.mk-rfq-data summary { cursor: pointer; padding-block: .75rem; font-weight: 600; }
@media (max-width: 760px) { .mk-rfq-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .mk-product:hover img { transform: none; }
}
@media print {
    .mk-site-header, .mk-site-footer, .mk-actions, .mk-mobile-menu { display: none; }
    .mk-page-content, .mk-page-heading { width: 100%; }
    .mk-band { margin-inline: 0; padding: 1rem 0; background: white; color: black; box-shadow: none; clip-path: none; }
    .mk-product-grid, .mk-split { display: block; }
    .mk-product-grid > * { break-inside: avoid; padding-block-start: 1rem !important; }
}