/*
 * Ekskurzii theme - CMS glue.
 *
 * Loaded after the template's own style.css. It does three things and nothing
 * else:
 *
 *   1. binds the template palette to the site colour the CMS delivers,
 *   2. undoes the parts of the template reset that break CMS-authored HTML,
 *   3. styles the markup this theme adds on top of the template (top bar,
 *      weather badge, cards fed from ViewData, sidebars, footer columns).
 *
 * The template's own classes are never redefined here beyond what is needed
 * to make CMS content fit inside them.
 */

/* ---------------------------------------------------------------
   1. Palette
   ---------------------------------------------------------------
   style.css carries the template accent as var(--ekz-accent) - the literal
   colour it shipped with was replaced by that variable so a site can drive it
   from its own configuration. --ms-color-primary comes from theme_vars, which
   the CMS builds from TMPL_CSS_NAME_COLOR; the literal below is the value the
   template was designed around and answers when a site sets no colour.
--------------------------------------------------------------- */
:root {
    --ekz-accent: var(--ms-color-primary, #c4eeec);
    --ekz-dark: #1e2227;
    --ekz-muted: #9b9b9b;
    --ekz-border: rgba(30, 34, 39, .12);
}

body.ekskurzii-theme {
    --bs-primary: var(--ekz-accent);
}

/* ---------------------------------------------------------------
   2. Page shell
   ---------------------------------------------------------------
   The template hides .page and fades it in from its preloader script. This
   theme renders no preloader - a CMS page carries legacy inline scripts that
   can throw, and a page that stays at opacity 0 when they do is not an
   acceptable failure mode - so the page is visible from the start.
--------------------------------------------------------------- */
.page {
    opacity: 1;
}

.ekz-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.brand .brand-name {
    font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: inherit;
}

/* ---------------------------------------------------------------
   3. Top bar
   ---------------------------------------------------------------
   Sits above .rd-navbar-wrap rather than inside it: RD Navbar rearranges its
   own children between the static and the fixed layout, and anything placed
   inside has to be taught both.
--------------------------------------------------------------- */
.ekz-topbar {
    background: var(--ekz-dark);
    color: #ffffff;
    font-size: 13px;
    line-height: 1.4;
}

.ekz-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
    min-height: 46px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.ekz-topbar__start,
.ekz-topbar__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}

.ekz-topbar__social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.ekz-topbar__social li {
    display: inline-block;
}

.ekz-topbar a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    transition: color .2s ease-in-out;
}

.ekz-topbar a:hover,
.ekz-topbar a:focus {
    color: var(--ekz-accent);
}

.ekz-topbar__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.ekz-topbar__contact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .ekz-topbar__contact span:last-child {
        display: none;
    }

    .ekz-topbar__links {
        display: none;
    }
}

/*
 * Making room for the strip.
 *
 * .page-header is absolutely positioned in this template - the navbar is meant
 * to float over the home slider - so nothing inside it can push the page down.
 * The space it needs is reserved on .page instead, and the two layouts RD
 * Navbar switches between need different amounts:
 *
 *   static (large screens)  the navbar sits in the header, under the strip,
 *                           and still overlaps the first section on purpose;
 *                           only the strip's own height has to be added.
 *   fixed  (small screens)  the navbar panel is pinned to the viewport, 56px
 *                           tall, and the template already reserves those 56px
 *                           with `html.rd-navbar-fixed-linked .page`. The strip
 *                           moves below the panel and its height is added to
 *                           that reservation.
 *
 * Keyed to the navbar's own classes rather than to a breakpoint, so the two
 * cannot disagree about when the layout switches.
 */
:root {
    --ekz-topbar-height: 46px;
    --ekz-navbar-panel-height: 56px;
}

html.rd-navbar-static-linked .ekskurzii-theme .page {
    padding-top: var(--ekz-topbar-height);
}

html.rd-navbar-fixed-linked .ekz-topbar {
    margin-top: var(--ekz-navbar-panel-height);
}

html.rd-navbar-fixed-linked .ekskurzii-theme .page {
    padding-top: calc(var(--ekz-navbar-panel-height) + var(--ekz-topbar-height));
}

