/* Julong shared site components: header, CTAs, footer marks, and anchor offsets. */
:root { --jl-header-h: 5rem; }

/* Component defaults belong to the shared shell, not to a route's body class.
   Keep the reset local so legacy article/product content retains its own styles.
   Zero specificity lets each component's layout and state rules take precedence. */
:where(.jl-header,.jl-footer,.jli-dialog),
:where(.jl-header,.jl-footer,.jli-dialog) *,
:where(.jl-header,.jl-footer,.jli-dialog) *::before,
:where(.jl-header,.jl-footer,.jli-dialog) *::after {
  box-sizing:border-box;
  border-width:0;
  border-style:solid;
  border-color:var(--jl-gray-200,#e5e7eb);
}
:where(.jl-header,.jl-footer,.jli-dialog) {
  font-family:var(--jl-font-body,sans-serif);
  font-size:1rem;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
:where(.jl-header,.jl-footer,.jli-dialog) :where(h1,h2,h3,h4,h5,h6) {
  margin:0;
  font-family:var(--jl-font-heading,sans-serif);
  font-size:inherit;
  font-weight:inherit;
  text-transform:uppercase;
}
:where(.jl-header,.jl-footer,.jli-dialog) :where(p,figure,blockquote,dl,dd,pre) { margin:0; }
:where(.jl-header,.jl-footer,.jli-dialog) :where(ol,ul,menu) { margin:0; padding:0; list-style:none; }
:where(.jl-header,.jl-footer,.jli-dialog) a { color:inherit; text-decoration:none; }
:where(.jl-header,.jl-footer,.jli-dialog) :where(button,input,optgroup,select,textarea) {
  margin:0; padding:0; font-family:inherit; font-size:100%; font-weight:inherit; line-height:inherit; color:inherit;
}
:where(.jl-header,.jl-footer,.jli-dialog) :where(button,select) { text-transform:none; }
:where(.jl-header,.jl-footer,.jli-dialog) :where(button,[type='button'],[type='reset'],[type='submit']) {
  -webkit-appearance:button; background-color:transparent; background-image:none; cursor:pointer;
}
:where(.jl-header,.jl-footer,.jli-dialog) :where(img,svg,video,canvas,iframe) { display:block; vertical-align:middle; }
:where(.jl-header,.jl-footer,.jli-dialog) :where(img,video) { max-width:100%; height:auto; }

/* Shared navigation CTAs must not inherit homepage-only sizing modifiers. */
.jl-header .btn-dynamic { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.75rem 1.25rem; font-size:.875rem; font-weight:600; letter-spacing:.05em; line-height:1.5; text-transform:none; }
.jl-header .btn-dynamic--sm { padding:.75rem 1.25rem; }
.jl-header .btn-dynamic--block { width:100%; }
.jl-header .btn-dynamic-inner { font-weight:600; letter-spacing:.05em; }
.jl-header .btn-dynamic--text-sm { font-size:.875rem; line-height:1.25rem; }
.jl-header__quote { line-height:0; }

/* The shared header stays fixed across all WordPress templates. */
.jl-header { box-sizing:border-box; position:fixed; top:0; left:0; z-index:100; width:100%; height:calc(var(--jl-header-h) + 1px); }
.jl-header__bar { box-sizing:border-box; height:var(--jl-header-h); }
body:not(.home) { padding-top:calc(var(--jl-header-h) + 1px); }
body.admin-bar:not(.home) { padding-top:calc(var(--jl-header-h) + 33px); }
.admin-bar .jl-header { top:32px; }
.jl-header--solid { background:var(--jl-white,#fff); border-bottom:1px solid var(--jl-gray-200,#e5e7eb); box-shadow:0 1px 3px rgb(0 0 0 / .08); }
@media(max-width:767px) { .jl-header__logo { height:24px; } }
/* Outrank the legacy non-homepage selector during cache rollover. */
body:not(.home) .jl-header--solid { position:fixed; background:var(--jl-white,#fff); border-bottom-color:var(--jl-gray-200,#e5e7eb); box-shadow:0 1px 3px rgb(0 0 0 / .08); }
.jl-header--solid .jl-nav-link,
.jl-header--solid .jl-nav-link:hover,
body:not(.home) .jl-header--solid .jl-nav-link { color:var(--jl-dark,#1a1a1a); }
.jl-header--solid .jl-nav-link:hover, body:not(.home) .jl-header--solid .jl-nav-link:hover { color:var(--jl-blue,#007bfa); }
.jl-header--overlay .jl-nav-link { color:#fff; }
.jl-header--overlay .jl-nav-link:hover { color:rgb(255 255 255 / .72); }
.jl-header--overlay.is-scrolled,
body.jl-nav-open .jl-header--overlay { background:var(--jl-white,#fff); border-bottom-color:var(--jl-gray-200,#e5e7eb); box-shadow:0 1px 3px rgb(0 0 0 / .08); }
.jl-header--overlay.is-scrolled .jl-nav-link,
body.jl-nav-open .jl-header--overlay .jl-nav-link { color:var(--jl-dark,#1a1a1a); }
.jl-header--overlay.is-scrolled .jl-nav-link:hover,
body.jl-nav-open .jl-header--overlay .jl-nav-link:hover { color:var(--jl-blue,#007bfa); }
body.admin-bar:not(.home) .jl-header { top:32px; }
section[id], main[id], [id].jli-section { scroll-margin-top:calc(var(--jl-header-h) + 1rem); }

/* CTA motion retains Julong's skew-to-square interaction. */
:where(.btn-dynamic,.jli-button) { transform:skewX(-10deg); transform-origin:center; transition:transform var(--jl-button-motion,.3s cubic-bezier(.4,0,.2,1)),background-color var(--jl-button-motion,.3s cubic-bezier(.4,0,.2,1)),color var(--jl-button-motion,.3s cubic-bezier(.4,0,.2,1)),border-color var(--jl-button-motion,.3s cubic-bezier(.4,0,.2,1)); }
:where(.btn-dynamic-inner,.jli-button span) { display:inline-block; transform:skewX(10deg); transition:transform var(--jl-button-motion,.3s cubic-bezier(.4,0,.2,1)); }
:where(.btn-dynamic:hover,.jli-button:hover) { transform:skewX(0); }
:where(.btn-dynamic:hover .btn-dynamic-inner,.jli-button:hover span) { transform:skewX(0); }
#cooperation .btn-dynamic, #cooperation .btn-dynamic-inner,
#cooperation .btn-dynamic:hover, #cooperation .btn-dynamic:hover .btn-dynamic-inner { transform:none; }
.jli-button:hover { background:var(--jl-button-hover-bg,var(--jl-dark,#1a1a1a)); border-color:var(--jl-button-hover-bg,var(--jl-dark,#1a1a1a)); }
.btn-primary:hover { background:var(--jl-button-hover-bg,var(--jl-dark,#1a1a1a)); }
.btn-outline:hover { background:var(--jl-button-hover-bg,var(--jl-dark,#1a1a1a)); border-color:var(--jl-button-hover-bg,var(--jl-dark,#1a1a1a)); color:#fff; }
.jli-form .jli-submit:hover { background:var(--jl-button-hover-bg,var(--jl-dark,#1a1a1a)); }

/* Certification marks are reversed only inside the shared dark footer. */
.jl-footer__cert { filter:brightness(0) invert(1); opacity:.72; transition:opacity .2s ease; }
.jl-footer__cert:hover { opacity:1; }

/* A compact fallback used both by the 404 route and unavailable product routes. */
.jl-not-found { min-height:min(70vh,720px); padding:5rem 1.5rem; display:grid; place-items:center; text-align:center; background:#f7f9fc; color:var(--jl-dark,#1a1a1a); }
.jl-not-found__content { max-width:38rem; }
.jl-not-found__code { margin:0; color:var(--jl-blue,#007bfa); font-size:clamp(4rem,10vw,7rem); font-weight:800; line-height:1; }
.jl-not-found h1 { margin:1rem 0; font-size:clamp(1.75rem,4vw,2.5rem); }
.jl-not-found__content > p:not(.jl-not-found__code) { margin:0 0 2rem; color:var(--jl-secondary,#54595f); line-height:1.7; }

@media (max-width:782px) {
  body.admin-bar:not(.home) { padding-top:calc(var(--jl-header-h) + 47px); }
  .admin-bar .jl-header { top:46px; }
}
@media (prefers-reduced-motion:reduce) {
  :where(.btn-dynamic,.btn-dynamic-inner,.jli-button,.jli-button span) { transition:none!important; }
}
/* Shared scroll reveal used on inner pages; matches the homepage's upward fade. */
.jl-scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
}

.jl-scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .jl-scroll-reveal,
  .jl-scroll-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Clarity's Shadow DOM inherits these native brand-color variables from its host. */
#ads-agent-host {
  --accent:var(--jl-blue,#007bfa)!important;
  --accent-dark:var(--jl-blue,#007bfa)!important;
}

/* Shared dimensions keep the AI launcher and back-to-top control aligned. */
:root {
  --jl-floating-size:52px;
  --jl-floating-edge:24px;
  --jl-floating-gap:12px;
}
.gb-back-to-top {
  width:var(--jl-floating-size);
  height:var(--jl-floating-size);
  right:var(--jl-floating-edge);
  bottom:calc(var(--jl-floating-edge) + env(safe-area-inset-bottom,0px));
}
@media (max-width:767px) {
  :root {
    --jl-floating-size:46px;
    --jl-floating-edge:16px;
    --jl-floating-gap:10px;
  }
}
/* Legacy products use GeneratePress article markup rather than the jpd template.
   Constrain media to its actual column instead of hiding page overflow. */
body.single-products:not(.julong-product-detail) #primary,
body.single-products:not(.julong-product-detail) #main .inside-article {
  min-width: 0;
}
body.single-products:not(.julong-product-detail) #main .inside-article {
  overflow-wrap: anywhere;
}
body.single-products:not(.julong-product-detail) #main .featured-image,
body.single-products:not(.julong-product-detail) #main .entry-content figure {
  max-width: 100%;
}
body.single-products:not(.julong-product-detail) #main .inside-article img {
  max-width: 100%;
  height: auto;
}