/*
 * Cmsmart UI Refresh — component-level polish built on tokens.css.
 * Loaded LAST (after custom.css / template.css) on all views so it overrides.
 * Additive & reversible: remove this file + its enqueue to roll back fully.
 */

/* ---- Base polish ---- */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* ---- Smooth interactions ---- */
a,
button,
.btn, .nb-btn, .cm-btn,
input[type="submit"], input[type="button"]{
  transition:color var(--dur-fast) var(--ease-standard),
             background-color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}

/* ---- Accessible focus ring (keyboard only) ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible, .nb-btn:focus-visible, .cm-btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:var(--r-4);
}

/* ---- Unified button feel (radius + subtle lift; colors untouched per element) ---- */
.btn, .nb-btn, .cm-btn{
  border-radius:var(--btn-radius);
}
.btn:hover, .nb-btn:hover, .cm-btn:hover{
  transform:translateY(-1px);
}
.btn:active, .nb-btn:active, .cm-btn:active{
  transform:translateY(0);
}

/* ---- Card elevation consistency ---- */
.testimonial-item{
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  transition:box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard);
}
.testimonial-item:hover{
  box-shadow:var(--card-shadow-hover);
  transform:translateY(-2px);
}

/* ---- Unified primary button (brand) — one primary color site-wide, kills Bootstrap blue gradient ---- */
.btn-primary,.btn.btn-primary{
  background:var(--btn-primary-bg); background-image:none;
  border:1px solid var(--btn-primary-bg); color:var(--btn-primary-text) !important;
  border-radius:var(--btn-radius); font-weight:var(--fw-semibold);
  text-shadow:none; box-shadow:none;
  transition:background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn-primary:hover,.btn-primary:focus,.btn.btn-primary:hover,.btn.btn-primary:focus{
  background:var(--btn-primary-bg-hover); border-color:var(--btn-primary-bg-hover);
  color:var(--btn-primary-text) !important;
}
.btn-primary:focus-visible,.btn.btn-primary:focus-visible{ box-shadow:var(--shadow-focus); outline:none; }

/* ---- Modern type scale (bolder; bigger body + clearer hierarchy) ---- */
body{ font-size:var(--text-body); line-height:var(--lh-body); }
h1, .cm-banner-title{
  font-size:var(--text-h1); font-weight:var(--fw-bold);
  line-height:var(--lh-heading); letter-spacing:var(--ls-heading);
}
h2, .mg-title, .section-title{
  font-size:var(--text-h2); font-weight:var(--fw-bold); line-height:var(--lh-heading);
}
h3{ font-size:var(--text-h3); font-weight:var(--fw-semibold); line-height:1.3; }
h4{ font-size:var(--text-h4); font-weight:var(--fw-semibold); line-height:1.35; }
h5{ font-size:var(--text-h5); font-weight:var(--fw-semibold); line-height:1.4; }
h6{ font-size:var(--text-h6); font-weight:var(--fw-bold); line-height:1.4; }
.mg-sub-title, .lead{ font-size:var(--text-lead); color:var(--color-text-muted); line-height:1.6; }

/* ---- Submenu / dropdown / mega-menu column headings — ONE uniform style ----
   The page heading scale (text-h1..h6) must NOT leak into menus: a column title is
   a small label, not a page heading. Without this, h3/h4 titles inside dropdowns
   inherit text-h3 (21-27px) and every submenu looks a different size. font-size is
   !important so it also wins over the high-specificity (#id) per-view menu rules. */
.sub-menu :is(h1,h2,h3,h4,h5,h6),
.dropdown-content :is(h1,h2,h3,h4,h5,h6),
.main-nav .dropdown :is(h1,h2,h3,h4,h5,h6),
.mega-menu-bottom :is(h1,h2,h3,h4,h5,h6),
.global-header-menu__dropdown-container :is(h1,h2,h3,h4,h5,h6),
.profile-nav-dropdown :is(h1,h2,h3,h4,h5,h6),
.uk-dropdown :is(h1,h2,h3,h4,h5,h6),
.uk-dropdown-content :is(h1,h2,h3,h4,h5,h6),
.tm-cart-dropdown :is(h1,h2,h3,h4,h5,h6){
  font-size:var(--text-h6) !important;   /* 14px — uniform across every submenu */
  font-weight:var(--fw-bold);
  line-height:1.4;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  margin:0 0 var(--sp-12);
}

/* hero / display headline opt-in roles */
.text-display{ font-size:var(--text-display); }
.text-display-lg{ font-size:var(--text-display-lg); }
.text-display-xl{ font-size:var(--text-display-xl); }

/* responsive type now handled by clamp() in tokens.css (--text-* are fluid).
   The old @media :root overrides were removed to let clamp() be authoritative. */

/* ---- Footer menu: standardized spacing + dropdown-style interaction ----
   Mirror the mega-dropdown item model (--dd-* tokens) so the footer link list
   reads as the same UI primitive: even vertical rhythm regardless of line wrap,
   a pill hover with --dd-radius, brand hover colour, and no layout-shifting
   jitter. The clickable target (padding + caret + hover pill) lives on the <a>,
   not the <li>, matching how dropdown items are built. */
.footer .footer-widgets ul{ margin-bottom:0; }
.footer .footer-widgets .title{ margin-bottom:var(--sp-24); }

.footer .footer-widgets ul li{
  margin-bottom:0;             /* tighten to the dropdown rhythm (gap was too wide) */
  padding:0;                   /* reset old li padding; it moves onto the link */
  line-height:1.45;
}
.footer .footer-widgets ul li::before{ content:none; }  /* caret moves into the link */

.footer .footer-widgets ul li a{
  display:block;
  position:relative;
  margin:0;                                             /* kill base .footer a margin-bottom:10px (caused the gap) */
  padding:var(--sp-4) var(--dd-item-px);                /* tighter vertical rhythm = dropdown */
  padding-left:calc(var(--dd-item-px) + var(--sp-12));  /* room for the caret */
  border-radius:var(--dd-radius);
  line-height:1.45;
  transition:color var(--dd-transition), background-color var(--dd-transition);
}
.footer .footer-widgets ul li a::before{
  content:'\25B8';                 /* caret, top-aligned for multi-line items */
  position:absolute;
  left:var(--dd-item-px);
  top:var(--sp-4);                  /* align caret with the tightened link padding */
  color:var(--c-brand-500);
  font-weight:var(--fw-bold);
  transition:transform var(--dd-transition);
}
.footer .footer-widgets ul li a:hover,
.footer .footer-widgets ul li a:focus{
  background:rgba(255,255,255,0.06);            /* dark-theme take on --dd-item-hover-bg */
  color:var(--dd-item-hover-fg) !important;     /* beats the !important base rule */
  text-shadow:none !important;                  /* drop the gold glow + horizontal jitter */
}
.footer .footer-widgets ul li a:hover::before{ transform:translateX(2px); }

/* fill the wide middle column: lay its long list out in two even columns */
.footer .footer-widgets .col-md-6 ul{
  column-count:2;
  column-gap:var(--dd-mega-col-gap);
}
.footer .footer-widgets .col-md-6 li{ break-inside:avoid; }
@media (max-width:768px){
  .footer .footer-widgets .col-md-6 ul{ column-count:1; }
}

/* Keyboard a11y: visible focus ring on every footer interactive element. */
.footer .footer-widgets ul li a:focus-visible,
.footer-cta__btn:focus-visible,
.footer-cta__wa:focus-visible,
.social-items.footers ul li a:focus-visible,
#back-to-top:focus-visible{
  outline:2px solid var(--c-brand-400);
  outline-offset:2px;
}

/* Client Portal sign-in: lead link sits above the account deep-links so a
   logged-out visitor understands the section needs authentication. */
.footer .footer-portal-signin a{
  font-weight:var(--fw-semibold);
  color:var(--c-brand-400) !important;
}
.footer .footer-portal-signin a::before{ content:'\2192' !important; } /* arrow instead of caret */

/* ---- Footer CTA band (plain flex, no Bootstrap grid -> predictable order/align) ---- */
.footer .footer-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-20);
  padding:var(--sp-24) 0 var(--sp-30);
  margin-bottom:var(--sp-24);
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer .footer-cta__text{ flex:1 1 360px; min-width:0; }
.footer .footer-cta__title{
  margin:0 0 var(--sp-8);
  font-size:clamp(26px, 3.4vw, 40px); font-weight:800; line-height:1.15;
  letter-spacing:-0.01em; color:var(--c-surface-0);
}
.footer .footer-cta__hl{
  background:linear-gradient(90deg, var(--c-brand-300) 0%, var(--c-brand-500) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap;
}
.footer .footer-cta__sub{ margin:0; max-width:56ch; font-size:var(--fs-16); color:var(--c-line); }
.footer .footer-cta__btn{
  flex:0 0 auto;
  display:inline-block;
  padding:var(--sp-12) var(--sp-30);
  background:var(--c-brand-500); color:var(--c-surface-0) !important;
  font-weight:var(--fw-bold); border-radius:var(--r-pill);
  box-shadow:var(--shadow-2);
  transition:background-color var(--dd-transition), transform var(--dd-transition);
}
.footer .footer-cta__btn:hover{ background:var(--c-brand-600); transform:translateY(-2px); }

/* stack the quote button + WhatsApp CTA */
.footer .footer-cta__actions{ display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-10); }
.footer .footer-cta__btn{ text-align:center; }

