/*
Theme Name: SWIS Ontario
Theme URI: https://www.swisontario.ca/
Author: SWIS Ontario
Author URI: https://www.swisontario.ca/
Description: Custom theme for SWIS Ontario - Settlement Workers in Schools Regional Coordination
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: swis-ontario
*/

/* =========================================================
   CSS Custom Properties
   ========================================================= */
:root {
	/* Official SWIS brand red (#d1202a) + gold/green leaf accents (Brand Guide 04/09/26) */
	--swis-red:         #d1202a;
	--swis-red-dark:    #b31b24;
	--swis-red-pale:    #fbe9ea;
	--swis-gold:        #F78D1E;
	--swis-gold-dark:   #de790e;

	/* Brand yellow (#f9d006) + a soft pale tint for section backgrounds */
	--swis-yellow:      #f9d006;
	--swis-yellow-pale: #fef8df;

	/* Dark green used by the original for headings + footer */
	--swis-green-dark:  #052313;
	--swis-green-mid:   #1F4D2E;
	--swis-green-light: #3D8B52;
	--swis-green-pale:  #EEF3EC;

	/* Primary accent = red (buttons, links). Headings stay dark green. */
	--swis-accent:      var(--swis-red);
	--swis-accent-dark: var(--swis-red-dark);
	--swis-heading:     var(--swis-green-dark);

	--swis-white:       #FFFFFF;
	--swis-text:        #1E1E1E;
	--swis-text-light:  #5A5A5A;
	--swis-footer-bg:   #052313;
	--swis-footer-text: #D6DED7;
	--swis-border:      #E2E2E2;
	--swis-input-bg:    #F9F9F9;
	--swis-shadow:      0 2px 8px rgba(0,0,0,0.08);
	--swis-shadow-lg:   0 4px 20px rgba(0,0,0,0.10);
	--swis-radius:      6px;
	--swis-radius-lg:   10px;
	--swis-max-width:   1408px;
	--swis-header-h:    88px;
	--swis-font-body:   'Poppins', Arial, sans-serif;
	--swis-font-head:   'Poppins', Arial, sans-serif;
}

/* =========================================================
   Reset & Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	font-family: var(--swis-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--swis-text);
	background: var(--swis-white);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--swis-accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--swis-accent-dark); text-decoration: underline; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--swis-font-head);
	color: var(--swis-heading);
	line-height: 1.3;
	margin-bottom: .75em;
	font-weight: 600;
	letter-spacing: -.01em;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.15rem; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* =========================================================
   Layout Utilities
   ========================================================= */
.container {
	max-width: var(--swis-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.section { padding: 4rem 0; }
.section--pale { background: #f8f6f3; }
.section--dark { background: var(--swis-green-dark); color: var(--swis-white); }
.section--dark h2, .section--dark h3 { color: var(--swis-white); }

.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* =========================================================
   Site Header
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--swis-white);
	border-bottom: 3px solid var(--swis-red);
	box-shadow: var(--swis-shadow);
	transition: border-color .2s ease;
}
/* Once scrolled past the red page-banner, the border switches to dark */
.site-header.is-detached { border-bottom-color: var(--swis-green-dark); }

.site-header__inner {
	max-width: var(--swis-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--swis-header-h);
}

/* Keep the logo from being compressed by the flex row */
.site-logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}
.site-logo img {
	height: 72px;
	width: auto;
	max-width: none;          /* override global img max-width:100% so aspect is preserved */
	object-fit: contain;
}
@media (max-width: 600px) {
	.site-logo img { height: 56px; }
}

/* Right-side header group: nav + portal login button */
.site-header__end {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/* Portal login button */
.site-login {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	flex: 0 0 auto;
	padding: .5rem 1.1rem;
	background: var(--swis-accent);
	color: var(--swis-white);
	border-radius: 999px;
	font-weight: 600;
	font-size: .92rem;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background .2s, transform .15s;
}
.site-login:hover,
.site-login:focus {
	background: var(--swis-accent-dark);
	color: var(--swis-white);
	text-decoration: none;
	transform: translateY(-1px);
}
.site-login svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex: 0 0 auto;
}
/* Collapse to an icon-only circle on small screens */
@media (max-width: 600px) {
	.site-login__label { display: none; }
	.site-login { padding: .55rem; border-radius: 50%; }
	.site-header__end { gap: .75rem; }
}

