/*
 * WSU brand tokens and standard component classes.
 * Source of truth: planning/wsu-app-conventions.md §15 (UI & Branding) in the
 * WSU.AspNetCore.Foundation repo. Ported verbatim from the reference sample
 * (samples/WSU.AspNetCore.Foundation.Sample/wwwroot/css/site.css) so every
 * consuming app renders the same purple/gold and the same standard classes
 * without hand-copying.
 *
 * Consuming apps reference this file directly, e.g. in _Layout.cshtml:
 *   <link rel="stylesheet" href="~/_content/WSU.AspNetCore.Branding/css/wsu-brand.css" />
 * and load it BEFORE the app's own site.css, so app-specific rules can still
 * override a specific declaration when genuinely needed.
 */

:root {
	--wsu-purple: #4F2D7F;
	--wsu-purple-dark: #3a2060;
	--wsu-purple-deep: #2c1854;
	--wsu-gold: #FFC72C;
	--wsu-grey-light: #f5f3f8;
}

body {
	font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Two-tier header */
.navbar-wsu-global {
	background-color: var(--wsu-purple-deep);
}

.navbar-wsu-site {
	background-color: var(--wsu-purple);
}

.navbar-wsu-site .nav-link:hover,
.navbar-wsu-site .nav-link:focus {
	background-color: var(--wsu-purple-dark);
}

/* Global header brand link (logo + app name), for use inside .navbar-wsu-global:
 *   <a class="navbar-brand navbar-brand-wsu" ...>
 *     <img src="~/_content/WSU.AspNetCore.Branding/images/wsu-logo.png" alt="Winona State University" class="wsu-logo" />
 *     <span class="brand-name">App Name</span>
 *   </a>
 */
.navbar-brand-wsu {
	color: #fff !important;
	font-weight: 700;
	font-size: 1.1rem;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.navbar-brand-wsu:hover,
.navbar-brand-wsu:focus {
	color: var(--wsu-gold) !important;
}

.wsu-logo {
	height: 36px;
	width: auto;
	display: inline-block;
	flex-shrink: 0;
}

/* Buttons */
.btn-wsu {
	background-color: var(--wsu-purple);
	border-color: var(--wsu-purple);
	color: #fff;
}

.btn-wsu:hover,
.btn-wsu:focus {
	background-color: var(--wsu-purple-dark);
	border-color: var(--wsu-purple-dark);
	color: #fff;
}

.btn-outline-wsu {
	background-color: transparent;
	border-color: var(--wsu-purple);
	color: var(--wsu-purple);
}

.btn-outline-wsu:hover,
.btn-outline-wsu:focus {
	background-color: var(--wsu-purple);
	border-color: var(--wsu-purple);
	color: #fff;
}

/* Cards */
.card-header-wsu {
	background-color: var(--wsu-purple);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
}

/* Badges */
.wsu-badge {
	display: inline-block;
	background-color: var(--wsu-purple);
	color: #fff;
	border-radius: 0.25rem;
	padding: 0.25em 0.55em;
	font-size: 0.8rem;
	font-weight: 600;
}

.wsu-badge.badge-sm {
	font-size: 0.7rem;
	padding: 0.15em 0.4em;
}

/* Scoped styles for Markdig-rendered HTML (e.g. the Admin README viewer). No
   reference implementation existed yet as of this package's creation — kept
   deliberately conservative so it doesn't fight Bootstrap's own defaults. */
.wsu-markdown h1,
.wsu-markdown h2,
.wsu-markdown h3,
.wsu-markdown h4 {
	color: var(--wsu-purple);
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
}

.wsu-markdown a {
	color: var(--wsu-purple);
}

.wsu-markdown a:hover,
.wsu-markdown a:focus {
	color: var(--wsu-purple-dark);
}

.wsu-markdown code {
	background-color: var(--wsu-grey-light);
	padding: 0.1rem 0.3rem;
	border-radius: 0.25rem;
}

.wsu-markdown pre {
	background-color: var(--wsu-grey-light);
	padding: 1rem;
	border-radius: 0.375rem;
	overflow-x: auto;
}

.wsu-markdown table {
	border-collapse: collapse;
	width: 100%;
}

.wsu-markdown table th,
.wsu-markdown table td {
	border: 1px solid #dee2e6;
	padding: 0.5rem;
}

/* Purple footer bookending the global header. White on #4F2D7F = ~10.4:1 contrast. */
.footer-wsu {
	background-color: var(--wsu-purple);
	color: #fff;
}

.footer-wsu a {
	color: #fff;
	text-decoration: underline;
}

.footer-wsu a:hover,
.footer-wsu a:focus-visible {
	color: #fff;
	text-decoration: none;
}