/* WhatsApp CEO CTA: sits right under the quote button, WhatsApp-green */
.footer .footer-cta__wa{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-8);
  padding:var(--sp-10) var(--sp-24);
  border:1px solid #25D366; border-radius:var(--r-pill);
  color:#25D366 !important; font-weight:var(--fw-semibold); font-size:var(--fs-14);
  transition:background-color var(--dd-transition), color var(--dd-transition);
}
.footer .footer-cta__wa i{ font-size:var(--fs-18); }
.footer .footer-cta__wa:hover{ background:#25D366; color:var(--c-surface-0) !important; }

/* ---- Back-to-top: token-based styling for ALL pages (custom.css only loads on home) ---- */
#back-to-top{
  z-index:var(--z-sticky); position:fixed; right:var(--sp-20); bottom:var(--sp-30);
  width:44px; height:44px; padding-top:var(--sp-4);
  background:var(--c-brand-500); color:var(--c-surface-0);
  font-size:10px; line-height:1; text-align:center;
  border-radius:var(--r-circle); cursor:pointer;
  box-shadow:var(--shadow-2);
  transition:background-color var(--dd-transition), transform var(--dd-transition);
}
#back-to-top:hover{ background:var(--c-brand-600); transform:translateY(-3px); }
#back-to-top i{ font-size:16px; }

/* Mobile: collapse every footer column the same way (the wide middle column
   renders a <ul>, not a <div>, so the legacy col-md-3>div rule missed it). */
@media (max-width:767px){
  .footer .footer-widgets .col-md-6>ul{ display:none; }
  .footer .footer-widgets span.title{ cursor:pointer; }
  .footer .footer-cta{ text-align:center; justify-content:center; }
}

