/* Team Skitty: the look of the old WordPress (Pagelayer) site on Bootstrap 5. Pink on black and white, Poppins for
   text and Montserrat for titles. */
:root {
    --skitty-pink: #ea3a60;
    --skitty-pink-dark: #c92748;
    --skitty-black: #000;
    --skitty-dark: #212121;
    --skitty-text: #1d1d1d;
    --skitty-muted: #5f5f5f;
    --skitty-header-height: 92px;
    --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: var(--skitty-text);
    --bs-body-bg: #fff;
    --bs-link-color: var(--skitty-pink);
    --bs-link-color-rgb: 234, 58, 96;
    --bs-link-hover-color: var(--skitty-black);
    --bs-link-hover-color-rgb: 0, 0, 0;
}

body {
    font-size: 16px;
    line-height: 1.6;
    background: #fff;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Montserrat', sans-serif;
}

a {
    text-decoration: none;
}

.skitty-skip {
    position: absolute;
    z-index: 2000;
    top: 8px;
    left: 8px;
    padding: 8px 16px;
    background: var(--skitty-pink);
    color: #fff;
}

/* Buttons: pink, black on hover */
.btn-skitty {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--skitty-pink);
    --bs-btn-border-color: var(--skitty-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--skitty-black);
    --bs-btn-hover-border-color: var(--skitty-black);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--skitty-black);
    --bs-btn-active-border-color: var(--skitty-black);
    --bs-btn-focus-shadow-rgb: 234, 58, 96;
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-padding-y: .65rem;
    --bs-btn-border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 500;
}

/* HEADER: over the first band's picture, black once scrolled or with the phone menu open */
.skitty-header {
    transition: background-color .3s, box-shadow .3s;
}

.skitty-header.is-scrolled,
.skitty-header.is-open {
    background: rgba(0, 0, 0, .92);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

.skitty-header .navbar {
    padding: 12px 0;
}

.skitty-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.skitty-brand:hover {
    color: #fff;
}

.skitty-brand img {
    height: 53px;
    width: auto;
}

.skitty-brand-name {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
}

.skitty-brand-tagline {
    display: block;
    font-size: .8rem;
    opacity: .85;
}

.skitty-toggler {
    border: 0;
    border-radius: 0;
    padding: 6px 12px;
    background: var(--skitty-pink);
    color: #fff;
    font-size: 1.25rem;
}

.skitty-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(234, 58, 96, .4);
}

.skitty-nav .nav-link {
    padding: 10px !important;
    color: #fff;
    text-transform: uppercase;
    font-size: .95rem;
}

.skitty-nav .nav-link:hover,
.skitty-nav .nav-link:focus,
.skitty-nav .nav-link.active {
    color: var(--skitty-pink);
}

/* The language switch, after the menu: EN | RO, the page's language marked */
.skitty-lang {
    flex-direction: row;
    align-items: center;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, .35);
}

.skitty-lang .nav-item + .nav-item::before {
    content: '|';
    color: rgba(255, 255, 255, .45);
}

.skitty-lang .nav-item {
    display: flex;
    align-items: center;
}

.skitty-lang .nav-link {
    padding: 10px 8px !important;
    color: rgba(255, 255, 255, .75);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .05em;
}

.skitty-lang .nav-link:hover,
.skitty-lang .nav-link:focus,
.skitty-lang .nav-link.active {
    color: var(--skitty-pink);
}

@media (max-width: 991.98px) {
    .skitty-lang {
        margin: 0 0 10px;
        padding: 10px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .2);
    }

    .skitty-lang .nav-link {
        padding-left: 10px !important;
    }
}

/* The title band of the pages other than the home page */
.skitty-page-head {
    position: relative;
    padding: calc(var(--skitty-header-height) + 70px) 0 70px;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}

.skitty-page-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.skitty-page-head .container {
    position: relative;
}

.skitty-page-head h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
}

.skitty-main {
    padding: 60px 0;
}

.skitty-main-full {
    padding: 0;
}

