/*
	Theme Name: SwissDanny
	Theme URI: http://localhost/swissdanny/
	Description: Child theme of Hello Elementor for the SwissDanny site. Holds site-specific template overrides, CSS and PHP so the parent theme stays vendor code and survives updates.
	Author: SwissDanny
	Template: hello-elementor
	Version: 1.0.0
	Requires at least: 6.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: swissdanny
*/

/* ---------------------------------------------------------------------------
   Site CSS.

   Elementor's generated per-post CSS out-ranks anything declared here, so a
   rule that merely restates an Elementor setting will lose — and the editor
   will then show numbers that do not match the render. Prefer Elementor's own
   settings for content and layout; keep this file for the things a setting
   genuinely cannot express.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   The optional High German translation, rendered by [sd_uebersetzig].

   This is here rather than in an Elementor setting because the element is a
   native <details> produced by a shortcode — there is no widget whose controls
   reach inside it. Nothing below restates a setting, so nothing here is in a
   fight with Elementor's generated CSS.
   --------------------------------------------------------------------------- */

.sd-uebersetzig {
	border: 1px solid rgba(2, 21, 42, 0.14);
	border-radius: 14px;
	background: var(--e-global-color-card, #f9f9f9);
	padding: 4px 20px;
}

.sd-uebersetzig__summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 0;
	font-family: 'Inter', Arial, sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--e-global-color-primary, #02152a);
	display: flex;
	align-items: center;
	gap: 12px;
}

/* The default marker is a filled triangle in one browser and an arrow in the
   next, so it is replaced with one drawn here and rotated on open. */
.sd-uebersetzig__summary::-webkit-details-marker { display: none; }

.sd-uebersetzig__summary::before {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg) translate(-1px, -1px);
	transition: transform 0.15s ease;
}

.sd-uebersetzig[open] .sd-uebersetzig__summary::before {
	transform: rotate(45deg) translate(-2px, -2px);
}

.sd-uebersetzig__body {
	padding: 0 0 16px;
	font-family: 'Inter', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.8em;
	color: var(--e-global-color-text, #55636f);
}

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

/* ---------------------------------------------------------------------------
   Song-card hover (§28: "slight translate upward; subtle shadow; border becomes
   slightly lighter/red").

   Here rather than in Elementor settings because none of the three is a value
   the container's own controls carry — Elementor writes the resting state, this
   writes the change on hover, so the two are not in a fight.

   The border change is drawn as an INSET shadow rather than a border-color.
   A container's border compiles to a custom property that Elementor sets at
   (0,3,0); a `:hover` rule here would be a specificity argument that this file
   loses. An inset shadow paints the same 1px line and nothing else claims it.
   --------------------------------------------------------------------------- */

.sd-lyric-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sd-lyric-card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 12px 28px rgba(0, 0, 0, 0.38),
		inset 0 0 0 1px var(--e-global-color-accent, #d1061a);
}

@media (prefers-reduced-motion: reduce) {
	.sd-lyric-card { transition: none; }
	.sd-lyric-card:hover { transform: none; }
}

/* The thumbnail fills the card's full width and is clipped by the card's own
   radius, which is why the card carries `overflow: hidden` and the image
   carries no radius of its own. */
.sd-lyric-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   Video Playlist sidebar.

   Everything below is a property the widget's own controls DO NOT expose, so
   none of it is in a specificity argument with Elementor's generated CSS — the
   colours, typography, separators and icon sizes all stay settings Daniel can
   change. What is fixed here is the plugin stylesheet's own hardcoded values,
   which assume a light playlist:

     .e-tab-title:hover { background-color: #f1f2f3 }   near-white flash on dark
     .e-tabs-header    { border-bottom: 1px solid #d5d8dc }
     .e-tab-thumbnail img { object-fit: fill }          distorts every thumbnail
     .e-tab-title-text { white-space: nowrap }          truncates every title
     .e-tabs-items     { max-height: 248px }            clips the list on mobile

   Selectors are compounded with `.elementor-widget-video-playlist` so they are
   one class more specific than the plugin's (0,3,0) rules and win regardless of
   stylesheet order.
   --------------------------------------------------------------------------- */

.elementor-widget-video-playlist.sd-videos__playlist .e-tabs {
	border: 1px solid var(--e-global-color-borderNavy, #294159);
	border-radius: 12px;
	overflow: hidden;
}

/* Header reads as a header: its own rule, not the light default. */
.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-header {
	align-items: center;
	border-bottom: 1px solid var(--e-global-color-borderNavy, #294159);
	padding: 0 20px;
}

/* A row is two lines of title, not one truncated mid-word. The plugin sets
   line-height:55px on the row, which a wrapped title inherits. */
.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items-wrapper .e-tab-title {
	align-items: center;
	box-sizing: border-box;
	height: auto;
	line-height: normal;
	min-height: 72px;
	padding: 12px 20px;
	position: relative;
	transition: background-color 0.15s ease;
}

.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items-wrapper .e-tab-title .e-tab-title-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin: 0 12px;
	overflow: hidden;
	white-space: normal;
}

/* The plugin's hover is a light grey block. Nothing else claims this. */
.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items-wrapper .e-tab-title:hover {
	background-color: rgba(255, 255, 255, 0.04);
}

/* The active row earns a marker the controls have no field for. */
.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items-wrapper .e-tab-title.e-active::before {
	background: var(--e-global-color-accent, #d1061a);
	bottom: 0;
	content: '';
	inset-inline-start: 0;
	position: absolute;
	top: 0;
	width: 3px;
}

/* 16:9 thumbnails, cropped rather than squashed. */
.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items-wrapper .e-tab-title .e-tab-thumbnail,
.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items-wrapper .e-tab-title .e-tab-thumbnail img {
	border-radius: 6px;
	height: 54px;
	width: 96px;
}

.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items-wrapper .e-tab-title .e-tab-thumbnail img {
	object-fit: cover;
}

/* Durations line up when the digits do. */
.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items-wrapper .e-tab-title .e-tab-duration {
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

/* A scrollbar that belongs to this panel rather than to the operating system. */
.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items {
	scrollbar-color: var(--e-global-color-borderNavy, #294159) transparent;
	scrollbar-width: thin;
}

.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items::-webkit-scrollbar {
	width: 8px;
}

.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items::-webkit-scrollbar-thumb {
	background-color: var(--e-global-color-borderNavy, #294159);
	border-radius: 8px;
}

/* Keyboard users get to see where they are. */
.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items-wrapper .e-tab-title:focus-visible {
	outline: 2px solid var(--e-global-color-accent, #d1061a);
	outline-offset: -2px;
}

@media (max-width: 767px) {

	.elementor-widget-video-playlist.sd-videos__playlist .e-tabs-items-wrapper .e-tab-title {
		min-height: 68px;
		padding: 12px 16px;
	}
}