/* =========================================================
   ئۇيغۇرچە فونت — بارلىق بەت ۋە تېلېفونلار
========================================================= */
@font-face {
    font-family: "UKIJ CJK";
    src: url("./UKIJCJK.woff2") format("woff2"),url("./UKIJCJK.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html,
body,
body * {
    font-family: "UKIJ CJK", Arial, "Noto Sans Arabic", sans-serif !important;
}

input,
button,
textarea,
select {
    font-family: "UKIJ CJK", Arial, "Noto Sans Arabic", sans-serif !important;
}

/* =========================================================
   قۇتادغۇبىلىك كىتابخانىسى — ئورتاق كۈندۈز / كېچە لايىھىسى
   بۇ ھۆججەتنى ھەممە HTML بەت بىرلىكتە ئىشلىتىدۇ.
========================================================= */

:root {
    --site-bg: #f6f0e5;
    --site-bg-soft: #fbf8f2;
    --site-card: #fffdf9;
    --site-text: #44352d;
    --site-text-soft: #806f62;
    --site-brown-dark: #4b3327;
    --site-brown: #70503d;
    --site-border: #e8dccb;
    --site-gold: #e2c98d;
    --site-footer: #39261d;
    --site-shadow: rgba(75, 51, 39, 0.08);
}

body.dark-mode {
    --site-bg: #211b18;
    --site-bg-soft: #29221e;
    --site-card: #302824;
    --site-text: #f1e7da;
    --site-text-soft: #bcae9f;
    --site-brown-dark: #171311;
    --site-brown: #8d6b52;
    --site-border: #4a3b33;
    --site-gold: #e2c98d;
    --site-footer: #100e0d;
    --site-shadow: rgba(0, 0, 0, 0.28);
}

html, body {
    background-color: var(--site-bg) !important;
    color: var(--site-text) !important;
}

body {
    transition: background-color .3s ease, color .3s ease;
}

/* Main backgrounds */
.hero,
.section,
.books-section,
.contact,
.info-section {
    background-color: var(--site-bg) !important;
    color: var(--site-text) !important;
}

/* Header / top areas */
header,
.navbar,
.site-header {
    background-color: var(--site-brown-dark) !important;
    color: #fff !important;
}

/* Typography */
.hero h1,
.hero h2,
.section-title,
.page-header h1,
.page-header h2,
.books-section h2,
.book-title,
.book-card h3 {
    color: var(--site-text) !important;
}

.hero p,
.page-header p,
.book-author,
.book-price,
.book-info p,
.books-section p {
    color: var(--site-text-soft) !important;
}

/* Cards */
.card,
.book-card {
    background-color: var(--site-card) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
    box-shadow: 0 5px 20px var(--site-shadow) !important;
}

/* Images / cover areas */
.book-image,
.book-cover {
    background-color: var(--site-bg-soft) !important;
    border-color: var(--site-border) !important;
}

/* Buttons */
.button,
.book-button,
.back-button,
.detail-button {
    background-color: var(--site-brown) !important;
    color: #fff !important;
}

.button:hover,
.book-button:hover,
.back-button:hover,
.detail-button:hover {
    background-color: var(--site-brown-dark) !important;
}

/* About / information */
.about {
    background-color: var(--site-brown-dark) !important;
    color: #fff !important;
}

.about h2,
.about p {
    color: #fff !important;
}

/* Footer */
footer {
    background-color: var(--site-footer) !important;
    color: #d8c8b8 !important;
}

/* Theme button */
.theme-toggle,
.theme-button {
    position: fixed !important;
    top: 18px !important;
    left: 18px !important;
    z-index: 99999 !important;

    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 50% !important;

    background: var(--site-brown-dark) !important;
    color: #fff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    font-size: 20px !important;
    line-height: 1 !important;

    box-shadow: 0 4px 14px rgba(0,0,0,.15) !important;
    transition: transform .2s ease, background-color .3s ease !important;
}

.theme-toggle:hover,
.theme-button:hover {
    transform: scale(1.06) !important;
}

/* Mobile */
@media (max-width: 600px) {
    .theme-toggle,
    .theme-button {
        top: 12px !important;
        left: 12px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 18px !important;
    }
}

/* =========================================================
   ABOUT / FOOTER CONTRAST FIX — 2026-08-22
   ئاستىدىكى «بىز ھەققىدە» ۋە footer خەتلىرى رەڭ تالىشىپ قالماسۇن
========================================================= */
.about,
section.about {
    background-color: var(--site-brown-dark) !important;
    color: #ffffff !important;
}

.about h2,
.about p,
section.about h2,
section.about p {
    color: #ffffff !important;
}

footer {
    background-color: var(--site-footer) !important;
    color: #f1e7da !important;
}

/* =========================================================
   INFO SECTION CONTRAST FIX — 2026-08-22
   تۆۋەندىكى «قۇتادغۇبىلىك كىتابخانىسى» بۆلىكىدىكى خەتلەر
   كۈندۈز ھالىتىدە ئاق رەڭ بولۇپ ئارقا كۆرۈنۈش بىلەن تالىشىپ قالماسۇن.
========================================================= */
.info-section,
section.info-section {
    background-color: var(--site-bg) !important;
    color: var(--site-text) !important;
}

.info-section h2,
.info-section p,
section.info-section h2,
section.info-section p {
    color: var(--site-text) !important;
    opacity: 1 !important;
}

body.dark-mode .info-section,
body.dark-mode section.info-section {
    background-color: var(--site-bg) !important;
    color: var(--site-text) !important;
}

body.dark-mode .info-section h2,
body.dark-mode .info-section p,
body.dark-mode section.info-section h2,
body.dark-mode section.info-section p {
    color: var(--site-text) !important;
}


/* FINAL INFO SECTION CONTRAST — 2026-08-22 */
html body section.info-section {
    background: var(--site-bg) !important;
    color: var(--site-text) !important;
}
html body section.info-section h2 {
    color: var(--site-text) !important;
    opacity: 1 !important;
}
html body section.info-section p {
    color: var(--site-text-soft) !important;
    opacity: 1 !important;
}
body.dark-mode section.info-section h2 {
    color: var(--site-text) !important;
}
body.dark-mode section.info-section p {
    color: var(--site-text-soft) !important;
}


/* ===== قۇتادغۇبىلىك لوگوسى ===== */
.kutadgu-site-logo-picture{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    line-height:0;
}
.kutadgu-site-logo{
    width:48px;
    height:48px;
    object-fit:contain;
    flex:0 0 auto;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.22));
}
.kutadgu-brand-text{
    display:inline-block;
}
.logo,.brand,.site-title,.kutadgu-brand-fallback{
    display:inline-flex!important;
    align-items:center;
    gap:10px;
}
.kutadgu-brand-fallback{
    color:inherit;
    text-decoration:none;
    margin-inline-end:14px;
}
@media (max-width:650px){
    .kutadgu-site-logo{
        width:38px;
        height:38px;
    }
    .logo,.brand,.site-title,.kutadgu-brand-fallback{
        gap:7px;
    }
}


/* ===== لوگو چوڭلۇق ئاخىرقى تۈزىتىشى ===== */
header{
    min-height:64px !important;
    height:auto !important;
    overflow:visible !important;
}
header .logo{
    display:inline-flex !important;
    align-items:center !important;
    gap:9px !important;
    width:auto !important;
    height:54px !important;
    max-height:54px !important;
    overflow:hidden !important;
    flex:0 0 auto !important;
}
header .logo img.kutadgu-site-logo{
    display:block !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 0 38px !important;
}
header .kutadgu-brand-text{
    display:inline-block !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
}
@media (max-width:850px){
    header{
        min-height:auto !important;
    }
    header .logo{
        height:46px !important;
        max-height:46px !important;
    }
    header .logo img.kutadgu-site-logo{
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
        min-height:32px !important;
        max-width:32px !important;
        max-height:32px !important;
        flex-basis:32px !important;
    }
}