/*
 * Purpose: 2026 readability layer for the Tamil hadith site. Loaded AFTER
 * style-e3.css and only overrides it: bigger text, calmer colours with
 * readable contrast, compact book tiles, cleaner hadith cards, usable
 * reading controls and a real mobile layout. Removing this one file (and
 * its enqueue in functions.php) restores the previous look.
 */

:root {
    --qnh-blue: #0b63ce;
    --qnh-blue-dark: #084a9c;
    --qnh-tint: #e8f1fd;
    --qnh-tile: #d5e5fb;
    --qnh-tile-hover: #bcd6f8;
    --qnh-tile-border: #a9c4e8;
    --qnh-ground: #f0f0f0;
    --qnh-card: #ffffff;
    --qnh-text: #1c1c1c;
    --qnh-muted: #4a4a4a;
    --qnh-border: #c9d3df;
    --qnh-focus: #ff9d00;
    --qnh-radius: 12px;

    --qnh-font-body: 19px;
    --qnh-font-small: 17px;
    --qnh-font-title: 28px;
    --qnh-font-ui: 18px;
    --qnh-tap: 46px;
    --qnh-search-h: 38px;

    --qnh-tamil-heading: 'Anek Tamil', 'Noto Sans Tamil', 'tahoma', sans-serif;
    --qnh-tamil-body: 'Noto Sans Tamil', 'tahoma', sans-serif;
}

/* ---------- base ---------- */

body,
body.custom-background {
    background-color: var(--qnh-ground);
    color: var(--qnh-text);
    font-size: var(--qnh-font-body);
    line-height: 1.7;
}

a {
    color: var(--qnh-blue);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--qnh-focus);
    outline-offset: 2px;
}

input,
select,
textarea {
    border: 1px solid var(--qnh-border);
    border-radius: 8px;
    background: #fff;
    font-size: var(--qnh-font-ui);
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    background: var(--qnh-blue);
    color: #fff;
    border-radius: 8px;
    font-size: var(--qnh-font-ui);
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
    background: var(--qnh-blue-dark);
}

hr {
    border: 0;
    border-top: 1px solid var(--qnh-border);
    margin: 18px 0;
}

/* ---------- top bar: site name + search ---------- */

/* The top bar is sticky, but its wrapper only held floated columns and so was just as tall
   as the bar: nothing to stick along. flow-root makes the wrapper as tall as the page. */
#container {
    display: flow-root;
}

/* when logged in, stay below the WordPress admin bar (it is not fixed on small screens) */
body.admin-bar #header-third {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar #header-third {
        top: 0 !important;
    }
}

body #header-third {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 24px;
    background: var(--qnh-blue);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

body #header-third > a {
    text-decoration: none;
}

body #header-third .searchbar-title {
    float: none;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.3;
}

body #header-third .search-form {
    position: relative;
    display: flex;
    flex: 0 1 280px;
    float: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

body #header-third .search-form label {
    display: none;
}

body #header-third .search-field {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: var(--qnh-search-h);
    /* room on the right for the search icon button */
    padding: 0 calc(var(--qnh-search-h) + 4px) 0 12px;
    border: 0;
    border-radius: 10px;
    /* soft blue instead of white, so the box does not glare on the blue bar; white while typing */
    background: var(--qnh-tile);
    color: var(--qnh-text);
    font-size: 16px;
    transition: background-color 0.15s ease;
}

body #header-third .search-field:focus {
    background: #fff;
}

body #header-third .search-field::placeholder {
    color: var(--qnh-muted);
}

/* the submit button is a magnifier icon sitting inside the box, at its right end */
body #header-third .search-submit {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--qnh-search-h);
    height: var(--qnh-search-h);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23084a9c' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    color: transparent;
    font-size: 0;
    cursor: pointer;
}

body #header-third .search-submit:hover {
    background-color: var(--qnh-tile-hover);
    color: transparent;
}

/* ---------- page layout ---------- */

#content,
#content-full {
    width: 70.5%;
    margin: 14px 0 14px 1%;
    padding: 22px 26px;
    background: var(--qnh-card);
    border-radius: var(--qnh-radius);
}

body #sidebar {
    width: 26.5%;
    max-width: 26.5%;
    margin: 14px 1% 14px 0;
    padding: 16px;
    background: var(--qnh-card);
    border-radius: var(--qnh-radius);
}

.page-title {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.4;
}

/* ---------- home: book tiles ---------- */

