/* Replica support layer for the 1:1 jiuhong-machinery.com theme.
   Loaded AFTER the original theme CSS; adds only what the self-hosted rebuild needs
   (static icons, accessibility, form states, attribution badge). No visual redesign. */

/* <iconify-icon> host defaults (mirrors iconify-icon 1.0.7 :host rules). */
iconify-icon { display: inline-block; vertical-align: 0; width: 1em; height: 1em; line-height: 1; }
iconify-icon svg { display: block; width: 1em; height: 1em; }

/* Visually hidden but available to screen readers / crawlers. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Keyboard focus visibility (theme has none). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible { outline: 2px solid #FADB14; outline-offset: 2px; }

/* Inner-page banner image: keep the original auto height (width/height attributes are
   only there to reserve space and prevent layout shift). */
.aboutbanner_img img { height: auto; }

/* Inner-page banner title: the original theme renders it as <p>; the replica uses
   <h1> (one H1 per page for SEO) styled exactly like the original <p>. */
.i_about_text > h1 { font-size: inherit; font-weight: normal; line-height: inherit; margin: 0; }
@media screen and (max-width:1440px) { .i_about_text > h1 { font-size: 30px; } }
@media screen and (max-width:1024px) { .i_about_text > h1 { font-size: 24px; } }
@media screen and (max-width:767px)  { .i_about_text > h1 { font-size: 20px; } }
@media screen and (max-width:560px)  { .i_about_text > h1 { font-size: 18px; } }

/* Form submit failure message (WPForms-style). */
div.wpforms-container-full .wpforms-error-container {
  color: #990000; font-size: 14px; line-height: 1.5; margin: 8px 0;
}
.wpforms-submit[disabled] { opacity: .7; cursor: wait; }
.cf-turnstile { margin: 8px 0; }

/* Platform attribution badge — blends into the yellow copyright bar. */
.site-badge { text-align: center; padding: 0 1rem 10px; font-size: 12px; line-height: 1; }
.site-badge a { color: #333; opacity: .6; text-decoration: none; transition: opacity .2s ease; }
.site-badge a:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* ---- Machine detail page (/{slug}/) ------------------------------------------------
   The product title is the page's only <h1>, so the inquiry popup title and the
   "Introduction" / "Related products" labels are rendered as <h2> (heading outline)
   with exactly the original <h1>/<p> declarations, including the theme breakpoints. */
#aside_sc_from1 .tit h2 { font-size: 26px; color: #333; text-align: center; text-transform: uppercase; font-weight: bold; line-height: 30px; }
.Introduction_left > h2,
.Introduction_lefts > h2 { font-size: 20px; padding: 15px 35px; background-color: var(--i_color); border-radius: 0 30px 0 0; text-transform: uppercase; font-weight: bolder; }
@media screen and (max-width:1440px) { .Introduction_left > h2 { font-size: 16px; padding: 15px 25px; } }
@media screen and (max-width:970px)  { .Introduction_lefts > h2 { font-size: 16px; padding: 10px 20px; } }
@media screen and (max-width:680px)  { .Introduction_left > h2 { font-size: 15px; padding: 10px 25px; } }

/* ---- About page (/about-us/) ------------------------------------------------------
   The banner label is the page's only <h1>, so the lower "Contact us" title is an <h2>
   carrying exactly the original `.contact_us h1` declarations (incl. breakpoints) and
   none of the decorative `.contact_us h2` underline-bar rules. */
.contact_us h2.contact_us_title { margin: 0 0 10px; width: auto; height: auto; background-color: transparent; text-align: center; font-weight: bolder; font-size: 40px; }
@media screen and (max-width:960px) { .contact_us h2.contact_us_title { font-size: 30px; } }
@media screen and (max-width:767px) { .contact_us h2.contact_us_title { font-size: 24px; } }
/* Keyboard focus for the "Our advantage" tabs (made focusable by replica-about.js). */
.about_advantage_right li:focus-visible { outline: 2px solid #222; outline-offset: -4px; }
/* /privacy/: the policy title is the page's only <h1> (the original printed an <h2>); it gets
   exactly the original `.privacy_cont .tit h2` declarations (style.css + public.css; no
   breakpoints). Every other rule reaching it (the h1-h6 resets) is shared by both tags. */
.privacy_cont .tit h1 { font-size: 24px; text-align: center; font-weight: bold; }
/* /tag/<slug>/: the tag name is the page's only <h1>, in the slot where the original tag
   template printed a <span> under the "TAG" title; it gets exactly the `.m_title span`
   declarations (style.css, no breakpoint overrides). Margin/padding/weight resets for h1 come
   from public.css, as for the original span. */
.m_title > h1 { font-size: 18px; line-height: 70px; }

/* Owner decision 2026-10-21 ('悬停改深色字'): the original product-detail buttons
   (.single_right_btn a:hover in style.css) put white text on the yellow --i_color
   (#FADB14), a 1.38:1 contrast. Only the hover text colour changes, to the buttons'
   own resting colour #222 (about 11.5:1 on #FADB14); background, border, size and
   transition stay exactly as in the original theme. */
.single_right_btn a:hover { color: #222; }