.lead {
  font-size: 1.15em;
  font-weight: 300;
}

.post-date {
  color: var(--md-default-fg-color--light);
  font-size: 0.85em;
}

.post-list {
  list-style: none;
}

.post-entry {
  margin-bottom: 1.5em;
}

.post-related {
  margin-top: 2em;
}

/* The hero of the former Jekyll site; the slate scheme dims its light background image. */
.inet-hero {
  position: relative;
  background-repeat: repeat;
  color: #014872;
}

[data-md-color-scheme=slate] .inet-hero {
  color: var(--md-default-fg-color);
}

[data-md-color-scheme=slate] .inet-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--md-default-bg-color);
  opacity: 0.8;
}

/* In px, as the former site had them: the theme scales rem with the width of the window. */
.inet-hero__inner {
  position: relative;
  padding: 58px 16px 48px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.4286;
}

.inet-hero .inet-hero__inner h1 {
  margin: 0 0 10px;
  color: inherit;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
}

.inet-hero__inner p {
  margin: 0;
}

.inet-hero__inner p:last-child {
  margin-bottom: 15px;
}

.inet-hero .inet-hero__inner .md-button {
  margin-top: 14px;
  padding: 8px 12px;
  border-width: 1px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.md-typeset .inet-hero__highlight,
.md-typeset .inet-hero__highlight:focus,
.md-typeset .inet-hero__highlight:hover {
  background-color: var(--inet-strip-color);
  border-color: var(--inet-strip-color);
  color: #fff;
}

/* The hero shows the title of the home page. */
.inet-hero ~ .md-main .md-content__inner > h1:first-child {
  display: none;
}

/* The theme shows the title of the page in the header, instead of the name of the site, once the title is out of
   view, which the hidden one always is. */
body:has(.inet-hero) .md-header__title--active .md-header__topic {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  z-index: 0;
}

body:has(.inet-hero) .md-header__title--active .md-header__topic + .md-header__topic {
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0 2rem;
}

.home-grid ul {
  margin-left: 0.5em;
}

.md-typeset .rubric.home-heading {
  font-size: 1.3em;
  font-weight: 400;
  margin-top: 0.5em;
  padding-bottom: 3px;
  border-bottom: 4px solid var(--inet-strip-color);
}

.md-typeset .rubric.home-subheading {
  font-size: 1em;
  font-weight: 700;
  margin-bottom: 0;
}

.two-columns {
  column-count: 2;
}

.md-typeset ul.plain-list {
  list-style: none;
  margin-left: 0;
}

.md-typeset ul.plain-list li {
  margin-left: 0;
  margin-bottom: 0;
}

.small {
  font-size: 0.85em;
}

.md-typeset table.model-catalog {
  display: table;
  font-size: 0.75rem;
  border-collapse: collapse;
}

.md-typeset table.model-catalog td,
.md-typeset table.model-catalog th {
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: 0.4em 0.6em;
  vertical-align: top;
}

.md-typeset table.model-catalog td.section {
  background-color: var(--md-accent-fg-color--transparent);
  font-weight: 700;
}

video {
  max-width: 100%;
}

/* Charts and network diagrams with a transparent background are drawn for a light page (_ext/inetsite/images.py). */
.md-typeset img.transparent-image {
  box-sizing: border-box;
  padding: 0.5em;
  border-radius: 0.4rem;
}

[data-md-color-scheme=slate] .md-typeset img.transparent-image {
  background-color: #fff;
}

.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.align-right {
  text-align: right;
  display: block;
  margin-left: auto;
}

@media screen and (max-width: 44.9375em) {
  .two-columns {
    column-count: 1;
  }

  .inet-hero .inet-hero__inner h1 {
    font-size: 36px;
  }
}

/* The diagrams inlined into the NED reference pages (_ext/inetsite/ned.py) shrink to the width of the page. */
.md-typeset .neddoc-diagram svg {
  max-width: 100%;
  height: auto;
}

/* opp_docgen draws for a light page. What is on the page itself (the name of a compound module above its box, the
   diagram of a simple module, which has no boxes, and the arrows of the usage and inheritance diagrams) follows the
   colour scheme; the labels on the boxes, which keep their colours, stay black. */
.md-typeset .neddoc-diagram svg > text,
.md-typeset .neddoc-diagram svg:not(:has(rect)) text {
  fill: var(--md-typeset-color);
}

.md-typeset .neddoc-diagram svg:not(:has(rect)) text[fill="#666666"] {
  fill: var(--md-default-fg-color--light);
}

.md-typeset .neddoc-diagram svg line[stroke="#404040"] {
  stroke: var(--md-default-fg-color--light);
}

.md-typeset .neddoc-diagram svg polygon[fill="#404040"] {
  fill: var(--md-default-fg-color--light);
}

.md-typeset .neddoc-diagram svg polygon[stroke="#404040"] {
  stroke: var(--md-default-fg-color--light);
  fill: var(--md-default-bg-color);
}

/* The colours of the former inet.omnetpp.org (Bootswatch Cerulean, with an orange strip under the navigation bar). It
   had no dark scheme: that keeps the header, and lightens the links and the headings, and mutes the hover, which would
   glare on the dark background. */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #2fa4e7;
  --md-primary-fg-color--light: #54b4eb;
  --md-primary-fg-color--dark: #178acc;
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: #ffffffb3;
  --inet-heading-color: #317eac;
  --inet-strip-color: #ff8800;
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: #157ab5;
  --md-accent-fg-color--transparent: #157ab51a;
  --md-accent-bg-color: #fff;
  --md-accent-bg-color--light: #ffffffb3;
}

[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-typeset-a-color: #6cc0f0;
  --inet-heading-color: #7ab8de;
}

[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #7ea6d8;
  --md-accent-fg-color--transparent: #7ea6d81a;
}

.md-typeset :is(h1, h2, h3, h4, h5, h6) {
  color: var(--inet-heading-color);
}

/* The Accept of the cookie consent dialog (conf.py) has the color of the strip, like the one of omnest.com. */
.md-typeset .md-consent__controls .md-button--primary:not([type=reset]) {
  background-color: var(--inet-strip-color);
  border-color: var(--inet-strip-color);
  color: #fff;
}

/* inet_nav_blank (_ext/inetsite/nav.py). On narrow screens the sidebar is the drawer of the whole navigation. */
@media screen and (min-width: 76.25em) {
  .inet-nav-blank ~ .md-sidebar--primary .md-sidebar__scrollwrap {
    visibility: hidden;
  }
}

/* The strip is the bottom border of the tab bar, which stays below the header also while the tab bar is away
   (omnetpp_immaterial puts it away when the reader scrolls down, and casts the shadow of the header from it). Narrow
   screens have no tab bar: there the strip is under the header, and casts its shadow. */
:root {
  --omnetpp-tabs-edge: 0.2rem;
}

.md-tabs {
  border-bottom: var(--omnetpp-tabs-edge) solid var(--inet-strip-color);
}

@media screen and (max-width: 76.2344em) {
  .md-header::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto;
    height: 0.2rem;
    background-color: var(--inet-strip-color);
  }

  .md-header--shadow {
    box-shadow: none;
  }

  .md-header--shadow::after {
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
  }
}