/* =====================================================================
   Rejin CNC — brand lockup (header / footer logo) + footer contact list
   -------------------------------------------------------------------------
   Two behavioural fixes came with the move out of the retired brand plugin:
   1. The wordmark used to be painted in by CSS `::after { content: "..." }`,
      so it never existed in the HTML source. It is now a real
      <span class="rjn-wordmark"> rendered by header.php / footer.php.
   2. Footer contact icons used `li:nth-child(N)`, which shifted whenever an
      optional field (phone / whatsapp) was blank in the settings page. Each
      row now carries its own inline SVG (.rj-contact-ic).
   ===================================================================== */

/* ---------- 1. Desktop / offcanvas header logo ---------- */

.navbar-2-logo a,
.navbar-brand a,
.site-logo a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  line-height: 1 !important;
}

.navbar-2-logo a img,
.navbar-brand a img,
.site-logo a img {
  height: 42px !important;
  width: auto !important;
  display: block !important;
  margin: 0 !important;
}

.rjn-wordmark {
  color: #0F2749;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  line-height: 1;
  white-space: nowrap;
}

/* Tighten logo-to-nav gap */
.navbar-2-logo {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.navbar-2-left {
  display: flex !important;
  align-items: center !important;
}

.navbar-2-left .navbar-2-logo {
  margin-right: 24px !important;
}

@media (max-width: 768px) {
  .navbar-2-logo a img { height: 32px !important; }
  .rjn-wordmark { font-size: 17px; }
}

/* ---------- 2. Landing-page logo (.brand) ---------- */

a.brand,
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
}

a.brand img.brand-logo,
.brand img.brand-logo {
  height: 42px !important;
  width: 42px !important;
  flex-shrink: 0 !important;
  display: block !important;
  object-fit: contain !important;
}

/* ---------- 3. Second landing page: .logo h2 (text only) ---------- */

div.logo,
.logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

div.logo::before,
.logo::before {
  content: "" !important;
  display: inline-block !important;
  width: 42px !important;
  height: 42px !important;
  background: url('/wp-content/uploads/2026/01/logo1.png') no-repeat center/contain !important;
  flex-shrink: 0 !important;
}

div.logo h2,
.logo h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0F2749 !important;
  margin: 0 !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}

/* ---------- 4. Footer logo ---------- */

a.rj-footer-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  background: #FFFFFF !important;
  padding: 12px 22px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15) !important;
}

.rj-footer-logo,
img.rj-footer-logo,
footer img.rj-footer-logo {
  height: 40px !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.rjn-wordmark--footer {
  color: #0F2749;
  font-size: 22px;
}

/* ---------- 5. Footer contact list ---------- */

.rj-footer-contact-list {
  text-align: left !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Theme ul>li defaults inflate the gaps — kill them here */
.rj-footer-contact-list > li {
  margin: 0 !important;
  padding: 0 !important;
}

.rj-footer-contact-list .rj-contact-item {
  margin: 0 !important;
  border-radius: 6px !important;
  transition: background .2s;
}

.rj-footer-contact-list .rj-contact-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 8px 8px 0 !important;
  flex-wrap: nowrap !important;
  text-align: left !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
  transition: color .2s ease, padding-left .2s ease, background .2s ease;
}

/* Inline icon — one per row, replaces the old :nth-child() rules */
.rj-contact-ic {
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  color: #8FA8D0;
  opacity: 0.9;
  line-height: 0;
  margin-top: 0 !important;
  transition: color .2s ease;
}

.rj-contact-ic svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
}

/* Icon + (label / value) on ONE line per contact item */
.rj-footer-contact-list .rj-contact-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.rj-footer-contact-list .rj-contact-value {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  /* Address must show in full: wrap instead of ellipsis-truncating. */
  white-space: normal !important;
  margin: 0 !important;
  overflow: visible !important;
  max-width: 100% !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #EAF1FA !important;
}

/* Address segments flow inline; wrapped lines hang-indent under the value
   (the value is its own flex item, so continuation lines align to its left
   edge, not the icon). Comma+space is baked into the HTML so the text stays
   correct even if this CSS fails to load. */
.rj-addr-line {
  display: inline !important;
}

/* Hover = homepage landing style, applied globally (user request):
   no background, 4px slide, blue text. Selectors mirror rejin-cnc-lp/style.css */
.rj-footer-v6 .rj-footer-contact a:hover,
.rj-footer-v6 .rj-footer-contact li:hover,
.rj-footer-v6 .get-in-touch a:hover,
.rj-footer-v6 .get-in-touch li:hover,
.rj-footer-v6 [class*="contact"] a:hover,
.rj-footer-v6 [class*="contact"] li:hover {
  background: transparent !important;
  color: #60a5fa !important;
  padding-left: 4px !important;
}

