/* assets/css/custom.css */

/* ----------------------------
   NASA EarthRISE custom theme
   ---------------------------- */

/* Note: CSS cannot import Just the Docs styles directly like SCSS can.
   The theme will load its default styles automatically. */

/* Root variables for colors */
:root {
  --body-background-color: #221d1f;
  --text-color: #ffd51f;
  --link-color: #3ca97d;
  --link-hover-color: #1a9247;
  --heading-color: #ffd51f;
  --accent-color: #e13a3e;
  --border-color: #cccccc;
  --feedback-color: #ff9800;
  --sidebar-color: #e3f2fd;
  --code-background-color: #fafafa;
  --button-primary-color: #4caf50;
  --button-primary-hover-color: #388e3c;
}

/* Apply background and text colors */
body {
  background-color: var(--body-background-color);
  color: var(--text-color);
}

/* Links */
a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
}

/* Update navbar component */
.navbar {
  background-color: var(--accent-color) !important;
}

.navbar a {
  color: #221d1f !important;
}

.navbar a:hover {
  color: #3ca97d !important; 
}

/* Update footer component */
.site-footer {
  background-color: #221d1f; !important;
  color: #221d1f; !important;
}

.site-footer a {
  color: var(--link-color) !important;
}

/* Update side-bar component */
.side-bar {
    background-color: #221d1f;
}

/* Responsive video styles */
.responsive-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}