/*
 * HTL Villach - accordion.
 *
 * Gives Elementor's own accordion widget ("Accordion", nested-accordion) the
 * look and behaviour of the Ashley theme accordion (ashley-accordion), so
 * editors can drag widgets into an accordion item and still get the house style.
 *
 * Applies to EVERY Elementor accordion on the site. The style controls of the
 * widget (typography, colours, borders, icons) are deliberately overridden:
 * all accordions look the same, whatever was set in the editor. Only the
 * content settings still matter (titles, title HTML tag, default state,
 * "max items expanded", animation duration).
 *
 * Depends on tokens that are defined elsewhere:
 *   htlv-colors.css             --htlv-abteilung (department colour from the URL)
 *   Customizer > Additional CSS --htlv-ink, --htlv-accent, --htlv-sweep-time,
 *                               --htlv-sweep-ease, --htlv-label-size,
 *                               --htlv-ico-arrow / -mail / -phone / -insta
 * Fallback values are given where a missing token would break the layout.
 *
 * Elementor loads its accordion stylesheet after this file, so every selector
 * starts with "body .elementor-widget-n-accordion .e-n-accordion" to win on
 * specificity instead of load order (!important only where noted).
 *
 * Markup (Elementor 4.2):
 *   .e-n-accordion
 *     details.e-n-accordion-item[open]
 *       summary.e-n-accordion-item-title
 *         span.e-n-accordion-item-title-header > .e-n-accordion-item-title-text
 *         span.e-n-accordion-item-title-icon > span.e-opened / span.e-closed
 *       div.e-con (role=region)   <- the item's content container with widgets
 *
 * Contents
 *   1. Item: divider line and hover sweep
 *   2. Title row
 *   3. Plus/minus symbol
 *   4. Content container
 *   5. Text and links inside the content
 *   6. Small screens
 */

/* ---------- 1. Item: divider line and hover sweep ---------- */

