/* ==========================================
   1. ORIGINAL STYLES PRESERVATION
   ========================================== */
table {
    width: 990px; 
    margin: auto;
}

div.imageright { float:right; margin: 0em 30; }
div.imageleft { float:left; margin: 0em 30; }
div.imagecentre { width: 65%; margin: auto; }

a.homepage:link, a.homepage:visited { 
    text-decoration: none; 
    color: #000000; 
    font-family: Verdana, Arial, sans-serif; 
    font-size: 28px; 
    font-weight: bold; 
}
a.homepage:hover { 
    text-decoration: underline; 
    color: #000000; 
    font-family: Verdana, Arial, sans-serif; 
    font-size: 28px; 
    font-weight: bold; 
}

a.navblack:link, a.navblack:visited { text-decoration: none; color: #000000; font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: bold; }
a.navblack:hover { text-decoration: underline; color: #000000; font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: bold; }
a.navblackchn:link, a.navblackchn:visited { text-decoration: none; color: #000000; font-family: 新細明體, Verdana, Arial, sans-serif; font-size: 16px; font-weight: bold; }
a.navblackchn:hover { text-decoration: underline; color: #000000; font-family: 新細明體, Verdana, Arial, sans-serif; font-size: 16px; font-weight: bold; }

h1 { font-family: Arial, sans-serif; font-size: 32px; text-align: center; font-weight: bold; }
h2 { font-family: Verdana, Arial, sans-serif; font-size: 28px; }
h3 { font-family: Verdana, Arial, sans-serif; font-size: 22px; }

h2.homepage { 
    font-family: Verdana, Arial, sans-serif; 
    font-size: 32px;
    text-align: center;
    font-weight: bold; 
    margin: 0 0 10px 0;
}

body.homepage, body.subpage, body.nobackground { 
    background-color: #FFFFE0;
    text-align: center;
    margin: 0;
    padding: 0;
}

p,b,i,em,dt,dd,dl,sl,caption,th,td,tr,u,blink,select,option,form,div,li { 
    font-family: Verdana, Arial, sans-serif; 
    font-size: 16px;
    vertical-align: top;
}
p.small { font-family: Verdana, Arial, sans-serif; font-size: 14px; text-align: justify; }

/* ==========================================
   2. RE-ENGINEERED CONTAINER FRAMEWORKS
   ========================================== */
.site-container {
    width: 100%;
    max-width: 990px;
    margin: 0 auto;
    box-sizing: border-box;
}

.header-outer-table {
    width: 100%;
    max-width: 990px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* Vertically centers titles relative to the wheel emblem cell */
.header-inner-table {
    width: 100%;
    text-align: left;
}
.header-inner-table td {
    vertical-align: middle !important;
}

/* Holds logo dimensions cleanly on desktop viewports */
.logo-crop-box {
    width: 190px;
    height: 160px;
    overflow: hidden;
    display: block;
}
.site-logo-img {
    width: auto;
    height: auto;
    display: block;
}

.language-bar-strip {
    width: 100%;
    text-align: right !important;
}

/* Temple Banner Image Frame */
.temple-banner-frame {
    width: 928px;
    max-width: 100%;
    height: 336px;
    overflow: hidden;
    margin: 20px auto 0 auto;
    box-sizing: border-box;
}
.temple-photo-asset {
    width: 100%;
    height: auto;
    margin-top: -195px;
    display: block;
}

/* Content block locks exactly to 928px width layout tracks */
.menu-content-block {
    background-color: #EDE9BA !important;
    width: 928px;
    margin: 0 auto;
    position: relative; 
    overflow: hidden; 
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/* Handles desktop offsets cleanly via alignment thresholds */
.menu-links-wrapper {
    width: 100%;
    max-width: 928px;
    padding-right: 250px; 
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    text-align: center;
}

.menu-spacer-element {
    height: 75px; 
}

/* Locks the lotus flower overlay cleanly into the bottom right bounds */
.lotus-decorative-box {
    position: absolute;
    bottom: 0px; 
    right: 0px;
    width: 410px;
    height: 300px;
    overflow: hidden;
    z-index: 1; 
}
.lotus-photo-asset {
    width: auto;
    height: auto;
    margin-left: -555px;
    margin-top: -740px;
    display: block;
}

/* ==========================================
   3. MOBILE RESPONSIVENESS OVERRIDES
   ========================================== */
@media screen and (max-width: 768px) {
    table, .header-outer-table, .header-inner-table {
        width: 100% !important;
        display: block;
    }
    
    tbody, tr, td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Fixed Mobile Logo scaling configurations */
    .logo-column {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
    .logo-crop-box {
        width: 100px !important;
        height: 85px !important;
        margin: 10px auto 0 auto !important;
        position: relative;
    }
    .site-logo-img {
        width: 520px !important; 
        max-width: none !important;
        height: auto !important;
        position: absolute;
        top: 0px !important;
        left: 0px !important;
        margin: 0 !important;
    }

    /* Tighten typography gap spacing above language strip */
    .header-inner-table td {
        text-align: center !important;
        padding: 0 !important;
    }
    h1 {
        font-size: 18px !important;
        padding: 0 15px !important;
        margin: 5px auto 0 auto !important;
        line-height: 1.3 !important;
    }
    h1 br {
        display: none !important; 
    }
    .main-title-text {
        font-size: 18px !important;
    }
    .main-title-text-chn {
        font-size: 18px !important;
        display: block;
        margin-top: 5px;
    }

    /* Keep switcher links right-aligned inside mobile layouts */
    .language-bar-strip {
        display: block !important;
        text-align: right !important;
        width: 100% !important;
    }
    .language-bar-strip p { 
        margin: 0 !important; 
        padding: 5px 15px 5px 0 !important; 
        text-align: right !important;
    }

    /* Responsive scaling tracking parameters for main banner image */
    .temple-banner-frame {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 928 / 336; 
        margin-top: 10px;
    }
    .temple-photo-asset {
        margin-top: -21%; 
    }

    /* Main body background extends to fit full mobile screens */
    .menu-content-block {
        width: 100% !important;
        height: auto !important;
        flex-direction: column;
        align-items: center;
    }

    /* Strips desktop offsets so links text centers nicely on phones */
    .menu-links-wrapper {
        padding-right: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .menu-spacer-element {
        height: 25px; 
    }

    h2.homepage {
        font-size: 22px !important;
        margin-bottom: 12px;
    }
    a.homepage:link, a.homepage:visited { font-size: 22px !important; }

    /* FLUID MOBILE LOTUS: Uses a tight clip-path matrix mask bounding box. 
       This cuts out the flower bloom natively while making margins 100% transparent. */
    .lotus-decorative-box {
        position: relative !important;
        width: 250px !important;
        height: 200px !important;
        right: auto !important;
        bottom: auto !important;
        overflow: hidden !important;
        background-color: transparent !important;
    }
    .lotus-photo-asset {
        width: 615px !important; 
        max-width: none !important;
        height: auto !important;
        position: absolute;
        margin: 0 !important;
        left: -338px !important; 
        top: -438px !important;  
        /* Stencil mask hides all yellow desktop border leakage */
        clip-path: inset(1px 1px 1px 1px); 
    }

    div.imageright, div.imageleft { float: none !important; margin: 15px auto !important; width: 100% !important; }
    div.imagecentre { width: 100% !important; }
}

/* ==========================================
   4. LIGHTBOX & OVERLAY CODE (Preserved)
   ========================================== */
#lightbox{ background-color:#eee; padding: 10px; border-bottom: 2px solid #666; border-right: 2px solid #666; }
#lightboxDetails{ font-size: 0.8em; padding-top: 0.4em; }	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }
#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }
#overlay{ background-image: url(overlay.png); }
a.img:link img, a.img:visited img, a.img:hover img { color: transparent; border-color: transparent; vertical-align: top; }