@charset "UTF-8";

/* Masonry grid via CSS columns */
.masonry-grid {
    column-count: 2;
    column-gap: 1.5rem;
}
.masonry-grid-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}
@media (max-width: 575.98px) {
    .masonry-grid {
        column-count: 1;
    }
}

/* Video background banner */
.video-background-banner .video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}
.video-background-banner:after {
    z-index: 1;
}

/* Normalize input-group — theme sets .form-control height: 40px and
   .btn margin: 10px 0, breaking BS5 input-group alignment */
.input-group .input-group-text,
.input-group .btn,
.input-group .form-control {
    height: 40px;
}
.input-group .btn {
    margin: 0;
}

/* Sticky footer — push footer to bottom on short pages */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page-wrapper > footer {
    margin-top: auto;
}

/* BS5 resets that differ from BS3 defaults expected by the theme */
body {
    font-size: 18px;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
/* BS5 .navbar uses flex + padding that compresses the theme's tall header.
   Reset to let the theme's nav-link padding control the height (as BS3 did). */
.navbar.navbar-default {
    padding: 0;
}
.navbar.navbar-default .container-fluid {
    padding: 0;
}
/* BS3 set nav links to display:block so their padding contributes to height.
   BS5 doesn't (it uses .nav-link class). Restore this for the theme. */
.navbar-default .navbar-nav > li > a {
    display: block;
    line-height: 20px;
}
/* BS5 adds a caret via .dropdown-toggle::after, but the theme already
   adds its own caret via .dropdown > a:before. Hide the BS5 one. */
.navbar-default .navbar-nav .dropdown-toggle::after {
    display: none;
}
/* BS3 had .open > .dropdown-menu { display: block } — BS5 removed it
   (uses .show class instead). The theme relies on the .open class. */
.open > .dropdown-menu {
    display: block;
}

html {
    scroll-behavior: smooth;
}
.navbar .navbar-nav {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
}

.logo img {
    position: absolute;
    z-index: 100;
    max-width: none;
    max-height: 100px;
}

.mono {
    font-family: "Roboto Mono";
    font-weight: 300;
}

.counter.mono {
    font-size: 0.9em;
    display: inline;
    margin-right: -4px;
}

.dark-translucent-bg:after {
    background-color: rgba(0, 0, 0, 0.4);
}

.slideshow .dark-translucent-bg {
    background-color: rgba(0, 0, 0, 0.3);
}

.banner.video-background-banner {
    min-height: 200px;
    padding-top: 50px;
}

ul.pagination .page-link:hover,
ul.pagination .page-link:focus {
    background-color: var(--color-primary-dark);
    color: #ffffff;
    border-color: var(--color-primary-dark);
}

.banner-img {
    width: 100%;
}

.site-slogan {
    font-size: 14px;
    padding: 3px 0 0;
    font-weight: 700;
    text-transform: uppercase;
}

.header.dark .navbar.navbar-default {
    background-color: transparent;
}

.navbar-brand {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#archive-menu .list-group a:not(.small)::after {
    font-family: "Font Awesome 6 Free";
    content: "\f139";
    position: absolute;
    right: 15px;
    font-size: 12px;
    font-weight: 900;
    top: 50%;
    line-height: 1;
    margin-top: -7px;
}
#archive-menu .list-group a:not(.small).collapsed::after {
    content: "\f13a";
}

/* body image styles - classes supplied by rich text editor */
.body-content {
    width: 100%;
    overflow: hidden;
    clear: both;
}
.body-content img {
    margin-bottom: 2%;
    margin-top: 2%;
}
.body-content img.full-width {
    width: 100%;
}
.body-content img.left {
    max-width: 30%;
    margin-right: 5%;
    float: left;
}
.body-content img.right {
    max-width: 30%;
    margin-left: 5%;
    float: right;
}
.body-content h2, .body-content h3, .body-content h4, .body-content h5 {
    clear: both;
}

/* List styling - tweaks to include images */
a.list-group-item {
    clear: both;
    width: 100%;
    overflow: hidden;
}
a.list-group-item .list-group-item-text {
    margin-top: 1%;
}
a.list-group-item .list-group-item-text img {
    float: left;
    margin-right: 2%;
    margin-bottom: 1%;
}

hr {
    border-top: 1px solid #ccc;
}

.promo {
    background-color: #e0e0e0;
    padding-bottom: 50px;
}

.blog-heading {
    font-size: 1.5em;
}

.blog-date {
    padding-right: 5px;
}

.archive-month {
    padding-left: 25px;
}

.featurette-divider {
    margin: 20px 0;
    /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 400;
    line-height: 1;
    letter-spacing: -1px;
}

h2.featurette-heading {
    margin-top: 0px;
}

.lead {
    font-size: 18px;
}

#map-canvas {
    width: 100%;
    height: 500px;
    margin-bottom: -20px;
}

.map-icon-label .map-icon {
    font-size: 45px;
    color: #FFFFFF;
    line-height: 48px;
    text-align: center;
    white-space: nowrap;
    position: relative;
    top: -30px;
}

.blogpost header {
    padding: 20px 10px 10px;
}

h5 {
    font-weight: 500;
    text-transform: none;
}

@media (min-width: 1200px) {
    .main-navigation .navbar-nav > li {
        margin: 0 0 0 0px;
    }
}
/* Hero slider - Swiper replacement for Revolution Slider 5 */
.hero-slider {
    width: 100%;
    overflow: hidden;
}
.hero-slide-inner {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-slide-overlay {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.hero-slide-content {
    max-width: 650px;
    color: #fff;
}
.hero-slide-title {
    color: #fff;
    font-family: "Roboto Slab", serif;
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 10px;
}
.hero-slide-caption {
    color: #fff;
    font-size: 1.1em;
    margin-bottom: 20px;
}
.hero-slide-caption p {
    color: #fff;
}
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
    color: #fff;
}
.hero-slider .swiper-pagination-bullet {
    background: #fff;
}

/* Interest/blog carousel styles */
.interest-carousel,
.blog-carousel {
    width: 100%;
    overflow: hidden;
}
.interest-carousel .swiper-button-prev,
.interest-carousel .swiper-button-next {
    color: #fff;
}

/* Justified Gallery */
.justified-gallery {
    margin-bottom: 20px;
}
.justified-gallery a:hover img {
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

/* Parallax - CSS-only replacement for jquery.parallax plugin */
.parallax,
.parallax-2,
.parallax-3 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Member dashboard nav pills ("GLD lety", "Platby", ...). The old theme styled
   these via a `.nav-pills.nav-stacked.list-style-icons` rule, but the home page
   redesign dropped the `nav-stacked` class, so the links (and their icons) fell
   back to the inherited 18px body size and looked oversized next to the compact
   13px tables/lists they sit under. Size the whole link down; the icons inherit. */
.nav-pills.list-style-icons > li > a {
    font-size: 14px;
}

/* The "Starší zápisy" / "Starší příspěvky" load-more links under those same
   dashboard lists. Only used here, and previously inherited the 18px body size
   which dwarfed the 13-15px list items above them. Match the nav-pill size. */
.link-default {
    font-size: 14px;
}

/* Social/flight feed cards on the home page. Both the Facebook and WeGlide
   embeds share this modern rounded-card frame so they line up visually. */
.feed-card {
    display: inline-block;
    width: 100%;
    max-width: 500px;
    border: 1px solid #ccd0d5;
    border-radius: 12px;
    overflow: hidden;
}

.feed-card iframe {
    display: block;
    border: none;
}

@media print {
    .no-print, .no-print * {
        display: none !important;
    }

    wagtail-userbar {
        display: none !important;
    }
}