/* styles.css */


/* Global Styles */
body {
    margin: 0;
    font-family: 'Urbanist', sans-serif;
    background-color: #f0fcfb;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
}


input, select, textarea {
    font-size: 16px;
}


a {
    text-decoration: none;
    color: black;
}


.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 700px;
    background-color: white;
    box-sizing: border-box;
    margin-top: 55px;
    padding-bottom: 25px;
    overflow: hidden;
}


body.overlay-active {
    position: fixed;
    width: 100%;
    overflow: hidden;
}


.video-wrapper {
    height: calc((var(--vh, 1vh) * 100) - 80px); /* Adjusts based on header and bottom nav */
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 400px;
}


/* Ensure that .video-container and #videoPlayer use relative heights */
.video-container {
    height: 100%;
    width: auto;
    position: relative;
    overflow: hidden;
}


#videoPlayer {
    height: 100%;
    width: auto;
    object-fit: contain;
    overflow: hidden;
}


.hotspot {
    position: absolute;
    z-index: 999;
}


/* Play/Pause Hotspot */
.hotspot.play-pause {
    width: 70%;
    height: 60%;
    top: 20%;
    left: 15%;
}


/* Forward Hotspot */
.hotspot.chapter-forward {
    width: auto;
    height: 60%;
    right: 0;
    top: 0;
}


/* Backward Hotspot */
.hotspot.chapter-backward {
    width: auto;
    height: 60%;
    left: 0;
    top: 0;
}


/* Volume Icon Wrapper */
.volume-wrapper {
   position: absolute;
    z-index: 1001;
    top: 93%;               /* Positioned 86% from the top */
    right: 1%;              /* 1% from the right */
    width: 9%;              /* 9% of the video width */
    height: 6%;             /* 6% of the video height */
}


.volume-wrapper img {
    width: 100%;
    height: 100%;
}


/* Share Icon Wrapper */
.share-wrapper {
    position: absolute;
    z-index: 1001;
    top: 86%;               /* Positioned 86% from the top */
    right: 1%;              /* 1% from the right */
    width: 9%;              /* 9% of the video width */
    height: 6%;             /* 6% of the video height */
}


.share-wrapper img {
    width: 100%;            /* Full size of the wrapper */
    height: 100%;
    opacity: 0.7;           /* Slight transparency to match the volume button */
    transition: opacity 0.3s ease;  /* Smooth hover effect */
}


.postinfo-wrapper {
    position: absolute;
    z-index: 9;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}


.postinfo-title-line1,
.postinfo-title-line2,
.postinfo-title-line3,
.postinfo-description-line1,
.postinfo-description-line2,
.postinfo-description-line3,
.postinfo-description-line4,
.postinfo-byline,
.postinfo-dateline {
    font-family: 'Raleway', sans-serif;
}


.postinfo-title-line1,
.postinfo-title-line2,
.postinfo-title-line3 {
    font-weight: 800;
    background-color: white;
    display: inline-block;
    padding-left: 1%; /* Use percentage for better scaling */
    padding-right: 1%;
    white-space: nowrap;
    margin-bottom: 0.5%;
}


.postinfo-description-line1,
.postinfo-description-line2,
.postinfo-description-line3,
.postinfo-description-line4 {
    font-weight: 400;
    background-color: white;
    display: inline-block;
    padding-left: 1%; /* Adjust to percentage */
    padding-right: 1%;
    white-space: nowrap;
    margin-bottom: 0.5%;
}


.postinfo-byline, 
.postinfo-dateline {
    font-weight: 400;
    background-color: white;
    display: inline-block;
    padding-left: 1%;
    padding-right: 1%;
    margin-bottom: 0.5%;
}


.poster-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 10; /* Above video but below overlays */
    display: block; /* Default visible */
}




/* Header and Navigation Styles */
header {
    background-color: #f0fcfb;
    height: 55px;
    padding-top: 0;
    border-bottom: 1px solid black;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}


.logo {
    position: relative;
    left: 5px;
    bottom: 5px;
    width: 189px;
    height: auto;
}


.header-nav {
    position: relative;
    margin-left: auto;
    padding-right: 0px;
}


.header-nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}


.header-nav ul li {
    margin-right: 15px;
}


.header-nav ul li a {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: black;
    position: relative;
    bottom: 5px;
}


.bottom-nav {
    background-color: #f0fcfb;
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: 25px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border-top: 1px solid black;
    justify-content: space-between;
}


.bottom-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}


.align-left {
    margin-left: 0;
    margin-right: auto;
}


.align-right {
    margin-left: auto;
    margin-right: 0px;
}


.bottom-nav ul li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}


.bottom-nav ul li a {
    color: black;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
    height: 100%;
    display: flex;
    align-items: center;
}


.bottom-nav a:hover {
    color: #555;
}


/* Overlay Styles */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(240, 252, 251, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}


.overlay.active {
    display: flex;
}


.overlay-content {
    position: relative; /* Changed from fixed to relative */
    max-width: 320px;
    padding: 20px;
    background-color: white;
    border: 1px solid black;
    box-sizing: border-box;
    text-align: center;
}


/* Gray Links in the About Section */
.gray-link {
    color: #555555;
}


