/* ---------------------------------------------------------
   1. COLOR VARIABLES & THEME ROOT
   --------------------------------------------------------- */
:root {
    /* --- Light Theme (Default) --- */
    --primary: #2563eb;          /* Blue 600 */
    --primary-hover: #1d4ed8;    /* Blue 700 */
    
    --bg-body: #f8fafc;          /* Slate 50 */
    --bg-surface: #ffffff;       /* White */
    --bg-subtle: #f1f5f9;        /* Slate 100 */
    
    --text-main: #0f172a;        /* Slate 900 */
    --text-muted: #64748b;       /* Slate 500 */
    --text-light: #94a3b8;       /* Slate 400 */
    --text-invert: #ffffff;      /* Text on dark buttons */

    --border-color: #e2e8f0;     /* Slate 200 */
    --shadow-color: rgba(0, 0, 0, 0.05);
    
    --radius: 12px;
}

/* --- Dark Theme Overrides --- */
[data-theme="dark"] {
    --primary: #3b82f6;          /* Blue 500 (Brighter for dark mode) */
    --primary-hover: #60a5fa;    /* Blue 400 */

    --bg-body: #020617;          /* Slate 950 */
    --bg-surface: #1e293b;       /* Slate 800 */
    --bg-subtle: #334155;        /* Slate 700 */

    --text-main: #f8fafc;        /* Slate 50 */
    --text-muted: #cbd5e1;       /* Slate 300 */
    --text-light: #94a3b8;       /* Slate 400 */
    --text-invert: #0f172a;      /* Text on light buttons */

    --border-color: #334155;     /* Slate 700 */
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* ---------------------------------------------------------
   2. GLOBAL BASE STYLES
   --------------------------------------------------------- */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background: var(--bg-body); 
    color: var(--text-main); 
    margin: 0; 
    line-height: 1.6; 
    transition: background 0.3s ease, color 0.3s ease;
}

a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
img { max-width: 100%; height: auto; display: block; }

.pe-container { max-width: 1200px; margin: 2px auto; padding: 0 20px; }

/* Buttons Global */
.pe-btn { 
    background: var(--primary); 
    color: white; 
    padding: 10px 20px; 
    border-radius: 6px; 
    font-weight: 600; 
    display: inline-block;
    border: none;
    cursor: pointer;
}
.pe-btn:hover {
    background: var(--primary-hover);
}

/* Footer Styling (Global) */
.pe-footer {
    /* Removed solid background/border for seamless blend */
    background: transparent; 
    border-top: none;
    padding: 0 0 60px; /* Bottom spacing only */
    margin-top: 0;     /* Connects directly to previous section */
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    opacity: 0.7;
}

/* ---------------------------------------------------------
   3. TOAST NOTIFICATION (NEW)
   --------------------------------------------------------- */
.pe-toast {
    visibility: hidden;
    min-width: 250px;
    background-color: var(--text-main);
    color: var(--bg-body);
    text-align: center;
    border-radius: 8px;
    padding: 14px 20px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) translateY(20px);
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pe-toast.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------
   FOOTER STYLING
   --------------------------------------------------------- */
.pe-footer {
    background: transparent; 
    border-top: 1px solid var(--border-color); /* Subtle separation */
    padding: 60px 0 40px;
    margin-top: 60px;
    text-align: center;
}

/* Footer Menu (Horizontal List) */
.pe-footer-nav {
    margin-bottom: 25px;
}

.pe-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.pe-footer-menu li a {
    font-size: 0.95rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.pe-footer-menu li a:hover {
    color: var(--primary);
}

/* Copyright Text */
.pe-copyright {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-light);
}

.pe-copyright strong {
    color: var(--text-muted);
    font-weight: 600;
}

.pe-copyright .sep {
    margin: 0 6px;
    opacity: 0.5;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .pe-footer { padding: 40px 0; }
    .pe-footer-menu { gap: 15px 20px; } /* Tighter spacing on small screens */
}

/* ... [Existing Footer Styles] ... */

/* Social Media Links */
.pe-social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px; /* Spacing above the menu */
}

.pe-social-links a {
    color: var(--text-muted);
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
    line-height: 0; /* Fix vertical alignment */
}

.pe-social-links a:hover {
    color: var(--primary);
    transform: translateY(-3px);
}

/* SVG Sizing */
.pe-social-links svg {
    width: 24px;
    height: 24px;
}