/* =====================================
   ANCIENT PUSKOLA THEME
===================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family: "Noto Serif Sinhala", serif;

    background: #d9c59b;

    background-image:
        radial-gradient(circle at top left, #f4e6c3 0%, transparent 45%),
        radial-gradient(circle at bottom right, #b58b52 0%, transparent 45%),
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, .04),
            rgba(255, 255, 255, .04) 2px,
            rgba(0, 0, 0, .02) 2px,
            rgba(0, 0, 0, .02) 4px);

    color: #000000;

    min-height: 100vh;

}

/* =====================================
HEADER
===================================== */

header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 25px;

    background: linear-gradient(#8b5a2b, #684122);

    color: #fff3d0;

    border-bottom: 5px solid #4c2d16;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .35);

}

header h1 {

    font-size: 28px;

    text-shadow: 2px 2px 5px black;

}

/* =====================================
HEADER BUTTONS
===================================== */

.header-actions {

    display: flex;

    gap: 10px;

}

.icon-btn {

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 50%;

    background: #ecd2a0;

    color: #603913;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .3s;

    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);

}

.icon-btn:hover {

    background: #fff2cf;

    transform: scale(1.08);

}

.icon-btn .material-icons {

    font-size: 25px;

}

/* =====================================
CONTAINER
===================================== */

.container {

    max-width: 950px;

    margin: 35px auto;

    padding: 20px;

}

/* =====================================
CARD
===================================== */

.card {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 18px;

    padding: 18px;

    background: linear-gradient(#f6e6bf, #ead39d);

    border-left: 8px solid #7b4b1d;

    border-right: 8px solid #7b4b1d;

    border-radius: 15px;

    box-shadow:

        0 4px 10px rgba(0, 0, 0, .25),

        inset 0 0 12px rgba(255, 255, 255, .45);

    transition: .3s;

    cursor: pointer;

}

.card:hover {

    transform: translateY(-4px);

    box-shadow:

        0 10px 18px rgba(0, 0, 0, .35);

}

/* =====================================
LEFT
===================================== */

.left {

    display: flex;

    align-items: center;

    gap: 15px;

}

.material-icons {

    font-size: 40px;

    color: #8b1d1d;

}

.name {

    font-size: 20px;

    font-weight: bold;

    color: #3b2412;

}

.arrow {

    font-size: 34px;

    color: #7b4b1d;

}

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

body.dark {

    background: #19130f;

    background-image:

        repeating-linear-gradient(0deg,

            rgba(255, 255, 255, .02),

            rgba(255, 255, 255, .02) 2px,

            rgba(0, 0, 0, .05) 2px,

            rgba(0, 0, 0, .05) 4px);

    color: #f1deb2;

}

body.dark header {

    background: linear-gradient(#2d2014, #18110b);

    border-bottom: 5px solid #4c3721;

}

body.dark .card {

    background: linear-gradient(#403124, #2b2118);

    border-left: 8px solid #8b6b44;

    border-right: 8px solid #8b6b44;

}

body.dark .name {

    color: #f4e3b5;

}

body.dark .arrow {

    color: #d2b07d;

}

body.dark .material-icons {

    color: #ffb96d;

}

body.dark .icon-btn {

    background: #5d4428;

    color: #fff2cb;

}

body.dark .icon-btn:hover {

    background: #7d6038;

}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:700px) {

    header {

        flex-direction: column;

        gap: 15px;

    }

    .card {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }

    .arrow {

        align-self: flex-end;

    }

}
.site-footer {
    margin-top: 40px;
    padding: 20px;
    text-align: center;

    
}

.footer-text {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
}

.footer-text a {
    color: #5d4037;
    text-decoration: none;
    font-weight: bold;
}

.social-links {
    margin-top: 10px;
}

.social-links a {
    margin: 0 10px;
    font-size: 28px;
    color: #333;
    text-decoration: none;
    transition: 0.2s;
}

.social-links a:hover {
    color: #5d4037;
    transform: scale(1.2);
}

/* DARK MODE */
body.dark .site-footer {
    background: #1e1e1e;
    border-top: 1px solid #333;
}

body.dark .footer-text {
    color: #ccc;
}

body.dark .social-links a {
    color: #ccc;
}

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

@media (max-width: 600px) {
    .topbar {
        flex-direction: column;
        text-align: center;
    }

    .reader {
        padding: 15px;
    }
}

/* පණිවිඩයේ පෙනුම */
.toast {
    visibility: hidden;
    min-width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 12px;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.toast.show {
    visibility: visible;
    animation: fadeIn 0.5s, fadeOut 0.5s 2s;
}
/* =========================
   BOOK TITLE
========================= */

.book-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 30px auto;
}


/* =========================
   SUTTA PALI
========================= */

.sutta-pali {

    text-align: center;

    font-size: 1.3rem;

    font-weight: 700;

    line-height: 1.8;

    margin: 25px auto;

}


/* =========================
   SUTTA LOCATION
========================= */

.sutta-path {

    text-align: center;

    font-size: 0.9rem;

    color: #666;

    margin-bottom: 25px;

}
.sub-heading {

    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 30px;

}


.small-heading {

    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 20px;

}


/* =========================
   SEO HIDDEN
========================= */

.seo-tags {

    display: none;

}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}