body {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
}

body::before {
    content: "Sharing experiences and experiments with Terraform, AWS, Kubernetes, and cloud infrastructure. Some based on consulting work, others from personal projects. Writing about automation, best practices, and making complex DevOps concepts simple.";
    white-space: pre-line;
    width: 33.333vw;
    background: #1a1a1a;
    padding: 2vh 2vw;
    color: var(--accent);
    border-right: 1px solid #333;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    font-family: monospace;
    font-size: clamp(12px, 1.3vw, 16px);
    line-height: 1.4;
    padding-bottom: 45vh;
    padding-top: 8vh;
    z-index: 999;
    transition: transform 0.3s ease;
}

@media (max-width: 1200px) {
    body::before {
        transform: translateX(-100%);
    }
    
    .sidebar-nav {
        transform: translateX(-100%);
    }
    
    .container {
        margin-left: 0 !important;
        width: 100vw !important;
    }
    
    .sidebar-toggle {
        left: 10px;
    }
}

body.sidebar-collapsed::before {
    transform: translateX(-100%);
}

.sidebar-nav {
    position: fixed;
    bottom: 6vh;
    left: 2vw;
    width: calc(33.333vw - 4vw);
    z-index: 1000;
    background: #1a1a1a;
    padding: 1.5vh 1vw;
    transition: transform 0.3s ease;
}

body.sidebar-collapsed .sidebar-nav {
    transform: translateX(-100%);
}

.sidebar-nav h3 {
    color: var(--accent);
    font-family: monospace;
    margin-bottom: 1vh;
    margin-top: 0;
    font-size: clamp(18px, 2vw, 24px);
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li {
    margin: 0.8vh 0;
}

.sidebar-nav a {
    color: var(--accent);
    text-decoration: none;
    font-family: monospace;
    font-size: clamp(16px, 1.8vw, 22px);
    display: flex;
    align-items: center;
}

.sidebar-nav a:hover {
    text-decoration: underline;
}

.sidebar-nav i {
    margin-right: 0.8vw;
    width: 2vw;
}

.container {
    margin-left: 33.333vw !important;
    width: 66.667vw !important;
    max-width: none !important;
    padding: 2vh 2vw !important;
    transition: margin-left 0.3s ease, width 0.3s ease;
}

.container.sidebar-collapsed {
    margin-left: 0 !important;
    width: 100vw !important;
}

.sidebar-toggle {
    position: fixed;
    top: 2vh;
    left: calc(33.333vw - 30px);
    z-index: 1002;
    background: var(--accent);
    color: #1a1a1a;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-family: monospace;
    font-size: 16px;
    border-radius: 4px;
    transition: left 0.3s ease;
}

.sidebar-toggle:hover {
    opacity: 0.8;
}

body.sidebar-collapsed .sidebar-toggle {
    left: 10px;
}

.posts-list {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.posts-list h1,
.posts-list h2 {
    font-family: monospace;
    color: var(--accent);
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.post-item {
    margin-bottom: 1rem;
    font-family: monospace;
    border: none !important;
}

.post-item::before,
.post-item::after {
    display: none !important;
}

.post-date {
    color: var(--accent);
    font-size: 0.9rem;
}

.post-title a {
    color: var(--foreground);
    text-decoration: none;
    display: block;
    margin-top: 0.2rem;
}

.posts img,
.post img,
.post-content img {
    border: 3px solid var(--accent) !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transition: transform 0.2s ease !important;
}

.posts img:hover,
.post img:hover,
.post-content img:hover {
    transform: scale(1.02) !important;
}

/* Override for certification images - AGGRESSIVE */
img[src*="credly.com"]:hover,
img[alt*="Certification"]:hover,
img[alt*="Associate"]:hover,
img[alt*="Pro"]:hover,
img[alt*="Ambassador"]:hover,
img[alt*="Contributor"]:hover,
img[alt*="CKAD"]:hover,
img[alt*="KCNA"]:hover,
img[alt*="GitHub Actions"]:hover,
img[alt*="Harness"]:hover,
img[alt*="AWS"]:hover,
img[alt*="Terraform"]:hover,
img[alt*="Vault"]:hover,
img[alt*="HashiCorp"]:hover,
.posts .certification-container img,
.post .certification-container img,
.post-content .certification-container img,
.content .certification-container img {
    border: none !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    transform: none !important;
    width: clamp(60px, 8vw, 85px) !important;
    height: clamp(60px, 8vw, 85px) !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 85px !important;
    max-height: 85px !important;
}

.posts .certification-container img:hover,
.post .certification-container img:hover,
.post-content .certification-container img:hover,
.content .certification-container img:hover {
    transform: none !important;
}

.terminal-icon {
    transition: transform 0.3s ease;
}

body.sidebar-collapsed .terminal-icon {
    transform: translateX(-100%);
}

/* FORCE SQUARE BADGES - OVERRIDE ALL THEME STYLES */
img[src*="credly.com"],
img[src*="images.credly.com"],
.posts img[src*="credly.com"],
.posts img[src*="images.credly.com"],
.post img[src*="credly.com"],
.post img[src*="images.credly.com"],
.post-content img[src*="credly.com"],
.post-content img[src*="images.credly.com"],
.content img[src*="credly.com"],
.content img[src*="images.credly.com"] {
    width: 85px !important;
    height: 85px !important;
    min-width: 85px !important;
    min-height: 85px !important;
    max-width: 85px !important;
    max-height: 85px !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
    border: none !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    transform: none !important;
}

@media (max-width: 1200px) {
    .posts .certification-container {
        display: none !important;
    }
}

/* Responsive certification images - AGGRESSIVE OVERRIDE */
.certification-container {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

img[src*="credly.com"],
img[alt*="Certification"],
img[alt*="Associate"],
img[alt*="Pro"],
img[alt*="Ambassador"],
img[alt*="Contributor"],
img[alt*="CKAD"],
img[alt*="KCNA"],
img[alt*="GitHub Actions"],
img[alt*="Harness"],
img[alt*="AWS"],
img[alt*="Terraform"],
img[alt*="Vault"],
img[alt*="HashiCorp"],
.certification-container img {
    width: clamp(60px, 8vw, 85px) !important;
    height: clamp(60px, 8vw, 85px) !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 85px !important;
    max-height: 85px !important;
    border: none !important;
    outline: none !important;
    object-fit: contain !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
}

@media (max-width: 768px) {
    .certification-container {
        gap: 8px;
        justify-content: center;
    }
    
    .certification-container img {
        width: clamp(50px, 12vw, 70px);
        height: clamp(50px, 12vw, 70px);
    }
}

@media (max-width: 480px) {
    .certification-container {
        gap: 6px;
    }
    
    .certification-container img {
        width: clamp(45px, 15vw, 60px);
        height: clamp(45px, 15vw, 60px);
    }
}
