/*
 * Un feu sur la terre — what jQuery Tools and the Dynamic Drive menu script used to do, in CSS (with js/legacy.js).
 * Loaded after style.css, css/dropdown.css and css/modern.css.
 */

/* ---------- home slideshow: panes stacked, the current one cross-fades in (500 ms, like the old "fade" effect) ---------- */
#panes > div {
	display: block;
	top: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility 0s linear .5s;
}
#panes > div.is-current,
#panes:not(.is-live) > div:first-child {   /* without the script: first pane, as before the click handlers run */
	opacity: 1;
	visibility: visible;
	transition: opacity .5s ease, visibility 0s;
	z-index: 1;
}

/* tablets/phones: modern.css puts the panes in the flow, so the hidden ones must take no room */
@media (max-width: 1000px) {
	#panes > div { display: none; transition: none; }
	#panes > div.is-current,
	#panes:not(.is-live) > div:first-child { display: block; animation: legacy-fade-in .5s ease; }
}
@keyframes legacy-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- main menu bar: CSS only (was images/bgnav.png stretched to the width + a gradient GIF on every item) ---------- */
#menu.dropdown {
	background: linear-gradient(180deg, #312c2c 0%, #231f1f 55%, #1b1919 100%);
	border-radius: 8px 8px 0 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 -1px 0 rgba(0, 0, 0, .35);
	padding: 4px 10px;
}
#menu > ul#menu-menuprincipal { background: none; row-gap: 2px; }
.dropdown ul#menu-menuprincipal li { background: none; }
.dropdown ul#menu-menuprincipal a { text-shadow: 0 1px 1px rgba(0, 0, 0, .55); }
.dropdown ul#menu-menuprincipal > li {
	border-radius: 5px 5px 0 0;
	transition: background-color .2s ease, box-shadow .2s ease;
}
.dropdown ul#menu-menuprincipal > li:hover,
.dropdown ul#menu-menuprincipal > li.is-open,
.dropdown ul#menu-menuprincipal > li.current-menu-item,
.dropdown ul#menu-menuprincipal > li.current-menu-ancestor {
	background: rgba(255, 255, 255, .06);
	box-shadow: inset 0 -2px 0 #b39a5b;
}
@media (min-width: 641px) {
	.dropdown ul#menu-menuprincipal > li { height: 36px; box-sizing: border-box; padding: 9px 4px 8px; line-height: 19px; }
}

/* ---------- sub-menus: as wide as their item at least, one line per entry, shadow ---------- */
.dropdown ul#menu-menuprincipal ul {
	width: auto;
	min-width: max(100%, 210px);
	background: #2b2727;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, .45);
	padding: 4px 0;
}
.dropdown ul#menu-menuprincipal ul li { padding: 0; border-bottom: 1px solid #3b3535; white-space: nowrap; }
.dropdown ul#menu-menuprincipal ul li:last-child { border-bottom: 0; }
.dropdown ul#menu-menuprincipal ul a { display: block; padding: 9px 16px; }
.dropdown ul#menu-menuprincipal ul li:hover, .dropdown ul#menu-menuprincipal ul li.is-open { background: #3a3434; }

/* ---------- opening: on hover without the script; with it (js/legacy.js), li.is-open after a short pause.
   The sub-menu unfolds from its item and its entries cascade in. ---------- */