/* ---- Sticky buy bar (product/solution pages; built by cm-sticky-cta.js) ---- */
.cm-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-16);
  padding:var(--sp-12) var(--sp-20);
  background:var(--color-bg);
  border-top:1px solid var(--color-border);
  box-shadow:var(--shadow-up);
  transform:translateY(110%); transition:transform var(--dur-base) var(--ease-standard);
}
.cm-sticky-cta.is-visible{ transform:translateY(0); }
.cm-sticky-cta__info{ display:flex; flex-direction:column; min-width:0; }
.cm-sticky-cta__title{
  font-weight:var(--fw-semibold); color:var(--color-heading);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw;
}
.cm-sticky-cta__price{ color:var(--c-brand-600); font-weight:var(--fw-bold); }
.cm-sticky-cta__btn{
  flex:0 0 auto;
  background:var(--btn-primary-bg); color:var(--btn-primary-text)!important;
  padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:var(--btn-radius);
  font-weight:var(--fw-bold); text-transform:uppercase; white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.cm-sticky-cta__btn:hover{ background:var(--btn-primary-bg-hover); transform:translateY(-1px); }
@media (max-width:480px){
  .cm-sticky-cta{ padding:var(--sp-8) var(--sp-12); gap:var(--sp-8); }
  .cm-sticky-cta__title{ max-width:45vw; font-size:var(--fs-14); }
  .cm-sticky-cta__btn{ padding:var(--sp-8) var(--sp-16); }
}

/* ============================================================
   COMMUNITY mega dropdown — 4 canonical pillar groups
   Self-contained: only styles the inner grid that the AJAX menu
   injects, never the #community-submenu container's show/hide.
   ============================================================ */
#community-submenu .community-mega-li{ list-style:none; padding:0; margin:0; min-width:0; width:auto; display:block; }
.community-mega-menu{
  column-count:2;
  column-gap:var(--sp-40, 40px);
  min-width:460px;
  padding:var(--sp-8, 8px) var(--sp-4, 4px);
}
.community-mega-col{
  display:flex; flex-direction:column; min-width:0;
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin-bottom:var(--sp-24, 24px);
}
.community-mega-col:last-child{ margin-bottom:0; }
/* Mega-menu column titles — unified across Services, Projects, Solution, Community.
   Replaces older per-dropdown rules in menu.css and menu-hover-expand.css. */
.community-mega-title,
.solution-mega-title,
.services-column-title{
  font-family:Poppins, sans-serif;
  font-size:var(--fs-14, 14px);
  line-height:1.4;
  font-weight:var(--fw-bold, 700);
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--c-brand-500, #f97316);
  padding:0 0 var(--sp-8, 8px);
  margin:0 0 var(--sp-8, 8px);
  border-bottom:1px solid var(--c-line, #e5e7eb);
  white-space:normal;
}
.community-mega-link{
  display:block;
  font-size:var(--fs-14, 14px);
  line-height:2;
  color:var(--c-text, #373d40);
  white-space:nowrap;
  transition:color var(--dur-fast, .15s) var(--ease-standard, ease);
}
.community-mega-link:hover{ color:var(--c-brand-500, #f97316); }
@media screen and (max-width:600px){
  .community-mega-menu{ column-count:1; min-width:0; }
}

/* Topics landing grid — grouped by the 4 canonical pillars */
.topics .topic-group{ margin-bottom:var(--sp-40, 40px); }
.topics .topic-group__head{
  margin:0 0 var(--sp-16, 16px);
  padding-bottom:var(--sp-8, 8px);
  border-bottom:2px solid var(--c-brand-500, #f97316);
}
.topics .topic-group__title{
  font-size:var(--fs-22, 22px);
  font-weight:var(--fw-bold, 700);
  color:var(--c-accent-600, #1f2a44);
  margin:0;
}
.topics .topic-group__title i{ color:var(--c-brand-500, #f97316); margin-right:var(--sp-8, 8px); }
.topics .topic-group__desc{
  margin:var(--sp-4, 4px) 0 0;
  font-size:var(--fs-14, 14px);
  color:var(--color-text-muted, #6b7280);
}
.topics .topic-count{
  display:inline-block;
  font-size:var(--fs-12, 12px);
  font-weight:var(--fw-normal, 400);
  color:var(--color-text-muted, #6b7280);
  background:var(--color-section, #f3f4f6);
  border-radius:999px;
  padding:1px var(--sp-8, 8px);
  margin-left:var(--sp-8, 8px);
  vertical-align:middle;
}

/* Community card thumbnails — stable 16:9 ratio (anti-CLS) */
.block-cat-community .module-thumb,
.post-item .module-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--color-section, #f3f4f6); border-radius:var(--r-8, 8px); }
.block-cat-community .module-thumb img,
.post-item .module-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Projects mega menu + listing filter — solution facet counts */
.projects-industries .service-link .menu-count{
  display:inline-block; min-width:18px; margin-left:6px; padding:0 6px;
  font-size:var(--fs-12, 12px); line-height:18px; text-align:center;
  color:var(--color-text-muted, #6b7280); background:var(--color-section, #f3f4f6);
  border-radius:999px;
}
.projects-filter__chip .chip-count{
  margin-left:6px; font-size:var(--fs-12, 12px); opacity:.7;
}
.projects-filter__chip.is-active .chip-count{ opacity:.9; }

/* ============================================================
   PHASE 1 — Component standardization (a11y + buttons + inputs)
   Additive override layer. Reversible: delete this block to roll back.
   Note: ARIA attributes (aria-expanded/-label on nav/cart) need markup
   edits in the view templates — tracked as a Phase 1.5 follow-up.
   ============================================================ */

/* ---- A11y: keyboard focus ring on ALL interactive elements ---- */
a:focus-visible, button:focus-visible, summary:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible, .nb-btn:focus-visible, .cm-btn:focus-visible, .uk-button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:var(--r-4);
}
/* mouse clicks never trigger the ring (keyboard only) */
:focus:not(:focus-visible){ outline:none; }

/* ---- Buttons: unified radius + interaction states across legacy classes ---- */
.btn, .nb-btn, .cm-btn, .uk-button,
input[type="submit"], input[type="button"], button[type="submit"]{
  border-radius:var(--btn-radius);
  cursor:pointer;
}
.btn:hover, .nb-btn:hover, .cm-btn:hover, .uk-button:hover{ transform:translateY(-1px); }
.btn:active, .nb-btn:active, .cm-btn:active, .uk-button:active{ transform:translateY(0); }
.btn:disabled, .btn.disabled, .nb-btn:disabled, .cm-btn:disabled, .uk-button:disabled,
input[type="submit"]:disabled, input[type="button"]:disabled, button:disabled{
  opacity:.55; cursor:not-allowed; transform:none; box-shadow:none;
}

/* ---- Canonical button variants (opt-in: add .cm-btn--primary / --secondary / --ghost) ---- */
.cm-btn--primary, .cm-btn--secondary, .cm-btn--ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-8);
  min-height:var(--btn-min-h);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--btn-radius);
  font-weight:var(--fw-semibold); line-height:1.2;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
}
.cm-btn--primary{ background:var(--btn-primary-bg); color:var(--btn-primary-text)!important; }
.cm-btn--primary:hover{ background:var(--btn-primary-bg-hover); transform:translateY(-1px); }
.cm-btn--secondary{ background:var(--btn-secondary-bg); color:var(--btn-secondary-text)!important; border-color:var(--btn-secondary-border); }
.cm-btn--secondary:hover{ background:var(--c-surface-50); transform:translateY(-1px); }
.cm-btn--ghost{ background:transparent; color:var(--btn-ghost-text)!important; }
.cm-btn--ghost:hover{ background:var(--btn-ghost-hover-bg); }

/* Size modifier: larger landing-CTA button — pairs with cm-btn--primary/--ghost
 * on hero/footer call-to-actions where the standard 44px feels lost on a wide
 * navy band. Padding & font scale together so the pill stays proportionate. */
.cm-btn--lg{
  min-height:52px;
  padding:var(--sp-12) var(--sp-30);
  font-size:var(--fs-16);
  letter-spacing:.01em;
}

/* On dark / navy bands the ghost variant needs to flip to a light outline so it
 * stays visible alongside the orange primary. Scope by ancestor color, not by
 * adding a separate variant, so any future dark band gets it for free. */
.solution-keyfeature .cm-btn--ghost,
.solution-footer .cm-btn--ghost,
[data-on-dark] .cm-btn--ghost{
  color:var(--c-surface-0)!important;
  border-color:rgba(255,255,255,.55);
}
.solution-keyfeature .cm-btn--ghost:hover,
.solution-footer .cm-btn--ghost:hover,
[data-on-dark] .cm-btn--ghost:hover{
  background:rgba(255,255,255,.10);
  border-color:var(--c-surface-0);
}

/* Trust strip: 3-chip horizontal row for risk-reversal under a landing CTA.
 * Dots-separated, wraps to vertical stack on narrow screens. Item color
 * inherits so it works on both light and dark bands without extra rules. */
.cm-trust-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--sp-8) var(--sp-20);
  margin-top:var(--sp-20);
  padding:0;
  list-style:none;
  font-size:var(--fs-14);
  font-weight:var(--fw-normal);
  opacity:.88;
}
.cm-trust-strip li{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
}
.cm-trust-strip li + li::before{
  content:'·';
  position:absolute;
  left:calc(var(--sp-20) * -1 / 2);
  transform:translateX(-50%);
  opacity:.55;
}
.cm-trust-strip .check::before{
  content:'✓';
  display:inline-block;
  margin-right:var(--sp-4);
  font-weight:var(--fw-bold);
  color:var(--c-brand-500);
}
@media (max-width:560px){
  .cm-trust-strip li + li::before{ display:none; }
  .cm-trust-strip{ flex-direction:column; gap:var(--sp-8); }
}

/* ---- Form controls: 44px touch target + unified border/focus/placeholder ---- */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"], input[type="number"],
select, textarea{
  min-height:var(--input-min-h);
  padding:var(--input-pad-y) var(--input-pad-x);
  border:1px solid var(--input-border);
  border-radius:var(--input-radius);
  background:var(--input-bg);
  line-height:1.4;
}
textarea{ min-height:96px; }
input:focus, select:focus, textarea:focus{
  border-color:var(--input-border-focus);
  box-shadow:var(--focus-ring);
  outline:none;
}
::placeholder{ color:var(--input-placeholder); opacity:1; }
/* validation (opt-in classes — no false positives on untouched fields) */
.is-error input, input.is-error, .has-error input, .has-error .form-control, input.invalid{
  border-color:var(--input-error);
  background:var(--input-error-bg);
}

/* ---- Readability: cap body text line length where article content renders ---- */
.article-content p, .post-detail p, .change-log-content p{ max-width:var(--measure); }

/* ---- Skip-link (keyboard users jump past nav to main content) ---- */
.cm-skip-link{
  position:absolute; left:var(--sp-8); top:-48px; z-index:var(--z-toast);
  padding:var(--sp-8) var(--sp-16);
  background:var(--c-brand-500); color:#fff !important;
  border-radius:var(--r-8); font-weight:var(--fw-semibold); text-decoration:none;
  transition:top var(--dur-fast) var(--ease-standard);
}
.cm-skip-link:focus{ top:var(--sp-8); outline:none; box-shadow:var(--focus-ring); }
#cm-main:focus{ outline:none; }

/* ===========================================================================
   Cart & Checkout UX refresh
   =========================================================================== */

/* ---- Cart: quantity stepper ---- */
.cms-cart .cart-qty{
  display:inline-flex; align-items:stretch; vertical-align:middle;
  border:1px solid var(--c-line); border-radius:var(--r-8); overflow:hidden;
  margin:var(--sp-8) 0;
}
.cms-cart .cart-qty-btn{
  width:32px; border:0; background:var(--c-surface-50);
  color:var(--c-ink-700); font-size:var(--fs-16); line-height:1; cursor:pointer;
}
.cms-cart .cart-qty-btn:hover{ background:var(--c-surface-100); color:var(--c-brand-600); }
.cms-cart .cart-qty-input{
  width:44px; min-height:32px !important; text-align:center;
  border:0 !important; border-left:1px solid var(--c-line) !important;
  border-right:1px solid var(--c-line) !important; border-radius:0 !important;
  padding:0 !important; background:var(--c-surface-0);
}
.cms-cart .subtotal .total-price{ display:block; font-weight:var(--fw-bold); color:var(--c-ink-900); }
.cms-cart .continue-shopping{ white-space:nowrap; }

/* ---- Cart: empty state ---- */
.cart-empty-state{
  text-align:center; padding:var(--sp-64) var(--sp-20); max-width:520px; margin:0 auto;
}
.cart-empty-state .uk-icon-shopping-cart{ font-size:48px; color:var(--c-ink-300); }
.cart-empty-state h2{ margin:var(--sp-16) 0 var(--sp-8); color:var(--c-ink-900); }
.cart-empty-state p{ color:var(--c-ink-500); margin-bottom:var(--sp-24); }

/* ---- Cart: logged-in "proceed" panel ---- */
.right-cart .nav-logout{
  background:var(--c-surface-0); border:1px solid var(--c-line);
  border-radius:var(--r-12); padding:var(--sp-20);
}
.cart-proceed-btn{ display:block; width:100%; text-align:center; margin:var(--sp-12) 0; }
.cart-trust{ display:flex; flex-wrap:wrap; gap:var(--sp-12); font-size:var(--fs-12); color:var(--c-ink-500); }
.cart-trust i{ color:var(--c-success); }

/* ---- Mini-cart: checkout + sign-in ---- */
.tm-cart-dropdown .nav-total{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-8); }
.tm-cart-dropdown .nav-total .total{ flex:1 1 100%; }
.tm-cart-dropdown .nav-checkout-button{
  flex:1 1 0; background:var(--c-brand-500) !important; color:#fff !important;
  text-align:center; border-radius:var(--r-8); font-weight:var(--fw-semibold);
}
.tm-cart-dropdown .nav-checkout-button:hover{ background:var(--c-brand-600) !important; }
.tm-cart-dropdown #nav-cart-menu-button{ flex:1 1 0; text-align:center; }
.nav-cart-signin{ color:var(--c-brand-600); text-decoration:underline; }

/* ---- Checkout: progress steps ---- */
.checkout-steps{
  list-style:none; display:flex; gap:var(--sp-8); padding:0;
  margin:var(--sp-20) 0 0; font-size:var(--fs-14); color:var(--c-ink-300);
  flex-wrap:wrap;
}
.checkout-steps li{ display:flex; align-items:center; gap:var(--sp-8); }
.checkout-steps li:not(:last-child)::after{ content:"›"; margin-left:var(--sp-8); color:var(--c-ink-300); }
.checkout-steps .step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; font-size:var(--fs-12); font-weight:var(--fw-bold);
  background:var(--c-surface-100); color:var(--c-ink-500);
}
.checkout-steps li.current{ color:var(--c-ink-900); font-weight:var(--fw-semibold); }
.checkout-steps li.current .step-num{ background:var(--c-brand-500); color:#fff; }
.checkout-steps li.done{ color:var(--c-ink-700); }
.checkout-steps li.done .step-num{ background:var(--c-success); color:#fff; }

/* ---- Checkout: payment option cards (PayPal primary, Onepay secondary) ---- */
.cms-payment fieldset.radio{ display:flex; flex-direction:column; gap:var(--sp-12); border:0; padding:0; }
.pay-option{
  position:relative; border:1px solid var(--c-line); border-radius:var(--r-12);
  padding:var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-48);
  background:var(--c-surface-0); transition:border-color var(--dur-fast,.15s) ease, box-shadow var(--dur-fast,.15s) ease;
}
.pay-option input[type=radio]{ position:absolute; left:var(--sp-16); top:var(--sp-20); margin:0; }
/* override legacy sprite backgrounds on the labels */
.pay-option label{ display:block; background:none !important; width:auto !important; height:auto !important; margin:0; cursor:pointer; }
.pay-option .pay-name{ font-size:var(--fs-16); font-weight:var(--fw-bold); color:var(--c-ink-900); }
.pay-option .pay-cards{ display:block; font-size:var(--fs-12); color:var(--c-ink-500); margin-top:var(--sp-4); }
.pay-option .pay-badge{
  display:inline-block; margin-left:var(--sp-8); padding:2px var(--sp-8);
  font-size:var(--fs-11); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.03em;
  background:var(--c-brand-500); color:#fff; border-radius:var(--r-20); vertical-align:middle;
}
.pay-option .note_payment_checkout{
  display:none; margin:var(--sp-12) 0 0; font-size:var(--fs-12);
  color:var(--c-ink-500); line-height:1.5;
}
.pay-option.is-selected{ border-color:var(--c-brand-500); box-shadow:0 0 0 1px var(--c-brand-500) inset; }
.pay-option.is-selected .note_payment_checkout{ display:block; }
/* PayPal recommended is visually primary; Onepay stays compact/secondary */
.pay-option--recommended{ border-color:var(--c-brand-300,var(--c-brand-400)); }
.pay-option.cms-one-pay{ padding-top:var(--sp-12); padding-bottom:var(--sp-12); }
.pay-option.cms-one-pay .pay-name{ font-size:var(--fs-14); font-weight:var(--fw-semibold); color:var(--c-ink-700); }

/* ---- Checkout: trust + CTA ---- */
.cms-checkout{ text-align:center; padding-top:var(--sp-20); }
.cms-checkout .checkout_product{
  display:inline-block; min-width:280px; padding:var(--sp-16) var(--sp-32);
  font-size:var(--fs-18); font-weight:var(--fw-bold);
  background:var(--c-brand-500); border:0; border-radius:var(--r-8); color:#fff;
}
.cms-checkout .checkout_product:hover{ background:var(--c-brand-600); }
.cms-checkout .checkout_product[disabled]{ opacity:.5; cursor:not-allowed; }
.checkout-trust{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-16);
  padding:0; margin:var(--sp-16) 0 0; font-size:var(--fs-12); color:var(--c-ink-700);
}
.checkout-trust i{ color:var(--c-success); margin-right:var(--sp-4); }
.checkout-note{ margin:var(--sp-12) auto 0; max-width:var(--measure,640px); font-size:var(--fs-12); color:var(--c-ink-500); }
.msg_check.is-error{ color:var(--c-danger); }
.msg_check.is-error a{ color:var(--c-brand-600); text-decoration:underline; }

/* ---- Checkout: mobile — show order summary first ---- */
@media (max-width:767px){
  .bill-to-form{ display:flex; flex-direction:column; }
  .checkout-col--summary{ order:1; }
  .checkout-col--bill{ order:2; }
  .checkout-col--pay{ order:3; }
  .checkout-col--actions{ order:4; }
  .checkout-steps{ font-size:var(--fs-12); }
}

/* ---- Header: Request Quotes CTA (replaces the old Dashboard button) ---- */
.header-right .button-link--quote{
  background:var(--c-brand-500); color:#fff !important;
  padding:var(--sp-8) var(--sp-16); border-radius:var(--r-8);
  font-weight:var(--fw-semibold); white-space:nowrap; text-decoration:none;
  transition:background var(--dur-fast,.15s) ease;
}
.header-right .button-link--quote:hover{ background:var(--c-brand-600); color:#fff !important; }
/* Highlight the Request Quotes entry at the top of the member dropdown */
.global-header-dropdown__list-item:first-of-type .global-header-dropdown__link{ color:var(--c-brand-600); font-weight:var(--fw-semibold); }
/* ============================================================
   PHASE 2 — Typography / Button / Casing STANDARD (whole UI)
   Single source of truth. Loaded last so it wins on equal specificity.
   High-specificity legacy rules are neutralized per-file in the sweep
   (see SPEC-Typography-Buttons-Casing.md). Reversible: delete this block.
   ============================================================ */

/* ---- 2.0 Font families — exactly TWO (icon fonts untouched) ----
   Roboto for body/UI, Poppins for headings. !important on h1-h6 so the legacy
   per-view font-family (Arial / Helvetica_Neue / Poppins-variants / Roboto stacks)
   can't override the heading family. Icon fonts (FontAwesome/themify/glyphicons)
   are never matched here — they stay on their own families. */
body, input, select, textarea, button, .btn, .nb-btn, .cm-btn{
  font-family:var(--font-base);
}
h1, h2, h3, h4, h5, h6,
.section-title, h2.section-title, .mg-title, .cm-banner-title, .topic-group__title{
  font-family:var(--font-heading) !important;
}
code, pre, kbd, samp, .code, .changelog-code{ font-family:var(--font-mono); }

/* ---- 2.1 Casing — exactly TWO sanctioned treatments ----
   UPPERCASE = labels/eyebrows/kickers/buttons/nav-top/table-head.
   Title Case = headings/titles (rendered AS AUTHORED via text-transform:none
   to preserve brand casing like "eCommerce"/"WordPress"; forced .u-title-case
   is available where DB content casing is unreliable).
   Anything previously lowercase/initial/uppercase-shouting on a heading is reset. */
h1, h2, h3, h4, h5, h6{
  /* !important so the ~59 legacy `.class hN{uppercase}` rules can't out-specify
     this: raw heading tags never SHOUT. Things that should be UPPERCASE must use
     a label class (.u-upper/.eyebrow/.kicker), not a bare heading element. */
  text-transform:none !important;
}
.section-title, h2.section-title, .mg-title, .cm-banner-title,
.view_home h2.cms-home-title-h2, .topic-group__title{
  text-transform:none;        /* heading-like classes -> Title Case as authored */
}
.u-upper, .eyebrow, .kicker, .badge-label, .section-eyebrow,
.btn-nav-top, .global-header .extra-link{
  text-transform:uppercase !important;
  letter-spacing:var(--ls-label);
}
.u-title-case{ text-transform:capitalize !important; }
/* dynamic content where DB casing is unreliable -> force Title Case */
.vendor-username, .review-element span.author a, .author-name, .user-display-name{
  text-transform:capitalize;
}

/* ---- 2.2 Buttons — exactly THREE types (legacy alias, no markup change) ----
   primary  = filled brand          secondary = brand outline on white
   ghost    = transparent/link-like
   identity props use !important because this IS the normalization layer. */
.btn, .nb-btn, .cm-btn, .uk-button,
input[type="submit"], input[type="button"], button[type="submit"]{
  min-height:var(--btn-min-h);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:var(--ls-label);
  line-height:1.2;
}

/* PRIMARY (filled brand) */
.btn-primary, .btn-buynow, .btn-red, .btn-global, .btn-standard, .btn-dows,
.btn-buy, .btn-nav-main, .btn-slider, .btn-cl-main, .btn-black,
.add-to-cart, .download-product > a, .btn-success.cm-cta{
  background:var(--btn-primary-bg) !important;
  color:var(--btn-primary-text) !important;
  border:1px solid var(--btn-primary-bg) !important;
  border-radius:var(--btn-radius) !important;
}
.btn-primary:hover, .btn-buynow:hover, .btn-red:hover, .btn-global:hover,
.btn-standard:hover, .btn-dows:hover, .btn-buy:hover, .btn-nav-main:hover,
.btn-slider:hover, .btn-cl-main:hover, .btn-black:hover, .add-to-cart:hover,
.download-product > a:hover{
  background:var(--btn-primary-bg-hover) !important;
  border-color:var(--btn-primary-bg-hover) !important;
}

/* SECONDARY (brand outline) */
.btn-default, .btn-border, .btn-outline, .btn-white, .btn-inverse,
.btn-secondary, .btn-viewmore, .btn-details, .btn-light, .btn-order-list{
  background:var(--btn-secondary-bg) !important;
  color:var(--btn-secondary-text) !important;
  border:1px solid var(--btn-secondary-border) !important;
  border-radius:var(--btn-radius) !important;
}
.btn-default:hover, .btn-border:hover, .btn-outline:hover, .btn-white:hover,
.btn-inverse:hover, .btn-secondary:hover, .btn-viewmore:hover, .btn-details:hover,
.btn-order-list:hover{
  background:var(--c-surface-50) !important;
  color:var(--c-brand-600) !important;
}

/* GHOST (transparent / link-like) */
.btn-link, .btn-ghost, .btn-dark, .btn-user{
  background:transparent !important;
  color:var(--btn-ghost-text) !important;
  border:1px solid transparent !important;
}
.btn-link:hover, .btn-ghost:hover, .btn-dark:hover, .btn-user:hover{
  background:var(--btn-ghost-hover-bg) !important;
  color:var(--c-brand-600) !important;
}

/* STATE = primary repainted (NOT a 4th type) — preserves delete/confirm meaning */
.btn-danger{  background:var(--btn-danger-bg)  !important; border-color:var(--btn-danger-bg)  !important; color:#fff !important; }
.btn-danger:hover{  background:var(--btn-danger-bg-hover)  !important; }
.btn-info{    background:var(--btn-info-bg)    !important; border-color:var(--btn-info-bg)    !important; color:#fff !important; }
.btn-info:hover{    background:var(--btn-info-bg-hover)    !important; }
.btn-warning{ background:var(--btn-warning-bg) !important; border-color:var(--btn-warning-bg) !important; color:#fff !important; }
.btn-warning:hover{ background:var(--btn-warning-bg-hover) !important; }
/* .btn-success keeps green ONLY as a confirm state (not the CTA alias above) */
.btn-success:not(.cm-cta){ background:var(--btn-success-bg) !important; border-color:var(--btn-success-bg) !important; color:#fff !important; }
.btn-success:not(.cm-cta):hover{ background:var(--btn-success-bg-hover) !important; }

/* ============================================================
   BREADCRUMB — ONE unified pattern site-wide (surface BAND)
   David's standard = a subtle surface band on every page. Community already had it
   (.breadcrumb); projects/service (.breadcrumb-container/.breadcrumb-list) rendered
   plain. Give the SAME band to every system so they read identically, keep the
   wrapper margins tight so the band doesn't sit in a wide gap, and collapse the
   empty global breadcrumb. Markup + separators per view are left intact.
   ============================================================ */
/* In-content breadcrumb wrappers (projects/service): fill their parent column. */
.breadcrumb-container,
.cmsmart-project-widget .breadcrumb-container,
#service-breadcrumb,
#service-breadcrumb .breadcrumb-container{
  margin:var(--sp-8) 0 var(--sp-12) !important;   /* pull up to header, small gap to content */
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
/* Global breadcrumb wrapper (.uk-container.uk-container-center): set ONLY the vertical
   rhythm and keep the horizontal auto-centering — zeroing left/right margins here was
   breaking .uk-container-center, left-aligning the band so it stuck out past the
   centered page content ("lồi ra") on solution/landing pages. */
.cms-breadcrumbs{
  margin:var(--sp-8) auto var(--sp-12) !important;   /* auto L/R = centered, matching .uk-container content */
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.cms-breadcrumbs:empty{ display:none !important; }   /* empty global breadcrumb takes no space */
/* Landing/solution views (solution, magento_service, wphandmade, wpprintshop, pricing)
   hard-hide .cms-breadcrumbs because they used to have none. Now that those pages get a
   URL-derived breadcrumb, reveal it whenever the slot is actually populated. */
.cms-breadcrumbs:has(.breadcrumb){ display:block !important; }

/* ---- Header banner → content gap (site-wide) ----
   Measured on staff: the .nb-header banner had margin-bottom:30px which, on top of
   the breadcrumb's own margin, left a ~42px empty band under the header on every
   page (David: "spacy quá rộng"). Tighten the banner's bottom margin so the
   breadcrumb/content sit closer to the header. */
.nb-header.desktop-device-nav,
.nb-header.mobile-device-nav{ margin-bottom:var(--sp-16) !important; }

/* Community page: drop the white rounded shell on .tm-main so the breadcrumb
   chip and the dark hero banner read as separate components (chip on the page
   surface, hero as its own rounded card) instead of sitting stacked inside one
   wrapping white card. Inner blocks (.bg-white, hero, .full-width-rounded)
   carry their own surfaces. */
.tm-section.tm-main.com_cmsmart.view_community{
  background:transparent !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:0 !important;
}
/* Constrain the breadcrumb container so the chip aligns with the hero/post
   card gutters instead of stretching viewport-wide on narrow desktops. */
.comm-bc-community{
  margin-top:var(--sp-16) !important;
  max-width:1206px;
  margin-left:auto !important;
  margin-right:auto !important;
}
@media (max-width: 1239px){
  .comm-bc-community{
    margin-left:var(--sp-15, 15px) !important;
    margin-right:var(--sp-15, 15px) !important;
    max-width:none;
  }
}
/* Shrink the chip to its content width so it reads as a pill, not a
   full-width band — matches the spacing language of the rounded hero. */
.comm-bc-community .breadcrumb,
.comm-bc-community .uk-breadcrumb,
.comm-bc-community .breadcrumb-list{
  display:inline-flex !important;
  max-width:100%;
}

/* Community detail content card: give the main-column post-wrap real inner
   gutters so body text and embedded media stop hugging the white card edge.

   Match BOTH markup variants used across detail layouts:
   - default_tutorials.php : <div class="post-wrap box-con-comm">
   - default_casestudy / comments / promotion : <div class="block-wrap post-wrap ...">
   The earlier rule required .block-wrap which doesn't exist on tutorials, so
   the padding was silently skipped on the most-visited detail view (verified
   via browse eval: padL:0, padR:0 with white bg + r-12). */
.view_community #main-wapper .col-md-8 > .post-wrap,
.view_community #main-wapper .col-md-8 > .block-wrap.post-wrap{
  padding:var(--sp-24) var(--sp-32);
  background:#fff;
  border-radius:var(--card-radius);
}
/* Post-head originally sits flush against a 15px parent via negative
   margins — neutralise those so the new gutter is honoured. */
.view_community #main-wapper .col-md-8 > .post-wrap .post-details > .post-head,
.view_community #main-wapper .col-md-8 > .block-wrap.post-wrap .post-details > .post-head{
  margin-left:0;
  margin-right:0;
}
@media (max-width: 767px){
  .view_community #main-wapper .col-md-8 > .post-wrap,
  .view_community #main-wapper .col-md-8 > .block-wrap.post-wrap{
    padding:var(--sp-16) var(--sp-16);
  }
}

/* =========================================================================
 * COMMUNITY P1 — surface + pill polish
 *
 * The community listing component stylesheet (views/community/assets/css/
 * style.css) loads AFTER ui-refresh.css, so rules here need to either keep
 * specificity equal-or-higher than its selectors or use !important. Approach:
 * piggy-back the existing selector chain (.block-wrap.layout-list.list-style-6
 * .post-item.full-info) under .view_community so we always win the cascade
 * battle. Keep the legacy float-based layout untouched — only repaint the
 * surface (background, border, radius, shadow, hover) and route the title /
 * meta into the design-system tokens. Tag and topic pills get the
 * --pill-tag-* surface so they read as discrete chips.
 * ========================================================================= */

/* Surface lift on the main listing card (default_community-tag layout). */
.view_community .block-wrap.layout-list.list-style-6 .post-item.full-info,
.view_community .block-wrap .block-cat-community{
  background:var(--card-community-bg);
  border:1px solid var(--card-community-border);
  border-radius:var(--card-community-radius);
  box-shadow:var(--card-community-shadow);
  padding:var(--sp-20);
  transition:box-shadow var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
  position:relative;
}
.view_community .block-wrap.layout-list.list-style-6 .post-item.full-info:hover,
.view_community .block-wrap .block-cat-community:hover{
  box-shadow:var(--card-community-shadow-h);
  transform:translateY(-2px);
}

/* Module thumb image: smooth zoom on card hover. r-12 radius already set by
   list-style-6 source rule — only the hover transform is new here. */
.view_community .block-wrap.layout-list.list-style-6 .post-item.full-info .module-thumb .entry-thumb{
  transition:transform var(--dur-base) var(--ease-standard);
}
.view_community .block-wrap.layout-list.list-style-6 .post-item.full-info:hover .module-thumb .entry-thumb{
  transform:scale(1.04);
}

/* Title: heading family + hover brand colour. Specificity has to beat the
   listing source selector which already pins font-size + line-height. */
.view_community .block-wrap.layout-list.list-style-6 .post-item.full-info .meta-info-container .grid-meta .entry-title{
  font-family:var(--font-heading, var(--font-base));
  font-weight:700;
  line-height:1.35;
  letter-spacing:var(--ls-heading, -.01em);
  margin:0 0 var(--sp-12);
  /* Clean 3-line clamp with ellipsis so a long title never gets cut mid-line
     and collide with the author row below. Overrides style.css max-height. */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  max-height:none;
}
.view_community .block-wrap.layout-list.list-style-6 .post-item.full-info .meta-info-container .grid-meta .entry-title a{
  color:var(--color-heading);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-standard);
}
.view_community .block-wrap.layout-list.list-style-6 .post-item.full-info .meta-info-container .grid-meta .entry-title a:hover{
  color:var(--c-brand-500);
}

/* Listing thumbnail: a single crisp bordered frame on .module-thumb (the inner
   .image-wrap #ccc border was hairline against the placeholder and got clipped
   by the module-thumb rounding). Frame keeps a clean box even when the image is
   missing — .is-empty is toggled by the widget script when an <img> 404s (e.g.
   media not synced to staging) and the placeholder icon sits on the sunken fill. */
.view_community .block-wrap.layout-list.list-style-6 .post-item.full-info .module-thumb{
  border:1px solid var(--color-border-strong);
}
.view_community .block-wrap.layout-list.list-style-6 .post-item.full-info .module-thumb .image-wrap{
  border:0;
  background:var(--color-surface-sunken);
  position:relative;
}
.view_community .block-wrap.layout-list.list-style-6 .post-item.full-info .module-thumb .image-wrap.is-empty::after{
  content:"\f03e";
  font-family:'FontAwesome';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-40);
  color:var(--color-border-strong);
}

/* Most read this month — each entry is a self-contained mini-card (thumb + text),
   robust to broken thumbnails. Replaces the old absolute-positioned avatar list
   that collapsed into loose fragments when the image failed to load. */
.view_community .most-read-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-8);
}
.view_community .most-read-item{
  display:flex;
  gap:var(--sp-12);
  align-items:center;
  padding:var(--sp-8);
  border:1px solid var(--color-border);
  border-radius:var(--r-8);
  background:var(--color-surface);
  text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.view_community .most-read-item:hover{
  border-color:var(--c-brand-500);
  box-shadow:var(--card-shadow);
}
.view_community .most-read-thumb{
  position:relative;
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:var(--r-8);
  overflow:hidden;
  background:var(--color-surface-sunken);
}
.view_community .most-read-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.view_community .most-read-thumb.is-empty::after{
  content:"\f03e";
  font-family:'FontAwesome';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-20);
  color:var(--color-border);
}
.view_community .most-read-body{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  min-width:0;
}
.view_community .most-read-title{
  font-family:var(--font-heading, var(--font-base));
  font-size:var(--fs-14);
  font-weight:600;
  line-height:1.35;
  color:var(--color-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color var(--dur-fast) var(--ease-standard);
}
.view_community .most-read-item:hover .most-read-title{
  color:var(--c-brand-600);
}
.view_community .most-read-meta{
  font-size:var(--fs-12);
  color:var(--color-text-muted);
  line-height:1.3;
}

/* Type badge (top-right of the thumb): floating dark pill instead of inline
   square. Backdrop blur falls back gracefully on browsers without support. */
.view_community .block-wrap.layout-list.list-style-6 .post-item.full-info .module-thumb .type-block{
  position:absolute;
  top:var(--sp-8) !important;
  right:var(--sp-8) !important;
  z-index:2;
  display:inline-flex;
  align-items:center;
  padding:var(--sp-4) var(--sp-12);
  border-radius:var(--r-pill);
  background:rgba(0,0,0,.55);
  color:var(--c-surface-0);
  font-size:var(--fs-12);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  backdrop-filter:blur(4px);
}

/* =========================================================================
 * COMMUNITY P1 — Unified pill for tag chips and topic chips
 * Replaces three inconsistent styles (.button-community-tag a, .topic-post,
 * detail topic span) with the --pill-tag-* surface.
 * ========================================================================= */
.view_community .button-community-tag{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-8);
  margin:var(--sp-8) 0 0;
}
.view_community .button-community-tag a,
.view_community .topic-post{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-12);
  border-radius:var(--r-pill);
  background:var(--pill-tag-bg);
  color:var(--pill-tag-fg);
  font-family:var(--font-base);
  font-size:var(--fs-12);
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.view_community .button-community-tag a:hover,
.view_community .topic-post:hover{
  background:var(--pill-tag-bg-active);
  color:var(--pill-tag-fg-active);
}

@media (max-width: 767px){
  .view_community .block-wrap.layout-list.list-style-6 .post-item.full-info,
  .view_community .block-wrap .block-cat-community{
    padding:var(--sp-16);
  }
}

/* =========================================================================
 * COMMUNITY P2 — TOC sidebar + pagination polish
 *
 * TOC: replace the gray bullet bar with a left rail (--toc-line) + larger
 *      dot markers (--toc-marker / --toc-marker-active), tighten the type,
 *      route the active state to brand and add a subtle highlight strip.
 *      Sticky behaviour via position:sticky so the JS .fixed class can fall
 *      back when sticky is supported — same visual either way.
 * Pager: 36x36 pill cells, brand-500 active background, ghost border resting.
 * Both blocks scoped under .view_community so the rules don't leak into
 * solution / service listings that share the same .pagination-list class.
 * ========================================================================= */

/* Sticky is a scroll-spy feature for the article/tutorial TOC, which lives
   inside #main-wapper.uk-container-tuto-con on detail views. Scope it there.
   On the community *landing* the sidebar widgets (Ecommerce Topics / Community
   Sections) reuse #box-table-of-content as a plain list inside a short card;
   position:sticky mispositions the nav within that card — it opens a big empty
   gap under the heading and pushes the last topics past the card's bottom
   border. Keep those static (they inherit the rail styling below regardless). */
.view_community .uk-container-tuto-con #box-table-of-content{
  position:sticky;
  top:calc(var(--nb-header-h, 70px) + var(--sp-16));
  align-self:flex-start;
}
.view_community #box-table-of-content .block-top{
  font-family:var(--font-heading, var(--font-base));
  font-size:var(--fs-14);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--c-brand-500);
  border-bottom:1px solid var(--toc-line);
  padding-bottom:var(--sp-12);
  margin-bottom:var(--sp-16);
}
/* Vertical rail running through the list — replaces the floating bullets. */
.view_community nav#box-table-of-content.section-nav,
.view_community #box-table-of-content nav.section-nav ol{
  position:relative;
  padding-left:var(--sp-20);
}
.view_community nav#box-table-of-content.section-nav::before,
.view_community #box-table-of-content nav.section-nav ol::before{
  content:'';
  position:absolute;
  left:5px; top:8px; bottom:8px;
  width:2px;
  background:var(--toc-line);
  border-radius:1px;
}
/* Each item: marker dot rests on the rail; active state grows the dot + lifts colour. */
.view_community nav#box-table-of-content.section-nav > a,
.view_community #box-table-of-content nav.section-nav ol > li{
  position:relative;
  padding:var(--sp-8) 0 var(--sp-8) var(--sp-4);
  padding-left:var(--sp-4);
  list-style:none;
}
.view_community nav#box-table-of-content.section-nav > a::before,
.view_community #box-table-of-content nav.section-nav ol > li::before{
  content:'';
  position:absolute;
  left:-19px; top:14px;
  width:8px; height:8px;
  border-radius:var(--r-circle);
  background:var(--toc-marker);
  border:2px solid var(--c-surface-0);
  box-shadow:0 0 0 1px var(--toc-marker);
  transition:background var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.view_community nav#box-table-of-content.section-nav a,
