/*
 Theme Name: Prespa Child
 Template: prespa
*/

/* ======================
   TYPOGRAPHY
   ====================== */

body {
    font-family: 'Noto Serif', serif;
    font-size: 20px;
    line-height: 1.7;
    --p-line: transparent;
    --p-line-light: transparent;
    --p-border: transparent;
    --p-shadow: transparent;
    --p-box-shadow: none;
}

h1,h2,h3,h4,h5,h6,
input,textarea,select,button,code {
    font-family: 'Noto Serif', serif !important;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 600 !important;
    letter-spacing: 0.2px;
}

h1.entry-title {
    font-size: 30px !important;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 1.2em;
    font-weight: 700;
    color: #404040;
}

code { font-size: 0.95em; }

/* Site title */
.site-title a {
    font-size: 40px !important;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Footer */
.site-info { display: none; }

/* ======================
   MOBILE TYPOGRAPHY
   ====================== */

@media (max-width: 768px) {

    .site-title a { font-size: 24px; }

    h1.entry-title {
        font-size: 24px !important;
        line-height: 1.4;
        margin-bottom: 1em;
    }

    .last-updated { font-size: 0.8rem; }

    body {
        --wp--custom--typography--font-size--gigantic: 24px;
        --wp--custom--typography--font-size--colossal: 24px;
    }
}

/* ======================
   LIGHT MODE
   ====================== */

body:not(.dark-mode),
body.light-mode {
    background: url("https://img.tourkika.com/paper.jpg") repeat fixed;
}

body:not(.dark-mode) .site-content,
body:not(.dark-mode) .content-area {
    background: rgba(255,255,255,0.92);
    padding: 2em;
    border-radius: 6px;
}

/* Header cleanup */
body:not(.dark-mode) .site-header,
body:not(.dark-mode) .main-navigation {
    background: transparent !important;
}

body:not(.dark-mode) .site-header::after,
body:not(.dark-mode) .main-navigation::after {
    display: none !important;
}

/* ======================
   DARK MODE
   ====================== */

body.dark-mode {
    background: #404040;
    --p-line: transparent;
    --p-line-light: transparent;
    --p-border: transparent;
}

body.dark-mode .site-content,
body.dark-mode .content-area {
    background: rgba(26,26,26,0.92);
    padding: 2em;
    border-radius: 6px;
}

body.dark-mode .site-header,
body.dark-mode .main-navigation {
    border: none !important;
    box-shadow: none !important;
}

/* ======================
   COMPONENTS
   ====================== */

.glass {
    display: block;
    width: 100%;
    padding: 0.7em 1.2em;
    margin: 1.2em 0;
    text-align: center;
    font-weight: 600;
    color: #843fa1;
    background: #e6e6e6;
    border-radius: 6px;
    backdrop-filter: blur(3px);
}

.video-center iframe {
    display: block;
    margin: auto;
}

p,ol,ul,li { text-align: justify; }

.last-updated {
    text-align: center;
    font-size: 0.75rem;
    color: #777;
    margin: 0.5rem 0 1.2rem;
}

/* ======================
   PAGEFIND SEARCH
   ====================== */

#search-open {
    position: fixed;
    inset: 0;
    height: 100vh;
    overflow-y: auto;
}

body.dark-mode #search-open {
    background: rgba(26,26,26,0.92);
}

body:not(.dark-mode) #search-open {
    background: rgba(255,255,255,0.92);
}

#pagefind-search,
.pagefind-ui {
    max-width: 900px;
    margin: auto;
    font-family: 'Noto Serif', serif;
}

.pagefind-ui__search-box {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.5rem 0;
}

.pagefind-ui__search-input {
    font-size: 18px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid #ccc;
    width: 100%;
}

body.dark-mode .pagefind-ui__search-input {
    background: rgba(26,26,26,0.92);
    color: #eee;
    border-color: #555;
}

.pagefind-ui__result {
    padding: 1.1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.85);
}

body.dark-mode .pagefind-ui__result {
    background: rgba(30,30,30,0.85);
}

