/*
 * ara Corporate Design for the portal, based on the ara CD Guideline (April 2024).
 * Themes Bootstrap 5.3 globally so every template follows the CI.
 *
 * Colors:     Leading Red #c8142d (primary), Warm White #f5f0ee (backgrounds,
 *             never for type), Weiss, Soft Black #232328 (copy, never pure black)
 * Typography: Gazpacho Medium (headlines), Helvetica Neue Bold Extended
 *             (headline highlight), Helvetica Neue Light/Roman (copy)
 */

/* fonts are licensed and gitignored (static/fonts), fallbacks keep the layout */
@font-face {
	font-family: "Gazpacho";
	src: url("fonts/Gazpacho-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Helvetica Neue LT Pro";
	src: url("fonts/HelveticaNeueLTPro-Lt.woff2") format("woff2");
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: "Helvetica Neue LT Pro";
	src: url("fonts/HelveticaNeueLTPro-Roman.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Helvetica Neue LT Pro";
	src: url("fonts/HelveticaNeueLTPro-Md.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Helvetica Neue LT Pro";
	src: url("fonts/HelveticaNeueLTPro-Bd.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "Helvetica Neue LT Pro Extended";
	src: url("fonts/HelveticaNeueLTPro-BdEx.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

:root {
	--ara-red: #c8142d;
	--ara-red-dark: #a51025;
	--ara-red-rgb: 200, 20, 45;
	--ara-warm-white: #f5f0ee;
	--ara-warm-white-dark: #e9e1dd;
	--ara-white: #ffffff;
	--ara-soft-black: #232328;
	--ara-soft-black-rgb: 35, 35, 40;
	--ara-muted: #6b6b70;
	--ara-line: #e4dcd8;

	--ara-font-serif: "Gazpacho", Georgia, "Times New Roman", serif;
	--ara-font-sans: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ara-font-ext: "Helvetica Neue LT Pro Extended", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* X: base unit for spacing, like the logo-derived X in the guideline */
	--ara-x: 24px;

	/* Bootstrap theme */
	--bs-primary: var(--ara-red);
	--bs-primary-rgb: var(--ara-red-rgb);
	--bs-danger: var(--ara-red);
	--bs-danger-rgb: var(--ara-red-rgb);
	--bs-body-color: var(--ara-soft-black);
	--bs-body-color-rgb: var(--ara-soft-black-rgb);
	--bs-body-bg: var(--ara-warm-white);
	--bs-body-font-family: var(--ara-font-sans);
	--bs-body-font-weight: 300;
	--bs-body-line-height: 1.5;
	--bs-emphasis-color: var(--ara-soft-black);
	--bs-secondary-color: var(--ara-muted);
	--bs-border-color: var(--ara-line);
	--bs-link-color: var(--ara-red);
	--bs-link-color-rgb: var(--ara-red-rgb);
	--bs-link-hover-color: var(--ara-red-dark);
	--bs-link-hover-color-rgb: 165, 16, 37;
	--bs-border-radius: 0;
	--bs-border-radius-sm: 0;
	--bs-border-radius-lg: 0;
	--bs-border-radius-pill: 0;
	--bs-focus-ring-color: rgba(var(--ara-red-rgb), 0.25);
}

body {
	background: var(--ara-warm-white);
	color: var(--ara-soft-black);
	font-family: var(--ara-font-sans);
	font-weight: 300;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}

main.ara-main {
	flex: 1 0 auto;
}

strong,
b,
.fw-bold {
	font-weight: 700 !important;
}

/* ---------- Typography ---------- */

h1,
h2,
h3,
h4,
.ara-headline {
	font-family: var(--ara-font-serif);
	font-weight: 500;
	color: var(--ara-red);
	letter-spacing: 0;
	line-height: 1.05;
}

h5,
h6 {
	font-family: var(--ara-font-sans);
	font-weight: 700;
	color: var(--ara-soft-black);
}

/* highlight inside a headline, always at the end (guideline: Headlines) */
.ara-headline strong,
h1 strong,
h2 strong {
	font-family: var(--ara-font-ext);
	font-weight: 700;
}

.ara-headline {
	font-size: clamp(2.2rem, 4.5vw, 3.6rem);
	margin: 0;
}

.ara-headline-sm {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/* Zwischenheadline: Helvetica Bold, uppercase, Laufweite 75 */
.ara-eyebrow {
	font-family: var(--ara-font-sans);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	color: var(--ara-red);
	margin-bottom: 0.5rem;
}

.ara-claim {
	font-family: var(--ara-font-serif);
	font-weight: 500;
	color: var(--ara-red);
	white-space: nowrap;
}

.lead {
	font-weight: 300;
}

.text-secondary,
.text-muted {
	color: var(--ara-muted) !important;
}

/* ---------- Footer: the "Fundament" ---------- */

.ara-fundament {
	flex-shrink: 0;
	background: var(--ara-red);
	color: var(--ara-white);
	padding: calc(var(--ara-x) * 1.5) calc(var(--ara-x) * 1.5) var(--ara-x);
	margin-top: calc(var(--ara-x) * 2);
}

.ara-fundament-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ara-x);
	flex-wrap: wrap;
}

.ara-fundament .ara-claim {
	color: var(--ara-white);
	font-size: 1.15rem;
}

.ara-fundament .ara-logo {
	height: 40px;
}

.ara-fundament-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--ara-x);
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.85);
}

.ara-fundament-meta a {
	color: var(--ara-white);
}

/* ---------- Bootstrap components ---------- */

.btn {
	--bs-btn-font-family: var(--ara-font-sans);
	--bs-btn-font-weight: 700;
	--bs-btn-font-size: 0.72rem;
	--bs-btn-padding-x: 18px;
	--bs-btn-padding-y: 10px;
	--bs-btn-border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.075em;
}

.btn-sm {
	--bs-btn-padding-x: 10px;
	--bs-btn-padding-y: 6px;
	--bs-btn-font-size: 0.65rem;
}

.btn-lg {
	--bs-btn-font-size: 0.8rem;
}

/* primary + success: solid Leading Red / Soft Black */
.btn-primary {
	--bs-btn-color: var(--ara-white);
	--bs-btn-bg: var(--ara-red);
	--bs-btn-border-color: var(--ara-red);
	--bs-btn-hover-color: var(--ara-white);
	--bs-btn-hover-bg: var(--ara-red-dark);
	--bs-btn-hover-border-color: var(--ara-red-dark);
	--bs-btn-active-bg: var(--ara-red-dark);
	--bs-btn-active-border-color: var(--ara-red-dark);
	--bs-btn-disabled-bg: var(--ara-red);
	--bs-btn-disabled-border-color: var(--ara-red);
	--bs-btn-focus-shadow-rgb: var(--ara-red-rgb);
}

.btn-success,
.btn-dark {
	--bs-btn-color: var(--ara-white);
	--bs-btn-bg: var(--ara-soft-black);
	--bs-btn-border-color: var(--ara-soft-black);
	--bs-btn-hover-color: var(--ara-white);
	--bs-btn-hover-bg: #000;
	--bs-btn-hover-border-color: #000;
	--bs-btn-active-bg: #000;
	--bs-btn-active-border-color: #000;
}

/* secondary + light: outlined, calm */
.btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-outline-primary {
	--bs-btn-color: var(--ara-soft-black);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--ara-soft-black);
	--bs-btn-hover-color: var(--ara-white);
	--bs-btn-hover-bg: var(--ara-soft-black);
	--bs-btn-hover-border-color: var(--ara-soft-black);
	--bs-btn-active-color: var(--ara-white);
	--bs-btn-active-bg: var(--ara-soft-black);
	--bs-btn-active-border-color: var(--ara-soft-black);
}

.btn-outline-primary {
	--bs-btn-color: var(--ara-red);
	--bs-btn-border-color: var(--ara-red);
	--bs-btn-hover-bg: var(--ara-red);
	--bs-btn-hover-border-color: var(--ara-red);
	--bs-btn-active-bg: var(--ara-red);
	--bs-btn-active-border-color: var(--ara-red);
}

/* destructive: outlined red so it never competes with the primary action */
.btn-danger,
.btn-outline-danger {
	--bs-btn-color: var(--ara-red);
	--bs-btn-bg: var(--ara-white);
	--bs-btn-border-color: var(--ara-red);
	--bs-btn-hover-color: var(--ara-white);
	--bs-btn-hover-bg: var(--ara-red);
	--bs-btn-hover-border-color: var(--ara-red);
	--bs-btn-active-color: var(--ara-white);
	--bs-btn-active-bg: var(--ara-red-dark);
	--bs-btn-active-border-color: var(--ara-red-dark);
}

.btn-ara-inverse {
	--bs-btn-color: var(--ara-white);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--ara-white);
	--bs-btn-hover-color: var(--ara-red);
	--bs-btn-hover-bg: var(--ara-white);
	--bs-btn-hover-border-color: var(--ara-white);
	--bs-btn-active-color: var(--ara-red);
	--bs-btn-active-bg: var(--ara-white);
}

