/* XCS.AF customizations on top of the SingulinkFX template.
   Kept separate from the vendor files so upgrades stay easy to diff. */

/* The XCS.AF logo has a dark wordmark on a transparent background, so it's
   unreadable on the dark theme's dark navbar. Give it a light backing plate
   until we have an official light-mode logo variant. */
[data-theme='dark'] .logomark {
  background: #ffffff;
  border-radius: 4px;
  padding: 3px 8px;
}

/* The logo image already carries the wordmark, so the duplicate text label
   next to it in the top navbar is redundant. */
.brand-title {
  display: none;
}

/* Nav groups without their own page (e.g. "Project Efforts") render as a
   bare <a> with no .sidebar-item class, so it was missing that class's
   padding and sitting flush left of items like "Home" that do have a page.
   Match the padding so both sit at the same indent, and add a click-to-expand
   affordance (behavior wired up in custom.js) since level-1 items no longer
   show docfx's own expand-stub arrow. */
#navbar > ul.level1 > li > a:not(.sidebar-item) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px;
  color: var(--sidebar-item-color);
  border-radius: 4px;
  cursor: pointer;
}

#navbar > ul.level1 > li > a:not(.sidebar-item):hover {
  background: var(--sidebar-level1-item-hover-bg-color);
}

#navbar > ul.level1 > li > a:not(.sidebar-item)::after {
  content: "\203a";
  font-size: 1.2em;
  line-height: 1;
  transition: transform .15s ease;
}

#navbar > ul.level1 > li.nav-expanded > a:not(.sidebar-item)::after {
  transform: rotate(90deg);
}

/* Sub-items (e.g. "Workhours") stay collapsed until their group is clicked,
   or expand automatically when one of them is the current page. */
#navbar ul.level2 {
  display: none;
}

#navbar li.nav-expanded > ul.level2 {
  display: block;
}

/* Page header, styled after the legacy manual.xcs.app header: title, then a
   small "last updated" meta line, then a separator before the content.
   The meta line is generated by scripts/update-doc-metadata.py. */
#_content > h1:first-of-type {
  margin-bottom: .3rem;
}

#_content > p.page-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1.5rem;
  padding-bottom: .8rem;
  font-size: .85rem;
  color: var(--text-color);
  opacity: .65;
  border-bottom: 1px solid var(--separator-color);
}

/* Logo + "Open Cloud Services" link, side by side at the same height. */
.brand-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.open-app-link {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  padding: .35rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--link-color);
  border: 1px solid var(--separator-color);
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.open-app-link:hover {
  border-color: var(--link-color);
  background: var(--sidebar-level1-item-hover-bg-color);
}

/* Full-bleed photo banner (same team photo used on the legacy manual.xcs.app
   header) with a dark overlay so the heading stays readable in both themes. */
.landing-hero {
  text-align: center;
  padding: 5rem 1rem;
  margin: -1px -1px 2.5rem;
  background-image: linear-gradient(rgba(13, 20, 28, .45), rgba(13, 20, 28, .45)), url('../images/hero-banner.jpeg');
  background-size: cover;
  background-position: center 30%;
}

.landing-hero h1 {
  font-size: 2.4rem;
  margin-bottom: .5rem;
  color: #ffffff;
}

.landing-hero p {
  font-size: 1.1rem;
  color: #e7ecf1;
  max-width: 40rem;
  margin: 0 auto;
}

.landing-section {
  margin-bottom: 3rem;
}

.landing-section > h2 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.landing-changelog {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--separator-color);
}

.landing-changelog li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: .6rem 0;
  border-bottom: 1px solid var(--separator-color);
}

.landing-changelog-date {
  flex: 0 0 auto;
  width: 6rem;
  font-size: .8rem;
  color: var(--text-color);
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

.landing-changelog a {
  font-weight: 500;
}

.footer-links {
  font-size: .8rem;
  line-height: 1.6;
}

.footer-links a {
  color: var(--text-color);
  opacity: .7;
  text-decoration: none;
}

.footer-links a:hover {
  opacity: 1;
  color: var(--link-color);
}

.landing-about {
  border-top: 1px solid var(--separator-color);
  padding-top: 2rem;
}

.landing-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.landing-about-grid h3 {
  font-size: 1rem;
  margin-bottom: .5rem;
}

.landing-plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-plain-list li {
  padding: .2rem 0;
}

.landing-social {
  display: flex;
  gap: .75rem;
}

.landing-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--separator-color);
  color: var(--text-color);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

.landing-social a:hover {
  border-color: var(--link-color);
  color: var(--link-color);
}