/**
 * Dune theme overrides
 * 
 * This file contains the most important overrides that should take
 * precedence over all other styles.
 */

:root {
  /* Override the CSS variables */
  --color-accent: #9A4EAE !important;
  --color-accent-soft: #6A3A75 !important;
  --color-sandy: #BB8D55 !important;  /* Sandy color for hover effects */
  
  /* Override Tailwind focus ring colors to use sandy color */
  --tw-ring-offset-color: #000 !important;
  --tw-ring-color: rgba(187, 141, 85, 0.5) !important;
  
  /* Fix any white dividers in flex containers */
  --tw-space-x-reverse: 0 !important;
  --tw-space-y-reverse: 0 !important;
  --tw-divide-opacity: 0 !important;
  --tw-divide-x-reverse: 0 !important;
  --tw-divide-y-reverse: 0 !important;
  
  /* Fix Tailwind border colors */
  --tw-border-opacity: 1 !important;
}

/* Override the global link styles from Tailwind */
html a, html :where(a) {
  color: var(--color-text-primary) !important;
  text-decoration: none;
}

html a:hover, html :where(a):hover {
  color: var(--color-accent) !important;
}

/* Specific nav link styling */
.dune-nav a {
  color: var(--color-text-primary) !important;
}

.dune-nav a:hover {
  color: var(--color-accent) !important;
}

/* Additional explicit selector overrides */
html body {
  --tw-ring-offset-color: #000 !important;
  --tw-ring-color: rgba(187, 141, 85, 0.5) !important;
}

/* Force button and input focus styles */
button:focus, 
a:focus,
input:focus, 
select:focus, 
textarea:focus {
  outline: none !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) #000 !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--color-text-secondary) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

/* Remove focus styles from navigation links when clicked with a mouse */
.dune-nav a:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Only show focus styles when using keyboard navigation for nav links */
.dune-nav a:focus-visible {
  outline: none !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) #000 !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--color-text-secondary) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

/* Add this class to any element that needs the correct accent colors */
.dune-accent {
  --color-accent: #9A4EAE !important;
  --color-accent-soft: #6A3A75 !important;
  --tw-ring-offset-color: #000 !important;
  --tw-ring-color: rgba(187, 141, 85, 0.5) !important;
}

/* Fix spacing and dividers */
.space-y-0, .space-y-1, .space-y-2, .space-y-3, .space-y-4, .space-x-0, .space-x-1, .space-x-2, .space-x-3, .space-x-4,
[class*="space-"], [class*="divide-"] {
  --tw-divide-opacity: 0 !important;
  --tw-divide-y-opacity: 0 !important;
  --tw-divide-x-opacity: 0 !important;
  --tw-divide-color: transparent !important;
}

/* Coming soon container specific style */
h2:contains("COMING SOON") + div, 
div:has(h2:contains("COMING SOON")),
div:has(p:contains("under development")) {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Additional form element overrides */
input, select, textarea, button {
  --tw-ring-color: rgba(187, 141, 85, 0.5) !important;
}

/* Fix form field border colors */
[type='text'], 
input:where(:not([type])), 
[type='email'], 
[type='url'], 
[type='password'], 
[type='number'], 
[type='date'], 
[type='datetime-local'], 
[type='month'], 
[type='search'], 
[type='tel'], 
[type='time'], 
[type='week'], 
[multiple], 
textarea, 
select {
  border-color: var(--color-sandy, #BB8D55) !important;
  background-color: var(--color-background-alt, #23201D) !important;
}

/* Fix help text and form text to use Dune theme colors */
.helptext, .form-text, form small, .text-muted, form .form-text {
  color: var(--color-text-secondary, #BB8D55) !important;
}

/* Style form text specifically */
small, .small, form .text-muted {
  color: var(--color-text-secondary, #BB8D55) !important;
}

/* Password rules text */
form div > small, form p > small, .password-rules, form .text-muted {
  color: var(--color-text-secondary, #BB8D55) !important;
}

/* Form field labels and titles */
label, .form-label, form label, legend, .control-label, .formField-label,
form legend, [for], [id*="label"], label[for], div[class*="label"] {
  color: var(--color-text-secondary, #BB8D55) !important;
  font-weight: 700 !important;
}

/* Style required field markers - with higher specificity */
.asteriskField, 
.required, 
.asterisk, 
label em, 
label > span, 
label .asteriskField,
.form-label .asteriskField,
.control-label .asteriskField,
span.asteriskField,
.formField-label .asteriskField,
form .asteriskField {
  color: var(--color-accent, #9A4EAE) !important; /* Purple accent color for asterisks */
  font-weight: bold !important;
  opacity: 1 !important;
}

/* Style overrides for specific elements */
.dune-nav {
  border-color: rgba(187, 141, 85, 0.5) !important;
}

/* Make sure all horizontal rules match our theme */
hr {
  border-color: var(--color-text-secondary) !important;
  border-top-color: var(--color-text-secondary) !important;
}

/* Additional direct style for asterisks */
span[class="asteriskField"], 
span.asteriskField,
.form-group label .asteriskField {
  color: var(--color-accent, #9A4EAE) !important;
  font-weight: bold !important;
  opacity: 1 !important;
  font-size: 1.2em !important;
}

/* Nav dropdown menu styling */
#dropdown-user,
.vs-dropdown-content {
  background-color: rgba(35, 32, 29, 0.8) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border: 1px solid rgba(187, 141, 85, 0.3) !important;
  z-index: 9999 !important; /* High z-index to stay on top */
}

/* Ensure dropdown links are clickable */
#dropdown-user a,
.vs-dropdown-content a {
  position: relative !important;
  z-index: 10000 !important;
  display: block !important;
}

/* Style dropdown links hover state */
#dropdown-user a:hover,
.vs-dropdown-content a:hover {
  background-color: rgba(154, 78, 174, 0.2) !important;
}

/* Fix section headers z-index */
h3.section-header {
  position: static !important;
  z-index: auto !important;
}

/* Override Versoly UI dropdown behavior */
.vs-dropdown-content,
.vs-dropdown-wrapper {
  z-index: 10000 !important;
}

/* Ensure dropdown is above all other elements when visible */
.z-50,
div[class*="z-50"] {
  z-index: 50 !important; /* Native z-50 restoration */
}

/* Fix strong tag styling ONLY in prose content (privacy/terms pages) to use soft purple spice color */
.prose strong,
.prose b,
.prose-lg strong,
.prose-lg b {
  color: var(--color-accent-soft, #6A3A75) !important;
  font-weight: 700 !important;
}