/* Tempora Network — layer brand su DefaultRevamp (Fomantic UI).
   Token identici a Website/src/styles/global.css. Carica DOPO custom.css.
   Dark mode = `body.dark`. Dettagli e gotcha: README.md */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap");

/* ── Token ── */
:root {
  --bg-deep: #e8eaf1;
  --bg: #f2f1f7;
  --bg-2: #f7f6fb;
  --surface: #ffffff;
  --surface-2: #faf9fd;

  --gold: #7c5cff;
  --gold-light: #9b82ff;
  --gold-deep: #5b3fd9;
  --ink: #f5f3ff;
  /* il giallo non regge il testo su bianco: in chiaro l'accento scurisce */
  --accent: #5b3fd9;
  --accent-deep: #4930b0;
  --discord: #5865f2;
  --discord-dark: #4a57e8;

  --text: #1e1a2e;
  --text-dim: #565070;
  --text-mute: #837c99;

  --border: rgba(30, 26, 46, 0.1);
  --border-strong: rgba(30, 26, 46, 0.18);
  --border-accent: rgba(91, 63, 217, 0.5);

  --shadow-sm: 0 1px 2px rgba(30, 26, 46, 0.06), 0 2px 8px rgba(30, 26, 46, 0.05);
  --shadow-md: 0 6px 18px -6px rgba(30, 26, 46, 0.18), 0 2px 6px rgba(30, 26, 46, 0.06);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;

  --header-bg: rgba(255, 255, 255, 0.82);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-ui: "Outfit", system-ui, -apple-system, sans-serif;
}

body.dark,
html.dark-mode,
body.dark-mode,
.dark-mode,
[data-theme="dark"] {
  --bg-deep: #0a0713;
  --bg: #140f20;
  --bg-2: #1c1630;
  --surface: #181125;
  --surface-2: #221a36;

  /* su fondo scuro l'accento può essere il giallo del wordmark */
  --accent: #7c5cff;
  --accent-deep: #9b82ff;

  --text: #efecf7;
  --text-dim: #b6abce;
  --text-mute: #8d8574;

  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);

  --header-bg: rgba(11, 9, 4, 0.76);
}

/* ── Base ── */
body,
.pusher,
#wrapper {
  background-color: var(--bg-deep) !important;
}

/* la classe dark sta su <body>: <html> va coperto a parte */
html {
  background-color: var(--bg-deep) !important;
}
html:has(body.dark) {
  background-color: #0a0713 !important;
}

body.dark .badge {
  background-color: var(--surface-2);
  color: var(--text-dim);
}

body,
.ui.menu,
.ui.form,
.ui.button,
.ui.input > input,
.ui.dropdown {
  font-family: var(--font-ui) !important;
}

body {
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .ui.header {
  font-family: var(--font-display) !important;
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Masthead ── */
.ui.masthead {
  position: relative;
  background-image: url("../images/masthead.webp") !important; /* batte l'inline {$BANNER_IMAGE} */
  background-size: cover !important;
  background-position: center !important;
}
.ui.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 9, 3, 0.4), rgba(12, 9, 3, 0.82));
  z-index: 0;
  pointer-events: none;
}
.ui.masthead > * {
  position: relative;
  z-index: 1;
}
.ui.masthead .header {
  color: #fff !important;
  font-family: var(--font-display) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* hero: logo grande al centro. Solo in home — la condizione sta in navbar.tpl */
.ui.masthead {
  padding: clamp(32px, 4.5vw, 60px) 0 clamp(26px, 3.5vw, 46px) !important;
  margin-bottom: clamp(22px, 3vw, 34px) !important;
}

.ui.masthead .masthead__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 1.8vw, 22px);
}

/* il nome sta dentro il logo: qui serve solo a screen reader e crawler */
.ui.masthead .masthead__title--brand {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  border: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-align: center;
}
.ui.masthead .masthead__title:not(.masthead__title--brand) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ui.masthead .masthead__logo {
  width: auto;
  height: clamp(118px, 14vw, 196px);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.7));
  user-select: none;
  -webkit-user-drag: none;
}

