/* =============================================================================
   AquaPedia Custom CSS
   =============================================================================
   This file contains all custom CSS for AquaPedia Case Study Database
   ============================================================================= */

/* =============================================================================
   FOOTER STYLING - Match AquaPedia website layout
   ============================================================================= */

/* Footer Layout - Match aquapedia.waterdiplomacy.org */
#footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 20px;
	padding: 15px 20px;
	font-size: 90%;
	line-height: 1.6;
	clear: both;
}

#footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Left side - Page info (last edited, view count) */
#footer-info {
	flex: 0 1 auto;
	min-width: 200px;
}

#footer-info li {
	margin: 3px 0;
	color: #666;
	font-size: 90%;
}

/* Center - Footer links (Privacy, About, Disclaimers) */
#footer-places {
	flex: 0 1 auto;
	text-align: center;
	min-width: 300px;
	margin: 0 auto;
}

#footer-places ul {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 12px;
	list-style: none;
}

#footer-places li {
	margin: 3px 0;
	display: inline-block;
}

/* Add separators between footer links */
#footer-places li + li::before {
	content: '|';
	margin: 0 8px;
	color: #999;
}

#footer-places li a {
	color: #0645ad;
	text-decoration: none;
}

#footer-places li a:hover {
	text-decoration: underline;
}

/* Right side - Sponsor text and icons */
#footer-icons {
	flex: 0 1 auto;
	text-align: right;
	min-width: 300px;
}

#footer-icons ul {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* Footer poweredby container - display sponsor text and logos horizontally like aquapedia.waterdiplomacy.org */
#footer-poweredbyico {
	list-style: none;
	margin: 0;
	overflow: hidden;
}

#footer-poweredbyico li {
	float: left;
	margin-left: 0.5em;
	line-height: 2;
	text-align: right;
	color: var(--color-base, #202122);
	margin-bottom: 0.1em;
	padding: 0.5em 0;
	font-size: 0.75em;
}

/* Sponsor text - "AquaPedia is supported in part by" - appears first, can wrap to two lines */
#footer-poweredbyico li:first-child {
	margin-left: 0;
	white-space: normal;
	overflow: visible;
}

/* Hide the transparent pixel for sponsor text */
#footer-poweredbyico li:first-child img {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	visibility: hidden !important;
}

/* Show the sponsor text */
#footer-poweredbyico li:first-child a {
	color: var(--color-base, #202122);
	text-decoration: none;
	white-space: normal;
}

#footer-poweredbyico li:first-child a::after {
	content: 'AquaPedia is supported in part by';
	white-space: normal;
	display: inline;
}

/* All footer icons - sponsor logos from whitelist (NSF, Tufts, OSU, Semantic) - display horizontally inline */
#footer-poweredbyico li:not(:first-child) {
	overflow: visible;
}

/* Sponsor logos from whitelist folder - display horizontally like aquapedia.waterdiplomacy.org */
#footer-poweredbyico li:not(:first-child) a {
	text-decoration: none;
}

#footer-poweredbyico li:not(:first-child) img {
	height: 88px;
	width: 88px;
	display: block;
	object-fit: contain;
}

/* Ensure all images from whitelist folder display properly */
#footer-poweredbyico li img {
	height: 88px;
	width: 88px;
	object-fit: contain;
}

/* Prevent text truncation */
#footer-poweredbyico li,
#footer-poweredbyico li a,
#footer-poweredbyico li span {
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	max-width: none;
}

/* Responsive: stack footer on small screens */
@media (max-width: 768px) {
	#footer {
		flex-direction: column;
		text-align: left;
	}
	
	#footer-info, #footer-places, #footer-icons {
		width: 100%;
		text-align: left;
	}
	
	#footer-places ul {
		justify-content: flex-start;
	}
	
	#footer-icons ul {
		justify-content: flex-start;
	}
	
	#footer-poweredbyico li {
		float: none;
		text-align: left;
		margin-left: 0;
	}
	
	#footer-poweredbyico li:first-child {
		margin-bottom: 8px;
	}
}

/* =============================================================================
   SLIDESHOW AND CASE STUDY LAYOUT STYLING
   ============================================================================= */

/* =============================================================================
   TABLE OF CONTENTS AND CASE DESCRIPTION LAYOUT
   TOC on left, Case Description on right, side-by-side
   ============================================================================= */

