/*
CTC Separate Stylesheet
Updated: 2026-04-14 16:58:09
*/

/*
 * Primary nav cascade sub-menu: float it out of the header flow.
 *
 * After our body_class filter flips the theme to the "inside-header" branch,
 * setupCascadeMenu() appends each submenu as a sibling of the main nav <ul>
 * inside .menu--primary. Without positioning, the submenu stacks vertically
 * and pushes the header taller. Absolute positioning + high z-index lets it
 * overlay the main content instead.
 */
.menu--primary {
	position: relative;
}

.menu--primary .data-menu[data-menu^="submenu-"],
.menu--primary .data-menu__hr {
	position: absolute;
	z-index: 9999;
	top: 100%;
	left: 0;
}

.menu--primary .data-menu[data-menu^="submenu-"] {
	background: #fff;
	padding: 0.5rem 1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/*
 * Mobile menu: show submenu items inline as an indented nested list.
 * The JS moves each submenu <ul> to be a sibling of its parent <li>, then
 * we unhide + indent here. The "Back" link is removed by the JS since it
 * only made sense in the click-to-drill pattern we're replacing.
 */
/*
 * Defeat MLMenu's one-level-at-a-time display. The library toggles a
 * `.menu__level--current` class to show only one <ul> and hides the rest via
 * CSS transforms/visibility. Force every level visible in normal flow.
 */
.mlm-menu-wrap .menu__level {
	display: block !important;
	position: static !important;
	transform: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
}

#mobile-header .menu__level {
	height: auto;
}

.mlm-menu-wrap .mlm-submenu-flat {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.5rem;
}

.mlm-menu-wrap .mlm-submenu-flat .menu__link {
	font-size: 0.9em;
	opacity: 0.85;
}

/*
 * PhotoSwipe gallery grid (child-theme-rendered).
 *
 * We emit <ul class="pswp-gallery columns-N">...<li class="gallery-item">...
 * so CSS Grid gives us reliable, responsive columns without depending on the
 * parent theme's column rules.
 */
.pswp-gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.pswp-gallery.columns-1 { grid-template-columns: 1fr; }
.pswp-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.pswp-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.pswp-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.pswp-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.pswp-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 768px) {
	.pswp-gallery.columns-3,
	.pswp-gallery.columns-4,
	.pswp-gallery.columns-5,
	.pswp-gallery.columns-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Uniform square thumbs: square the CELL and contain the image.
 * Non-square images get neutral padding bands, never a crop.
 */
.pswp-gallery .gallery-item {
	overflow: hidden;
	background: #f4f4f4;
	margin: 0;
}

/*
 * Multi-column layouts get uniform square cells. Single-column (used by
 * gallery-x-large showcase) skips the square constraint so the image
 * displays at its natural aspect ratio across the full row.
 */
.pswp-gallery:not(.columns-1) .gallery-item {
	aspect-ratio: 1 / 1;
}

.pswp-gallery .gallery-item a,
.pswp-gallery .gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
}

.pswp-gallery:not(.columns-1) .gallery-item img {
	object-fit: contain;
	object-position: center;
}

/*
 * Single-column showcase: let the image size to its natural height.
 * height: auto overrides the 100% rule above so tall images aren't squished.
 */
.pswp-gallery.columns-1 .gallery-item img {
	height: auto;
}

/*
 * PhotoSwipe v5: caption BELOW the image.
 *
 * The caption bar sits at the bottom of the pswp root. `padding.bottom: 80`
 * in the JS init reserves space inside the slide so the image never sits
 * under this bar.
 */
.pswp__caption-below {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px 20px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	pointer-events: auto;
}

.pswp__caption-title {
	font-weight: 600;
	margin-bottom: 2px;
}

.pswp__caption-desc {
	opacity: 0.9;
}

/*
 * [projects_grid] shortcode — clickable project cards in a responsive grid.
 *
 * Structure: <ul.projects-grid.columns-N> > <li.project-card> >
 *   <a> > <div.project-card__image> + <div.project-card__title>
 */
.projects-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.projects-grid.columns-1 { grid-template-columns: 1fr; }
.projects-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.projects-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.projects-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
	.projects-grid.columns-3,
	.projects-grid.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.projects-grid.columns-2,
	.projects-grid.columns-3,
	.projects-grid.columns-4 {
		grid-template-columns: 1fr;
	}
}

.project-card {
	margin: 0;
}

.project-card a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.project-card__image {
	aspect-ratio: 1 / 1;
	background: #f4f4f4;
	overflow: hidden;
}

.project-card__image img,
.project-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.project-card__image img {
	object-fit: contain;
	object-position: center;
}

.project-card__placeholder {
	background: #e8e8e8;
}

.project-card__title {
	padding: 8px 4px 4px;
	font-size: 0.9em;
	line-height: 1.3;
	text-align: center;
}

.project-card a:hover .project-card__title {
	text-decoration: underline;
}

/* link hover transparent */
.dropdown-item.active, .dropdown-item:active {
	background-color: transparent!important;
}

/* Disable the parent theme's auto-hyphenation (controlled by the Customizer's
 * "Use Hyphens" toggle, which adds .use-hyphens to <body>). Auto-hyphenation
 * is too aggressive for French body text on this site. */
body.use-hyphens .site-inner {
	hyphens: none;
}

/* bottom right : move the social media icons so it do not overlap with the go to top */
.scroll-to-top {
	bottom: 50px;
}