/*
 * CNG reusable components (DESIGN.md). Every value comes from cng-tokens.css.
 *
 * In Elementor: add the class in Advanced > CSS Classes of the widget or container.
 *   Button widget  -> cng-btn (primary) | cng-btn cng-btn--dark | cng-btn cng-btn--light
 *                     size: cng-btn--s / cng-btn--l
 *   Heading/Text   -> cng-eyebrow | cng-link (on a link)
 *   Container      -> cng-surface-dark | cng-surface-subtle | cng-surface-red
 * In HTML: <a class="cng-btn" href="...">Request a quote <svg class="lucide cng-go"><use href="#i-arrow-right"/></svg></a>
 */

/* Buttons: plain links in HTML, or Elementor's Button widget when the class is on the widget wrapper */
.cng-btn:is(a, button),
.cng-btn .elementor-button{
  --h:3rem;--px:1.375rem;--fs:.9375rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:var(--h);padding:0 var(--px);border:1px solid transparent;border-radius:var(--cng-radius-control);
  background:var(--cng-action-primary);color:var(--cng-text-inverse);
  font:600 var(--fs)/1.2 var(--cng-font-body);letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--cng-dur-fast) ease,border-color var(--cng-dur-fast) ease,color var(--cng-dur-fast) ease,transform var(--cng-dur-fast) ease;
}
.cng-btn:is(a, button):hover,.cng-btn .elementor-button:hover{background:var(--cng-action-primary-hover);color:var(--cng-text-inverse)}
.cng-btn:is(a, button):active,.cng-btn .elementor-button:active{background:var(--cng-action-primary-pressed);transform:scale(.98)}
.cng-btn--dark:is(a, button),.cng-btn--dark .elementor-button{background:var(--cng-surface-dark);color:var(--cng-text-inverse)}
.cng-btn--dark:is(a, button):hover,.cng-btn--dark .elementor-button:hover{background:var(--cng-graphite)}
.cng-btn--light:is(a, button),.cng-btn--light .elementor-button{background:var(--cng-surface-page);color:var(--cng-text-primary);border-color:var(--cng-border-subtle)}
.cng-btn--light:is(a, button):hover,.cng-btn--light .elementor-button:hover{background:var(--cng-surface-subtle);color:var(--cng-text-primary)}
.cng-btn--s:is(a, button),.cng-btn--s .elementor-button{--h:2.5rem;--px:1rem;--fs:.875rem}
.cng-btn--l:is(a, button),.cng-btn--l .elementor-button{--h:3.5rem;--px:1.75rem;--fs:1rem}
.cng-btn .lucide,.cng-btn .elementor-button-icon svg{width:1.15em;height:1.15em}
.cng-go,.cng-btn .elementor-button-icon{transition:transform var(--cng-dur-base) var(--cng-ease)}
.cng-btn:hover .cng-go,.cng-btn .elementor-button:hover .elementor-button-icon{transform:translateX(4px)}
.cng-btn:focus-visible,.cng-btn .elementor-button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

/* Low-emphasis text link with a growing underline */
a.cng-link,.cng-link a{display:inline-flex;align-items:center;gap:.45rem;color:var(--cng-action-primary);font-weight:600;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:background-size var(--cng-dur-slow) var(--cng-ease)}
a.cng-link:hover,.cng-link a:hover{background-size:100% 1.5px;color:var(--cng-action-primary)}
a.cng-link:hover .cng-go{transform:translate(3px,-3px)}

/* Eyebrow: page intros only, never above every section */
.cng-eyebrow,.cng-eyebrow :is(h1,h2,h3,h4,h5,h6,p,span){color:var(--cng-action-primary);font:600 .8125rem/1.3 var(--cng-font-body);letter-spacing:.08em;text-transform:uppercase}

/* Section surfaces (page rhythm from the Design System) */
.cng-surface-dark{background:var(--cng-surface-dark);color:var(--cng-text-inverse-secondary);--focus-ring:#FFFFFF99}
.cng-surface-dark :is(h1,h2,h3,h4,strong){color:var(--cng-text-inverse)}
.cng-surface-subtle{background:var(--cng-surface-subtle)}
.cng-surface-red{background:var(--cng-action-primary);color:var(--cng-text-inverse);--focus-ring:#FFFFFFCC}
.cng-surface-red :is(h1,h2,h3,h4,p,strong){color:var(--cng-text-inverse)}

@media (prefers-reduced-motion:reduce){
  .cng-btn:is(a, button),.cng-btn .elementor-button,.cng-go,a.cng-link{transition:none}
}