/* TOC positioning - match production server */
#toc,
.toc {
	float: none !important;
	display: table !important;
	width: auto !important;
	max-width: 500px !important;
	margin: 30px 0 25px 0 !important;
	padding: 7px !important;
	border: 1px solid #aaaaaa !important;
	background-color: #f9f9f9 !important;
	box-sizing: border-box !important;
	clear: both !important;
}

/* Case Description positioning - float right like production */
.section-right-box {
	float: right !important;
	width: 300px !important;
	margin: 5px 3px 3px 10px !important;
	padding: 8px !important;
	border: none !important;
	background-color: #eeeeee !important;
	box-sizing: border-box !important;
	clear: right !important;
}

/* Case Description title styling */
.section-right-box > b,
.section-right-box > strong {
	display: block !important;
	font-size: 14px !important;
	font-weight: bold !important;
	margin-bottom: 10px !important;
	padding-bottom: 5px !important;
	border-bottom: 2px solid #a2a9b1 !important;
	text-align: center !important;
}

/* Section Fact Box - styling to match production sidebox */
.section-fact-box {
	float: right !important;
	width: 300px !important;
	margin: 5px 3px 3px 10px !important;
	padding: 8px !important;
	border: none !important;
	background-color: #eeeeee !important;
	box-sizing: border-box !important;
	clear: right !important;
}

/* Section Fact Box title styling */
.section-fact-box > center > b,
.section-fact-box > b,
.section-fact-box > strong {
	display: block !important;
	font-size: 14px !important;
	font-weight: bold !important;
	margin-bottom: 10px !important;
	padding-bottom: 5px !important;
	border-bottom: 2px solid #a2a9b1 !important;
	text-align: center !important;
}

.section-fact-box > center {
	text-align: center !important;
	margin-bottom: 10px !important;
}

.section-fact-box p {
	margin: 8px 0 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
}

.section-fact-box table {
	width: 100% !important;
	font-size: 12px !important;
	border-collapse: collapse !important;
	margin-top: 8px !important;
}

.section-fact-box table th,
.section-fact-box table td {
	padding: 4px !important;
	text-align: left !important;
	vertical-align: top !important;
	word-wrap: break-word !important;
}

.section-fact-box table th {
	font-weight: bold !important;
	background-color: #e6f2ff !important;
}

/* Hide SMW validation warnings in section-fact-box */
.section-fact-box .smw-highlighter[data-type="4"],
.section-fact-box .smwtticon.warning,
.section-fact-box .smwttcontent {
	display: none !important;
}

/* Style clickable Riparians and Water Resources links */
.section-fact-box a[href*="Category:Riparian"],
.section-fact-box a[href*="Category:Water_Feature"] {
	color: #0645ad;
	text-decoration: none;
	font-weight: bold;
}

.section-fact-box a[href*="Category:Riparian"]:hover,
.section-fact-box a[href*="Category:Water_Feature"]:hover {
	text-decoration: underline;
}

/* Clean up duplicate values with pipe - hide everything after pipe */
.section-fact-box {
	/* Use JavaScript to clean up, but also hide pipe characters visually */
}

.section-fact-box * {
	/* Remove pipe characters and duplicates via JavaScript */
}

/* Table styling - match production server */
.wikitable th {
	background-color: #f2f2f2 !important;
	color: black !important;
	font-weight: bold !important;
}

