/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Old+English+Text+MT&display=swap');

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- Layout and Background --- */
html, body {
    height: 100%;
    overflow: hidden; /* Prevent body scroll, managed by page-wrapper */
}

body {
    font-family: 'Poppins', Arial, sans-serif; /* Poppins as primary, Arial/sans-serif as fallback */
    min-height: 100vh;
    height: 100vh;
    /* Placeholder for background image. Replace with your actual image path. */
    background: url('./src/sjc-bg2.jpg') no-repeat center center fixed;
    background-size: cover;
    position: relative; /* For the pseudo-element overlay */
}

/* Background Blur Overlay */
body::before {
    content: "";
    position: fixed; /* Fixed position to cover entire viewport */
    inset: 0; /* Shorthand for top, right, bottom, left: 0 */
    z-index: 0; /* Place behind content */
    background: inherit; /* Inherit background from body */
    filter: blur(5px) brightness(0.8); /* Apply blur and slightly dim for text contrast */
    background-size: cover; /* Ensure it covers properly */
}

.page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center; /* Vertically center the container */
    justify-content: center; /* Horizontally center the container */
    background: transparent; /* No background on wrapper, only on body */
    padding: 24px; /* Add padding around the main container for small screens */
    position: relative; /* Ensure it's above the blurred background */
    z-index: 1; /* Ensure content is above the blurred background */
    overflow-y: auto; /* Allow scrolling if content overflows on small screens */
}

.split-container {
    display: flex;
    width: 100%;
    max-width: 900px; /* Medium size for desktop */
    min-height: 480px; /* Adjusted min-height for better balance */
    border-radius: 12px;
    overflow: hidden; /* Important for rounded corners on inner divs */
    background: #fff;
    border: 4px solid #FFD700; /* Golden border */
    box-shadow: 0 8px 30px rgba(0,0,0,0.2); /* Enhanced shadow */
}

/* Left Panel Styling */
.split-left {
    background: #550d0b; /* Dark red background */
    color: #fff;
    flex: 1.1; /* Takes slightly more space than right panel */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 280px; /* Minimum width for the left panel */
    padding: 20px; /* Increased padding */
    box-sizing: border-box; /* Include padding in element's total width */
    text-align: center;
}

.split-logo {
    width: 90px;
    height: 90px;
    margin-bottom: 20px; /* Increased margin */
    border-radius: 50%; /* Make logo round */
    object-fit: cover; /* Ensures image covers area without distortion */
    border: 2px solid #FFD700; /* Golden border around logo */
}

.split-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.split-title span {
    font-size: 1.4rem; /* Slightly larger */
    color: #FFD700;
    margin-bottom: 8px;
    font-family: "Old English Text MT", serif; /* Specific font for title */
}

.split-title h1 {
    font-size: 2.5rem; /* Larger and more prominent */
    font-family: "Old English Text MT", serif;
    margin: 0;
    line-height: 1.1;
    letter-spacing: 1px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle text shadow */
}

