/*
  infinite-coastlines customizations on top of the shared omg-themes styles.
  core.css, densities.css, the themes and omg.js are synced from omg-themes
  (npm run sync:themes), so don't edit them here: add overrides below.
  Per-theme rules use html[data-theme="..."] (set by setTheme in omg.js).
*/

/* the light theme has no heading color of its own */
:where(html[data-theme="light"]) h2,
:where(html[data-theme="light"]) h3 {
  color: #1a212d;
}

/* Theme toggle + GitHub link as one row, anchored top right
   (core.css normally anchors #omg-theme-picker there directly). */
#omg-header-tools {
  position: absolute;
  top: 0;
  right: 5px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 20px;
}
#omg-header-tools #omg-theme-picker {
  position: static;
}

/* GitHub link, same look as the theme toggle's icons */
#omg-github {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 0;
  border-radius: 50%;
  opacity: 0.75;
}
#omg-github svg {
  width: 26px; /* same size in every theme (the themes' generic svg rule differs) */
  height: 26px;
}
:where(html[data-theme="light"]) #omg-github svg {
  fill: #1a212d;
}
html[data-theme="evol-blue"] #omg-github svg {
  fill: white; /* like the theme toggle icons on the blue background */
}
#omg-github:hover,
#omg-github:focus-visible {
  opacity: 1;
}

/* header scrolls away with the page (core.css makes it sticky) */
#omg-header {
  position: relative;
}

/* keep the title clear of the theme toggle and GitHub link on phones */
@media only screen and (max-width: 560px) {
  #omg-header h1 {
    padding-right: 165px;
    font-size: 1.6rem;
    white-space: normal;
    overflow: visible;
  }
}