/* Neobrutalist Design System for Hugo Blog */

:root {
    --neobrut-black: #000000;
    --neobrut-white: #FFFFFF;
    --neobrut-yellow: #FFE900;
    --neobrut-pink: #FF6B9D;
    --neobrut-blue: #4ECDC4;
    --neobrut-green: #95E1D3;
    --neobrut-red: #FF6B6B;
    --neobrut-orange: #FFA07A;
    --neobrut-purple: #A8E6CF;
    
    /* Dark mode colors - softer dark grays instead of pure black */
    --neobrut-dark-bg: #1a1a1f;
    --neobrut-dark-card: #2a2a2f;
    --neobrut-dark-border: #e0e0e0;
    
    /* Border thickness - softer neobrutalist element */
    --border-thick: 2px;
    --border-thicker: 3px;
    
    /* Shadow offsets - softer, more subtle */
    --shadow-offset: 4px;
    
    /* Border radius - soft rounded corners */
    --border-radius: 12px;
    --border-radius-small: 8px;
    
    /* Compact header */
    --header-height: 48px;
}

/* Global neobrutalist styling */
body {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Social Icons - Neobrutalist Style with Staggered Animation */
.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0;
    justify-content: center;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--neobrut-white);
    border: var(--border-thick) solid var(--neobrut-black);
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-black);
    color: var(--neobrut-black);
    transition: all 0.15s ease, opacity 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    position: relative;
    transform: translate(0, 0);
    opacity: 0;
    animation: fadeInUp 0.5s ease forwards;
}

/* Staggered animation delay for each icon */
.social-icons a:nth-child(1) { animation-delay: 0.1s; }
.social-icons a:nth-child(2) { animation-delay: 0.15s; }
.social-icons a:nth-child(3) { animation-delay: 0.2s; }
.social-icons a:nth-child(4) { animation-delay: 0.25s; }
.social-icons a:nth-child(5) { animation-delay: 0.3s; }
.social-icons a:nth-child(6) { animation-delay: 0.35s; }
.social-icons a:nth-child(7) { animation-delay: 0.4s; }
.social-icons a:nth-child(8) { animation-delay: 0.45s; }
.social-icons a:nth-child(9) { animation-delay: 0.5s; }
.social-icons a:nth-child(n+10) { animation-delay: 0.55s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.social-icons a:hover,
.social-icons a:focus {
    transform: translate(1px, 1px);
    box-shadow: calc(var(--shadow-offset) - 1px) calc(var(--shadow-offset) - 1px) 0 0 var(--neobrut-black);
    background: var(--neobrut-yellow);
}

.social-icons a:active {
    transform: translate(var(--shadow-offset), var(--shadow-offset));
    box-shadow: 0 0 0 0 var(--neobrut-black);
}

.social-icons a svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    display: block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* (Removed colored brand overrides; using outline icons) */

/* Let each SVG define its ownstroke/fill; we only size it. */

/* Profile Mode Styling */
.profile {
    padding: 80px 20px 60px 20px !important;
    position: relative;
}

/* Decorative background blob */
.profile::before {
    content: "";
    position: absolute;
    top: 10%;
    right: 5%;
    width: 300px;
    height: 300px;
    background: var(--neobrut-yellow);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.3;
}

.profile .profile_inner {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-black) !important;
    background: var(--neobrut-white) !important;
    padding: 35px 30px !important;
    max-width: 700px !important;
    margin: 0 auto !important;
}

/* Hero stripe behind profile section */
/* removed hero stripe and sticker accent */

.profile .profile_inner h1 {
    font-size: 2.5em !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    border-bottom: var(--border-thick) solid var(--neobrut-black);
    padding-bottom: 16px;
    margin: 16px 0 20px 0 !important;
    line-height: 1.1;
}

.profile .profile_inner span {
    font-size: 1.1em !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    background: var(--neobrut-pink) !important;
    color: var(--neobrut-black) !important;
    border: var(--border-thick) solid var(--neobrut-black) !important;
    border-radius: var(--border-radius-small) !important;
    display: inline-block;
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-black) !important;
    margin: 16px 0 !important;
}