.view_community #box-table-of-content nav.section-nav ol a{
  font-size:var(--fs-14);
  line-height:1.5;
  color:var(--color-text);
  text-decoration:none;
  display:block;
  padding:var(--sp-4) var(--sp-8);
  border-radius:var(--r-8);
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.view_community nav#box-table-of-content.section-nav a:hover,
.view_community #box-table-of-content nav.section-nav ol a:hover{
  color:var(--c-brand-600);
  background:var(--c-brand-50);
}
.view_community nav#box-table-of-content.section-nav a.active,
.view_community #box-table-of-content nav.section-nav ol a.active{
  color:var(--c-brand-700);
  background:var(--c-brand-50);
  font-weight:700;
}
.view_community #box-table-of-content nav.section-nav ol > li:has(> a.active)::before,
.view_community nav#box-table-of-content.section-nav > a.active::before{
  background:var(--toc-marker-active);
  box-shadow:0 0 0 1px var(--toc-marker-active),
             0 0 0 4px rgba(249,115,22,.18);
  transform:scale(1.2);
}
/* Nested sub-items: smaller markers, indented. */
.view_community #box-table-of-content nav.section-nav ol li li{
  list-style:none !important;
  margin-left:0;
}
.view_community #box-table-of-content nav.section-nav ol li li::before{
  width:6px; height:6px;
  top:14px;
}
.view_community nav#box-table-of-content.section-nav ul,
.view_community #box-table-of-content nav.section-nav ol ul{
  margin-left:var(--sp-12);
  padding-left:var(--sp-16);
  border-left:1px dashed var(--toc-line);
}

