/* Custom overrides for the material theme go here. */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

body,
.md-typeset,
.md-header__topic,
.md-nav {
  font-family: 'Share Tech Mono', monospace;
  color: #31e652;
}

/* h1[id] targets real content headings only, excluding the
   auto-generated page title Material inserts when a page has
   no leading heading of its own (e.g. the "Info" page title) */
.md-typeset h1[id],
.md-typeset h2,
.md-typeset h3 {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.md-typeset h1[id] {
  color: #31e652;
  margin: 0 0 1em;
}

.md-typeset h2,
.md-typeset h3 {
  color: #31e652;
}

.md-typeset h2 {
  margin: 1em 0 1em;
}

.md-typeset h3 {
  margin: 1em 0 1em;
}

.md-typeset p {
  margin: 0 0 1.25em;
}

.md-typeset a {
  color: #31e652;
  text-decoration: underline;
}

/* Hide the "Link Up Party" logo/title shown at the top of the left nav */
.md-sidebar--primary .md-nav--primary > .md-nav__title {
  display: none;
}

.md-nav {
  font-size: 0.9rem;
}

/* Material's default body size is 0.8rem */
.md-typeset {
  font-size: 0.9rem;
}

/* Active nav links default to Material's blue accent color - keep them
   green and mark "active" with an underline instead of a color change.
   .md-nav--primary .md-nav__item--active>.md-nav__link is Material's own
   higher-specificity rule for this, so it must be matched here too. */
.md-nav__link--active,
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code,
.md-nav--primary .md-nav__item--active > .md-nav__link {
  color: #31e652;
  text-decoration: underline;
}

/* Material greys out nav links for sections already scrolled past
   ("passed") - keep those green too, only the active link differs */
.md-nav__link--passed {
  color: #31e652;
}

/* Keep the header title as "Link:Up Party" always, instead of swapping
   to the current page's title when scrolling. The site name topic is
   normally faded out via opacity when scrolled, in anticipation of the
   page-title topic fading in to replace it - since that one is hidden,
   the site name's opacity must be forced to stay visible too. */
.md-header__topic[data-md-component="header-topic"] {
  display: none;
}

.md-header__topic:first-child {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Give the page enough scroll room below its last heading so that
   clicking any nav link (e.g. "Travel") can scroll it to the top of
   the viewport in isolation. Without this, short pages hit the max
   scroll position too early and the scrollspy that highlights the
   active nav link falls back to the last heading in the document
   (e.g. "Accommodation" lighting up instead of "Travel"). */
.md-content__inner {
  padding-bottom: 60vh;
}

/* Footer text uses the same font and green as the rest of the site */
.md-footer-meta,
.md-copyright,
.md-copyright a {
  font-family: 'Share Tech Mono', monospace;
  color: #31e652;
}

/* CRT-style background: a small tiling scanline and phosphor mask image,
   with a fixed vignette layered on top to darken the screen edges.
   The header and footer share it. Both layers are fixed to the viewport
   so the pattern lines up across the page, and Material's own solid
   colours on those bars are replaced by it. */
body,
.md-banner,
.md-header,
.md-footer {
  background-color: #060e08;
  background-image:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%),
    url('../images/crt-tile.png');
  background-repeat: no-repeat, repeat;
  background-attachment: fixed, fixed;
  background-size: 100% 100%, auto;
}

/* The footer's inner bar has its own dark colour, so let the footer's
   background show through instead */
.md-footer-meta {
  background-color: transparent;
}

/* CRT toggle: reusing Material's own light/dark palette switcher (see
   theme.palette in mkdocs.yml) as an on/off control, rather than as an
   actual light theme. The "default" scheme drops the tile and vignette
   and keeps the same solid dark background, so switching it off doesn't
   change anything else about the site's look. Material sets the
   data-md-color-scheme attribute on <body> itself, not on <html>, so the
   body rule needs the attribute on the same element, not as an ancestor. */
body[data-md-color-scheme="default"],
[data-md-color-scheme="default"] .md-banner,
[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-footer {
  background-image: none;
}

/* All header icon buttons in the site green, rather than the off-white
   Material picks by default for contrast against the black primary
   colour. This covers the mobile nav drawer's menu icon and the CRT
   toggle, in one place rather than one rule per icon.
   The logo needs its own copy of the same rule, at matching specificity:
   Material's own stylesheet sets its fill with the two-class selector
   ".md-header__button.md-logo svg", which otherwise outranks the plain
   ".md-header__button svg" version below and wins regardless of load
   order. */
.md-header__button.md-logo svg,
.md-header__button svg {
  fill: #31e652;
}

/* Announcement bar above the header */
.md-banner {
  color: #31e652;
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
}

.md-banner a {
  color: #31e652;
  text-decoration: underline;
}

/* Scrolling announcement text, in the manner of the old <marquee> tag.
   Done with a CSS animation as <marquee> is deprecated. */
.md-banner__inner {
  overflow: hidden;
}

.marquee {
  display: inline-block;
  font-weight: 700;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee 45s linear infinite;
}

.marquee:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Leave the text still for visitors who ask their system to reduce motion */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    animation: none;
    padding-left: 0;
    white-space: normal;
  }
}

/* Material uses an accent colour, blue by default, for hovered and focused
   links. Set it to the darker green used for the sub-headings. Applied to
   :root rather than a specific scheme so it holds in both CRT-on and
   CRT-off states (see the toggle rules further down). */
:root {
  --md-accent-fg-color: #22af39;
}

/* Footer text colours: Material uses off-white and greys for the copyright
   line and previous/next links. Set them all to the site green, in both
   toggle states. */
:root {
  --md-footer-fg-color: #31e652;
  --md-footer-fg-color--light: #31e652;
  --md-footer-fg-color--lighter: #31e652;
}

.md-footer,
.md-footer__link,
.md-footer__title,
.md-footer__direction,
.md-copyright,
.md-copyright__highlight {
  color: #31e652;
}

/* Lists whose items start with an icon use the icon as the bullet.
   Material's own list markers and indents are removed for those lists. */
.md-typeset ul:has(> li > .twemoji:first-child) {
  list-style: none;
  margin-left: 0;
}

.md-typeset ul:has(> li > .twemoji:first-child) > li {
  margin-left: 0;
}

.md-typeset ul:has(> li > .twemoji:first-child) > li > .twemoji:first-child {
  margin-right: 0.5em;
}

/* Repository link in the top right of the header */
.md-header__source,
.md-source,
.md-source__repository {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  color: #31e652;
}

.md-source__icon svg {
  fill: #31e652;
}

/* Hide the star and fork counts Material adds to the repository link */
.md-source__facts {
  display: none;
}

/* Row of organiser logos on the About page, each linked to its site */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5em;
  margin: 3em 0 0;
}

.logo-row img {
  height: 80px;
  width: auto;
}