/* 
Theme Name: Destino
Theme URI: https://eclosione.com/
Description: Custom theme for Destino.
Author: Eclosione
Author URI: https://eclosione.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: destino-by-eclosione
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* Add your custom styles here */
/* CSS Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h5, p, figure, blockquote, dl, dd {
	margin: 0;
	padding: 0;
}
p:not(:last-of-type) {
	margin-bottom: 20px;
}
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}
html:focus-within {
	scroll-behavior: smooth;
}
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
input, button, textarea, select {
	font: inherit;
}
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
/* Header */
.elementor-99 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 10;
}
#lateral {
	z-index: 20;
}
#side-menu {
	z-index: 0;
}
#side-menu.visible {
	transform: translateX(0);
	z-index: 18;
}
#side-menu {
	position: fixed;
	top: 0;
	left: 0;
	transition: transform 0.4s ease-out;
	transform: translateX(-100%);
	z-index: 10;
	will-change: transform;
}
#menu-button {
	cursor: pointer;
}
#menu-button rect {
	transition: all 0.3s;
	transform-box: fill-box;
	transform-origin: center; 
}
#menu-button:hover rect {
	fill: #DBDBDB;
}
#menu-button.open #rect1 {
	transform: translateY(11px) rotate(45deg);
}
#menu-button.open #rect2 {
	opacity: 0;
}
#menu-button.open #rect3 {
	transform: translateY(-11px) rotate(-45deg);
}
.admin-bar .elementor-99,
.admin-bar #side-menu {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .elementor-99 {
		top: 46px;
	}
	.admin-bar #side-menu {
		top: 46px;
		height: calc(100vh - 46px);
	}
}
@media (min-width: 768px) {
	#lateral h2 {
		transform: rotate(-90deg);
	}
	.destino  {
		display: flex;
		justify-content: center;
	}
	#lateral .destino img {
		transform: rotate(-90deg);
		width: 200px;
		max-width: 200px;
	}
	.elementor-99 {
		width: 120px;
		height: 100vh;
	}
	.admin-bar .elementor-99 {
		height: calc(100vh - 32px);
	}
	.elementor-99 > div,
	.elementor-99 > div > div {
		height: 100%;
	}
}
/* Layout */
body {
	background-color: #fafafa;
}
html, body, #page {
  margin: 0;
  padding: 0;
  height: 100%;
}
#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main {
	flex: 1;
}
body.pjax-loading #content {
    opacity: 0.3;
    transition: opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
	background-color: #fafafa;
}
body.pjax-loading::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 99999;
}
@media (max-width: 767px) {
	body:has(.site-player.is-active) #content {
		padding-bottom: 120px;
	}
}
@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (max-width: 1420px) and (min-width: 768px) {
	#content,
	.elementor-419,
	.elementor-378 {
		margin-left: 120px;
	}
}
/* Archive */
.elementor-page-76 h1 {
	text-transform: uppercase;
	border-bottom: 1px solid #5C5C5C;
	color: #5C5C5C;
	padding-bottom: 10px;
	margin-bottom: 20px;
	font-family: "Apercu Mono Pro", sans-serif;
	font-weight: 300;
}
#music-grid-results,
#music-filters-form,
#fixed-bottom-player {
	font-family: "Apercu Mono Pro", sans-serif;
	font-weight: 300;
}
/* --- Music Grid Adjustments --- */
.music-grid-container.music-grid-player-source {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive columns */
    gap: 25px 20px; /* Row gap, Column gap */
    margin-bottom: 30px; /* Space below grid */
}

.music-grid-item {
	position: relative;
	cursor: pointer;
	border-radius: 10px;
	transition: background-color 0.2s ease;
}
.music-grid-item:hover {
    background-color: #f5f5f5; /* Slight hover effect */
}

.music-grid-item.is-playing {
     background-color: #e8f4ff; /* Highlight playing track */
}


.music-item-inner {
    display: flex;
    align-items: center; /* Vertically align image and text */
    gap: 15px; /* Space between image and text */
}

.music-item-image-wrapper {
    flex: 0 0 100px;
	height: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background-color: #f0f0f0;
}

.music-item-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Scale image nicely */
}
.music-item-image.placeholder {
    /* Style placeholder appearance */
    background-color: #ddd; /* Example */
}


