/* ------------------------------------------------------
   RESET & BASE STYLES
------------------------------------------------------ */

html.suppress-reader-mode * {
    visibility: visible !important;
}

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

body {
    background: url(theme/main-bg.jpg) repeat center;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #3b3b3b;
}

img {
    border: 0;
}

h3 {
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 40px;
}

/* ------------------------------------------------------
   MAIN PAGE STRUCTURE
------------------------------------------------------ */

#wrapper {
    background:url(theme/ribbons-horizontal.png) repeat-x 0px 80px;
}

.container {
    width: 960px;
    margin: 0 auto;
}

/* HEADER */
#header-wrap .container {
    overflow: hidden;
}

.phone-number .wsite-text {
    font-size: 14px;
}

/* CONTENT WRAPPER */
#content-wrap .container {
    background:#fff url(theme/content-left-bg.jpg) repeat-y 11px 0;
    box-shadow:0 0 5px 3px rgba(0,0,0,0.13);
}

/* LEFT COLUMN (sidebar) */
#content-left {
    float: left;
    width: 269px;
}

/* RIGHT COLUMN (main content) */
#content-right {
    float: right;
    width: 691px;
}

/* LOGO AREA */
#logo-wrap { position: relative; }

#logo-top {
    background:url(theme/logo-top.png) no-repeat;
    width:269px; height:28px;
    position:absolute; top:-3px;
}

#logo {
    background:url(theme/logo-bg.png) repeat-y;
    padding:65px 22px 40px;
    text-align:center;
}

#logo-bottom {
    background:url(theme/logo-bottom.png) no-repeat;
    width:269px; height:38px;
}

#logo, #logo a {
    font-size:26px;
    color:#3b3b3b;
    text-transform:uppercase;
}

/* MAIN CONTENT WRAP */
#main-wrap {
    padding:20px 20px 20px 0;
}

/* ------------------------------------------------------
   GALLERY
------------------------------------------------------ */

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px 0;
    justify-items: center;
}

.thumbnail {
    width: 100%;
    max-width: 220px;
    text-align: center;
}

.thumbnail img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}

.thumbnail img:hover {
    transform: scale(1.05);
}

/* ------------------------------------------------------
   MODAL
------------------------------------------------------ */

.modal {
    display:none;
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(0,0,0,0.8);
}

.modal-content {
    display:block;
    margin:auto;
    max-width:80%;
    max-height:80%;
}

#caption {
    text-align:center;
    color:#ccc;
    padding: 10px;
}

.close {
    position:absolute;
    top:10px;
    right:25px;
    color:white;
    font-size:35px;
    font-weight:bold;
    cursor:pointer;
}

.prev, .next {
    cursor: pointer;
    position:absolute;
    top:50%;
    padding:16px;
    color:white;
    font-size:24px;
    font-weight:bold;
    user-select:none;
    transform:translateY(-50%);
    transition:0.3s;
}

.prev { left:0; }
.next { right:0; }

.prev:hover, .next:hover {
    background:rgba(0,0,0,0.8);
}

/* ------------------------------------------------------
   MOBILE FIXES — LAYOUT + BACKGROUND
------------------------------------------------------ */

@media (max-width: 1000px) {

    /* Make container responsive */
    .container {
        width: 100% !important;
        padding: 0 10px !important;
    }

    /* Stack sidebar + main content */
    #content-left, #content-right {
        float: none !important;
        width: 100% !important;
    }

    /* Rainbow sidebar background full height */
    #content-wrap .container {
        background-size: cover !important;
        background-repeat: repeat-y !important;
        min-height: 100vh !important;
    }

    /* Gallery adjusts to smaller screens */
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .gallery {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------
   MOBILE FIXES — MODAL BUTTON SIZES
------------------------------------------------------ */

@media (max-width: 800px) {

    #modal .close {
        font-size: 60px !important;
        top: 15px !important;
        right: 20px !important;
    }

    #modal .prev,
    #modal .next {
        font-size: 45px !important;
        padding: 28px !important;
    }

    #modal {
        background: rgba(0,0,0,0.92) !important;
    }
}

/* Hide modal close button on mobile */
@media (max-width: 800px) {
    #modal .close {
        display: none !important;
    }
}

/* Mobile: use a larger combined header image */
@media (max-width: 800px) {

    /* hide desktop header pieces */
    #logo-top,
    #logo,
    #logo-bottom {
        display: none !important;
    }

    /* mobile header */
    #mobile-logo {
        background: url(theme/header-mobile.png) no-repeat center top;
        background-size: contain;
        width: 100%;
        height: 320px;     /* bigger and clearer */
        margin: 0 auto 20px;
    }
}


/* Reduce space below mobile header image */
@media (max-width: 800px) {

    #mobile-logo {
        margin-bottom: 5px !important;   /* was 20px — tighten */
    }

    #main-wrap h3:first-of-type {
        margin-top: 10px !important;     /* was ~40px — reduce gap above H3 */
    }
}