/* global.css - Shared Styles for Black Oak Developments Ltd Website */

/* Base styles for the entire document - consistent across all pages */
body {
    font-family: 'Inter', sans-serif; /* Consistent font */
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Ensure the body takes at least the full viewport height */
    width: 100vw; /* Ensure the body takes the full viewport width */
    overflow: hidden; /* Prevent all scrolling on the body to keep borders fixed */
    background-image: url('BO Background.png'); /* Global background image */
    background-size: cover; /* Cover the entire area, cropping if necessary */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-attachment: fixed; /* Keep the background fixed during scroll */
    position: relative; /* Needed for positioning border lines and side panel */
    
    /* Removed flex properties from body as content-area will handle its own layout */
}

/* Keyframes for image fade-in (used for BO Tree and potentially other elements) */
@keyframes fadeInImage {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Keyframes for image fade-out (used for BO Tree) */
@keyframes fadeOutImage {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Keyframes for border drawing animations - consistent across pages */
@keyframes drawBottom {
    0% { width: 0; transform: translateX(-50%); }
    100% { width: calc(100vw - 60px); transform: translateX(-50%); }
}

@keyframes drawVertical {
    0% { height: 0; }
    100% { height: calc(100vh - 60px - 3px); }
}

@keyframes drawTopHalf {
    0% { width: 0; }
    100% { width: calc((100vw - 60px) / 2); }
}

/* Keyframes for menu icon fade-in */
@keyframes fadeInMenuIcon {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Keyframes for hero content fade-in */
@keyframes fadeInContent {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Base style for all border line segments - consistent across pages */
.border-line {
    position: absolute;
    background: linear-gradient(
        45deg,
        #5C2C0F 0%,      /* Very Dark Copper */
        #8B4513 25%,     /* Dark Copper */
        #CD7F32 50%,     /* Standard Copper (highlight) */
        #8B4513 75%,     /* Dark Copper */
        #5C2C0F 100%     /* Very Dark Copper */
    );
    z-index: 3; /* Ensure border is above background */
    transition: transform 0.5s ease-in-out; /* Added for smooth shift */
}

/* Default state for border segments (no animation applied by default) */
.border-bottom {
    height: 3px;
    bottom: 30px;
    left: 50%;
    width: 0; /* Starts hidden */
}

.border-left {
    width: 3px;
    left: 30px;
    bottom: 30px;
    height: 0; /* Starts hidden */
    transform-origin: bottom;
}

.border-right {
    width: 3px;
    right: 30px;
    bottom: 30px;
    height: 0; /* Starts hidden */
    transform-origin: bottom;
}

.border-top-left {
    height: 3px;
    top: 30px;
    left: 30px;
    width: 0; /* Starts hidden */
    transform-origin: left center;
}

.border-top-right {
    height: 3px;
    top: 30px;
    right: 30px;
    width: 0; /* Starts hidden */
    transform-origin: right center;
}

/* Animated states for border segments */
.animated-border-bottom {
    animation: drawBottom 2.6s linear forwards; /* Adjusted duration */
}

.animated-border-left {
    animation: drawVertical 2.6s linear forwards; /* Adjusted duration */
    animation-delay: 2.6s; /* Adjusted delay */
}

.animated-border-right {
    animation: drawVertical 2.6s linear forwards; /* Adjusted duration */
    animation-delay: 2.6s; /* Adjusted delay */
}

.animated-border-top-left {
    animation: drawTopHalf 2.8s linear forwards; /* Adjusted duration */
    animation-delay: 5.2s; /* Adjusted delay */
}

.animated-border-top-right {
    animation: drawTopHalf 2.8s linear forwards; /* Adjusted duration */
    animation-delay: 5.2s; /* Adjusted delay */
}

/* Final states for border segments (when animation is skipped) */
.final-border-bottom {
    width: calc(100vw - 60px);
    transform: translateX(-50%);
}

.final-border-left {
    height: calc(100vh - 60px - 3px);
}

.final-border-right {
    height: calc(100vh - 60px - 3px);
}

.final-border-top-left {
    width: calc((100vw - 60px) / 2);
}

.final-border-top-right {
    width: calc((100vw - 60px) / 2);
}


/* Container for the main content (e.g., image, hero section) */
.content-area {
    position: absolute; /* Position absolutely to stay within viewport */
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    overflow-y: auto; /* Allow vertical scrolling within this area */
    overflow-x: hidden; /* Prevent horizontal scrolling within this area */
    display: flex; /* Use flexbox to center content horizontally */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
    z-index: 1; /* Below borders, above body background */
    transition: transform 0.5s ease-in-out; /* Added for smooth shift */
    padding: 1rem; /* Add some padding inside the scrollable area */
}

/* Shift content area when side panel is open */
body.panel-open .content-area {
    transform: translateX(300px); /* Shift right by panel width */
}


/* Styling for the centered image (BO Tree.png) */
.centered-image {
    position: absolute; /* Position absolutely within content-area */
    max-width: 70%; /* Adjusted size */
    max-height: 70vh; /* Adjusted size */
    height: auto;
    display: block;
    z-index: 2; /* Ensure it's above hero-section when visible */
    opacity: 0; /* Initially hidden for fade-in */
}

/* Animated state for centered image */
.animated-centered-image {
    animation: fadeInImage 4s linear forwards, fadeOutImage 4s linear forwards; /* Fade in 4s, Fade out 4s */
    animation-delay: 0s, 4s; /* Fade in starts at 0s, fade out starts at 4s */
}

/* Final state for centered image (hidden) */
.final-centered-image {
    opacity: 0;
    display: none; /* Hide completely after animation */
}

/* Responsive adjustments for image size */
@media (max-width: 768px) {
    .centered-image {
        max-width: 80%; /* Slightly larger on smaller screens */
        max-height: 60vh;
    }
}

/* Hero section specific styles */
.hero-section {
    /* Removed position: absolute; and height: 100%; to allow natural flow */
    color: white;
    text-align: center; /* Ensure text is centered */
    padding: 2rem; /* Ample padding for a hero section */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content to the top */
    align-items: center;
    width: 100%; /* Take full width of content-area */
    opacity: 0; /* Initially hidden for fade-in */
    padding-top: 15vh; /* Pushes content down from the top */
    box-sizing: border-box; /* Include padding in width/height calculation */
}

/* Animated state for hero section */
.animated-hero-section {
    animation: fadeInContent 3s linear forwards; /* Fade in the hero content */
    animation-delay: 8s; /* Starts after BO Tree.png fades out (4s fade-in + 4s fade-out = 8s) */
}

/* Final state for hero section (visible) */
.final-hero-section {
    opacity: 1;
}

.hero-section h1 {
    font-size: 4.5rem; /* Large, impactful headline */
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.1;
    color: #656565; /* A darker satin silver color */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7), /* Darker shadow for depth */
                 0 0 20px rgba(0, 0, 0, 0.5); /* Wider shadow for more impact */
}

.hero-section p {
    color: #A9A9A9; /* DarkGray for a silver-like, luxurious feel */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5); /* Subtle shadow for readability */
    max-width: 40rem; /* Adjusted max-width for the paragraph text */
    margin-top: 1.5rem; /* Add some space below the headline */
    font-size: 1.15rem; /* Increased font size for main body text */
    line-height: 1.6; /* Adjusted line height for readability */
}


/* Responsive adjustments for hero section */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 3rem;
    }
    .hero-section {
        padding: 1rem;
        padding-top: 10vh; /* Adjusted for smaller screens */
    }
    .hero-section p {
        max-width: 90%; /* Allow more width on smaller screens */
        font-size: 1rem; /* Adjusted for smaller screens */
    }
}
@media (max-width: 480px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }
}


/* Menu Icon Styling - consistent across pages */
#menu-icon {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0; /* Initially hidden */
    transition: transform 0.5s ease-in-out; /* Added for smooth movement */
}

