/* CSS Updated: 2025-08-02 - Material Design 2 Implementation */

/* Material Design 2 - Import Roboto Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Material Design 2 - CSS Variables */
:root {
	/* MD2 Color Palette - Purple Theme */
	--md-primary: #512888;
	--md-primary-variant: #3d1f68;
	--md-secondary: #8e24aa;
	--md-secondary-variant: #7b1fa2;
	--md-background: #ffffff;
	--md-surface: #ffffff;
	--md-error: #b00020;
	--md-on-primary: #ffffff;
	--md-on-secondary: #ffffff;
	--md-on-background: #000000;
	--md-on-surface: #000000;
	--md-on-error: #ffffff;
	
	/* MD2 Elevation Shadows */
	--md-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
	--md-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
	/* Contact page specific layout styling */
body[class*="contact"] .page-content p,
body.page-contact .page-content p,
body[data-slug="contact"] .page-content p,
.page[title*="Contact"] .page-content p,
section.page .page-content p {
	text-align: center !important;
	margin-bottom: 24px;
}

body[class*="contact"] .page-content h3,
body.page-contact .page-content h3,
body[data-slug="contact"] .page-content h3,
.page[title*="Contact"] .page-content h3,
section.page .page-content h3 {
	text-align: center !important;
	margin-bottom: 8px;
}-4: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
	--md-elevation-8: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
	
	/* MD2 Border Radius */
	--md-shape-small: 4px;
	--md-shape-medium: 8px;
	--md-shape-large: 16px;
	
	/* MD2 Typography Scale */
	--md-typography-h1: 6rem;
	--md-typography-h2: 3.75rem;
	--md-typography-h3: 3rem;
	--md-typography-h4: 2.125rem;
	--md-typography-h5: 1.5rem;
	--md-typography-h6: 1.25rem;
	--md-typography-subtitle1: 1rem;
	--md-typography-subtitle2: 0.875rem;
	--md-typography-body1: 1rem;
	--md-typography-body2: 0.875rem;
	--md-typography-button: 0.875rem;
	--md-typography-caption: 0.75rem;
	--md-typography-overline: 0.625rem;
}

html {
	position: relative;
	min-height: 100%;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
	/* Padding top for navbar */
	padding-top: 64px; /* Increased for MD2 app bar height */
	/* Margin bottom for footer height */
	margin-bottom: 60px;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background-color: var(--md-background);
	color: var(--md-on-background);
	line-height: 1.5;
}

/* Material Design 2 - Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	margin: 16px 0;
	line-height: 1.2;
}

h1 { font-size: var(--md-typography-h4); } /* Using h4 scale for better web sizing */
h2 { font-size: var(--md-typography-h5); }
h3 { font-size: var(--md-typography-h6); }
h4 { font-size: var(--md-typography-subtitle1); font-weight: 500; }
h5 { font-size: var(--md-typography-subtitle2); font-weight: 500; }
h6 { font-size: var(--md-typography-body1); font-weight: 500; }

p {
	font-size: var(--md-typography-body1);
	line-height: 1.5;
	margin: 16px 0;
}

.md-body-2 {
	font-size: var(--md-typography-body2);
	line-height: 1.43;
}

.md-caption {
	font-size: var(--md-typography-caption);
	line-height: 1.33;
	color: rgba(0, 0, 0, 0.6);
}

/* Material Design 2 - Section Spacing */
section {
	padding: 64px 0; /* Reduced from 150px for better proportions */
}

