@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Patrick+Hand&display=swap');

/* Notebook Paper Style */
.notebook-page {
    font-family: 'Patrick Hand', 'Caveat', cursive, sans-serif;
    background-color: #fcfaf2;
    /* warm notebook paper cream */
    background-image: linear-gradient(rgba(226, 232, 240, 0.7) 1px, transparent 1px);
    background-size: 100% 1.5rem;
    line-height: 1.5rem;
    padding: 1rem 1rem 2.5rem 2.8rem;
    color: #1e293b;
    font-size: 0.9rem;
    position: relative;
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    user-select: none;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.02);
}

/* Custom minimal scrollbar for long notebook pages */
.notebook-page::-webkit-scrollbar {
    width: 5px;
}

.notebook-page::-webkit-scrollbar-track {
    background: transparent;
}

.notebook-page::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.notebook-page::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Red Margin Line on the left */
.notebook-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2.8rem;
    width: 2px;
    height: 100%;
    background-color: rgba(239, 68, 68, 0.4);
    /* soft red margin line */
    pointer-events: none;
}

/* Left Page Ring Shadow */
.book-page:nth-child(odd) .notebook-page {
    box-shadow: inset -20px 0 25px -15px rgba(0, 0, 0, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.02);
}

/* Right Page Ring Shadow */
.book-page:nth-child(even) .notebook-page {
    box-shadow: inset 20px 0 25px -15px rgba(0, 0, 0, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.02);
    padding-left: 3.5rem;
}

/* Highlighted Headers and Key Notes */
.notebook-page h2 {
    font-family: 'Caveat', cursive;
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
    display: inline-block;
    padding: 0 0.5rem;
    margin-bottom: 0.8rem;
    background: linear-gradient(120deg, rgba(254, 240, 138, 0.8) 0%, rgba(254, 240, 138, 0.6) 100%);
    border-radius: 4px;
    line-height: normal;
}

.notebook-page h3 {
    font-family: 'Caveat', cursive;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1d4ed8;
    /* blue ink color for subheaders */
    display: inline;
    border-bottom: 2px dashed rgba(29, 78, 216, 0.4);
    line-height: normal;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.notebook-page p {
    margin: 0 0 0.8rem 0;
    text-indent: 0.5rem;
}

/* Bullet Items Custom Colors */
.bullet-pencil {
    color: #10b981;
    /* emerald/green for pencil ✎ */
    font-weight: bold;
    margin-right: 0.3rem;
}

.bullet-star {
    color: #f59e0b;
    /* amber for star ڈ */
    font-weight: bold;
    margin-right: 0.3rem;
}

.bullet-heart {
    color: #ef4444;
    /* red for heart ♥ */
    font-weight: bold;
    margin-right: 0.3rem;
}

.bullet-arrow {
    color: #3b82f6;
    /* blue for arrow ► */
    font-weight: bold;
    margin-right: 0.3rem;
}

.notebook-page strong {
    font-weight: bold;
    color: #0f172a;
    background-color: rgba(147, 197, 253, 0.3);
    /* sky blue highlighter for strong elements */
    padding: 0 0.2rem;
    border-radius: 2px;
}

/* Page number style inside the book */
.notebook-page-number {
    position: absolute;
    bottom: 0.8rem;
    font-size: 0.85rem;
    color: #94a3b8;
    font-family: sans-serif;
    font-weight: bold;
    background: none;
}

.book-page:nth-child(odd) .notebook-page-number {
    left: 1rem;
}

.book-page:nth-child(even) .notebook-page-number {
    right: 1rem;
}