/*
 * FabLab Luebeck - Flat-Theme fuer Homepage.
 *
 * Homepage liefert den Default-"Glas"-Look: halbtransparente Karten
 * (bg-theme-100/20), optionaler backdrop-blur und Schlagschatten. Diese Datei
 * ersetzt das durch flache Karten mit 1px-Rahmen und setzt das FabLab-Logo
 * ueber die Tab-Leiste.
 *
 * Ausgeliefert unter /api/config/custom.css, eingebunden von Homepage selbst.
 * Achtung: custom.css ist immer oeffentlich lesbar - keine internen URLs oder
 * Geheimnisse hier hineinschreiben.
 */

:root {
  --fl-teal: #47b39e;    /* Logo-Bogen */
  --fl-slate: #344e5c;   /* Logo-Schrift */
  --fl-red: #df5b49;     /* Logo-Akzent */
  --fl-page: #f4f7f8;
  --fl-card: #ffffff;
  --fl-hover: #eef4f4;
  --fl-border: #dbe4e7;
}

html,
body,
#__next {
  background-color: var(--fl-page);
}

/* ---------------------------------------------------------------- Logo -- */
/* #information-widgets steht immer im DOM, auch ohne konfigurierte Widgets,
   und liegt direkt ueber der Tab-Leiste. Es ist ein Flex-Container, daher
   flex-basis 100% statt width. */
#information-widgets::before {
  content: "";
  display: block;
  flex: 0 0 100%;
  height: 4.5rem;
  margin-bottom: 0.25rem;
  background: url("/icons/fablab-logo.svg") left center / contain no-repeat;
}

@media (max-width: 640px) {
  #information-widgets::before {
    height: 3rem;
    background-position: center;
  }
}

/* ------------------------------------------------------- Glas entfernen -- */
#myTab,
.service-card,
.bookmark-text,
.bookmark-icon,
#information-widgets {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.service-card {
  background-color: var(--fl-card) !important;
  border: 1px solid var(--fl-border);
  border-radius: 3px;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}

.service-card:hover {
  background-color: var(--fl-hover) !important;
  border-color: var(--fl-teal);
}

.service-name {
  color: var(--fl-slate) !important;
}

.service-description {
  color: #5c7079 !important;
}

.service-group-name {
  color: var(--fl-slate) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------ Tableiste -- */
/* Default ist eine Pille mit Hintergrund; hier flacher Unterstrich. */
#myTab {
  background-color: transparent !important;
  border-bottom: 2px solid var(--fl-border);
  border-radius: 0;
}

/* Default: jeder Tab-Button nimmt 1/n der Breite ein. Hier linksbuendig
   in Textbreite. */
#myTab {
  display: flex;
  justify-content: flex-start;
}

#myTab li {
  width: auto;
}

#myTab button {
  width: auto;
  margin: 0;
  padding: 0.5rem 1.25rem;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--fl-slate);
  background-color: transparent !important;
}

#myTab button:hover {
  border-bottom-color: var(--fl-border);
}

#myTab button[aria-selected="true"] {
  border-bottom-color: var(--fl-teal);
  font-weight: 600;
}

#footer {
  padding-top: 2rem;
}