/* CategoryPage/ArticleIndexPage's own page identity -- centered,
unlike ArticlePage's own left-aligned prose (see article_page.css) --
both page types share this same template shape (title, intro, general
info, card grids), so one shared rule covers both wrapper classes. Layout/
positioning rules for these same page types (the grids themselves, the
union-group row) live in category_layout.css instead -- kept separate so
"what this page looks like" and "how it's laid out" each read as one
thing per file. */
.category-page,
.article-index-page {
  text-align: center;
}

/* bigger than the shared .category-page h1/.article-page h1 rule below
gives it (plain ~2rem browser default) -- landing-page-sized title, unlike
ArticlePage's own h1 which is governed by ArticleStyle.title_font_size
instead (left untouched here). */
.category-page h1,
.article-index-page h1 {
  font-size: 2.75rem;
}

/* #page-title-plain (see page_title_banner.html) needs this explicitly:
its own [hidden] attribute alone loses to the plain ".category-page h1"
rule below (display: inline-block) at equal specificity, since author CSS
always beats the UA stylesheet's own "[hidden] { display: none }" -- same
issue/fix as .quick-style-field[hidden] in article_quick_style.css. An id
selector's specificity guarantees this wins regardless of what else
targets h1 here. */
#page-title-plain[hidden] {
  display: none;
}

/* intro reads as the page's lead paragraph; general info is a smaller,
secondary note underneath it -- see CategoryPage.general_info/
ArticleIndexPage.general_info's own help_text. Also covers
StudentUnionCategoryPage, which shares the plain .category-page wrapper
class (studentunion_category_page.html). */
.category-page .intro,
.article-index-page .intro {
  font-size: 1.15rem;
}

.category-page .general-info,
.article-index-page .general-info {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* Both render as {{ ...|richtext }}, i.e. plain <p> tags -- the global
`p { font-size: 1.05rem; }` rule (elements.css) sets that directly on the
tag itself, which always wins over inheriting .intro/.general-info's own
font-size from their parent regardless of specificity (a property set
directly on an element is never overridden by inheritance, no matter how
specific the ancestor rule is). inherit here forces it back onto each
one's own computed value instead of the global default -- same fix as
.article-header > .intro p in article_page.css and .union-core p in
union_page.css. */
.category-page .intro p,
.article-index-page .intro p,
.category-page .general-info p,
.article-index-page .general-info p {
  font-size: inherit;
}

/* "Subcategories"/"Categories"/"Suggested Articles"/"Tools" section
headings, and the article cards' own titles/meta row (article_card.css --
neither sets its own text-align, but .articlecard-meta is a flex row, so
plain inherited text-align wouldn't center it as a row -- see
category_layout.css's own justify-content rule for that). Category card
titles need no override here: .category-card below already centers itself
explicitly, everywhere it's used. */
.category-page .section-heading,
.article-index-page .section-heading {
  text-align: center;
}

.section-heading {
  margin-top: 2.5rem;
  text-align: left;
}

.section-subheading {
  margin: -0.5rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.section-divider {
  border: none;
  border-top: 2px solid var(--color-border);
  opacity: 0.15;
  margin: 2.5rem 0 1.5rem;
}

.section-divider + .section-heading {
  margin-top: 0.75rem;
}

/* accent color carried from a category onto its own page and its articles */
.category-page h1,
.article-page h1 {
  display: inline-block;
  border-bottom: 4px solid var(--accent-color, var(--color-border));
  padding-bottom: 0.4rem;
}

/* editor-controlled title font size (ArticleStyle.title_font_size,
--title-font-size set on .article-header, see article_page.html) -- the
fallback here, 2rem, is just the plain browser h1 default, matching the
size before this became an explicit override. Scaled by the Global
editor's own font-size multiplier (--content-font-size-multiplier, set on
.article-page -- inherited here), same as .intro/.article-meta in
article_page.css. */
.article-page h1 {
  font-size: calc(var(--title-font-size, 2rem) * var(--content-font-size-multiplier, 1));
}