/**
  THEME COLORS
**/

/* Primary color / header + tabs to match Bayer Cloud Docs dark blue */
:root {
  /* Primary foreground e.g. Header */
  --md-primary-fg-color: #10384f;
  /* Accent e.g. link hover */
  --md-accent-fg-color: #3f51b5;
}

.md-header {
  background-color: #10384f;
}

@media only screen and (max-width: 76.25em) {
  .md-header {
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
    transition: color 250ms, background-color 250ms, box-shadow 250ms;
  }
}

.md-tabs {
  background-color: #10384f;
}

/* Get started button */
.md-typeset .md-button--primary {
  color: #fff;
  background-color: #10384f;
  border-color: #10384f;
  border-radius: 4px;
}

.md-typeset .md-button {
  padding: 0.425em 2em;
}

.md-typeset .md-button:hover,
.md-typeset .md-button:active {
  color: inherit;
}

.md-typeset .md-button--primary:hover {
  color: #fff;
  background-color: #10384f;
  border-color: #10384f;
  border-radius: 4px;
}

.md-typeset .md-button:not(.md-button--primary):hover,
.md-typeset .md-button:not(.md-button--primary):active {
  background-color: transparent;
  border-color: currentColor;
}

/**
  GENERAL FORMATTING
**/

/* Increase Header Bayer Logo size */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  object-fit: contain;
  height: 100%;
  width: 24px;
}

.md-nav__link--active {
  color: var(--md-primary-fg-color);
  text-decoration-line: underline;
  font-weight: bold;
}

/* Image Formatting */
.width200 img {
  width: 200px;
}

.width400 img {
  width: 400px;
}

.width600 img {
  width: 600px;
}

.webhook-state-diagram {
  display: flex;
  justify-content: center;
  margin: 1rem auto 1.25rem;
}

.webhook-state-diagram img {
  display: block;
  width: clamp(18rem, 68vw, 34rem);
  max-width: 100%;
  height: auto;
}

/* Adjust link hover and visited colors to be more recognizable */
.md-typeset a {
  color: #068fd5;
}

a:hover,
a:active {
  color: #7ccef2;
}

/* Hero/title text styling used on Cloud Docs landing templates */
.tx-hero h1 {
  font-weight: 700;
  font-size: 38px;
  line-height: 46px;
  color: rgb(38, 38, 38);
}

.tx-hero p {
  color: rgb(92, 92, 92);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
}

.headlink a {
  background-color: #10384f !important;
  color: #fff !important;
}

/* ── Home page hero ── */
[align="center"] h1 {
  font-weight: 700;
  line-height: 46px;
  margin-bottom: 0.45rem;
  color: #10384f;
}

[align="center"] h1 + p {
  margin-top: 0;
  color: rgb(92, 92, 92);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
}

/* Hero pill buttons */
.hero-pills {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Kill paragraph margins inside hero-pills */
.hero-pills p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.pill-btn {
  transition: color 125ms;
  color: #fff !important;
  background-color: #10384f !important;
  padding: 2px 14px;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8rem;
  text-decoration: none !important;
}

.pill-btn:hover {
  color: #fff !important;
  background-color: #10384f !important;
  opacity: 0.85;
}

/* ── Home page section spacing ── */
/* Tighten hero bottom padding */
[align="center"] {
  margin-bottom: -0.5rem;
}

/* Reduce space around horizontal rules between sections */
.md-content .md-typeset hr {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ── Cloud-docs style clickable cards ── */
.responsive-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}

@media screen and (min-width: 64rem) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

a.card-wrapper {
  text-decoration: none !important;
  transition: none;
  background: none !important;
  padding: 0;
}

.responsive-grid .card {
  position: relative;
  background-color: #fff;
  padding: 1.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  justify-content: flex-start;
  box-shadow: rgba(0, 0, 0, 0.09) 0.3125rem 0.3125rem 0px -0.0625rem,
    rgba(0, 0, 0, 0.15) 0px 0.25rem 0.5rem 0px;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}

.responsive-grid .card:hover {
  box-shadow: rgba(0, 0, 0, 0.2) 0.3125rem 0.3125rem 0px -0.0625rem,
    rgba(0, 0, 0, 0.26) 0px 0.25rem 0.5rem 0px;
}

@media screen and (min-width: 75rem) {
  .responsive-grid .card {
    padding: 2rem 2.5rem;
  }
}

@media screen and (min-width: 36rem) {
  .responsive-grid .card {
    padding: 1rem 1.5rem;
  }
}

.responsive-grid .card .logo {
  margin-right: 0.75rem;
  width: 1.2rem;
  min-width: 1.2rem;
}

.responsive-grid .card .logo svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
  color: rgb(61, 61, 61);
}

.responsive-grid .card .card-content {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  width: 100%;
}

.responsive-grid .card .card-content h5 {
  color: rgb(61, 61, 61);
  margin: 0;
  text-transform: none;
  font-size: 0.8rem;
  font-weight: 600;
}

.responsive-grid .card .card-content p {
  margin-top: 0.25em;
  margin-bottom: 0;
  color: rgb(92, 92, 92);
  font-size: 0.7rem;
  font-weight: 300;
  line-height: 1.4;
}

/**
  CODEHILITETABLE (table extension)
**/

/* Zebra-style striping to table rows for readability */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Box shading to table for readability */
.md-typeset table:not([class]) {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
    0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

/**
  SEARCH RESULTS
**/

/* Hide tags in search results only */
.md-search-result .md-tag,
.md-search-result [class*="tag"] {
  display: none !important;
}

/* ── Homepage support table ── */
.support-table table {
  font-size: 1.1rem;
}

.support-table th,
.support-table td {
  padding: 1rem 1.25rem;
}

/* ── Instant navigation progress bar ── */
.md-progress {
  background: var(--lk-accent) !important;
  height: 4px;
}
.md-progress__bar {
  background: var(--lk-accent) !important;
}