/* The shared user-actions partial ships its own inline stylesheet, including a
   white background of its own. Only its colours need to follow the strip it
   sits in; everything else about it is left alone. */
.ekz-topbar .ms-user-actions {
    background: transparent;
}

.ekz-topbar .ms-user-actions,
.ekz-topbar .ms-user-actions a,
.ekz-topbar .ms-user-action {
    color: rgba(255, 255, 255, .75);
}

.ekz-topbar .ms-user-action {
    width: auto;
    height: auto;
}

.ekz-topbar .ms-user-actions a:hover {
    color: var(--ekz-accent);
}

/* ---------------------------------------------------------------
   4. Breadcrumbs bar
   ---------------------------------------------------------------
   The image behind it is site.media.banners[0] when the site has one, and the
   template's own picture otherwise. Both arrive as --ekz-breadcrumbs-bg-image,
   set in the document head.
--------------------------------------------------------------- */
.ekz-breadcrumbs {
    background-image: var(--ekz-breadcrumbs-bg-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.ekz-breadcrumbs .breadcrumbs-custom-path a {
    color: inherit;
}

.ekz-hero-section {
    margin-top: 14px;
}

/* ---------------------------------------------------------------
   4a. Home hero caption
   ---------------------------------------------------------------
   The template was drawn around three-word English headlines and scales the
   caption to 114px, with the script watermark starting at the very top of the
   box. A CMS banner title is a sentence in Bulgarian, so at those sizes it ran
   past the bottom of the viewport and collided with the watermark.

   The type scale below is the same idea one step down, and the watermark is
   lifted clear of the first line instead of sitting behind it.
--------------------------------------------------------------- */
/*
 * .intro-box stops forming the containing block for its absolute children, so
 * the watermark and the call to action are placed against the slide itself -
 * one has to span it top to bottom, the other to sit on its lower edge, and
 * neither can do that from inside a box only as tall as the headline.
 */
.ekskurzii-theme .swiper-slider-1 .intro-box {
    position: static;
}

/*
 * The script watermark carries the site title, which wraps to a few lines. The
 * line height is what spreads those lines over the height of the picture; the
 * DeadStock face reports an enormous ascent of its own, so the number below is
 * smaller than the spacing it produces.
 */
.ekskurzii-theme .intro-box__floating-text {
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 760px;
    padding: 0 20px;
    transform: translate(-50%, -50%);
    font-size: 40px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .14);
}

/*
 * It arrives after the headline has settled, then keeps growing past the edges
 * of the slide - .swiper-container clips it, so the overflow never reaches the
 * page. `both` holds the invisible first frame through the delay and the last
 * frame afterwards, and the animation is bound to the active slide so it
 * replays each time one comes round.
 */
@keyframes ekz-hero-watermark {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }

    22% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(2);
    }
}

.ekskurzii-theme .swiper-slide-active .intro-box__floating-text {
    animation: ekz-hero-watermark 5s ease-out 1.6s both;
}

@media (prefers-reduced-motion: reduce) {
    .ekskurzii-theme .swiper-slide-active .intro-box__floating-text {
        animation: none;
    }
}

.ekskurzii-theme .intro-box__title {
    align-items: center;
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
    padding-top: 22px;
    font-size: 26px;
    line-height: 1.08;
    text-align: center;
}

.ekskurzii-theme .intro-box__title span + span {
    padding-left: 0;
}

@media (min-width: 768px) {
    .ekskurzii-theme .intro-box__floating-text {
        font-size: 62px;
        line-height: 1.9;
    }

    .ekskurzii-theme .intro-box__title {
        padding-top: 32px;
        font-size: 38px;
    }
}

@media (min-width: 1200px) {
    .ekskurzii-theme .intro-box__floating-text {
        font-size: 84px;
        line-height: 2.2;
    }

    .ekskurzii-theme .intro-box__title {
        padding-top: 40px;
        font-size: 52px;
    }
}

/*
 * The slide's call to action, carrying the site's MoreText label. It sits on
 * the lower edge of the picture rather than under the headline, clear of the
 * pagination bullets at bottom: 20px.
 */
