/* style.css */
:root {
    --bg-color: #f8f9fa;
    --card-shadow: 0 4px 6px rgba(0,0,0,0.07);
    --bg-pos-y: -459px;
    --bg-fade-start: 60%;
    --global-font-size: 16px; /* Global Font Parameter */
    --card-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Darker shadow */
}
html { font-size: var(--global-font-size); }
body {
    background-color: var(--bg-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
}
.background-wrapper {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; overflow: hidden;
}
.background-wrapper img {
    width: 100%; height: auto; position: absolute; top: var(--bg-pos-y); left: 0;
    mask-image: linear-gradient(to bottom, black var(--bg-fade-start), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black var(--bg-fade-start), transparent 100%);
}
.text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.text-shadow-dark { text-shadow: 0 3px 6px rgba(0,0,0,0.8); }

/* Navigation */
.navbar-custom {
    background: transparent !important;
    padding-top: 20px;
}
.navbar-toggler {
    border: 2px solid rgba(255,255,255,0.8);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* Mobile Menu Styling */
.offcanvas-custom {
    background: rgba(33, 37, 41, 0.95);
    color: white;
}
.offcanvas-custom .nav-link {
    color: rgba(255,255,255,0.8);
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.offcanvas-custom .nav-link:hover { color: white; }

/* Tiles & Cards */
.social-tiles-container { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-bottom: 30px; }
.social-tile {
    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.9); border-radius: 12px; font-size: 2rem;
    box-shadow: var(--card-shadow); cursor: pointer; transition: 0.3s;
    color: #333; /* Default icon color */
}
.social-tile:hover { transform: translateY(-5px); color: #0d6efd; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

.custom-card {
    border: none; border-radius: 12px; box-shadow: var(--card-shadow);
    background: rgba(255, 255, 255, 0.95); transition: 0.2s; cursor: pointer;
    overflow: hidden;
}
.custom-card:hover { transform: translateY(-3px); }
.custom-card .card-body { padding: 1.5rem; text-align: left; }

/* GLOW BORDERS */
.border-glow-green {
    border: 3px solid #198754 !important;
    box-shadow: 0 0 20px rgba(25, 135, 84, 0.6) !important;
}
.border-glow-yellow {
    border: 3px solid #ffc107 !important;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.7) !important;
}

/* Modals */
.modal-xl-custom { max-width: 80%; }
.modal-content { border-radius: 16px; border: none; }
.topic-content-full { font-size: 1.1rem; line-height: 1.8; color: #212529; }
.topic-content-full img { max-width: 100%; height: auto; border-radius: 8px; }

/* Pagination */
.pagination .page-link { color: #333; background: rgba(255,255,255,0.9); }
.pagination .page-item.active .page-link { background: #212529; border-color: #212529; color: #fff; }