/* Custom hl* classes from production Common.css */
.wikitable td.hl1, .wikitable th.hl1 { background: #c5d8fc !important; }
.wikitable td.hl2, .wikitable th.hl2 { background: #a7c1f2 !important; }
.wikitable td.hl3, .wikitable th.hl3 { background: #8da7d6 !important; }

/* Headings styling - match production blue/gray borders */
h2 {
	border-bottom: 1px solid #aaaaaa !important;
	font-size: 21px !important;
	padding-bottom: 3px !important;
	margin-top: 1em !important;
	margin-bottom: 0.5em !important;
}

h1.firstHeading {
	border-bottom: 1px solid #aaaaaa !important;
}

/* Clear floats after TOC and Case Description */
.mw-parser-output::after {
	content: "" !important;
	display: table !important;
	clear: both !important;
}

/* Responsive: stack on smaller screens */
@media (max-width: 1024px) {
	#toc,
	.toc,
	.section-right-box {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 20px 0 !important;
	}
}

/* Slideshow Centering CSS */
div.slideshow {
	display: block !important;
	margin: 0 auto !important;
	text-align: center !important;
	max-width: 800px !important;
	width: auto !important;
}

div.slideshow img {
	margin: 0 auto !important;
	display: block !important;
}

div.slideshow > div {
	text-align: center !important;
	margin: 0 auto !important;
}

#mainpage_topbox {
	margin: 0 auto !important;
	text-align: center !important;
}

#mainpage_columns-container {
	width: 95% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	clear: both !important;
}


/* Map display fixes */
.leaflet-container, .maps-leaflet {
	min-height: 200px !important;
	width: 100% !important;
	display: block !important;
	visibility: visible !important;
}

/* Fix broken text in tables */
.infobox table {
	width: 100% !important;
	table-layout: auto !important;
	word-wrap: break-word !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	border-collapse: collapse !important;
}

.infobox td {
	padding: 5px !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	vertical-align: top !important;
	white-space: normal !important;
	hyphens: auto !important;
}

.infobox th {
	padding: 5px !important;
	background-color: #e6f2ff !important;
	font-weight: bold !important;
	text-align: left !important;
	vertical-align: top !important;
	white-space: normal !important;
	word-wrap: break-word !important;
}

/* Fix semantic property labels - ensure proper spacing and line breaks */
.infobox .smw-property,
.infobox .smw-property-label {
	display: block !important;
	margin-bottom: 8px !important;
	padding-bottom: 4px !important;
	border-bottom: 1px solid #e0e0e0 !important;
	word-wrap: break-word !important;
	white-space: normal !important;
}

.infobox .smw-property:last-child,
.infobox .smw-property-label:last-child {
	border-bottom: none !important;
	margin-bottom: 0 !important;
}

/* Fix property value lists - ensure proper line breaks */
.infobox .smw-property-value {
	display: block !important;
	margin-top: 4px !important;
	word-wrap: break-word !important;
	white-space: normal !important;
}

/* Fix labels that run together (like "Water Features: Riparians:") */
.infobox td br {
	display: block !important;
	margin: 2px 0 !important;
}

/* Ensure property names wrap properly */
.infobox strong,
.infobox b {
	display: inline-block !important;
	word-wrap: break-word !important;
	white-space: normal !important;
	max-width: 100% !important;
}

/* Fix colon-separated labels - ensure proper spacing */
.infobox td {
	white-space: normal !important;
}

/* Hide broken template artifacts */
.infobox table td:empty::after {
	content: '(not set)';
	color: #999;
	font-style: italic;
}

/* Fix for property lists */
.infobox p,
.infobox div:not(.leaflet-container):not(.maps-leaflet) {
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
	margin-bottom: 6px !important;
}

/* Fix SMW factbox property display - ensure labels and values are on separate lines */
.infobox .smw-factbox {
	display: block !important;
}

.infobox .smw-factbox .smw-property {
	display: block !important;
	margin-bottom: 10px !important;
	padding-bottom: 8px !important;
	border-bottom: 1px solid #d0d0d0 !important;
}

.infobox .smw-factbox .smw-property:last-child {
	border-bottom: none !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* Fix property name display - add line break after colon */
.infobox .smw-property-name::after {
	content: "" !important;
	display: block !important;
	height: 4px !important;
}

/* Ensure property values display on new lines */
.infobox .smw-property-value {
	display: block !important;
	margin-top: 4px !important;
	padding-left: 8px !important;
}

/* Ensure all text content wraps properly - fix concatenated labels */
.infobox {
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
}

.infobox * {
	max-width: 100% !important;
}

/* =============================================================================
   SEMANTIC MEDIAWIKI VALIDATION WARNING FIXES FOR CASE DESCRIPTION
   =============================================================================
   
   ISSUE: MediaWiki v1.44 with Semantic MediaWiki shows validation warnings
   for properties with values that don't match the allowed values defined
   in the Property pages.
   
   AFFECTED PROPERTIES:
   - Property:Climate - Values like "Moist tropical (Köppen A-type); Monsoon" 
     contain multiple values separated by semicolons instead of using separate
     property annotations
   - Property:Land Use - Values like "industrial use, urban" should be separate
   - Property:Water Use - Multiple comma-separated values should be separate
   
   TEMPORARY FIX (CSS): Hide the validation warnings to improve UX
   
   PROPER FIX (Wiki Content): Update the case study templates/forms to:
   1. Use separate property annotations for each value:
      Instead of: [[Climate::Moist tropical (Köppen A-type); Monsoon]]
      Use: [[Climate::Moist tropical (Köppen A-type)]] [[Climate::Monsoon]]
   
   2. Or use #arraymap to split comma-separated values:
      {{#arraymap:value1, value2, value3|,|x|[[Property::x]]|}}
   
   3. Update Property pages to include all valid values in the allowed values list
   
   To fix permanently:
   - Edit the case study form/template (likely Template:Case_Study or Form:Case_Study)
   - Update property definitions (Property:Climate, Property:Land_Use, Property:Water_Use)
   - Re-save affected pages to regenerate semantic data
   ============================================================================= */

/* Hide SMW validation warnings in Case Description */
.section-right-box .smw-highlighter[data-type="4"],
.section-right-box .smwtticon.warning,
.section-right-box .smwttcontent {
	display: none !important;
}

/* Improve SMW highlighter display in Case Description - hide warning tooltips */
.section-right-box .smw-highlighter[data-state="inline"][data-title="Warning"] {
	color: inherit !important;
	background: transparent !important;
	border: none !important;
}

/* Show only the actual text content, hide the warning icon */
.section-right-box .smw-highlighter .smwtext {
	display: inline !important;
	color: inherit !important;
}

/* Fix Case Description table layout */
.section-right-box table {
	width: 100% !important;
	font-size: 10px !important;
	border-collapse: collapse !important;
}

.section-right-box table th {
	padding: 4px !important;
	text-align: left !important;
	vertical-align: top !important;
	font-weight: normal !important;
	word-wrap: break-word !important;
	white-space: normal !important;
}

/* Ensure proper spacing between property rows */
.section-right-box table tr {
	border-bottom: 1px solid #e0e0e0 !important;
}

.section-right-box table tr:last-child {
	border-bottom: none !important;
}

/* Fix map display in Case Description */
.section-right-box .leaflet-container,
.section-right-box .maps-leaflet,
.section-right-box .maps-googlemaps3,
.section-right-box .maps-map {
	min-height: 200px !important;
	width: 200px !important;
	height: 200px !important;
	margin-bottom: 10px !important;
	display: block !important;
}

/* Ensure Google Maps container displays properly */
.section-right-box #map_google3_1,
.section-right-box div[id^="map_google"],
.section-right-box div[id^="map_leaflet"] {
	width: 200px !important;
	height: 200px !important;
	margin-bottom: 10px !important;
}


/* =============================================================================
   BUTTON STYLING
   ============================================================================= */

/* Remove border from cdx-button */
.cdx-button {
	border: none !important;
}

/* =============================================================================
   PAGE-SPECIFIC STYLING
   ============================================================================= */

/* Hide TOC on Browse_Cases page */
.page-Browse_Cases #toc,
.page-Browse_Cases .toc {
	display: none !important;
}

/* =============================================================================
   ALERTBOX STYLING - Expandable/Collapsible Alert Boxes
   ============================================================================= */

/* AlertBox container - compact, icon-width only when minimized */
.alertBox {
	border: 1px solid #a2a9b1;
	background-color: #f8f9fa;
	padding: 4px 6px;
	margin: 5px 5px 5px 0;
	border-radius: 3px;
	display: inline-block;
	width: auto;
	vertical-align: top;
}

/* When alertBox is expanded, make it full width */
.alertBox.expanded {
	display: block;
	width: 100%;
}

/* AlertBox header - clickable, shows cursor pointer, icon-only */
.expSectionHeader {
	cursor: pointer;
	padding: 2px;
	margin: 0;
	font-weight: normal;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
}

/* Show only images/icons in header */
.expSectionHeader img {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
}

/* AlertBox header hover state */
.expSectionHeader:hover {
	opacity: 0.8;
}

/* AlertBox body - hidden by default, shown when expanded */
.expSectionBody {
	padding: 8px 5px;
	margin-top: 5px;
	display: none;
	overflow: hidden;
}

/* Smooth transition for expand/collapse */
.expSectionBody {
	transition: max-height 0.7s ease-in-out;
}

/* CaseReviewBoxes positioning - ensure it appears above TOC */
#CaseReviewBoxes {
	display: block !important;
	width: 100% !important;
	margin-bottom: 15px !important;
	margin-top: 10px !important;
	clear: both !important;
}



/* Hide "more about" text in SMW factbox titles - keep the title visible */
.smw-factbox-title::before {
	content: "" !important;
}


/* =============================================================================
   SMW FACTBOX STYLING - "Facts about..." section
   Position directly below Categories in the same container
   ============================================================================= */

/* Ensure Categories and Factbox are in the same visual container */
#catlinks {
	margin-bottom: 0 !important;
	border-bottom: none !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* SMW Factbox - position directly below Categories */
#smw-factbox,
.smw-factbox,
.smwfact {
	clear: both !important;
	margin: 0 !important;
	padding: 10px 15px !important;
	background-color: #f8f9fa !important;
	border: 1px solid #a2a9b1 !important;
	border-top: none !important;
	border-bottom-left-radius: 3px !important;
	border-bottom-right-radius: 3px !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

/* Factbox title - "Facts about..." */
.smwfacttitle,
.smw-factbox-title,
#smw-factbox .smw-table-cell.smw-title {
	font-weight: bold !important;
	font-size: 14px !important;
	padding-bottom: 8px !important;
	margin-bottom: 8px !important;
	border-bottom: 1px dashed #a2a9b1 !important;
	display: block !important;
}

/* Factbox table layout - property labels on left, values on right */
.smwfact table,
.smw-factbox table,
#smw-factbox table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 0 !important;
	font-size: 13px !important;
}