/* Pager — 36x36 pill cells.
   Hits .pagination .pagination-list which is the Joomla-default markup
   used across listings. Brand active = community context. */
.view_community .pagination{ margin:var(--sp-32) 0 0; }
.view_community .pagination-list{
  display:inline-flex;
  flex-wrap:wrap;
  gap:var(--sp-8);
  margin:0;
  padding:0;
  list-style:none;
}
.view_community .pagination-list li{
  display:inline-flex;
}
.view_community .pagination-list li > a,
.view_community .pagination-list li > span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 var(--sp-12);
  border-radius:var(--r-8);
  background:var(--c-surface-0);
  border:1px solid var(--c-line);
  color:var(--color-text);
  font:600 var(--fs-14)/1 var(--font-base);
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
  margin:0;
}
.view_community .pagination-list li > a:hover{
  background:var(--c-brand-50);
  border-color:var(--c-brand-200);
  color:var(--c-brand-700);
}
.view_community .pagination-list li.active > a,
.view_community .pagination-list li.active > span{
  background:var(--c-brand-500);
  border-color:var(--c-brand-500);
  color:var(--c-surface-0);
}
.view_community .pagination-list li.disabled > a,
.view_community .pagination-list li.disabled > span{
  opacity:.4;
  cursor:not-allowed;
}

