/* Main content readability + light marketing-inspired polish */

.theme-appgenie .appgenie-branding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

/* Sidebar / collapsed rail: keep mascot compact (topbar sizing is route-specific below). */
.theme-appgenie aside.appgenie-sidebar .appgenie-branding__logo,
.theme-appgenie .appgenie-navigation-collapsed .appgenie-branding__logo {
  display: block;
  max-width: 48px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
}

.theme-appgenie .appgenie-branding__logo {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
}

.theme-appgenie .appgenie-branding img:not(.appgenie-branding__logo) {
  max-height: 48px;
  max-width: min(100%, 56px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
}

.theme-appgenie .appgenie-branding__logo-link {
  display: inline-flex;
  line-height: 0;
  max-width: 100%;
}

.theme-appgenie .appgenie-branding a.appgenie-branding__title-link {
  display: inline-flex;
  align-items: center;
  align-self: center;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-24), 3.5vw, var(--fs-36));
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink-900);
  text-decoration: none;
  text-decoration-line: none;
}

.theme-appgenie .appgenie-branding a.appgenie-branding__title-link:hover,
.theme-appgenie .appgenie-branding a.appgenie-branding__title-link:focus-visible {
  color: var(--genie-700);
  text-decoration: none;
  text-decoration-line: none;
}

/*
 * App shell top bar (webforms, auth, etc.): prominent wordmark + mascot; menus grouped right.
 * Use .appgenie-branding and [id$="-site-branding"] — many renders omit .block-system-branding-block on the wrapper.
 * Scoped with html.theme-appgenie only: marketing landing clears the header region (no top bar), so we must not tie
 * these rules to body:not(.appgenie-marketing-landing-page) — a stray marketing body class would suppress sizing while
 * generic .theme-appgenie branding rules still set color.
 */
html.theme-appgenie .appgenie-topbar {
  /* Fit mascot at max 150×150 plus vertical breathing room (below). */
  min-height: calc(150px + var(--sp-8));
}

html.theme-appgenie .appgenie-topbar > div,
html.theme-appgenie .appgenie-topbar .region.region-header {
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--sp-6);
}

html.theme-appgenie header.appgenie-topbar [id$="-site-branding"] {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  margin-inline-end: auto;
}

html.theme-appgenie header.appgenie-topbar .appgenie-branding {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  column-gap: var(--sp-4);
}

html.theme-appgenie header.appgenie-topbar .appgenie-branding__logo-link {
  display: flex;
  align-items: center;
  align-self: stretch;
  line-height: 0;
}

html.theme-appgenie header.appgenie-topbar .appgenie-branding__logo {
  display: block;
  max-width: 150px;
  max-height: 150px;
  width: auto;
  height: auto;
}

html.theme-appgenie header.appgenie-topbar .appgenie-branding a.appgenie-branding__title-link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: clamp(36px, 7.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-decoration: none;
  text-decoration-line: none;
  color: var(--ink-900);
  white-space: nowrap;
}

html.theme-appgenie header.appgenie-topbar .appgenie-branding a.appgenie-branding__title-link:hover,
html.theme-appgenie header.appgenie-topbar .appgenie-branding a.appgenie-branding__title-link:focus-visible {
  color: var(--genie-700);
  text-decoration: none;
  text-decoration-line: none;
}

html.theme-appgenie .appgenie-topbar > div > *:not([id$="-site-branding"]) {
  flex-shrink: 0;
}

@media (max-width: 47.9375em) {
  html.theme-appgenie .appgenie-topbar > div,
  html.theme-appgenie .appgenie-topbar .region.region-header {
    flex-wrap: wrap;
    row-gap: var(--sp-3);
    justify-content: flex-end;
  }

  html.theme-appgenie header.appgenie-topbar [id$="-site-branding"] {
    margin-inline-end: 0;
    flex: 1 1 100%;
  }

  html.theme-appgenie header.appgenie-topbar .appgenie-branding a.appgenie-branding__title-link {
    white-space: normal;
  }
}

/* Block titles (when visible): compact section label style */
.theme-appgenie .block h2:not(.visually-hidden) {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Node / editorial body rhythm */
.theme-appgenie article .field--name-body,
.theme-appgenie article .field--type-text-long,
.theme-appgenie article .field--type-text-with-summary {
  max-width: 65rem;
}

.theme-appgenie article .field--name-body > .field__item > * + *,
.theme-appgenie article .field--type-text-long > .field__item > * + *,
.theme-appgenie article .field--type-text-with-summary > .field__item > * + * {
  margin-block-start: var(--sp-4);
}

.theme-appgenie article .field--name-body p,
.theme-appgenie article .field--type-text-with-summary p {
  margin: 0;
  margin-block-start: var(--sp-4);
  color: var(--fg-1);
}

.theme-appgenie article .field--name-body p:first-child {
  margin-block-start: 0;
}

.theme-appgenie article .field--name-body ul,
.theme-appgenie article .field--name-body ol {
  margin-block: var(--sp-4);
  padding-inline-start: var(--sp-6);
  color: var(--fg-1);
}

/*
 * Editorial prose (primary content article): heading & divider rhythm.
 * Global base.css zeros heading margins; restore spacing here without touching
 * marketing landing or teaser/list cards (.node--view-mode-teaser).
 * (Some renders omit node--view-mode-* on <article>; main#main-content keeps scope tight.)
 */
.theme-appgenie main#main-content article:not(.marketing-landing):not(.node--view-mode-teaser) h2:not(.visually-hidden) {
  margin-block-end: var(--sp-5);
}

.theme-appgenie main#main-content article:not(.marketing-landing):not(.node--view-mode-teaser) * + h2:not(.visually-hidden) {
  margin-block-start: clamp(var(--sp-8), 5vw, var(--sp-12));
}

.theme-appgenie main#main-content article:not(.marketing-landing):not(.node--view-mode-teaser) hr {
  margin-block: clamp(var(--sp-8), 4vw, var(--sp-12));
}

/* Front page wash (soft genie tint; not full marketing kit) */
.theme-appgenie.path-front .appgenie-workspace-inner {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--genie-100) 45%, transparent) 0,
    transparent 220px
  );
}