@font-face {
  font-family: "Maragsa-Display-400";
  src: url("../fonts/vendor/semantic/Maragsa-Display-400.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Global / app-wide styles */

nav {
  margin-bottom: 40px !important;
}

/* Semantic UI: right-most item border in fixed main menu */
.ui.fixed.main.menu .right.menu > .item:last-of-type {
  border-right: 1px solid rgba(34, 36, 38, 0.0980392);
}

/* Mobile nav vertical menu (hidden by default) */
nav .mobile.only.row .ui.vertical.menu {
  margin-top: 40px;
  display: none;
}

/* Flash messages spacing */
.flashes > .ui.message:last-of-type {
  margin-bottom: 2rem;
}

table.selectable tr:hover {
  cursor: pointer !important;
}

/* Override Semantic UI inverted black menu to use purple */
.ui.fixed.inverted.black.main.menu {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.ui.inverted.black.main.menu {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Mobile navigation */
.mobile.only .ui.fixed.inverted.black.main.menu {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Vertical mobile menu */
.ui.fixed.vertical.fluid.menu {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Add space for fixed navigation */
body {
    padding-top: 70px; /* Adjust based on your nav height */
}

/* Dark mode variables and styling */
body.dark-mode {
  --ol-bg: #050316;
  --ol-surface: #070b17;
  --ol-surface-soft: #0b1020;
  --ol-border-subtle: rgba(148,163,184,0.28);
  --ol-text-main: #e5e7eb;
  --ol-text-muted: #9ca3af;
  --ol-accent-purple: #a855f7;
  --ol-gold-soft: rgba(253,224,71,0.15);
  --ol-gold-strong: rgba(253,224,71,0.32);
  
  background: radial-gradient(circle at top, #1f143e 0%, #050316 55%, #020012 100%);
  color: var(--ol-text-main);
}

/* Logo continuous spin animation on hover */
@keyframes logoSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Target both mobile and desktop logo images */
.ui.menu a img[alt="OpenLedger"] {
  transition: transform 0.2s ease;
}

.ui.menu a:hover img[alt="OpenLedger"] {
  animation: logoSpin 2s linear infinite; /* Changed from 1s to 2s for slower spin */
}

/* Stop spinning when not hovering */
.ui.menu a img[alt="OpenLedger"]:not(:hover) {
  animation: none;
}

h1 {
  font-family: "Maragsa-Display-400", serif;
  font-weight: 400;
}