/* ----------------------------------------------------------------- brand palette

   The colours of the IPYOA burgee. The first block is the palette; the second hands it
   to the variables Cassiopeia and Bootstrap read, so the header, the footer, links,
   buttons, text, borders and the gallery all follow it. */

:root {
	/* Primary: header, navigation, buttons, links, strong text */
	--ipyoa-navy: #214c6c;
	--ipyoa-navy-rgb: 33, 76, 108;

	/* Dark accent: footer, high-contrast elements */
	--ipyoa-navy-dark: #143246;
	--ipyoa-navy-dark-rgb: 20, 50, 70;

	/* Secondary: card and section backgrounds, subtle accents */
	--ipyoa-sand: #bfa783;
	--ipyoa-sand-rgb: 191, 167, 131;

	/* Accent: highlights, hover surfaces, light sections */
	--ipyoa-sea: #abc8d0;
	--ipyoa-sea-rgb: 171, 200, 208;

	/* Supporting: outline buttons, icons, mid tones */
	--ipyoa-star: #86a9bd;
	--ipyoa-star-rgb: 134, 169, 189;

	/* Neutrals: page background and the subtle one for sections and cards */
	--ipyoa-white: #fff;
	--ipyoa-off-white: #f7f4ef;
	--ipyoa-off-white-rgb: 247, 244, 239;

	/* Text */
	--ipyoa-text: #1a2f3d;
	--ipyoa-text-rgb: 26, 47, 61;
	--ipyoa-text-muted: #5a6f7d;
	--ipyoa-text-muted-rgb: 90, 111, 125;

	/* Borders and dividers */
	--ipyoa-border: #d4c5b0;
	--ipyoa-border-rgb: 212, 197, 176;

	/* Positive accent, for a sea-green that belongs to the palette */
	--ipyoa-teal: #5b8a8a;
	--ipyoa-teal-rgb: 91, 138, 138;
}

:root {
	/* Cassiopeia paints the header gradient, the footer, primary buttons and the active
	   tab from these two, and the hover colour doubles as the link hover. */
	--cassiopeia-color-primary: var(--ipyoa-navy);
	--cassiopeia-color-link: var(--ipyoa-navy);
	--cassiopeia-color-hover: var(--ipyoa-navy-dark);

	/* The template's own stylesheet drops the `bs-` prefix. */
	--primary: var(--ipyoa-navy);
	--primary-rgb: var(--ipyoa-navy-rgb);
	--link-color: var(--ipyoa-navy);
	--link-color-rgb: var(--ipyoa-navy-rgb);
	--link-hover-color: var(--ipyoa-navy-dark);
	--link-hover-color-rgb: var(--ipyoa-navy-dark-rgb);
	--body-color: var(--ipyoa-text);
	--body-color-rgb: var(--ipyoa-text-rgb);
	--body-bg: var(--ipyoa-white);
	--emphasis-color: var(--ipyoa-navy-dark);
	--secondary-color: var(--ipyoa-text-muted);
	--secondary-color-rgb: var(--ipyoa-text-muted-rgb);
	--tertiary-bg: var(--ipyoa-off-white);
	--light: var(--ipyoa-off-white);
	--light-rgb: var(--ipyoa-off-white-rgb);
	--border-color: var(--ipyoa-border);
	--focus-ring-color: rgba(var(--ipyoa-navy-rgb), 0.25);
	--primary-bg-subtle: color-mix(in srgb, var(--ipyoa-navy) 10%, var(--ipyoa-white));
	--primary-border-subtle: color-mix(in srgb, var(--ipyoa-navy) 30%, var(--ipyoa-white));
	--primary-text-emphasis: var(--ipyoa-navy-dark);

	/* The forum brings Bootstrap's own stylesheet, which reads the prefixed names. */
	--bs-primary: var(--ipyoa-navy);
	--bs-primary-rgb: var(--ipyoa-navy-rgb);
	--bs-link-color: var(--ipyoa-navy);
	--bs-link-color-rgb: var(--ipyoa-navy-rgb);
	--bs-link-hover-color: var(--ipyoa-navy-dark);
	--bs-link-hover-color-rgb: var(--ipyoa-navy-dark-rgb);
	--bs-body-color: var(--ipyoa-text);
	--bs-body-color-rgb: var(--ipyoa-text-rgb);
	--bs-body-bg: var(--ipyoa-white);
	--bs-emphasis-color: var(--ipyoa-navy-dark);
	--bs-secondary-color: var(--ipyoa-text-muted);
	--bs-secondary-color-rgb: var(--ipyoa-text-muted-rgb);
	--bs-tertiary-bg: var(--ipyoa-off-white);
	--bs-light: var(--ipyoa-off-white);
	--bs-light-rgb: var(--ipyoa-off-white-rgb);
	--bs-border-color: var(--ipyoa-border);
	--bs-focus-ring-color: rgba(var(--ipyoa-navy-rgb), 0.25);
	--bs-primary-bg-subtle: color-mix(in srgb, var(--ipyoa-navy) 10%, var(--ipyoa-white));
	--bs-primary-border-subtle: color-mix(in srgb, var(--ipyoa-navy) 30%, var(--ipyoa-white));
	--bs-primary-text-emphasis: var(--ipyoa-navy-dark);
}