/* HOME */
.skitty-hero {
    position: relative;
    padding: calc(var(--skitty-header-height) + 90px) 0 110px;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.skitty-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .2));
}

.skitty-hero .container {
    position: relative;
}

.skitty-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 20px;
}

.skitty-hero-text {
    font-size: 1.05rem;
    margin-bottom: 28px;
}

.skitty-section {
    padding: 90px 0;
}

.skitty-section + .skitty-section:not(.skitty-section-image) {
    padding-top: 0;
}

.skitty-section-row {
    margin-top: 60px;
}

.skitty-section-title {
    margin-bottom: 40px;
    text-align: center;
    text-transform: uppercase;
    font-size: clamp(1.75rem, 4vw, 2.8rem);
    font-weight: 600;
}

.skitty-section-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 3px;
    margin: 16px auto 0;
    background: var(--skitty-pink);
}

.skitty-section-lead {
    max-width: 760px;
    margin: -16px auto 40px;
    text-align: center;
    font-size: 1.05rem;
    color: var(--skitty-muted);
}

.skitty-block-title {
    margin-bottom: 18px;
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    font-weight: 600;
}

.skitty-photo {
    display: block;
    width: 100%;
    height: auto;
}

/* A band over a darkened picture */
.skitty-section-image {
    position: relative;
    margin-bottom: 90px;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.skitty-section-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

.skitty-section-image .container {
    position: relative;
}

.skitty-iconbox {
    height: 100%;
    text-align: center;
}

.skitty-iconbox h3 {
    margin: 0 0 14px;
    font-size: 1.3rem;
    font-weight: 600;
}

.skitty-iconbox-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--skitty-pink);
    color: #fff;
    font-size: 2rem;
    transition: background-color .3s;
}

.skitty-iconbox:hover .skitty-iconbox-icon {
    background: var(--skitty-black);
}

.skitty-iconbox-dark .skitty-iconbox-icon {
    background: var(--skitty-black);
}

.skitty-iconbox-dark:hover .skitty-iconbox-icon {
    background: var(--skitty-pink);
}

.skitty-quest {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 7 / 5;
    background: var(--skitty-dark);
    color: #fff;
}

.skitty-quest img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.skitty-quest:hover img {
    transform: scale(1.06);
}

.skitty-quest-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 20px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .85));
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
}

.skitty-quest:hover .skitty-quest-title {
    color: var(--skitty-pink);
}

.skitty-counters {
    padding: 30px 0;
    margin-bottom: 90px;
    background: var(--skitty-pink);
    color: var(--skitty-black);
    text-align: center;
}

.skitty-counter-value {
    font-size: clamp(2.25rem, 5vw, 3.1rem);
    font-weight: 500;
    line-height: 1.4;
}

.skitty-counter-label {
    text-transform: uppercase;
    font-size: .9rem;
    letter-spacing: .05em;
}

.skitty-testimonial {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 30px;
    background: #f6f6f6;
    border-top: 3px solid var(--skitty-pink);
}

.skitty-testimonial blockquote {
    flex-grow: 1;
    margin: 0 0 24px;
    font-style: italic;
}

.skitty-testimonial blockquote::before {
    content: '\201C';
    display: block;
    height: 40px;
    font-family: Georgia, serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--skitty-pink);
}

.skitty-testimonial figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
}

.skitty-testimonial img {
    border-radius: 50%;
    object-fit: cover;
}

/* A testimonial without a photo (not yet on Cloudinary): the name's initial */
.skitty-testimonial-initial {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--skitty-pink);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
}

.skitty-testimonial figcaption strong {
    display: block;
    font-family: 'Montserrat', sans-serif;
}

.skitty-testimonial figcaption span span {
    font-size: .875rem;
    color: var(--skitty-muted);
}

/* QUESTS: the list, its cards, and a quest's page */
.skitty-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
}

.skitty-filter button {
    padding: 6px 14px;
    border: 1px solid #ddd;
    background: #fff;
    color: var(--skitty-text);
    font-size: .9rem;
    transition: background-color .2s, border-color .2s, color .2s;
}

