/*
 * Surfaces Page Styles
 */

body {
  background-color: #1a1a1a;
  background-image: none;
  color: #fff;
  /* White text for light mode */
}

/* Link styling scoped to content column to avoid affecting header/footer */
.surfaces-content a {
  color: #00FF41;
  transition: all .25s ease-in-out;
}

.surfaces-content a:hover,
.surfaces-content a:focus {
  color: #fff;
}

body.dark-theme {

  background-color: #1a1a1a;
  color: #00FF41;
  /* Matrix green for dark mode */
}

/* Dark mode links - white to contrast with green text */
body.dark-theme .surfaces-content a {
  color: #fff;
}

body.dark-theme .surfaces-content a:hover,
body.dark-theme .surfaces-content a:focus {
  color: #00FF41;
}

/* Dark mode - header/nav/footer all matrix green */
body.dark-theme .masthead-brand>a,
body.dark-theme .masthead-nav>li>a,
body.dark-theme .mastfoot,
body.dark-theme .mastfoot p {
  color: #00FF41;
}

body.dark-theme .masthead-nav>li>a:hover,
body.dark-theme .masthead-nav>li>a:focus {
  color: #00FF41;
  opacity: 0.7;
}

/* Dark mode icons */
body.dark-theme .dm-svg,
body.dark-theme .mpa-logo,
body.dark-theme .gh-svg,
body.dark-theme .li-svg {
  fill: #00FF41;
}

body.dark-theme .dm-svg:hover,
body.dark-theme .mpa-logo:hover,
body.dark-theme .gh-svg:hover,
body.dark-theme .li-svg:hover {
  fill: #fff;
}

h2,
h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Content list styling - more specific selector */
.col ul {
  text-align: left;
  margin-left: 1rem;
}

.col ul li {
  margin-bottom: 0.5rem;
}

/* Button styling for dark background */
.btn-default {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}

.btn-default:hover,
.btn-default:focus {
  color: #1a1a1a;
  background-color: #fff;
}

/* Dark mode button - matrix green */
body.dark-theme .btn-default {
  color: #00FF41;
  border-color: #00FF41;
}

body.dark-theme .btn-default:hover,
body.dark-theme .btn-default:focus {
  color: #1a1a1a;
  background-color: #00FF41;
}

/* Reset footer icons list (undo content ul styling) */
.mastfoot ul.icons {
  text-align: center;
  margin-left: 0;
}

/* App Store Link Styling */
.app-store-link {
  text-decoration: none;
  display: flex;
  cursor: pointer !important;
}

.app-store-link img {
  height: 40px;
  cursor: pointer !important;
  transition: opacity 0.2s ease-in-out;
}

.app-store-link:hover {
  opacity: 0.8;
}