/* Container that holds left and right columns */
.container {
    display: flex; /* Enables flexbox layout */
    /* Arranges children horizontally (this is actually the default) */
    flex-direction: row;
}

/* Left column (image + branding section) */
.left_col {
    /* Sets a background image */
    background-image: url('images/odin-plants.avif');
    /* By default, div size depends on content, so we explicitly set width/height */
    width: 33vw; /* 33% of viewport width */
    height: 100vh; /* Full viewport height */
    /* Makes background image scale to cover entire div */
    background-size: cover;
    /* Sets text color to white for contrast */
    color: white;
    display: flex; /* Enables flexbox */
    flex-direction: column; /* Stacks children vertically */
}

/* Logo container (image + ODIN text) */
.odin_logo {
    width: 33vw; /* Match width of left column */
    height: 17vh; /* Set height relative to viewport */
    margin-top: 30%; /* Pushes logo downward */
    font-family: 'NorseBold'; /* Custom font */
    text-align: center; /* Centers text horizontally */
    /* Semi-transparent black background overlay */
    background-color: rgba(0, 0, 0, 0.5);
    display: flex; /* Flexbox for centering content */
    align-items: center; /* Vertical alignment (cross axis) */
    justify-content: center; /* Horizontal alignment (main axis) */
    font-size: 40px; /* Large font size */
}

/* Photo credit text at bottom */
.pic_cred {
    /* Pushes this element to bottom of flex container */
    margin-top: auto;
    text-align: center; /* Centers text */
    margin-bottom: 5%; /* Adds space below */
}

/* Right column (form section) */
.right_col {
    width: 66vw; /* Takes remaining width */
    height: 100vh; /* Full viewport height */
    /* Light background color */
    background-color: whitesmoke;
}

/* Top section (intro text) */
.form_header {
    display: flex; /* Flex layout */
    flex-direction: column; /* Stack text vertically */
    text-align: left; /* Align text left */
    justify-content: end; /* Align content to bottom (main axis) */
    align-items: start; /* Align content to left (cross axis) */
    width: 55ch; /* Limits width using character units */
    margin-left: 5%; /* Adds space from left edge */
    height: 33vh; /* Takes 1/3 of right column height */
    font-weight: bold; /* Bold text */
    font-size: 20px; /* Larger font */
}

/* Middle section (form inputs) */
.form_body {
    height: 33vh; /* Takes 1/3 height */
    background-color: white; /* White background */
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack children vertically */
}

/* Bottom section (button + login text) */
.form_footer {
    margin-left: 5%; /* Left spacing */
    height: 33vh; /* Takes 1/3 height */
}

/* Form layout */
form {
    display: flex; /* Flexbox */
    flex-flow: row wrap; /* Row direction + wrap to next line */
    gap: 1rem;/* Space between items */    
    font-size: 1rem;/* Base font size */
    margin-left: 5%;/* Left spacing */
}

/* Section heading */
h3 {
    margin-left: 5%;/* Left spacing */
}

/* Logo image */
img {    
    width: 20%; /* Width relative to parent */
    height: 80%; /* Height relative to parent */
    object-fit: contain; /* Prevents distortion (keeps aspect ratio) */
}

/* Links */
a {
    /* Inherit parent color instead of default blue */
    color: inherit;
}

/* Button styling */
button {
    background-color: #596D48;/* Background color */
    color: white;/* Text color */
    width: 28ch;/* Width based on characters */
    height: 5ch;/* Height based on characters */
    margin-top: 5%;/* Space above button */
}

/* Label styling */
label {
    display: flex;/* Flex layout */
    flex-direction: column;/* Stack label text and input */
    font-size: 12px;/* Small font size */
    font-weight: bold;/* Bold text */
    /* (Commented-out alternative layout approach)
       width: 10rem would force wrapping into columns */
}

/* Invalid input styling */
input:invalid {
    /* Red border when input is invalid */
    border: 1px solid red;
}

/* Focused input styling */
input:focus {
    border: 1px solid blue;/* Blue border when focused */
    box-shadow: 2px 2px 1px grey;/* Subtle shadow for focus effect */
    outline: none;/* Removes default browser outline */
}

/* Custom font definition */
@font-face {
    /* Name used in CSS */
    font-family: 'NorseBold';

    /* Source font file (woff2 format) */
    src: url('fonts/Norse-Bold.woff2') format('woff2');
}