.ekskurzii-theme .ekz-hero-cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 62px;
    z-index: 2;
    margin-top: 0;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
}

@media (max-width: 767px) {
    .ekskurzii-theme .ekz-hero-cta {
        bottom: 44px;
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------
   5. Weather badge
   ---------------------------------------------------------------
   Printed over a card image whenever the item carries extensions.wwo. It is
   the only overlay on that image, so it claims the top right corner outright.
--------------------------------------------------------------- */
.ekz-weather {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(30, 34, 39, .72);
    color: #ffffff;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.ekz-weather__icon {
    font-size: 17px;
    color: var(--ekz-accent);
}

.ekz-weather__temp {
    font-size: 14px;
}

.ekz-weather__water {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding-left: 7px;
    border-left: 1px solid rgba(255, 255, 255, .3);
    font-size: 12px;
    opacity: .9;
}

/* ---------------------------------------------------------------
   6. Cards
   ---------------------------------------------------------------
   CMS images come in whatever proportion the editor uploaded, while the
   template's cards were cut from one fixed size. A ratio box keeps a row of
   cards aligned without cropping being anyone's job at upload time.
--------------------------------------------------------------- */
.ekz-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.ekz-card__media {
    position: relative;
    overflow: hidden;
}

.ekz-card__media-link {
    display: block;
}

/*
 * The card image fills its cell.
 *
 * The CMS writes each image's own max_width into the markup as an inline
 * max-width, which is right wherever the image sits in a column of text. A card
 * is not that: it is a fixed cell in a listing grid, and the picture in it is a
 * cropped thumbnail, so it fills the cell as it did before that cap existed.
 * Only an !important outranks an inline style.
 *
 * The mosaic on the home page takes the other route and sizes the tile itself
 * from max_width - see .ekz-mosaic. Doing the same for listing cards would mean
 * cells of mixed widths in a listing, which is a bigger change than this.
 */
.ekz-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none !important;
    object-fit: cover;
    aspect-ratio: 370 / 284;
}

.ekz-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 370 / 284;
    background: var(--ekz-accent);
    color: var(--ekz-dark);
    font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 64px;
    line-height: 1;
    text-transform: uppercase;
}

.ekz-card__caption {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

/*
 * The excerpt, held to three lines.
 *
 * item.content.excerpt is up to 220 characters, and a card that prints all of
 * them is three times the height of the one beside it. The row equalises
 * anyway, so the tallest excerpt would set the height of every card in it.
 */
.ekz-card__caption p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * The tag row.
 *
 * The template draws .icon-list as a horizontal flex row - it was written for
 * three words: Meal, 5 Days, Flight. These labels are pages.tags, which are
 * phrases, so the row overflowed the card sideways. Stacked instead, which is
 * the same shape the template itself uses at its small breakpoint.
 */
.ekz-card__caption .icon-list {
    display: block;
    margin-top: auto;
    min-width: 0;
}

.ekz-card__caption .icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.ekz-card__caption .icon-list li + li {
    margin-top: 6px;
    margin-left: 0;
}

.ekz-card__caption .icon-list li span + span {
    margin-left: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ekz-card__caption .icon-list .icon {
    flex: 0 0 auto;
    line-height: 1.5;
    color: var(--ekz-accent);
}

.ekz-card__cta {
    align-self: flex-start;
    margin-top: 14px;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ekz-accent);
}

.ekz-featured__lead {
    max-width: 46em;
}

.ekz-featured__cta {
    margin-top: 40px;
}

/* ---------------------------------------------------------------
   5a. Home intro image box
   ---------------------------------------------------------------
   The template stacks two photos of its own here and slides them apart on
   hover. The front one is now the page's own picture, masked so it dissolves
   towards the left and lets what is behind it show through; behind it sit the
   page's children as small tiles, each an .info-box-classic - so they carry
   the template's own hover caption without a rule of their own.

   The inverse modifier and the movement on hover are the template's; only the
   grid of tiles and the mask are added here.
--------------------------------------------------------------- */
.ekz-intro-box {
    position: relative;
}

/*
 * The front picture takes the width of the composition rather than its own
 * intrinsic one: the page image behind it is a banner as far as the CMS is
 * concerned (image_allign = 21, so max_width is the full 1920), and a banner
 * rendered at 380px here is a downscale whatever file is behind it.
 */
.ekz-intro-box__main {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: 380px;
}

.ekz-intro-box__main img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none !important;
}