/* Material Design 2 - Cards and Surfaces */
.md-card {
	background-color: var(--md-surface);
	border-radius: var(--md-shape-medium);
	box-shadow: var(--md-elevation-2);
	padding: 24px;
	margin: 16px 0;
	transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-card:hover {
	box-shadow: var(--md-elevation-4);
}

.md-card-elevated {
	box-shadow: var(--md-elevation-4);
}

/* Material Design 2 - Buttons */
.md-button {
	font-family: 'Roboto', sans-serif;
	font-size: var(--md-typography-button);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.0892857143em;
	padding: 12px 24px;
	border-radius: var(--md-shape-small);
	border: none;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	height: 48px;
	text-decoration: none;
}

.md-button-contained {
	background-color: var(--md-primary);
	color: var(--md-on-primary);
	box-shadow: var(--md-elevation-2);
}

.md-button-contained:hover {
	background-color: var(--md-primary-variant);
	box-shadow: var(--md-elevation-4);
}

.md-button-outlined {
	background-color: transparent;
	color: var(--md-primary);
	border: 1px solid var(--md-primary);
}

.md-button-outlined:hover {
	background-color: rgba(81, 40, 136, 0.04);
}

.md-button-text {
	background-color: transparent;
	color: var(--md-primary);
}

.md-button-text:hover {
	background-color: rgba(81, 40, 136, 0.04);
}

img {
	max-width: 100%;
}

pre,
code {
	background: #f8f8f8;
	color: #333;
}

pre {
	border-left: 2px solid #ccc;
	padding: 10px;
}

code {
	display: inline-block;
	padding: 0 0.5em;
	line-height: 1.4em;
	border-radius: 3px;
}

table {
	empty-cells: show;
	border: 1px solid #cbcbcb;
	width: 100%;
	font-size: 0.9em;
	margin-bottom: 1rem;
}

thead {
	background-color: #e0e0e0;
	color: #000;
	text-align: left;
	vertical-align: bottom;
}

tr {
	display: table-row;
	vertical-align: inherit;
	border-color: inherit;
}

th,
td {
	padding: 0.5em 1em;
}

h1.title,
h2.title {
	font-size: 2.3rem;
}

blockquote {
	padding: 10px 20px;
	margin: 0 0 20px 20px;
	border-left: 5px solid #eee;
	font-style: italic;
}

.bi {
	margin-right: .5rem !important;
}


/* Paginator */
.paginator {
	margin-top: 20px;
	margin-bottom: 80px;
}

/* Material Design 2 - Navigation/App Bar */
.navbar {
	background-color: var(--md-primary) !important;
	box-shadow: var(--md-elevation-4);
	height: 64px;
	padding: 0;
}

.navbar-brand {
	font-family: 'Roboto', sans-serif;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--md-on-primary) !important;
	text-decoration: none;
	padding: 0;
	line-height: 64px;
	display: flex;
	align-items: center;
}

.navbar-brand:hover {
	color: var(--md-on-primary) !important;
	text-decoration: none;
}

/* Material Design 2 - Navbar Logo */
.navbar-logo {
	height: 40px;
	width: auto;
	margin-right: 12px;
	filter: brightness(0) invert(1); /* Makes logo white to match MD2 navbar */
	transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Material Design 2 - Navigation Links */
.navbar-nav-simple {
	display: flex;
	align-items: center;
	height: 64px;
}

.navbar-nav-simple .navbar-nav {
	flex-direction: row;
	margin: 0;
	height: 64px;
	align-items: center;
}

.navbar-nav-simple .nav-item {
	margin-left: 0;
	height: 64px;
	display: flex;
	align-items: center;
}

.navbar-nav-simple .nav-link {
	font-family: 'Roboto', sans-serif;
	font-size: var(--md-typography-body2);
	font-weight: 500;
	color: var(--md-on-primary) !important;
	padding: 0 16px;
	height: 64px;
	display: flex;
	align-items: center;
	text-decoration: none;
	border-radius: 0;
	transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-nav-simple .nav-link:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--md-on-primary) !important;
}

/* Ensure icons are MD2 compliant */
.nav-svg-icon {
	width: 24px;
	height: 24px;
	filter: brightness(0) invert(1);
	margin-right: 8px;
}

/* Legacy navbar styles - Updated for MD2 */
img.nav-svg-icon {
	width: 24px;
	height: 24px;
	padding-bottom: 0;
}

.nav-link {
	font-size: var(--md-typography-body2);
}

/* Material Design 2 - Footer */
footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 60px;
	line-height: 60px;
	font-size: var(--md-typography-caption);
	background-color: #f5f5f5;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	color: rgba(0, 0, 0, 0.6);
}

