html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

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

/* reset end */

@font-face {
    font-family: 'Montserrat';
    src: url('../../fonts/Montserrat/Montserrat-VariableFont_wght.woff2') format('woff2'),;
    /* font-display: swap; */
}

/* to ensure use in portrait mode on mobile */
/* #warningMessage { 
    display: none; 
    font-family: 'Montserrat', sans-serif;
} */

/* @media only screen and (max-height: 412px) and (orientation:landscape){
    #wrapper { 
        display: none; 
    }

    #warningMessage { 
        display: flex;  */
        /* position: fixed; */
        /* justify-content: center;
        align-items: center;
        font-size: 1rem;
        margin: 26vh;
        background-color: var(--background-color);
        text-align: center;
    }
} */

/* @media only screen and (orientation:portrait){
    #warningMessage { 
        display: none;
    }
} */

:root {
    /* light */
    --background-color: #f8eade;
    --text-color: #280e12;
    --text-shadow-color: #280e12;
    --primary-color: #eccb5f;
    --secondary-color: #f3d4be;
    --accent-color: #75152a;
    --shadow-color: 29deg 21% 57%;
    /* transition variable to graduate the change, starts at 0ms to then be changed to 400ms when slider is pressed. This is to prevent the background from starting at white before going to the default background colour due to the transition being loaded at start*/
    --global-transition: 0ms;
}

body {
    display: flex;
    font-family: 'Montserrat', sans-serif;
    flex-direction: column;
    flex: 1 0 auto;
    color: var(--text-color); 
    background-color: var(--background-color);
    transition: background-color var(--global-transition);
    margin: 5px;
}

h1 {
    font-weight: 500;
    font-size: 2rem;
}

h2 {
    font-weight: 600;
    font-size: 1.5rem;
}

h3, h4 {
    font-weight: 500;
    line-height: 3;
}

b {
    font-weight: 575;
}

p {
    font-size: 1rem;
    line-height: 1.5;
}

i, em {
    font-style: italic;
}

/* preloader */

#content {
    display: none;
}

/* #landscapeBlocker {
    height: 100vh;
    width: 100vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    background-color: #150b04;
} */

#preloaderWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    position: fixed;
    top: 0;
    left: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    /* 200s animation is changed to 2s default when page is ready, to avoid flash of preloader when internet is fast */
    animation: fadeoutandmove 200s ease-in forwards;
}

#preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rotate 1.5s ease-in-out infinite;
    width: 120px;
    height: 120px;
    padding: 15px;
    border-radius: 100px;
    border: solid 2px black;
    background-color: var(--primary-color);
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
  
@keyframes shiftUpDown {
    0% {
        transform: translateX(0%);
    }
    50% {
        transform: translateY(-10%);
    }
}

/* fadeout animation for preloader */
@keyframes fadeoutandmove {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    50% {
        opacity: 0;
        transform: translateX(0);
    }
    51% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 0;
        transform: translateX(-100%);
    }
}

/* font is applied directly to buttons because going through the body tag doesn't seem to work */
button {
    font-family: 'Montserrat', sans-serif;
}

#headlineVoice {
    font-weight: bold;
    /* margin-bottom: -40px; */
    margin-top: 30px;
    text-shadow: 
    0px 0px 0 var(--background-color),  
    0px 0px 0 var(--background-color),
    0px  0px 0 var(--background-color),
    3px  3px 0 var(--background-color);
}

#headlineVoice2 {
    font-size: 3.5rem;
    font-weight: normal;
    font-style: italic;
    margin: 10px;
}

#spotlightLogo {
    width: 50px;
    height: auto;
    cursor: pointer;
}

/* highlight color and skew for 'sophie' */
mark {
    font-size: 2.5rem;
    --mark-color: var(--primary-color);
    --mark-skew: 0.25rem;
    --mark-height: 1rem;
    --mark-overlap: 0.3rem;
    color: var(--text-color);
    /* ensures text color transitions gradually */
    transition: color var(--global-transition);

    margin-inline: calc(var(--mark-overlap) * -1);
    padding-inline: var(--mark-overlap);
    background-color: transparent;
    color: var(--text-color);
    background-image:
        linear-gradient(
            to bottom right,
            transparent 50%,
            var(--primary-color) 50% 100%
        ),
        linear-gradient(
            to right,
            var(--primary-color),
            var(--primary-color)
        ),
        linear-gradient(
            to top left,
            transparent 50%,
            var(--primary-color) 50%
        );
        background-size:
        0.25em 1em,
        calc(100% - 0.25em * 2 + 1px) 1em,
        0.25em 1em;
        background-position:
        left center,
        center,
        right center;
        background-repeat: 
        no-repeat;
  }

