/* Custom styles for FOP Symbol Finder */
/* Minimal CSS - Most styling is handled by Tailwind CSS */

/* Hide ad slots by default (remove .hidden class to enable monetization) */
.ad-slot.hidden {
    display: none;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Ensure images in preview don't exceed container */
#preview-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Loading state for preview */
#preview-image.loading {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Print-friendly styles */
@media print {
    header,
    footer,
    .ad-slot,
    #mobile-menu-button {
        display: none !important;
    }
}

/* Focus styles for accessibility */
input:focus,
select:focus,
button:focus,
a:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Custom checkbox and radio styles (supplementing Tailwind) */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

/* Sticky positioning for sidebar (desktop) */
@media (min-width: 1024px) {
    aside .sticky {
        position: sticky;
        top: 1rem;
    }
}