/* Web version */
:root {
    --myBrownColor: rgb(120,50,5);
    --myGoldColor:  palegoldenrod;
    --inputBgColor: #fff8bf;
    --standardFont:     Arial, Helvetica, sans-serif;
    --narrowFont:       Archivo Narrow;
    --smallIconSize:    18px;
    --stdIconSize:      24px;
    --largeIconSize:    28px;
    --iconDistanceX:    18px;
    --smallFontSize:    0.8rem;
    --widStyleCtrlCol1:  95px; /* total is 340px. Add 2x7px for padding => 354px see below */
    --widStyleCtrlCol2:  15px;
/*  --widStyleCtrlCol3:  135px;   MOVED to device dependent code (see in this file below) */
    --widStyleCtrlCol4:  40px;
    --widStyleCtrlCol5:  28px;
    --widStyleCtrlCol6:  28px;
/*  --widStyleCtrlModal: 335px resp. 356px;   MOVED to device dependent code (see in this file below) */
    --maxHeaderWidth:    1200px;                        /* was 1440px before  */
    --headerColumnsLeftRight: 40px;
    --weakBoxShadow: 5px 5px 7px rgba(0,0,0,0.4);
    --stdBoxShadow: 10px 10px 5px #333;
    
    /* new as of September 2025 */
    --tabContentColor:   hsla(40, 100%, 100%, 0.9);     /* color for active tab and content */
    --inactiveTabColor:  hsla(0,   0%,   75%, 0.9);     /* color of inactive menu tabs */
    --InstrTitleColor:   hsla(0,   0%,   70%, 0.5);     /* background color of title bar for instructions */
    --InstrContnColor:   hsla(0,   0%,   90%, 0.9);     /* background color of content of instruction boxes*/
    --myGoldColor:          palegoldenrod;
    --inputBgColor:         hsla(55, 100%,90%,0.5);     /* background of SELECT, INPUT, TEXTAREA */
    --resultBgColor:        hsla(55, 100%,90%,0.5);     /* results of freetext interpretation, Word tab 2 */
    --ButtonFaceColor:  hsla(0,   0%,  70%, 0.3);
    --ButtonHoverColor: hsla(0,   0%,  70%, 0.5);
    --ButtonShadowColor:hsla(0,   0%,  50%, 0.5);
    --ButtonActiveBorderColor:hsl(0, 0%, 50%);      /* grey */

}

* {box-sizing: border-box;}

body {
    --OneDigitWidth: 18px;
    border: 0;
    margin: 0;
    font-size: 10px;
    font-family: var(--standardFont);
    overflow-y: auto;
}
body.help{
    font-size: 14px;
}

p {margin-top: 0.5em;}

h1,h2,h3,h4 { margin: 0; padding:0; border:0; text-align: center; }

h1 {
    color:var(--myGoldColor);
    text-shadow: 2px 2px 3px black;
    font-family: Suez One;
}

    h2 {
        color: #555;
        font-size: 1.0rem;
        font-weight:800;
        text-align:left;
    }
    h3 {
        color: #444;
        font-size: 0.9rem;
        font-weight:700;
        text-align:left;
    }

    a { color: black; text-decoration:underline; }