/* =========================================================================
 * COMMUNITY — Author card contact channels (moved out of content footer)
 *
 * The "Direct Contact & Support Channels" block used to render inline at the
 * bottom of every tutorial body, breaking the reading flow. It now lives
 * inside .author-profile-card as a parallel section under .author-description.
 * Styled to inherit the card's card-on-light surface language with a brand
 * accent on the icons + a brand-50 sub-surface so it reads as a "talk to the
 * author" rail rather than another generic CTA strip.
 * ========================================================================= */
.view_community .author-contact-channels{
  margin-top:var(--sp-20);
  padding:var(--sp-16) var(--sp-20);
  background:var(--c-brand-50);
  border:1px solid rgba(249,115,22,.22);
  border-radius:var(--r-12);
}
.view_community .author-contact-channels .author-contact__title{
  display:flex; align-items:center; gap:var(--sp-8);
  margin:0 0 var(--sp-8);
  font:700 var(--fs-14)/1.3 var(--font-heading, var(--font-base));
  color:var(--c-brand-700);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.view_community .author-contact-channels .author-contact__title i{
  color:var(--c-brand-500);
}
.view_community .author-contact-channels .author-contact__lede{
  margin:0 0 var(--sp-12);
  font-size:var(--fs-14);
  line-height:1.5;
  color:var(--color-text);
}
.view_community .author-contact-channels .author-contact__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--sp-8);
}
.view_community .author-contact-channels .author-contact__list li{
  display:flex; align-items:center; gap:var(--sp-12);
  margin:0; padding:0;
  font-size:var(--fs-14);
  color:var(--color-text);
}
.view_community .author-contact-channels .author-contact__list li i{
  width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-8);
  background:var(--c-surface-0);
  color:var(--c-brand-500);
  font-size:14px;
  flex:0 0 24px;
}
.view_community .author-contact-channels .author-contact__list a{
  color:var(--color-link);
  text-decoration:none;
  font-weight:600;
  transition:color var(--dur-fast) var(--ease-standard);
}
.view_community .author-contact-channels .author-contact__list a:hover{
  color:var(--c-brand-600);
  text-decoration:underline;
}
@media (max-width: 767px){
  .view_community .author-contact-channels{
    padding:var(--sp-12) var(--sp-16);
  }
  .view_community .author-contact-channels .author-contact__list li{
    font-size:var(--fs-12);
  }
}

/* =========================================================================
 * COMMUNITY — Related Posts: separate band + 3-column card layout
 *
 * The related-posts row used to sit visually glued to the main content card
 * (same white page surface, no rhythm break) so it read as "more main
 * content". Wrap it in <section class="cm-related-band"> for a full-bleed
 * sub-surface band (--c-surface-50) with generous top/bottom padding — a
 * clear visual end-of-post boundary. Cards inside switch from the listing
 * float layout (thumb 45% left / meta padding-left 47.5%) to a vertical
 * stack so 3 items sit cleanly across the row at >=992px.
 * ========================================================================= */

/* Full-bleed band that breaks out of the main content rhythm. Forced to
   100vw via the negative-margin trick so it spans the viewport even if its
   parent (.tm-main or any wrapper) carries a max-width or padding. */
