:root {
    --hp-page-heading-bg: var(--hp-color-white);
    --hp-page-heading-text: var(--hp-color-dark-blue);
    --hp-page-heading-muted: var(--hp-color-text-muted);
}

.app-page-heading {
    background-color: var(--hp-page-heading-bg);
    border: 0;
    /* Align left with app shell (`.wrapper` / `.page-heading`) while keeping extra room on top/right. */
    margin-top: 8px;
    padding: 18px 22px 22px 10px;
}

.app-page-heading__inner {
    max-width: 100%;
}

.app-page-heading__mobile-toggle {
    margin-bottom: 0.5rem;
}

.app-page-heading__title {
    margin: 0;
}

/* Override global `h2.text-title` rules from app-shell.css. */
.app-page-heading h2.text-title.app-page-heading__title {
    color: var(--hp-page-heading-text);
    font-size: 28px;
    margin: 0 0 6px;
}

.app-page-heading__breadcrumb .breadcrumb {
    margin-bottom: 0;
    --bs-breadcrumb-font-size: 0.95rem;
    --bs-breadcrumb-divider: '>';
}

.app-page-heading__description {
    margin-top: 0.35rem;
    color: var(--hp-page-heading-muted);
    font-size: 0.95rem;
    line-height: 1.35;
    max-width: 70ch;
}

@media (min-width: 768px) {
    .app-page-heading {
        margin-top: 10px;
        padding: 20px 26px 24px 10px;
    }

    .app-page-heading__mobile-toggle {
        display: none;
    }
}