/* Currently exploring line */
.profile .profile_inner .exploring {
    font-size: 0.95em !important;
    font-weight: 500 !important;
    color: var(--neobrut-black) !important;
    margin-top: 20px !important;
    display: block;
    font-style: italic;
    opacity: 0.8;
}

.profile img {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-black) !important;
    border-radius: var(--border-radius) !important;
    background: var(--neobrut-yellow) !important;
    padding: 4px !important;
}

/* Header Styling - Compact and Inline */
.header {
    border-bottom: var(--border-thick) solid var(--neobrut-black) !important;
    background: var(--neobrut-white) !important;
    box-shadow: 0 var(--shadow-offset) 0 0 var(--neobrut-black) !important;
    padding: 0 !important;
    min-height: var(--header-height) !important;
}

.header .nav {
    border: none !important;
    line-height: var(--header-height) !important;
    padding: 0 var(--gap) !important;
}

.header .logo {
    font-weight: 900 !important;
    font-size: 1.1em !important;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    border: var(--border-thick) solid var(--neobrut-black);
    border-radius: var(--border-radius-small);
    padding: 4px 12px !important;
    background: var(--neobrut-yellow);
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-black);
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
}

.header .logo a {
    border-bottom: none !important;
    font-size: inherit !important;
    color: var(--neobrut-black) !important;
}

.dark .header .logo a {
    color: var(--neobrut-black) !important;
}

/* Menu items (Contact Me button) */
#menu {
    display: flex;
    align-items: center;
    gap: 16px;
}

#menu li a {
    padding: 6px 16px !important;
    border: var(--border-thick) solid var(--neobrut-black) !important;
    background: var(--neobrut-blue) !important;
    border-radius: var(--border-radius-small) !important;
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-black) !important;
    font-weight: 700 !important;
    transition: all 0.15s ease;
    text-decoration: none;
    border-bottom: var(--border-thick) solid var(--neobrut-black) !important;
}

#menu li a:hover {
    transform: translate(1px, 1px);
    box-shadow: calc(var(--shadow-offset) / 2 - 1px) calc(var(--shadow-offset) / 2 - 1px) 0 0 var(--neobrut-black) !important;
    background: var(--neobrut-yellow) !important;
}

.dark #menu li a {
    border-color: var(--neobrut-black) !important;
    background: var(--neobrut-purple) !important;
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-black) !important;
    color: var(--neobrut-dark-bg) !important;
}

.dark #menu li a:hover {
    box-shadow: calc(var(--shadow-offset) / 2 - 1px) calc(var(--shadow-offset) / 2 - 1px) 0 0 var(--neobrut-black) !important;
    background: var(--neobrut-blue) !important;
}

/* Buttons and Links */
a {
    border-bottom: 2px solid var(--neobrut-black) !important;
    font-weight: 700 !important;
}

a:hover {
    background: var(--neobrut-yellow) !important;
    border-bottom: 3px solid var(--neobrut-black) !important;
}

/* Post Cards/Entries */
.post-entry,
.first-entry {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-black) !important;
    background: var(--neobrut-white) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    transition: all 0.15s ease;
}

.post-entry:hover,
.first-entry:hover {
    transform: translate(-1px, -1px);
    box-shadow: calc(var(--shadow-offset) + 1px) calc(var(--shadow-offset) + 1px) 0 0 var(--neobrut-black);
}

.entry-header h2,
.entry-header h1,
.post-entry h2,
.first-entry h2 {
    font-weight: 900 !important;
    font-size: 1.6em !important;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    border-bottom: var(--border-thick) solid var(--neobrut-black);
    padding-bottom: 10px;
    margin-bottom: 14px;
}

/* Footer */
.footer {
    border-top: var(--border-thick) solid var(--neobrut-black) !important;
    background: var(--neobrut-white) !important;
    padding: 30px !important;
    margin-top: 60px !important;
}

/* Code Blocks - Neobrutalist Style */
code, pre {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    border-radius: var(--border-radius-small) !important;
    background: var(--neobrut-black) !important;
    color: var(--neobrut-green) !important;
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-black) !important;
    font-weight: 600 !important;
}

