/*** COLORS & DARK MODE ***
   Pages follow the OS light/dark setting. Neutral colors are written as
   light-dark(<light>, <dark>), usually through the tokens below, so light
   mode looks exactly as it did before dark mode existed. In page CSS, use a
   token, or light-dark(<light>, <dark>) for a one-off. Brand colors (orange,
   cornflowerblue) read fine on both, so they stay as they are, except as a
   large fill like the nav bar, which gets a darker blue in dark mode.
   To keep something light in dark mode (an exported image, a third-party
   widget), give it color-scheme: light. */
:root {
  color-scheme: light dark;

  --gm-bg: light-dark(#f5f5f5, #121212); /* page background */
  --gm-surface: light-dark(#fff, #1e1e1e); /* cards, panels, inputs */
  --gm-surface-alt: light-dark(#f4f4f4, #2a2a2a); /* subtle fills: stripes, hovers */
  --gm-text: light-dark(#212529, #e0e0e0); /* body text (Bootstrap's default) */
  --gm-heading: light-dark(#333, #f0f0f0);
  --gm-muted: light-dark(#666, #a8a8a8);
  --gm-border: light-dark(#e9e9e9, #3a3a3a);
  --gm-link: light-dark(#007bff, #8ab0f2);
  --gm-lavender: light-dark(lavender, #2e2b4d); /* highlight fill */
  --gm-aliceblue: light-dark(aliceblue, #1b2b3d); /* highlight fill */
}

/* Paper is white: print in light. */
@media print {
  :root {
    color-scheme: light;
  }
}

/* light-dark() can't recolor an image. Dark-ink logos on a transparent
   background disappear in dark mode, so draw them in white instead. */
@media screen and (prefers-color-scheme: dark) {
  img[src$="port.serv.apple.png"],
  img[src$="port.reddit.icon.png"],
  img[src$="badge.stripe.png"] {
    filter: brightness(0) invert(1);
  }
}

body {
  background-color: var(--gm-bg);
  color: var(--gm-text);
  font-family: "Noto Sans", sans-serif;
}

/* Bootstrap 4 hardcodes light colors. Each rule below repeats Bootstrap's
   own light value and adds a dark one, for the components the site uses. */
a {
  color: var(--gm-link);
}
a:hover {
  color: light-dark(#0056b3, var(--gm-link));
}

hr {
  border-top-color: light-dark(rgba(0, 0, 0, 0.1), var(--gm-border));
}

pre {
  color: var(--gm-text);
}

code {
  color: light-dark(#bd4147, #ff9aa2);
  background-color: light-dark(#f8f9fa, var(--gm-surface-alt));
}

.text-muted {
  color: light-dark(#868e96, var(--gm-muted)) !important;
}
.form-control::placeholder,
.blockquote-footer,
.dropdown-header,
.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
  color: light-dark(#868e96, var(--gm-muted));
}

.card,
.modal-content,
.dropdown-menu,
.popover,
.form-control,
.form-control:focus {
  background-color: var(--gm-surface);
}
.bg-white {
  background-color: var(--gm-surface) !important;
}
.bg-light {
  background-color: light-dark(#f8f9fa, var(--gm-surface-alt)) !important;
}
.card-header,
.card-footer {
  background-color: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.04));
}
.popover-header {
  background-color: light-dark(#f7f7f7, var(--gm-surface-alt));
  border-bottom-color: light-dark(#ebebeb, var(--gm-border));
}
.breadcrumb,
.input-group-addon,
.form-control:disabled,
.form-control[readonly],
.page-link:hover,
.page-link:focus {
  background-color: light-dark(#e9ecef, var(--gm-surface-alt));
}
.page-link {
  background-color: var(--gm-surface);
  border-color: light-dark(#ddd, var(--gm-border));
}

.card,
.card-header,
.card-footer {
  border-color: light-dark(rgba(0, 0, 0, 0.125), var(--gm-border));
}
.dropdown-menu,
.form-control,
.input-group-addon {
  border-color: light-dark(rgba(0, 0, 0, 0.15), var(--gm-border));
}
.modal-content,
.popover {
  border-color: light-dark(rgba(0, 0, 0, 0.2), var(--gm-border));
}
.modal-header,
.modal-footer,
.dropdown-divider,
.table th,
.table td,
.table thead th {
  border-color: light-dark(#e9ecef, var(--gm-border));
}
.table-bordered th,
.table-bordered td {
  border-color: light-dark(#ddd, var(--gm-border)) !important;
}
.form-control,
.form-control:focus,
.input-group-addon {
  color: light-dark(#495057, var(--gm-text));
}
.popover-body,
.dropdown-item {
  color: var(--gm-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
  color: light-dark(#16181b, var(--gm-heading));
  background-color: light-dark(#f8f9fa, var(--gm-surface-alt));
}

.close,
.close:hover,
.close:focus {
  color: light-dark(#000, var(--gm-heading));
  text-shadow: 0 1px 0 light-dark(#fff, transparent);
}

.alert-secondary {
  color: light-dark(#464a4e, #d0d4d8);
  background-color: light-dark(#e7e8ea, #2a2d30);
  border-color: light-dark(#dddfe2, #42474c);
}
.alert-success {
  color: light-dark(#155724, #a6dcb4);
  background-color: light-dark(#d4edda, #12291a);
  border-color: light-dark(#c3e6cb, #224a30);
}
.alert-info {
  color: light-dark(#0c5460, #a3dbe6);
  background-color: light-dark(#d1ecf1, #0d2a30);
  border-color: light-dark(#bee5eb, #1b4a54);
}
.alert-warning {
  color: light-dark(#856404, #f2d98c);
  background-color: light-dark(#fff3cd, #2e260a);
  border-color: light-dark(#ffeeba, #574814);
}
.alert-danger {
  color: light-dark(#721c24, #f3b3ba);
  background-color: light-dark(#f8d7da, #301216);
  border-color: light-dark(#f5c6cb, #5b232b);
}
/* In Bootstrap's order, so a disabled button doesn't take the hover color. */
.btn-light {
  color: light-dark(#111, var(--gm-text));
  background-color: light-dark(#f8f9fa, var(--gm-surface-alt));
  border-color: light-dark(#f8f9fa, var(--gm-border));
}
.btn-light:hover {
  color: light-dark(#111, var(--gm-text));
  background-color: light-dark(#e2e6ea, #353535);
  border-color: light-dark(#dae0e5, #4a4a4a);
}
.btn-light.disabled,
.btn-light:disabled {
  background-color: light-dark(#f8f9fa, var(--gm-surface-alt));
  border-color: light-dark(#f8f9fa, var(--gm-border));
}
.btn-light:active,
.btn-light.active,
.show > .btn-light.dropdown-toggle {
  background-color: light-dark(#e2e6ea, #353535);
  border-color: light-dark(#dae0e5, #4a4a4a);
}

/* A full-width cornflowerblue bar glares on a dark page, so in dark mode the
   nav is a darker blue of the same hue, which also gives its white text
   better contrast. */
nav.main-site-nav {
  background-color: light-dark(cornflowerblue, #3d5fa8);
}

nav .navbar-nav .dropdown-menu.show {
  max-height: 300px;
  overflow-y: scroll;
}

body .nav-item.cloud-nav-item {
  display: none;
}
body.has-cloud-account .nav-item.cloud-nav-item {
  display: list-item;
}

nav i.fa,
nav i.fa-solid,
nav i.fa-brands,
nav i.fa-regular {
  font-size: 24px;
  margin-right: 4px;
  position: relative;
  top: 1px;
}

nav .text {
  display: none;
}

.container-fluid.first {
  padding-top: 56px;
}

.container.first {
  padding-top: 72px;
}

.hidden {
  display: none !important;
  visibility: hidden !important;
}

/*** HEADINGS ***/

.content-wrapper {
  margin-top: 32px;
  margin-bottom: 32px;
}

.big-heading {
  font-family: "Roboto", "Noto Sans", sans-serif;

  font-weight: 300;
  font-size: 36px;
  line-height: 36px;
  margin-bottom: 16px;
  color: var(--gm-heading);

  &.super-big-heading {
    font-size: 48px;
    line-height: 48px;
    padding-top: 32px;
  }
}

@media (max-width: 900px) {
  nav i.fa,
  nav i.fa-solid,
  nav i.fa-brands,
  nav i.fa-regular {
    width: 32px;
  }

  .big-heading.super-big-heading {
    font-size: 42px;
    line-height: 42px;
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  nav .text {
    display: inline-block;
  }
}