.skitty-filter button span {
    margin-left: 6px;
    color: var(--skitty-muted);
    font-size: .8rem;
}

.skitty-filter button:hover {
    border-color: var(--skitty-pink);
    color: var(--skitty-pink);
}

.skitty-filter button.active {
    border-color: var(--skitty-pink);
    background: var(--skitty-pink);
    color: #fff;
}

.skitty-filter button.active span {
    color: rgba(255, 255, 255, .8);
}

.skitty-quest-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    color: var(--skitty-text);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
    transition: box-shadow .3s, transform .3s;
}

.skitty-quest-card:hover {
    color: var(--skitty-text);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
    transform: translateY(-3px);
}

.skitty-quest-card-image {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 7 / 5;
    background: var(--skitty-dark);
}

.skitty-quest-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.skitty-quest-card:hover .skitty-quest-card-image img {
    transform: scale(1.06);
}

.skitty-quest-soon {
    position: absolute;
    top: 14px;
    left: 0;
    padding: 4px 12px;
    background: var(--skitty-pink);
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.skitty-quest-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 18px 20px 20px;
}

.skitty-quest-card-city {
    margin-bottom: 4px;
    color: var(--skitty-pink);
    font-size: .85rem;
}

.skitty-quest-card-title {
    flex-grow: 1;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.35;
    transition: color .2s;
}

.skitty-quest-card:hover .skitty-quest-card-title {
    color: var(--skitty-pink);
}

.skitty-quest-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--skitty-muted);
    font-size: .8rem;
}

/* A city's card (the cities page): the quest card, with the description taking the room above its numbers */
.skitty-city-name {
    flex-grow: 0;
    margin-bottom: 8px;
    font-size: 1.25rem;
}

.skitty-city-text {
    flex-grow: 1;
    margin-bottom: 14px;
    color: var(--skitty-muted);
    font-size: .9rem;
}

.skitty-breadcrumb {
    margin-bottom: 30px;
    font-size: .9rem;
}

.skitty-breadcrumb a {
    color: var(--skitty-muted);
}

.skitty-breadcrumb a:hover {
    color: var(--skitty-pink);
}

.skitty-quest-cover {
    position: relative;
    margin-bottom: 20px;
}

.skitty-quest-cover img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}

.skitty-quest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.skitty-quest-tags span {
    padding: 4px 12px;
    background: #f3f3f3;
    font-size: .875rem;
}

.skitty-quest-tags i {
    color: var(--skitty-pink);
}

.skitty-prose p:last-child {
    margin-bottom: 0;
}

/* An article's text: its sections' headings and lists */
.skitty-article h3 {
    margin: 2rem 0 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.skitty-article h4 {
    margin: 1.75rem 0 .75rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--skitty-pink);
}

.skitty-article > :first-child {
    margin-top: 0;
}

.skitty-article ul,
.skitty-article ol {
    margin-bottom: 1.25rem;
    padding-left: 1.25rem;
}

.skitty-article li {
    margin-bottom: .5rem;
}

.skitty-article li::marker {
    color: var(--skitty-pink);
}

/* Beside an article: the boxes stay in view together while the text scrolls */
.skitty-aside-sticky {
    position: sticky;
    top: calc(var(--skitty-header-height) + 20px);
}

.skitty-aside-sticky .skitty-quest-box {
    position: static;
}

.skitty-discount-box {
    margin-top: 20px;
    padding: 24px;
    border: 2px dashed var(--skitty-pink);
    background: #fff6f8;
}

.skitty-discount-box h2 {
    font-weight: 600;
}

.skitty-discount-box h2 i {
    color: var(--skitty-pink);
}

.skitty-discount-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 8px 8px 8px 16px;
    background: #fff;
    border: 1px solid #f3c2ce;
}

.skitty-discount-code code {
    color: var(--skitty-pink);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .12em;
}

/* The pages' menu beside a page (About, Contact, ...) */
.skitty-side-nav {
    position: sticky;
    top: calc(var(--skitty-header-height) + 20px);
    padding: 26px;
    background: #fff;
    border-top: 3px solid var(--skitty-pink);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
}