/* Inline code */
code:not(pre code) {
    padding: 3px 8px !important;
    background: var(--neobrut-yellow) !important;
    color: var(--neobrut-black) !important;
    border: var(--border-thick) solid var(--neobrut-black) !important;
    border-radius: 4px !important;
    box-shadow: 2px 2px 0 0 var(--neobrut-black) !important;
    font-size: 0.9em !important;
}

/* Code blocks */
pre {
    padding: 20px !important;
    overflow-x: auto !important;
    border: var(--border-thick) solid var(--neobrut-black) !important;
    border-radius: var(--border-radius-small) !important;
    background: var(--neobrut-black) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-black) !important;
}

pre code {
    background: transparent !important;
    color: var(--neobrut-green) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-weight: 600 !important;
}

/* Syntax highlighting adjustments for neobrutalist */
pre .chroma {
    background: var(--neobrut-black) !important;
    border-radius: var(--border-radius-small) !important;
}

/* Code block header/title area */
.copy-code {
    border: var(--border-thick) solid var(--neobrut-green) !important;
    background: var(--neobrut-green) !important;
    color: var(--neobrut-black) !important;
    border-radius: var(--border-radius-small) !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
}

/* Dark mode code blocks */
.dark code:not(pre code) {
    background: var(--neobrut-purple) !important;
    color: var(--neobrut-dark-bg) !important;
    border-color: var(--neobrut-dark-border) !important;
    box-shadow: 2px 2px 0 0 var(--neobrut-dark-border) !important;
}

.dark pre {
    background: var(--neobrut-dark-card) !important;
    border-color: var(--neobrut-dark-border) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-dark-border) !important;
}

.dark pre code {
    color: var(--neobrut-green) !important;
}

.dark pre .chroma {
    background: var(--neobrut-dark-card) !important;
}

/* Top Link Button */
.top-link {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    background: var(--neobrut-pink) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-black) !important;
    border-radius: var(--border-radius-small) !important;
    width: 48px !important;
    height: 48px !important;
}

.top-link:hover {
    transform: translate(1px, 1px);
    box-shadow: calc(var(--shadow-offset) - 1px) calc(var(--shadow-offset) - 1px) 0 0 var(--neobrut-black);
    background: var(--neobrut-yellow) !important;
}

/* Theme Toggle Button */
#theme-toggle {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    background: var(--neobrut-blue) !important;
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-black) !important;
    border-radius: var(--border-radius-small) !important;
    width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto 4px !important;
}

#theme-toggle svg {
    width: 18px !important;
    height: 18px !important;
}

/* Remove separator bars */
.logo-switches li:first-child,
.logo-switches::before,
.logo-switches::after,
.lang-switch li:first-child::before,
.lang-switch::before,
.lang-switch::after {
    content: none !important;
    display: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide separator text content (the "|" bar) */
.lang-switch li:first-child {
    font-size: 0 !important;
    line-height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide any li that doesn't contain an anchor tag (the separator) */
.lang-switch > li:not(:has(a)) {
    display: none !important;
}

/* Fallback: hide first child if it only contains text */
.lang-switch li:first-child:empty {
    display: none !important;
}

/* Remove any vertical separators */
.logo-switches li,
.lang-switch li {
    border-left: none !important;
    border-right: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.logo-switches li:first-child {
    margin-left: 0 !important;
}

#theme-toggle:hover {
    transform: translate(1px, 1px);
    box-shadow: calc(var(--shadow-offset) / 2 - 1px) calc(var(--shadow-offset) / 2 - 1px) 0 0 var(--neobrut-black);
    background: var(--neobrut-yellow) !important;
}

/* Search */
.search {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    border-radius: var(--border-radius-small) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-black) !important;
}

/* Pagination */
.pagination a {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-black) !important;
    font-weight: 700 !important;
    border-radius: var(--border-radius-small) !important;
}