.music-item-play-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Semi-transparent overlay */
    border: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease;
    border-radius: 10px; /* Match wrapper */
    padding: 0;
}
.music-item-image-wrapper:hover .music-item-play-button,
.music-grid-item.is-playing .music-item-play-button { /* Show always if playing */
    opacity: 1;
}
.music-item-play-button svg {
    width: 30px;
    height: 30px;
}

/* Text details styling */
.music-item-details {
    flex: 1; /* Take remaining space */
    min-width: 0; /* Prevent text overflow issues */
}


.music-item-details .music-item-release-date {
    font-size: 12px;
    color:  #5C5C5C;
    margin: 0 0 5px 0;
}
.music-item-details .music-item-title {
	font-size: 20px;
	font-weight: 300;
	margin: 0;
	color: #5C5C5C;
	line-height: 1.1em;
	font-family: "Denton", sans-serif;
}
.music-item-details .music-item-artist {
    font-size: 14px;
    color: #5C5C5C;
    margin: 0 0 5px 0;
}
.music-item-details .music-item-genres {
    font-size: 12px;
    color: #5C5C5C;
    margin: 0;
	font-style: italic;
}


/* --- Fixed Bottom Player Styling --- */
.site-player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transform: translateY(100%); /* Initially hidden below screen */
    transition: transform 0.3s ease-in-out;
    box-sizing: border-box;
}
.site-player.is-active {
    transform: translateY(0); /* Slide into view */
}
.player-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
	background-color: #fafafa;
    border: 1px solid #e0e0e0;
	border-bottom: 0;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    padding: 10px 40px 10px 20px;
	position: relative;
}

.player-close-button {
    position: absolute; /* Position relative to .site-player */
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 5px;
}
.player-close-button:hover {
    color: #333;
}

.player-track-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 1; /* Allow shrinking */
    min-width: 0; /* Prevent overflow */
}

.player-track-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    background-color: #eee; /* Placeholder bg */
}

.player-text {
    display: flex;
    flex-direction: column; /* Stack artist/title/date */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ... for overflow */
    font-size: 0.9em;
    line-height: 1.3;
}
.player-artist {
    font-size: 0.7em;
    color: #666;
}
.player-title {
	font-family: "Denton", sans-serif;
    font-weight: bold;
    color: #222;
}
.player-release-date {
     font-size: 0.8em;
     color: #888;
}


.player-controls {
    flex-grow: 1; /* Take up available space */
    margin-left: 20px; /* Space between info and controls */
    min-width: 200px; /* Ensure controls have minimum space */
}

/* Style the default WP/Browser audio player slightly */
.player-controls audio {
    display: block; /* Take full width */
    height: 40px; /* Match image height */
    max-width: 100%;
}

/* Responsive: Stack player elements on small screens */
@media (max-width: 600px) {
    .player-content {
        flex-direction: column;
        align-items: flex-start; /* Align items left */
        gap: 8px;
    }
    .player-track-info {
        width: 100%; /* Take full width */
        padding-right: 30px; /* Make space for close button */
    }
     .player-text {
       white-space: normal; /* Allow wrapping on mobile */
    }
    .player-controls {
        width: 100%;
        margin-left: 0;
         min-width: unset;
    }
    .player-close-button {
       top: 12px; /* Adjust position */
    }
}


/* --- Grid Responsive Adjustments (Example) --- */
@media (max-width: 991px) { /* Tablet */
    .music-grid-container.music-grid-player-source {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px 15px;
    }
}

@media (max-width: 600px) { /* Mobile */
     .music-grid-container.music-grid-player-source {
        grid-template-columns: 1fr; /* Single column */
        gap: 15px;
    }
    .music-item-image-wrapper {
        flex: 0 0 60px; /* Smaller image */
        height: 60px;
    }
    .music-item-play-button svg {
        width: 24px; height: 24px; /* Smaller icon */
    }
     .music-item-details {
       /* Adjust text sizes if needed */
    }
}

