:root {
  --brand-navy: #003366;
  --brand-blue: #004a99;
  --brand-blue-hover: #003874;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--brand-navy);
  --md-primary-fg-color--light: var(--brand-blue);
  --md-primary-fg-color--dark: #00264d;
  --md-accent-fg-color: var(--brand-blue);
}

.md-header__button.md-logo img { border-radius: 50%; height: 2rem; width: 2rem; }
.md-typeset { font-size: 0.8rem; }
.md-typeset a { color: var(--brand-blue); }
.md-typeset a:hover { color: var(--brand-blue-hover); }

/* Keep large images within the content column */
.md-typeset img { max-width: 100%; height: auto; }

/* Make documentation tables easy to identify and scan */
.md-typeset table:not([class]) { border: 1px solid #9fb9d2; border-collapse: separate; border-radius: 6px; border-spacing: 0; box-shadow: 0 1px 2px rgba(0, 51, 102, 0.06); overflow: hidden; }
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td { border-bottom: 1px solid #c2d4e5; border-right: 1px solid #c2d4e5; padding: 0.6em 0.75em; vertical-align: top; }
.md-typeset table:not([class]) th { background: #eaf2fa; border-bottom: 2px solid #7fa5c8; color: #10253d; }
.md-typeset table:not([class]) th:last-child,
.md-typeset table:not([class]) td:last-child { border-right: 0; }
.md-typeset table:not([class]) tr:last-child td { border-bottom: 0; }

/*
 * Standard org header block handling.
 * The required header is: title, location, GitHub badge + org link, Last updated, separator.
 * Hide the location and badge lines, show the Last updated line as a small grey
 * caption, and hide the separator, so every page shows a clean last-updated date.
 */
.md-typeset h1 + p,
.md-typeset h1 + p + p {
  display: none;
}
.md-typeset h1 + p + p + p {
  display: none;
}
.md-typeset h1 + p + p + p + hr {
  display: none;
}

/* Widen the layout so the center gets more space */
@media screen and (min-width: 76.25em) { .md-grid { max-width: 96%; } }
@media screen and (min-width: 90em) { .md-grid { max-width: 1800px; } }

/* Left navigation: grey non-clickable section titles */
.md-nav { font-size: 0.66rem; }
.md-sidebar--primary .md-nav__item--section > .md-nav__link,
.md-sidebar--primary .md-nav__item--section.md-nav__item--active > .md-nav__link,
.md-nav--primary label.md-nav__link {
  color: #8a94a6;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.md-nav__item .md-nav__link[href] { color: #3d4a5c; }
.md-nav__link[href]:hover,
.md-nav__link--active,
.md-nav__item--active > .md-nav__link[href] { color: var(--brand-blue); }

/* Home hub cards */
.guide-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1rem 0 2rem;
}
.guide-card,
.guide-card:visited {
  background: #fff;
  border: 1px solid #dbe4ee;
  border-top: 3px solid var(--brand-blue);
  border-radius: 8px;
  color: inherit;
  display: flex;
  flex-direction: column;
  min-height: 7rem;
  padding: 1rem 1.05rem;
  text-decoration: none;
}
.guide-card:hover { box-shadow: 0 7px 18px rgba(0, 51, 102, 0.12); color: inherit; }
@media screen and (max-width: 44rem) { .guide-grid { grid-template-columns: 1fr; } }

/* Org catalog hero */
.org-hero {
  background: linear-gradient(180deg, #f6f9fc 0%, #ffffff 100%);
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  margin: 1rem 0 2rem;
  padding: 2.4rem 2.5rem;
}
.org-hero__eyebrow {
  background: #eef4ff;
  border-radius: 4px;
  color: #0f4c96;
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
  padding: 0.28rem 0.6rem;
  text-transform: uppercase;
}
.org-hero__lead {
  color: #4a5b70;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 48rem;
}
.org-hero__meta {
  color: #7183a0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 1rem 0 0;
  text-transform: uppercase;
}

/* Org catalog cards */
.org-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.25rem 0 2rem;
}
.org-card {
  background: #fff;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  color: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 1.4rem 1.4rem;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.org-card::before {
  background: var(--org-accent, #0f4c96);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.org-card:hover {
  border-color: #b9cde4;
  box-shadow: 0 14px 30px rgba(0, 51, 102, 0.14);
  transform: translateY(-3px);
}
.org-card--cloud2br { --org-accent: #0f4c96; }
.org-card--tec { --org-accent: #087f73; }
.org-card--sandbox { --org-accent: #7048b8; }
.org-card__head {
  align-items: center;
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.org-card__logo {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 51, 102, 0.08);
  flex: 0 0 auto;
  height: 3.25rem;
  object-fit: cover;
  width: 3.25rem;
}
.org-card__tag {
  background: color-mix(in srgb, var(--org-accent, #0f4c96) 10%, #ffffff);
  border-radius: 999px;
  color: var(--org-accent, #0f4c96);
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
  text-transform: uppercase;
}
.org-card__title {
  color: var(--brand-navy);
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.org-card__desc {
  color: #52627a;
  display: block;
  font-size: 0.8rem;
  line-height: 1.6;
}
.org-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 1.25rem;
}
.md-typeset .org-btn {
  align-items: center;
  border: 1px solid #cdd8e5;
  border-radius: 6px;
  color: var(--brand-navy);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  min-height: 2.2rem;
  padding: 0.4rem 0.85rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.md-typeset .org-btn:hover {
  background: #f5f9ff;
  border-color: var(--org-accent, #0f4c96);
  color: var(--brand-navy);
}
.md-typeset .org-btn--primary {
  background: var(--org-accent, #0f4c96);
  border-color: var(--org-accent, #0f4c96);
  color: #fff;
}
.md-typeset .org-btn--primary:hover {
  background: color-mix(in srgb, var(--org-accent, #0f4c96) 85%, #000000);
  border-color: color-mix(in srgb, var(--org-accent, #0f4c96) 85%, #000000);
  color: #fff;
}
@media screen and (max-width: 60rem) { .org-grid { grid-template-columns: 1fr; } }

/* YouTube content planning flow */
.youtube-flow {
  align-items: stretch;
  display: flex;
  gap: 0.45rem;
  margin: 1.25rem 0 2rem;
}
.youtube-flow__step {
  background: #f6f9fc;
  border: 1px solid #dbe4ee;
  border-top: 3px solid var(--brand-blue);
  border-radius: 8px;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  min-height: 4.5rem;
  padding: 0.7rem;
  text-align: center;
}
.youtube-flow__step strong { color: var(--brand-navy); font-size: 0.82rem; }
.youtube-flow__step span { color: #52627a; font-size: 0.68rem; line-height: 1.35; margin-top: 0.25rem; }
.youtube-flow__connector { align-self: center; color: #7fa5c8; font-size: 1.15rem; font-weight: 700; }
@media screen and (max-width: 60rem) {
  .youtube-flow { align-items: center; flex-direction: column; }
  .youtube-flow__step { max-width: 24rem; width: 100%; }
  .youtube-flow__connector { transform: rotate(90deg); }
}

/* Distinguish the footer GitHub links by adding a short org label to each */
.md-social {
  align-items: flex-start;
  display: grid;
  gap: 0.45rem 1rem;
  grid-template-columns: repeat(3, max-content);
}
.md-social__link { align-items: center; display: inline-flex; gap: 0.4rem; }
.md-social__link::after {
  color: #c9d3e0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.md-social__link[href="https://github.com/Cloud2BR"]::after { content: "Cloud2BR"; }
.md-social__link[href="https://github.com/Cloud2BR-TEC"]::after { content: "TEC Hub"; }
.md-social__link[href="https://github.com/Cloud2BR-MSFTLearningHub"]::after { content: "Cloud Sandbox"; }
.md-social__link:hover::after { color: #ffffff; }
@media screen and (max-width: 44rem) {
  .md-social { grid-template-columns: 1fr; }
}