/* blocco stato server: al centro sotto il logo, non piu' incollato a destra */
.ui.masthead .connect-server {
  margin-inline: auto !important;
  background: rgba(0, 0, 0, 0.34) !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

.ui.masthead .connect-server .ui.header {
  font-family: var(--font-ui) !important;
  font-size: 15px;
}

.ui.masthead .connect-server span[onclick] {
  cursor: pointer;
  color: var(--gold-light) !important;
  font-weight: 700;
}

/* ── Navbar ── */
#navbar.ui.menu {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 76px;
  margin: 0;
  padding-inline: clamp(18px, 5vw, 40px);
  background: var(--header-bg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

#navbar.ui.menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(91, 63, 217, 0.5) 18%,
    rgba(255, 221, 87, 0.7) 50%,
    rgba(91, 63, 217, 0.5) 82%,
    transparent
  );
  opacity: 0.6;
  pointer-events: none;
}

#navbar.ui.menu .item {
  position: relative;
  color: var(--text-dim) !important;
  font-weight: 500;
  font-size: 15px;
  transition: color 0.16s ease;
}
#navbar.ui.menu .item:hover,
#navbar.ui.menu .item.active {
  color: var(--text) !important;
  background: transparent !important;
}
#navbar.ui.menu .item::before {
  display: none;
}

/* underline oro (i link stanno dentro .ui.container).
   bottom:0 = a filo del padding della voce, come .nav__link::after del sito
   (~7px sotto il testo); con bottom:8px finiva attaccata al testo. */
#navbar.ui.menu .ui.container > a.item:not(.tempora-brand)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  opacity: 0;
  transform: translateX(-50%) scaleX(0.4);
  transition: opacity 0.18s ease, transform 0.18s ease, width 0.18s ease;
}
#navbar.ui.menu .ui.container > a.item:not(.tempora-brand):hover::after,
#navbar.ui.menu .ui.container > a.item.active:not(.tempora-brand)::after {
  opacity: 1;
  width: 20px;
  transform: translateX(-50%) scaleX(1);
}

#navbar .tempora-brand {
  padding: 0 14px 0 0 !important;
  align-self: center;
  background: transparent !important;
}
#navbar .tempora-brand img {
  height: 30px !important;
  width: auto !important;
  user-select: none;
}
/* marchio testuale (rebrand Ninfea: nessun wordmark grafico) */
#navbar .tempora-brand .brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
  user-select: none;
}

/* controlli a destra: niente flex-stretch, raggio uniforme */
#navbar .ui.label,
#navbar .ui.button {
  border-radius: var(--radius-sm) !important;
}
#navbar.ui.menu .ui.button,
#navbar.ui.menu .ui.label {
  align-self: center !important;
  height: auto !important;
}
#navbar.ui.menu .ui.image.label {
  display: inline-flex !important;
  align-items: center !important;
  height: 33px !important;
  padding: 0 12px 0 0 !important;
  overflow: hidden;
}
#navbar.ui.menu .ui.image.label > img {
  height: 100% !important;
  width: auto !important;
  margin: 0 8px 0 0 !important;
  border-radius: 0 !important;
}

/* ── Contenitori ── */
.box,
.ui.segment,
.ui.card,
.ui.cards > .card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* segmenti attached: bordo/raggio sul contenitore, figli uniti */
.ui.segments {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}
.ui.segments > .segment {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: auto !important;
}
.ui.segments > .segment + .segment {
  border-top: 1px solid var(--border) !important;
}
.ui.top.attached.segment {
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.ui.attached.segment:not(.top):not(.bottom) {
  border-radius: 0 !important;
}
.ui.bottom.attached.segment {
  border-radius: 0 0 var(--radius) var(--radius) !important;
}
.ui.segments > .secondary.segment,
.ui.secondary.segment {
  background: var(--surface-2) !important;
}

/* link nei contenitori (esclusi bottoni e colori inline dei gruppi) */
.box a:not(.button):not([style]),
.ui.card a:not(.button):not([style]),
.ui.segment a:not(.button):not([style]) {
  color: var(--accent) !important;
}

/* ── Bottoni ── */
.ui.button {
  font-family: var(--font-ui) !important;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--gold);
  color: var(--ink);
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--gold-light);
  color: var(--ink);
}

/* ── Form ── */
.ui.form input,
.ui.input > input,
.ui.form textarea,
.ui.selection.dropdown {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
}
.ui.form input:focus,
.ui.input > input:focus,
.ui.form textarea:focus {
  border-color: var(--border-accent) !important;
}

/* ── Footer ── */
#footer.ui.footer.segment {
  background: var(--surface) !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(36px, 5vw, 56px) 0 28px !important;
}
#footer .ui.divided.grid > .column,
#footer .ui.divided.grid > .row > .column {
  box-shadow: none !important;
}
#footer h4.ui.header {
  color: var(--text-mute) !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
