/* ============================================
   ROOT THEME VARIABLES
   ============================================ */
:root {
  /* Primary colours */
  --rm-background: #262637;   /* dark background */
  --rm-text:       #ffffff;   /* primary text colour */
  --rm-accent:     #00deb6;   /* teal accent */
  --rm-accent-dark:#009277;   /* teal hover state */

  /* Secondary accents */
  --rm-medium-blue:  #0499a8;
  --rm-dark-blue:    #036b75;
  --rm-medium-green: #009177;
  --rm-dark-green:   #005e4d;
  --rm-bright-green: #02cd73;
  --rm-yellow:       #fed944;
  --rm-red:          #f96347;
  --rm-off-white:    #f4f4f5;
}


/* ============================================
   GLOBAL PAGE STYLING
   ============================================ */
body {
  background-color: var(--rm-background);
  color: var(--rm-text);
  font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--rm-text);
  margin-bottom: 0.5rem;
}


/* ============================================
   LINKS
   ============================================ */
a {
  color: var(--rm-accent);
  text-decoration: none;
}
a:hover {
  color: var(--rm-accent-dark);
  text-decoration: underline;
}


/* ============================================
   BUTTONS
   ============================================ */
.button,
.btn,
.elementor-button {
  background-color: var(--rm-accent);
  color: var(--rm-background);
  border: none;
  padding: 0.75em 1.25em;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.button:hover,
.btn:hover,
.elementor-button:hover {
  background-color: var(--rm-accent-dark);
  color: var(--rm-background);
}


/* ============================================
   CARDS / PANELS
   ============================================ */
.card,
.panel {
  background-color: #323242;
  border-radius: 6px;
  padding: 1.5rem;
  color: var(--rm-text); /* FIXED */
}


/* ============================================
   TABLES
   ============================================ */
table {
  width: 100%;
  border-collapse: collapse;
  color: var(--rm-text);
}

table th,
table td {
  padding: 0.75rem;
  border: 1px solid #444;
}

table thead {
  background-color: #323242;
}


/* ============================================
   HEADER / MENU BAR
   ============================================ */

/* Header background */
.header,
.elementor-location-header,
.elementor-sticky--effects {
  background-color: var(--rm-background) !important;
}

/* Menu item text */
.elementor-nav-menu a,
.elementor-item {
  color: var(--rm-text) !important;
}

/* Hover colour */
.elementor-nav-menu a:hover,
.elementor-item:hover {
  color: var(--rm-accent) !important;
}

/* Active (current page) */
.elementor-item.elementor-item-active {
  color: var(--rm-accent) !important;
}

/* Mobile menu icon */
.elementor-menu-toggle {
  color: var(--rm-text) !important;
}

.elementor-menu-toggle:hover {
  color: var(--rm-accent) !important;
}
/* ============================================
   FORCE GLOBAL DARK BACKGROUND EVERYWHERE
   ============================================ */

/* Covers all main page wrappers across Spexo + Elementor */
body,
html,
.site,
#page,
#content,
.spx-container,
.spx-section,
.spx-main,
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap {
    background-color: var(--rm-background) !important;
}

/* Remove default white Elementor inner section backgrounds */
.elementor-section.elementor-top-section,
.elementor-section.elementor-inner-section {
    background-color: var(--rm-background) !important;
}

/* Fix for Spexo sections that inject their own white BG */
.spx-section-default,
.spx-section-content,
.spx-block,
.spx-layout {
    background: var(--rm-background) !important;
}

/* Force footer backgrounds dark */
footer,
.site-footer,
.spx-footer,
footer * {
    background-color: var(--rm-background) !important;
    color: var(--rm-text) !important;
}

/* Clean backgrounds on widgets, forms, sidebars */
.widget,
.widget-area,
.spx-sidebar,
.elementor-widget {
    background-color: transparent !important;
}

/* Remove background on buttons unless explicitly styled */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    background-color: var(--rm-accent);
    color: var(--rm-background);
}
/* Hide default cursor */
body, * {
  cursor: none !important;
}

/* Custom teal cursor */
.custom-cursor {

  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--rm-accent);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 999999;
  box-shadow: 0 0 20px var(--rm-accent), 
              0 0 40px var(--rm-accent);
  transition: transform 0.05s linear;
}
/* Hide the system cursor everywhere, including menus */
html, body, *, *::before, *::after {
  cursor: none !important;
}
/* PERMANENTLY hide system cursor everywhere */
html, body, *, *::before, *::after {
    cursor: none !important;
}

/* PERMANENT override for Elementor nav menu */
.elementor-nav-menu *,
.elementor-nav-menu a,
.elementor-item,
.elementor-item a,
.elementor-item:hover,
.elementor-item:focus,
.elementor-item a:hover,
.elementor-item a:focus {
    cursor: none !important;
}