.dropdown ul ul {
	opacity: 0;
	transform: translateY(-6px);
	clip-path: inset(0 -30px 100% -30px);   /* folded up; the sides leave room for the shadow */
	transition: opacity .15s ease, transform .15s ease, clip-path .15s ease, visibility 0s linear .15s;
}
.dropdown:not(.has-intent) ul li:hover > ul,
.dropdown ul li.is-open > ul,
.dropdown ul li:has(:focus-visible) > ul {
	visibility: visible;
	opacity: 1;
	transform: none;
	clip-path: inset(0 -30px -40px -30px);
	transition: opacity .2s ease, transform .3s cubic-bezier(.2, .7, .2, 1), clip-path .35s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
.dropdown ul#menu-menuprincipal ul > li { opacity: 0; transform: translateY(-6px); transition: opacity .12s ease, transform .12s ease; }
.dropdown:not(.has-intent) ul#menu-menuprincipal li:hover > ul > li,
.dropdown ul#menu-menuprincipal li.is-open > ul > li,
.dropdown ul#menu-menuprincipal li:has(:focus-visible) > ul > li { opacity: 1; transform: none; transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(2) { transition-delay: 30ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(3) { transition-delay: 60ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(4) { transition-delay: 90ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(5) { transition-delay: 120ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(6) { transition-delay: 150ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(7) { transition-delay: 180ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(8) { transition-delay: 210ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(9) { transition-delay: 240ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(10) { transition-delay: 270ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(11) { transition-delay: 300ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(12) { transition-delay: 330ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(13) { transition-delay: 360ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(14) { transition-delay: 390ms; }
.dropdown ul#menu-menuprincipal li.is-open > ul > li:nth-child(15) { transition-delay: 420ms; }
.dropdown ul li.is-open,
.dropdown ul li:has(:focus-visible) {
	position: relative;
	z-index: 599;
}
.sub-toggle { display: none; }

/* phones: modern.css puts the menu in a column and sub-menus in the flow; the ▾ button opens them */
@media (max-width: 640px) {
	#menu > ul#menu-menuprincipal { background: none; }
	.dropdown ul#menu-menuprincipal li { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .08); }
	.dropdown ul#menu-menuprincipal > li:hover { background: none; box-shadow: none; }
	#menu.dropdown ul#menu-menuprincipal ul { float: none; width: auto; min-width: 0; border-radius: 0; box-shadow: none; background: rgba(0, 0, 0, .25); }
	.dropdown ul#menu-menuprincipal ul li { white-space: normal; }
	.dropdown ul li ul { display: none; }
	.dropdown ul li.is-open > ul,
	.dropdown:not(.has-intent) ul li:hover > ul { display: block; clip-path: none; animation: menu-unfold .3s cubic-bezier(.2, .7, .2, 1) both; }
	.dropdown ul#menu-menuprincipal ul > li { transition: none; }
	.dropdown ul#menu-menuprincipal li.menu-item-has-children > a::after { display: none; }
	.sub-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 48px;
		height: 36px;
		border: 0;
		border-left: 1px solid rgba(255, 255, 255, .08);
		background: transparent;
		color: #eee;
		font-size: 16px;
		cursor: pointer;
	}
	.sub-toggle::before { content: "\25BE"; display: inline-block; transition: transform .2s ease; }
	li.is-open > .sub-toggle::before { transform: rotate(180deg); }
}

/* arrows on items with a sub-menu: CSS chevrons (were images/downh.png and images/right.png) */
.dropdown ul li.menu-item-has-children > a::after,
.dropdown ul li.page_item_has_children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 2px 0 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: .75;
	vertical-align: middle;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .2s ease;
}
.dropdown ul#menu-menuprincipal > li.is-open > a::after { transform: translateY(0) rotate(-135deg); }
.dropdown ul ul li.menu-item-has-children > a::after,
.dropdown ul ul li.page_item_has_children > a::after {
	position: absolute;
	right: 14px;
	top: 50%;
	margin: -3px 0 0;
	transform: rotate(-45deg);
}

/* ---------- sidebar categories: sub-categories folded behind a button (js/legacy.js); without the script all stay open ---------- */
#sidebar .widget_categories li.has-children { position: relative; }
#sidebar .widget_categories li.is-folded > ul.children { display: none; }
#sidebar .widget_categories .cat-toggle {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 30px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #5d5555;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
#sidebar .widget_categories .cat-toggle:hover,
#sidebar .widget_categories .cat-toggle:focus-visible { background: #fff; color: #1d386a; }
#sidebar .widget_categories .cat-toggle::before {   /* chevron, pointing down when open */
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
}
#sidebar .widget_categories li.is-folded > .cat-toggle::before { transform: rotate(-45deg); }

/* ---------- Category Posts widget: image ratio its jQuery snippet used to set (the snippet skips itself without jQuery) ---------- */
#sidebar .cat-post-item .cat-post-crop img[data-cat-posts-width] { height: auto; }

@media (prefers-reduced-motion: reduce) {
	#panes > div, #panes > div.is-current, .dropdown ul ul, .dropdown ul li.is-open > ul, .dropdown ul li:has(:focus-visible) > ul, .dropdown ul#menu-menuprincipal > li, .sub-toggle::before, .cat-toggle::before { transition: none; animation: none; transform: none; }
}