@supports (-webkit-background-clip: text) {
    h1 {
        position: relative;
        background: linear-gradient( to right, #cb9b51 0%, #f6e27a 30%, #f6f2c0 50%, #f6e27a 70%, #cb9b51 100% );
        background-size:100% 100%;
        color:transparent;
        text-shadow:none;
        -webkit-background-clip: text ;
    }
    h1::after {
        position: absolute;  left: 0px;	top: 0; z-index: -1;
        background: none;
        content: attr(data-heading);
        text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
    }
}

ol, ul {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    padding-inline-start: 36px;
}

button, input[type=submit], label.FI {
    background:             linear-gradient(to bottom, rgba(240,240,240,0.5), rgba(192,192,192,0.5));
    background-size:        contain;
    background-position:    center;
    background-repeat:      no-repeat;
    border-style:           solid;
    border-width:           1px;
    border-color:           #ddd #999 #777 #bbb;
    cursor:                 pointer;
}
   button:hover    { background-color: #ddd!important; }
   button:disabled {
       opacity:0.4;
       pointer-events:none;
   }

button.FscIcon {    /* fullscreen icon in top right corner */
    position: absolute;
    top: 2px;
    right: 0;
}

button.sendMail {
    color:var(--myBrownColor);
    padding:4px;
}

button.editIcon {
    background-image: url('../images/pencil.png');
}

label {
    font-family: var(--narrowFont);
    font-size: 0.8rem;
    margin-top: 3px;
}
    label.lblMain {
        text-align: right;
        margin-top: 6px;
    }
    label.lblContact {
        font-size: 0.9rem;
        text-align: right;
        margin-top: 6px;
        margin-right: 3px;
    }

table {
    margin: 0;
    border-collapse: collapse;
}

#divHeader {
    border:         0px dashed red;
    display:        grid;
    grid-template-columns: var(--headerColumnsLeftRight) 1fr var(--headerColumnsLeftRight);
    margin-left:    var(--outerMarginLR);
    margin-right:   var(--outerMarginLR);
    max-width:      var(--maxHeaderWidth);
    width:          100%;
}
#divSelectionElements {
    border: 0px dashed red;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
/*    margin-left:    var(--outerMarginLR);
    margin-right:   var(--outerMarginLR);*/
    max-width:      var(--maxHeaderWidth);
    width:          98%;
}
div.divSubSelection {
    display: flex;
    flex-direction: row;
}
#divSearchElements {
    border: 1px dashed red;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left:    var(--outerMarginLR);
    margin-right:   var(--outerMarginLR);
    max-width:      var(--maxHeaderWidth);
    width:          100%;
}

#copyRight {
    font-size:1.3em;
    width:99.8% ;
    text-align:center;
    padding:4px;
}

#cookies {
    color: red;
    font-size: 0.8rem;
    position:absolute;
    bottom:5px;
    text-align: center;
    width: 99.8%;
}
    #cookies a {
        cursor: pointer;
        text-decoration: underline;
    }

.cssDisplayBox {
    position:   relative;
    display:    grid;
    margin-left: 0px;
    margin-right: 2px;
}

div.totalVerse { /* contains 1 verse including verse no and text for start (=usually left) alignment */
    display: flex;
    align-items: flex-start;
    border: 0px dashed green;
    justify-content: flex-start;
}
.cssVerseNo {                      /* contains 1 single verse no */
    margin-right: 0.2em;
    border: 0px dotted red;
    text-shadow: none;
    position:relative;
}

.cssVersesBody { margin:0;  }
.cssScrollBox { 
    position: relative;
    width:auto;     max-width: 100%;
    height:auto;    max-height: 100%;
}

#pageTitle {
  	width: 100%;
	display: flex;
	justify-content: center;
    margin-bottom:5px;
}

/*#region web page 2*/

div.webSearchElements {
    display:flex; flex-wrap:wrap;
    justify-content: space-between;
    width:100%;
    max-width: var(--maxHeaderWidth);
    border:0px dashed orange;
}
div.webSearchElements > *:first-child   { width:30%; min-width:250px; height:50px; }
div.webSearchElements > *:nth-child(2)  { width:20%;    }   /* from book */
div.webSearchElements > *:nth-child(3)  { width:20%;    }   /*   to book */
#btnResetFtSearch                       { width:30px; height:30px; margin-top:15px; }       /* reset button */
#btnExecSearch3                         { width:14%; min-width:120px; margin-top:10px;  }   /* exec search button */
#inpFullTextSearch                      { width:76%;    }   /* input search text */
#divMessage3                            { width:100%; padding:4px 0 0 0;     }              /* instructions */
#divInfoPage2                           { width:100%; font-size:1.4em; text-align:center; } /* feedback */

@media screen and (max-device-width: 799px) {
    /* hide elements which need a minimal screen width of 800px */
   .minScreenWidth800   { display: none; }
   #btnExecSearch3      { margin-top:0!important; }   /* exec search button */
   #inpFullTextSearch   { width: 100%!important; }
}


/*#region Instructions box and full text search */

