/* project-sultans.css - Styles specific to Sultans of Shave project page */

/* No :root variables here, as this page should inherit them from style.css */

/* Main content area for Sultans of Shave page */
main.container {
    padding-top: 40px; /* Space below the global header */
    padding-bottom: 80px; /* Ample space at the bottom */
}

/* Page-specific heading (h1) */
main.container h1 {
    font-family: 'Playfair Display', serif; /* Consistent font with other page titles */
    font-size: 3rem;
    color: var(--accent); /* Uses global accent color */
    margin-bottom: 1rem;
    text-align: center; /* Center the main heading */
}

/* Intro paragraph for the page (using the class 'description') */
.description {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    color: var(--text-secondary); /* Uses global text secondary color */
    margin-bottom: 2rem;
    max-width: 700px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto; /* Center the paragraph */
    text-align: center; /* Center the text */
}

/* --- Responsive Video Wrapper --- */
/* Styles moved from inline <style> tag in HTML */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    margin: 2rem auto 2.5rem auto; /* Center with top/bottom margin */
    max-width: 800px; /* Optional: Limit max width for large screens */
    background-color: var(--card); /* Optional: Background for the wrapper if video doesn't fill entirely */
}

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

/* Back to Projects button styling */
/* This rule ensures the button for *this specific page* has a visible border. */
.btn[href="projects.html"] {
    margin-top: 2rem; /* Positions the button below the content */
    width: fit-content; /* Shrinks the button's width to fit its content */
    margin-left: auto; /* Centers the button horizontally */
    margin-right: auto; /* Centers the button horizontally */
    
    /* === CRITICAL BORDER FIX === */
    border: 2px solid black !important; /* Forces a 2px solid black border */
    /* =========================== */

    /* Ensure these are inherited from .btn.primary in style.css, or explicitly set here if needed */
    /* If you're still facing color issues, ensure your HTML button has class="btn primary" */
    /* background-color: var(--accent); */
    /* color: white; */
}

.btn[href="projects.html"]:hover {
    background-color: black !important; /* Darker accent on hover */
    
    /* === FIX: Ensure text color contrasts with hover background === */
    color: white !important; /* Assuming var(--hover) is dark enough for white text */
    /* If var(--hover) is light, change this to var(--text) for dark text on hover: */
    /* color: var(--text) !important; */ 
    /* ============================================================= */

    border-color: var(--hover) !important; /* Border color matches hover background */
    transform: scale(1.05) !important; /* Subtle scale effect on hover */
}

/* --- Responsive Adjustments for this specific page --- */
@media (max-width: 768px) {
    main.container h1 {
        font-size: 2.5rem; /* Adjust heading size on smaller screens */
    }
    .description {
        font-size: 1rem; /* Adjust intro paragraph font size */
    }
    .video-wrapper {
        margin: 1.5rem auto 2rem auto; /* Adjust margin on smaller screens */
    }
}

@media (max-width: 480px) {
    /* Further adjustments for very small screens if needed */
}