/* Animated state for menu icon */
#menu-icon.animated-menu-icon {
    animation: fadeInMenuIcon 4s linear forwards; /* Duration changed to 4s */
    animation-delay: 4s; /* Starts when BO Tree.png starts fading out */
}

/* Final state for menu icon (visible) */
#menu-icon.final-menu-icon {
    opacity: 1;
}

/* Shift menu icon when side panel is open */
body.panel-open #menu-icon {
    transform: translateX(60px); /* Shift right by 60px to be centered in the open panel */
}


#menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
}

#menu-icon img:hover {
    transform: scale(1.1);
}

/* Side Panel Navigation Styling - consistent across pages */
#side-panel {
    position: fixed;
    top: 0;
    left: -300px; /* Initially off-screen to the left */
    width: 300px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* 80% transparent black */
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
    z-index: 99;
    transition: left 0.5s ease-in-out;
    padding-top: 130px; /* Reverted padding-top back to here */
    display: flex;
    flex-direction: column; /* Changed to column to stack content */
    align-items: center;
    /* Removed box-sizing: border-box; and overflow-y: auto from here */
}

/* Removed .side-panel-scrollable-content class entirely */


#side-panel.open {
    left: 0; /* Slide into view */
}

#side-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

#side-panel ul li {
    text-align: center;
    margin-bottom: 1.5rem;
}

#side-panel ul li a {
    color: #CD7F32; /* Copper color for links */
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    display: block;
    padding: 0.5rem 0;
}

#side-panel ul li a:hover {
    color: #F0C27C; /* Lighter Copper Highlight */
    text-shadow: 0 0 10px rgba(240, 194, 124, 0.8);
}

/* Updated style for contact links (now matching hero text, copper on hover) */
.contact-link { /* Renamed from .emerald-link for clarity */
    color: #656565; /* Matches hero text color */
    text-shadow: 1.5px 1.5px 4.5px rgba(0, 0, 0, 1.0); /* Increased shadow by 50% */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition for hover */
}

.contact-link:hover {
    color: #CD7F32; /* Copper color on hover */
    text-shadow: 0 0 12px rgba(205, 127, 50, 1.0); /* Increased glow by 50% on hover */
}


/* Menu Overlay Styling - consistent across pages */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 98;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
}

#menu-overlay.open {
    opacity: 1;
    visibility: visible;
}