/* Bunny's Fantasy Blog — style.css
   Soft fantasy theme: lavender/pink, faded image background, cursive titles.
*/

/* --- FONT IMPORTS --- */
/* Playfair Display for headers and Great Vibes for scripts/decorative elements */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Great+Vibes&family=Lato:wght@300;400;700&display=swap');


:root {
    /* Soft, whimsical color palette */
    --bg-image: url('https://placehold.co/1920x1080/f7e6f2/6e6170?text=Soft+Fantasy+Background'); /* Placeholder image for Neocities compatibility */
    --accent-light: #f7e6f2; /* Light lavender/pink */
    --accent-dark: #e9d6f0; /* Deep lavender/pink */
    --text-primary: #3a2540; /* Dark plum/purple */
    --text-muted: #6e6170; /* Muted gray/purple */
    --link-active: #e54b63; /* Rose pink for active links/accents */
    --card-shadow: rgba(30,20,40,0.08);
}

/* Reset & Body */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; color: var(--text-primary); }
body {
    /* Use Lato for main body text, Fallback to Open Sans as specified earlier */
    font-family: 'Lato', 'Open Sans', system-ui, Arial, sans-serif;
    /* Soft Background Layering: ensures readability over background image */
    background: linear-gradient(180deg, rgba(255,250,255,0.85), rgba(245,240,255,0.85)), var(--bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Floating Top Bar (Sticky Navigation) */
.topbar {
    position: sticky;
    top: 12px;
    margin: 12px auto;
    max-width: 1100px;
    backdrop-filter: blur(6px);
    /* Softly blurred white background */
    background: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    box-shadow: 0 6px 18px var(--card-shadow);
    z-index: 50;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.brand {
    font-family: 'Great Vibes', cursive;
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 0.4px;
}

.nav a {
    margin-left: 14px;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
}

.nav a:hover {
    color: var(--text-primary);
    background-color: var(--accent-light);
}

/* Main content container - **FIX for Readability** */
.container { 
    max-width: 1100px; 
    margin: 48px auto; 
    padding: 0 20px; 
    /* Ensures text is readable by applying solid white background to content column */
    background-color: white; 
    box-shadow: 0 0 30px rgba(0,0,0,0.03); 
    border-radius: 12px;
}

/* Intro */
.intro { text-align: center; padding-top: 48px; margin-bottom: 28px; }
.intro h1 { font-family: 'Playfair Display', serif; font-size: 44px; margin: 6px 0; color: var(--text-primary); }
.tagline { color: var(--text-muted); margin-top: 6px; font-size: 16px; }

/* Cards for content */
.card {
    /* Cards maintain a slight transparency and blur for a soft feel */
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(4px);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 8px 25px var(--card-shadow);
    position: relative;
    z-index: 10;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid var(--accent-light);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(80,50,100,0.15);
}

/* Post and content styling */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 22px;
    align-items: stretch; /* Ensures cards are the same height */
    position: relative;
    z-index: 10;
    padding: 20px;
}

.post-title, .note-title { 
    font-family: 'Great Vibes', cursive; 
    font-size: 26px; 
    margin: 0 0 8px; 
    color: var(--text-primary); 
}
.post-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.post-excerpt, .note-content { font-size: 16px; color: #3b2d3f; line-height: 1.6; }
.readmore { 
    display: inline-block; 
    margin-top: 12px; 
    text-decoration: none; 
    font-weight: 700; 
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent-dark);
}

/* Forms */
.form-group { margin-bottom: 15px; }
.contact-form input, .contact-form textarea, .note-form input, .note-form textarea { 
    padding: 12px; 
    border-radius: 8px; 
    border: 1px solid var(--accent-dark); 
    width: 100%;
    font-size: 15px; 
    background-color: var(--accent-light);
    color: var(--text-primary);
}
.btn { 
    background: var(--link-active); 
    color: white; 
    border: none; 
    padding: 12px 18px; 
    border-radius: 8px; 
    font-weight: 700; 
    cursor: pointer; 
    transition: background-color 0.2s;
}
.btn:hover { background-color: #c43a4e; }

/* Footer */
.site-footer, .footer { text-align: center; padding: 26px 10px 48px; color: var(--text-muted); font-size: 14px; margin-top: 36px; }

/* --- WHIMSICAL ELEMENTS (Petals & Orbs) --- */
/* Wrapper for ambience */
#petals-wrap, #orbs {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6; /* Slight opacity for subtlety */
    overflow: hidden;
}
.orb {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, var(--link-active), rgba(255, 255, 255, 0));
    border-radius: 50%;
    animation: floatOrb 10s infinite ease-in-out;
    opacity: 0.8;
}
.petal {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: var(--accent-dark);
    border-radius: 50%;
    transform: rotate(45deg);
    opacity: 0.7;
    animation: floatPetal 15s infinite linear;
}

@keyframes floatOrb {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-500px) translateX(200px); }
}
@keyframes floatPetal {
    0% { transform: translateY(0vh) rotate(0deg); opacity: 0.7; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}


/* Responsive Adjustments */
@media (max-width: 800px) {
    .posts-grid { grid-template-columns: 1fr; padding: 10px; }
    .topbar { flex-direction: column; padding: 10px; }
    .brand { margin-bottom: 10px; }
    .nav a { margin: 0 5px; }
    .container { margin: 20px auto; padding: 0 10px; }
    .intro h1 { font-size: 32px; }
}