/* =========================================================
   Navigation (desktop) — see assets/css/navigation.css
   ========================================================= */

/* =========================================================
   Hero Banner
   ========================================================= */
/* Thin red bar above the banner photo (orig: #d1202a, 32px) */
.home-banner-topbar {
	width: 100%;
	background: var(--swis-red);
	text-align: center;
	padding: .5rem 1.5rem;
}
.home-banner-topbar__text {
	font-family: var(--swis-font-body); /* same font as the titlebar text below the banner */
	font-weight: 700;
	font-size: 43.13px;                 /* enlarged 50% from 28.75px */
	line-height: 1.25;
	color: #fff;
}

/* Banner photo — show the FULL image (no cropping) and scale responsively
   across all screen sizes so the students stay fully visible. */
.home-banner-photo {
	width: 100%;
	aspect-ratio: 3.09 / 1;      /* height reduced ~15% from the previous 2.63/1 */
	height: auto;
	object-fit: cover;
	object-position: center top; /* keep the students' faces in frame */
	display: block;
}
/* Fallback colour block when no banner image is set */
.home-banner-photo--empty {
	height: 401px;
	background: var(--swis-green-dark);
}

/* Red heading bar beneath the banner (orig bg: #d1202a) — thin bar, large
   leaf overlapping it on the left while the title stays centered. */
.home-banner-titlebar {
	width: 100%;
	background: var(--swis-red);
	position: relative;
}
.home-banner-titlebar__inner {
	position: relative;
	max-width: var(--swis-max-width);
	margin: 0 auto;
	min-height: 56px;            /* thin bar */
	padding: 6px 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;     /* title centered in the bar */
}
.home-banner-titlebar__leaf {
	position: absolute;
	left: -17px;                 /* far left, as on the original */
	top: 50%;
	transform: translateY(-50%);
	width: 212px;                /* full-size leaf, overflows the thin bar */
	height: 212px;
	display: block;
	pointer-events: none;
	z-index: 2;
	filter: drop-shadow(0 0 8px rgba(255,255,255,.95)); /* white halo behind the leaf */
}
.home-banner-titlebar__title {
	color: #FFFFFF;
	font-family: var(--swis-font-body);
	font-size: 25px;
	font-weight: 700;
	line-height: normal;
	margin: 0;
	text-align: center;
}

@media (max-width: 760px) {
	.home-banner-photo--empty { height: 255px; }
	.home-banner-titlebar__inner { min-height: 48px; padding: 6px 1rem 6px 90px; justify-content: flex-start; }
	.home-banner-titlebar__leaf { left: -28px; width: 140px; height: 140px; }
	.home-banner-titlebar__title { font-size: 1.15rem; text-align: left; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
	display: inline-block;
	padding: .7em 1.8em;
	border-radius: 999px;
	font-family: var(--swis-font-body);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.4;
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .1s;
	border: 2px solid transparent;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--swis-accent);
	color: var(--swis-white);
	border-color: var(--swis-accent);
	box-shadow: 0 2px 10px rgba(209,32,42,.22);
}
.btn--primary:hover { background: var(--swis-accent-dark); border-color: var(--swis-accent-dark); color: var(--swis-white); }

.btn--outline {
	background: transparent;
	color: var(--swis-accent);
	border-color: var(--swis-accent);
}
.btn--outline:hover { background: var(--swis-accent); color: var(--swis-white); }

.btn--white {
	background: var(--swis-white);
	color: var(--swis-accent);
	border-color: var(--swis-white);
}
.btn--white:hover { background: var(--swis-red-pale); color: var(--swis-accent-dark); }

/* =========================================================
   Home Page Sections
   ========================================================= */
.home-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.home-intro__image {
	text-align: center;
}

.home-intro__image img {
	max-width: 100%;
	margin: 0 auto;
	border-radius: var(--swis-radius-lg);
}

/* Decorative leaf logo (Regional Coordination block) stays small & frameless */
.home-intro__image img[src*="leaf"] {
	max-width: 220px;
	border-radius: 0;
}

