/* =====================================================
   Savoyards du Manitoba — Custom theme override
   Colour palette: Savoyard red #CC1122 + white + black
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,300&display=swap');

:root {
	--red:       #CC1122;
	--red-dark:  #A00D1A;
	--red-light: #F5E6E8;
	--white:     #FFFFFF;
	--off-white: #F9F7F7;
	--black:     #111111;
	--gray:      #444444;
	--gray-mid:  #888888;
	--gray-light:#DDDDDD;
}

/* Base font override */
body {
	font-family: 'Source Serif 4', Georgia, serif;
	background: var(--off-white);
	color: var(--black);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--black);
}

/* ---- HEADER / SIDEBAR ---- */
#header {
	background: var(--red);
}

#header .inner h1,
#header .inner h1 a,
#header .inner h1 strong {
	color: #ffffff;
	font-family: 'Playfair Display', serif;
}

#header .inner h1 a {
	border-bottom: none;
}

/* Shield avatar placeholder ring */
#header .image.avatar img {
	border: 3px solid rgba(255,255,255,0.4);
}

/* Sidebar nav links */
#header nav ul li a {
	color: rgba(255,255,255,0.8);
}

#header nav ul li a:hover {
	color: #ffffff;
}

/* ---- MAIN CONTENT ---- */
#main {
	background: var(--white);
}

/* Section borders and spacing */
#main > .inner > section {
	border-top: 1px solid var(--gray-light);
	padding-top: 2.5em;
	margin-top: 2.5em;
}

#main > .inner > section:first-child {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

/* Section headings */
#main section > h2 {
	color: var(--red);
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	border-bottom: 2px solid var(--red);
	padding-bottom: 0.4em;
	margin-bottom: 1em;
}

/* Major header (hero intro) */
header.major h2 {
	font-family: 'Playfair Display', serif;
	font-size: 1.6em;
	color: var(--black);
	font-weight: 400;
	line-height: 1.4;
}

/* ---- BUTTONS ---- */
.button.primary,
input[type="submit"].primary,
input[type="submit"] {
	background-color: var(--red);
	border-color: var(--red);
	color: #ffffff;
}

.button.primary:hover,
input[type="submit"]:hover {
	background-color: var(--red-dark);
	border-color: var(--red-dark);
}

.button {
	border-color: var(--red);
	color: var(--red);
}

.button:hover {
	background-color: var(--red-light);
}

/* ---- TIMELINE ---- */
.timeline {
	border-left: 3px solid var(--red);
	padding-left: 1.5em;
	margin: 1.5em 0;
}

.timeline-item {
	position: relative;
	margin-bottom: 1.5em;
}

.timeline-item::before {
	content: '';
	position: absolute;
	left: -1.85em;
	top: 5px;
	width: 9px;
	height: 9px;
	background: var(--red);
	transform: rotate(45deg);
}

.timeline-year {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: var(--red);
	font-size: 0.9em;
	letter-spacing: 0.05em;
	margin-bottom: 0.2em;
}

.timeline-text {
	font-size: 0.9em;
	color: var(--gray);
	line-height: 1.6;
}

.timeline-text strong {
	color: var(--black);
	font-style: italic;
	font-weight: 400;
}

/* ---- PILLAR BOXES ---- */
.pillars-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2em;
	margin: 1.5em 0;
}

.pillar-box {
	background: var(--off-white);
	border: 1px solid var(--gray-light);
	border-top: 3px solid var(--red);
	padding: 1.4em 1.2em;
	text-align: center;
}

.pillar-box h3 {
	font-family: 'Playfair Display', serif;
	font-size: 1em;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 0.2em;
}

.pillar-box h3 em {
	display: block;
	font-size: 0.8em;
	font-style: italic;
	color: var(--gray-mid);
	font-weight: 400;
	margin-top: 2px;
}

.pillar-box p {
	font-size: 0.85em;
	color: var(--gray);
	line-height: 1.6;
	margin-top: 0.5em;
}

/* ---- NAMES CLOUD ---- */
.names-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 1.2em 0;
}

.name-tag {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	color: var(--red);
	border: 1px solid var(--red);
	padding: 4px 12px;
	font-size: 0.9em;
	background: var(--red-light);
	display: inline-block;
}

.name-tag.lg { font-size: 1.1em; }
.name-tag.sm { font-size: 0.75em; opacity: 0.8; }

/* ---- BILINGUAL LABELS ---- */
.bilingual {
	font-size: 0.8em;
	color: var(--gray-mid);
	font-style: italic;
	margin-left: 0.4em;
}

/* ---- SECTION EYEBROW ---- */
.eyebrow {
	font-size: 0.72em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--red);
	display: block;
	margin-bottom: 0.5em;
	font-family: 'Source Serif 4', serif;
	font-weight: 400;
}

/* ---- CONTACT ICONS ---- */
.icon.solid::before,
.icon.brands::before {
	color: var(--red);
}

/* ---- FOOTER ---- */
#footer {
	background: var(--black);
}

#footer .inner ul.icons li a {
	color: rgba(255,255,255,0.4);
}

#footer .inner ul.icons li a:hover {
	color: var(--red);
}

#footer .inner ul.copyright li,
#footer .inner ul.copyright li a {
	color: rgba(255,255,255,0.25);
}

/* ---- FLAG STRIP ---- */
.flag-strip {
	height: 5px;
	background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, var(--red) 50%, var(--red) 100%);
	margin-bottom: 0;
}

/* ---- BLOCKQUOTE STYLING ---- */
blockquote {
	border-left: 4px solid var(--red);
	padding-left: 1.2em;
	color: var(--gray);
	font-style: italic;
	margin: 1.5em 0;
}

/* ---- RESPONSIVE ---- */
@media screen and (max-width: 736px) {
	.pillars-row {
		grid-template-columns: 1fr;
	}
}
#footer {
    background: var(--red);
}

#footer .inner ul.icons li a {
    color: rgba(255,255,255,0.6);
}

#footer .inner ul.icons li a:hover {
    color: #ffffff ;
}

#footer .inner ul.icons li a .fa,
#footer .inner ul.icons li a::before {
    color: #ffffff;
}

#footer .inner ul.icons li a {
    color: #ffffff !important;
}