.card {
	--bs-card-border-width: 0;
	--bs-card-border-radius: 0;
	--bs-card-inner-border-radius: 0;
	--bs-card-bg: var(--ara-white);
	--bs-card-cap-bg: var(--ara-warm-white);
}

.card.shadow-sm,
.shadow-sm {
	box-shadow: none !important;
}

.card .card {
	border: 1px solid var(--ara-line);
}

.card-footer {
	border-top: 1px solid var(--ara-line);
}

.form-control,
.form-select {
	border-radius: 0;
	border-color: var(--ara-line);
	background-color: var(--ara-white);
	color: var(--ara-soft-black);
	font-weight: 400;
	padding: 12px 14px;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--ara-red);
	box-shadow: 0 0 0 3px rgba(var(--ara-red-rgb), 0.15);
}

.form-label,
label {
	font-weight: 400;
}

.form-check-input:checked {
	background-color: var(--ara-red);
	border-color: var(--ara-red);
}

.form-check-input:focus {
	border-color: var(--ara-red);
	box-shadow: 0 0 0 3px rgba(var(--ara-red-rgb), 0.15);
}

.input-group-lg > .form-control {
	font-size: 1rem;
}

.alert {
	--bs-alert-border-radius: 0;
	border: 0;
	border-left: 4px solid var(--ara-red);
	background: var(--ara-white);
	color: var(--ara-soft-black);
}