/* --- Music Filters --- */
.music-grid-filters-container {
    margin-bottom: 30px;
}
.music-filters-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
	padding: 15px;
	background-color: #f9f9f9;
	border-radius: 3px;
	border: 1px solid #eee;
	font-family: "Apercu Mono Pro", sans-serif;
	font-weight: 300;
}
.filter-item {
	flex: 1; 
}
.filter-item label {
    font-size: 0.85em;
    margin-bottom: 4px;
    color: #555;
    font-weight: 600;
}
.filter-item select {
    min-width: 150px;
    padding: 8px 30px 8px 10px;
    border: 1px solid #ddd;
	border-radius: 3px;
    background-color: #fff;
	width: 100%;
	color: #000;
	font-size: 16px;
    -webkit-appearance: none; /* For Safari/Chrome */
    -moz-appearance: none;    /* For Firefox */
    appearance: none;         /* Standard */
	/* --- Custom Arrow (Example using SVG background) --- */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center; /* Adjust position as needed */
    background-size: 12px 12px; /* Adjust size as needed */
}
.filter-item select option {
    color: #000;
    background-color: #fff;
}
.filter-spinner {
	flex: 0;
	width: 0;
	margin-left: -15px;
}
.filter-spinner::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 99999;
}
/* Responsive Filters */
@media (max-width: 767px) {
    .music-filters-form {
        flex-direction: column; /* Stack filters vertically */
        align-items: stretch; /* Make items full width */
    }
     .filter-spinner {
        margin-left: 0;
        margin-top: 10px;
        text-align: center;
    }
}


/* Style for dimmed results during loading */
#music-grid-results {
    transition: opacity 0.3s ease-in-out;
}

.music-grid-no-results,
.music-grid-error {
    padding: 20px;
    text-align: center;
    color: #777;
    background-color: #f9f9f9;
    border: 1px dashed #ddd;
    border-radius: 4px;
}

/* --- Artist Single Page --- */
.artist-hero-section {
	height: 500px;
	background-size: cover;
	background-position: center center;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}
.artist-hero-container {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
}
.artist-hero-title {
	font-family: "Denton", sans-serif;
	display: inline-block;
	margin: 0 0 -1px 0;
	padding: 10px 20px;
	color: #ffffff;
	background-color: #bbbeae;
	font-size: 50px;
	line-height: 1em;
	letter-spacing: 3px;
}
@media (max-width: 767px) {
	.artist-hero-section {
		height: 300px;
	}
	.artist-hero-title {
		font-size: 24px;
	}
}

/* --- Posts Single Page --- */
.post-hero-section {
	height: 500px;
	background-size: cover;
	background-position: center center;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}
