/*---------------------------------------------------------------------------------

	Theme Name: Davis
    Text Domain: davis
	Version: 2.1.2
	Description: Davis is a teeny-tiny WordPress theme that can be used a starter theme or a really lightweight blog theme. It consists of three PHP files and weighs in at just 36 KB, excluding screenshot.png. It features the aside post format, Block Editor support, featured images, and a responsive design. Demo: https://andersnoren.se/themes/davis/
	Tags: blog, one-column, custom-menu, featured-images, post-formats, threaded-comments, translation-ready, block-styles, wide-blocks
	Author: Anders Norén
	Author URI: https://andersnoren.se
	License: GNU General Public License version 2.0
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Theme URI: https://andersnoren.se/themes/davis-wordpress-theme/
	Requires PHP: 5.4
	Tested up to: 6.3
	
	All files, unless otherwise stated, are released under the GNU General Public License
	version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

-----------------------------------------------------------------------------------
*/



.neuton-extralight {
    font-family: "Neuton", serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .neuton-light {
    font-family: "Neuton", serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .neuton-regular {
    font-family: "Neuton", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .neuton-bold {
    font-family: "Neuton", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .neuton-extrabold {
    font-family: "Neuton", serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .neuton-regular-italic {
    font-family: "Neuton", serif;
    font-weight: 400;
    font-style: italic;
  }
  


html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    min-height: 100%; 
}

h1, h2, h3, h4, h5, h6, p, blockquote, address, cite, img, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	font-weight:normal;
	font-style:normal;
	font-size:100%;
	line-height:1;
	text-align:left;
}

h1, h2 {
	font-size: 3vw;
	padding: 0px 25px;
	font-weight: 700;
}
h2 {
	font-size: 1.5vw;
	padding: 5px 25px 50px 25px;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

ol, ul { list-style:none; }

blockquote:before, 
blockquote:after { content:""; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* Screen Reader Text */

.screen-reader-text {
	clip: rect( 1px, 1px, 1px, 1px );
	height: 1px;
	overflow: hidden;
    position: absolute !important;
    width: 1px;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}


/* -------------------------------------------------------------------------------- */
/*	1. Document Setup
/* -------------------------------------------------------------------------------- */

/* NORMALIZE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
	border: none;
    color: #000;
    font-size: 18px;
	background: #121212;
    color: #F1F1F1;
    font-family: "Neuton", serif;
}

body * {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
	box-sizing: border-box; 
    font-family: "Neuton", serif;
}

a {
	text-decoration: none;
}

a,
a:hover {
	color: #000;
}

body a:hover,
body a:focus { 
	text-decoration: underline; 
}

img {
	display: block;
	height: auto;
    max-width: 100%;
}

.flex {
	display: flex;
	gap: 40px;
}

.noGap {
	gap: 0;
}


.clear { clear: both; }

::selection {
	background: #000;
	color: #FFF;
}

input::-webkit-input-placeholder { color: #767676; }
input:-ms-input-placeholder { color: #767676; }
input::-moz-placeholder { color: #767676; }







.mwg_effect030 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 18px;
    line-height: normal;
    letter-spacing: -0.03em;
}
.mwg_effect030 ul {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.mwg_effect030  ul li {
    display: flex;
    gap: 15px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding: 18px 25px;
    cursor: pointer;
}
.mwg_effect030  ul li span:nth-child(1){
    width: 25%;
}
.mwg_effect030  ul li span:nth-child(3){
    text-align: right;
    flex: 1;
    visibility: hidden;
}
.mwg_effect030  ul li:hover span:nth-child(3){
    visibility: visible;
}
.mwg_effect030 .media-container {
    position: absolute;
    width: 24vw;
    height: 24vw;
    right: 16%;
    top: 0;
    border-radius: 2%;
    pointer-events: none;
    overflow: hidden; 
    visibility: hidden;
}
.mwg_effect030 .media-container.on {
    visibility: visible;
}
.mwg_effect030 .media-container div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Hides anything overflowing during the animation */
    transform: translate(0, -100%); /* Starts above the mask */
}
.mwg_effect030 .media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate(0, 90%) /* Starts almost completely below the parent */
}
.mwg_effect030 .medias img { 
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}

/* Modal Styles */
.album-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    overflow-y: auto;
}

.modal-content {
    position: relative;
    padding: 0px;
    background: #121212;
    color: #F1F1F1;
    min-height: 100vh;
    overflow-y: auto;
}

.close-modal {
    position: fixed;
    right: 40px;
    top: -30px;
    font-size: 100px;
    background: none;
    border: none;
    color: #F1F1F1;
    cursor: pointer;
    z-index: 2;
    font-weight: 100;
}


/**/
.artist-image {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}
.artist-section, .album-cover,.album-mockups {
    padding: 120px 80px;
    background: #121212;
}
.artist-section > div {
    width: 50%;
}
h3.artist-name {font-size:2.5vw; font-weight:700; padding-bottom:10px;}
h2.album-title {padding: 0;
    font-size: 2.5vw;
    margin-top: 0px;
    margin-bottom: 10px;}
.artist-bio {
    position: sticky;
    top: 80px;
    font-size: 20px;
    height: fit-content;
}
.artist-bio p {
    line-height: 1.2;
}

/* Custom Audio Player */
.custom-player {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.player-album-art {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.player-album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-progress {
    width: 100%;
    padding: 0 20px;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.progress-current {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    width: 0;
}

.progress-time {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.6);
}

.play-button {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-button svg {
    width: 24px;
    height: 24px;
    fill: #121212;
}

.play-button:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Ajustement de la section des mockups pour qu'elle passe sous la section sticky */
.album-mockups {
    position: relative;
    z-index: 0;
    padding: 40px 80px 0;
}
.album-mockups img {
	border-radius: 10px;
}

.mockup-bottom, .mockup-interior, .livret-mockups {
    width: 100%;
	margin-Top:20px;
}

/* Section des images d'ambiance */
.ambiance-images, .livret-mockups {
    padding: 120px 80px;
    background: #121212;
    position: relative;
}
.livret-mockups {
	padding-top:0;
}

.ambiance-images .slider-container {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.ambiance-images .flex {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    transition: transform 0.5s ease;
    padding: 0 20px;
}

.ambiance-image {
    width: calc((100% - 40px) / 3); /* Calcul exact : largeur totale moins les deux gaps, divisé par 3 */
    flex: 0 0 auto;
}

.ambiance-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

/* Boutons de navigation du slider */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    transition: background-color 0.3s ease;
}

.slider-nav:hover {
	border:1px solid #fff;
}

.slider-prev {
    left: 20px;
}

.slider-next {
    right: 20px;
}

.album-video {display:flex; justify-content:center; align-items:center; padding: 40px 80px;}
.album-video video {max-height:90vh; border-radius:10px;}

/* Styles pour le slider du livret */
.livret-mockups .flex {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    transition: transform 0.5s ease;
}

.livret-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

.livret-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

/* Ajustement des boutons de navigation pour le livret */
.livret-mockups .slider-nav {
    background: transparent;
    color: white;
}

.livret-mockups .slider-container {
    overflow: hidden;
}

.ambiance-images .slider-nav {
    background: transparent;
    color: white;
}

.ambiance-images .slider-container {
    overflow: hidden;
}

.album-team {
    text-align: center;
    padding: 40px 80px 120px;
}

.album-team h4, .album-team .team-list p {
    text-align:center;
}

.album-team h4 {
    font-size:12px;
    text-transform:uppercase;
    margin-bottom:5px;
}