/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* default.html.twig routes pages through partials/layout.html.twig (the
 * .columns/#item/#sidebar shell already used by the blog templates) so
 * pages with `preview_panel: true` in frontmatter get the preview panel in
 * a real side column instead of stacked below the prose. That nests
 * .content-item one level deeper than theme.css's card-styling selector
 * (#body-wrapper > .container > .content-item) expects, so restate it here
 * for the #item path — every default.html.twig page goes through #item now,
 * with or without a sidebar.
 *
 * Scoped to :not(.blog-listing) because blog-item.html.twig also renders
 * "content-item" inside this same #item wrapper (via item.html.twig, which
 * embeds this theme's own layout.html.twig for its sidebar widgets) — an
 * unscoped rule would outspecify theme.css's `.blog-listing .content-item`
 * and put card styling on blog items on any other site sharing this theme,
 * even though nothing on this site uses that template today. */
#body-wrapper:not(.blog-listing) #item > .content-item {
  max-width: 960px;
  margin-inline: auto;
  background: var(--q2-bg-elev);
  border-radius: var(--q2-radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem);
  box-shadow:
    rgba(19, 19, 22, 0.04) 0 1px 2px,
    rgba(19, 19, 22, 0.04) 0 8px 24px -8px;
}
#body-wrapper:not(.blog-listing) #item > .content-item > :first-child {
  margin-top: 0;
}
#body-wrapper:not(.blog-listing) #item > .content-item > :last-child {
  margin-bottom: 0;
}
:root[data-theme="dark"] #body-wrapper:not(.blog-listing) #item > .content-item {
  box-shadow:
    rgba(0, 0, 0, 0.35) 0 1px 2px,
    rgba(0, 0, 0, 0.45) 0 10px 30px -10px,
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Site wordmark next to the trailblazer-mark.svg icon in partials/logo.html.twig,
 * used until a designed logo image is uploaded via the theme's custom_logo setting. */
.navbar-brand-word {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .navbar-brand-word {
    font-size: 0.9375rem;
  }
}

/* theme.css zeroes #footer p margins for the single-line Grav credit; this
 * site's footer has two stacked lines, so restore spacing between them. */
#footer p + p {
  margin-top: 0.5rem;
}

/* Red/white/black scheme matching civicathletics.org's branding
 * (docs/css/custom.css there: --ca-red #c8102e, --ca-red-dark #8f0a20).
 * accent-color in quark2.yaml already carries #c8102e through to
 * --q2-accent/--q2-link via base.html.twig; these two rules add the same
 * red rule-line civicathletics puts on its navbar/footer, on top of
 * quark2's existing light/dark backgrounds rather than replacing them. */
#header {
  border-bottom-color: #c8102e;
}
#footer {
  border-top-color: #c8102e;
}

/* civicathletics.org uses the darker red for body link text, reserving the
 * brighter red for hover/accents — mirror that here in light mode only,
 * since --q2-link's dark-mode value is already lightened for contrast
 * against a near-black background and darkening it further would hurt
 * readability. */
:root[data-theme="light"] {
  --q2-link: #8f0a20;
}