/* #actingMasks {
    width: 500px;
    top: -10px;
    left: 50px;
    position: absolute;
    z-index: -1;
} */

#voiceLinkHeading {
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    user-select: none;
}

#barrier {
    background-color: var(--accent-color);
    min-width: 2px;
    height: 300px;
}

#actingContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 5rem;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 50px;
    user-select: none;
}

.actingCredits {
    display: none;
}

/* override so details paragraph is visible on page landing */
#attributes {
    display: block;
}

#actingCreditsContainer {
    /* display: flex; */
    min-width: 500px;
    max-width: 500px;
    min-height: 0px;
    max-height: 500px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* forces all paragraphs to be centered except for the theatre one which has the scroll. Necessary to stop text from being hidden */
.boxCentering {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0px;
    max-width: 500px;
    min-height: 0px;
    max-height: 500px;
}

#actingCreditsContainer::-webkit-scrollbar {
    width: 8px;
}

#actingCreditsContainer::-webkit-scrollbar-thumb {
    background-color: var(--accent-color); /* Color of the scrollbar handle */
    border-radius: 4px; /* Rounded corners */
}

#actingCreditsContainer::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Color of the scrollbar track */
    border-radius: 4px; /* Rounded corners */
}

#actingCategoryContainer {
    display: flex;
    flex-direction: column;
}

#attributesButton {
    background-color: var(--primary-color);
    color: var(--text-shadow-color);
}

.actingCategories {
    color: var(--text-color);
    font-size: 1rem;
    margin: 5px;
    padding: 10px;
    border-radius: 50px;
    cursor: pointer;
    background-color: var(--secondary-color);
    border-style: none;
    user-select: none;
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
}

.actingCategories:focus-visible, .actingCategories:hover {
    outline: 2px solid var(--accent-color);
}

.banner {
    text-align: center;
    padding: 20px;
    background-color: var(--secondary-color);
    border-radius: 50px;
    margin: auto;
    width: fit-content;
    margin-top: 5rem;
    user-select: none;
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
}

#examples {
    display: flex;
    flex-direction: row;
    user-select: none;
}

.halves {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.halfBanner {
    text-align: center;
    background-color: var(--secondary-color);
    border-radius: 50px;
    width: fit-content;
    margin: auto;
    /* padding: 12px; */
    padding-right: 10rem;
    padding-left: 10rem;
    margin-top: 1rem;
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
}

.sides {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    flex-wrap: wrap;
}

.nondragable {
    user-select: none;
    -webkit-user-drag: none;
}

.audio-player {
    width: 225px;
    height: 225px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
    margin: 1rem;
    box-sizing: border-box;
}

.player-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Linear gradient as a fallback */
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    transition: opacity 0.5s ease;
}

.player-background img {
    width: 150%;
    height: 150%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Hide image if it fails to load, showing the gradient */
.player-background img.hide-on-error {
    opacity: 0;
}

.player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.player-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.track-info {
    text-align: left;
}

.track-info h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.track-info p {
    font-size: 16px;
    font-weight: 500;
    margin: 4px 0 0;
    opacity: 0.8;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.trackTitle, .trackArtist {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    color: #f8eade; 
}

.trackArtist {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    color: #f8eade; 
    font-size: x-small;
}

.progress-container {
    width: 100%;
}

.progressBar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    transition: background 0.3s;
}

.progressBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.progressBar::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    border: none;
}

.time-display {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.8;
    margin-top: 5px;
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.control-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.control-btn:hover {
    transform: scale(1.1);
}

.control-btn.playPause {
    background-color: rgba(255, 255, 255, 0.2);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.control-btn.playPause:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.control-btn svg {
    width: 24px;
    height: 24px;
}

.control-btn.playPause svg {
    width: 30px;
    height: 30px;
}

.currentTime, .totalDuration {
    color: #f1f1f1;
}

#logosContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.logo {
    display: inline-block;
    height: 70px;
    margin: 40px;
}

#madeSmallLogo {
    display: inline-block;
    height: 70px;
    margin: 40px;
}