.home-intro__text h2 { margin-bottom: .75rem; }
.home-intro__text p { color: var(--swis-text-light); }
.home-intro__text .btn { margin-top: 1rem; }

/* Banded variant: red panel behind the text, flush against the image,
   both columns the same height (image height drives the band). */
.home-intro--banded {
	gap: 0;
	align-items: stretch;
	border-radius: var(--swis-radius-lg);
	overflow: hidden;
}
.home-intro--banded .home-intro__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}
.home-intro--banded .home-intro__text {
	background: var(--swis-accent);
	color: var(--swis-white);
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.home-intro--banded .home-intro__text h2,
.home-intro--banded .home-intro__text p { color: var(--swis-white); }
.home-intro--banded .home-intro__text .btn {
	align-self: flex-start;
}
.home-intro--banded .home-intro__text .btn--outline {
	background: var(--swis-gold);
	color: var(--swis-white);
	border-color: var(--swis-gold);
}
.home-intro--banded .home-intro__text .btn--outline:hover {
	background: var(--swis-gold-dark);
	color: var(--swis-white);
	border-color: var(--swis-gold-dark);
}

/* Agency Highlights */
.agency-highlights {
	text-align: center;
}

.agency-highlights__tagline {
	font-size: 1.15rem;
	color: var(--swis-text-light);
	max-width: 680px;
	margin: 0 auto 2rem;
}

/* Get Social */
.get-social { text-align: center; background: var(--swis-yellow-pale); }
.get-social h2 { margin-bottom: 1rem; }

.social-icons {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--swis-green-pale);
	transition: background .2s, transform .15s;
}

.social-icons a:hover {
	background: var(--swis-green-dark);
	transform: translateY(-2px);
}

.social-icons a svg { width: 22px; height: 22px; fill: var(--swis-green-dark); transition: fill .2s; }
.social-icons a:hover svg { fill: var(--swis-white); }

/* =========================================================
   Interior Page Layout
   ========================================================= */
/* Interior page banner — decorative wave strip (orig 980x257, centered)
   with the 3-leaf graphic overlaid on the top-right (as on the original). */
/* Interior page banner — brand red bar across the top.
   Wave image + leaf hidden for now; height eases from 38px (desktop) to 15px (mobile). */
.page-banner {
	position: relative;
	width: 100%;
	margin: 0;
	height: clamp(15px, 6.65px + 2.23vw, 38px);
	background: var(--swis-red) !important;   /* overrides the inline wave image */
}
.page-banner::after {
	display: none;   /* hide the decorative leaf */
}

/* Interior page titles (main header) use the SWIS red */
.page-content h1,
.section h1 {
	color: var(--swis-accent);
}

.page-content {
	padding: 3rem 0 4rem;
}

.page-content .container {
	display: grid;
	grid-template-columns: 1fr;
	max-width: 860px;
}

.page-content h1 { margin-bottom: 1.5rem; }

/* Leaf icon float on interior pages */
.page-leaf {
	float: right;
	margin: 0 0 1.5rem 2rem;
	max-width: 140px;
}

@media (max-width: 600px) {
	.page-leaf { display: none; }
}

/* =========================================================
   Icon Grid (SWIS Regional Coordination mandates)
   ========================================================= */
.icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.icon-grid__item {
	background: var(--swis-white);
	border: 1px solid var(--swis-border);
	border-radius: var(--swis-radius-lg);
	padding: 1.5rem;
	text-align: center;
	box-shadow: var(--swis-shadow);
}

.icon-grid__item .icon {
	font-size: 2rem;
	margin-bottom: .75rem;
	color: var(--swis-green-mid);
}

.icon-grid__item p { margin: 0; font-size: .95rem; }

/* Key Functions */
.key-functions { margin: 2rem 0; }
.key-functions dt {
	font-weight: 700;
	color: var(--swis-green-dark);
	margin-top: 1.25rem;
}
.key-functions dd { margin-left: 1rem; color: var(--swis-text-light); }

/* Purpose points */
.purpose-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 1.5rem 0;
}

.purpose-list__item {
	background: var(--swis-green-pale);
	border-left: 4px solid var(--swis-green-dark);
	border-radius: 0 var(--swis-radius) var(--swis-radius) 0;
	padding: 1rem 1.25rem;
	font-size: .95rem;
}