/* Hover: value + icon follow the site-wide footer hover blue (#60a5fa) */
.rj-footer-contact-list .rj-contact-item:hover .rj-contact-value,
.rj-footer-contact-list .rj-contact-item:hover .rj-contact-ic {
  color: #60a5fa !important;
}

.rj-footer-contact-list .rj-contact-item:hover .rj-contact-ic {
  opacity: 1 !important;
}

/* Unified footer hover — EVERY link behaves like the contact rows:
   blue text (#60a5fa) + 4px right slide, no background change.
   Covers the Services / Company menu links and the bottom legal links. */
.rj-footer-v6 .rj-footer-list a,
.rj-footer-v6 .rj-legal-links a {
  transition: color .2s ease, padding-left .2s ease, background .2s ease;
}

.rj-footer-v6 .rj-footer-list a:hover,
.rj-footer-v6 .rj-legal-links a:hover {
  color: #60a5fa !important;
  padding-left: 4px !important;
  background: transparent !important;
}

/* Social icons: same blue + slide, circle background kept */
.rj-footer-v6 .rj-social-link {
  transition: color .2s ease, transform .2s ease, background .2s ease;
}

.rj-footer-v6 .rj-social-link:hover {
  color: #60a5fa !important;
  transform: translateX(4px);
}

/* ---------- 6. FAQ nav link highlight ---------- */

body.rjn-faq-page .navbar-nav a[href*="/faq"],
body.rjn-faq-page .main-menu a[href*="/faq"],
body.rjn-faq-page nav a[href*="/faq"] {
  color: #3D6BFF !important;
  font-weight: 600 !important;
}

/* ============================================================
   7. FLOATING SIDE CONTACT (ported from myway-it reference site)
   Circular 52px buttons + hide toggle, edge-docked right.
   Icons are inline SVG (Font Awesome Free 6.5.1 paths) — the site
   does not load Font Awesome, so no icon-font dependency.
   ============================================================ */

/* Vertical position — deliberately HIGHER than the reference's 50%, with two
   hard constraints solved by one clamp():
   1) top >= 222px  -> clears the 206px fixed header (search box / nav) so the
      buttons never sit on top of header controls;
   2) top <= 100% - 858px (238px stack + 620px clearance) -> keeps the stack
      bottom at least 620px above the viewport bottom, so a bottom-right chat
      popup ~560px tall (e.g. Xunpan Cloud) can never overlap these buttons.
   On short viewports the header constraint wins (top = 222px). */
:root {
  --rjn-side-top: clamp(222px, calc(100% - 858px), calc(100% - 254px));
}

.rjn-side-contact {
  position: fixed;
  right: 14px;
  top: var(--rjn-side-top);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.35s ease;
}

.rjn-side-item {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #1d4ed8, #1638a8);
  color: #fff;
  text-decoration: none;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(13, 47, 168, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  will-change: transform;
}

.rjn-side-item svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}

.rjn-side-item:hover {
  background: #1638a8;
  color: #fff;
  text-decoration: none;
  transform: scale(1.1);
  box-shadow: 0 8px 22px rgba(13, 47, 168, 0.45);
}