#footer .ui.link.list .item,
#footer .ui.link.list span.item {
  color: var(--text-dim) !important;
  font-size: 15px;
}
#footer .ui.link.list a.item,
#footer .ui.link.list .item a {
  color: var(--text-dim) !important;
  transition: color 0.16s ease;
}
#footer .ui.link.list a.item:hover,
#footer .ui.link.list .item a:hover {
  color: var(--text) !important;
}
#footer .darkmode-toggle-label {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border-strong);
}

/* ── Breadcrumb ── */
.ui.breadcrumb a {
  color: var(--accent) !important;
}
.ui.breadcrumb a:hover {
  color: var(--accent-deep) !important;
}
.ui.breadcrumb .active.section {
  color: var(--text) !important;
  font-weight: 600;
}
.ui.breadcrumb .divider {
  color: var(--text-mute) !important;
}

/* ── Search / input fuori dai form ── */
.ui.action.input > input,
.ui.search .prompt,
.ui.icon.input > input {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
}
.ui.action.input > input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
.ui.action.input > .button {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* ── Paginazione ── */
.ui.pagination.menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.ui.pagination.menu .item:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
.ui.pagination.menu .item:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* ── Tabelle ── */
.ui.table {
  border-radius: var(--radius) !important;
  border-color: var(--border) !important;
}
.ui.selectable.table tbody tr:hover {
  background: var(--surface-2) !important;
}
/* celle d'angolo a filo col raggio della tabella */
.ui.table thead tr:first-child > th:first-child {
  border-radius: var(--radius) 0 0 0 !important;
}
.ui.table thead tr:first-child > th:last-child {
  border-radius: 0 var(--radius) 0 0 !important;
}
.ui.table thead tr:first-child > th:only-child {
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.ui.table tbody tr:last-child > td:first-child {
  border-radius: 0 0 0 var(--radius) !important;
}
.ui.table tbody tr:last-child > td:last-child {
  border-radius: 0 0 var(--radius) 0 !important;
}

/* ── Dropdown ── */
.ui.dropdown .menu {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}
.ui.dropdown .menu > .item {
  color: var(--text-dim) !important;
  border-top: 1px solid var(--border) !important;
}
.ui.dropdown .menu > .item:first-child {
  border-top: none !important;
}
.ui.dropdown .menu > .item:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.ui.selection.dropdown {
  border-radius: var(--radius-sm) !important;
}
.ui.selection.dropdown .menu {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
}

/* La barra di traduzione la stila il modulo TemporaTranslate (usa i token qui
   sopra tramite var(), quindi eredita già i colori del tema). */

/* ── Messaggi (dark) ── */
body.dark .ui.message {
  background: var(--surface-2) !important;
  color: var(--text-dim) !important;
  box-shadow: 0 0 0 1px var(--border) inset !important;
}
body.dark .ui.message .header {
  color: var(--text) !important;
}
body.dark .ui.negative.message,
body.dark .ui.error.message,
body.dark .ui.red.message {
  box-shadow: 0 0 0 1px rgba(219, 40, 40, 0.45) inset !important;
  color: #eda1a1 !important;
}
body.dark .ui.positive.message,
body.dark .ui.success.message,
body.dark .ui.green.message {
  box-shadow: 0 0 0 1px rgba(33, 186, 69, 0.45) inset !important;
  color: #9fd7ac !important;
}
body.dark .ui.warning.message,
body.dark .ui.orange.message,
body.dark .ui.yellow.message {
  box-shadow: 0 0 0 1px rgba(245, 197, 24, 0.5) inset !important;
  color: var(--gold-light) !important;
}
body.dark .ui.info.message,
body.dark .ui.blue.message,
body.dark .ui.purple.message {
  box-shadow: 0 0 0 1px rgba(88, 101, 242, 0.5) inset !important;
  color: #b3bdf5 !important;
}


/* Pagine senza hero: la fascia dava lo stacco dalla navbar, senza restava
   il contenuto incollato sotto il menu sticky. */
#wrapper.no-masthead > .ui.container {
  padding-top: clamp(22px, 3vw, 34px);
}

/* Titolo di pagina (la staff non ne aveva uno, le altre si').
   Nessun override su font/colore: cosi' e' identico agli h2.ui.header delle
   altre pagine (24px Space Grotesk 700). Lo stacco lo da' la riga. */
.page-head {
  padding-bottom: 18px !important;
}

/* credito in footer, al posto del powered by */
#footer .site-credit a {
  color: var(--text-dim) !important;
  font-weight: 600;
  transition: color 0.16s ease;
}

#footer .site-credit a:hover {
  color: var(--accent) !important;
}