/* ==========================================================================
   The British Roofer - Industrial style layer
   --------------------------------------------------------------------------
   Dominant colour  : var(--rb-slate)   Charcoal Slate (solid, industrial)
   CTA / accent trim: var(--rb-slate)   Charcoal Slate (primary CTA); amber is a sparing accent

   Palette tokens are declared once in kooboo-var.css, loaded in <head> on
   every page before this file; this layer only consumes them.
   Loaded last in <head> on every page, after the Elementor kit and the
   generated per-element CSS, so the CTA treatment and text legibility stay
   stable without editing Elementor output.
   ========================================================================== */

/* Palette tokens are declared once in kooboo-var.css */

/* ---------- Call to action: solid Charcoal Slate, white text ---------- */
.elementor-kit-1215 button,
.elementor-kit-1215 input[type="button"],
.elementor-kit-1215 input[type="submit"],
.elementor-kit-1215 .elementor-button,
.elementor-button {
  background-color: var(--rb-slate) !important;
  color: #FFFFFF !important;
}

.elementor-button:hover,
.elementor-button:focus {
  background-color: var(--rb-slate-dark) !important;
  color: #FFFFFF !important;
}

.elementor-button:hover svg,
.elementor-button:focus svg {
  fill: #FFFFFF !important;
}

.elementor-button:not(:hover):not(:focus) svg {
  fill: #FFFFFF !important;
}

/* the floating back-to-top control keeps its own gradient look */
.elementor-1225 .elementor-element.elementor-element-18c9e94 .elementor-button {
  background-color: transparent !important;
}

/* ---------- Accent word inside section titles follows the slate primary ---------- */
.elementskit-section-title-wraper .elementskit-section-title > span {
  color: var(--rb-slate) !important;
}

/* ---------- Navigation: slate label and slate underline pointer ---------- */
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus {
  color: var(--rb-slate) !important;
  fill: var(--rb-slate) !important;
}

/* ---------- Form controls stay readable ---------- */
.elementor-widget-form .elementor-field-label,
.elementor-widget-form .elementor-field-group > label {
  color: var(--rb-slate) !important;
}

.elementor-widget-form .elementor-field::placeholder {
  color: var(--rb-muted) !important;
  opacity: 1 !important;
}

/* ---------- Stacked icon hover keeps a white glyph on the slate fill ---------- */
.elementor-view-stacked .elementor-icon:hover,
.elementor-view-stacked .elementor-icon:hover i,
.elementor-view-stacked .elementor-icon:hover svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ---------- Navigation underline pointer: slate instead of amber ---------- */
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after {
  background-color: var(--rb-slate) !important;
}

.elementor-widget-nav-menu .elementor-nav-menu--main.e--pointer-framed .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main.e--pointer-framed .elementor-item:after {
  border-color: var(--rb-slate) !important;
}