@media (max-width: 600px) {
	.purpose-list { grid-template-columns: 1fr; }
}

/* Bullet lists on SWIS Services */
.services-section { margin: 2rem 0; }
.services-section h3 {
	color: var(--swis-green-dark);
	border-bottom: 2px solid var(--swis-green-pale);
	padding-bottom: .4rem;
	margin-bottom: 1rem;
}
.services-section ul { padding-left: 1.25rem; list-style: disc; }
.services-section ul li { margin-bottom: .5rem; color: var(--swis-text); }

/* Generic bullet lists inside interior page sections */
.section .container > ul:not(.resource-list):not(.resource-grid),
.entry-content ul {
	padding-left: 1.25rem;
	list-style: disc;
	margin-bottom: 1.25rem;
}
.section .container > ul:not(.resource-list):not(.resource-grid) li,
.entry-content ul li {
	margin-bottom: .5rem;
	color: var(--swis-text);
}

/* Purpose list (What is SWIS?) */
.swis-purpose-list { padding-left: 1.25rem; list-style: disc; }
.swis-purpose-list li { margin-bottom: .65rem; color: var(--swis-text); line-height: 1.6; }

/* Resource listings (New to Canada categories) */
.resource-list { list-style: none; padding-left: 0; }
.resource-list li {
	padding: 1rem 0;
	border-bottom: 1px solid var(--swis-border);
	color: var(--swis-text);
	line-height: 1.6;
}
.resource-list li:last-child { border-bottom: none; }
.resource-list li strong { color: var(--swis-green-dark); }
.resource-list li a { color: var(--swis-accent); word-break: break-word; }
@media (min-width: 720px) {
	.resource-list { column-count: 2; column-gap: 2.5rem; }
	.resource-list li { break-inside: avoid; }
}

/* =========================================================
   Find SWIS Programs
   ========================================================= */
.find-intro { margin-bottom: 2rem; }

.region-accordion { margin: 1.5rem 0; border: 1px solid var(--swis-border); border-radius: var(--swis-radius-lg); overflow: hidden; }

.region-accordion__header {
	width: 100%;
	background: var(--swis-green-dark);
	color: var(--swis-white);
	border: none;
	padding: 1rem 1.5rem;
	font-family: var(--swis-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background .2s;
}

.region-accordion__header:hover { background: var(--swis-green-mid); }

.region-accordion__header .chevron {
	transition: transform .25s;
	flex-shrink: 0;
}

.region-accordion__header[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.region-accordion__body {
	display: none;
	padding: 1.25rem 1.5rem;
	background: var(--swis-white);
}

.region-accordion__body.is-open { display: block; }

.region-count { font-size: .9rem; font-weight: 400; opacity: .85; }

.agency-list { margin-top: 1rem; }
.agency-list__item { padding: .6rem 0; border-bottom: 1px solid var(--swis-border); font-size: .9rem; }
.agency-list__item:last-child { border-bottom: none; }
.agency-list__item strong { color: var(--swis-green-dark); display: block; }
.agency-list__item span { color: var(--swis-text-light); }

.find-downloads { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* =========================================================
   New to Canada
   ========================================================= */
.resource-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);   /* 10 categories → 2 rows of 5 */
	gap: 1.75rem 1rem;
	margin-top: 1.5rem;
}

@media (max-width: 760px) {
	.resource-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 460px) {
	.resource-grid { grid-template-columns: repeat(2, 1fr); }
}

/* No surrounding square — just the circular icon + label */
.resource-card {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	text-align: center;
	box-shadow: none;
	transition: transform .15s;
	text-decoration: none;
	color: var(--swis-text);
}

.resource-card:hover {
	transform: translateY(-3px);
	text-decoration: none;
	color: var(--swis-green-dark);
}

.resource-card__icon {
	margin-bottom: .6rem;
	line-height: 1;
}
.resource-card__icon img {
	width: 100px;
	height: 100px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

.resource-card__title {
	font-family: var(--swis-font-head);
	font-weight: 700;
	font-size: .95rem;
	color: var(--swis-green-dark);
}

/* =========================================================
   News / Blog
   ========================================================= */
.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}

.post-card {
	background: var(--swis-white);
	border: 1px solid var(--swis-border);
	border-radius: var(--swis-radius-lg);
	overflow: hidden;
	box-shadow: var(--swis-shadow);
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s;
}

.post-card:hover { box-shadow: var(--swis-shadow-lg); }

.post-card__thumb {
	width: 100%;
	height: 180px;
	background: var(--swis-green-pale);
	object-fit: cover;
}

.post-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }

.post-card__meta {
	display: flex;
	gap: .75rem;
	font-size: .8rem;
	color: var(--swis-text-light);
	margin-bottom: .5rem;
	flex-wrap: wrap;
}

.post-card__cat {
	background: var(--swis-green-pale);
	color: var(--swis-green-dark);
	padding: .15em .6em;
	border-radius: 2em;
	font-weight: 600;
}

.post-card__title {
	font-family: var(--swis-font-head);
	font-size: 1.05rem;
	color: var(--swis-green-dark);
	margin-bottom: .5rem;
	line-height: 1.4;
}

.post-card__title a { color: inherit; }
.post-card__title a:hover { text-decoration: underline; }

.post-card__excerpt { font-size: .9rem; color: var(--swis-text-light); flex: 1; }

.post-card__link {
	display: inline-block;
	margin-top: 1rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--swis-accent);
}

/* =========================================================
   Agency Highlights — carousel
   ========================================================= */
.swis-highlights { position: relative; margin-top: 2rem; }
.swis-highlight-slide { display: none; }
.swis-highlight-slide.is-active { display: block; }
.swis-highlight-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}
.swis-highlight-image img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	border-radius: var(--swis-radius-lg);
	box-shadow: var(--swis-shadow);
	display: block;
}
.swis-highlight-text p {
	font-size: 1.05rem;
	color: var(--swis-text-light);
	line-height: 1.8;
	margin: 0;
}
.swis-highlights-dots {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: 2rem;
}
.swis-highlights-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 2px solid rgba(209,32,42,.5);
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: background .25s, border-color .25s;
}
.swis-highlights-dot.is-active { background: var(--swis-accent); border-color: var(--swis-accent); }

@media (max-width: 760px) {
	.swis-highlight-inner { grid-template-columns: 1fr; gap: 1.5rem; }
	.swis-highlight-image img { height: 220px; }
}

/* =========================================================
   News & Updates — header + grid + Instagram rotator
   ========================================================= */
.swis-news-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2rem;
}
.swis-news-head h2 { margin-bottom: 0; }
.swis-eyebrow {
	color: var(--swis-accent);
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: .35rem;
}
.swis-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.swis-news-thumb { display: block; }
.post-card__thumb--empty {
	display: block;
	width: 100%;
	height: 180px;
	background: var(--swis-green-pale);
}

/* Instagram rotator card */
.swis-ig-card { overflow: hidden; }
.swis-ig-header {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .8rem 1.25rem;
	border-bottom: 1px solid var(--swis-border);
}
.swis-ig-icon { width: 20px; height: 20px; fill: #C13584; flex-shrink: 0; }
.swis-ig-handle { font-size: .85rem; font-weight: 700; color: #C13584; text-decoration: none; }
.swis-ig-handle:hover { text-decoration: underline; }

.swis-ig-slides { position: relative; }
.swis-ig-slide { display: none; }
.swis-ig-slide.is-active { display: block; }

.swis-ig-thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #f5f5f5;
}
.swis-ig-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.swis-ig-thumb:hover img { transform: scale(1.04); }
/* Leaf placeholder — centre, don't crop */
.swis-ig-thumb.is-placeholder {
	background: var(--swis-green-pale);
	display: flex;
	align-items: center;
	justify-content: center;
}
.swis-ig-thumb.is-placeholder img { width: 55%; height: 55%; object-fit: contain; }

.swis-ig-caption {
	font-size: .9rem;
	color: var(--swis-text-light);
	line-height: 1.6;
	margin: 0 0 .5rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.swis-ig-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .6rem .75rem .85rem;
}
.swis-ig-prev, .swis-ig-next {
	background: none;
	border: 1px solid var(--swis-border);
	border-radius: 50%;
	width: 28px; height: 28px;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	color: var(--swis-text-light);
	display: flex; align-items: center; justify-content: center;
	transition: border-color .15s, color .15s;
}
.swis-ig-prev:hover, .swis-ig-next:hover { border-color: var(--swis-accent); color: var(--swis-accent); }
.swis-ig-dots { display: flex; gap: .3rem; align-items: center; }
.swis-ig-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--swis-border);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background .2s;
}
.swis-ig-dot.is-active { background: var(--swis-accent); }

