docs/stylesheets/extra.css

/* ==========================================================================
   Global Color and Font Variables
   ========================================================================== */
:root {
  --color-red: #CA463A;
  --color-white: #fff;
  --color-dark: #1C1C1C;
  --font-inter: "Inter",
  sans-serif;
}

/* ==========================================================================
   Header Styles
   ========================================================================== */

/* Main header container (the top black bar) */
.md-header {
  box-shadow: none;
  background-color: var(--color-dark);
}

/* Inner content of the header */
.md-header .md-header__inner {
  background-color: var(--color-dark);
  min-height: 80px;
}

/* Styles for the logo image */
.md-header .md-header__inner .header-logo img,
.md-header .md-header__inner .header-logo svg {
  height: 42px;
  width: auto;
}

/* --- Definitive Navigation CSS (Final Version) --- */

/* 1. Set the height of the main navigation bar */
.md-tabs {
  background-color: var(--color-red);
  height: 2.5rem; /* Set an explicit, predictable height for the bar */
}

/* 2. Control the alignment of the links within the bar */
.md-tabs .md-tabs__list {
  height: 100%; /* Make the link container fill the bar's height */
  justify-content: center; /* Center links horizontally */
  align-items: center;   /* NEW: Center links vertically */
  flex-wrap: wrap;       /* Allow wrapping on small screens */
}

/* 3. Style the individual navigation links */
.md-tabs__link {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  /* We no longer need vertical padding for spacing */
  padding: 0 0.4rem;
  font-size: 0.65rem; /* NEW: Adjust font size */
}

/* ==========================================================================
   Logo Size Adjustment
   ========================================================================== */

/*
  Targets the logo in the header, whether it's an SVG or a standard image file.
  Adjust the height value as needed to get the perfect size.
*/
.md-header .md-logo img,
.md-header .md-logo svg {
  height: 42px; /* This should match the Apache Sedona logo size */
  width: auto;  /* Ensures the width scales proportionally */
}

/* ==========================================================================
   Mobile Navigation Styles
   ========================================================================== */

/*
  Force the entire mobile navigation header to be black, overriding theme defaults.
*/
.md-nav--primary .md-nav__title,
.md-nav--primary .md-nav__source {
  background-color: var(--color-dark) !important;
}

/* ==========================================================================
   Swap Logo ONLY in Mobile Navigation
   ========================================================================== */

/*
  Target the logo link (<a> tag) directly and apply the new logo
  as a background image, overriding the theme's default icon.
*/
.md-sidebar--primary .md-nav__title a.md-nav__button.md-logo {
  background-image: url('/docs/image/sedona_logo_symbol.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* Hide the theme's default icon which is applied via a mask */
  -webkit-mask: none;
  mask: none;
}

/* Change the mobile nav header label text to white */
label.md-nav__title {
  color: #FFFFFF !important;
}