.hadisbooks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.hadisbooks br {
    display: none;
}

.home-book-name,
.home-book-name:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: 78px;
    margin: 0;
    padding: 10px 12px;
    background-color: var(--qnh-tile);
    border: 1px solid var(--qnh-tile-border);
    border-radius: var(--qnh-radius);
    color: var(--qnh-text) !important;
    font-size: 22px;
    line-height: 1.5;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.home-book-name:hover,
.home-book-name:focus-visible {
    background-color: var(--qnh-tile-hover);
    border-color: var(--qnh-blue);
    line-height: 1.5;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(11, 99, 206, 0.25);
    text-decoration: none;
}

/* ---------- lists: category and search results ---------- */

.post-list {
    margin: 0 0 18px;
    border-bottom: 0;
}

.every_hadis {
    margin-bottom: 0;
    padding: 18px 20px;
    background: var(--qnh-card);
    border: 1px solid var(--qnh-border);
    border-radius: var(--qnh-radius);
    box-shadow: 0 2px 8px rgba(8, 74, 156, 0.12);
}

.every_hadis::after {
    content: '';
    display: block;
    clear: both;
}

.post-title {
    margin: 0 0 12px;
}

.post-title.entry-title a {
    color: var(--qnh-blue-dark);
    font-size: 24px;
}

/* compact result cards: tight spacing, no spacer line breaks */
.post-list {
    margin-bottom: 12px;
}

.post-list .every_hadis {
    position: relative;
    padding: 12px 16px;
}

/* the title leaves room on the right for the "Read More" button, pinned on the same line */
.post-list .post-title {
    margin: 0 0 6px;
    padding-right: 9em;
    line-height: 1.3;
    min-height: 40px;
}

.post-list .post-title.entry-title a {
    font-size: 22px;
}

.post-list .post-meta {
    display: none;
}

.post-list .entry-content {
    line-height: 1.6;
}

.post-list .entry-content > br {
    display: none;
}

.post-list .entry-content p {
    margin: 0 0 4px;
}

.post-list .content-list-quality-parent {
    margin: 0 0 8px;
}

.post-list .content-list-quality {
    padding: 3px 12px;
}

.post-list .hadis_content {
    margin: 8px 0 0;
    padding: 8px 14px;
    line-height: 1.8;
}

.post-list .more {
    position: absolute;
    top: 10px;
    right: 16px;
    margin: 0;
    padding: 0;
}

.post-list a.readmore {
    padding: 6px 16px;
}

a.readmore {
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--qnh-blue);
    font-size: var(--qnh-font-ui);
    letter-spacing: 0;
}

a.readmore:hover {
    background: var(--qnh-blue-dark);
    text-decoration: none;
}

.post-nav {
    padding: 14px;
    background-color: var(--qnh-tint);
    border-radius: var(--qnh-radius);
}

.post-nav a {
    display: inline-block;
    min-height: var(--qnh-tap);
    padding: 8px 18px;
    border-radius: 10px;
    background: var(--qnh-blue);
    color: #fff;
    font-weight: 600;
    line-height: 30px;
    box-sizing: border-box;
}

.search-highlight {
    background: #fff2a8;
}

/* ---------- hadith grade badge ---------- */

.content-list-quality {
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: var(--qnh-font-ui);
    font-weight: 700;
}

.quality-label {
    color: #0b2e6b;
}

/* plain text, no box: the grade colours of style-e3.css are switched off */
.content-list-quality,
.post-list .content-list-quality,
.content-list-quality.sahih,
.content-list-quality.layeef,
.content-list-quality.hasan,
.content-list-quality.review,
.content-list-quality.other {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* ---------- reading page ---------- */

.post-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0 0 12px;
    padding: 8px 14px;
    background: var(--qnh-tint);
    border-radius: var(--qnh-radius);
}

.post-title-single.entry-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
}

.qnh-reading-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.qnh-reading-bar .qnh-nav-link,
.qnh-reading-bar .qnh-font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--qnh-tile-border);
    border-radius: 8px;
    color: var(--qnh-blue-dark);
    font-family: var(--qnh-tamil-heading);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.qnh-reading-bar .qnh-font-btn {
    min-width: 42px;
    margin-left: 0;
    font-family: 'tahoma', sans-serif;
    font-size: 15px;
}

/* the arrows are only used on phone, where the words are hidden */
.qnh-reading-bar .qnh-nav-arrow {
    display: none;
}

