:root {
    --text-color: #333;
    --bg-color: #f4f4f4;
    --white: #fff;
    --nav-bg: #333;
    --nav-hover: #555;
    --footer-border: #555;
    --header-border: #555;
    --social-btn-bg: #2d2d2d;
    --social-btn-border: rgba(255, 255, 255, 0.1);
    --twitter-color: #1DA1F2;
    --bsky-color: #0085ff;
    --github-color: #333;
    --linkedin-color: #0077b5;
    --post-header-bg: #0509a9cc;
}

/* Basic styling */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Header and Footer Borders */
.header-with-border {
    border-bottom: 1px solid var(--header-border);
}

.footer-with-border {
    border-top: 1px solid var(--footer-border);
}

/* Content Styling */
h1, h2 {
    color: var(--text-color);
}

h2 a:hover {
    text-decoration: underline;
}

.post-container {
    max-width: 992px;
    margin: 0 auto;
    padding-top: 10px;
}

.post-content {
    background-color: var(--bs-white);
    padding: 10px;
}

/* Social Button Base Styles */
.social-button {
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

/* Icon Base Styles */
.social-button::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    margin-right: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Twitter Icon */
.social-button[href*="twitter.com"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'%3E%3C/path%3E%3C/svg%3E");
}

.social-button[href*="bsky.app"]::before {
    background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 64 57' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z'/%3E%3C/svg%3E");
}

.social-button[href*="github.com"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.341-3.369-1.341-.454-1.155-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.481C19.138 20.164 22 16.418 22 12c0-5.523-4.477-10-10-10'/%3E%3C/svg%3E");
}

.social-button[href*="linkedin.com"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

/* Platform-specific hover colors */
.social-button[href*="twitter.com"]:hover {
    color: var(--bs-white);
    background-color: var(--twitter-color);
}

.social-button[href*="bsky.app"]:hover {
    color: var(--bs-white);
    background-color: var(--bsky-color);
}

.social-button[href*="github.com"]:hover {
    color: var(--bs-white);
    background-color: var(--github-color);
}

.social-button[href*="linkedin.com"]:hover {
    color: var(--bs-white);
    background-color: var(--linkedin-color);
}

/* Mobile Optimizations */
@media (max-width: 992px) {
    .social-button {
        width: 100%;
    }
}



/* Unstuck CTA Styling - Commented out for now */
/*
.unstuck-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.25rem 1rem !important;
    margin: 0 1rem;
    border-radius: 0.375rem;
    border: 2px solid var(--bs-primary);
    color: var(--bs-primary) !important;
    background: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
    line-height: 1.2;
    font-weight: 500;
}

.unstuck-line1 {
    font-size: 0.85rem;
    opacity: 0.95;
}

.unstuck-line2 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 0.125rem;
}

.unstuck-cta:hover {
    background: var(--bs-primary);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.unstuck-mobile {
    margin: 0 !important;
    padding: 0.1rem 0.75rem !important;
}

@media (max-width: 575px) {
    .navbar-container {
        padding-left: 0;
        padding-right: 0;
    }
    .navbar-brand {
        margin-right: 0;
    }

    .unstuck-mobile .unstuck-line1 {
        font-size: 0.7rem;
    }

    .unstuck-mobile .unstuck-line2 {
        font-size: 0.8rem;
        margin-top: 0;
    }

    .unstuck-mobile {
        padding: 0.15rem 0.1rem !important;
    }
}
*/