/*=========================================================
    Bible Activity Book
=========================================================*/

*{
    box-sizing:border-box;
}

body{

    margin:0;
    padding:0;

    font-family:Verdana, Arial, sans-serif;

    background:#f4f1e8;

    color:#222;
}


/*=========================================================
    Header
=========================================================*/

header{

    background:#7b4b1f;

    color:white;

    text-align:center;

    padding:20px;

    border-bottom:4px solid #503111;
}

header h1{

    margin:0;

    font-size:2em;
}

#navigation{

    margin-top:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;
}

/*=========================================================
    Main
=========================================================*/

main{

    max-width:1500px;

    margin:auto;

    padding:20px;
}

h2{

    text-align:center;

    margin-bottom:5px;
}

#referenceRow{

    text-align:center;

    font-style:italic;

    margin-bottom:20px;

    color:#666;
}


/*=========================================================
    Side-by-side layout
=========================================================*/

#content{
    display:flex;
    gap:30px;
    align-items:flex-start;
}


/*=========================================================
    Image panel
=========================================================*/

#imagePanel{
    width:360px;
    flex-shrink:0;
    text-align:center;
}

#storyImage{
    width:340px;
    border:2px solid #999;
    cursor:pointer;
    box-shadow:4px 4px 10px rgba(0,0,0,.25);
    transition:.25s;
}

#storyImage:hover{
    transform:scale(1.03);
    box-shadow:8px 8px 18px rgba(0,0,0,.35);
}


/*=========================================================
    Story
=========================================================*/
#bookSelect{

    font-size:1em;

    font-family:inherit;

    padding:3px 6px;

    min-width:140px;
}

#storyTotal{

    font-weight:bold;
}

#navigation label{

    font-weight:bold;
}

#storyPanel{
    flex:1;
    background:white;
    border-radius:10px;
    padding:25px;
    box-shadow:0 0 12px rgba(0,0,0,.15);
}

#storyText{
    font-size:1.15em;
    line-height:2.1;
    text-align:justify;
}
#storyNumber {
    width: 3em;
    text-align: center;
    font-size: 1em;
    padding: 2px;
}
/*=========================================================
    Fill-in blanks
=========================================================*/

.blank{

    font-size:1em;

    font-family:inherit;

    text-align:center;

    border:none;

    border-bottom:2px solid #000;

    background:#fffff8;

    outline:none;

    padding:2px;

    margin:0 2px;
}

.blank:focus{

    background:#ffffcc;
}


/*=========================================================
    Buttons
=========================================================*/

#buttons{

    margin-top:30px;

    display:flex;

    flex-wrap:wrap;

    gap:12px;
}

button{

    font-size:1em;

    padding:10px 18px;

    border:none;

    border-radius:6px;

    background:#7b4b1f;

    color:white;

    cursor:pointer;

    transition:.2s;
}

button:hover{

    background:#9b6230;
}

button:disabled{

    opacity:.5;

    cursor:not-allowed;
}


/*=========================================================
    Modal
=========================================================*/

#imageModal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.85);

    justify-content:center;

    align-items:center;

    z-index:1000;
}

#largeImage{

    max-width:90vw;

    max-height:90vh;

    background:white;

    box-shadow:0 0 25px black;
}

#closeModal{

    position:absolute;

    top:15px;

    right:30px;

    color:white;

    font-size:40px;

    cursor:pointer;

    user-select:none;
}


/*=========================================================
    Responsive
=========================================================*/

@media (max-width:1000px){

    #content{

        flex-direction:column;

        align-items:center;
    }

    #imagePanel{

        width:auto;
    }

    #storyImage{

        width:300px;
    }

    #storyPanel{

        width:100%;
    }

    #buttons{

        justify-content:center;
    }

}

/* =========================================================
   STORIES PAGE — BB BIBLE HELPS BLUE VERSION
   Final visual override
   ========================================================= */

html, body {
    background: #dcecfb !important;
    color: #111 !important;
}

/* BLUE navigation/header — not white */
body > header {
    background: #0755b4 !important;
    color: #fff !important;
    border-bottom: 3px solid #124a99 !important;
    padding: 7px 10px !important;
    box-shadow: 0 2px 7px rgba(0,45,110,.20) !important;
}

#navigation {
    margin-top: 0 !important;
    gap: 6px !important;
}

#navigation label {
    color: #fff !important;
    font-size: .88em !important;
}

#navigation button {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: .82em !important;
    line-height: 1.1 !important;
    padding: 5px 8px !important;
    min-height: 28px !important;
    border: 1px solid rgba(255,255,255,.8) !important;
    border-radius: 4px !important;
    background: #0755b4 !important;
    color: #fff !important;
}

#navigation button:hover {
    background: #0645a5 !important;
}

#navigation select {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: .84em !important;
    min-height: 28px !important;
    padding: 3px 6px !important;
    border: 1px solid #9aa9bb !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #222 !important;
}

#storyTotal {
    color: #fff !important;
    font-size: .84em !important;
}

/* Main heading */
h2 {
    color: #0645a5 !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: clamp(20px, 1.7vw, 27px) !important;
    font-weight: 700 !important;
}

/* Scripture reference */
#referenceRow {
    color: #064db2 !important;
}

/* Story card */
#storyPanel {
    background: #fff !important;
    border: 1px solid #79a9df !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0,60,130,.08) !important;
}

/* Image */
#storyImage {
    border: 2px solid #79a9df !important;
    box-shadow: 0 2px 7px rgba(0,45,110,.20) !important;
}

/* Smaller action buttons */
#buttons {
    margin-top: 18px !important;
    gap: 6px !important;
}

#buttons button,
#showImageBtn {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: .82em !important;
    line-height: 1.1 !important;
    padding: 6px 9px !important;
    min-height: 29px !important;
    border: 1px solid #0755b4 !important;
    border-radius: 4px !important;
    background: #0755b4 !important;
    color: #fff !important;
}

#buttons button:hover,
#showImageBtn:hover {
    background: #0645a5 !important;
}

/* Fill-in fields */
.blank {
    background: #f8fafc;
    border-bottom: 2px solid #0755b4 !important;
}

.blank:focus {
    background: #eaf4fc !important;
}

@media (max-width: 1000px) {
    #storyPanel {
        width: 100% !important;
    }
}

@media (max-width: 560px) {
    body > header {
        padding: 6px !important;
    }

    #navigation {
        gap: 4px !important;
    }

    #navigation button {
        font-size: .78em !important;
        padding: 4px 6px !important;
    }

    #navigation select {
        font-size: .8em !important;
    }
}