.pagination a:hover {
    transform: translate(1px, 1px);
    box-shadow: calc(var(--shadow-offset) / 2 - 1px) calc(var(--shadow-offset) / 2 - 1px) 0 0 var(--neobrut-black);
    background: var(--neobrut-yellow) !important;
}

/* Dark mode adjustments */
.dark .social-icons a {
    background: var(--neobrut-dark-card);
    border-color: var(--neobrut-dark-border);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-dark-border);
    color: var(--neobrut-dark-border);
}

.dark .social-icons a:hover {
    background: var(--neobrut-purple);
}

/* (Removed colored brand overrides in dark mode) */

.dark .profile .profile_inner {
    border-color: var(--neobrut-dark-border) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-dark-border) !important;
    background: var(--neobrut-dark-bg) !important;
    color: var(--neobrut-dark-border) !important;
}

.dark .profile .profile_inner h1 {
    border-bottom-color: var(--neobrut-dark-border);
    color: var(--neobrut-dark-border) !important;
}

.dark .profile .profile_inner span {
    background: var(--neobrut-pink) !important;
    border-color: var(--neobrut-dark-border) !important;
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-dark-border) !important;
    color: var(--neobrut-black) !important;
}

.dark .profile .profile_inner .exploring {
    color: var(--neobrut-dark-border) !important;
}

.dark .profile img {
    border-color: var(--neobrut-dark-border) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-dark-border) !important;
    background: var(--neobrut-purple) !important;
}

.dark .post-entry,
.dark .first-entry {
    border-color: var(--neobrut-dark-border) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-dark-border) !important;
    background: var(--neobrut-dark-bg) !important;
    color: var(--neobrut-dark-border) !important;
}

.dark .post-entry:hover,
.dark .first-entry:hover {
    box-shadow: calc(var(--shadow-offset) + 1px) calc(var(--shadow-offset) + 1px) 0 0 var(--neobrut-dark-border) !important;
}

.dark .entry-header h2,
.dark .entry-header h1,
.dark .post-entry h2,
.dark .first-entry h2 {
    border-bottom-color: var(--neobrut-dark-border);
    color: var(--neobrut-dark-border) !important;
}

.dark .header {
    border-bottom-color: var(--neobrut-dark-border) !important;
    box-shadow: 0 var(--shadow-offset) 0 0 var(--neobrut-dark-border) !important;
    background: var(--neobrut-dark-bg) !important;
}

.dark .header .logo {
    border-color: var(--neobrut-black) !important;
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-black) !important;
    background: var(--neobrut-purple) !important;
}

.dark .header .logo a {
    color: var(--neobrut-black) !important;
}

.dark .footer {
    border-top-color: var(--neobrut-dark-border) !important;
    background: var(--neobrut-dark-bg) !important;
    color: var(--neobrut-dark-border) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .social-icons {
        gap: 12px;
    }
    
    .social-icons a {
        width: 56px;
        height: 56px;
    }
    
    .social-icons a svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    .profile .profile_inner h1 {
        font-size: 2.5em !important;
    }
    
    :root {
        --shadow-offset: 3px;
        --border-thick: 2px;
        --border-radius: 10px;
        --border-radius-small: 6px;
    }
    
    .social-icons a {
        width: 48px;
        height: 48px;
    }
    
    #theme-toggle {
        width: 28px !important;
        height: 28px !important;
    }
    
    #theme-toggle svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Additional neobrutalist touches */
h1, h2, h3, h4, h5, h6 {
    font-weight: 900 !important;
    letter-spacing: -0.02em;
}

strong, b {
    font-weight: 900 !important;
}

/* Tags */
.post-tags li a,
.tag-entry .entry-tag {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    background: var(--neobrut-blue) !important;
    padding: 8px 16px !important;
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-black) !important;
    font-weight: 700 !important;
    border-radius: var(--border-radius-small) !important;
    display: inline-block;
    margin: 4px;
    transition: all 0.15s ease;
}

.post-tags li a:hover,
.tag-entry .entry-tag:hover {
    transform: translate(1px, 1px);
    box-shadow: calc(var(--shadow-offset) / 2 - 1px) calc(var(--shadow-offset) / 2 - 1px) 0 0 var(--neobrut-black);
    background: var(--neobrut-yellow) !important;
}