/* The header runs navy into the dark accent; the footer is the dark accent itself. */
.footer {
	background-color: var(--ipyoa-navy-dark);
	background-image: none;
}

/* Bootstrap ships its button colours as literals, so the forum needs them by name. */
.btn-primary {
	--bs-btn-bg: var(--ipyoa-navy);
	--bs-btn-border-color: var(--ipyoa-navy);
	--bs-btn-hover-bg: var(--ipyoa-navy-dark);
	--bs-btn-hover-border-color: var(--ipyoa-navy-dark);
	--bs-btn-active-bg: var(--ipyoa-navy-dark);
	--bs-btn-active-border-color: var(--ipyoa-navy-dark);
	--bs-btn-disabled-bg: var(--ipyoa-navy);
	--bs-btn-disabled-border-color: var(--ipyoa-navy);
	--bs-btn-focus-shadow-rgb: var(--ipyoa-navy-rgb);
}

/* Outline buttons take the supporting blue, which reads as a button without competing
   with the primary one. */
.btn-outline-secondary {
	--bs-btn-color: var(--ipyoa-navy);
	--bs-btn-border-color: var(--ipyoa-star);
	--bs-btn-hover-bg: var(--ipyoa-sea);
	--bs-btn-hover-border-color: var(--ipyoa-star);
	--bs-btn-hover-color: var(--ipyoa-navy-dark);
	--btn-color: var(--ipyoa-navy);
	--btn-border-color: var(--ipyoa-star);
	--btn-hover-bg: var(--ipyoa-sea);
	--btn-hover-border-color: var(--ipyoa-star);
	--btn-hover-color: var(--ipyoa-navy-dark);
}

header .brand-logo {
  display: block;
  max-width: min(90%, 15rem);
  margin: 0 auto;
  text-align: center;
}
header nav.navbar {
  margin: 0 auto;
}
@media (width < 768px) {
  header nav.navbar {
    text-align: center;
  }
}
header nav.navbar .navbar-toggler {
  margin: 0 auto;
  margin-bottom: 1rem;
}

/* Forum (Kunena): the child categories of a forum are printed as one inline list that is hard to scan.
   Two columns instead — a grid item ignores the `float-start` the template puts on every entry. */
#kunena ul.list-inline {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.15rem 1.5rem;
	margin-bottom: 0;
}

#kunena ul.list-inline > li > a + a {
	margin-inline-start: 0.25rem;
}

@media (min-width: 576px) {
	#kunena ul.list-inline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The topic count is a block below the name; inline it so one entry is one row. */
	#kunena ul.list-inline > li > small {
		display: inline !important;
	}
}