/*
 * Same as .mil-accordion-group: grey hairline at the bottom, 30 px to the
 * next item. On hover a line in the department colour runs over the hairline
 * from left to right (background on border-box, so it covers the border).
 */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item {
	margin: 0 0 30px;
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	background-image: linear-gradient(var(--htlv-abteilung, var(--htlv-ink, #1A1814)), var(--htlv-abteilung, var(--htlv-ink, #1A1814)));
	background-repeat: no-repeat;
	background-origin: border-box;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size var(--htlv-sweep-time, .8s) var(--htlv-sweep-ease, cubic-bezier(.65, 0, .35, 1));
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item:hover {
	background-size: 100% 1px;
}

/* ---------- 2. Title row ---------- */

/*
 * Same as .mil-accordion-menu / .mil-accordion-head: title left, symbol right,
 * no padding at the top, 30 px at the bottom (on desktop the theme has none at
 * the top either), small uppercase label.
 */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	margin: 0;
	padding: 0 0 30px;
	border: 0;
	border-radius: 0;
	background: none;
	color: #000;
	cursor: pointer;
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title:focus-visible {
	outline: 2px solid var(--htlv-ink, #1A1814);
	outline-offset: 4px;
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title-header {
	max-width: calc(100% - 40px);
}

/*
 * The title tag can be set to h1-h6 in the widget: theme heading styles must not apply.
 * 12 px is what the theme accordion really renders: the Customizer rule
 * .mil-accordion-head { font-size: var(--htlv-label-size) } loses against the
 * more specific theme selector, so --htlv-label-size (14 px) is not used here.
 */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title-text {
	margin: 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 25.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #000;
}

/* ---------- 3. Plus/minus symbol ---------- */

/*
 * Same as .mil-symbol: 40 px grey circle with the characters "+" and "-" in
 * the page font (Outfit, 16 px). Weight 300 instead of the theme's 500: at
 * 500 the 16 px sign looked clearly bolder than the 12 px title next to it,
 * at 300 the strokes match the title. Elementor's SVG icons are hidden; the characters come from
 * ::before/::after so they can cross-fade like the theme's GSAP animation
 * (0.4 s). The "-" is lifted by 2 px, as in the theme (.mil-minus).
 *
 * Hover: a dark fill sweeps through the circle from the left, the "+"
 * turns 90 degrees and becomes yellow. Open: circle #bebebe, "-" instead
 * of "+".
 *
 * Stroke weight: on macOS the browser draws normal text with font smoothing,
 * which makes strokes slightly bolder. A turned character is drawn without it
 * (grayscale antialiasing), so the "+" looked bolder at rest than on hover.
 * Both characters are therefore always drawn "antialiased": the resting "+"
 * now has the same, thinner stroke as the turned one.
 */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title-icon {
	order: 2;
	position: relative;
	flex: 0 0 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-family: inherit;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
	color: #000;
	background-color: rgb(229, 229, 229);
	background-image: linear-gradient(var(--htlv-ink, #1A1814), var(--htlv-ink, #1A1814));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	transition:
		background-size var(--htlv-sweep-time, .8s) var(--htlv-sweep-ease, cubic-bezier(.65, 0, .35, 1)),
		background-color .4s ease,
		color calc(var(--htlv-sweep-time, .8s) * .6) var(--htlv-sweep-ease, cubic-bezier(.65, 0, .35, 1));
}

/*
 * !important on purpose: Elementor shows its icons with
 * ".e-n-accordion-item[open] > .e-n-accordion-item-title ... .e-opened { display: flex }",
 * a selector stronger than anything sensible here.
 */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title-icon > span {
	display: none !important;
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title-icon::before,
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title-icon::after {
	position: absolute;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: opacity .4s linear, transform var(--htlv-sweep-time, .8s) var(--htlv-sweep-ease, cubic-bezier(.65, 0, .35, 1));
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title-icon::before {
	content: "+";
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title-icon::after {
	content: "-";
	opacity: 0;
	transform: translateY(-2px);
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon,
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title:focus-visible .e-n-accordion-item-title-icon {
	background-size: 100% 100%;
	color: var(--htlv-accent, #FFE843);
	transition-delay: 0s, 0s, calc(var(--htlv-sweep-time, .8s) * .4);
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon::before,
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title:focus-visible .e-n-accordion-item-title-icon::before {
	transform: rotate(90deg);
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon {
	background-color: rgb(190, 190, 190);
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon::before {
	opacity: 0;
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon::after {
	opacity: 1;
}

/*
 * Ashley theme accordion: same weight and stroke rendering as above. Its
 * characters keep the theme markup; the turn on hover comes from the
 * Customizer.
 */
body .mil-accordion-group .mil-accordion-menu .mil-symbol .mil-plus,
body .mil-accordion-group .mil-accordion-menu .mil-symbol .mil-minus {
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---------- 4. Content container ---------- */

/*
 * Elementor draws a border and 10 px padding around the content container.
 * The theme has neither: the text starts right below the title and ends
 * 30 px above the divider line. Widgets inside are 30 px apart, like
 * paragraphs in the theme accordion.
 */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con {
	--gap: 30px;
	--row-gap: 30px;
	--column-gap: 30px;
	gap: 30px;
	margin: 0;
	padding: 0 0 30px;
	border: 0;
	border-radius: 0;
	background: none;
}

/* ---------- 5. Text and links inside the content ---------- */

/*
 * Text editor widgets would otherwise get the Elementor kit typography
 * (Roboto). Theme values: 17 px, weight 300, 75 % black, line height 1.6.
 */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor {
	font-family: inherit;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(0, 0, 0, .75);
}

/* The note of the weekly hours graphic ([wochenstunden]) keeps its own margin. */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor :is(p, ul, ol, h1, h2, h3, h4, h5, h6):not(.htlv-hours__note) {
	margin: 0 0 30px;
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor > :last-child,
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor .elementor-widget-container > :last-child {
	margin-bottom: 0;
}

/*
 * Weekly hours graphic as the last element: no extra space below, so the
 * divider line is 30 px below the note, as in the theme accordion.
 */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor .htlv-hours:last-child {
	margin-bottom: 0;
}

/*
 * In the theme accordion the 6 px bottom margin of the last link disappears
 * into the paragraph's 30 px margin. Here the last paragraph has no margin
 * (the container's padding takes over), so the link margin has to go as well.
 */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor :last-child > a:last-child {
	margin-bottom: 0;
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor :is(b, strong) {
	font-weight: 500;
}

/*
 * Links: one per line with an arrow in front, a yellow underline that grows
 * on hover and the arrow nudging to the right. Icon and badge depend on the
 * target, same rules as in the theme accordion (Customizer).
 */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor p a + br {
	display: none;
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor a {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 10px;
	margin: 6px 0;
	color: var(--htlv-ink, #1A1814);
	font-weight: 400;
	text-decoration: none;
	background: linear-gradient(var(--htlv-accent, #FFE843), var(--htlv-accent, #FFE843)) 28px 100% / 0 2px no-repeat;
	transition: background-size .35s;
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor a:hover {
	background-size: calc(100% - 28px) 2px;
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor a::before {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	background: var(--htlv-ink, #1A1814);
	-webkit-mask: var(--htlv-ico-arrow) center / contain no-repeat;
	        mask: var(--htlv-ico-arrow) center / contain no-repeat;
	transition: transform .3s;
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor a:hover::before {
	transform: translateX(4px);
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor a[href^="mailto:"]::before {
	-webkit-mask-image: var(--htlv-ico-mail);
	        mask-image: var(--htlv-ico-mail);
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor a[href^="tel:"]::before {
	-webkit-mask-image: var(--htlv-ico-phone);
	        mask-image: var(--htlv-ico-phone);
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor a[href*="instagram.com"]::before {
	-webkit-mask-image: var(--htlv-ico-insta);
	        mask-image: var(--htlv-ico-insta);
}

/* Mail, phone and Instagram icons stay in place on hover, only the arrow moves. */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor :is(a[href^="mailto:"], a[href^="tel:"], a[href*="instagram.com"]):hover::before {
	transform: none;
}

/* File badge behind links to documents. */
body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor :is(a[href$=".pdf"], a[href$=".docx"])::after {
	content: "PDF";
	font: 600 10px / 1 sans-serif;
	letter-spacing: .05em;
	padding: 4px 5px;
	border: 1px solid;
	border-radius: 3px;
	opacity: .7;
}

body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > .e-con .elementor-widget-text-editor a[href$=".docx"]::after {
	content: "DOCX";
}

/* ---------- 6. Small screens ---------- */

/* The theme adds 30 px above the title up to 768 px (left/right stay 0). */
@media screen and (max-width: 768px) {
	body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title {
		padding-top: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item,
	body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title-icon,
	body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title-icon::before,
	body .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item-title-icon::after {
		transition: none;
	}
}