.skitty-side-nav-title {
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 600;
}

.skitty-side-nav a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    color: var(--skitty-text);
}

.skitty-side-nav li:last-child a {
    border-bottom: 0;
}

.skitty-side-nav a:hover,
.skitty-side-nav a.active {
    color: var(--skitty-pink);
}

.skitty-quest-step {
    height: 100%;
    padding: 22px;
    background: #f6f6f6;
}

.skitty-quest-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--skitty-pink);
    color: #fff;
    font-size: 1.2rem;
}

.skitty-quest-step h3 {
    font-size: 1.05rem;
    font-weight: 600;
}

.skitty-quest-step h3 span {
    color: var(--skitty-pink);
}

.skitty-quest-step p {
    margin: 0;
    font-size: .925rem;
}

.skitty-quest-notes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.skitty-quest-notes li {
    margin-bottom: 10px;
}

.skitty-quest-notes i {
    margin-right: 10px;
    color: var(--skitty-pink);
}

.skitty-quest-box {
    position: sticky;
    top: calc(var(--skitty-header-height) + 20px);
    padding: 26px;
    background: #fff;
    border-top: 3px solid var(--skitty-pink);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
}

.skitty-quest-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-bottom: 18px;
}

.skitty-stars {
    color: #f5a623;
}

.skitty-quest-facts {
    margin: 0 0 22px;
}

.skitty-quest-facts div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.skitty-quest-facts dt {
    flex-shrink: 0;
    font-weight: 400;
    color: var(--skitty-muted);
}

.skitty-quest-facts dt i {
    margin-right: 8px;
    color: var(--skitty-pink);
}

.skitty-quest-facts dd {
    margin: 0;
    font-weight: 500;
    text-align: right;
}

.skitty-quest-price {
    margin-bottom: 12px;
    text-align: center;
}

.skitty-quest-price strong {
    font-size: 1.4rem;
    color: var(--skitty-pink);
}

.skitty-quest-box-note {
    margin: 12px 0 0;
    text-align: center;
    font-size: .8rem;
    color: var(--skitty-muted);
}

.skitty-quest-more {
    margin-top: 80px;
}

/* FOOTER */
.skitty-footer {
    padding: 50px 0 30px;
    background: var(--skitty-dark);
    color: rgba(255, 255, 255, .8);
    font-size: .95rem;
}

.skitty-footer a {
    color: rgba(255, 255, 255, .8);
}

.skitty-footer a:hover {
    color: var(--skitty-pink);
}

.skitty-footer-brand {
    display: inline-block;
    margin-bottom: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff !important;
}

.skitty-footer-title {
    margin-bottom: 18px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}

.skitty-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.skitty-footer-list li {
    margin-bottom: 10px;
}

.skitty-footer-list i {
    margin-right: 10px;
    color: var(--skitty-pink);
}

.skitty-social {
    display: flex;
    gap: 10px;
}

.skitty-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--skitty-pink);
    color: #fff;
    transition: background-color .3s;
}

.skitty-social a:hover {
    background: var(--skitty-black);
    color: #fff;
}

.skitty-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--skitty-pink);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s, background-color .3s;
}

.skitty-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.skitty-to-top:hover {
    background: var(--skitty-black);
    color: #fff;
}

.skitty-admin-edit {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1020;
    padding: 8px 16px;
    background: var(--skitty-black);
    color: #fff;
}

@media (max-width: 991.98px) {
    :root {
        --skitty-header-height: 78px;
    }

    .skitty-brand img {
        height: 42px;
    }

    .skitty-brand-name {
        font-size: 1.25rem;
    }

    .skitty-nav {
        padding: 10px 0;
    }

    .skitty-section {
        padding: 60px 0;
    }

    .skitty-section-image,
    .skitty-counters {
        margin-bottom: 60px;
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: 15px;
    }

    .skitty-brand-tagline {
        display: none;
    }
}