/* Property rows */
.smwfact table tr,
.smw-factbox table tr,
#smw-factbox table tr,
.smw-table-row {
	border-bottom: none !important;
}

/* Property labels (left column) */
.smwfact table th,
.smwfact table td:first-child,
.smw-factbox table th,
.smw-factbox table td:first-child,
#smw-factbox .smw-table-cell.smw-propname {
	text-align: right !important;
	vertical-align: top !important;
	padding: 4px 10px 4px 0 !important;
	white-space: nowrap !important;
	color: #0645ad !important;
	font-weight: normal !important;
	width: auto !important;
	min-width: 100px !important;
}

/* Property labels links */
.smwfact table th a,
.smwfact table td:first-child a,
.smw-factbox table th a,
.smw-factbox table td:first-child a,
#smw-factbox .smw-table-cell.smw-propname a {
	color: #0645ad !important;
	text-decoration: none !important;
}

.smwfact table th a:hover,
.smwfact table td:first-child a:hover,
.smw-factbox table th a:hover,
.smw-factbox table td:first-child a:hover,
#smw-factbox .smw-table-cell.smw-propname a:hover {
	text-decoration: underline !important;
}

/* Property values (right column) */
.smwfact table td,
.smw-factbox table td,
#smw-factbox .smw-table-cell.smw-propvalue {
	text-align: left !important;
	vertical-align: top !important;
	padding: 4px 0 !important;
	word-wrap: break-word !important;
}

