/* --- Global Styles --- */
* {
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Use min-height for full viewport height */
    background-image: url('leather2.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #fdfff7; /* Fallback color */
    color: #333; /* Default text color for better readability */
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal; /* Consider different weights for hierarchy */
    margin: 0 0 1rem 0; /* Add some bottom margin for spacing */
    text-align: center;
}

h1 {
    font-size: 2.8rem; /* Adjust as needed for the main title */
    font-weight: 300;
}

h2 {
    font-size: 2.4rem;
    font-style: oblique;
    margin-bottom: 1.5rem; /* More spacing for sections */
}

h5 {
    font-size: 1.8rem; /* Slightly smaller than h2 */
    font-style: oblique;
}

h6 {
    font-size: 1rem;
    margin-top: 2rem; /* Add top margin for spacing */
}

p {
    margin: 0 0 1rem; /* Add consistent paragraph spacing */
    text-align: center;
    line-height: 1.5; /* Improve readability */
}

a {
    color: #3282e6;
    text-decoration: none;
}

a:hover {
    text-decoration: underline; /* Provide visual feedback on hover */
}

/* --- Layout --- */
.main-content {
    padding: 20px; /* Add some padding around the main content */
    max-width: 1200px; /* Limit width for readability */
    margin: 20px auto; /* Center the main content */
}


/* Ensure the .video-wrapper is relative for absolute positioning of watermark */
.video-wrapper {
    position: relative;
    max-width: 960px; /* Adjust this to match your video's max width */
    margin: 0 auto 2rem; /* Centers the wrapper and adds bottom margin */
    overflow: hidden; /* Important for rotated elements so they don't cause scrollbars */
}

/* Your existing .video-container and .video-container iframe styles */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* For a 16:9 aspect ratio (540/960 = 0.5625) */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Styles for the proprietary watermark */
.proprietary-watermark {
    position: absolute;
    top: 40%;           /* Vertically center in the wrapper */
    left: 50%;          /* Horizontally center in the wrapper */
    transform: translate(-50%, -50%) rotate(-45deg); /* Center relative to itself and rotate */
    font-size: 6vw;     /* Responsive font size based on viewport width */
    font-weight: bold;
    color: rgba(255, 255, 255, 0.3); /* White color with 30% opacity */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Subtle shadow for better visibility on various video content */
    pointer-events: none; /* Crucial: Allows mouse clicks/interactions to pass through to the iframe below */
    z-index: 5;         /* Ensures the watermark is above the iframe */
    white-space: nowrap; /* Prevents the text from wrapping */
    user-select: none;   /* Prevents selection of the watermark text */
}

/* Media queries for better responsiveness of the watermark font size */
@media (max-width: 768px) {
    .proprietary-watermark {
        font-size: 8vw; /* Larger font size for smaller screens to ensure visibility */
    }
}

@media (min-width: 960px) {
    .proprietary-watermark {
        font-size: 6vm; /* Set a fixed font size once the video reaches its max width (960px * 0.08 = 76.8px) */
    }
}


/* Original text-align might not be needed on .video-container if centered with margin: auto */
/* .video-container {
    text-align: center; /* This centers inline-block/text content, not the block itself */
/* } */


.bemer-info-section,
.troubleshooting-section {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent background for sections */
    padding: 20px;
    margin-bottom: 2rem;
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
}

.bemer-link img {
    max-width: 250px; /* Adjust size as needed */
    height: auto;
    display: block; /* Center block images */
    margin: 1rem auto;
}

.site-logo {
    max-width: 62px; /* Set original image size */
    height: 62px;
    display: block; /* Ensure it behaves as a block element for alignment */
    margin-left: 1rem; /* Adjust as needed for positioning within header */
}

.site-footer {
    text-align: center;
    padding: 1rem;
    margin-top: 3rem;
}

.site-footer img {
    max-width: 150px; /* Adjust size for footer logo */
    height: auto;
}

/* --- Navigation --- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes logo to left, nav to right */
    padding: 0.5rem 1rem;
    background-image: linear-gradient(to bottom, #47251f, #fdfff7);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.main-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* Use flexbox for horizontal navigation */
}

.main-nav li a {
    display: block;
    color: seashell;
    text-align: center;
    padding: 0.9rem 1rem;
    text-decoration: none;
    font-weight: bold;
}

.main-nav li a:hover {
    background-color: hsla(215, 15%, 21%, 0.72);
    color: seashell;
}

/* Hide heading for screen readers but keep it for semantic structure */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column; /* Stack logo and nav vertically on small screens */
        align-items: flex-start;
    }

    .main-nav ul {
        flex-direction: column; /* Stack nav items vertically */
        width: 100%;
        text-align: center;
    }

    .main-nav li {
        float: none; /* Remove float for vertical stacking */
        width: 100%;
    }

    .main-nav li a {
        padding: 0.7rem 0;
    }

    .site-logo {
        margin: 1rem auto; /* Center logo on small screens */
    }
}