/*
 * Copyright 2026 NVIDIA CORPORATION
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* NVIDIA green. #76B900 is the brand value; the darker tone is used for
   hover and for text on light backgrounds, where #76B900 fails contrast. */
:root {
  --nv-green: #76b900;
  --nv-green-dark: #4f7d00;
  --nv-black: #1a1a1a;
}

[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--nv-black);
  --md-primary-fg-color--light: #3d3d3d;
  --md-primary-fg-color--dark: #000000;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--nv-green-dark);
  --md-accent-fg-color--transparent: rgba(118, 185, 0, 0.1);
}

/* Links resolve to the darker green in light mode for readable contrast, and
   to the brand green in dark mode where it sits on near-black. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--nv-green-dark);
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--nv-green);
}

/* Landing page hero */
.mokka-hero {
  text-align: center;
  padding: 2.5rem 1rem 1rem;
}

.mokka-hero img {
  max-width: 320px;
  width: 60%;
  height: auto;
}

.mokka-hero .mokka-tagline {
  font-size: 1.35rem;
  font-weight: 300;
  margin: 0.75rem 0 0.25rem;
  color: var(--md-default-fg-color--light);
}

/* The hero image already carries the product name, so the H1 next to it is
   visually redundant. Clip it instead of using display:none, which would also
   drop it from the accessibility tree and leave the page with no heading. */
.mokka-hero + h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Card grid, built on Material's grid/cards classes */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.4rem;
  transition: border-color 125ms, box-shadow 125ms;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--nv-green);
  box-shadow: 0 0 0.2rem rgba(118, 185, 0, 0.35);
}

/* Architecture diagram on the landing page */
.mokka-architecture img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}