/* Theme main styles */
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.entry-title { margin: 0 0 8px; }
.entry-content, .entry-summary { line-height: 1.7; }
.page-header { margin: 24px 0; }
.widget { margin-bottom: 24px; }
.widget-title { margin-top: 0; font-size: 1.1rem; }
.search-form { display: flex; gap: 8px; }
.search-field { padding: 8px; }
.search-submit { padding: 8px 12px; }

/* Remove underline from all links globally */
a {
    text-decoration: none !important;
}

a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}

/* Footer email link */
.footer-email-link { 
    color: #3b82f6; 
    text-decoration: none !important; 
    transition: all 0.2s;
}
.footer-email-link:hover { 
    color: #2563eb;
    text-decoration: none !important; 
}

/* Beautiful dropdown styling for all select elements */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: white !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.25em 1.25em !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 0.75rem !important;
    padding: 0.625rem 2.5rem 0.625rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

select:hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08) !important;
}

select:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.08) !important;
}

select:active {
    border-color: #2563eb !important;
}

/* Specific styling for different color schemes */
select.orange-scheme:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

select.purple-scheme:focus {
    border-color: #9333ea;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

select.green-scheme:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

/* Disabled state */
select:disabled {
    background-color: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Option styling when dropdown is open */
select option {
    padding: 0.5rem;
    font-weight: 500;
    color: #334155;
}

select option:hover,
select option:focus {
    background-color: #eff6ff;
    color: #1e40af;
}

/* Hide WordPress admin bar */
#wpadminbar {
    display: none !important;
    height: 0 !important;
}
html {
    margin-top: 0 !important;
}
body {
    padding-top: 0 !important;
    background: url('../images/bg.png') no-repeat center center fixed !important;
    background-size: cover !important;
}

/* Mobile responsive menu buttons */
@media screen and (max-width: 768px) {
    /* Reduce gap between menu items on mobile */
    header nav {
        gap: 1rem !important; /* Reduce from gap-8 (2rem) to 1rem */
    }
    
    /* Make circles smaller on mobile */
    header nav a > div {
        width: 3.5rem !important; /* Reduce from w-16 (4rem) to 3.5rem */
        height: 3.5rem !important; /* Reduce from h-16 (4rem) to 3.5rem */
    }
    
    /* Make icons smaller on mobile */
    header nav a > div i {
        font-size: 1.25rem !important; /* Reduce from text-2xl (1.5rem) to 1.25rem */
    }
    
    /* Make labels smaller on mobile */
    header nav a > span {
        font-size: 0.75rem !important; /* Reduce from text-sm (0.875rem) to 0.75rem */
        margin-top: 0.375rem !important; /* Reduce top margin */
    }
    
    /* Adjust header title on mobile */
    header h1 {
        font-size: 2rem !important; /* Reduce from text-4xl */
    }
    
    /* Status filter buttons - make more compact */
    #status-filters {
        gap: 0.5rem !important; /* Reduce from gap-6 (1.5rem) to 0.5rem */
        flex-wrap: wrap; /* Allow wrapping if needed */
        justify-content: center;
    }
    
    #status-filters .status-filter {
        padding: 0.375rem 0.625rem !important; /* Reduce from px-3 py-1 */
        font-size: 0.75rem; /* Make text smaller */
    }
    
    #status-filters .status-filter span {
        font-size: 0.7rem !important; /* Make all text in buttons smaller */
    }
    
    #status-filters .status-filter .w-2.h-2 {
        width: 0.375rem !important; /* Make dots smaller */
        height: 0.375rem !important;
    }
}

/* Extra small screens - even smaller buttons */
@media screen and (max-width: 480px) {
    /* Further reduce gap on very small screens */
    header nav {
        gap: 0.5rem !important;
        flex-wrap: wrap !important; /* Allow wrapping if needed */
        padding: 0 0.5rem;
    }
    
    /* Make circles even smaller */
    header nav a > div {
        width: 3rem !important;
        height: 3rem !important;
    }
    
    /* Make icons even smaller */
    header nav a > div i {
        font-size: 1rem !important;
    }
    
    /* Make labels even smaller */
    header nav a > span {
        font-size: 0.65rem !important;
        margin-top: 0.25rem !important;
    }
    
    /* Smaller header title */
    header h1 {
        font-size: 1.5rem !important;
    }
    
    /* Status filter buttons - even more compact */
    #status-filters {
        gap: 0.375rem !important; /* Further reduce gap */
        padding: 0 0.5rem;
    }
    
    #status-filters .status-filter {
        padding: 0.25rem 0.5rem !important; /* Even more compact padding */
        font-size: 0.65rem; /* Smaller text */
    }
    
    #status-filters .status-filter span {
        font-size: 0.625rem !important; /* Even smaller text */
    }
    
    #status-filters .status-filter .w-2.h-2 {
        width: 0.3rem !important; /* Even smaller dots */
        height: 0.3rem !important;
    }
    
    /* Hide "Notera din köplats!" text on very small screens */
    #status-filters ~ * {
        font-size: 0.75rem;
    }
}