@import url("page-details.css");

[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #0070bd; outline-offset: 3px; }
.native-main, .jqimgFill { opacity: 1; }
.jqimgFill { position: relative; overflow: hidden; background-position: center; background-size: cover; }
.jqimgFill > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scrollbarY { overflow-y: auto; }
.staatliches, .audiowide { font-family: "Arial Narrow", Arial, sans-serif; }
.search-wrapper select { max-width: 100%; background: white; color: #264971; padding: .6rem; }
.native-arrows { display: flex; gap: .5rem; }
.native-arrows button, .native-dots button { font: inherit; background: white; color: #264971; }
.native-arrows button { font-size: 1.5rem; }
.native-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; list-style: none; padding: 0; }
.native-dots button { min-width: 1.5rem; min-height: 1.5rem; border: 1px solid #7093a9; border-radius: 50%; }
.native-dots .slick-active button { background: #264971; color: white; }
.native-carousel { position: relative; }
.slider-nav, .category-track { display: flex; overflow: auto; scroll-snap-type: x mandatory; }
.slider-nav > li, .category-track > li { flex: 0 0 25%; min-width: 0; scroll-snap-align: start; }
.thumbnail-button { display: block; width: 100%; border: 0; padding: 0; color: inherit; background: transparent; }
.thumbnail-button img { max-width: 100%; }
.thumbnail-button[aria-current="true"] { outline: 2px solid #0070bd; outline-offset: -2px; }
.play { display: inline-grid; place-items: center; }
.photo-dialog { max-width: min(95vw, 1100px); max-height: 95vh; color: #fff; background: #172434; border: 0; }
.photo-dialog::backdrop { background: rgb(0 0 0 / .8); }
.photo-dialog img { display: block; max-width: 100%; max-height: 72vh; margin: .5rem auto; object-fit: contain; }
.photo-dialog button { margin: .25rem; }
.status-page, .book-page, .contact-page { margin: 0; color: #243950; background: #f7f9fc; font: 1rem/1.6 system-ui, sans-serif; }
.status-page main, .book-page main, .contact-page main { width: min(100% - 2rem, 64rem); margin: 3rem auto; }
.status-page a, .book-page a, .contact-page a { color: #005a99; text-decoration: underline; }
.book-page img { display: block; max-width: 100%; margin: 1rem auto; }
.book-page figure { margin: 0; }
.contact-page form { display: grid; gap: .8rem; max-width: 42rem; }
.contact-page label { display: grid; gap: .25rem; }
.contact-page input, .contact-page textarea, .contact-page button { padding: .6rem; }
.contact-page textarea { min-height: 8rem; }
.contact-page .contact-status { font-weight: bold; }
.contact-entry a { display: inline-block; padding: .65rem 1rem; background: #264971; color: white; border-radius: .25rem; }
@media (max-width: 1399px) { .category-track > li { flex-basis: 33.333%; } }
@media (max-width: 767px) {
    .title-wrapper .link-container.active > ul, header .title.active + ul { display: block; }
    .slider-nav > li, .category-track > li { flex-basis: 50%; }
}
@media (max-width: 575px) { .category-track > li { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
#project .content-wrapper .control:focus-within .slider-nav,
#project .content-wrapper .control:focus-within .arrows {
    opacity: 1;
    pointer-events: auto;
}
#project .slider-nav .thumbnail-button > div {
    width: min(100%, 100px);
    height: 100px;
}
#project .slider-nav .thumbnail-button > div > div {
    background-position: center;
    background-size: cover;
    border: 2px solid white;
}
#anniversary .side-container .native-dots { flex-direction: column; }
#anniversary .side-container .native-dots button[aria-current="true"] {
    color: white;
    background: #112c4a;
}
@media (min-width: 1400px) {
    #anniversary .wrapper .main-container {
        overflow-y: auto !important;
        scroll-snap-type: y proximity;
    }
    #anniversary .pageSlider > li { min-height: 100vh; scroll-snap-align: start; }
}
@media (max-width: 1399px) {
    #anniversary .wrapper { height: auto; }
}
@media (min-width: 1200px) {
    html:has(#index) { scroll-snap-type: y proximity; }
    #index .inner > .section { scroll-snap-align: start; }
}