.audiobookLogo {
    display: inline-block;
    height: 150px;
    margin: 40px;
}

.image-gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    /* Add padding to the left to compensate for the universal negative margin --- */
    /* This ensures the first item in any wrapped row aligns correctly, allowing for true centering. */
    padding-left: calc(1rem + 75px);
}

.image-card {
    position: relative;
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 4px solid var(--secondary-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    margin-bottom: 1.5rem;
    margin-left: -75px; /* Pull each card to the left to overlap */
}

/* .image-card-link {
    position: relative;
} */

/* When a card is hovered, lift it up and bring it to the front. */
.image-card:hover, .image-card.is-active {
    transform: translateY(-20px);
    z-index: 10;
}

.external-link-icon {
    position: absolute; 
    z-index: 20; 
    margin-left: -75px;
}

.external-link-icon:hover, .external-link-icon.is-active {
    transform: translateY(-20px);
}

/* Select all subsequent siblings of the hovered card and move them to the right. */
/* This creates space to reveal the full hovered card without affecting the layout flow. */
.image-card:hover ~ .image-card, .image-card.is-active ~ .image-card {
    transform: translateX(75px);
}

.single-audiobook-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.single-image-card { 
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 4px solid var(--secondary-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    margin: 1rem;
}

.single-image-card:hover {
    transform: translateY(-20px);
}

#attributions {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    margin: auto; 
    width: 50%; 
    text-align: center; 
    height: 50vh; 
    padding: 2rem;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--secondary-color);
    border-radius: 50px;
    margin: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    box-shadow:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.14),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.14),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.14),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.14),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.14),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.14),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.14),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.14);
}

footer p {
    max-width: 300px;
    text-align: center;
    margin: 10px;
    font-size: 0.65rem;
}

@media screen and (max-width: 450px) {
    p {
        font-size: .9rem;
    }

    /* forces all paragraphs to be centered except for the scripts one which has the scroll. Necessary to stop text from being hidden */
    /* stops text from being hidden on mobile */
    .boxCentering {
        display: flex;
        align-items: flex-start;
    }
}

@media screen and (min-width: 450px) and (orientation: landscape) {
    #actingCreditsContainer {
        max-height: 400px;
    }
}

/* for small screens */
@media screen and (max-width: 768px) {
    body {
        margin: 5px;
    }

    #actingContainer {
        display: block;
        /* margin: 20px; */
    }

    #actingCategoryContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .actingCategories {
        font-size: 1rem;
    }

    #barrier {
        width: 300px;
        height: 2px;
        position: relative;
        margin-top: 30px;
        margin-bottom: 20px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #actingCreditsContainer {
        min-height: 50vh;
        max-height: 500px;
        min-width: 0px;
        max-width: 400px;
        /* center */
        margin: 0 auto;
    }

    #examples {
        display: flex;
        flex-direction: column;
    }
    
    .halves {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    #logosContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .logo {
        height: 50px;
        margin: 20px;
    }

    #madeSmallLogo {
        height: 40px;
        margin: 40px;
    }

    .audiobookLogo {
        height: 100px;
        margin: 20px;
    }

    .image-card {
        width: 120px;
        height: 120px;
    }

    .single-image-card { 
        width: 200px;
        height: 200px;
    }

    #attributions {
        width: 80%; 
    }
}

/* Light mode styles */
@media (prefers-color-scheme: light) {
    :root {
        --background-color: #f8eade;
        --text-color: #280e12;
        --text-shadow-color: #280e12;
        --primary-color: #eccb5f;
        --secondary-color: #f3d4be;
        --secondary-color-half-opacity: #f3d5becc;
        --accent-color: #75152a;
        --shadow-color: 29deg 21% 57%;
        --global-transition: 400ms;
    }
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #280e12;
        --text-color: #f8eade;
        --text-shadow-color: #280e12;
        --primary-color: #e6bf3d;
        --secondary-color: #150b04;
        --secondary-color-half-opacity: #150b04cc;
        --accent-color: #de4566;
        --shadow-color: 350deg 74% 2%;
        --brightness: 70%;
        --global-transition: 400ms;
    }
}