/* ===========================
   STYLE.CSS – Biblia Web App – FINAL UNIFICAT ADAPTAT
   =========================== */

/* ======= Reset și atribute globale ======= */
* {
    box-sizing: border-box;
    color: inherit;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ======= Body și Main ======= */
body {
    background: #f4f7fb;
    color: #222;
    margin: 0;
    padding: 0;
    font-size: 16px;        /* mai mic decât 17px */
    line-height: 1.5;       /* mai compact */
}

main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
}

/* ======= Titluri ======= */
h1, h2, h3 {
    text-align: center;
    margin: 10px 0;        /* mai compact */
    color: #2b4c7e;
}

h1 { font-size: 26px; line-height:1.2; } /* mai mic și compact */
h2 { font-size: 24px; line-height:1.2; }
h3 { font-size: 20px; line-height:1.2; font-weight: bold; }

/* ======= Search containers ======= */
#searchContainer, #searchForm {
    text-align: center;
    margin: 15px 0;        /* mai compact */
}

/* ======= Formular căutare ======= */
#searchForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;              /* mai compact */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.search-row, .search-top {
    display: flex;
    justify-content: center;
    gap: 8px;              /* mai compact */
    width: 100%;
}

/* ======= Input uniform cu butonul ======= */
.search-row input[type="text"],
.search-top input[type="text"] {
    width: 350px;          /* mai scurt */
    padding: 6px 10px;     /* mai mic */
    font-size: 16px;
    line-height: 1.3;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#searchForm button,
.search-row button,
.search-top button {
    padding: 6px 12px;     /* înălțime similară cu input */
    font-size: 16px;
    line-height: 1.3;
    background: #0078d7;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

#searchForm button:hover,
.search-row button:hover,
.search-top button:hover {
    background: #005fa3;
}

/* ======= Linie 2: 3 dropdown-uri + checkbox ======= */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.filter-row select {
    padding: 6px;
    font-size: 16px;
}

.filter-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 16px;
    margin-left: 4px;
}

.filter-row input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
}

/* ======= Versete ======= */
.verset {
    margin-bottom: 6px;     /* mai compact */
    display: block;
    font-size: 20px;        /* mai mic */
    line-height: 1.5;       /* mai compact */
    text-align: justify;
    font-weight: normal;
}

.verset b:first-child { 
    font-weight: bold;      /* doar referința Gen 1:1 etc */
}

/* ======= Lista versete cu link pe cuvinte + highlight ======= */
ul {
    list-style: none;
    padding: 0;
    margin: 15px auto;
    max-width: 900px;
    font-size: 20px;        /* !!!! dimensiune font versete mai mic */
    text-align: justify;
}

li {
    padding: 6px 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
    line-height: 1.5;       /* mai compact */
    font-weight: normal;
    text-align: justify;
}

li > a:first-child {
    font-weight: bold;      /* referința rămâne bold */
}

.highlight {
    color: red;
    font-weight: bold;
}

/* ======= Index și capitole ======= */
.index, .chapter-index {
    text-align: center;
    margin: 8px 0;
}

.index a, .chapter-index a {
    display: inline-block;
    margin: 4px 6px;
    padding: 4px 10px;
    background: #eee;
    color: #333;
    border-radius: 4px;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s;
}

.index a:hover, .chapter-index a:hover {
    background: #333;
    color: white;
}

.chapter-index a.active {
    background: #0078d7;
    color: white;
    font-weight: bold;
}

/* ======= Link Înapoi la index ======= */
.back-line {
    display: block;
    width: fit-content;
    margin: 6px auto;        /* mai compact */
    padding: 3px 0;
    font-size: 16px;         /* mai mic decât 19px */
    color: #4a3426;
    text-decoration: none;
    letter-spacing: 0.5px;
    position: relative;
    font-weight: bold;
}

.back-line::before,
.back-line::after {
    content: "✠✧✠";
    font-size: 14px;         /* mai mic */
    color: #c2a676;
    margin: 0 5px;
    opacity: 0.85;
}

.back-line:hover {
    color: #7a0000;
}

.back-line:hover::before,
.back-line:hover::after {
    color: #b48a51;
    opacity: 1;
}

/* ======= Paginare ======= */
.pagination {
    text-align: center;
    margin: 8px 0;
}

.pagination a, .pagination strong {
    display: inline-block;
    margin: 2px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
    background: #eee;
    font-weight: bold;
    font-family: "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
    color: #333;
}

.pagination a:hover {
    background: #333;
    color: white;
}

/* ======= HR stilizat ======= */
hr {
    border: 0;
    border-top: 2px solid #eee;
    margin: 20px 0;
}



/* ======= Responsive ======= */
/* ======= Responsive ======= */
@media(max-width:768px){
 /* Font versete pe telefon — 20px */
    .verset,
    ul,
    li {
        font-size: 20px !important;   /* <= EXACT cerința */
        line-height: 1.4;             /* puțin mai compact pe mobil */
        text-align: justify;             /* optional: mai ușor de citit */
    }

    /* Input și buton ocupa 100% lățime */
    #searchForm input[type=text],
    #searchForm select,
    #searchForm button,
    .search-row input[type=text],
    .search-top input[type=text],
    .search-row button,
    .search-top button {
        width: 100%;
    }

    /* Linie 1: input + buton -> buton sub input */
    .search-row,
    .search-top {
        flex-direction: column;
        gap: 6px;  /* mic spațiu între input și buton */
        align-items: stretch;
    }

    /* Linie 2: dropdown + checkbox -> vertical */
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-row label {
        white-space: normal;
        margin-left: 0;
    }
}
/* ======= Tooltip ======= */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background: #333;
    color: #fff;
    text-align: left;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 100;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.9em;
    white-space: pre-line;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip .nolink {
    font-weight: bold1;
}