/* Links in property values */
.smwfact table td a,
.smw-factbox table td a,
#smw-factbox .smw-table-cell.smw-propvalue a {
	color: #0645ad !important;
	text-decoration: none !important;
}

.smwfact table td a:hover,
.smw-factbox table td a:hover,
#smw-factbox .smw-table-cell.smw-propvalue a:hover {
	text-decoration: underline !important;
}

/* "+" magnifying glass icons for adding properties */
.smw-factbox .smw-add-link,
.smwfact .smw-add-link,
.smw-factbox-add-property,
#smw-factbox .smw-table-cell .smwsearch {
	color: #72777d !important;
	font-size: 11px !important;
	vertical-align: middle !important;
	margin-left: 3px !important;
}

.smw-factbox .smw-add-link img,
.smwfact .smw-add-link img,
.smw-factbox-add-property img {
	width: 12px !important;
	height: 12px !important;
	opacity: 0.6 !important;
}

/* RDF feed link at top right */
.smwfact .smwrdflink,
.smw-factbox .smwrdflink,
#smw-factbox .smwrdflink {
	float: right !important;
	font-size: 12px !important;
	color: #0645ad !important;
}

/* Subobject rows - "Has subobject" property */
.smwfact table tr td em,
.smw-factbox table tr td em,
#smw-factbox .smw-table-cell em {
	font-style: italic !important;
	color: #555 !important;
}

/* Make Factbox responsive */
@media (max-width: 768px) {
	.smwfact table th,
	.smwfact table td:first-child,
	.smw-factbox table th,
	.smw-factbox table td:first-child,
	#smw-factbox .smw-table-cell.smw-propname {
		text-align: left !important;
		display: block !important;
		width: 100% !important;
		padding-right: 0 !important;
		padding-bottom: 2px !important;
		font-weight: bold !important;
	}
	
	.smwfact table td,
	.smw-factbox table td,
	#smw-factbox .smw-table-cell.smw-propvalue {
		display: block !important;
		padding-left: 15px !important;
		padding-bottom: 8px !important;
	}
}