/**
* Theme Name: Canada Population
* Description: This is a dazzling WordPress child theme for Capopulation website.
* Author: Capopulation
* Version: 1.0.0
* Template: generatepress
*/

h2,
h3,
h4 {
	margin: 20px 0;
}

.page-header {
	margin-bottom: 3rem;
}

body.archive h1.page-title {
	margin-bottom: 3rem;
}

#primary form.search-form input.search-field,
.entry-content form.search-form input.search-field {
	width: 80%;
	margin: 1rem 0;
}

.nav-links {
	margin-top: 3rem;
}

h2.entry-title span {
	font-size: 16px;
}

.progress {
	position: relative;
	font-size: 14px;
	margin: 1rem 0;
}

.progress-bar {
	text-align: left;
	padding-left: 20px;
}

.progress span.value {
	position: absolute;
	right: 20px;
	top: 9px;
}

.simple-charts {
	float: left;
	clear: both;
	width: 100%;
	margin-bottom: 1rem;
}

.facility-col {
	display: inline-block;
	width: 49%;
	margin: 1rem 0;
}

dl.items {
	max-width: 600px;
	margin: 1rem 0;
}

dl.items dt,
dl.items dd {
	display: inline-block;
	width: 53%;
	font-weight: 400;
	margin: 0 0 5px 0 !important;
	vertical-align: top;
}

dl.items dt {
	width: 45%;
	color: #6d6875 !important;
}

p.notice {
	clear: both;
	background-color: #ffecd1;
	font-size: 14px;
	color: #555;
	margin-top: 2rem;
	padding: 0.5rem 1rem;
	border-radius: 5px;
}

ul.school-level {
	float: left;
	clear: both;
	width: 100%;
	margin: 0 0 3rem 0 !important;
	padding: 0;
}

ul.school-level li {
	float: left;
	list-style: none;
	margin: 0 10px 10px 0;
	padding: 5px 10px;
	border: 1px solid #dedede;
	border-radius: 5px;
}

ul.school-level li a {
	font-weight: 700;
	text-decoration: none;
}

/* table {
    width: 100%;
    table-layout: fixed;
    font-size: 13px;
    overflow-wrap: break-word;
    margin: 1rem 0 2rem 0;
}

table th,
table td {
	font-size: 1.3em;
	padding: 10px 15px;
	vertical-align: middle;
}

table th {
	background-color: #9eb3c2;
	color: #fff;
	text-align: left;
}

table tr.highlight td {
	background-color: #fcf6bd !important;
	font-weight: bold;
}

table tr.highlight td.highlight {
	color: #198754;
} */

.breadcrumb {
	font-size: 12px;
	text-transform: capitalize;
}

.leaflet-map {
	margin: 1.5rem 0 1rem 0;
}

/* Data tables */
.dataTables_length,
.dataTables_filter {
	font-size: 14px;
	margin-bottom: 7px;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	padding: 3px;
}

.dataTables_paginate {
	font-size: 14px;
	margin-top: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: .5em 0.7em;
}


ul.list {
	margin: 0;
}

ul.list li {
	display: inline-block;
	width: 22.5%;
	list-style: none;
	margin: 0 20px 20px 0;
	padding: 5px 10px;
	border: 1px solid #dedede;
	border-radius: 5px;
}

