/* Desktop padding for logged-out users (no global sidebar) */
@media screen and (min-width: 769px) {
    body:not(.has-global-sidebar) #content,
    body:not(.has-global-sidebar) #page {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Desktop menu hover - Show submenu on hover */
@media screen and (min-width: 1024px) {
    /* Ensure header and all containers allow overflow for submenu */
    .site-header,
    .site-header > div,
    .site-header > div > div {
        overflow: visible !important;
    }
    
    /* Ensure navigation container has proper z-index and positioning */
    .main-navigation {
        position: relative !important;
        z-index: 1001 !important;
        overflow: visible !important;
    }
    
    .primary-menu {
        position: relative !important;
        z-index: 1001 !important;
        overflow: visible !important;
    }
    
    /* Menu items with children need relative positioning */
    .menu-item-has-children {
        position: relative !important;
        z-index: 1001 !important;
    }
    
    /* Show submenu on hover */
    .menu-item-has-children:hover > .sub-menu,
    .menu-item-has-children.group:hover > .sub-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Keep submenu visible when hovering over it */
    .sub-menu:hover {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Sub-menu styling - ensure it's visible and properly positioned */
    .menu-item-has-children > .sub-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        margin-top: 0 !important;
        padding: 0.5rem 0 !important; /* Only vertical padding, no horizontal */
        z-index: 1001 !important; /* Higher than header (z-index: 1000) */
        background-color: var(--color-background) !important; /* bg-gray-900 */
        border: none !important; /* No border */
        border-radius: 0.375rem !important; /* rounded-md */
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; /* shadow-xl */
        opacity: 1 !important;
        visibility: visible !important;
        width: max-content !important; /* Width based on content, no extra space */
        min-width: auto !important; /* No minimum width */
        max-width: 20rem !important; /* Max width to prevent too wide menus */
    }
    
    /* Sub-menu list items - remove extra spacing */
    .sub-menu li {
        display: block !important;
        width: max-content !important; /* Content-based width */
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    /* Sub-menu links - same style as main menu items */
    .sub-menu a {
        display: block !important;
        width: max-content !important; /* Content-based width */
        color: #d1d5db !important; /* text-gray-300 - same as main menu */
        font-size: 1rem !important; /* Same size as main menu */
        font-weight: 500 !important; /* font-medium - same as main menu */
        position: relative !important;
        z-index: 1 !important;
        padding: 0.5rem 0.75rem !important; /* py-2 px-3 - same as main menu */
        white-space: nowrap !important; /* Prevent text wrapping */
    }
    
    .sub-menu a:hover {
        color: #ffffff !important; /* hover:text-white - same as main menu */
        transform: scale(1.05) !important; /* hover:scale-105 - same as main menu */
    }
    
    /* For right-aligned menu items near the edge, align submenu to right */
    @media screen and (min-width: 1024px) {
        .primary-menu > .menu-item-has-children:last-child > .sub-menu {
            left: auto !important;
            right: 0 !important;
        }
    }
    
}
/*
Theme Name: Freelancer
Theme URI: https://example.com/freelancer-theme
Description: Modern, fast, and lightweight WordPress blog theme built with Tailwind CSS. Designed for freelancers, bloggers, and content creators who want a professional, responsive website with clean code and modular architecture.
Author: Your Name
Author URI: https://example.com
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: freelancer
Domain Path: /languages
Tags: blog, one-column, two-columns, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks

Freelancer WordPress Theme, Copyright 2024
Freelancer is distributed under the terms of the GNU GPL v2 or later.

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* 
 * Theme uses Tailwind CSS from Core plugin
 * Only WordPress-specific styles that can't be handled by Tailwind are included here
 */

/* Navigation hover animations */
.primary-menu a {
    display: inline-block;
    transform-origin: center;
    background-color: transparent !important;
}

.primary-menu a:hover {
    transform: scale(1.05);
    background-color: transparent !important;
}

.primary-menu a.current-menu-item,
.primary-menu a.current_page_item {
    background-color: transparent !important;
    color: #d1d5db !important; /* Same as normal state */
}

.mobile-primary-menu a {
    display: block;
    transform-origin: center;
    background-color: transparent !important;
    transition: all 0.3s ease-in-out;
}

.mobile-primary-menu a:hover {
    transform: scale(1.05) translateX(2px);
    background-color: transparent !important;
    transition: all 0.3s ease-in-out;
}

.mobile-primary-menu a.current-menu-item,
.mobile-primary-menu a.current_page_item {
    background-color: transparent !important;
    color: #d1d5db !important; /* Same as normal state */
}


/* WordPress admin bar - Completely hidden */
#wpadminbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

html {
    margin-top: 0 !important;
}

body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.admin-bar .site-header {
    top: 0 !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 0 !important;
    }
    
    body.admin-bar {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

@media (min-width: 1024px) {
    body.admin-bar {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* Header scroll behavior styles */
.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.2s ease-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transform: translateY(0);
    will-change: transform;
}

.site-header.header-hidden {
    transform: translateY(-100%);
}

.site-header.scrolled {
    background-color: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Mobile - reset header positioning when sidebar is hidden */
@media screen and (max-width: 768px) {
    body.has-global-sidebar .site-header,
    body.has-global-sidebar.sidebar-expanded .site-header {
        left: 0;
        width: 100%;
    }
}

/* Mobile Menu Animation - Slide from left to right, full screen below header */
@media (max-width: 1023px) {
    .mobile-menu {
        position: fixed;
        top: 3rem; /* Start exactly at header bottom - h-12 = 3rem */
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: calc(100vh - 3rem); /* Full height minus header */
        background-color: rgba(0, 0, 0, 0.95) !important;
        opacity: 1 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1002 !important; /* Higher than global sidebar (1000) to appear on top */
        overflow-y: auto;
        margin-top: 0 !important; /* Ensure no margin gap */
        padding-top: 0 !important; /* Ensure no padding gap */
    }
    
    .mobile-menu.menu-open {
        transform: translateX(0);
        background-color: var(--color-background) !important; /* Same as page background color */
        opacity: 1 !important;
        margin-top: 0 !important; /* Ensure no margin gap when open */
        padding-top: 0 !important; /* Ensure no padding gap when open */
        z-index: 1002 !important; /* Higher than global sidebar when menu is open */
    }
    
    /* Lower global sidebar z-index when mobile menu is open */
    body.mobile-menu-open .global-sidebar-container {
        z-index: 999 !important;
    }
    
    /* Ensure no background overlay */
    .mobile-menu::before {
        display: none !important;
    }
    
    .mobile-menu::after {
        display: none !important;
    }
    
    /* Adjust for larger header on desktop breakpoint */
    @media (min-width: 1024px) {
        .mobile-menu {
            top: 3.5rem; /* lg:h-14 header height - exact match */
            height: calc(100vh - 3.5rem);
            margin-top: 0 !important; /* Ensure no margin gap */
            padding-top: 0 !important; /* Ensure no padding gap */
        }
    }
    
    /* Mobile menu content styling */
    .mobile-menu .mobile-primary-menu {
        display: flex;
        flex-direction: column;
        background-color: transparent !important;
        opacity: 1 !important;
        margin-top: 0 !important; /* Ensure no margin gap */
        padding-top: 0 !important; /* Ensure no padding gap */
    }
    
    .mobile-menu .mobile-primary-menu a {
        display: block;
        font-size: 1.125rem;
        font-weight: 500;
        color: #d1d5db;
        text-decoration: none;
        border-bottom: none !important; /* Remove divider line */
        transition: all 0.2s ease;
        width: 100%;
        margin: 0 -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        opacity: 1 !important;
    }

    /* Remove hover scale/animation on mobile menu items */
    .mobile-menu .mobile-primary-menu a,
    .mobile-menu .mobile-primary-menu a:hover,
    .mobile-menu .mobile-primary-menu a:focus,
    .mobile-menu .mobile-primary-menu a:active,
    .mobile-menu.menu-open .mobile-primary-menu a,
    .mobile-menu.menu-open .mobile-primary-menu a:hover,
    .mobile-menu.menu-open .mobile-primary-menu a:focus,
    .mobile-menu.menu-open .mobile-primary-menu a:active {
        transform: none !important;
        transition: none !important;
    }
    
    /* Mobile menu open state - match page colors */
    .mobile-menu.menu-open .mobile-primary-menu a {
        color: var(--color-text) !important; /* Same as page text color */
    }
    
    /* Keep hover color, remove active/focus/visited color changes */
    .mobile-menu .mobile-primary-menu a:hover {
        color: #ffffff !important; /* Hover color */
        background-color: transparent !important;
        opacity: 1 !important;
        width: 100%;
    }
    
    /* Remove color changes on active, focus, visited */
    .mobile-menu .mobile-primary-menu a:active,
    .mobile-menu .mobile-primary-menu a:focus,
    .mobile-menu .mobile-primary-menu a:visited {
        color: #d1d5db !important; /* Keep same color as normal state */
        background-color: transparent !important;
        opacity: 1 !important;
        width: 100%;
    }
    
    /* Mobile menu open state - keep hover, remove active/focus/visited */
    .mobile-menu.menu-open .mobile-primary-menu a:hover {
        color: var(--color-text-primary) !important; /* Hover color */
        background-color: transparent !important;
    }
    
    .mobile-menu.menu-open .mobile-primary-menu a:active,
    .mobile-menu.menu-open .mobile-primary-menu a:focus,
    .mobile-menu.menu-open .mobile-primary-menu a:visited {
        color: var(--color-text) !important; /* Same as normal state */
        background-color: transparent !important;
    }
    
    /* Ensure mobile menu links never change background color */
    .mobile-menu .mobile-primary-menu a {
        background-color: transparent !important;
    }
    
    .mobile-menu .mobile-primary-menu a.current-menu-item,
    .mobile-menu .mobile-primary-menu a.current_page_item {
        background-color: transparent !important;
        color: #d1d5db !important; /* Same as normal state */
    }
    
    .mobile-menu .mobile-primary-menu a:last-child {
        border-bottom: none !important;
    }
    
    /* Mobile sub-menu styling */
    .mobile-menu .mobile-sub-menu {
        display: none !important; /* Hidden by default */
        padding-left: 1rem !important; /* Indent sub-menu items */
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .mobile-menu .mobile-sub-menu.show {
        display: block !important;
    }
    
    .mobile-menu .mobile-sub-menu li {
        margin: 0 !important;
    }
    
    .mobile-menu .mobile-sub-menu a {
        padding-left: 1.5rem !important; /* More indent for sub-menu items */
        font-size: 1rem !important;
        color: #9ca3af !important; /* Lighter color for sub-items */
    }
    
    /* Toggle icon positioning and rotation */
    .mobile-menu .menu-item-has-children-mobile a {
        display: flex !important;
        align-items: center !important; /* Vertically center icon with text */
        justify-content: space-between !important;
    }
    
    .mobile-menu .menu-item-has-children-mobile .mobile-submenu-toggle-icon {
        transition: transform 0.2s ease;
        margin-left: auto !important; /* Push icon to the right */
        flex-shrink: 0 !important; /* Prevent icon from shrinking */
        align-self: center !important; /* Vertically center with text */
    }
    
    .mobile-menu .menu-item-has-children-mobile.active .mobile-submenu-toggle-icon {
        transform: rotate(180deg);
    }
    
    /* Touch-friendly active states for mobile - no color change */
    @media (hover: none) and (pointer: coarse) {
        .mobile-menu .mobile-primary-menu a:active {
            background-color: transparent !important;
            color: #d1d5db !important; /* Keep same color */
            opacity: 1 !important;
            transform: none !important; /* Remove scale effect */
        }
    }
}

/* Add padding to body to prevent content jump */
body {
    padding-top: 3rem !important; /* 48px - reduced from 64px */
    margin-top: 0 !important;
}

@media (min-width: 1024px) {
    body {
        padding-top: 3.5rem !important; /* 56px - reduced from 80px */
        margin-top: 0 !important;
    }
}

/* Global sidebar compatibility for body padding */
body.has-global-sidebar {
    padding-top: 3rem !important; /* Reduced to match body padding */
    margin-top: 0 !important;
}

@media (min-width: 1024px) {
    body.has-global-sidebar {
        padding-top: 3.5rem !important; /* Reduced to match body padding */
        margin-top: 0 !important;
    }
}

/* Ensure smooth transitions on mobile */
@media (max-width: 1023px) {
    .site-header {
        transition: transform 0.15s ease-out, background-color 0.25s ease-in-out;
    }
}

/* Ensure main content area is properly positioned below header */
.site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

#primary {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure content containers don't have conflicting margins */
.site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Additional content positioning fixes */
main#primary {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure page content starts below header */
.page-content-body,
.entry-content,
.single-blog-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Fix for any potential admin bar conflicts */
.admin-bar .site-main,
.admin-bar #primary,
.admin-bar .site-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Profile menu styling for main site only */
body:not(.panel-page) #profile-menu {
    position: fixed !important;
    z-index: 2147483647 !important;
}

body:not(.panel-page) #profile-menu.show {
    display: block !important;
}

body:not(.panel-page) #profile-menu.hidden {
    display: none !important;
}

/* Panel page specific spacing - reduce header to content spacing */
body.panel-page {
    padding-top: 2.5rem !important; /* 40px - reduced from 3rem */
    margin-top: 0 !important;
}

@media (min-width: 1024px) {
    body.panel-page {
        padding-top: 3rem !important; /* 48px - reduced from 3.5rem */
        margin-top: 0 !important;
    }
}

/* Panel page content containers */
body.panel-page .panel-page-wrapper,
body.panel-page .panel-content-wrapper,
body.panel-page .panel-main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Panel page mobile spacing */
@media (max-width: 768px) {
    body.panel-page {
        padding-top: 2rem !important; /* 32px - further reduced for mobile */
    }
}

/* WordPress specific utility classes */
.sticky {
    position: relative;
}

/* WordPress content styles that integrate with Tailwind */
.wp-block-separator {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
}

.wp-block-separator.is-style-wide {
    border-top-width: 2px;
}

.wp-block-separator.is-style-dots {
    border: none;
    text-align: center;
    line-height: 1;
    height: auto;
}

.wp-block-separator.is-style-dots::before {
    content: "···";
    color: var(--color-text-tertiary);
    font-size: 1.5rem;
    letter-spacing: 2rem;
    padding-left: 2rem;
}

/* WordPress specific comment styles */
.bypostauthor .comment {
    background-color: var(--color-comment-background);
    border-left: 4px solid var(--color-comment-border);
}

/* Accessibility styles */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: var(--color-card);
    border-radius: 3px;
    box-shadow: 0 0 2px 2px var(--color-shadow-dark);
    clip: auto !important;
    color: var(--color-primary);
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* WordPress media and embed adjustments */
.wp-block-embed__wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper object,
.wp-block-embed__wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Editor styles */
.editor-styles-wrapper {
    background-color: var(--color-background);
}

.editor-styles-wrapper .wp-block {
    max-width: 840px;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .wp-block-separator {
        border-color: var(--color-border-secondary);
    }
    
    .wp-block-separator.is-style-dots::before {
        color: var(--color-text-tertiary);
    }
    
    .bypostauthor .comment {
        background-color: var(--color-comment-background);
    }
}

/* Print styles */
@media print {
    .no-print,
    .site-header,
    .site-footer,
    .sidebar,
    .comment-form,
    .post-navigation,
    .posts-navigation {
        display: none !important;
    }
    
    .site-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .entry-content {
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }
    
    .entry-title {
        font-size: 18pt !important;
    }
}

/* Admin panel blog base field styling */
.form-table .form-field {
    display: table-row;
}

.form-table .form-field th {
    display: table-cell;
    vertical-align: top;
    padding: 20px 10px 20px 0;
    width: 200px;
    line-height: 1.3;
    font-weight: 600;
}

.form-table .form-field td {
    display: table-cell;
    vertical-align: top;
    padding: 15px 10px;
    line-height: 1.3;
}

.form-table .form-field input[type="text"] {
    width: 100%;
    max-width: 400px;
}

.form-table .form-field .description {
    margin-top: 5px;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Blog Layout Styles - Now handled by Tailwind CSS classes */

/* Line clamp utility for bio text */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sidebar scroll fix - Fixed positioning approach - ONLY for blog detail page */
@media (min-width: 1024px) {
    /* Blog detail page specific styles */
    .single-post .sticky-sidebar {
        position: fixed !important;
        top: 5rem !important; /* 80px - header height */
        right: 2rem !important;
        width: calc(33.333333% - 1rem) !important; /* lg:w-1/3 minus gap */
        max-width: 320px !important;
        z-index: 10 !important;
        max-height: calc(100vh - 5rem) !important;
        overflow-y: auto !important;
        transform: translateZ(0) !important;
        will-change: transform !important;
    }
    
    /* Adjust main content to account for fixed sidebar - ONLY for blog */
    .single-post .flex-1.overflow-x-hidden {
        width: calc(66.666667% - 1rem) !important; /* 2/3 minus gap */
        max-width: calc(100% - 320px - 2rem) !important; /* Full width minus sidebar and gap */
        margin-right: 0 !important;
    }
    
    /* Ensure the flex container doesn't interfere - ONLY for blog */
    .single-post .flex.flex-col.lg\\:flex-row.gap-8 {
        align-items: flex-start !important;
    }
    
    /* Service detail page - same fixed behavior as blog */
    .single-service .sticky-sidebar {
        position: fixed !important;
        top: 5rem !important; /* 80px - header height */
        right: 2rem !important;
        width: calc(33.333333% - 1rem) !important; /* lg:w-1/3 minus gap */
        max-width: 320px !important;
        z-index: 10 !important;
        max-height: calc(100vh - 5rem) !important;
        overflow-y: auto !important;
        transform: translateZ(0) !important;
        will-change: transform !important;
    }
    
    /* Adjust main content to account for fixed sidebar - Service page */
    .single-service .service-main-content {
        width: calc(66.666667% - 1rem) !important; /* 2/3 minus gap */
        max-width: calc(100% - 320px - 2rem) !important; /* Full width minus sidebar and gap */
        margin-right: 0 !important;
    }
    
    /* Ensure the flex container doesn't interfere - Service page */
    .single-service .service-layout {
        align-items: flex-start !important;
    }
}

@media (max-width: 1023px) {
    /* Blog detail page mobile styles */
    .single-post .sticky-sidebar {
        position: relative !important;
        top: 0 !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        overflow-y: visible !important;
        transform: none !important;
        will-change: auto !important;
    }
    
    .single-post .flex-1.overflow-x-hidden {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
    }
    
    /* Service detail page mobile styles */
    .single-service .sticky-sidebar {
        position: relative !important;
        top: 0 !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        overflow-y: visible !important;
        transform: none !important;
        will-change: auto !important;
    }
    
    .single-service .service-main-content {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
    }
}

/* Page Template Styles - Using Tailwind classes instead of custom CSS */

/* Page header styles - Using Tailwind classes */

/* Blog content styling - Using Tailwind classes */

/* Remove any background from prose elements */
.prose {
    background: none !important;
    background-color: transparent !important;
}

.prose p {
    background: none !important;
    background-color: transparent !important;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    background: none !important;
    background-color: transparent !important;
}

/* Remove background from all content elements */
.entry-content {
    background: none !important;
    background-color: transparent !important;
}

.entry-content p {
    background: none !important;
    background-color: transparent !important;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    background: none !important;
    background-color: transparent !important;
}

/* Remove background from page content */
.page-content-body {
    background: none !important;
    background-color: transparent !important;
}

.page-content-body * {
    background: none !important;
    background-color: transparent !important;
}

/* Override Tailwind prose styles */
.prose-invert {
    background: none !important;
    background-color: transparent !important;
}

.prose-invert p {
    background: none !important;
    background-color: transparent !important;
}

.prose-invert h1,
.prose-invert h2,
.prose-invert h3,
.prose-invert h4,
.prose-invert h5,
.prose-invert h6 {
    background: none !important;
    background-color: transparent !important;
}


/* Page container centering - Using Tailwind classes */

/* Page centering - Using Tailwind classes */

.page-header {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    position: relative;
    margin-top: 2rem;
    border-radius: 0.75rem;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.page-title {
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-meta {
    position: relative;
    z-index: 1;
}

.page-content-body {
    background-color: #1f2937;
}

/* Prose styles - Using Tailwind classes */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
}

.prose h1 {
    margin-top: 0 !important;
}

.prose h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}

.prose p {
    color: #d1d5db !important;
    line-height: 1.7 !important;
}

.prose strong {
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* Link styles for page content - Force remove underlines */
.prose a,
.entry-content a,
.page-content-body a,
.single-blog-content a,
.prose a:link,
.entry-content a:link,
.page-content-body a:link,
.single-blog-content a:link {
    color: #fcd307 !important; /* yellow-500 - site theme color */
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
    transition: all 0.2s ease !important;
}

.prose a:hover,
.entry-content a:hover,
.page-content-body a:hover,
.single-blog-content a:hover,
.prose a:link:hover,
.entry-content a:link:hover,
.page-content-body a:link:hover,
.single-blog-content a:link:hover {
    color: #fde047 !important; /* yellow-400 - lighter yellow */
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
}

.prose a:visited,
.entry-content a:visited,
.page-content-body a:visited,
.single-blog-content a:visited {
    color: #d4b106 !important; /* yellow-700 - darker yellow for visited */
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
}

.prose a:visited:hover,
.entry-content a:visited:hover,
.page-content-body a:visited:hover,
.single-blog-content a:visited:hover {
    color: #fcd307 !important; /* yellow-500 - back to normal on hover */
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
}

/* Featured image styling - Using Tailwind classes */

/* Featured image banner styling (for old structure) */
.page-content-body .featured-image {
    margin: 0 0 2rem 0;
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

.page-content-body .featured-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 0;
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.page-content-body .featured-image:hover img {
    transform: scale(1.02);
}

/* Featured image overlay effect */
.page-content-body .featured-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(4, 120, 87, 0.2) 100%);
    z-index: 1;
    pointer-events: none;
}

.page-content-body .prose code {
    background-color: #374151;
    color: #fbbf24;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.page-content-body .prose pre {
    background-color: #111827;
    border: 1px solid #374151;
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.page-content-body .prose pre code {
    background-color: transparent;
    color: #d1d5db;
    padding: 0;
}

.page-tags {
    border-top: 1px solid #374151;
}

.page-tags a {
    transition: all 0.2s ease;
}

.page-tags a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for page template */
@media (max-width: 768px) {
    .page-header {
        padding: 2rem 1.5rem;
    }
    
    .page-title {
        font-size: 1.875rem;
    }
    
    .page-meta {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    /* Mobile styles - Using Tailwind classes */
    
    /* Mobile adjustments - Using Tailwind classes */
}

@media (max-width: 480px) {
    /* Small screen adjustments - Using Tailwind classes */
}

/* Blog Avatar Styling */
.avatar {
    display: inline-block;
    vertical-align: middle;
}

.avatar-22 {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
}

.avatar.rounded-full {
    border-radius: 50%;
}

/* Margin utilities */
.mr-2 {
    margin-right: 0.5rem !important;
}

/* Avatar specific margin */
.avatar.mr-2 {
    margin-right: 0.5rem !important;
}

/* Blog author section spacing */
.flex.items-center .avatar + span {
    margin-left: 0;
}

/* Blog main content avatar size fix */
.blog-main-content .flex.items-center .avatar {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
}

/* Archive page avatar spacing fix */
.service-archive-content .flex.items-center .avatar,
.blog-card .flex.items-center .avatar,
.archive .flex.items-center .avatar {
    margin-right: 0.5rem !important;
}

/* Logo and Site Title Alignment */
.custom-logo-container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Force all custom logos to be small */
.custom-logo,
.custom-logo img,
.custom-logo-link img {
    height: 1rem !important;
    max-height: 1rem !important;
    max-width: 1rem !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Force all site titles to be smaller */
.site-title {
    font-size: 0.875rem !important; /* text-sm */
    line-height: 1.5 !important;
}

@media (min-width: 1024px) {
    .site-title {
        font-size: 1rem !important; /* text-base */
        line-height: 1.5 !important;
    }
}

@media (min-width: 1280px) {
    .site-title {
        font-size: 1.125rem !important; /* text-lg */
        line-height: 1.5 !important;
    }
}

@media (max-width: 640px) {
    .site-title {
        font-size: 0.875rem !important; /* text-sm */
        line-height: 1.5 !important;
    }
}

/* Header height is now controlled by Tailwind classes: h-12 lg:h-14 */

/* Make global-sidebar-header same height as masthead */
.global-sidebar-header {
    height: 3rem !important; /* h-12 - Same as masthead */
    min-height: 3rem !important;
}

@media (min-width: 1024px) {
    .global-sidebar-header {
        height: 3.5rem !important; /* lg:h-14 - Same as masthead */
        min-height: 3.5rem !important;
    }
}

/* Remove top and bottom padding from global sidebar content */
.global-sidebar-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Fix sidebar toggle icon hover color */
.sidebar-toggle-icon.collapsed-icon:hover {
    color: white !important;
}

.sidebar-toggle-icon.expanded-icon:hover {
    color: white !important;
}

/* Ensure sidebar toggle icons are white on hover */
.w-5.h-5.sidebar-toggle-icon:hover {
    color: white !important;
}

/* Global sidebar toggle hover animations */
.global-sidebar-toggle {
    transition: all 0.3s ease-in-out !important;
    transform-origin: center !important;
}

.global-sidebar-toggle:hover {
    transform: scale(1.1) !important;
    transition: all 0.3s ease-in-out !important;
}

.global-sidebar-toggle:hover .sidebar-toggle-icon {
    color: white !important;
    transform: scale(1.1) !important;
    transition: all 0.3s ease-in-out !important;
}

/* Specific animations for collapsed and expanded states */
.global-sidebar-toggle:hover .sidebar-toggle-icon.collapsed-icon {
    color: white !important;
    transform: scale(1.1) !important;
    transition: all 0.3s ease-in-out !important;
}

.global-sidebar-toggle:hover .sidebar-toggle-icon.expanded-icon {
    color: white !important;
    transform: scale(1.1) !important;
    transition: all 0.3s ease-in-out !important;
}

/* Global sidebar menu icons hover animations */
.global-sidebar-menu a {
    transition: all 0.3s ease-in-out !important;
    transform-origin: center !important;
}

.global-sidebar-menu a:hover {
    transform: scale(1.05) !important;
    transition: all 0.3s ease-in-out !important;
}

.global-sidebar-menu a:hover svg {
    color: white !important;
    transform: scale(1.1) !important;
    transition: all 0.3s ease-in-out !important;
}

/* Menu icon specific hover effects */
.global-sidebar-menu .menu-icon {
    transition: all 0.3s ease-in-out !important;
    transform-origin: center !important;
}

.global-sidebar-menu .menu-icon:hover {
    transform: scale(1.1) rotate(3deg) !important;
    transition: all 0.3s ease-in-out !important;
}

/* Menu items with icons */
.global-sidebar-menu .menu-item a {
    transition: all 0.3s ease-in-out !important;
    transform-origin: center !important;
}

.global-sidebar-menu .menu-item a:hover {
    transform: scale(1.05) translateX(2px) !important;
    transition: all 0.3s ease-in-out !important;
}

.global-sidebar-menu .menu-item a:hover svg {
    color: white !important;
    transform: scale(1.1) !important;
    transition: all 0.3s ease-in-out !important;
}

/* Profile icon specific hover animations */
.global-sidebar-menu-item {
    transition: all 0.3s ease-in-out !important;
    transform-origin: center !important;
}

.global-sidebar-menu-item:hover {
    transform: scale(1.05) translateX(2px) !important;
    transition: all 0.3s ease-in-out !important;
}

.global-sidebar-menu-item:hover img {
    transform: scale(1.1) !important;
    transition: all 0.3s ease-in-out !important;
}

.global-sidebar-menu-item:hover .sidebar-text {
    color: white !important;
    transition: all 0.3s ease-in-out !important;
}

/* Navigation active states are now controlled by Tailwind classes */

/* Fix mobile bottom navigation active state */
.mobile-bottom-nav .mobile-nav-item.active {
    color: white !important;
    /* No background color change for active state */
}

.mobile-bottom-nav .mobile-nav-item.active .mobile-nav-icon {
    color: white !important;
}

.mobile-bottom-nav .mobile-nav-item.active .mobile-nav-text {
    color: white !important;
}

/* Mobile bottom navigation background */
.mobile-bottom-nav {
    background-color: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.mobile-bottom-nav-container {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

/* Mobile bottom navigation items */
.mobile-bottom-nav .mobile-nav-item {
    color: #9ca3af !important; /* text-gray-400 */
    transition: all 0.3s ease-in-out !important;
}

.mobile-bottom-nav .mobile-nav-item:hover {
    color: white !important;
    transform: scale(1.05) !important;
    transition: all 0.3s ease-in-out !important;
}

.mobile-bottom-nav .mobile-nav-item:hover .mobile-nav-icon {
    color: white !important;
}

.mobile-bottom-nav .mobile-nav-item:hover .mobile-nav-text {
    color: white !important;
}

.custom-logo-container img {
    height: 1rem !important; /* text-lg ile aynı yükseklik */
    max-height: 1rem !important;
    max-width: 1rem !important;
    width: auto;
    object-fit: contain;
}

/* Desktop logo adjustments */
@media (min-width: 1024px) {
    .custom-logo-container {
        flex-shrink: 0;
    }
    
    .custom-logo-container img {
        height: 1.125rem !important; /* lg:text-xl ile aynı yükseklik */
        max-height: 1.125rem !important;
        max-width: 1.125rem !important;
        width: auto;
        object-fit: contain;
    }
    
    .site-branding .flex.items-center.space-x-3 {
        gap: 1rem;
    }
    
    .site-branding .flex.items-center.lg\:space-x-4 {
        gap: 1rem;
    }
    
    /* Ensure logo and title are properly aligned on desktop */
    .site-branding .flex.items-center {
        align-items: center;
    }
    
    /* Better text alignment for desktop */
    .text-branding {
        display: flex;
        align-items: center;
    }
}

/* Large desktop screens */
@media (min-width: 1280px) {
    .custom-logo-container img {
        height: 1.25rem !important; /* xl:text-2xl ile aynı yükseklik */
        max-height: 1.25rem !important;
        max-width: 1.25rem !important;
    }
    
    .site-branding .flex.items-center.space-x-3 {
        gap: 1.25rem;
    }
    
    .site-branding .flex.items-center.lg\:space-x-4 {
        gap: 1.25rem;
    }
    
    /* Better spacing for large screens */
    .site-branding .flex.items-center {
        gap: 1.25rem;
    }
}

/* Ensure proper spacing between logo and site title */
.site-branding .flex.items-center.space-x-3 {
    gap: 0.75rem;
}

/* Logo responsive sizing */
.custom-logo-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Mobile logo adjustments */
@media (max-width: 640px) {
    .custom-logo-container img {
        height: 0.875rem !important; /* text-lg ile aynı yükseklik */
        max-height: 0.875rem !important;
        max-width: 0.875rem !important;
    }
    
    .site-branding .flex.items-center.space-x-3 {
        gap: 0.5rem;
    }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1023px) {
    .custom-logo-container img {
        height: 1rem !important; /* text-lg ile aynı yükseklik */
        max-height: 1rem !important;
        max-width: 1rem !important;
    }
    
    .site-branding .flex.items-center.space-x-3 {
        gap: 0.75rem;
    }
}

/* Sidebar Logo Adjustments - Same as main header */
.sidebar-branding .custom-logo-container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sidebar-branding .custom-logo-container img {
    height: 1rem !important; /* Same as main header */
    max-height: 1rem !important;
    max-width: 1rem !important;
    width: auto;
    object-fit: contain;
}

.sidebar-branding .flex.items-center.space-x-3 {
    gap: 0.5rem;
}

/* Sidebar logo responsive sizing - Same as main header */
@media (min-width: 1024px) {
    .sidebar-branding .custom-logo-container img {
        height: 1.125rem !important; /* Same as main header desktop */
        max-height: 1.125rem !important;
        max-width: 1.125rem !important;
    }
}

/* Large desktop screens - Same as main header */
@media (min-width: 1280px) {
    .sidebar-branding .custom-logo-container img {
        height: 1.25rem !important; /* Same as main header large desktop */
        max-height: 1.25rem !important;
        max-width: 1.25rem !important;
    }
}

/* Mobile sidebar adjustments - Same as main header */
@media (max-width: 640px) {
    .sidebar-branding .custom-logo-container img {
        height: 0.875rem !important; /* Same as main header mobile */
        max-height: 0.875rem !important;
        max-width: 0.875rem !important;
    }
    
    .sidebar-branding .flex.items-center.space-x-3 {
        gap: 4rem;
    }
}

/* Tablet sidebar adjustments - Same as main header */
@media (min-width: 641px) and (max-width: 1023px) {
    .sidebar-branding .custom-logo-container img {
        height: 1rem !important; /* Same as main header tablet */
        max-height: 1rem !important;
        max-width: 1rem !important;
    }
    
    .sidebar-branding .flex.items-center.space-x-3 {
        gap: 0.75rem;
    }
}

/* Sidebar site title - Same as main header */
.sidebar-branding .site-title {
    font-size: 0.875rem !important; /* text-sm - Same as main header */
    line-height: 1.5 !important;
}

@media (min-width: 1024px) {
    .sidebar-branding .site-title {
        font-size: 1rem !important; /* text-base - Same as main header */
        line-height: 1.5 !important;
    }
}

@media (min-width: 1280px) {
    .sidebar-branding .site-title {
        font-size: 1.125rem !important; /* text-lg - Same as main header */
        line-height: 1.5 !important;
    }
}

@media (max-width: 640px) {
    .sidebar-branding .site-title {
        font-size: 0.875rem !important; /* text-sm - Same as main header */
        line-height: 1.5 !important;
    }
}

/* ========================================
   MODERN FOOTER STYLES
   ======================================== */

/* Footer Top Section */
.footer-top {
    background-color: var(--color-background);
}

/* Footer Logo */
.footer-logo img {
    /* Logo efektleri kaldırıldı */
}

.site-name {
    color: var(--color-text);
}

.site-slogan {
    color: var(--color-text-muted, #6b7280);
}

/* Footer Content Section */
.footer-content {
    background-color: var(--color-background);
}

/* Footer Columns */
.footer-column {
    position: relative;
}

.footer-title {
    position: relative;
}


/* Footer Links - Styling handled by Tailwind CSS classes in footer.php walker */

/* Contact Info */
.contact-info .contact-item {
    position: relative;
    padding-left: 0;
}

/* Contact Address - Override global color rules */
.contact-address,
.contact-address p {
    color: var(--color-text-muted, #6b7280) !important;
}

/* Footer Bottom */
.footer-bottom {
    background-color: var(--color-background);
}

/* Override global CSS rules for footer */
.site-footer * {
    color: inherit !important;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
    color: var(--color-text) !important;
}

.site-footer p,
.site-footer span,
.site-footer div {
    color: var(--color-text-muted, #6b7280) !important;
}

.site-footer a {
    color: var(--color-text-muted, #6b7280) !important;
}

.site-footer a:hover {
    color: var(--color-text, #111827) !important;
}

/* Specific footer sections */
.footer-top .site-name {
    color: var(--color-text) !important;
}

.footer-top .site-slogan {
    color: var(--color-text-muted, #6b7280) !important;
}

.footer-title {
    color: var(--color-text) !important;
}

.footer-links a {
    color: var(--color-text-muted, #6b7280) !important;
}

/* Footer links hover styling handled by Tailwind CSS classes */

.contact-info .contact-item {
    color: var(--color-text-muted, #6b7280) !important;
}

.contact-info .contact-item a {
    color: var(--color-text-muted, #6b7280) !important;
}

.contact-info .contact-item a:hover {
    color: var(--color-text, #111827) !important;
}

.contact-info .contact-item button {
    color: var(--color-text-muted, #6b7280) !important;
    background: none !important;
    border: none !important;
}

.contact-info .contact-item button:hover {
    color: var(--color-text, #111827) !important;
}

.site-info {
    color: var(--color-text-muted, #6b7280) !important;
}

.site-info a {
    color: var(--color-text-muted, #6b7280) !important;
}

.site-info a:hover {
    color: var(--color-text, #111827) !important;
}

.footer-menu-list a {
    color: var(--color-text-muted, #6b7280) !important;
}

.footer-menu-list a:hover {
    color: var(--color-text, #111827) !important;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    /* Keep logo, site name and slogan side by side on mobile */
    .footer-top .flex {
        flex-direction: row !important;
        align-items: center;
        gap: 0.5rem; /* Smaller gap for tighter layout */
        flex-wrap: nowrap !important; /* Prevent wrapping initially */
    }
    
    .footer-logo {
        flex-shrink: 0;
        order: 1; /* Logo first */
    }
    
    .footer-top .flex-1 {
        order: 2; /* Text content second */
        flex: 0 1 auto; /* Don't grow, allow shrink */
        min-width: 0; /* Allow text to shrink */
        width: auto; /* Natural width */
    }
    
    .footer-logo img {
        height: 2rem !important; /* Even smaller logo for mobile */
        width: auto;
    }
    
    
    .site-name {
        font-size: 1.25rem !important; /* Smaller site name for mobile */
        line-height: 1.1;
    }
    
    .site-slogan {
        font-size: 0.75rem !important; /* Smaller slogan for mobile */
        line-height: 1.2;
    }
    
    .footer-title {
        font-size: 1rem !important;
        margin-bottom: 1rem !important; /* Reduce bottom margin on mobile */
    }
}

/* Very small screens - stack vertically when really needed */
@media (max-width: 320px) {
    .footer-top .flex {
        flex-direction: column !important;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .footer-logo {
        order: 1; /* Logo on top */
    }
    
    .footer-top .flex-1 {
        order: 2; /* Text below logo */
    }
    
    .footer-logo img {
        height: 1.75rem !important; /* Even smaller logo for very small screens */
    }
    
    .site-name {
        font-size: 1.125rem !important;
    }
    
    .site-slogan {
        font-size: 0.75rem !important;
    }
}

/* Site name and slogan color fix */
.site-slogan {
    color: var(--color-text) !important;
}

.site-name a {
    color: var(--color-text) !important;
    text-decoration: none !important;
}

.site-name a:hover {
    color: var(--color-text) !important;
    text-decoration: none !important;
}

/* Hover effects for better interactivity */

/* Smooth transitions */
.footer-links a,
.contact-info a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus states for accessibility */
.footer-links a:focus,
.contact-info a:focus {
    outline: 2px solid #fcd307;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Global sidebar footer width constraints - match main content */
@media screen and (min-width: 769px) {
    /* Footer width constraints when global sidebar is active */
    body.has-global-sidebar footer.site-footer,
    body.has-global-sidebar #colophon {
        max-width: calc(100vw - 5rem) !important; /* collapsed sidebar */
        width: calc(100vw - 5rem) !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0.5rem !important; /* match #content desktop padding */
    }

    /* Adjust when sidebar is expanded */
    body.has-global-sidebar.sidebar-expanded footer.site-footer,
    body.has-global-sidebar.sidebar-expanded #colophon {
        max-width: calc(100vw - 14rem) !important; /* expanded sidebar */
        width: calc(100vw - 14rem) !important;
    }

    /* Ensure inner footer containers don't exceed footer width */
    body.has-global-sidebar #colophon .footer-top,
    body.has-global-sidebar #colophon .footer-content,
    body.has-global-sidebar #colophon .footer-bottom,
    body.has-global-sidebar #colophon .container,
    body.has-global-sidebar #colophon .site-container {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* Left-align footer bottom when no global sidebar */
@media screen and (min-width: 769px) {
    body:not(.has-global-sidebar) #colophon .footer-bottom .flex {
        justify-content: flex-start !important;
    }
}

/* Hide comment form notes and required fields messages */
.comment-notes,
.comment-notes-before,
.comment-notes-after,
.comment-form .comment-notes,
.comment-form .comment-notes-before,
.comment-form .comment-notes-after,
.form-allowed-tags,
.comment-form .form-allowed-tags,
.comment-form p.comment-notes,
.comment-form p.comment-notes-before,
.comment-form p.comment-notes-after {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Add 1rem horizontal padding to footer for logged-out users (no global sidebar) */
@media screen and (min-width: 769px) {
    body:not(.has-global-sidebar) footer.site-footer,
    body:not(.has-global-sidebar) #colophon {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }
    body:not(.has-global-sidebar) #colophon .footer-top,
    body:not(.has-global-sidebar) #colophon .footer-content,
    body:not(.has-global-sidebar) #colophon .footer-bottom {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }
}