/* Digital Diary — Custom Styles */

.doodle-underline {
    background-image: url('data:image/svg+xml;utf8,<svg width="100%25" height="10" xmlns="http://www.w3.org/2000/svg"><path d="M0 5 Q 25 10, 50 5 T 100 5" stroke="%23ffb7ce" fill="transparent" stroke-width="2" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: 8px;
}

.doodle-underline-wavy {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #ffb7ce;
    text-decoration-thickness: 2px;
}

.ambient-shadow {
    box-shadow: 0 10px 30px -10px rgba(255, 183, 206, 0.3);
}

.polaroid {
    background: white;
    padding: 10px 10px 40px 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.polaroid:hover {
    transform: scale(1.02) rotate(-1deg);
    box-shadow: 0 8px 25px rgba(255, 183, 206, 0.25);
}

.squishy-btn {
    transition: all 0.15s ease;
}

.squishy-btn:active {
    box-shadow: none !important;
    transform: translateY(2px);
}

.washi-tape {
    background: rgba(250, 179, 202, 0.3);
    transform: rotate(-2deg);
    mix-blend-mode: multiply;
}

/* Article body typography */
.prose-diary p {
    margin-bottom: 1.5rem;
    color: #514347;
    font-size: 18px;
    line-height: 1.6;
}

.prose-diary blockquote {
    padding-left: 1rem;
    border-left: 4px solid #ffb7ce;
    font-style: italic;
    font-family: 'Newsreader', serif;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 500;
    color: #864d61;
    opacity: 0.8;
    margin: 2rem 0;
}


/* Nav active state */
.nav-active {
    color: #FFB7CE !important;
    font-weight: bold;
    border-bottom: 2px solid #FFB7CE;
    padding-bottom: 4px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #fff8f8; }
::-webkit-scrollbar-thumb { background: #fab3ca; border-radius: 9999px; }

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}