.alert-success {
	border-left-color: var(--ara-soft-black);
}

.badge {
	--bs-badge-border-radius: 0;
	--bs-badge-font-weight: 700;
	letter-spacing: 0.05em;
	font-family: var(--ara-font-sans);
}

.badge.bg-primary,
.badge.bg-danger {
	background-color: var(--ara-red) !important;
	color: var(--ara-white) !important;
}

.badge.bg-secondary,
.badge.bg-dark,
.badge.bg-success {
	background-color: var(--ara-soft-black) !important;
	color: var(--ara-white) !important;
}

.badge.bg-info,
.badge.bg-warning,
.badge.bg-light {
	background-color: var(--ara-warm-white) !important;
	color: var(--ara-red) !important;
}

.text-bg-secondary,
.text-bg-dark {
	background-color: var(--ara-warm-white) !important;
	color: var(--ara-soft-black) !important;
	padding: 2px 6px;
}

.bg-light {
	background-color: var(--ara-warm-white) !important;
}

.bg-primary {
	background-color: var(--ara-red) !important;
}

.breadcrumb {
	--bs-breadcrumb-divider-color: var(--ara-muted);
	--bs-breadcrumb-item-active-color: var(--ara-soft-black);
	font-size: 0.85rem;
}

hr {
	border-color: var(--ara-line);
	opacity: 1;
}

/* tables: calm lines, uppercase head like Zwischenheadlines */
.table {
	--bs-table-bg: var(--ara-white);
	--bs-table-color: var(--ara-soft-black);
	--bs-table-border-color: var(--ara-line);
	--bs-table-hover-bg: var(--ara-warm-white);
	background: var(--ara-white);
}

.table > thead th,
table th {
	background: var(--ara-white);
	color: var(--ara-red);
	font-weight: 700;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	border: 0;
	border-bottom: 2px solid var(--ara-red);
	padding: 14px 12px;
	white-space: nowrap;
}

table td {
	border: 0;
	border-bottom: 1px solid var(--ara-line);
	padding: 12px;
	vertical-align: middle;
}

table tbody tr:hover td {
	background: var(--ara-warm-white);
}

table td a {
	color: var(--ara-soft-black);
	font-weight: 400;
}

table td a:hover {
	color: var(--ara-red);
}

table td .btn + .btn,
table td .btn + a.btn,
table td a.btn + .btn {
	margin-left: 4px;
}

.spinner-grow.bg-primary,
.spinner-border {
	color: var(--ara-red);
}

/* ---------- Utilities ---------- */

.warm-white {
	background-color: var(--ara-warm-white);
}

.leading-red {
	background-color: var(--ara-red);
}

@media (max-width: 640px) {
	:root {
		--ara-x: 16px;
	}
}

/* the brand name is always lowercase, also inside uppercase labels */
.ara-name {
	text-transform: none;
	letter-spacing: 0.02em;
}

table td .btn-sm {
	min-width: 34px;
}