.pagefind-ui__result-title { font-size: 20px; font-weight: 700; }

.pagefind-ui__result-link {
    color: #843fa1;
    text-decoration: none;
}

.pagefind-ui__result-excerpt { font-size: 16px; line-height: 1.6; }

.pagefind-ui mark {
    background: #ffeaa7;
    padding: 0 3px;
    border-radius: 3px;
}

body.dark-mode .pagefind-ui mark {
    background: #6c5ce7;
    color: #fff;
}

.pagefind-ui__load-more { display: none !important; }

#search-open .pagefind-ui__results-area {
    max-height: none;
    overflow: visible;
}

body.search-open { overflow: hidden; }

/* ======================
   MOBILE MENU (PRESPA)
   ====================== */

@media (max-width: 54rem) {

    body:not(.dark-mode) .main-navigation.toggled {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(255,255,255,0.97) !important;
    }

    body:not(.dark-mode) .main-navigation.toggled a {
        color: #111 !important;
    }

    body:not(.dark-mode) .main-navigation.toggled a:hover {
        color: #843fa1 !important;
    }
}

/* ======================
   DARK MODE TOGGLE ICON
   ====================== */

/* Light mode → moon is purple */
body:not(.dark-mode) .site-header button,
body:not(.dark-mode) .site-header button svg {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
}

/* Dark mode → sun is black */
body.dark-mode .site-header button,
body.dark-mode .site-header button svg {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
}

/* Dark mode fallback — if moon icon shows, make it white */
body.dark-mode .site-header button svg[class*="moon"],
body.dark-mode .site-header button svg[class*="Moon"] {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}
/* ——————————————————
   SHOW PAPER BACKGROUND BEHIND HEADER + MENU
   —————————————————— */

/* Remove colored background on header containers in light mode */
body:not(.dark-mode) .main-navigation-container,
body:not(.dark-mode) .top-menu,
body:not(.dark-mode) .header-content-wrapper,
body:not(.dark-mode) .site-branding,
body:not(.dark-mode) .site-title a,
body:not(.dark-mode) .site-description,
body:not(.dark-mode) .menu-toggle,
body:not(.dark-mode) .slide-menu {
    background: transparent !important;
}

/* Ensure logo & text remain readable on paper */
body:not(.dark-mode) .main-navigation a,
body:not(.dark-mode) .main-navigation button,
body:not(.dark-mode) .top-menu a,
body:not(.dark-mode) .site-title a,
body:not(.dark-mode) .site-description {
    color: #334142 !important;
}

/* Submenu also transparent so paper shows */
body:not(.dark-mode) .main-navigation .sub-menu,
body:not(.dark-mode) .main-navigation .sub-menu a {
    background: transparent !important;
}

/* Optional: add slight shadow so header text is readable */
body:not(.dark-mode) .main-navigation-container,
body:not(.dark-mode) .site-header {
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
/* ——————————————————
   REMOVE LINE / BORDER UNDER HEADER + MENU
   —————————————————— */

/* Remove border and shadow under main header */
header.site-header,
.main-navigation-container,
.main-navigation,
.main-navigation.site-menu,
.top-menu {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Also ensure slide-menu doesn’t have a shadow */
.slide-menu {
    box-shadow: none !important;
}

/* Mobile menu no line under menu toggle area */
.menu-toggle {
    border-bottom: none !important;
}
/* Light mode dropdown menu fix */
body:not(.dark-mode) .main-navigation .sub-menu {
    background-color: #ffffff !important;
    border: 1px solid #ddd;
}

body:not(.dark-mode) .main-navigation .sub-menu li a {
    color: #000000 !important;
}

body:not(.dark-mode) .main-navigation .sub-menu li a:hover {
    background-color: #f2f2f2;
    color: #000000;
}

/* Prevent transparency from theme */
body:not(.dark-mode) .main-navigation .sub-menu {
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}
body:not(.dark-mode) .site-menu ul ul {
    background-color: #ffffff !important;
}
/* Center all tables (override theme) */
.entry-content table,
.wp-block-table table,
table {
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}