@charset "utf-8";

div.section {
  padding-top: 25px;
  padding-bottom: 25px;
  padding-right: 6%;
  padding-left: 6%;
  margin: 0;
  background-color: #FFFFFF;
}

div.alternateSection {
  padding-top: 25px;
  padding-bottom: 25px;
  padding-right: 6%;
  padding-left: 6%;
  margin: 0;
  background-color: #f3f3f3;
}

@media (min-width: 500px) {
  div.topSection {
    padding-top: 25px;
    padding-right: 6%;
    padding-left: 6%;
    padding-bottom: 50px;
    margin: 0;
    background-color: #FFFFFF;
  }
}

@media (max-width: 600px) {
  div.topSection {
    padding-top: 0px;
    padding-right: 6%;
    padding-left: 6%;
    padding-bottom: 50px;
    margin: 0;
    background-color: #FFFFFF;
  }
}

/* ============================================================
   Dark mode — applied automatically when the user's OS / browser
   prefers a dark colour scheme. Pages with their own committed
   light palettes (notably TortoScope) override these via more
   specific selectors and stay light.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }

  body {
    background-color: #131313;
    color: #e8e8e8;
  }

  /* Section backgrounds */
  div.section,
  div.topSection {
    background-color: #1a1a1a;
  }
  div.alternateSection {
    background-color: #232323;
  }

  /* Body text and headings (overrides bridgetech.css colours) */
  .BodyFormat,
  .List,
  .HeadingFormat,
  .TitleStyle,
  .SubHeading,
  .AppTitleSubheading,
  .DownloadLinksSubheading {
    color: #ececec;
  }

  /* Soften the white drop-shadow used as a faux border on screenshots */
  .ImageBorder {
    -webkit-filter: drop-shadow(1px 1px 0 #2f2f2f) drop-shadow(-1px -1px 0 #2f2f2f);
    filter: drop-shadow(1px 1px 0 #2f2f2f) drop-shadow(-1px -1px 0 #2f2f2f);
  }

  /* Navbar (selectors mirror NavBar.css) */
  .topnav {
    background-color: #1f1f1f;
    border-color: #303030;
  }
  .topnav a {
    color: #cfcfcf;
  }
  .active {
    background-color: #1f1f1f;
  }
  .dropdown .dropbtn {
    color: #ececec;
  }
  .dropdown-content {
    background-color: #2a2a2a;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
  }
  .dropdown-content a {
    color: #e0e0e0;
  }
  .topnav a:hover,
  .dropdown:hover .dropbtn {
    background-color: #3a3a3a;
    color: #ffffff;
  }
  .dropdown-content a:hover {
    background-color: #3a3a3a;
    color: #ffffff;
  }

  /* Links inside body content (default browser blue is harsh on dark) */
  a:link    { color: #8ab4f8; }
  a:visited { color: #c58af9; }
  a:hover   { color: #aecbfa; }
}