@import url('/assets/css/theme-forgejo-dark.css');

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/font/inter-var.woff2") format("woff2-variations"),
       url("/assets/font/inter-var.woff2") format("woff2");
}

:root {
  /* FlexHub — orange/black/white wordmark vibe */

  /* Primary = signal orange */
  --color-primary: #ff9000;
  --color-primary-contrast: #000000;
  --color-primary-dark-1: #f08400;
  --color-primary-dark-2: #db7800;
  --color-primary-dark-3: #c66c00;
  --color-primary-dark-4: #b16100;
  --color-primary-dark-5: #9c5500;
  --color-primary-dark-6: #874900;
  --color-primary-dark-7: #723e00;
  --color-primary-light-1: #ffa12a;
  --color-primary-light-2: #ffb255;
  --color-primary-light-3: #ffc37f;
  --color-primary-light-4: #ffd4a9;
  --color-primary-light-5: #ffe5d4;
  --color-primary-light-6: #fff2e6;
  --color-primary-light-7: #fff8f0;
  --color-primary-alpha-10: #ff90001a;
  --color-primary-alpha-20: #ff900033;
  --color-primary-alpha-30: #ff90004d;
  --color-primary-alpha-40: #ff900066;
  --color-primary-alpha-50: #ff900080;
  --color-primary-alpha-60: #ff900099;
  --color-primary-alpha-70: #ff9000b3;
  --color-primary-alpha-80: #ff9000cc;
  --color-primary-alpha-90: #ff9000e6;
  --color-primary-hover: var(--color-primary-light-1);
  --color-primary-active: var(--color-primary-dark-1);

  /* Surfaces — pure black base, slight lift on cards */
  --color-body: #000000;
  --color-box-header: #0a0a0a;
  --color-box-body: #060606;
  --color-box-body-highlight: #101010;
  --color-card: #0a0a0a;
  --color-menu: #060606;
  --color-header-wrapper: #000000;
  --color-nav-bg: #000000;
  --color-secondary-nav-bg: var(--color-body);
  --color-footer: #000000;
  --color-button: #1a1a1a;
  --color-secondary-bg: #1a1a1a;
  --color-secondary: #1a1a1a;
  --color-secondary-dark-1: #222222;
  --color-secondary-dark-2: #2a2a2a;

  /* Borders — subtle orange tint on hover */
  --color-input-border: #2a2a2a;
  --color-input-border-hover: var(--color-primary);
  --color-light-border: #ffffff1a;

  /* Inputs / search box — pure black, not blue-grey */
  --color-input-background: #000000;
  --color-input-toggle-background: #000000;
  --color-input-text: #f0f0f0;
  --color-form-background: #000000;
  --color-active-line: var(--color-primary);

  /* Accent */
  --color-accent: var(--color-primary);
  --color-small-accent: var(--color-primary-light-2);
  --color-highlight-fg: var(--color-primary);
  --color-highlight-bg: var(--color-primary-alpha-10);

  /* Text + focus */
  --color-text: #f0f0f0;
  --color-text-light: #c8c8c8;
  --color-text-light-1: #b0b0b0;
  --color-text-light-2: #909090;
  --color-text-light-3: #707070;
  --color-text-focus: var(--color-primary);

  /* Reaction / overlays */
  --color-reaction-bg: var(--color-primary-alpha-10);
  --color-reaction-active-bg: var(--color-primary-alpha-30);
  --color-reaction-hover-bg: var(--color-primary-alpha-40);
  --color-overlay-backdrop: #000000d0;

  /* Links */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-light-1);
}

::selection {
  background: #ff9000 !important;
  color: #000000 !important;
}