.cm-related-band{
  display:block;
  position:relative;
  width:100vw;
  margin:var(--sp-48) 0 0;
  margin-left:calc(50% - 50vw);
  padding:var(--sp-48) 0 var(--sp-60);
  background:var(--c-surface-100, #f0f0f0);
  border-top:1px solid var(--c-line);
  box-shadow:inset 0 8px 16px -12px rgba(15, 23, 42, .12);
}
.cm-related-band > .uk-container.related_post{
  /* Reset the band's row context so .related_post stays 1206px centred. */
  background:transparent;
  margin-top:0;
}
@media (max-width: 767px){
  .cm-related-band{
    padding:var(--sp-32) 0 var(--sp-40);
    margin-top:var(--sp-32);
  }
}
/* Force a real 3-up flex grid on the row that wraps the cards. The legacy
   markup uses .post-item.col-md-4 inside a Bootstrap row, but
   community style.css declares `.block-wrap .post-item { display:inline-table;
   width:100% }` and then `.related_post .block-wrap .post-item { width:33% }`
   — `inline-table` + the whitespace between sibling tags makes 3 x 33% +
   2 inline-whitespace gaps exceed 100% and the third card wraps. Switch
   the row to flexbox with an explicit gap and recompute the card width so
   the math always lands at three across at >=768px and stacks below. */
.view_community .related_post .block-wrap.layout-list.list-style-6 .block-inner.row{
  display:flex !important;
  flex-wrap:wrap;
  gap:var(--sp-20);
  margin-left:0;
  margin-right:0;
}
.view_community .related_post .block-wrap.layout-list.list-style-6 .block-inner.row > .post-item.full-info{
  width:calc((100% - var(--sp-20) * 2) / 3) !important;
  flex:0 0 calc((100% - var(--sp-20) * 2) / 3);
  padding:var(--sp-20) !important;
  margin:0 !important;
  float:none !important;
  display:flex !important;
  flex-direction:column;
}
@media (max-width: 767px){
  .view_community .related_post .block-wrap.layout-list.list-style-6 .block-inner.row > .post-item.full-info{
    width:calc((100% - var(--sp-20)) / 2) !important;
    flex:0 0 calc((100% - var(--sp-20)) / 2);
  }
}
@media (max-width: 479px){
  .view_community .related_post .block-wrap.layout-list.list-style-6 .block-inner.row > .post-item.full-info{
    width:100% !important;
    flex:0 0 100%;
  }
}

.view_community .related_post .block-wrap.layout-list.list-style-6 .post-item.full-info .module-thumb{
  width:100% !important;
  float:none !important;
  margin-bottom:var(--sp-12);
}
.view_community .related_post .block-wrap.layout-list.list-style-6 .post-item.full-info .meta-info-container{
  padding-left:0 !important;
  height:auto !important;
  max-height:none !important;
}
.view_community .related_post .block-wrap.layout-list.list-style-6 .post-item.full-info .module-thumb .image-wrap{
  max-height:none;
  aspect-ratio:16/10;
}
.view_community .related_post .block-wrap.layout-list.list-style-6 .post-item.full-info .module-thumb .image-wrap .entry-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
}
.view_community .related_post .block-wrap.layout-list.list-style-6 .post-item.full-info .meta-info-container .grid-meta .entry-title{
  font-size:var(--fs-16);
  line-height:1.4;
  max-height:none;
}
.view_community .related_post .related-post-title{
  font-family:var(--font-heading, var(--font-base));
  font-size:var(--fs-30);
  font-weight:700;
  color:var(--color-heading);
  margin:0 auto var(--sp-32);
  padding-top:0;
  letter-spacing:var(--ls-heading, -.01em);
  text-align:center;
  max-width:750px;
}
@media (max-width: 991px){
  .view_community .related_post .block-wrap.layout-list.list-style-6 .post-item.full-info{
    margin-bottom:var(--sp-20);
  }
}

/* =========================================================================
 * COMMUNITY — Other Useful Content section (tokenise + bo + padding chuẩn)
 *
 * The .solution-project-case-study card at the bottom of detail pages
 * inherits a hard-coded `padding: 55px 0` from a generic
 * section[class*=solution-] rule plus a stray r-20 from .block-radius.
 * Re-anchor it to the design system inside the community context: use
 * --sp-section (clamp 48->96 px) for vertical breathing, sp-32 horizontal
 * gutter so the title and grid don't kiss the rounded corner, --r-20
 * radius via token, and a sp-32 top margin so it doesn't kiss the
 * Related Posts band above.
 * ========================================================================= */
.view_community .solution-project-case-study,
.view_community section.solution-project-case-study.special{
  padding:var(--sp-section, 60px) var(--sp-32, 32px) !important;
  border-radius:var(--r-20);
  margin:var(--sp-32, 32px) var(--sp-15, 15px) 0 !important;
  max-width:none;
  overflow:hidden;
}
.view_community .solution-project-case-study .uk-container{
  padding-left:0;
  padding-right:0;
}
.view_community .solution-project-case-study .mg-title{
  font-family:var(--font-heading, var(--font-base));
  font-size:var(--fs-30);
  font-weight:700;
  letter-spacing:var(--ls-heading, -.01em);
  color:var(--c-community-on-dark, #fff);
  margin:0 auto var(--sp-12);
}
.view_community .solution-project-case-study .mg-sub-title{
  color:var(--c-community-on-dark-muted, rgba(255,255,255,.78));
  font-size:var(--fs-16);
  margin:0 auto var(--sp-32);
  max-width:64ch;
}
.view_community .solution-project-case-study .row{
  margin-left:0;
  margin-right:0;
}
@media (max-width: 767px){
  .view_community .solution-project-case-study,
  .view_community section.solution-project-case-study.special{
    padding:var(--sp-40, 40px) var(--sp-20, 20px) !important;
    border-radius:var(--r-16);
    margin:var(--sp-24, 24px) var(--sp-15, 15px) 0 !important;
  }
  .view_community .solution-project-case-study .mg-title{ font-size:var(--fs-24); }
  .view_community .solution-project-case-study .mg-sub-title{ font-size:var(--fs-14); }
}

/* =========================================================================
 * COMMUNITY — Sidebar CTA card (was "Start a discussion")
 *
 * Comments retired so the old "Start a discussion" CTA no longer makes
 * sense. Repaint the same widget-join-cta surface as a brand-tinted
 * "Talk to sales / View pricing" card -- pulls from the same brand-50
 * surface language as the author-contact-channels block so the page reads
 * as one tonal family instead of three random CTA strips. The markup
 * carries an extra .widget-cta-pricing class for the new copy variant.
 * ========================================================================= */
.view_community .widget-join-cta{
  background:var(--c-brand-50);
  border:1px solid rgba(249,115,22,.22);
  border-radius:var(--r-12);
  padding:var(--sp-24) var(--sp-20);
  margin-top:var(--sp-24);
  text-align:center;
}
.view_community .widget-join-cta .cta-title{
  margin:0 0 var(--sp-8);
  font:700 var(--fs-18)/1.35 var(--font-heading, var(--font-base));
  color:var(--c-brand-700);
  letter-spacing:var(--ls-heading, -.01em);
}
.view_community .widget-join-cta .cta-desc{
  margin:0 0 var(--sp-16);
  font-size:var(--fs-14);
  line-height:1.55;
  color:var(--color-text);
}
.view_community .widget-join-cta .btn.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--sp-12) var(--sp-24);
  border-radius:var(--btn-radius);
  background:var(--c-brand-500);
  color:var(--c-surface-0);
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.view_community .widget-join-cta .btn.btn-primary:hover{
  background:var(--c-brand-600);
  transform:translateY(-1px);
}

/* =========================================================================
 * COMMUNITY P3 — comment thread polish
 *
 * Lift .comment-wrap .comment-list .comment from hairline-only separators to
 * individual rounded cards with the community surface, and give the reply
 * form a clearer affordance. Keeps the existing markup (no PHP changes), so
 * roll-back is just removing this block.
 * ========================================================================= */