/* Material Design 2 - Form Elements */
input, textarea, select {
	font-family: 'Roboto', sans-serif;
	border: 1px solid rgba(0, 0, 0, 0.38);
	border-radius: var(--md-shape-small);
	padding: 12px 16px;
	font-size: var(--md-typography-body1);
	transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background-color: var(--md-surface);
	width: 100%;
	margin-bottom: 16px;
}

input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--md-primary);
	border-width: 2px;
	box-shadow: 0 0 0 1px var(--md-primary);
}

/* Material Design 2 - Form Labels */
label {
	font-family: 'Roboto', sans-serif;
	font-size: var(--md-typography-subtitle2);
	font-weight: 500;
	color: rgba(0, 0, 0, 0.87);
	margin-bottom: 8px;
	display: block;
}

/* Material Design 2 - Contact Forms & JotForm Styling */
iframe[src*="jotform"] {
	border-radius: var(--md-shape-medium);
	box-shadow: var(--md-elevation-2);
	border: none;
	margin: 16px 0;
}

/* Material Design 2 - Link Styling */
.page-content a {
	color: var(--md-primary);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-content a:hover {
	color: var(--md-primary-variant);
	text-decoration: underline;
}

/* Material Design 2 - Enhanced Button Styling for Contact Page */
.page-content button,
.page-content input[type="submit"],
.page-content input[type="button"] {
	font-family: 'Roboto', sans-serif;
	font-size: var(--md-typography-button);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.0892857143em;
	padding: 12px 24px;
	border-radius: var(--md-shape-small);
	border: none;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background-color: var(--md-primary);
	color: var(--md-on-primary);
	box-shadow: var(--md-elevation-2);
	margin: 8px 0;
}

.page-content button:hover,
.page-content input[type="submit"]:hover,
.page-content input[type="button"]:hover {
	background-color: var(--md-primary-variant);
	box-shadow: var(--md-elevation-4);
}

/* Material Design 2 - Lists in Page Content */
.page-content ul,
.page-content ol {
	margin: 16px 0;
	padding-left: 24px;
}

.page-content li {
	margin-bottom: 8px;
	line-height: 1.5;
}

/* Material Design 2 - Tables */
table {
	empty-cells: show;
	border: none;
	width: 100%;
	font-size: var(--md-typography-body2);
	margin-bottom: 16px;
	border-radius: var(--md-shape-small);
	overflow: hidden;
	box-shadow: var(--md-elevation-1);
}

thead {
	background-color: #f5f5f5;
	color: rgba(0, 0, 0, 0.87);
	text-align: left;
	vertical-align: bottom;
}

th, td {
	padding: 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

tr:last-child td {
	border-bottom: none;
}

/* Material Design 2 - Code and Pre */
pre, code {
	background: #f5f5f5;
	color: #333;
	font-family: 'Roboto Mono', monospace;
	border-radius: var(--md-shape-small);
}

pre {
	border-left: 4px solid var(--md-primary);
	padding: 16px;
	box-shadow: var(--md-elevation-1);
}

code {
	display: inline-block;
	padding: 4px 8px;
	line-height: 1.4;
}

/* Material Design 2 - Blockquotes */
blockquote {
	padding: 16px 24px;
	margin: 16px 0;
	border-left: 4px solid var(--md-primary);
	background-color: #f5f5f5;
	font-style: italic;
	border-radius: 0 var(--md-shape-small) var(--md-shape-small) 0;
}

/* Home - Header */
header.welcome {
	padding: 100px 0;
}

/* Home - Page */
section.home-page:nth-child(even) {
	/* Alternate the background color */
	background: #FAFAFA;
}

.page-cover-image {
	background-size: cover;
	background-position: center;
}

.page-description {
	color: #b5b5b5;
	font-style: italic;
}

/* VIDEO EMBED RESPONSIVE */
.video-embed {
	overflow: hidden;
	padding-bottom: 56.25%;
	/* 16:9 */
	position: relative;
	height: 0;
}

.video-embed iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}

/* Material Design 2 - Page Layout */
/* Target the actual page class being used */
html body section.page {
	padding: 24px 0 !important;
	margin: 0 !important;
}

/* Container overrides for page class */
html body section.page .container {
	padding: 0 16px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Row overrides for page class */
html body section.page .row {
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	justify-content: center !important;
}

/* Column overrides for page class - Convert to Material Card */
html body section.page .col-lg-8 {
	padding: 0 !important;
	margin: 0 auto !important;
	max-width: 800px;
	width: 100%;
}

/* Convert page content to Material Design card */
html body section.page .page-content {
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 0 !important;
	margin: 0 !important;
	transition: none;
}

/* Full-width images for homepage - Multiple targeting approaches */
body[class*="category-home"] section.page .page-content img,
body.category-home section.page .page-content img,
body[class*="home-page"] section.page .page-content img,
body.page-home-page section.page .page-content img,
section.page .page-content img[src*="kansas-state-wildcats"],
section.page .page-content img[src*="bnfs_aerial"] {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	display: block !important;
	height: auto !important;
	border: none !important;
	box-shadow: none !important;
	opacity: 0.7 !important; /* Fade the image */
	transition: opacity 0.3s ease !important;
}

/* Ensure contact page images are NOT affected */
body[class*="category-contact"] section.page .page-content img,
body.category-contact section.page .page-content img {
	width: auto !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	opacity: 1 !important;
}

/* Homepage image container for overlay effect - Multiple targeting */
body[class*="category-home"] section.page .page-content p:has(img),
body.category-home section.page .page-content p:has(img),
body[class*="home-page"] section.page .page-content p:has(img),
body.page-home-page section.page .page-content p:has(img),
section.page .page-content p:has(img[src*="kansas-state-wildcats"]),
section.page .page-content p:has(img[src*="bnfs_aerial"]) {
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Overlay for buttons on homepage images */
.homepage-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	text-align: center;
	width: 80%;
	max-width: 600px;
}

/* Material Design 2 Chips for homepage overlay */
.homepage-button {
	font-family: 'Roboto', sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.0892857143em;
	padding: 8px 16px;
	margin: 8px;
	border-radius: 16px; /* Chip style - rounded */
	border: none;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background-color: var(--md-primary);
	color: #ffffff !important; /* Explicit white text for contrast */
	box-shadow: var(--md-elevation-2);
	min-width: 120px;
	height: 32px; /* Standard chip height */
}

.homepage-button:hover {
	background-color: var(--md-primary-variant);
	box-shadow: var(--md-elevation-4);
	transform: translateY(-1px);
	color: #ffffff !important; /* Keep white text on hover */
	text-decoration: none;
}

/* Alternative chip styles */
.homepage-button.secondary {
	background-color: var(--md-secondary);
	color: var(--md-on-secondary);
}

.homepage-button.outlined {
	background-color: rgba(255, 255, 255, 0.95);
	color: var(--md-primary) !important; /* Purple text for contrast on white background */
	border: 1px solid var(--md-primary);
	box-shadow: var(--md-elevation-1);
}

.homepage-button.outlined:hover {
	background-color: rgba(255, 255, 255, 1);
	color: var(--md-primary) !important; /* Keep purple text on hover */
	box-shadow: var(--md-elevation-2);
}

/* Remove paragraph margins around full-width images - Multiple targeting */
body[class*="category-home"] section.page .page-content p,
body.category-home section.page .page-content p,
body[class*="home-page"] section.page .page-content p,
body.page-home-page section.page .page-content p,
section.page .page-content p:has(img[src*="kansas-state-wildcats"]),
section.page .page-content p:has(img[src*="bnfs_aerial"]) {
	margin: 0 !important;
	padding: 0 !important;
}

/* Hide the empty title that's taking up space */
html body section.page h1.title:empty {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Override general h1.title for empty titles */
html body section.page h1.title {
	margin: 0 0 16px 0 !important;
	padding: 0 !important;
	font-size: var(--md-typography-h4);
	font-weight: 500;
	color: var(--md-on-surface);
}

/* Hide homepage title specifically - Multiple selectors for better coverage */
body.page-home-page section.page h1.title,
body[class*="home-page"] section.page h1.title,
section.page h1.title:contains("Home Page"),
.page-home-page h1.title,
.home-page h1.title {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	visibility: hidden !important;
}

/* Additional approach - hide title on homepage by URL pattern */
body[data-page-key="home-page"] section.page h1.title,
body[data-slug="home-page"] section.page h1.title {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 0 !important;
	visibility: hidden !important;
}

/* Most aggressive approach - check if this is homepage by checking if images are full-width */
section.page .page-content:has(img[src*="kansas-state-wildcats"]) ~ * h1.title,
section.page .page-content:has(img[src*="kansas-state-wildcats"]) + * h1.title {
	display: none !important;
}

/* Target the specific MD styled title that appears on homepage */
section.page h1.title[style*="font-size: var(--md-typography-h4)"] {
	position: absolute !important;
	left: -9999px !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* Style the first paragraph (JotForm link) with Material Design */
html body section.page .page-content p:first-child {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Material Design 2 - Mobile Responsive */
@media (max-width: 768px) {
	body {
		padding-top: 56px; /* Smaller app bar on mobile */
	}
	
	.navbar {
		height: 56px;
	}
	
	.navbar-brand {
		font-size: 1.125rem;
		line-height: 56px;
	}
	
	.navbar-logo {
		height: 32px;
		margin-right: 8px;
	}
	
	.navbar-nav-simple,
	.navbar-nav-simple .navbar-nav,
	.navbar-nav-simple .nav-item {
		height: 56px;
	}
	
	.navbar-nav-simple .nav-link {
		padding: 0 12px;
		height: 56px;
		font-size: var(--md-typography-caption);
	}
	
	/* Mobile card adjustments */
	html body section.page .container {
		padding: 0 8px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	
	html body section.page .col-lg-8 {
		margin: 0 auto !important;
		max-width: 100%;
	}
	
	html body section.page .page-content {
		padding: 16px !important;
		margin: 8px 0 !important;
		border-radius: var(--md-shape-small);
	}
	
	/* Mobile section spacing */
	section {
		padding: 32px 0;
	}
	
	/* Mobile typography scaling */
	h1 { font-size: var(--md-typography-h5); }
	h2 { font-size: var(--md-typography-h6); }
}

@media (max-width: 480px) {
	.navbar-nav-simple .nav-link {
		padding: 0 8px;
		font-size: var(--md-typography-overline);
	}
	
	.navbar-brand {
		font-size: 1rem;
	}
	
	.navbar-logo {
		height: 28px;
		margin-right: 6px;
	}
	
	html body section.page .page-content {
		padding: 12px !important;
	}
	
	/* Extra small mobile adjustments */
	section {
		padding: 24px 0;
	}
}

/* Material Design 2 - Focus States and Accessibility */
*:focus {
	outline: 2px solid var(--md-primary);
	outline-offset: 2px;
}

.md-button:focus {
	outline: 2px solid var(--md-primary);
	outline-offset: 2px;
}

/* Material Design 2 - Utility Classes */
.md-elevation-0 { box-shadow: none; }
.md-elevation-1 { box-shadow: var(--md-elevation-1); }
.md-elevation-2 { box-shadow: var(--md-elevation-2); }
.md-elevation-4 { box-shadow: var(--md-elevation-4); }
.md-elevation-8 { box-shadow: var(--md-elevation-8); }

.md-surface { background-color: var(--md-surface); }
.md-primary-color { color: var(--md-primary); }
.md-secondary-color { color: var(--md-secondary); }

/* Material Design 2 - Contact Page Specific Styling */
.contact-info {
	background-color: var(--md-surface);
	border-radius: var(--md-shape-medium);
	box-shadow: var(--md-elevation-1);
	padding: 24px;
	margin: 16px 0;
	border-left: 4px solid var(--md-primary);
}

.contact-info h3 {
	color: var(--md-primary);
	font-size: var(--md-typography-h6);
	font-weight: 500;
	margin-bottom: 16px;
}

/* Force Roboto font on contact page to override inline styles */
body[class*="contact"] .page-content *,
body.page-contact .page-content *,
section.page .page-content h3[style*="Open Sans"],
section.page .page-content *[style*="font-family"] {
	font-family: 'Roboto', sans-serif !important;
}

/* Ensure contact page headings use proper Material Design typography */
body[class*="contact"] .page-content h1,
body[class*="contact"] .page-content h2,
body[class*="contact"] .page-content h3,
body[class*="contact"] .page-content h4,
body[class*="contact"] .page-content h5,
body[class*="contact"] .page-content h6,
body.page-contact .page-content h1,
body.page-contact .page-content h2,
body.page-contact .page-content h3,
body.page-contact .page-content h4,
body.page-contact .page-content h5,
body.page-contact .page-content h6 {
	font-family: 'Roboto', sans-serif !important;
	font-weight: 500 !important;
}

/* Contact page specific layout styling */
body[class*="contact"] .page-content p,
body.page-contact .page-content p,
body[data-slug="contact"] .page-content p {
	text-align: center !important;
	margin-bottom: 24px;
}

body[class*="contact"] .page-content h3,
body.page-contact .page-content h3,
body[data-slug="contact"] .page-content h3 {
	text-align: center !important;
	margin-bottom: 8px;
}

body[class*="contact"] .page-content img,
body.page-contact .page-content img,
body[data-slug="contact"] .page-content img,
.page-content img {
	display: block !important;
	margin: 0 auto 16px auto !important;
	border-radius: var(--md-shape-small);
	box-shadow: var(--md-elevation-1);
	max-width: 240px;
}

/* Ensure contact page content is centered */
body[class*="contact"] .page-content,
body.page-contact .page-content,
body[data-slug="contact"] .page-content {
	text-align: center !important;
}

/* Center contact page text elements */
body[class*="contact"] .page-content strong,
body[class*="contact"] .page-content br,
body[class*="contact"] .page-content a,
body.page-contact .page-content strong,
body.page-contact .page-content br,
body.page-contact .page-content a,
body[data-slug="contact"] .page-content strong,
body[data-slug="contact"] .page-content br,
body[data-slug="contact"] .page-content a {
	text-align: inherit;
}

.contact-info p {
	margin-bottom: 12px;
	color: rgba(0, 0, 0, 0.87);
}

.contact-info a {
	color: var(--md-primary);
	font-weight: 500;
}

/* Material Design 2 - Info Cards */
.info-card {
	background-color: var(--md-surface);
	border-radius: var(--md-shape-medium);
	box-shadow: var(--md-elevation-2);
	padding: 24px;
	margin: 16px 0;
	transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card:hover {
	box-shadow: var(--md-elevation-4);
}

.info-card h4 {
	color: var(--md-primary);
	font-size: var(--md-typography-subtitle1);
	font-weight: 500;
	margin-bottom: 12px;
}

/* Material Design 2 - Alert/Notice Boxes */
.alert-info {
	background-color: rgba(25, 118, 210, 0.08);
	border-left: 4px solid var(--md-primary);
	border-radius: 0 var(--md-shape-small) var(--md-shape-small) 0;
	padding: 16px 24px;
	margin: 16px 0;

/* Universal Contact Page Centering - Correct Selectors */
section.page .page-content p {
	text-align: center !important;
	margin-bottom: 16px;
}

section.page .page-content img {
	display: block !important;
	margin: 0 auto 16px auto !important;
	border-radius: var(--md-shape-small);
	box-shadow: var(--md-elevation-1);
	max-width: 240px;
}

section.page .page-content a {
	color: var(--md-primary) !important;
	text-decoration: none;
	font-weight: 500;
}
	color: rgba(0, 0, 0, 0.87);
}

.alert-warning {
	background-color: rgba(255, 152, 0, 0.08);
	border-left: 4px solid #ff9800;
	border-radius: 0 var(--md-shape-small) var(--md-shape-small) 0;
	padding: 16px 24px;
	margin: 16px 0;
	color: rgba(0, 0, 0, 0.87);
}

/* Smooth transitions for all interactive elements */
* {
	transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	           background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}