/*
 * Theme Name:  Brightsun
 * Theme URI:   https://github.com/chrismccoy/brightsun
 * Author:      Chris McCoy
 * Author URI:  https://github.com/chrismccoy
 * Description: A theme Built with Tailwind CSS. Supports Gallery and Video post formats with custom lightbox and video chrome.
 * Version:     1.0.0
 * Text Domain: brightsun
 */

::selection {
    background-color: #000000;
    color: #FFDE59;
}

::-webkit-scrollbar             { width: 16px; }
::-webkit-scrollbar-track       { background: #fff; border-left: 2px solid #000; }
::-webkit-scrollbar-thumb       { background: #000; border: 2px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: #FFDE59; }

.btn-physics {
    transition: all 150ms ease-out;
}
.btn-physics:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 0 #000;
}
.btn-physics:active {
    transform: translate(0, 0);
    box-shadow: none;
}

.brightsun-gallery-masonry {
    columns: 1;
    column-gap: 1rem;
}
@media (min-width: 640px)  { .brightsun-gallery-masonry { columns: 2; } }
@media (min-width: 1024px) { .brightsun-gallery-masonry { columns: 3; } }

.brightsun-gallery-masonry .gallery-item {
    break-inside: avoid;
    margin-bottom: 1rem;
}

.brightsun-lightbox {
    display: none;
}
.brightsun-lightbox.is-active {
    display: flex;
}

.brightsun-video-embed {
    position: relative;
    padding-top: 56.25%;
    background: #000;
}
.brightsun-video-embed iframe,
.brightsun-video-embed video,
.brightsun-video-embed object,
.brightsun-video-embed embed {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

.brightsun-video-embed .wp-block-embed__wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.entry-content h2 { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 1.875rem; text-transform: uppercase; letter-spacing: -0.025em; border-bottom: 4px solid #000; padding-bottom: 0.5rem; margin-top: 2rem; margin-bottom: 1rem; }
.entry-content h3 { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 1.5rem; text-transform: uppercase; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.entry-content p  { margin-bottom: 1rem; }
.entry-content ul, .entry-content ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.entry-content li { margin-bottom: 0.5rem; }
.entry-content blockquote { border-left: 4px solid #5CE1E6; padding-left: 1rem; font-weight: 700; font-size: 1.125rem; margin: 1.5rem 0; }
.entry-content a  { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: #5CE1E6; }
.entry-content a:hover { background: #FFDE59; }
.entry-content img { max-width: 100%; height: auto; border: 4px solid #000; }
.entry-content .wp-caption { border: 4px solid #000; padding: 4px; background: #fff; }
.entry-content .wp-caption-text { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; text-align: center; padding: 4px; border-top: 2px solid #000; }
.entry-content .alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.entry-content .alignright { float: right; margin: 0 0 1rem 1.5rem; }
.entry-content .aligncenter { display: block; margin: 1rem auto; }
.entry-content pre  { background: #000; color: #FFDE59; font-family: 'IBM Plex Mono', monospace; padding: 1.5rem; border: 4px solid #000; overflow-x: auto; margin-bottom: 1rem; }
.entry-content code { background: #000; color: #5CE1E6; font-family: 'IBM Plex Mono', monospace; padding: 0.125rem 0.375rem; font-size: 0.875em; }
.entry-content pre code { background: transparent; color: inherit; padding: 0; }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; border: 4px solid #000; }
.entry-content th, .entry-content td { border: 2px solid #000; padding: 0.5rem 0.75rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.875rem; }
.entry-content th { background: #000; color: #fff; font-weight: 700; text-transform: uppercase; }

.comment-reply-link {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
}

.sticky .entry-title::before {
    content: '📌 ';
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 2px solid #000; background: #fff; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 1.125rem; box-shadow: 2px 2px 0 0 #000; text-decoration: none; transition: transform 150ms; }
.page-numbers:hover { background: #FFDE59; transform: translateY(-4px); box-shadow: 4px 4px 0 0 #000; }
.page-numbers.current { background: #000; color: #fff; }
.page-numbers.dots { border: none; box-shadow: none; background: transparent; }