/* Add application specific styles here */

/* 1. Set font on the root element for normal inheritance */
:root {
    /* **1. DEFINED** - This is where your custom font is set for .cn_word */
    --cn-font-family: 'FZKAI-Z03 REGULAR', serif;
    /* Define the custom variable for 100% visible screen height */
    --app-height: 100vh;
}

/* -------------------------------------- */
/* 1. Outer Layout (Background Color)     */
/* -------------------------------------- */
/* This sets the background for the entire screen, outside the 80% wrapper */
.outer-layout {
    /* Beach Color: f6e3da */
    background-color: #f6e3da;
    /* min-height: 100vh;  Ensures it covers the entire viewport height */
    min-height: var(--app-height); /* Use the variable */
    display: flex;
    justify-content: center; /* Center the main content wrapper */
    padding: 0;
    margin: 0;
}


/* -------------------------------------- */
/* 2. Main Content Wrapper (80% Constraint) */
/* -------------------------------------- */
.main-content-wrapper {
    width: 100%; /* Default for mobile screens */
    max-width: 100%; /* Ensures full width on small screens */
    background-color: white; /* Content inside is white */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* Apply 80% constraint for Tablet (md breakpoint) and Desktop */
@media (min-width: 768px) {
    .main-content-wrapper {
        max-width: 80%; /* The key rule: limits width to 80% on tablet/desktop */
    }
}

/* -------------------------------------- */
/* 3. Header Image Styling                */
/* -------------------------------------- */
.header-picture-container {
    width: 100%;
    /* Max height to prevent oversized images on large screens */
    max-height: 200px;
    overflow: hidden;
}

    .header-picture-container img {
        /* object-fit: cover ensures the image covers the container without distortion */
        object-fit: cover;
        height: 100%;
    }

/* -------------------------------------- */
/* 4. Navbar Fixes                        */
/* -------------------------------------- */
/* Use flex utilities to separate the Login/Logout and main menu */
.navbar-nav {
    /* Overrides the default Bootstrap centering to use a row for all items */
    width: 100%;
    display: flex;
    justify-content: center; /* Center the main menu items */
}

/* Give the login/logout area space from the menu on large screens */
@media (min-width: 992px) {
    .navbar-collapse {
        /* Pushes the login area to the far left (handled by navbar-brand on the other side) */
        justify-content: flex-end !important;
    }

    .navbar-nav {
        /* On desktop, center the menu links within their available space */
        justify-content: center;
        flex-grow: 1; /* Allows the nav to occupy the center space */
    }
}



/*
 * MOBILE-SPECIFIC STYLES (Max-width 767px)
 * These rules target phones and small tablets in portrait mode.
 * They override or refine the base styles for a better mobile experience.
 */
@media (max-width: 767px) {

    /* --- 1. General Mobile Layout Adjustments --- */
    .outer-layout {
        /* Remove horizontal padding/margin that might be inherited or look bad on narrow screens */
        padding: 0;
        margin: 0;
    }

    .main-content-wrapper {
        /* Ensure content takes full width on the smallest screens */
        width: 100vw;
        /* Remove box-shadow on very small screens for a cleaner look */
        box-shadow: none !important;
    }

    /* --- 2. Header and Image Optimization --- */
    .header-picture-container {
        /* Reduce header image height on mobile to save valuable screen space */
        max-height: 120px;
    }

    /* --- 3. Typography and Spacing --- */
    /* Adjust Chinese font size for better fit on small screens if needed,
       though 1.5rem default might already be appropriate. */
    .cn_word {
        /* Example: slightly smaller base font size for dense content */
        /* font-size: 1.3rem; */
    }

    /* Increase padding/margin for touch targets */
    .navbar-nav .nav-item {
        margin: 0.5rem 0; /* Add vertical spacing between menu items in collapsed navbar */
    }

    /* Add internal padding to the main wrapper to keep content off the edges */
    .main-content-wrapper > * {
        /* Targets direct children of the main wrapper (e.g., content sections) */
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* --- 4. Navbar & Login/Logout Specifics (Collapsed Menu) --- */
    .navbar-collapse {
        /* Ensure the login/logout area and menu links align nicely when collapsed */
        flex-direction: column;
        align-items: flex-start; /* Left-align menu items when stacked */
        padding: 0 1rem 1rem;
    }

    .navbar-nav {
        /* Reset the desktop-specific flex-grow that might interfere */
        flex-grow: unset;
        /* Ensure menu links take full width in the collapsed state */
        width: 100%;
        /* Align text left within the menu */
        justify-content: flex-start;
    }
}


/* -------------------------------------- */
/* Chinese fonts */
.cn_word {
    /* Uses the variable defined in :root */
    font-family: var(--cn-font-family);
    /* Uses the variable defined in :root */
    font-size: var(--cn-font-size);
    line-height: 1.1;
    display: inline-block;
}
/*
    style="--cn-font-size: 1.0rem;"

    default is 1.5rem
*/

/* Custom size for copyright text */
.custom-footer-text {
    font-size: 1.0rem; 
}

.bg-warm-brown {
    /* Muted, earthy brown (Wet Sand) */
    background-color: #008080 !important;
}