ul.list li a {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Plain-text OSM name lists (points of interest, places to visit) — not
links, and names vary a lot in length, so this wraps as flowing tags
instead of forcing them into ul.list's fixed-width, truncated boxes. */
ul.osm-list {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

ul.osm-list li {
	border: 1px solid #e0e0e0;
	border-radius: 20px;
	margin: 0 5px 5px 0;
	padding: 6px 14px;
	font-size: 0.95rem;
	white-space: normal;
}

ul.osm-list li a {
	color: inherit;
	text-decoration: none;
}

ul.osm-list li a:hover {
	text-decoration: underline;
}

.stat-card-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0.5rem 0 1rem;
}

.stat-card {
	flex: 1 1 160px;
	min-width: 160px;
	background-color: #f8f9fa;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 14px 18px;
}

.stat-card-value {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
}

.stat-card-label {
	font-size: 0.85rem;
	color: #555;
	margin-top: 2px;
}

.stat-card-delta {
	font-size: 0.8rem;
	font-weight: 600;
	margin-top: 6px;
}

.livability-pie-wrap {
	max-width: 320px;
	margin: 0 auto 1rem;
}

.capop-toc-widget ul {
	list-style: none;
	padding: 0;
}

.capop-toc-widget li {
	margin: 0 0 8px 0;
}

/* The in-content Table of Contents accordion on area single pages (not
the sidebar widget). Lives directly in .entry-content's normal flow —
unlike the sidebar widget, there's no flex/stretched-column complication
here, so a plain position:sticky on the element itself is enough, and it
applies on every device since this isn't a sidebar-only feature.

z-index is set well above Leaflet's own control panes (which go up to
1000 — see leaflet.css's .leaflet-top/.leaflet-bottom), since the OSM
map's container doesn't establish its own stacking context (it's
position:relative with no explicit z-index), so without this the map's
internal controls could paint over the sticky TOC while scrolling past
it. Still comfortably below WP's admin bar (z-index 99999). */
.toc.toc-sticky {
	position: sticky;
	top: 10px;
	z-index: 5000;
}

/* Bootstrap's accordion chevron is a background-image SVG with its fill
colour baked in via the --bs-accordion-btn-icon custom property, so
changing the button's text/background colour alone on hover doesn't
affect the arrow — it has to be swapped for a white-filled copy of the
same icon too. */
.toc.toc-sticky .accordion-button.collapsed:hover {
	background-color: #0d6efd;
	color: #fff;
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* WordPress's admin bar is position:fixed (and sits above everything,
including our sticky TOC) on tablet and desktop widths, so the TOC's
sticky offset needs to clear it or the two visually overlap. Below
600px WP itself switches the admin bar to position:absolute (it
scrolls away with the page instead), so no extra offset is needed
there. */
body.admin-bar .toc.toc-sticky {
	top: calc(32px + 10px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .toc.toc-sticky {
		top: calc(46px + 10px);
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .toc.toc-sticky {
		top: 10px;
	}
}

.toc.toc-sticky .accordion-collapse {
	max-height: calc(100vh - 80px);
	overflow-y: auto;
}

@media only screen and (min-width: 861px) {
	/* Sticks the whole sidebar column, not just the TOC widget — making
	only the TOC widget sticky (via a flex-item containing-block trick)
	worked when it was the first widget in the sidebar, but the widget
	vanished entirely whenever another widget was stacked above it.
	Sticking the whole column is the standard, broadly-supported
	pattern and avoids that edge case. See
	capopulation_maybe_sticky_sidebar_body_class() in functions.php for
	when the "capop-sidebar-sticky" body class gets added. */
	body.capop-sidebar-sticky .inside-right-sidebar,
	body.capop-sidebar-sticky .inside-left-sidebar {
		position: sticky;
		top: 20px;
		max-height: calc(100vh - 40px);
		overflow-y: auto;
	}
}

ul.grid {
	margin: 0;
}

ul.grid li {
	display: inline-block;
	width: 30%;
	position: relative;
	background-color: #777;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	text-align: center;
	list-style: none;
	margin: 0 20px 20px 0;
	padding: 5em 3em;
	border: 1px solid #dedede;
	border-radius: 5px;
}

.grid .item {
	position: relative;
}

.grid .item .card {
	background-color: #555;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	text-align: center;
}

ul.grid.no-gutters {
	margin: 0;
}

ul.grid.no-gutters li {
	height: 180px;
	padding: 0;
	overflow: hidden;
}

ul.grid li a.title,
.grid .item a.title {
	display: block;
	font-size: 1.2em;
	font-weight: 700;
	color: #fff;
	line-height: 1.2em;
	text-decoration: none;
	text-shadow: 2px 2px #555;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

ul.grid li img,
.grid .item img {
	width: 100%;
    height: 100%;
	object-fit: cover;
	overflow: hidden;
}

.grid .item-img img {
	width: 100%;
    height: 200px;
	object-fit: cover;
	overflow: hidden;
}

ul.grid li span.credit,
.grid .item span.credit {
	font-size: 11px;
	color: #fff;
	text-shadow: 2px 2px #333;
	padding: 0 10px;
	position: absolute;
	left: 0;
	bottom: 10px;
}

ul.grid li span.credit a,
.grid .item span.credit a {
	color: #fff;
	text-decoration: none;
}

figure.featured-image {
	margin: -15px 0 2rem 0 !important;
}

figure.featured-image figcaption {
	font-size: 12px;
	text-align: left;
	opacity: .75;
	margin-top: 1rem;
}

/* Tables */
table {
}

td, th {
	/* border-color: #fff; */
}

table td, table th {
    text-align: left;
    padding: .75rem;
    vertical-align: top;
}

.table th, .table td {
    padding: .75rem;
    vertical-align: top;
}

table td {
}

table th {
    background-color: #6e8894 !important;
    color: #fff !important;
}

table tr:nth-child(even) td {
    /* background-color: #ebedef; */
}

table tr:nth-child(odd) td {
    /* background-color: #ffffff; */
}

.option-col {
	float: left;
	width: 47%;
	min-height: 200px;
	margin: 0 10px 10px 0;
}

#photos figure {
	display: inline-block;
	max-height: 140px;
	overflow: hidden;
	margin: 0 1rem 1rem 0 !important;
}

.page-hero {
    background-color: rgba(104,90,90,0.41);
    color: #ffffff;
    padding-top: 150px;
    padding-right: 10px;
    padding-bottom: 150px;
    padding-left: 10px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.page-hero .inside-page-hero.grid-container {
    max-width: calc(1100px - 10px - 10px);
}

.grid-container {
    max-width: 1100px;
}
.grid-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.inside-page-hero > *:last-child {
    margin-bottom: 0px;
}
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4, .page-hero h5, .page-hero h6 {
    color: #ffffff;
}

@media only screen and (max-width: 860px) {
	.thumbnail,
	.pool-info {
		float: none;
		width: 100%;
	}

	.thumbnail {
		max-width: 100%;
		max-height: 100%;
	}

	.thumbnail img {
		width: 100% !important;
	}

	.pool-highlight .data.rating,
	.pool-highlight .data.status {
		width: 46%;
		margin: 0 20px 20px 0;
	}

	.pool-highlight .data:nth-child(2n+2) {
		margin-right: 0;
	}

	.pool-highlight .data.location {
		width: 100%;
	}

	.pool-highlight .data.status span {
		font-size: 1.4em;
	}

	ul.list li {
		width: 46.5%;
		font-size: .9em;
		margin: 0 20px 20px 0;
	}

	ul.list li:nth-child(2n+2) {
		margin-right: 0;
	}
}

@media only screen and (max-width: 600px) {
	#videos ul li {
		width: 48%;
	}

	#videos ul li .dashicons {
	    top: 25%;
	    left: 35%;
	    font-size: 50px;
	}

	.facility-col {
		width: 100%;
		margin: 0 0 20px 0;
	}
}