/* Confirmation Screen */
.confirm-text {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.1em;
    margin-top: 10px;
    color: black;
    text-transform: lowercase;
    text-align: center;
}


/* Subscribe Input Field */
.overlay-content input[type="email"] {
    width: 100%; /* Ensure it spans the container width */
    font-family: 'Urbanist', sans-serif;
    font-size: 13pt; /* Make the font consistent */
    padding: 10px; /* Add padding for breathing room */
    border: 1px solid black; /* Add a black border */
    border-radius: 4px; /* Slightly round the corners */
    box-sizing: border-box; /* Ensure proper sizing */
    margin-bottom: 15px; /* Add a 5px buffer between the input and button */
}


/* Subscribe Button */
.overlay-content .button {
    width: 100px;  /* Set the width of the button */
    height: auto;  /* Height will adjust automatically */
    border: none;  /* Remove the default border */
    background: none;  /* Remove background for image */
    cursor: pointer;  /* Keep the cursor pointer */
}


.overlay-content .button:hover {
    background-color: #f0fcfb; /* Light hover effect */
}


/* Overlay Content: Centering adjustments */
.overlay-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center items vertically */
    align-items: center;     /* Center items horizontally */
    min-width: 300px; /* Minimum width */
    max-width: 320px; /* Maximum width */
    min-height: 200px; /* Minimum height */
    padding: 20px;
    background-color: white;
    border: 1px solid black;
    box-sizing: border-box;
    text-align: center;
}


/* Share Link Box */
.share-link-box {
    width: 100%;
    font-family: 'Urbanist', sans-serif;
    font-size: 13pt;
    padding: 10px;
    border: 1px solid black;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
    overflow: hidden; /* Cut off overflow */
    white-space: nowrap;
    text-overflow: ellipsis; /* Ellipsis for overflow */
    background-color: #f0fcfb;
    color: black;
    cursor: text;
    text-align: center; /* Center the text inside the box */
}


/* Copy Button */
.copy-button {
    width: 30px;  /* Updated to 30px */
    height: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.copy-button:hover {
    background-color: darkgray;
}


.copy-feedback-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);  /* White with slight transparency */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;  /* Ensure it's on top of everything */
}


.copied-message {
    font-family: 'Urbanist', sans-serif;
    font-size: 20pt;
    color: black;
    font-weight: bold;
    text-align: center;
}


/* Chapter Wrapper */
.chapter-wrapper {
    position: absolute;
    z-index: 1000;
    top: 1%;        /* 1% from the top */
    left: 1%;       /* 1% from the left */
    width: 9%;      /* Same width as volume and share buttons */
    height: 6%;     /* Same height as volume and share buttons */
    opacity: 0.7;   /* Consistent opacity */
}


.chapter-wrapper img {
    width: 100%;    /* Full size of the wrapper */
    height: 100%;   /* Ensuring it scales perfectly */
    object-fit: contain;  /* Keeps the proportions right */
}


/* Chapter Title inside the box */
.chapter-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Center the text */
    font-family: 'Urbanist', sans-serif;
    color: white;
    font-size: calc(0.3 * 6vh);  /* Dynamically set */
    font-weight: 300;
    text-align: center;
    white-space: nowrap;
}


/* Responsive Adjustments */
@media screen and (max-width: 700px) {
    header, .bottom-nav, .container {
        max-width: 100%;
        width: 100%;
    }


    .logo {
        width: 180px;
    }




    .overlay-content {
        padding: 15px;
        max-width: 300px;
    }


    .overlay-content input[type="email"] {
        width: 100%;
    }
}


/* Overlay Styles */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(240, 252, 251, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}


.overlay.active {
    display: flex;
}


.overlay-content {
    position: relative; /* Ensures proper positioning within the flex container */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically */
    align-items: center;     /* Centers content horizontally */
    min-width: 300px; /* Minimum width */
    max-width: 320px; /* Maximum width */
    min-height: 200px; /* Minimum height */
    padding: 20px;
    background-color: white;
    border: 1px solid black;
    box-sizing: border-box;
    text-align: center;
}


/* Specific Style for links.png */
.overlay-content img.links-image {
width: 95%;
height: auto;
margin-bottom:
20px; /* Ensures a 20px buffer below the image */
}


/* Close Button Styles */
.overlay .close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background-image: url('closebutton.png');
    background-size: cover;
    cursor: pointer;
    border: none;
    background-color: transparent;
}


/* Responsive Adjustments */
@media screen and (max-width: 700px) {
    .overlay-content {
        padding: 15px;
        max-width: 300px;
    }
}


#overlay-share .overlay-content {
    position: relative;
    max-width: 320px;
    padding: 20px;
    background-color: white;
    border: 1px solid black;
    box-sizing: border-box;
    text-align: center;
}

.overlay-404 {
    font-family: 'Urbanist', sans-serif;
    font-size: 20pt;
    color: black;
    font-weight: bold;
    text-align: center;
}

.overlay-ty {
    font-family: 'Urbanist', sans-serif;
    font-size: 20pt;
    color: black;
    font-weight: bold;
    text-align: center;
}


/* Preload overlay images */
.preload-images {
    width: 0;
    height: 0;
    overflow: hidden;
    background-image: url('closebutton.png'), url('subscribe.png'), url('email.png');
}