/*
Theme Name: Ilmapoiss
Theme URI: https://ilmapoiss.ee
Author: Ilmapoiss
Description: Eesti ilmateenistuse ja ilmateaduste teema
Version: 1.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: ilmapoiss
*/

.comic-border {
    border: 3px solid #000;
    box-shadow: 4px 4px 0px 0px #000;
}
.comic-border-sm {
    border: 2px solid #000;
    box-shadow: 2px 2px 0px 0px #000;
}
.halftone-bg {
    background-image: radial-gradient(#cbd5e1 1px, transparent 0);
    background-size: 10px 10px;
}
.ink-shadow {
    text-shadow: 2px 2px 0px #000;
}
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* News Ticker: pause on hover/focus of the track and respect reduced motion */
.news-ticker-track:hover .news-ticker-list,
.news-ticker-track:focus-within .news-ticker-list {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .news-ticker-track .news-ticker-list {
        animation: none !important;
    }
    /* Kill Tailwind animation utilities used across templates (loading spinners, pings, pulses) */
    .animate-pulse,
    .animate-ping,
    .animate-spin,
    .animate-bounce {
        animation: none !important;
    }
    /* Custom theme animation on the daylight page solar arc */
    #solar-icon-group circle {
        animation: none !important;
    }
    html {
        scroll-behavior: auto;
    }
}

/* News Ticker Alignment Fix - Deep Flex Reset */
.news-ticker-list {
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Target EVERY child level to force centered flex */
.news-ticker-list *, 
.news-ticker-list .wp-block-post-template,
.news-ticker-list .wp-block-post,
.news-ticker-list h4,
.news-ticker-list a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    list-style: none !important;
}

/* Ensure the title itself doesn't have internal shifts */
.news-ticker-list .wp-block-post-title {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure grid items and their children align perfectly at the top by removing default margins */
.wp-block-post-template.grid > *,
.wp-block-post-template.grid > li,
.wp-block-post-template.grid .wp-block-post,
.wp-block-post-template.grid .wp-block-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;}

/* Fix WordPress wp-block-group__inner-container breaking CSS grid */
.wp-block-group.grid > .wp-block-group__inner-container {
    display: contents !important;
}

/* Prose max-width override - fill the full column width */
.prose.max-w-none {
    max-width: none !important;
}
article .prose {
    max-width: none !important;
}

/* Smooth scrolling across the site */
html {
    scroll-behavior: smooth;
}

/* Sticky sidebar on desktop - sticks when scrolling, stays within flex layout */
@media (min-width: 1024px) {
    body.single aside,
    body.page aside {
        display: block !important;
        width: 400px !important;
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 24px !important;
        align-self: flex-start !important;
    }
    body.single .flex.flex-col.mb-8,
    body.page .flex.flex-col.mb-8 {
        flex-direction: row !important;
    }
    body.single article.w-full,
    body.page article.w-full {
        width: 1px !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
}

/* Content Headings Visibility Fix */
.prose h2 {
    display: block !important;
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
    font-weight: 900 !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.25rem !important;
    color: inherit !important;
}
.prose h3 {
    display: block !important;
    font-size: 1.5rem !important;
    line-height: 2rem !important;
    font-weight: 900 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    color: inherit !important;
}

/* Solar Arc Animations */
#solar-arc-progress {
    transition: stroke-dasharray 1.5s ease-in-out;
}
#solar-icon-group {
    transition: transform 1.5s ease-in-out;
}
@keyframes sun-glow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.5)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.9)); transform: scale(1.1); }
}
#solar-icon-group circle {
    animation: sun-glow 4s infinite ease-in-out;
}

/* Skip-to-content link: visually hidden until focused (keyboard users) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: #137FEC;
    color: #fff;
    font-weight: 900;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.25rem;
    box-shadow: 2px 2px 0 0 #000;
    border: 2px solid #000;
}
.skip-link:focus {
    left: 0;
    top: 0;
}

/* Consistent, high-contrast keyboard focus ring (WCAG 2.4.7) */
:focus-visible {
    outline: 3px solid #137FEC;
    outline-offset: 2px;
}

/* Filter Pills (shared across list pages - compiled from Tailwind) */
.filter-pill {
    background-color: rgb(241 245 249);
    color: rgb(71 85 105);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-width: 2px;
    border-color: rgb(15 23 42);
    transition: all;
}
.filter-pill:hover {
    background-color: rgb(226 232 240);
}
:root.dark .filter-pill {
    background-color: rgb(30 41 59);
    color: rgb(203 213 225);
    border-color: rgb(255 255 255);
}
:root.dark .filter-pill:hover {
    background-color: rgb(51 65 85);
}
.filter-pill.active {
    background-color: rgb(250 204 21);
    color: rgb(0 0 0);
    border-color: rgb(0 0 0);
    transform: scale(1.1);
    box-shadow: 4px 4px 0px 0px rgb(0 0 0);
}
:root.dark .filter-pill.active {
    box-shadow: 4px 4px 0px 0px rgb(255 255 255);
}