/* kebab button and the menu that drops from it */
.qnh-menu-wrap {
    position: relative;
    display: inline-flex;
    margin-left: 10px;
}

.qnh-reading-bar .qnh-kebab {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.qnh-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 250px;
    padding: 6px;
    background: #f0f0f0;
    border: 1px solid var(--qnh-tile-border);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(8, 74, 156, 0.22);
}

.qnh-menu[hidden] {
    display: none;
}

.qnh-menu .qnh-menu-item,
.qnh-menu .simplefavorite-button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 6px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--qnh-blue-dark);
    font-family: var(--qnh-tamil-heading);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

.qnh-menu .qnh-menu-item:hover,
.qnh-menu .simplefavorite-button:hover {
    background-color: var(--qnh-tile);
}

.qnh-menu .qnh-menu-icon {
    flex: 0 0 28px;
    font-family: 'tahoma', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.qnh-reading-bar .qnh-nav-link:hover,
.qnh-reading-bar .qnh-font-btn:hover {
    background: var(--qnh-tile);
    border-color: var(--qnh-blue);
    color: var(--qnh-blue-dark);
    text-decoration: none;
}

/* Favorites plugin button: roomier below the hadith, a menu row in the reading bar's menu */
.simplefavorite-button {
    padding: 6px 18px;
}

.qnh-fav-top {
    display: flex;
}

/* the plugin's own text is hidden (font-size 0); icon and caption come from here */
.qnh-menu .qnh-fav-top .simplefavorite-button {
    font-size: 0;
    gap: 0;
}

.qnh-fav-top .simplefavorite-button > * {
    display: none;
}

.qnh-fav-top .simplefavorite-button::before {
    content: '';
    flex: 0 0 28px;
    height: 22px;
    margin-right: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23084a9c' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4.5L6 21z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

.qnh-fav-top .simplefavorite-button::after {
    content: 'Bookmark செய்';
    font-size: 18px;
}

/* already in favourites: filled icon, other caption */
.qnh-fav-top .simplefavorite-button.active::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23084a9c' stroke='%23084a9c' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4.5L6 21z'/%3E%3C/svg%3E");
}

.qnh-fav-top .simplefavorite-button.active::after {
    content: 'Bookmark நீக்கு';
}

#main-content,
.entry-content {
    line-height: 1.7;
    word-spacing: 0;    /* the old sheet adds 1.08px between words; Noto Sans Tamil is wide enough */
}

/* the reading header card already separates the title from the grade */
#main-content > hr:first-child {
    display: none;
}

#gotohadithno {
    font-size: 1em;
}

.hadis_content {
    padding: 14px 18px;
    background: #eef6ee;
    border-radius: var(--qnh-radius);
    line-height: 2.1;
}

#hadis_content_id .hadis_content {
    padding: 0;
    background: none;
    border-radius: 0;
}

.hadis_numbers {
    font-size: 15px;
}

.qnh-reference-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.qnh-copy-btn {
    min-height: var(--qnh-tap);
    padding: 6px 22px;
    font-weight: 600;
}

/* copy dialog */
#copyBoxInner {
    max-width: 400px !important;
    padding: 24px !important;
    background: var(--qnh-ground) !important;
    border-radius: var(--qnh-radius) !important;
    font-size: var(--qnh-font-body) !important;
}

#copyBoxInner label {
    padding: 4px 0;
}

#copyBoxInner input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-right: 10px;
    vertical-align: middle;
}

#copyBoxInner button {
    min-height: var(--qnh-tap);
    padding: 6px 20px !important;
}

/* comments */
/* video shown in a comment (onlinepj link turned into a Vimeo player) */
.qnh-video {
    display: block;
    width: 50%;
    aspect-ratio: 16 / 9;
    margin: 8px 0;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.qnh-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.qnh-video-link {
    font-size: var(--qnh-font-small);
    overflow-wrap: anywhere;
}

.comment-form textarea {
    border: 1px solid var(--qnh-border);
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
}

.comment-form textarea:focus {
    background-color: var(--qnh-tint);
}

/* ---------- sidebar ---------- */

.widget {
    border-bottom: 1px solid var(--qnh-border);
}

.widget-title,
.wp-block-heading,
#sidebar .headbacks {
    margin: 10px 0;
    padding: 8px 12px;
    background-color: var(--qnh-blue);
    border-radius: 8px;
    color: #fff;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4;
}

/* a title is a button: click collapses or expands the section under it */
#sidebar .qnh-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