@media (max-width: 880px) {
	.swis-news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.swis-news-grid { grid-template-columns: 1fr; }
	.swis-news-head { flex-direction: column; align-items: flex-start; }
}

/* Single post.
   NOTE: qualified with `article` because WordPress also puts the class
   `single-post` on <body> for every post — an unqualified .single-post
   rule squeezes the whole page (header/footer included) to 780px. */
article.single-post { max-width: 780px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.single-post__meta { font-size: .875rem; color: var(--swis-text-light); margin-bottom: 1.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.single-post__content { line-height: 1.8; }
.single-post__content p { margin-bottom: 1.25em; }
.single-post__back { display: inline-block; margin-top: 2.5rem; font-size: .875rem; font-weight: 600; }

/* =========================================================
   Contact / Forms — see assets/css/forms.css
   ========================================================= */
.contact-intro { margin-bottom: 2rem; }
.contact-info { background: var(--swis-green-pale); border-radius: var(--swis-radius-lg); padding: 1.5rem; margin-bottom: 2rem; }
.contact-info p { margin: .25rem 0; }
.contact-info a { color: var(--swis-accent); font-weight: 600; }

/* =========================================================
   Training page
   ========================================================= */
.ocasi-block {
	background: var(--swis-green-pale);
	border-left: 4px solid var(--swis-green-dark);
	border-radius: 0 var(--swis-radius-lg) var(--swis-radius-lg) 0;
	padding: 1.5rem 2rem;
	margin: 1.5rem 0;
}

.ocasi-block h3 { margin-bottom: .5rem; }
.ocasi-block a { font-weight: 700; }

/* =========================================================
   Subfooter — red band (orig comp-mm4wxwr7 / #d1202a)
   ========================================================= */
.subfooter {
	background: var(--swis-red);
	color: #FFFFFF;
}
.subfooter__inner {
	max-width: var(--swis-max-width);
	margin: 0 auto;
	padding: 3rem 1.5rem 3.5rem;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 2rem;
	align-items: start;
}

/* LEFT text column */
.subfooter__tagline {
	color: #FFFFFF;
	font-family: var(--swis-font-body);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 1.5rem;
}
.subfooter__tagline-accent { color: var(--swis-gold); }
.subfooter__contact p {
	color: #FFFFFF;
	font-size: .92rem;
	line-height: 1.55;
	margin: 0 0 .2rem;
}
.subfooter__contact a { color: #FFFFFF; text-decoration: underline; }
.subfooter__contact a:hover { color: #FFFFFF; opacity: .85; }
.subfooter__landack {
	margin: 1.25rem 0 0;
}
.subfooter__landack a {
	color: #FFFFFF;
	font-size: .92rem;
	text-decoration: underline;
}

/* Newsletter subscribe in subfooter */
.subfooter__subscribe { margin-top: 1.5rem; width: 100%; max-width: 320px; }
.subfooter__subscribe-label {
	display: block;
	color: #FFFFFF;
	font-size: .88rem;
	font-weight: 600;
	margin-bottom: .5rem;
}
.subfooter__subscribe-row {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}
.subfooter__subscribe-row input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: .55rem .85rem;
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 999px;
	background: rgba(255,255,255,.12);
	color: #FFFFFF;
	font-family: var(--swis-font-body);
	font-size: .88rem;
}
.subfooter__subscribe-row input[type="email"]::placeholder { color: rgba(255,255,255,.6); }
.subfooter__subscribe-row input[type="email"]:focus {
	outline: none;
	border-color: rgba(255,255,255,.8);
	background: rgba(255,255,255,.2);
}
.subfooter__subscribe-row button {
	flex-shrink: 0;
	padding: .55rem 1.25rem;
	background: #FFFFFF;
	color: var(--swis-red);
	border: none;
	border-radius: 999px;
	font-family: var(--swis-font-body);
	font-size: .88rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.subfooter__subscribe-row button:hover { background: #f5e9e9; }
.subfooter__subscribe-row button:disabled { opacity: .6; cursor: default; }
.subfooter__subscribe-msg {
	margin: .5rem 0 0;
	font-size: .82rem;
	color: rgba(255,255,255,.9);
}

/* RIGHT logos column */
.subfooter__logos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding-top: .5rem;
}
.subfooter__logo {
	width: 280px;
	max-width: 100%;
	height: auto;
	display: block;
}

/* =========================================================
   Main footer — white (orig SITE_FOOTER)
   ========================================================= */
.site-footer {
	background: #FFFFFF;
	color: var(--swis-text);
	padding: 1.5rem 0;
	border-top: 1px solid var(--swis-border);
}
.site-footer__inner {
	max-width: var(--swis-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}

/* LEFT: social + copyright + legal */
.site-footer__left {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.site-footer__social { display: flex; gap: .85rem; align-items: center; }
.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: #1E1E1E;
	transition: opacity .2s;
}
.site-footer__social-link:hover { opacity: .6; }
.site-footer__social-link svg { width: 20px; height: 20px; fill: #1E1E1E; }
.site-footer__copy { font-size: .8rem; color: var(--swis-text); margin: 0; }
.site-footer__legal {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .78rem;
	flex-wrap: wrap;
}
.site-footer__legal a { color: var(--swis-accent); font-weight: 600; letter-spacing: .02em; text-decoration: none; }
.site-footer__legal a:hover { text-decoration: underline; }
.site-footer__sep { color: #999; }

/* RIGHT: funder + partner logos */
.site-footer__partners {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.site-footer__irc { height: 56px; width: auto; display: block; }
.site-footer__tno { height: 60px; width: auto; display: block; }

@media (max-width: 700px) {
	.site-footer__inner { flex-direction: column; align-items: center; text-align: center; }
	.site-footer__left { align-items: center; }
}

/* =========================================================
   Utility: Page not found
   ========================================================= */
.error-404 { text-align: center; padding: 6rem 1.5rem; }
.error-404 h1 { font-size: 5rem; color: var(--swis-green-pale); text-shadow: 0 0 0 var(--swis-green-dark); -webkit-text-stroke: 2px var(--swis-green-dark); }
.error-404 h2 { margin-top: .5rem; }
.error-404 p { color: var(--swis-text-light); margin-bottom: 2rem; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 700px) {
	.home-intro { grid-template-columns: 1fr; }
	.home-intro__image,
	.home-intro--reverse .home-intro__image { order: -1; }
	.home-intro--reverse .home-intro__text { order: 0; }
	/* Stacked: let the image take its natural height above the red band */
	.home-intro--banded .home-intro__image img { height: auto; }
	.subfooter__inner { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
	.subfooter__logo { margin-left: auto; margin-right: auto; }
}

@media (max-width: 480px) {
	.section { padding: 2.5rem 0; }
	.hero-banner { min-height: 200px; }
}

/* =========================================================
   HOME SECTIONS PORTED FROM swis-ontario-secondary
   (SWIS Agency Highlights · Latest from SWIS · Get Social)
   ========================================================= */

/* ---- SWIS Agency Highlights (banded card, mirrors "What is SWIS?") ---- */
/* Text panel on the left, logo collage on the right. The image column is locked to the
   SAME aspect ratio as the sibling "What is SWIS?" photo (980x730), so both cards render
   at the same height. The portrait collage fills that landscape box via object-fit:cover
   pinned to the top, cropping its bottom to fit. On mobile the card stacks and the image
   shows its full natural height (the whole collage). */
.home-intro--banded.home-intro--agency .home-intro__image img {
	height: auto;
	aspect-ratio: 980 / 730;
	object-fit: cover;
	object-position: top center;
}
@media (max-width: 700px) {
	.home-intro--banded.home-intro--agency .home-intro__image img { aspect-ratio: auto; }
}

/* ---- Latest from SWIS Ontario (3 post cards) ---- */
.swis-latest-section { padding: 4rem 0; background: #fff; }
.swis-latest-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }
.swis-latest-head h2 { margin: 0; }
.swis-latest-carousel { display: flex; align-items: center; gap: 1rem; }
.swis-latest-track {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 1.75rem) / 3);
	gap: 1.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 12px 4px;
}
.swis-latest-track::-webkit-scrollbar { display: none; }
.swis-latest-track > .swis-latest-card { scroll-snap-align: start; }
.swis-latest-nav {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--swis-border);
	background: #fff;
	color: var(--swis-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--swis-shadow);
	transition: background .2s, color .2s, opacity .2s, transform .15s;
}
.swis-latest-nav svg { width: 24px; height: 24px; fill: currentColor; }
.swis-latest-nav:hover:not(:disabled) { background: var(--swis-accent); color: #fff; transform: translateY(-1px); }
.swis-latest-nav:disabled { opacity: .35; cursor: default; }
.swis-latest-carousel.is-static .swis-latest-nav { display: none; }
.swis-latest-card {
	background: #fff;
	border: 1px solid var(--swis-border);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--swis-shadow);
	transition: box-shadow .2s, transform .15s;
}
.swis-latest-card:hover { box-shadow: var(--swis-shadow-lg); transform: translateY(-3px); }
.swis-latest-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f0f0f0; }
.swis-latest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.swis-latest-card:hover .swis-latest-thumb img { transform: scale(1.04); }
.swis-latest-body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.swis-latest-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--swis-text-light); font-size: .82rem; }
.swis-latest-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.swis-latest-meta svg { width: 15px; height: 15px; fill: var(--swis-accent); flex-shrink: 0; }
.swis-latest-title { font-family: var(--swis-font-head); font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin: 0; }
.swis-latest-title a { color: var(--swis-heading); text-decoration: none; }
.swis-latest-title a:hover { color: var(--swis-accent); }
.swis-latest-divider { height: 1px; background: var(--swis-border); margin: .25rem 0; }
.swis-latest-readmore { margin-top: auto; font-weight: 600; color: var(--swis-accent); text-decoration: none; }
.swis-latest-readmore:hover { color: var(--swis-accent-dark); }
@media (max-width: 900px) {
	.swis-latest-track { grid-auto-columns: calc((100% - 1.75rem) / 2); }
}
@media (max-width: 600px) {
	.swis-latest-track { grid-auto-columns: 100%; }
	.swis-latest-head { flex-direction: column; align-items: flex-start; }
	.swis-latest-nav { width: 38px; height: 38px; }
}

/* ---- Get Social with SWIS (Instagram card grid) ---- */
.s2-social-section { padding: 4rem 0; background: #f8f6f3; }
.s2-social-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem; }
.s2-social-heading { margin: 0; font-family: var(--swis-font-head); color: var(--swis-heading); }
.s2-social-follow { white-space: nowrap; }
.s2-social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.s2-social-card {
	background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.07);
	display: flex; flex-direction: column; overflow: hidden;
	text-decoration: none; color: inherit; transition: box-shadow .2s, transform .15s;
}
.s2-social-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); transform: translateY(-3px); }
.s2-social-card-img { aspect-ratio: 1 / 1; overflow: hidden; background: #f5f5f5; }
.s2-social-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.s2-social-card:hover .s2-social-card-img img { transform: scale(1.04); }
.s2-social-card-img.is-placeholder { background: #f8f6f3; display: flex; align-items: center; justify-content: center; }
.s2-social-card-img.is-placeholder img { width: 50%; height: 50%; object-fit: contain; }
.s2-social-card-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.s2-social-card-top { display: flex; align-items: center; gap: .6rem; color: #888; font-size: .8rem; }
.s2-social-insta-icon { width: 22px; height: 22px; fill: #e1306c; flex-shrink: 0; }
.s2-social-text {
	font-size: .9rem; color: #333; line-height: 1.6; margin: 0; flex: 1;
	display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.s2-social-link { font-size: .82rem; font-weight: 600; color: var(--swis-accent); }
@media (max-width: 900px) { .s2-social-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) {
	.s2-social-section { padding: 2.5rem 1rem; }
	.s2-social-grid { grid-template-columns: 1fr; }
	.s2-social-header { flex-direction: column; align-items: flex-start; }
}