/* FlexHub homepage hero */
.flexhub-home {
  padding: 4rem 1rem 3rem;
  text-align: center;
}
.flexhub-home .flexhub-wordmark {
  max-width: min(420px, 70vw);
  height: auto;
  margin: 0 auto 2rem;
  display: block;
}
.flexhub-home .flexhub-text-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: "Inter", system-ui, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 auto 1.25rem;
  white-space: nowrap;
}
.flexhub-home .flexhub-text-wordmark .fh-flex {
  color: #ffffff;
  padding: 0.1em 0.15em 0.1em 0;
}
.flexhub-home .flexhub-text-wordmark::after {
  content: "Hub";
  color: #000000;
  background: var(--color-primary);
  padding: 0.05em 0.2em;
  border-radius: 0.18em;
}
.flexhub-home h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
  color: #ffffff;
}
.flexhub-home h1 .flex {
  color: #ffffff;
}
.flexhub-home h1 .hub {
  color: var(--color-primary);
}
.flexhub-home .tagline {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--color-text-light);
  margin: 0 0 0.4rem;
  font-weight: 400;
}
.flexhub-home .subtagline {
  font-size: 1rem;
  color: var(--color-text-light-2);
  margin: 0 0 3rem;
  font-style: italic;
}
.flexhub-home .agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1rem;
}
.flexhub-home .agent-card {
  background: var(--color-card);
  border: 1px solid var(--color-input-border);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  text-align: left;
  transition: border-color .15s, transform .15s;
}
.flexhub-home .agent-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.flexhub-home .agent-card .marker {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-primary);
  color: #000;
  font-weight: 900;
  text-align: center;
  line-height: 28px;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}
.flexhub-home .agent-card h3 {
  margin: 0 0 0.4rem;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
}
.flexhub-home .agent-card p {
  margin: 0;
  color: var(--color-text-light);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* Navbar wordmark — text-rendered via head_navbar.tmpl override */
.flexhub-nav-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: "Inter", system-ui, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.flexhub-nav-wordmark .fh-flex {
  color: #ffffff;
  padding: 4px 6px 4px 2px;
}
.flexhub-nav-wordmark::after {
  content: "Hub";
  color: #000000;
  background: var(--color-primary);
  padding: 4px 8px;
  border-radius: 6px;
}

/* Footer: orange s8n.ru link + white placeholder text */
.page-footer .footer-placeholder {
  color: #ffffff;
  margin-right: 0.4rem;
}
.page-footer .left-links a {
  color: var(--color-primary);
}
.page-footer .left-links a:hover {
  color: var(--color-primary-light-1);
}

/* Top navbar (Explore etc): underlined hyperlink style, transparent bg, kill blue hover chip */
#navbar a.item,
#navbar .item {
  background: transparent !important;
  border-radius: 0 !important;
}
#navbar a.item:hover,
#navbar .item:hover {
  background: transparent !important;
  color: var(--color-primary) !important;
}
#navbar a.item.active,
#navbar .item.active {
  background: transparent !important;
  color: var(--color-primary) !important;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
#navbar a.item.active:hover {
  color: var(--color-primary-light-1) !important;
}

/* Tab menus (Repositories / Users / Organizations): keep big border-bottom only,
   strip the close text-decoration line that doubles up under the label. */
.ui.tabs.menu .item.active,
.ui.tabs.menu .active.item,
.ui.tabular.menu .item.active,
.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .item.active,
.ui.secondary.pointing.menu .active.item {
  text-decoration: none !important;
  background: transparent !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Search input + filter/sort dropdowns: pure black */
.ui.input > input,
.ui.action.input > input,
.ui.form input[type="text"],
.ui.form input[type="search"],
.ui.search input,
input[type="text"],
input[type="search"] {
  background: #000000 !important;
  color: var(--color-input-text) !important;
  border-color: var(--color-input-border) !important;
}
.ui.input > input:focus,
input[type="text"]:focus,
input[type="search"]:focus {
  background: #000000 !important;
  border-color: var(--color-primary) !important;
}
.ui.action.input > .button,
.ui.action.input > .ui.button {
  background: #000000 !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-input-border) !important;
}
.ui.action.input > .button:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Primary buttons keep orange-on-black */
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--color-primary) !important;
  color: #000 !important;
  font-weight: 700;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--color-primary-light-1) !important;
  color: #000 !important;
}