/*
Theme Name: WeLink Solutions
Theme URI: https://welinksolutions.com
Author: WeLink Solutions
Author URI: https://welinksolutions.com
Description: A lightweight, Elementor-ready theme for WeLink Global Solutions, with Customizer controls for logo, menu position, contact details and footer, and Elementor Pro Theme Builder support. Provides the site header (topbar, navigation with a Services dropdown, language toggle), footer (newsletter, links, WhatsApp/WeChat buttons), and hands page content over to Elementor. Pair with the "WeLink Elementor Widgets" plugin.
Version: 1.2.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: welink-theme
*/

:root{
  --welink-ink:        #0D1B30;
  --welink-paper:      #EFEDE9;
  --welink-white:      #FFFFFF;
  --welink-red:        #E30613;
  --welink-red-deep:   #B30510;
  --welink-red-pale:   #FF9C9C;
  --welink-text-ink:        #0D1B30;
  --welink-text-muted:      #5B6270;
  --welink-text-on-ink:     #F4F3F0;
  --welink-text-on-ink-mut: #A7ADBD;
  --welink-line-light: rgba(13,27,48,0.13);
  --welink-line-dark:  rgba(244,243,240,0.16);
  --welink-line-dark-soft: rgba(244,243,240,0.08);
  --welink-ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color:var(--welink-text-ink); background:#fff; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }
.welink-container{ max-width:1180px; margin:0 auto; padding:0 clamp(1.5rem,5vw,4rem); }

/* ---------- top utility bar ---------- */
.welink-topbar{ background:var(--welink-ink); border-bottom:1px solid var(--welink-line-dark-soft); font-size:.82rem; }
.welink-topbar-inner{ display:flex; align-items:center; justify-content:space-between; height:40px; color:var(--welink-text-on-ink-mut); }
.welink-topbar-left, .welink-topbar-right{ display:flex; align-items:center; gap:1.6rem; }
.welink-topbar span{ display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; }
.welink-topbar svg{ width:14px; height:14px; flex-shrink:0; }
@media (max-width:820px){ .welink-topbar-left span:nth-child(2){ display:none; } }
@media (max-width:640px){ .welink-topbar{ display:none; } }

.welink-lang-toggle{ display:flex; align-items:center; gap:.3rem; position:relative; }
.welink-lang-toggle button{
  all:unset; cursor:pointer; font-size:.78rem; font-weight:700; padding:.25rem .6rem; border-radius:999px;
  color:var(--welink-text-on-ink-mut);
}
.welink-lang-toggle button.welink-active{ background:rgba(244,243,240,0.14); color:#fff; }
/* TranslatePress links share the same pill look as the buttons above */
.welink-lang-toggle a{
  cursor:pointer; font-size:.78rem; font-weight:700; line-height:1.2; padding:.25rem .6rem; border-radius:999px;
  color:var(--welink-text-on-ink-mut); text-decoration:none; transition:background .2s, color .2s;
}
.welink-lang-toggle a:hover{ color:#fff; background:rgba(244,243,240,0.08); }
.welink-lang-toggle a.welink-active{ background:rgba(244,243,240,0.14); color:#fff; }
.welink-lang-mobile{ display:none; }
@media (max-width:640px){
  .welink-lang-mobile{ display:flex; justify-content:center; margin-top:1.8rem; }
  .welink-lang-mobile a, .welink-lang-mobile button{ font-size:.9rem; padding:.4rem 1rem; }
}
.welink-lang-note{
  position:absolute; top:130%; right:0; background:#fff; color:var(--welink-text-ink); font-size:.78rem;
  padding:.5rem .8rem; border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.18); white-space:nowrap;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:.2s; z-index:200;
}
.welink-lang-note.welink-show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- header ---------- */
.welink-site-header{ position:sticky; top:0; z-index:100; background:var(--welink-ink); }
.welink-site-header .welink-inner{ display:flex; align-items:center; justify-content:space-between; height:var(--welink-header-h,82px); gap:1.5rem; }
.welink-brand-link{ display:inline-flex; align-items:center; }
.welink-brand-logo, .welink-brand-link img{ height:var(--welink-logo-h,26px); width:auto; max-width:none; display:block; }
@media (max-width:920px){ .welink-brand-logo, .welink-brand-link img{ height:var(--welink-logo-h-m,22px); } }
.welink-brand-link{ flex-shrink:0; }
.welink-nav{ display:flex; align-items:center; gap:2.1rem; }
.welink-nav a{ font-size:.94rem; color:var(--welink-text-on-ink-mut); text-decoration:none; position:relative; padding:.3rem 0; }
.welink-nav a:hover, .welink-nav .current-menu-item > a{ color:#fff; }
/* Contact Us button: white with black text, red with white text on hover.
   The CSS class can sit on the menu <li> or on the <a>, so both are covered. */
.welink-nav .welink-nav-cta, .welink-nav a.welink-nav-cta{ background:#fff; border:1px solid #fff; color:#000 !important; padding:.6rem 1.3rem !important; border-radius:999px; font-size:.88rem !important; font-weight:700; transition:background .2s, border-color .2s, color .2s; }
.welink-nav .welink-nav-cta > a, .welink-nav ul li.welink-nav-cta > a, .welink-nav a.welink-nav-cta{ color:#000 !important; padding:0 !important; font-size:.88rem !important; font-weight:700; }
.welink-nav a.welink-nav-cta{ padding:.6rem 1.3rem !important; }
.welink-nav .welink-nav-cta:hover, .welink-nav a.welink-nav-cta:hover{ background:var(--welink-red); border-color:var(--welink-red); color:#fff !important; }
.welink-nav .welink-nav-cta:hover > a, .welink-nav ul li.welink-nav-cta:hover > a, .welink-nav a.welink-nav-cta:hover{ color:#fff !important; }

.welink-nav-toggle{ display:none; background:none; border:0; width:34px; height:26px; position:relative; cursor:pointer; }
.welink-nav-toggle span, .welink-nav-toggle span::before, .welink-nav-toggle span::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:#fff; transition:transform .25s var(--welink-ease), opacity .2s;
}
.welink-nav-toggle span{ top:12px; }
.welink-nav-toggle span::before{ top:-9px; }
.welink-nav-toggle span::after{ top:9px; }
.welink-nav-toggle.welink-open span{ background:transparent; }
.welink-nav-toggle.welink-open span::before{ transform:translateY(9px) rotate(45deg); }
.welink-nav-toggle.welink-open span::after{ transform:translateY(-9px) rotate(-45deg); }

/* menu position (Appearance -> Customize -> WeLink Header & Logo) */
@media (min-width:921px){
  .welink-menu-right .welink-nav{ margin-left:auto; }
  .welink-menu-left .welink-nav{ margin-right:auto; margin-left:2.5rem; }
  .welink-menu-center .welink-nav{ margin-left:auto; margin-right:auto; }
  .welink-menu-center .welink-site-header .welink-inner{ position:relative; }
}
.welink-header-static .welink-site-header{ position:relative; }

/* dropdown (Services submenu) */
.welink-nav li.menu-item-has-children{ position:relative; }
.welink-nav .sub-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,8px); list-style:none; margin:0;
  background:#fff; min-width:250px; border-radius:14px; padding:.6rem;
  box-shadow:0 24px 60px rgba(13,27,48,0.18);
  opacity:0; visibility:hidden; transition:opacity .2s var(--welink-ease), transform .2s var(--welink-ease);
}
.welink-nav li.menu-item-has-children:hover .sub-menu,
.welink-nav li.menu-item-has-children.welink-hover-show .sub-menu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.welink-nav .sub-menu a{ display:block; padding:.7rem .9rem; border-radius:9px; color:var(--welink-text-ink) !important; font-size:.88rem; font-weight:600; }
.welink-nav .sub-menu a:hover{ background:var(--welink-paper); color:var(--welink-red) !important; }
/* The tap-to-toggle chevron button is only needed on mobile (no hover there).
   On desktop the dropdown already opens on hover, so this stays hidden to
   avoid showing an unstyled native button next to "Services". */
.welink-sub-toggle{ display:none; }
.welink-nav ul{ list-style:none; margin:0; padding:0; }
.welink-nav > ul{ display:flex; align-items:center; gap:2.1rem; }

@media (max-width:920px){
  .welink-nav{
    position:fixed; inset:var(--welink-header-h,82px) 0 0 0; background:var(--welink-ink); flex-direction:column; justify-content:flex-start;
    padding:2.2rem clamp(1.5rem,5vw,4rem); gap:0; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--welink-ease), transform .25s var(--welink-ease); overflow-y:auto;
  }
  .welink-nav.welink-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .welink-nav > ul{ flex-direction:column; align-items:center; gap:0; width:100%; }
  .welink-nav > ul > li{ width:100%; text-align:center; padding:1rem 0; border-bottom:1px solid var(--welink-line-dark-soft); }
  .welink-nav > ul > li > a{ font-size:1.1rem; }
  .welink-nav .sub-menu{
    position:static !important; left:auto !important; top:auto !important; transform:none !important;
    opacity:1; visibility:visible; box-shadow:none; background:transparent;
    padding:.4rem 0 0; width:100% !important; min-width:0 !important; max-width:100% !important;
    text-align:center; display:none;
  }
  .welink-nav li.menu-item-has-children.welink-sub-open .sub-menu{ display:block; }
  .welink-nav .sub-menu a{ color:var(--welink-text-on-ink-mut) !important; padding:.55rem 0; }
  .welink-sub-toggle{
    display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-left:.4rem;
    background:rgba(244,243,240,0.08); border-radius:50%; color:var(--welink-text-on-ink-mut); border:0; cursor:pointer; vertical-align:middle;
  }
  .welink-nav-toggle{ display:block; }
}

/* ---------- floating action buttons ---------- */
.welink-fab-stack{ position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:14px; z-index:9000; }
.welink-fab{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.28); cursor:pointer; border:0; color:#fff; text-decoration:none;
}
.welink-fab svg{ width:26px; height:26px; }
.welink-fab-wechat-wrap{ position:relative; }
.welink-fab-wechat{ background:#07C160; }
.welink-fab-whatsapp{ background:#25D366; }
.welink-wechat-popover{
  position:absolute; right:0; bottom:calc(100% + 14px); background:#fff; padding:1.1rem 1.3rem; border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.22); font-size:.86rem; width:200px; display:none; z-index:9002; color:var(--welink-text-ink);
}
.welink-fab-wechat-wrap:hover .welink-wechat-popover,
.welink-fab-wechat-wrap.welink-hover-show .welink-wechat-popover{ display:block; }
.welink-wechat-popover strong{ display:block; margin-top:.3rem; color:var(--welink-red); }

/* ---------- preloader ---------- */
#welink-preloader{
  position:fixed; inset:0; z-index:99999; background:var(--welink-ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
  animation:welink-preloader-failsafe .5s ease 4s forwards; /* never block the site if JS fails */
}
@keyframes welink-preloader-failsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
#welink-preloader.welink-loaded{ opacity:0; visibility:hidden; pointer-events:none; }
#welink-preloader img{ width:84px; height:84px; animation:welink-pulse 1.1s ease-in-out infinite; }
@keyframes welink-pulse{
  0%, 100% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.15); opacity:.75; }
}

/* ---------- footer ---------- */
.welink-site-footer{ background:var(--welink-ink); color:var(--welink-text-on-ink-mut); padding:3.5rem 0 2rem; }
.welink-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--welink-line-dark-soft); }
.welink-footer-brand p{ font-size:.92rem; max-width:32ch; margin:1rem 0 1.2rem; }
.welink-footer-col h4{ color:#fff; font-size:.86rem; margin:0 0 1rem; }
.welink-footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.welink-footer-col a{ font-size:.92rem; text-decoration:none; }
.welink-footer-col a:hover{ color:#fff; }
.welink-footer-bottom{ display:flex; justify-content:space-between; padding-top:1.6rem; font-size:.82rem; flex-wrap:wrap; gap:.6rem; }
.welink-newsletter{ max-width:360px; }
.welink-footer-legal ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; }
.welink-footer-legal a{ text-decoration:none; }
.welink-footer-legal a:hover{ color:#fff; }
.welink-newsletter input{ flex:1; padding:.75rem 1rem; border:1px solid var(--welink-line-dark); background:transparent; color:#fff; border-radius:2px; font-size:.9rem; }
.welink-newsletter button{ border:1px solid var(--welink-red); background:var(--welink-red); color:#fff; padding:.75rem 1.1rem; border-radius:2px; font-weight:600; font-size:.88rem; cursor:pointer; white-space:nowrap; }
.welink-newsletter-note{ font-size:.8rem; color:var(--welink-red-pale); margin-top:.5rem; display:none; }
.welink-newsletter-note.welink-show{ display:block; }
@media (max-width:820px){ .welink-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .welink-footer-grid{ grid-template-columns:1fr; } }

/* ---------- page content wrapper ---------- */
.welink-page-content{ min-height:40vh; }
.welink-page-content .elementor{ margin:0; }

/* ---------- blog listing (index.php / archives) ---------- */
.welink-blog-wrap{ max-width:1180px; margin:0 auto; padding:3rem clamp(1.5rem,5vw,4rem) 5rem; }
.welink-blog-header{ margin-bottom:2rem; }
.welink-blog-header h1{ font-size:2rem; margin:0 0 .5rem; }
.welink-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.welink-blog-card{ background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 18px rgba(13,27,48,0.06); border:1px solid var(--welink-line-light); text-decoration:none; color:inherit; display:block; }
.welink-blog-card img{ width:100%; height:190px; object-fit:cover; display:block; }
.welink-blog-card-body{ padding:1.6rem; }
.welink-blog-card .welink-cat{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--welink-red); }
.welink-blog-card h3{ font-size:1.05rem; margin:.6rem 0; }
.welink-blog-card p{ font-size:.88rem; color:var(--welink-text-muted); }
@media (max-width:900px){ .welink-blog-grid{ grid-template-columns:1fr; } }

/* ============ Blog layout (listing + single post + sidebar) ============ */
.welink-blog-layout{
  display:grid; grid-template-columns:1fr 340px; gap:2.4rem; align-items:start;
}
.welink-blog-main{ min-width:0; }

/* -- listing rows -- */
.welink-blog-list{ display:flex; flex-direction:column; gap:1.6rem; margin-top:1.6rem; }
.welink-blog-row{
  display:grid; grid-template-columns:220px 1fr; gap:1.3rem;
  padding-bottom:1.6rem; border-bottom:1px solid var(--welink-line-light);
}
.welink-blog-row__thumb{
  display:block; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--welink-paper);
}
.welink-blog-row__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.welink-blog-row__body{ position:relative; min-width:0; }
.welink-blog-row__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem;
  font-size:.78rem; color:var(--welink-text-muted); margin-bottom:.5rem;
}
.welink-blog-row__brand{ display:inline-flex; align-items:center; gap:.35rem; font-weight:600; }
.welink-blog-row__brand img{ border-radius:3px; }
.welink-blog-row__dot{ opacity:.5; }
.welink-blog-row__cat{ color:var(--welink-red); font-weight:600; }
.welink-blog-row__title{ margin:0 0 .5rem; font-size:1.18rem; line-height:1.35; }
.welink-blog-row__title a{ color:var(--welink-text-ink); text-decoration:none; }
.welink-blog-row__title a:hover{ color:var(--welink-red); }
.welink-blog-row__excerpt{ margin:0; color:var(--welink-text-muted); font-size:.94rem; line-height:1.6; }
.welink-blog-row__share{
  position:absolute; right:0; bottom:0; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--welink-line-light); background:#fff; color:var(--welink-text-ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s var(--welink-ease), color .2s var(--welink-ease);
}
.welink-blog-row__share:hover{ background:var(--welink-red); color:#fff; border-color:var(--welink-red); }

/* -- sidebar shell -- */
.welink-blog-sidebar{ display:flex; flex-direction:column; gap:1.6rem; }
.welink-sidebar-widget{
  background:#fff; border:1px solid var(--welink-line-light); border-radius:14px; padding:1.4rem;
}
.welink-sidebar-widget__title{ margin:0 0 1rem; font-size:1.02rem; }

/* -- single post -- */
.welink-post-banner{ width:100%; max-height:420px; overflow:hidden; }
.welink-post-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.welink-post-main{ max-width:none; }
.welink-toc{
  background:var(--welink-paper); border-radius:12px; padding:1.2rem 1.4rem; margin-bottom:1.8rem;
}
.welink-toc__title{ margin:0 0 .6rem; font-weight:700; font-size:.92rem; }
.welink-toc__list{ margin:0; padding-left:1.1rem; }
.welink-toc__item{ margin-bottom:.35rem; font-size:.9rem; }
.welink-toc__item--h3{ margin-left:1rem; list-style-type:circle; }
.welink-toc__list a{ color:var(--welink-text-ink); text-decoration:none; }
.welink-toc__list a:hover{ color:var(--welink-red); }
.welink-article-body h2{ margin-top:2.2rem; }
.welink-article-body h3{ margin-top:1.6rem; }
.welink-article-body img{ max-width:100%; height:auto; border-radius:10px; }

@media (max-width:960px){
  .welink-blog-layout{ grid-template-columns:1fr; }
  .welink-blog-row{ grid-template-columns:140px 1fr; }
}
@media (max-width:560px){
  .welink-blog-row{ grid-template-columns:1fr; }
  .welink-blog-row__thumb{ aspect-ratio:16/9; }
}


/* ---------- accessibility helpers ---------- */
.screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal !important; }
.skip-link:focus{ background:#fff; color:var(--welink-ink); clip:auto; clip-path:none; height:auto; width:auto; left:8px; top:8px; padding:.7rem 1rem; z-index:100000; border-radius:6px; font-weight:700; }

/* ---------- regular (non-Elementor) pages ---------- */
.welink-default-page{ padding:3.5rem 0 5rem; }
.welink-default-page__inner{ max-width:860px; }
.welink-default-page h1{ margin:0 0 1.6rem; color:var(--welink-ink); }
.welink-default-page .welink-article-body{ line-height:1.8; color:#3d4756; }
.welink-default-page .welink-article-body h2{ margin-top:2rem; color:var(--welink-ink); }