.view_community .comment-wrap .comment-list{
  padding:0 !important;
  list-style:none;
  margin:0 0 var(--sp-24);
}
.view_community .comment-wrap .comment-list .comment{
  background:var(--card-community-bg);
  border:1px solid var(--card-community-border);
  border-radius:var(--r-12);
  padding:var(--sp-16) var(--sp-20);
  margin-bottom:var(--sp-12);
  position:relative;
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.view_community .comment-wrap .comment-list .comment:hover{
  border-color:var(--c-brand-200);
  box-shadow:var(--shadow-1);
}
/* Comments source rule painted a 1px bottom border between cards — neutralise
   now that each comment IS its own card. */
.view_community .comment-wrap .comment-list .comment,
.view_community .comment-wrap .comment-list .comment:last-child{
  border-bottom:1px solid var(--card-community-border);
}
/* Nested replies — indent + left rail in brand neutral. */
.view_community .comment-wrap .comment-list .comment .comment{
  margin-left:var(--sp-24);
  margin-top:var(--sp-12);
  border-left:3px solid var(--c-brand-200);
}
.view_community .comment-wrap .comment-list .comment article{
  padding-left:80px;
  padding-right:0;
  min-height:64px;
}
/* Avatar moves into the card padding (was 70px absolute, leaving the card
   looking lopsided once the bg/border kicked in). */
.view_community .comment-wrap .comment-list .comment .avatar,
.view_community .comment-wrap .comment-list .comment > a > img,
.view_community .comment-wrap .comment-list .comment > .avatar{
  position:absolute;
  left:var(--sp-20); top:var(--sp-16);
  width:56px; height:56px;
  border-radius:var(--r-circle);
  border:2px solid var(--c-surface-0);
  box-shadow:0 0 0 1px var(--c-line);
}

/* Reply form: same surface as a card, focus ring on the textarea. */
.view_community .comment-reply{
  background:var(--card-community-bg);
  border:1px solid var(--card-community-border);
  border-radius:var(--r-12);
  padding:var(--sp-20);
  margin-top:var(--sp-24);
}
.view_community .comment-reply .editor textarea{
  border-radius:var(--r-8);
  border:1px solid var(--c-line);
  background:var(--c-surface-0);
  font-size:var(--fs-14);
  line-height:1.5;
  padding:var(--sp-12) var(--sp-16);
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.view_community .comment-reply .editor textarea:focus{
  outline:none;
  border-color:var(--c-brand-400);
  box-shadow:var(--shadow-focus);
}
.view_community .comment-reply .name-author{
  color:var(--color-heading);
  font-family:var(--font-heading, var(--font-base));
}

/* the band — identical surface chip on every page */
.breadcrumb, .uk-breadcrumb, .breadcrumb-list{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4);
  margin:0 !important;
  padding:var(--sp-8) var(--sp-12) !important;
  background:var(--c-surface-50) !important;
  border:1px solid var(--c-line) !important;
  border-radius:var(--r-8) !important;
  box-shadow:none !important; list-style:none;
  font-size:var(--fs-12); line-height:1.4; color:var(--color-text-muted);
}
.breadcrumb > li, .uk-breadcrumb > li, .breadcrumb-list > li, .breadcrumb-item{
  display:inline-flex; align-items:center; margin:0; font-size:var(--fs-12);
}
.breadcrumb a, .uk-breadcrumb a, .breadcrumb-link{
  color:var(--color-text-muted); text-decoration:none;
}
.breadcrumb a:hover, .uk-breadcrumb a:hover, .breadcrumb-link:hover{
  color:var(--c-brand-500); text-decoration:underline;
}
.breadcrumb .active a, .breadcrumb .active, .breadcrumb-current{
  color:var(--color-heading); font-weight:var(--fw-semibold);
}

/* ---- Main header menu: punch up the top-level nav labels ----
   Real markup (templates/cmsmart/layouts/menus/menu-top.php) renders
   SERVICES / PROJECTS / SOLUTION / COMMUNITY / ABOUT US as
   `.cmsmart-main-menu-i > a.title-menu`. Base rule in custom.css sets them at
   14px / line-height 14px which reads thin against the hero. Bump to 16px /
   700 + tighter line-height so the bar feels confident. Scoped to the direct
   child of `.cmsmart-main-menu-i` so dropdown rows inside submenus are
   untouched. !important on size/weight beats per-view component rules that
   re-declare the title-menu font (e.g. solution view). */
.cmsmart-main-menu .cmsmart-main-menu-i > a.title-menu{
  font-size:15px !important;          /* small bump from 14px — now possible because the menu strip is wider */
  font-weight:var(--fw-bold) !important;
  line-height:1.4;
  letter-spacing:0;
  text-shadow:none;
}
.nav-seller-global div.cmsmart-main-menu div.cmsmart-main-menu-i{
  padding:0 var(--sp-10);             /* slight reduction from --sp-20 */
}
/* Pin the menu strip to a fixed band between the logo (left) and the right
   group (Pricing & Plans + avatar), so it never overlaps the logo and never
   wraps regardless of the parent column's width. Earlier attempts with
   width:auto + justify-content:flex-end overflowed leftward over the logo
   because the parent .nav-seller-global is only 200px wide. */
.navbar.desktop-device-nav{
  position:relative;
}
/* navbar-brand IS the positioning context by default (custom.css + menu.css
   both set position:relative on it). With width:186px and our absolute child
   asking left:240 right:260, browsers clamp width to 0 → SERVICES slides
   off-screen to x=-120. Force navbar-brand to static so the absolute child
   resolves to the outer .navbar (1073px wide), giving the intended band. */
.navbar.desktop-device-nav .navbar-brand{
  position:static !important;
}
.full-navigation .nav-seller-global{
  position:absolute !important;
  left:240px;                       /* logo wordmark ends near 220px */
  right:260px;                      /* clears the Pricing & Plans pill + avatar */
  top:0;
  bottom:0;
  width:auto !important;
  display:flex;
  align-items:center;
  justify-content:center;           /* center the menu strip in the available band */
  padding:0;
}
/* Defensive override for the menu.css media-query rule
   `@media (max-width:1750px) and (min-width:1024) .nav-seller-global { width:0 }`
   which beats our width:auto silently when navbar-brand had been the
   positioning context. Keep width:auto on every viewport. */
@media (max-width:1750px){
  .full-navigation .nav-seller-global{ width:auto !important; }
}
.cmsmart-page-theme .nav-seller-global .subnav.cmsmart-main-menu{
  position:static !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  top:auto !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center;
  justify-content:center;          /* center menu items in the band */
  padding:0;
  background:transparent !important;
  box-shadow:none !important;
}
.nav-seller-global div.cmsmart-main-menu div.cmsmart-main-menu-i{
  float:none !important;
  display:flex !important;
  align-items:center;
  white-space:nowrap;
  background:transparent !important;
  padding:0 var(--sp-10) !important;
}
/* Legacy rule in menu.css (`.cmsmart-main-menu-i:hover { height: 1000px }`)
   was a hack to extend the hover region in the OLD block-float layout. In
   our flex parent with `align-items:center`, a 1000px-tall LI on hover gets
   center-aligned: its top jumps to roughly -500px above the navbar and the
   absolutely-positioned submenu (top:55px relative to LI) lands around
   viewport y=-373 — totally off-screen. Pin the LI height so hover doesn't
   move the layout. */
.nav-seller-global div.cmsmart-main-menu div.cmsmart-main-menu-i:hover{
  height:auto !important;
}
/* Anchor every dropdown to the LI's bottom edge so there's NO unhover gap on
   the way down. The 20px top padding inside the submenu (menu.css) keeps the
   first row visually separated from the label. */
.cmsmart-services-submenu,
.solution-mega-menu,
.cmsmart-main-menu-list,
#community-submenu{
  top:100% !important;
  margin-top:0 !important;
}
/* SERVICES & PROJECTS mega-menu alignment.
   The nav band is `display:flex; justify-content:center` inside an absolutely
   positioned `.nav-seller-global` spanning logo→right-CTA. Each trigger LI
   sits mid-band, so per-LI `left:0` pushed the 720px panel past Pricing into
   the avatar; centering inside the band made the panel jut off both sides
   because 720px is wider than the gap between SERVICES and ABOUT US.
   Drop the LI positioning context and pin both panels' right edge to the
   right of the nav band — the panel grows leftward, fits between SERVICES
   and the right-CTA group, and looks consistent for either trigger. */
.services-menu-parent,
.projects-menu-parent{
  position:static !important;
}
.services-menu-parent > .cmsmart-services-submenu,
.projects-menu-parent > .cmsmart-services-submenu{
  left:auto !important;
  right:0 !important;
  max-width:720px;
}
@media (max-width:1280px){
  .services-menu-parent > .cmsmart-services-submenu,
  .projects-menu-parent > .cmsmart-services-submenu{ max-width:640px; }
}
@media (max-width:1024px){
  .services-menu-parent > .cmsmart-services-submenu,
  .projects-menu-parent > .cmsmart-services-submenu{ max-width:560px; }
}
/* Long item titles ("3D Car Wrap Design Solution: …") were forcing the
   grid 1fr columns past their intrinsic min-content size, expanding the
   whole panel past 720px and (with right:0 anchored) shoving the left edge
   off-screen. Allow the cells to shrink below content size and let the
   anchor text wrap onto a second line. */
.services-menu-parent > .cmsmart-services-submenu .services-submenu-wrapper,
.projects-menu-parent > .cmsmart-services-submenu .services-submenu-wrapper{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
}
.services-menu-parent > .cmsmart-services-submenu .service-link,
.projects-menu-parent > .cmsmart-services-submenu .service-link{
  white-space:normal;
  overflow-wrap:anywhere;
}

/* ---- Active top-nav state ----
   menu-top.php now marks `.cmsmart-main-menu-i.active` + `.title-menu.active`
   when the current URL's first segment matches a menu link (so
   /community/boost-your-… still highlights COMMUNITY). Visual: brand-color
   label + a 3px underline indicator centered under the label. */
.cmsmart-main-menu .cmsmart-main-menu-i.active > a.title-menu,
.cmsmart-main-menu a.title-menu.active{
  color:var(--c-brand-500) !important;
  position:relative;
}
.cmsmart-main-menu .cmsmart-main-menu-i.active > a.title-menu::after,
.cmsmart-main-menu a.title-menu.active::after{
  content:'';
  position:absolute;
  left:var(--sp-10);
  right:var(--sp-10);
  bottom:-6px;
  height:3px;
  background:var(--c-brand-500);
  border-radius:var(--r-2);
}
/* Mega-menu / dropdown leaves keep the brand colour on their active row. */
.solution-mega-link.active,
.cmsmart-main-menu-list a.active{
  color:var(--c-brand-600) !important;
  font-weight:var(--fw-semibold) !important;
}
.navbar.desktop-device-nav .header-right.span4l{
  right:24px;                       /* was 65px — anchor the right group near the edge */
}
@media (max-width:1199px){
  .full-navigation .nav-seller-global{ left:200px; right:230px; }
}