#sidebar .qnh-section-title:hover {
    background-color: var(--qnh-blue-dark);
}

#sidebar .qnh-section-title::after {
    content: '';
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.15s;
}

#sidebar .qnh-section-title.qnh-collapsed::after {
    margin-top: 0;
    transform: rotate(-45deg);
}

#sidebar .qnh-section-hidden {
    display: none !important;
}

.cat-item,
#sidebar li {
    font-size: var(--qnh-font-ui);
    line-height: 1.9;
}

.rpwe-block a {
    font-size: var(--qnh-font-small);
}

/* recent comments list: compact, so more comments fit on one screen */
#sidebar .wp-block-latest-comments {
    margin: 0;
    padding: 0;
}

#sidebar .wp-block-latest-comments li,
#sidebar .wp-block-latest-comments__comment,
#sidebar li.recentcomments {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.45;
}

#sidebar .wp-block-latest-comments__comment-meta,
#sidebar .wp-block-latest-comments__comment-excerpt,
#sidebar .wp-block-latest-comments__comment-excerpt p {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
}

/* text wraps around the picture and uses the full width below it */
#sidebar .wp-block-latest-comments .wp-block-latest-comments__comment-meta,
#sidebar .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt {
    margin-left: 0;
}

#sidebar .wp-block-latest-comments__comment-avatar {
    float: left;
    width: 36px;
    height: 36px;
    margin: 3px 10px 2px 0;
}

#sidebar .wp-block-latest-comments__comment::after {
    content: '';
    display: block;
    clear: both;
}

/* same for the recent-comments widget markup (.recent-comments-list) */
#sidebar .recent-comments-list li.recent-comment {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.45;
}

#sidebar .recent-comments-list .comment-wrap {
    display: block;
    padding-left: 0 !important; /* the comments plugin forces 50px here */
}

#sidebar .recent-comments-list .comment-wrap::after {
    content: '';
    display: block;
    clear: both;
}

#sidebar .recent-comments-list .comment-avatar {
    position: static;
    float: left;
    margin: 3px 10px 2px 0;
}

#sidebar .recent-comments-list .comment-avatar img {
    display: block;
    width: 36px;
    height: 36px;
}

#sidebar .recent-comments-list .comment-date {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.3;
}

#sidebar .wp-block-latest-comments__comment-date {
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.3;
}

.btnfarooks {
    min-height: 52px;
    padding: 10px 8px;
    font-size: var(--qnh-font-ui);
}

#sidebar select,
#sidebar input[type="text"],
#sidebar input[type="number"] {
    min-height: var(--qnh-tap);
    box-sizing: border-box;
}

.fullsearchbox {
    display: block;
    padding: 18px 20px;
    background-color: var(--qnh-tint);
    border: 1px solid var(--qnh-border);
    border-radius: var(--qnh-radius);
    font-size: var(--qnh-font-ui);
    line-height: 1.6;
}

/* empty paragraphs the editor left behind only add gaps */
.fullsearchbox p:empty {
    display: none;
}

/* the search form: labels above the fields, all on one line that wraps on a phone */
.fullsearchbox .searchandfilter ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 12px 16px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.fullsearchbox .searchandfilter li {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.fullsearchbox .searchandfilter h4 {
    margin: 0 0 4px;
    color: var(--qnh-muted);
    font-family: var(--qnh-tamil-heading);
    font-size: var(--qnh-font-small);
    font-weight: 600;
}

.fullsearchbox .searchandfilter input[type="text"],
.fullsearchbox .searchandfilter select {
    box-sizing: border-box;
    width: 280px;
    max-width: 100%;
    height: var(--qnh-tap);
    margin: 0;
    padding: 0 12px;
    background: var(--qnh-card);
    border: 1px solid var(--qnh-tile-border);
    border-radius: 8px;
    color: var(--qnh-text);
    font-size: var(--qnh-font-ui);
}

.fullsearchbox .searchandfilter input[type="submit"] {
    height: var(--qnh-tap);
    margin: 0;
    padding: 0 26px;
    background: var(--qnh-blue);
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: var(--qnh-font-ui);
    font-weight: 600;
    cursor: pointer;
}

.fullsearchbox .searchandfilter input[type="submit"]:hover {
    background: var(--qnh-blue-dark);
}

/* the book picker: a button that opens a centred dialog of checkboxes (built by the goto-hadith script) */
.fullsearchbox .qnh-book-picker {
    position: relative;
}

.fullsearchbox .qnh-book-picker-toggle,
.fullsearchbox .qnh-book-picker-toggle:hover,
.fullsearchbox .qnh-book-picker-toggle:focus {
    box-sizing: border-box;
    display: block;
    width: 280px;
    max-width: 100%;
    height: var(--qnh-tap);
    margin: 0;
    padding: 0 38px 0 12px;
    overflow: hidden;
    background: var(--qnh-card);
    border: 1px solid var(--qnh-tile-border);
    border-radius: 8px;
    color: var(--qnh-text);
    font-size: var(--qnh-font-ui);
    font-weight: 400;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.fullsearchbox .qnh-book-picker-toggle:hover {
    border-color: var(--qnh-blue);
}

.fullsearchbox .qnh-book-picker::after {
    content: '\25BE';
    position: absolute;
    top: 0;
    right: 14px;
    color: var(--qnh-muted);
    line-height: var(--qnh-tap);
    pointer-events: none;
}

/* the dialog sits in the middle of the page; the wide shadow dims everything behind it */
.fullsearchbox .qnh-book-picker-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 720px;
    max-width: calc(100vw - 24px);
    max-height: 84vh;
    padding: 16px 18px 18px;
    background: var(--qnh-ground);
    border: 1px solid var(--qnh-border);
    border-radius: var(--qnh-radius);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3);
    text-align: left;
}