.rjn-side-green { background: linear-gradient(145deg, #2fe071, #1fb857); box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4); }
.rjn-side-green:hover { background: #1fb857; box-shadow: 0 8px 22px rgba(37, 211, 102, 0.5); }
.rjn-side-red { background: linear-gradient(145deg, #ef4444, #d21f1f); box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4); }
.rjn-side-red:hover { background: #d21f1f; box-shadow: 0 8px 22px rgba(220, 38, 38, 0.5); }

/* Hover text tip — slides out to the LEFT (colored card matching its button) */
.rjn-side-tip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: linear-gradient(145deg, #0a4cb0, #003a8c);
  color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(13, 47, 168, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.rjn-side-tip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid #003a8c;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.rjn-side-item:hover .rjn-side-tip,
.rjn-side-item:focus-visible .rjn-side-tip,
.rjn-side-hide-btn:hover .rjn-side-tip,
.rjn-side-hide-btn:focus-visible .rjn-side-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.rjn-side-tip-green { background: #1fb857; }
.rjn-side-tip-green::after { border-left-color: #1fb857; }
.rjn-side-tip-red { background: #d21f1f; }
.rjn-side-tip-red::after { border-left-color: #d21f1f; }
.rjn-side-tip-blue { background: #003a8c; }
.rjn-side-tip-blue::after { border-left-color: #003a8c; }

/* Back-to-top reuses the same tip reveal pattern */
.rjn-back-to-top .rjn-side-tip {
  right: calc(100% + 14px);
  transform: translateY(-50%) translateX(8px);
}

.rjn-back-to-top:hover .rjn-side-tip,
.rjn-back-to-top:focus-visible .rjn-side-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Manual hide toggle — same blue as the other buttons */
.rjn-side-hide-btn {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #1d4ed8, #1638a8);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 14px rgba(13, 47, 168, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.rjn-side-hide-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
  /* Gentle periodic nudge: draws the eye to the hide control and hints
     "collapses to the right" without any text. */
  animation: rjn-hide-nudge 2.6s ease-in-out infinite;
}

@keyframes rjn-hide-nudge {
  0%, 70% { transform: translateX(0); }
  80%     { transform: translateX(4px); }
  90%     { transform: translateX(-1px); }
  100%    { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .rjn-side-hide-btn svg { animation: none; }
}

.rjn-side-hide-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 22px rgba(13, 47, 168, 0.45);
}

/* Hidden state (user clicked the hide button): bar slides fully off-screen
   right; the small show tab at the edge brings it back. */
.rjn-side-contact.rjn-side-hidden {
  transform: translateX(calc(100% + 80px));
}

/* While hidden, kill any stuck tooltip (the hide button was hovered/focused
   when clicked — without this, its tip stays pinned at the right edge). */
.rjn-side-contact.rjn-side-hidden .rjn-side-tip {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Floating show tab — appears at the right edge only when the bar is hidden.
   Also auto-revealed by JS when the mouse nears the right edge.
   Vertically centered on the side-contact column (tab 88px, stack 238px). */
.rjn-side-show-btn {
  position: fixed;
  right: 0;
  top: calc(var(--rjn-side-top) + 75px);
  transform: translateX(100%);
  width: 26px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #1d4ed8;
  border: 1.5px solid #dbe3ef;
  border-right: none;
  border-radius: 12px 0 0 12px;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  box-shadow: -3px 4px 16px rgba(15, 23, 42, 0.12);
  transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
  z-index: 9999;
}

.rjn-side-show-btn svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  display: block;
  /* Mirror of the hide-arrow nudge: hints "expands from the right". */
  animation: rjn-show-nudge 2.6s ease-in-out infinite;
}

@keyframes rjn-show-nudge {
  0%, 70% { transform: translateX(0); }
  80%     { transform: translateX(-4px); }
  90%     { transform: translateX(1px); }
  100%    { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .rjn-side-show-btn svg { animation: none; }
}

.rjn-side-show-btn.visible,
.rjn-side-show-btn.peek {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.rjn-side-show-btn:hover { background: #f1f5f9; }

/* ===== BACK TO TOP (standalone fixed button, bottom-right) =====
   It is NO LONGER part of the .rjn-side-contact flex column. It lives at the
   very bottom-right, directly BELOW the Xunpan "Chat with us" launcher
   (#xhl-launch-button-div, which is nudged up to bottom:84px so the two do
   not collide). It fades in after scrolling 400px (.visible, toggled by the
   footer JS). When the Xunpan chat dialog opens, the footer's MutationObserver
   adds .rjn-btt-chatopen so it slides LEFT of the 350x450 panel instead of
   being covered. */
.rjn-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #0a4cb0, #003a8c);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(120px);
  box-shadow: 0 4px 14px rgba(0, 58, 140, 0.35);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, right 0.3s ease;
  z-index: 2147483640;
}

/* While the Xunpan chat dialog (#xhl-container) is open it covers the whole
   bottom-right corner, so slide Back-to-Top LEFT of the 350px-wide panel. */
.rjn-back-to-top.rjn-btt-chatopen {
  right: 420px !important;
}

.rjn-back-to-top svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}

.rjn-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.rjn-back-to-top:hover {
  background: #003a8c;
  transform: scale(1.1);
  box-shadow: 0 8px 22px rgba(0, 58, 140, 0.45);
}

/* Nudge the Xunpan "Chat with us" launcher UP so the standalone Back-to-Top
   button can sit directly below it without colliding. The launcher positions
   itself via its own stylesheet (bottom:55px), so an id-level !important
   override wins. */
#xhl-launch-button-div {
  bottom: 84px !important;
}

/* Small screens: keep the reference look, slightly tighter edge offset */
@media (max-width: 575px) {
  .rjn-side-contact { right: 10px; }
}