/* Right Panel Styling */
.split-right {
    flex: 2; /* Takes more space than left panel */
    min-height: 480px; /* Match left panel height */
    padding: 30px; /* Increased padding */
    background: #f9f9f9; /* Light grey background */
    /* Grid background pattern */
    background-image: radial-gradient(#d9d9d9 1px, transparent 1px), radial-gradient(#d9d9d9 1px, #f9f9f9 1px);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.05); /* Subtle inner shadow */
    border-radius: 0 12px 12px 0; /* Rounded right corners only */
    background-clip: padding-box; /* Ensure background respects padding */
    text-align: center;
}

.split-right h2 {
    color: #550d0b;
    font-size: 2.2rem;
    margin-bottom: 15px; /* Adjusted margin */
    font-weight: 700;
    letter-spacing: 1px;
}

.split-right p {
    color: #333;
    margin-bottom: 25px; /* Adjusted margin */
    font-size: 1.05rem;
    line-height: 1.5;
}

.split-right form {
    width: 100%;
    max-width: 320px; /* Max width for the form itself */
    margin: 0 auto 20px auto; /* Increased margin below form */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Increased gap between form elements */
}

.split-right input[type="text"],
.split-right input[type="password"],
.split-right input[type="email"] { /* Added email type for consistency */
    width: 100%;
    padding: 12px; /* Slightly larger padding for better touch input */
    font-size: 1.1em; /* Larger font size */
    border: 2px solid #FFD700;
    border-radius: 8px; /* Slightly more rounded corners */
    outline: none; /* Remove default outline */
    background: #fffbe6; /* Light yellow background */
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box; /* Include padding in element's total width */
    text-align: center; /* Center placeholder text */
}

.split-right input[type="text"]:focus,
.split-right input[type="password"]:focus,
.split-right input[type="email"]:focus {
    border-color: #550d0b; /* Dark red border on focus */
    background: #fffdf5; /* Lighter yellow on focus */
    box-shadow: 0 0 0 3px rgba(255,215,0,0.3); /* Add a glow effect on focus */
}

.split-right button[type="submit"] {
    width: 100%;
    background: linear-gradient(90deg, #FFD700 0%, #ffe066 100%); /* Adjusted gradient direction */
    color: #550d0b;
    border: none;
    padding: 12px 0; /* Consistent padding */
    border-radius: 8px; /* Match input border-radius */
    font-size: 1.1em; /* Larger font */
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255,215,0,0.2); /* Stronger shadow */
    transition: background 0.2s, color 0.2s, transform 0.1s, box-shadow 0.2s;
}

.split-right button[type="submit"]:hover {
    background: #550d0b; /* Dark background on hover */
    color: #FFD700; /* Golden text on hover */
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 6px 15px rgba(85,13,11,0.3); /* Darker shadow on hover */
}

.links-container {
    width: 100%;
    margin-top: 14px;
    display: flex;
    flex-direction: column; /* Stack links vertically */
    align-items: center; /* Center align links */
    gap: 10px; /* Space between links */
}

.links-container a {
    color: #550d0b;
    text-decoration: none; /* Remove underline by default */
    font-size: 1em; /* Adjusted font size */
    transition: color 0.2s, text-decoration 0.2s;
    padding: 5px; /* Add padding for better click/tap area */
    border-radius: 5px;
}

.links-container a:hover {
    color: #FFD700;
    text-decoration: underline; /* Add underline on hover */
}


/* For Tablet section */
@media (max-width: 768px) {
    .split-container {
        flex-direction: column; /* Stack panels vertically */
        max-width: 90%; /* Max width for smaller desktops/large tablets */
        min-height: unset; /* Allow height to adjust */
        border-radius: 12px; /* Maintain overall border radius */
    }
    .split-left {
        flex-direction: row; /* Keep logo and title in a row */
        justify-content: flex-start;
        padding: 15px;
        min-width: unset; /* Remove min-width */
        border-radius: 12px 12px 0 0; /* Rounded top corners */
        text-align: left; /* Align text to left */
    }
    .split-logo {
        width: 100px; /* Smaller logo */
        height: 100px;
        margin-left: 150px;
        margin-bottom: 0; /* Remove bottom margin when in row */
    }
    .split-title {
        align-items: flex; /* Align title text to the left */
        margin-left: 20px;
    }
    .split-title span {
        font-size: 1.1rem;
    }
    .split-title h1 {
        font-size: 1.8rem; /* Smaller title */
        white-space: nowrap; /* Prevent title from wrapping if possible */
        margin-left: 1px;
    }
    .split-right {
        min-height: unset; /* Allow height to adjust */
        padding: 25px;
        border-radius: 0 0 12px 12px; /* Rounded bottom corners */
        border-top: 4px solid #FFD700; /* Add top border for separation */
        /* Ensure other borders are consistent */
        border-left: 4px solid #FFD700;
        border-right: 4px solid #FFD700;
        border-bottom: 4px solid #FFD700;
    }
    .split-right h2 {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    .split-right p {
        font-size: 1em;
        margin-bottom: 20px;
    }
    .split-right form {
        max-width: 80%; /* Adjust form width */
    }
    .links-container {
        gap: 8px; /* Slightly smaller gap on mobile */
    }
}

/* For screens smaller than 600px (Mobile Phones) */
@media (max-width: 425px) {
    .split-left {
    align-items: center;  /* move items to the top */
    justify-content: center;  /* align to top-left */
    padding: 20px 15px; /* small padding around */
    }

  .split-title {
    align-items: center; /* align text to left */
    text-align: left;
    margin-top: 10px; /* move down slightly if needed */
    margin-left: 0;
    }

  .split-title span {
    font-size: 1.1rem;
    margin-bottom: 4px;
    }

  .split-title h1 {
    font-size: 1.6rem; /* reduce slightly to fit screen */
    line-height: 1.2;
    }
    
    .page-wrapper {
        padding: 15px; /* Reduce padding for small mobiles */
    }
    .split-container {
        max-width: 100%; /* Full width on very small screens */
        border-radius: 8px; /* Slightly less rounded */
    }
    .split-left {
        padding: 10px;
        border-radius: 8px 8px 0 0;
    }
    .split-logo {
        width: 80px;
        height: 80px;
        margin-left: -10px;
        margin-right: 10px;
    }
    .split-title span {
        font-size: 0.9em;
    }
    .split-title h1 {
        font-size: 1.4em;
        white-space: normal; /* Allow title to wrap on very small screens */
        margin-left: 1px;
    }
    .split-right {
        padding: 20px 15px; /* Adjust padding for inner content */
        border-radius: 0 0 8px 8px;
    }
    .split-right h2 {
        font-size: 1.8rem;
        margin-bottom: 8px;
    }
    .split-right p {
        font-size: 0.9em;
        margin-bottom: 15px;
    }
    .split-right input[type="text"],
    .split-right input[type="password"],
    .split-right input[type="email"] {
        padding: 10px;
        font-size: 1em;
        border-radius: 6px;
    }
    .split-right button[type="submit"] {
        padding: 10px 0;
        font-size: 1em;
        border-radius: 6px;
    }
    .links-container {
        gap: 6px; /* Even smaller gap on very small mobile */
    }
    .links-container a {
        font-size: 0.9em;
    }
}