.fullsearchbox .qnh-book-picker-panel[hidden] {
    display: none;
}

.fullsearchbox .qnh-book-picker-title {
    margin: 0 0 12px;
    color: var(--qnh-blue-dark);
    font-family: var(--qnh-tamil-heading);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}

.fullsearchbox .qnh-book-picker-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--qnh-border);
}

.fullsearchbox .qnh-book-picker-action {
    min-height: 42px;
    margin: 0;
    padding: 0 16px;
    background: var(--qnh-card);
    border: 1px solid var(--qnh-tile-border);
    border-radius: 8px;
    color: var(--qnh-blue-dark);
    font-size: var(--qnh-font-small);
    font-weight: 600;
    cursor: pointer;
}

.fullsearchbox .qnh-book-picker-action:hover {
    background: var(--qnh-tile);
}

.fullsearchbox .qnh-book-picker-action.qnh-book-picker-done {
    min-width: 96px;
    margin-left: auto;
    background: var(--qnh-blue);
    border-color: var(--qnh-blue);
    color: #fff;
}

.fullsearchbox .qnh-book-picker-action.qnh-book-picker-done:hover {
    background: var(--qnh-blue-dark);
}

/* only the list scrolls; the title and the buttons stay in view */
.fullsearchbox .qnh-book-picker-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow-y: auto;
    padding: 2px;
}

.fullsearchbox .qnh-book-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 12px;
    background: var(--qnh-card);
    border: 1px solid var(--qnh-border);
    border-radius: 8px;
    color: var(--qnh-text);
    font-size: var(--qnh-font-ui);
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
}

.fullsearchbox .qnh-book-picker-row:hover {
    border-color: var(--qnh-blue);
}

.fullsearchbox .qnh-book-picker-row:has(input:checked) {
    background: var(--qnh-tint);
    border-color: var(--qnh-blue);
}

.fullsearchbox .qnh-book-picker-row input[type="checkbox"] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    accent-color: var(--qnh-blue);
}

@media (max-width: 640px) {
    .fullsearchbox .qnh-book-picker-toggle,
    .fullsearchbox .qnh-book-picker-toggle:hover,
    .fullsearchbox .qnh-book-picker-toggle:focus {
        width: 100%;
    }

    .fullsearchbox .qnh-book-picker-panel {
        padding: 12px;
    }

    .fullsearchbox .qnh-book-picker-list {
        grid-template-columns: 1fr;
    }
}

/* the examples table: brand-blue head, soft rows, thin borders */
.fullsearchbox table.custom-table {
    width: 100%;
    margin: 14px 0 0;
    padding: 0;
    border: 1px solid var(--qnh-tile-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--qnh-radius);
    overflow: hidden;
    background: var(--qnh-card);
}

.fullsearchbox table.custom-table th,
.fullsearchbox table.custom-table td {
    padding: 12px 14px;
    border: 0;
    border-top: 1px solid var(--qnh-border);
    text-align: left;
    vertical-align: top;
}

.fullsearchbox table.custom-table td + td,
.fullsearchbox table.custom-table th + th {
    border-left: 1px solid var(--qnh-border);
}

