/* theme.css */

body {
    color: #333333; 
}

.page-background {
    background: linear-gradient(135deg, #f5e1ff 0%, #c9dfff 100%);
}

.page-header {
    background: transparent; 
}

.baby-name-animated {
    fill: transparent;
    stroke: #5a4d7b;
}

.header-submessage {
    color: #6a5e8c;
}

/* --- Modernized Site Navigation --- */
.site-navigation {
    background-color: transparent; /* Remove background */
    box-shadow: none; /* Remove existing shadow */
    border-bottom: 1px solid rgba(90, 77, 123, 0.2); /* Add a subtle bottom border */
    border-radius: 0; /* Override layout.css for a flatter look */
    /* Padding and margins are largely controlled by layout.css but can be adjusted here if needed */
}

.site-navigation a {
    color: #5a4d7b; 
    border: none; /* Override border from layout.css */
    border-bottom: 2px solid transparent; /* Prepare for underline effect */
    padding-bottom: 5px; /* Add padding to make space for the border under the text */
    transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; /* Updated transition targets */
    border-radius: 0; /* Override layout.css for a flatter link appearance */
    /* The transform for hover is handled in layout.css and should remain */
}

.site-navigation a:hover,
.site-navigation a:focus {
    color: #483D8B; /* Darker purple on hover/focus, matches countdown numbers */
    background-color: transparent; /* Ensure no background change */
    border-bottom-color: #6a5e8c; /* Underline color for hover/focus */
}

.site-navigation a.active {
    color: #483D8B; /* Darker purple for active state */
    background-color: transparent; /* No background for active state */
    font-weight: 700; /* Make active link bolder */
    border-bottom-color: #6a5e8c; /* Persistent underline for active state */
    box-shadow: none; /* Remove inset shadow from active state */
}

.main-content-area {
    background-color: rgba(255, 255, 255, 0.85); 
    /* Updated box-shadow for a darker and more pronounced effect */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3); 
}

.content-section {
    /* Defines the faint separating line */
    border-top: 1px solid rgba(90, 77, 123, 0.15); 
}

.section-heading {
    color: #5a4d7b;
}

.section-heading::after {
    background-color: #bca0dc;
}

#registry-section .section-heading::after,
#baby-growth-info-section .section-heading::after,
#countdown-section .section-heading::after { 
    background-color: #C3A9C8; 
}

.section-message {
    color: #444444; 
}

.countdown-due-date {
    color: #5a4d7b;
}

#countdown {
    background-color: rgba(220, 210, 240, 0.3); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#countdown span { 
    color: #483D8B;
}

#countdown .label { 
    color: #696982;
}

.data-item {
    background-color: rgba(255, 255, 255, 0.65); 
    border-color: rgba(90, 77, 123, 0.1); 
    box-shadow: 0 2px 5px rgba(90, 77, 123, 0.08); 
    transition: box-shadow 0.2s ease-in-out; /* Removed transform from here */
}
.data-item:hover {
    box-shadow: 0 4px 10px rgba(90, 77, 123, 0.12);
}
.data-label {
    color: #5a4d7b;   
}
.data-value { 
    color: #333;   
}

.note-section { 
    background-color: rgba(230, 220, 240, 0.4); 
    border-top-color: #bca0dc; 
}

.note-heading { 
    color: #5a4d7b;
}
.note-content { 
    color: #333333; 
    background-color: transparent; 
}

.button { 
    background: linear-gradient(135deg, #8e72f0 0%, #6e4ac7 100%); 
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
    /* Combined and corrected transition */
    transition: transform 0.35s ease-out, 
                background 0.2s ease-in-out, 
                box-shadow 0.2s ease-in-out, 
                color 0.2s ease-in-out;
}

.button::before {
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.25), 
        transparent
    );
}

.button:hover, .button:focus {
    background: linear-gradient(135deg, #7b60cf 0%, #5939a5 100%); 
    box-shadow: 0 5px 15px rgba(90, 77, 123, 0.25), 
                0 0 12px rgba(190, 170, 255, 0.35);  
    color: #f8f0ff; 
}

.page-footer {
    background: transparent; 
}

.page-footer p { 
    color: #484848; 
}

.page-footer p .heart-icon { 
    color: #c75a7b;  
} 

.footer-text { 
    color: #5a4d7b;
}

.footer-copyright { 
    color: #796ea8;
}
    
.message-content { 
    color: #333333; 
}

#gift-message-section .message-content p { 
    color: #333333; 
}

#gift-message-section .message-content p:last-of-type { 
    color: #5a4d7b; 
}

.signature-names {
    color: #5a4d7b; 
}