.post-hero-container {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
}
.post-hero-title {
	font-family: "Denton", sans-serif;
	display: inline-block;
	margin: 0 0 -1px 0;
	padding: 10px 20px;
	color: #ffffff;
	background-color: #bbbeae;
	font-size: 50px;
	line-height: 1em;
	letter-spacing: 3px;
}
h3.listen-now {
	font-family: "Apercu Mono Pro", Sans-serif;
	font-size: 18px;
	font-weight: 400;
	border-bottom: 1px solid #000;
	padding: 10px 0;
	margin-bottom: 20px;
}
@media (max-width: 767px) {
	.post-hero-section {
		height: 300px;
	}
	.post-hero-title {
		font-size: 24px;
	}
}
/* --- Posts Flexbox Styles --- */
.posts-flexbox-container {
	width: 100%;
	overflow-x: hidden;
	position: relative;
}
.posts-flexbox-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	position: relative;
	will-change: transform;
	gap: 100px;
}
.posts-flexbox-item {
	width: 280px;
    flex-shrink: 0;
}
.posts-flexbox-link {
	color: inherit;
	transition:	opacity 0.2s ease;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
.posts-flexbox-link:hover {
  opacity: 0.7;
}
.posts-flexbox-image-wrapper {
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
	border-radius: 20px;
	aspect-ratio: 1 / 1;
}
.posts-flexbox-image {
	display: block;
	width: 100%;
	height: auto;
    object-fit: cover;
}
.posts-flexbox-title {
	font-size: 24px;
	margin: 0 auto;
	font-weight: 300;
	line-height: 1em;
	padding: 10px 0;
	border-bottom: 1px solid #5C5C5C;
	display: inline-block;
	text-align: center;
	font-family: "Denton", sans-serif;
}
.estrella {
    will-change: transform;
}
@media (max-width: 767px) {
	.posts-flexbox-track {
		gap: 40px;
	}
	.posts-flexbox-item {
		width: 200px;
	}
	.posts-flexbox-title {
		font-size: 20px;
	}
}

/* Posts Archive Grid Styles */

.posts-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 50px;
    margin-bottom: 20px;
}
.archive-grid-item {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.archive-grid-image-link {
    display: block;
    line-height: 0;
	aspect-ratio: 1 / 1;
	margin-bottom: 20px;
}
.archive-grid-item img {
    width: 100%;
	height: 100%;
    object-fit: cover;
    display: block;
	border-radius: 20px;
	background-color: #f0f0f0;
}
.archive-grid-placeholder-image {
    width: 100%;
    height: 300px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 16px;
}
.archive-grid-title {
	font-size: 24px;
	margin: auto auto 0 auto;
	font-weight: 300;
	line-height: 1em;
	padding: 10px 0;
	border-bottom: 1px solid #5C5C5C;
	display: inline-block;
	text-align: center;
	font-family: "Denton", sans-serif;
}
.archive-grid-title a {
	color: #000;
    text-decoration: none;
}
.posts-archive-load-more-wrapper {
    text-align: center;
    margin-top: 20px;
}
#posts-archive-load-more {
    padding: 10px 20px;
    background-color: #BBBEAE;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease;
	font-family: "Denton", sans-serif;
}
#posts-archive-load-more:hover {
    background-color: #000;
}
#posts-archive-load-more:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
.posts-archive-filters {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 3px;
    border: 1px solid #eee;
	font-family: "Apercu Mono Pro", sans-serif;
	font-weight: 300;
}
.posts-archive-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}
.posts-archive-filter-form .filter-item {
    flex-grow: 1;
}
.posts-archive-filter-form label.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.posts-archive-filter-form select {
    padding: 10px 30px 10px 10px;
    border: 1px solid #ddd;
	border-radius: 3px;
    background-color: #fff;
	width: 100%;
	color: #000;
	font-size: 16px;
    -webkit-appearance: none; /* For Safari/Chrome */
    -moz-appearance: none;    /* For Firefox */
    appearance: none;         /* Standard */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
}
.posts-archive-filter-form input[type="search"] {
    min-width: 200px;
	width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 16px;
}
.posts-archive-filter-form .search-filter {
    display: flex;
    flex-basis: 300px;
}
.posts-archive-grid .posts-archive-loading-message,
.posts-archive-grid .no-posts-found,
.posts-archive-grid .no-posts-found-initial {
    grid-column: 1 / -1; 
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #555;
}
@media (max-width: 767px) {
    .posts-archive-filter-form {
        flex-direction: column;
        align-items: stretch;
    }
    .posts-archive-filter-form .filter-item {
        width: 100%;
        flex-basis: auto;
    }
}

/* --- Library Posters Grid --- */

.library-posters-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 50px;
    margin-bottom: 2rem;
}
.library-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
}
.library-grid-item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.library-item-image-wrapper {
    line-height: 0;
}
.library-grid-item .library-item-poster {
    width: 100%;
    height: auto;
	border-radius: 10px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background-color: #f0f0f0;
}
.library-item-content {
    display: flex;
    flex-direction: column;
	gap: 10px;
    flex-grow: 1;
	margin-top: 40px;
}
.library-item-title {
    flex-grow: 1;
	font-size: 30px;
	font-family: "Apercu Mono Pro", sans-serif;
	text-transform: uppercase;
	font-weight: 300;
	line-height: 1em;
	display: inline-block;
}
.library-item-download-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
	color: #bbbeae;
	font-size: 30px;
	font-weight: 300;
	text-decoration: underline;
	font-family: "Apercu Mono Pro", sans-serif;
	transition: opacity 0.2s ease;
	align-self: flex-start;
}
.library-item-download-link:hover {
    opacity: 0.7;
}
.library-item-download-link svg {
    width: 20px;
    height: 20px;
	margin-top: 5px;
}
.library-posters-load-more-wrapper {
    text-align: center;
    padding: 2rem 0;
}
#library-posters-load-more {
	padding: 10px 20px;
	background-color: #BBBEAE;
	color: #fff;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	font-size: 15px;
	transition: background-color 0.3s ease;
	font-family: "Denton", sans-serif;
}
#library-posters-load-more:hover:not(:disabled) {
    background-color: #000;
}
#library-posters-load-more:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
}
@media (max-width: 767px) {
    .library-item-title, .library-item-download-link {
		font-size: 20px;
	}
}