.fullsearchbox table.custom-table thead {
    background: var(--qnh-blue);
    color: #fff;
}

.fullsearchbox table.custom-table thead th {
    border-top: 0;
    font-family: var(--qnh-tamil-heading);
    font-weight: 600;
}

.fullsearchbox table.custom-table tbody tr:nth-child(odd) {
    background: var(--qnh-card);
}

.fullsearchbox table.custom-table tbody tr:nth-child(even) {
    background: var(--qnh-tint);
}

.fullsearchbox table.custom-table td + td,
.fullsearchbox table.custom-table td + td * {
    color: var(--qnh-blue-dark) !important;
    font-weight: 600;
}

/* the part-words to type, marked inside the hadith text by the goto-hadith script */
.fullsearchbox mark.qnh-search-hit {
    padding: 1px 0;
    background: #fff3c4;
    border-radius: 3px;
    color: inherit;
}

@media (max-width: 640px) {
    .fullsearchbox {
        padding: 12px 10px;
    }

    .fullsearchbox .searchandfilter li,
    .fullsearchbox .searchandfilter input[type="text"],
    .fullsearchbox .searchandfilter select,
    .fullsearchbox .searchandfilter input[type="submit"] {
        width: 100%;
    }

    /* long Tamil words must wrap, or the table pushes the page wider than the phone */
    .fullsearchbox table.custom-table {
        table-layout: fixed;
    }

    .fullsearchbox table.custom-table th,
    .fullsearchbox table.custom-table td {
        padding: 10px 8px;
        overflow-wrap: anywhere;
    }
}

/* ---------- footer ---------- */

#footer {
    background: var(--qnh-blue-dark);
    font-size: var(--qnh-font-small);
}

/* ---------- tablet and phone: one column ---------- */

@media (max-width: 1150px) {

    #content,
    #content-full {
        float: none;
        width: auto;
        margin: 14px 12px;
        padding: 18px 16px;
    }

    body #sidebar {
        float: none;
        width: auto;
        max-width: none;
        margin: 14px 12px;
        padding: 14px;
    }

    .post-header {
        display: flex;
        margin: 0 0 14px;
        padding: 12px 14px;
    }

    body #header-third .searchbar-title {
        margin: 0;
    }
}

@media (max-width: 640px) {
    /* phone: half width is too small to watch */
    .qnh-video {
        width: 100%;
    }


    body #header-third {
        padding: 10px 12px;
        justify-content: center;
    }

    /* phone: site title centred above the full-width search box */
    body #header-third .searchbar-title {
        font-size: 20px;
        text-align: center;
    }

    body #header-third .search-form {
        flex: 1 1 100%;
    }

    .page-title {
        font-size: 24px;
    }

    .hadisbooks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .home-book-name,
    .home-book-name:visited {
        min-height: 70px;
        padding: 8px 6px;
        font-size: 20px;
        text-align: center;
    }

    .every_hadis {
        padding: 14px;
    }

    .post-title-single.entry-title {
        min-width: 0;
        font-size: 21px;
        overflow-wrap: anywhere;
    }

    /* phone: title on the left, four small icon buttons on the same line */
    .post-header {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 8px 10px;
    }

    .qnh-reading-bar {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 4px;
    }

    .qnh-reading-bar .qnh-nav-text {
        display: none;
    }

    .qnh-menu-wrap {
        margin-left: 0;
    }

    .qnh-reading-bar .qnh-nav-link,
    .qnh-reading-bar .qnh-font-btn {
        width: 38px;
        min-width: 0;
        min-height: 38px;
        padding: 0;
        background: transparent;
        border-color: var(--qnh-tile-border);
        color: var(--qnh-blue-dark);
        font-size: 16px;
    }

    .qnh-reading-bar .qnh-nav-arrow {
        display: inline;
        font-size: 28px;
        line-height: 1;
    }


    /* phone: keep the side gutters thin so the text gets the width */
    #content,
    #content-full {
        margin: 8px 4px;
        padding: 10px 8px;
    }

    body #sidebar {
        margin: 8px 4px;
        padding: 10px 8px;
    }

    /* the word tooltip is 320px wide and hangs off the right edge: pin it to the text column */
    #main-content {
        position: relative;
    }

    .e3tooltip {
        position: static;
    }

    .e3tooltip .e3tooltiptext {
        top: auto;
        left: 0;
        right: 0;
        width: auto;
        margin-left: 0;
    }
}