/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 *= require accessibility
 */

/* ===============================================
   NOHEMI FONT FAMILY
   =============================================== */

@font-face {
  font-family: 'Nohemi';
  src: url("/Nohemi-Regular.woff2") format('woff2'),
       url("/Nohemi-Regular.woff") format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nohemi';
  src: url("/Nohemi-Light.woff2") format('woff2'),
       url("/Nohemi-Light.woff") format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nohemi';
  src: url("/Nohemi-Medium.woff2") format('woff2'),
       url("/Nohemi-Medium.woff") format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nohemi';
  src: url("/Nohemi-Bold.woff2") format('woff2'),
       url("/Nohemi-Bold.woff") format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Apply Nohemi as default font family */
body {
  font-family: 'Nohemi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Modal Overlay Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(75, 85, 99, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.modal-overlay:not(.modal-hidden) {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 24rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.2s ease-in-out;
}

.modal-overlay:not(.modal-hidden) .modal-content {
  transform: scale(1);
}

.modal-hidden {
  display: none !important;
}

/* Ensure modal appears above everything */
#connectModal {
  z-index: 9999 !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* Switch accounts link styles */
#switchAccountsLink {
  transition: color 0.15s ease-in-out;
}

#switchAccountsLink:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

/* ===============================================
   CURSOR STYLES FOR INTERACTIVE ELEMENTS
   =============================================== */

/* All interactive elements should have pointer cursor */
button,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"],
a:not([aria-disabled="true"]),
input[type="checkbox"],
input[type="radio"],
select,
[tabindex]:not([tabindex="-1"]) {
  cursor: pointer;
}

/* Text inputs and textareas should have text cursor */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea {
  cursor: text;
}

/* Disabled elements should have not-allowed cursor */
button:disabled,
[type="button"]:disabled,
[type="submit"]:disabled,
[type="reset"]:disabled,
[role="button"][aria-disabled="true"],
a[aria-disabled="true"],
input:disabled,
select:disabled,
textarea:disabled,
.disabled {
  cursor: not-allowed;
}

/* Links that open in new window should indicate external */
a[target="_blank"]:not([aria-disabled="true"]):hover {
  cursor: pointer;
}

/* Form labels should have pointer cursor when associated with interactive elements */
label[for]:not([for=""]) {
  cursor: pointer;
}

/* Clickable cards and containers */
.clickable-card,
.card[onclick],
.card[data-action],
[data-action],
[onclick] {
  cursor: pointer;
}

/* Specific cursor styles for different interactive states */

/* Hover states for buttons */
button:not(:disabled):hover,
[type="button"]:not(:disabled):hover,
[type="submit"]:not(:disabled):hover,
[type="reset"]:not(:disabled):hover,
[role="button"]:not([aria-disabled="true"]):hover {
  cursor: pointer;
}

/* Mobile menu button */
.mobile-menu-button {
  cursor: pointer;
}

/* Modal close buttons */
.modal-close,
.dialog-close,
[aria-label*="close" i],
[aria-label*="Close" i] {
  cursor: pointer;
}

/* Navigation links */
nav a:not([aria-disabled="true"]) {
  cursor: pointer;
}

/* Social media connection buttons */
button[onclick*="showConnectModal"],
button[onclick*="hideConnectModal"],
button[onclick*="proceedWithConnection"] {
  cursor: pointer;
}

/* Password visibility toggle */
button[onclick*="togglePasswordVisibility"] {
  cursor: pointer;
}

/* Tab buttons */
button[role="tab"] {
  cursor: pointer;
}

/* Skip links */
.skip-link {
  cursor: pointer;
}

/* File input button */
input[type="file"] {
  cursor: pointer;
}

/* Range slider */
input[type="range"] {
  cursor: grab;
}

input[type="range"]:active {
  cursor: grabbing;
}

/* Resize handles */
textarea[resize="both"],
textarea[resize="horizontal"],
textarea[resize="vertical"] {
  cursor: text;
}

/* Ensure no cursor styles on non-interactive elements */
img:not([onclick]):not([data-action]),
svg:not([onclick]):not([data-action]),
span:not([onclick]):not([data-action]):not([tabindex]),
div:not([onclick]):not([data-action]):not([tabindex]):not([role="button"]) {
  cursor: default;
}

/* Touch target improvements for mobile */
@media (max-width: 768px) {
  button,
  [type="button"],
  [type="submit"],
  [type="reset"],
  [role="button"],
  a:not([aria-disabled="true"]),
  input[type="checkbox"],
  input[type="radio"],
  select {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ===============================================
   WAITLIST FORM FOCUS STATES
   =============================================== */

/* Override browser default focus styles for email input */
input[type="email"]:focus {
  outline: none !important;
  outline-color: #CDF545 !important;
  border-color: #CDF545 !important;
  box-shadow: 0 0 0 2px #CDF545 !important;
}

/* Ensure autofill doesn't override focus styles */
input[type="email"]:focus:-webkit-autofill {
  outline: none !important;
  outline-color: #CDF545 !important;
  border-color: #CDF545 !important;
  box-shadow: 0 0 0 2px #CDF545 !important;
}