/* Trahum visual identity on top of Planka 2.x (planka/README.md, "Branding").
   Planka has no theme setting and hashes its CSS-module class names per build, so these rules match
   the stable part of a class (e.g. [class*="_logo_"]) and must be re-checked on every Planka upgrade.
   The "Powered by PLANKA" line on the login page stays: the Planka licence forbids removing it. */

@font-face { font-family: "ToshA"; font-weight: 400; font-display: swap; src: url("/brand/ToshA-Regular.ttf") format("truetype"); }
@font-face { font-family: "ToshA"; font-weight: 500; font-display: swap; src: url("/brand/ToshA-Medium.ttf") format("truetype"); }
@font-face { font-family: "ToshA"; font-weight: 700; font-display: swap; src: url("/brand/ToshA-Bold.ttf") format("truetype"); }

:root {
  --trahum-navy: #213e51;
  --trahum-navy-light: #2c5269;
  --trahum-teal: #81ccc2;
}

/* body is #app; i.icon keeps Semantic UI's icon font, code keeps its monospace */
#app, #app *:not(i):not(.icon):not(code):not(pre) {
  font-family: "ToshA", Lato, "Helvetica Neue", Arial, sans-serif !important;
}

/* default page behind projects without their own background (Planka: #22252a) */
#app { background: var(--trahum-navy); }

/* header: the white logo instead of the "PLANKA" text */
#app a[class*="_logo_"][class*="_title_"] {
  background: url("/brand/logo-white.png") center / contain no-repeat;
  color: transparent !important;
  font-size: 0;
  letter-spacing: 0;
  margin: 0 12px;
  width: 170px;
}

/* login page */
#app img[class*="_logo_"] { content: url("/brand/logo.png"); max-height: 110px; max-width: 100%; }
#app [class*="_gridItem_"][class*="_cover_"] {
  background: var(--trahum-navy) url("/brand/pattern.png") left bottom / 75% no-repeat;
}
#app [class*="_coverOverlay_"] { background: transparent; }

/* main actions */
#app .ui.primary.button,
#app .ui.positive.button { background-color: var(--trahum-navy); color: #fff; }
#app .ui.primary.button:hover, #app .ui.primary.button:focus,
#app .ui.positive.button:hover, #app .ui.positive.button:focus { background-color: var(--trahum-navy-light); }
#app .ui.input > input:focus, #app .ui.form input:focus, #app .ui.form textarea:focus {
  border-color: var(--trahum-teal) !important;
}