.dark .post-tags li a,
.dark .tag-entry .entry-tag {
    border-color: var(--neobrut-dark-border) !important;
    background: var(--neobrut-purple) !important;
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-dark-border) !important;
}

.dark .post-tags li a:hover,
.dark .tag-entry .entry-tag:hover {
    box-shadow: calc(var(--shadow-offset) / 2 - 1px) calc(var(--shadow-offset) / 2 - 1px) 0 0 var(--neobrut-dark-border);
    background: var(--neobrut-blue) !important;
}

/* Post Single Page */
.post-single {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-black) !important;
    background: var(--neobrut-white) !important;
    padding: 40px !important;
    margin: 30px 0 !important;
}

.post-single .post-title {
    font-size: 2.2em !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    border-bottom: var(--border-thick) solid var(--neobrut-black);
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.dark .post-single {
    border-color: var(--neobrut-dark-border) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-dark-border) !important;
    background: var(--neobrut-dark-bg) !important;
    color: var(--neobrut-dark-border) !important;
}

.dark .post-single .post-title {
    border-bottom-color: var(--neobrut-dark-border);
    color: var(--neobrut-dark-border) !important;
}

/* Buttons (Profile Mode buttons) */
.buttons .button {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    background: var(--neobrut-white) !important;
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-black) !important;
    border-radius: var(--border-radius-small) !important;
    margin: 8px !important;
    padding: 0 !important;
    transition: all 0.15s ease;
    font-weight: 700 !important;
}

.buttons .button .button-inner {
    padding: 12px 24px !important;
    display: block;
}

.buttons .button:hover {
    transform: translate(1px, 1px);
    box-shadow: calc(var(--shadow-offset) / 2 - 1px) calc(var(--shadow-offset) / 2 - 1px) 0 0 var(--neobrut-black);
    background: var(--neobrut-yellow) !important;
}

.buttons .button:active {
    transform: translate(calc(var(--shadow-offset) / 2), calc(var(--shadow-offset) / 2));
    box-shadow: 0 0 0 0 var(--neobrut-black);
}

.dark .buttons .button {
    border-color: var(--neobrut-dark-border) !important;
    background: var(--neobrut-dark-bg) !important;
    box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--neobrut-dark-border) !important;
    color: var(--neobrut-dark-border) !important;
}

.dark .buttons .button:hover {
    box-shadow: calc(var(--shadow-offset) / 2 - 1px) calc(var(--shadow-offset) / 2 - 1px) 0 0 var(--neobrut-dark-border);
    background: var(--neobrut-purple) !important;
}

.dark .buttons .button:active {
    box-shadow: 0 0 0 0 var(--neobrut-dark-border);
}

/* Page Header */
.page-header {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-black) !important;
    background: var(--neobrut-yellow) !important;
    padding: 30px !important;
    margin: 30px 0 !important;
}

.page-header h1 {
    font-weight: 900 !important;
    font-size: 2.2em !important;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.dark .page-header {
    border-color: var(--neobrut-dark-border) !important;
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--neobrut-dark-border) !important;
    background: var(--neobrut-purple) !important;
    color: var(--neobrut-dark-bg) !important;
}

/* Breadcrumbs */
.breadcrumbs {
    border: var(--border-thick) solid var(--neobrut-black) !important;
    border-radius: var(--border-radius-small) !important;
    background: var(--neobrut-white) !important;
    padding: 10px 16px !important;
    margin-bottom: 20px !important;
    display: inline-block;
    font-weight: 700 !important;
}

.dark .breadcrumbs {
    border-color: var(--neobrut-dark-border) !important;
    background: var(--neobrut-dark-bg) !important;
    color: var(--neobrut-dark-border) !important;
}

/* Smooth transitions for interactive elements */
a, button, .button, .top-link, #theme-toggle, .pagination a {
    transition: background-color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* default focus behavior restored */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .social-icons a {
        animation: none !important;
        opacity: 1 !important;
    }
    
    @keyframes fadeInUp {
        from, to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}