/* Cyberfusion brand — colours, font, gradient.
 * Canonical palette (cyberfusion.io/brand):
 *   Black #000000, White #FFFFFF — the only solid brand colours.
 *   Brand gradient (Gradient 3): #FF5300 → #E884E4 — reserved for accents,
 *   never used for body copy or link text.
 *   Typography: TWK Lausanne 300 (body) and 600 (bold/headings). */

@font-face {
  font-family: 'TWKLausanne';
  src: url('fonts/TWKLausanne-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TWKLausanne';
  src: url('fonts/TWKLausanne-600.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Typography. */
  --md-text-font: 'TWKLausanne';

  /* Primary: black on white chrome. */
  --md-primary-fg-color: #000000;
  --md-primary-fg-color--light: #1a1a1a;
  --md-primary-fg-color--dark: #000000;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffff;

  /* Accent: black, per the brand. */
  --md-accent-fg-color: #000000;
  --md-accent-fg-color--transparent: rgba(0, 0, 0, 0.08);
  --md-accent-bg-color: #000000;
  --md-accent-bg-color--light: rgba(0, 0, 0, 0.08);

  /* Brand gradient — available for surfaces that can render it. */
  --cf-brand-gradient: linear-gradient(158deg, #ff5300 11%, #e884e4 81%);
}

/* Type scale — matches cyberfusion.io: TWK Lausanne 300 body, tight tracking,
 * generous body line-height, tight heading line-height. */

body {
  font-weight: 300;
  letter-spacing: -0.015em;
}

.md-typeset {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.015em;
}

.md-typeset p,
.md-typeset li {
  font-size: 17px;
  line-height: 1.6;
}

.md-typeset h1 {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 300;
}

.md-typeset h2 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.md-typeset h3 {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.md-typeset h4 {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.md-typeset code {
  font-size: 0.92em;
}

/* Sidebar/menu navigation: a notch smaller than body so it reads as secondary. */
.md-nav__title {
  font-size: 15px;
  line-height: 1.4;
}

.md-nav__link {
  font-size: 15px;
  line-height: 1.4;
}

/* Hide the header site/page title — the logo already carries the brand.
 * Use `visibility: hidden` (not `display: none`) so the element keeps its
 * `flex: 1` slot in the header row; without that slot the search button
 * collapses against the logo instead of sitting on the right. */
.md-header__title {
  visibility: hidden;
}


/* Remove hover effects across the site. */

/* Grid cards on the index page. Disable the transition and pin the hover
 * state to the resting border colour — Material's default rule bumps the
 * border to the accent colour with a transition, which still reads as an
 * effect even after the colour is neutralised. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li,
.md-typeset .grid > .card,
.grid.cards > ul > li,
.grid.cards > ol > li {
  transition: none !important;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover,
.md-typeset .grid > .card:hover,
.grid.cards > ul > li:hover,
.grid.cards > ol > li:hover {
  border-color: var(--md-default-fg-color--lightest) !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Sidebar / tabs / breadcrumb nav links. */
.md-nav__link:hover,
.md-nav__link:focus,
.md-tabs__link:hover,
.md-tabs__link:focus {
  color: inherit;
  opacity: 1;
}

/* Body content links. */
.md-typeset a:hover {
  color: inherit;
}

/* Header buttons (drawer toggle, search, palette). */
.md-header__button:hover {
  opacity: 1;
}