@supports ((-webkit-mask-image: url("../images/mask-fade-left.png")) or (mask-image: url("../images/mask-fade-left.png"))) {
    @media (min-width: 1200px) {
        .ekz-intro-box__main img {
            -webkit-mask-image: url("../images/mask-fade-left.png");
                    mask-image: url("../images/mask-fade-left.png");
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center right;
                    mask-position: center right;
            -webkit-mask-size: 100% 100%;
                    mask-size: 100% 100%;
            box-shadow: none;
        }
    }
}

/* The tiles behind it. Two across, small on purpose - they are a backdrop. */
.ekz-intro-box__tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 320px;
}

.ekz-intro-tile {
    position: relative;
    display: block;
    overflow: hidden;
    max-width: none;
    margin: 0;
}

.ekz-intro-tile img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    box-shadow: none;
}

/*
 * Under xl the template drops the float out of its absolute placement, so the
 * two blocks sit side by side in the flex row and the mask is off; the tiles
 * take the width they are given.
 */
@media (max-width: 1199px) {
    .ekz-intro-box__tiles {
        max-width: 100%;
    }

    .ekz-intro-box__main {
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------
   6a. The band behind a featured section
   ---------------------------------------------------------------
   The picture is the featured page's own main image, set inline by the block.
   All the theme adds is the mask: the template's own feathered edge, lifted
   out of bg-home-3.png as an alpha-only PNG, so the image reaches the right
   edge at full strength and dissolves into the page towards the left, leaving
   the heading and the lead on clean ground.

   The whole band is behind an @supports gate. Without mask support the image
   would cover the text at full opacity, which is worse than no image at all -
   so in that case the section simply stays plain.
--------------------------------------------------------------- */
.ekz-featured {
    position: relative;
    background-color: var(--ms-color-bg, #ffffff);
}

.ekz-featured > .container {
    position: relative;
    z-index: 1;
}

.ekz-featured__bg {
    display: none;
}

/*
 * The min-width is the template's own: every .bg-image-* rule in style.css
 * lives inside `@media (min-width: 1200px)`, because below that the section is
 * too narrow for a picture and a heading to share, and the heading wins. The
 * band follows the same rule rather than inventing a second breakpoint.
 */
@supports ((-webkit-mask-image: url("../images/mask-fade-left.png")) or (mask-image: url("../images/mask-fade-left.png"))) {
    @media (min-width: 1200px) {
        .ekz-featured__bg {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 0;
            background-position: center right;
            background-size: cover;
            background-repeat: no-repeat;

            -webkit-mask-image: url("../images/mask-fade-left.png");
                    mask-image: url("../images/mask-fade-left.png");
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center right;
                    mask-position: center right;
            -webkit-mask-size: 100% 100%;
                    mask-size: 100% 100%;
        }
    }
}

/*
 * No image on the page: the same mask over a wash of the site colour, so the
 * band keeps its shape and its place in the sequence instead of disappearing.
 */
.ekz-featured__bg--tint {
    background-image: linear-gradient(to left, var(--ekz-accent), rgba(255, 255, 255, 0));
}

/* ---------------------------------------------------------------
   6b. Mosaic of a group's pages
   ---------------------------------------------------------------
   The tile classes come from media.main_image.max_width, which the CMS
   resolves from the width the editor gave the image and from where it sits on
   the page. The grid is six columns wide at xl so those widths have somewhere
   to land: a banner takes three of them, an ordinary content image two, and a
   thumbnail one. Nothing is ever stretched past the width it was given.

   Row spans are twice the column span, which keeps every tile at roughly the
   same proportion whatever its size. grid-auto-flow: dense closes the gaps the
   mixed spans leave behind.
--------------------------------------------------------------- */
.ekz-mosaic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 66px;
    grid-auto-flow: dense;
    gap: 6px;
    margin-top: 34px;
}

@media (min-width: 768px) {
    .ekz-mosaic {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 68px;
    }
}

@media (min-width: 1200px) {
    .ekz-mosaic {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 72px;
    }
}

/* Content image - the middle size, and the default. */
.ekz-mosaic__item {
    grid-column: span 2;
    grid-row: span 4;
    min-width: 0;
}

/* Banner, or anything the CMS allows 800px and up. */
.ekz-mosaic__item--wide {
    grid-column: span 2;
    grid-row: span 4;
}

@media (min-width: 768px) {
    .ekz-mosaic__item--wide {
        grid-column: span 3;
        grid-row: span 6;
    }
}

/* Thumbnail - the editor asked for under 350px, so it gets one column. */
.ekz-mosaic__item--small {
    grid-column: span 1;
    grid-row: span 2;
}

/* No image: one column, one row - only as much as the label needs. */
.ekz-mosaic__item--text {
    grid-column: span 1;
    grid-row: span 2;
}

.ekz-mosaic__tile {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* The template caps its tiles at a fixed width; here the grid cell decides. */
.ekz-mosaic .info-box-classic {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/*
 * The one !important in this file, and it needs to be one.
 *
 * The CMS writes the image's own cap into the markup as an inline max-width,
 * which is right for every consumer that just prints that markup into a column.
 * Here the cap has already been honoured - it is what chose the tile - so
 * inside the tile the image fills, and only an !important outranks an inline
 * style.
 */
.ekz-mosaic__tile img {
    width: 100%;
    height: 100%;
    max-width: none !important;
    object-fit: cover;
}

/*
 * The text tile. Same job as an image tile - name the page and lead to it -
 * with the site colour standing in for the picture.
 */
.ekz-mosaic__text {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
    background: var(--ekz-accent);
    color: var(--ekz-dark);
    text-align: left;
}

.ekz-mosaic__text:hover,
.ekz-mosaic__text:focus {
    color: var(--ekz-dark);
    filter: brightness(.95);
}

.ekz-mosaic__text-label {
    font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ekz-mosaic__text-price {
    font-size: 13px;
    font-weight: 600;
}

/* ---------------------------------------------------------------
   6c. Cards on a slider
   ---------------------------------------------------------------
   Driven by the template's own swiper initialisation - see
   components/cards-slider.php. The arrows are the template's
   .swiper-button-prev/next, which it draws as round icon buttons; here they sit
   outside the row of cards rather than over the first and last one.

   .swiper-container is display:flex in the template's stylesheet, meant for a
   full-bleed slider; a row of cards inside a container has to be a block, or
   the wrapper is stretched into one line.
--------------------------------------------------------------- */
.ekz-cards-slider {
    position: relative;
}

.ekz-cards-swiper {
    display: block;
    padding-bottom: 6px;
}

/*
 * white-space is the important one here.
 *
 * The template sets `white-space: nowrap` on every .swiper-slide - it needs it
 * for the caption trick on its full-bleed slider, and resets it further in on
 * .swiper-slide-caption. A card is not that markup, so the excerpt inherited
 * nowrap, was laid out as one endless line and ran straight across the
 * neighbouring cards.
 */
.ekz-cards-swiper .swiper-slide {
    height: auto;
    display: flex;
    white-space: normal;
}

.ekz-cards-swiper .swiper-slide > .ekz-card {
    width: 100%;
}

.ekz-cards-swiper .swiper-button-prev,
.ekz-cards-swiper .swiper-button-next {
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
    color: var(--ekz-dark);
    font-size: 15px;
}

.ekz-cards-swiper .swiper-button-prev {
    left: -22px;
}

.ekz-cards-swiper .swiper-button-next {
    right: -22px;
}

.ekz-cards-swiper .swiper-button-prev:hover,
.ekz-cards-swiper .swiper-button-next:hover {
    background: var(--ekz-accent);
}

/* watchOverflow adds this when every card already fits. */
.ekz-cards-swiper .swiper-button-disabled,
.ekz-cards-swiper .swiper-button-lock {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 1300px) {
    .ekz-cards-swiper .swiper-button-prev {
        left: 4px;
    }

    .ekz-cards-swiper .swiper-button-next {
        right: 4px;
    }
}

.ekz-subpages-section .ekz-cards-slider h2 {
    margin-bottom: 34px;
}

/* ---------------------------------------------------------------
   7. CMS-authored content
   ---------------------------------------------------------------
   The template resets lists to display:block with no markers, which is right
   for its own navigation and wrong for a page body written in the CMS editor.
   Inside .ekz-rte the browser defaults come back, along with the table, image
   and iframe handling an editor's HTML needs.
--------------------------------------------------------------- */
.ekz-rte ul,
.ekz-rte ol {
    margin: 0 0 20px 0;
    padding-left: 22px;
    list-style: revert;
}

.ekz-rte ul li,
.ekz-rte ol li {
    display: list-item;
    margin-bottom: 6px;
}

.ekz-rte ul {
    list-style-type: disc;
}

.ekz-rte ol {
    list-style-type: decimal;
}

.ekz-rte p {
    margin-bottom: 18px;
}

.ekz-rte img {
    max-width: 100%;
    height: auto;
}

.ekz-rte table {
    width: 100%;
    margin-bottom: 22px;
    border-collapse: collapse;
}

.ekz-rte table td,
.ekz-rte table th {
    padding: 9px 12px;
    border: 1px solid var(--ekz-border);
    vertical-align: top;
}

.ekz-rte iframe,
.ekz-rte video {
    max-width: 100%;
}

.ekz-rte a {
    text-decoration: underline;
}

.ekz-rte blockquote {
    margin: 0 0 22px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--ekz-accent);
}

.ekz-page-section {
    overflow-x: auto;
}

/* The main image of a page, placed from page.layout.content.main. */
.ekz-main-image {
    margin-bottom: 22px;
}

.ekz-main-image img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .ekz-main-image--left {
        float: left;
        margin-right: 28px;
    }

    .ekz-main-image--right {
        float: right;
        margin-left: 28px;
    }
}

/* ---------------------------------------------------------------
   8. Sidebars
--------------------------------------------------------------- */
.ekz-sidebar-box {
    padding: 24px;
    background: #f6f8f9;
}

.ekz-sidebar-nav,
.ekz-sidebar-subnav {
    margin: 0;
    padding: 0;
}

.ekz-sidebar-nav > li {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid var(--ekz-border);
}

.ekz-sidebar-nav > li:last-child {
    border-bottom: 0;
}

.ekz-sidebar-nav a {
    color: var(--ekz-dark);
}

.ekz-sidebar-nav a:hover {
    color: var(--ekz-accent);
}

.ekz-sidebar-subnav {
    padding-left: 14px;
}

.ekz-sidebar-subnav li {
    display: block;
    padding: 5px 0;
    font-size: 14px;
}

/* ---------------------------------------------------------------
   8a. Weather strip
   ---------------------------------------------------------------
   The horizontal counterpart of /wwo/wwo.php, which stacks the same readings
   in a table. Current conditions on the left, forecast days running right,
   wrapping to a second line on a phone rather than scrolling sideways.
--------------------------------------------------------------- */
.ekz-wwo {
    margin: 30px 0;
    padding: 16px 20px;
    border: 1px solid var(--ekz-border);
    border-left: 3px solid var(--ekz-accent);
    background: #f6f8f9;
}

.ekz-wwo__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 26px;
}

.ekz-wwo__now {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ekz-wwo__icon {
    font-size: 40px;
    line-height: 1;
    color: var(--ekz-accent);
}

.ekz-wwo__reading {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.ekz-wwo__city {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ekz-muted);
}

.ekz-wwo__temp {
    font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--ekz-dark);
}

.ekz-wwo__condition {
    font-size: 13px;
    color: var(--ekz-dark);
}

.ekz-wwo__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    font-size: 13px;
    color: var(--ekz-dark);
}

.ekz-wwo__fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.ekz-wwo__fact .mdi {
    font-size: 17px;
    color: var(--ekz-muted);
}

.ekz-wwo__forecast {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    margin-left: auto;
}

.ekz-wwo__day {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
    color: var(--ekz-dark);
}

.ekz-wwo__day-date {
    color: var(--ekz-muted);
}

.ekz-wwo__day-icon {
    font-size: 18px;
    color: var(--ekz-accent);
}

.ekz-wwo__day-sep {
    color: var(--ekz-muted);
}

.ekz-wwo__day-max {
    font-weight: 600;
}

@media (max-width: 767px) {
    .ekz-wwo__forecast {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------
   8b. Newsletter signup - the theme's default call to action
--------------------------------------------------------------- */
.ekz-footer-cta {
    margin-bottom: 40px;
}

.ekz-footer-media__image {
    max-width: 100%;
    height: auto;
}

.ekz-newsletter__lead {
    margin-bottom: 26px;
    max-width: 44em;
    color: var(--ekz-accent);
    font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ekz-newsletter__lead p {
    margin-bottom: 10px;
}

.ekz-newsletter__lead p:last-child {
    margin-bottom: 0;
}

/*
 * The rows of the form.
 *
 * The template's rd-form-inline would put every child in one flex row, which
 * is why the code image ended up next to the e-mail field with the submit
 * arrow over it. Here each row is its own line, and the arrow stays where the
 * template puts it - absolutely positioned inside .form-wrap.
 */
.ekz-newsletter__form {
    display: block;
    max-width: 520px;
}

.ekz-newsletter__field {
    position: relative;
}

.ekz-newsletter__captcha {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}

.ekz-newsletter__captcha-image {
    flex: 0 0 auto;
    height: 46px;
    width: auto;
    border-radius: 3px;
}

.ekz-newsletter__captcha-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.ekz-newsletter__done {
    margin-bottom: 18px;
    color: var(--ekz-accent);
}

/* The honeypot. Hidden from people, left in the DOM for bots to fill. */
.ekz-newsletter__verify {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------
   9. Footer
--------------------------------------------------------------- */
.ekz-footer-col__title {
    margin-bottom: 18px;
    color: #ffffff;
}

/*
 * The links column heading carries the feed and social icons opposite its
 * label, the arrangement flatdesign uses - so the column stands on its own
 * even on a site that has set no footer menu.
 */
.ekz-footer-col__title--links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ekz-footer-social {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
}

.ekz-footer-social a {
    color: var(--ekz-accent);
    line-height: 1;
}

.ekz-footer-social a:hover,
.ekz-footer-social a:focus {
    color: #ffffff;
}

.ekz-footer-col__title a {
    color: inherit;
}

.ekz-footer-links {
    margin: 0;
    padding: 0;
}

.ekz-footer-links li {
    display: block;
    margin-bottom: 9px;
}

.ekz-footer-links .icon {
    width: 18px;
    margin-right: 6px;
    color: var(--ekz-accent);
}

.ekz-footer-blocks {
    margin-top: 34px;
}

/* ---------------------------------------------------------------
   10. Search
   ---------------------------------------------------------------
   The CMS suggestion script writes into commands.search.results.id, which
   sits inside the navbar form. It stays out of the way until it has content.
--------------------------------------------------------------- */
.rd-navbar-search .search-results:empty {
    display: none;
}

.rd-navbar-search .search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px 0;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
    text-align: left;
}

.rd-navbar-search .search-results a {
    display: block;
    padding: 8px 18px;
    color: var(--ekz-dark);
}

.rd-navbar-search .search-results a:hover {
    background: rgba(0, 0, 0, .04);
}

/* ---------------------------------------------------------------
   11. Fallback CMS blocks
   ---------------------------------------------------------------
   Blocks rendered by the shared themes/ms library - search results, page
   media, sponsored - use their own class names. These rules only keep their
   images inside the column.
--------------------------------------------------------------- */
.subpage-image-wrap img,
.ms-page-media img,
.search-results-list img {
    max-width: 100%;
    height: auto;
}