div.instrTitle {
    position:relative;
    background-color:var(--InstrTitleColor);
    border-style:solid;
    border-width:1px;
    border-color:#ddd #999 #777 #bbb;
    cursor:pointer;
    font-weight:500;
    font-size:1.2em;
    margin:3px 0 0 0;
    padding:4px;
    height:var(--stdIconSize);
    width:100%;
}
div.divCollapsed {
    display:none!important;
}
div.divExpanded {
    background-color: var(--InstrContnColor);
    border-style:solid;
    border-width:0px 1px 1px 1px;
    border-color:#ddd #999 #777 #bbb;
}
div.instruction {
    font-size:0.8rem;
    background-color:#efefef;
    padding:3px 3px 3px 5px;
    height:100%;
    width:100%;
}

/* styles used in full-text search */
span.fts_errorMsg {
    color:red;
    font-size:0.85rem;
}
span.fts_info_orange    { color:darkorange; font-size:1.0rem; }
span.fts_info           { color:blue;       font-size:1.0rem; }
span.fts_info_green     { color:green;      font-size:1.0rem; }

span.fts_reference {}
span.fts_reference2 {}

span.fts_foundPart {
    /*background-color:yellow;    /* mark found text part inside a verse */
}

/*#endregion */


/*#region Spinner to signal waiting during AI execution */

.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid rgba(0, 128, 0, 0.2);   /* soft green base */
  border-top: 6px solid #32cd32;            /* bright green highlight */
  border-radius: 50%;
  animation: spin 1s ease-in-out infinite;  /* smoother and faster */
  position: absolute;  top: 20px;  right: calc(50% + 20px);
  transform: translateX(-50%);              /* cleaner than margin-left */
  z-index: 9999;
}
.hidden {
  display: none;
}
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*#endregion Spinner to signal waiting */

/*#endregion*/

/*==============================================================================================*/
/*#region for WIDE SCREEN only                                                                  */
/*==============================================================================================*/
@media screen and ( min-device-width:601px) {
    body {
        --modalContainerTop: 72px;
        --heightModalInputLine: 28px;
        --outerMarginLR: 10px;
        --widStyleCtrlCol3: 135px;
        --widStyleCtrlModal: 356px;
        --VersesLblWidth: 48px;
    }

    button.stdIconButton {
        width:  var(--stdIconSize);
        height: var(--stdIconSize);
        margin: 1px 2px;
    }

    h1 {
        font-size: 1.8rem;
        letter-spacing: 0.3em;
        margin-bottom: 0.1em;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        margin-top: 0.5em;
        font-size: 1.2rem;
        text-align: left;
    }

    h4 {
        margin-top: 0.3em;
        font-size: 1.0rem;
        text-align: left;
    }

    label.lblMain { /* for labels on the main screen, eg. 'Book:', 'Chapter:' ...*/
        font-family: var(--standardFont);
        margin-right: 5px;
        min-width: 65px;
    }

    /* the container box to display the bible text */
    .cssDisplayBox {
        margin-top: 12px;
    }
}
/*#endregion*/

/*==============================================================================================*/
/*#region for SMARTPHONES only                                                                  */
/*==============================================================================================*/
@media screen and (max-device-width: 600px) {

    body {
        --VersesLblWidth: 54px;
        --modalContainerTop: 34px;
        --heightModalInputLine: 35px;
        --outerMarginLR: 0px;
        --widStyleCtrlCol3: 115px;
        --widStyleCtrlModal: 335px;
    }

    button.stdIconButton {
        width: var(--largeIconSize);
        height: var(--largeIconSize);
        margin: 3px 1px 0 1px;
    }

    button.cameraIcon {
        background-color: #dcffdc;
    }

    h1 {
        font-size: 1.3rem;
        letter-spacing: 0.2em;
        margin-top: 0.1em;
    }

    h2 {
        font-size: 1.1rem;
        margin-top: 0;
    }

    h3 {
        margin-top: 0.5em;
        font-size: 1.0rem;
        text-align: left;
    }

    h4 {
        margin-top: 0.3em;
        font-size: 0.9rem;
        text-align: left;
    }

    label.lblMain { /* for labels on the main screen, eg. 'Book:', 'Chapter:' ...*/
        font-family: var(--narrowFont);
        margin-right: 2px;
        width: 55px;
    }

    /* the container box to display the bible text */
    .cssDisplayBox {
        margin-top: 3px;
    }

}

/*#endregion*/