/* The public style of the Curacao Golf site: the look of the Brentwood Pro theme with WPBakery, rebuilt on
   the blocks of the site (Helpers/Blocks) and measured on the old site. Colours come from the custom
   properties of the CMS (/beheer/colors, CuracaoGolfCms.BrandColors); this sheet never names another site.
   ⛔ Loaded on the public pages only (App.razor), never on /beheer. */

:root {
    --cg-container: 1140px;
    --cg-heading: #1b1d27;
    --cg-black: #000000;
    --cg-grey: #f7f7f7;
    --cg-border: #e5e5e5;
    --cg-menu-break: 960px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.cg-site {
    margin: 0;
    background: var(--vsi-bg, #ffffff);
    color: var(--vsi-ink, #7f8186);
    font-family: "Lato", sans-serif;
    font-size: 15px;
    line-height: 1.65;
}

.cg-site img {
    max-width: 100%;
    height: auto;
}

/* The photos that cover their section (hero, header band, footer) keep the full height of it. */
.cg-site img.cg-hero__photo,
.cg-site img.cg-band-photo__img,
.cg-site img.cg-footer__photo {
    height: 100%;
    max-width: none;
}

/* The skip link is for keyboard and screen reader users: out of sight until it gets the focus. */
.cg-site .vsi-screen-reader-only {
    position: absolute;
    left: -10000px;
    top: 0;
    z-index: 1000;
}

.cg-site .vsi-screen-reader-only:focus {
    left: 1rem;
    top: 1rem;
    padding: 0.5rem 1rem;
    background: #ffffff;
    color: #000000;
}

.cg-site a {
    color: var(--vsi-link, #8ea96f);
    text-decoration: none;
    transition: color 200ms ease-in-out;
}

.cg-site a:hover {
    color: var(--vsi-link-hover, #518b0f);
}

.cg-site h1,
.cg-site h2,
.cg-site h3,
.cg-site h4,
.cg-site h5,
.cg-site h6 {
    color: var(--cg-heading);
    font-weight: 300;
    margin: 0 0 15px;
    padding: 0;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.cg-site h1 { font-size: 28px; font-weight: 700; line-height: 1.2; }
.cg-site h2 { font-size: 24px; }
.cg-site h3 { font-size: 22px; }
.cg-site h4 { font-size: 20px; }
.cg-site h5 { font-size: 18px; }
.cg-site h6 { font-size: 14px; font-weight: 700; letter-spacing: 1px; }

.cg-site h1 strong,
.cg-site h2 strong,
.cg-site h3 strong,
.cg-site h4 strong,
.cg-site h5 strong,
.cg-site h6 strong {
    font-weight: 700;
}

.cg-site p {
    margin: 0 0 20px;
}

.cg-container {
    width: min(var(--cg-container), 92%);
    margin: 0 auto;
    position: relative;
}

/* ---------------------------------------------------------------- header */

.cg-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.cg-header__bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.cg-header__logo {
    display: block;
    flex: 0 0 auto;
    line-height: 1;
}

.cg-header__logo img {
    display: block;
    width: 153px;
    max-width: 153px;
    height: auto;
}

.cg-header__logo span {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    display: inline-block;
    padding: 30px 0;
}

.cg-menu__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cg-site .cg-menu__item a {
    display: block;
    color: var(--vsi-header-text, #ffffff);
    text-shadow: 1px 0 16px rgba(0, 0, 0, 0.3);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    padding: 34px 14px;
}

.cg-site .cg-menu__item.is-current a,
.cg-site .cg-menu__item a:hover {
    color: var(--vsi-header-accent, #d3f1d7);
}

.cg-menu__item--language a {
    opacity: 0.85;
}

/* The header becomes the dark sticky bar once the visitor scrolled (site.js sets the class). */
html.cg-scrolled .cg-header {
    position: fixed;
    background: rgba(30, 32, 41, 0.95);
}

html.cg-scrolled .cg-header__logo img {
    width: 90px;
}

html.cg-scrolled .cg-site .cg-menu__item a,
html.cg-scrolled .cg-menu__item a {
    padding-top: 34px;
    padding-bottom: 34px;
}

.cg-menu-button {
    display: none;
    width: 50px;
    height: 50px;
    margin: 22px 0;
    border: 0;
    background: #ffffff;
    color: var(--cg-heading);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.cg-menu-button__close {
    display: none;
}

.cg-mobile-menu {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    background: #f9f9f9;
    border-top: 1px solid #dcdee1;
}

.cg-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cg-site .cg-mobile-menu__list a {
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    color: #23272c;
    font-size: 12px;
    padding: 20px 4%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.cg-site .cg-mobile-menu__list .is-current a,
.cg-site .cg-mobile-menu__list a:hover {
    color: var(--vsi-link, #8ea96f);
}

@media (max-width: 959px) {
    .cg-menu {
        display: none;
    }

    .cg-menu-button {
        display: flex;
    }

    html.cg-menu-open .cg-mobile-menu {
        display: block;
    }

    html.cg-menu-open .cg-menu-button__open {
        display: none;
    }

    html.cg-menu-open .cg-menu-button__close {
        display: inline;
    }

    html.cg-scrolled .cg-header__logo img {
        width: 80px;
    }

    html.cg-scrolled .cg-menu-button {
        margin: 10px 0;
    }
}

/* ---------------------------------------------------------------- page top: photo band, breadcrumbs, title */

.cg-band-photo {
    position: relative;
    height: 330px;
    background: #444444;
    overflow: hidden;
}

.cg-band-photo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

.cg-breadcrumbs {
    padding: 25px 0;
    border-bottom: 1px solid var(--cg-border);
}

.cg-breadcrumbs__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    font-weight: 700;
    font-size: 13px;
    color: var(--vsi-ink, #7f8186);
}

.cg-breadcrumbs__list li + li::before {
    content: "/";
    padding: 0 9px;
    color: #000000;
}

.cg-site .cg-breadcrumbs__list a {
    color: #000000;
}

.cg-page-title {
    padding-top: 40px;
}

.cg-site .cg-page-title__text {
    color: #000000;
    font-size: 40px;
    font-weight: 300;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 0 30px;
}

/* ---------------------------------------------------------------- blocks */

.cg-page {
    padding-bottom: 40px;
}

.cg-page--hero {
    padding-bottom: 0;
}

.cg-block {
    position: relative;
    padding-top: var(--cg-space-top, 30px);
    padding-bottom: var(--cg-space-bottom, 30px);
}

.cg-block__inner {
    width: min(var(--cg-container), 92%);
    margin: 0 auto;
    position: relative;
}

.cg-bg--black {
    background: var(--cg-black);
    color: #ffffff;
}

.cg-bg--black h1,
.cg-bg--black h2,
.cg-bg--black h3,
.cg-bg--black h4,
.cg-bg--black h5,
.cg-bg--black h6,
.cg-site .cg-bg--black .cg-block__title {
    color: #ffffff;
}

.cg-bg--grey {
    background: var(--cg-grey);
}

.cg-bg--green {
    background: var(--vsi-primary, #8ea96f);
    color: #ffffff;
}

.cg-align--center .cg-block__title,
.cg-align--center .cg-block__text,
.cg-align--center .cg-block__button {
    text-align: center;
}

.cg-align--right .cg-block__title,
.cg-align--right .cg-block__text,
.cg-align--right .cg-block__button,
.cg-align--right .cg-hero__subtitle {
    text-align: right;
}

/* A WPBakery element had 35px below it; the last element of a column or text keeps that space. */
.cg-block__text > :last-child,
.cg-column > :last-child {
    margin-bottom: 35px;
}

.cg-block--hero .cg-block__text > :last-child,
.cg-bg--black .cg-block__text > :last-child {
    margin-bottom: 0;
}

.cg-heading {
    margin-bottom: 0.625rem;
}

/* Hero: the photo covers the section as an <img> (object-fit), the text stands over it. */
.cg-block--hero {
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #000000;
    color: #ffffff;
}

.cg-block--hero.cg-height--full {
    min-height: 100vh;
    min-height: 100svh;
    align-items: center;
}

.cg-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

.cg-hero__content {
    z-index: 1;
}

.cg-block--hero.cg-height--full .cg-hero__content {
    padding-top: 200px;
}

.cg-site .cg-block--hero .cg-block__title {
    color: #ffffff;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.625rem;
}

.cg-site .cg-hero__subtitle {
    color: #ffffff;
    font-size: 26px;
    font-weight: 300;
    line-height: 1.4;
    margin: 0;
    padding-bottom: 20px;
}

.cg-block--hero .cg-block__text {
    color: #ffffff;
}

.cg-block--hero .cg-block__button {
    padding-bottom: 100px;
}

.cg-block--hero.cg-height--auto .cg-block__button {
    padding-bottom: 0;
}

/* A photo section in the middle of a page (MEMBERSHIP BENEFITS): a light 40px title and an 18px text. */
.cg-site .cg-block--hero.cg-height--auto .cg-block__title {
    font-size: 40px;
    font-weight: 300;
}

.cg-site .cg-block--hero.cg-height--auto .cg-hero__subtitle {
    font-size: 18px;
    line-height: 1.8;
}

.cg-align--center .cg-hero__subtitle {
    text-align: center;
}

/* Band: the heading left, the button right ("CURACAO GOLF & SQUASH CLUB TODAY!"). */
.cg-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.cg-site .cg-block--band .cg-block__title {
    font-size: 28px;
    font-weight: 300;
    margin: 0;
    padding: 30px 0;
}

.cg-block--band .cg-block__button {
    margin: 0 0 0 auto;
    flex: 0 0 16.66%;
}

.cg-site .cg-block--band .cg-button {
    display: block;
    text-align: center;
    padding: 15px 26px;
    font-size: 11px;
}

/* Columns: the WPBakery fractions on a twelve column grid with a gap of 30px. */
.cg-columns {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 30px;
}

.cg-column {
    grid-column: span var(--cg-span, 6);
    min-width: 0;
}

.cg-column > p,
.cg-column > ul,
.cg-column > ol {
    margin-bottom: 20px;
}

.cg-column .vsi-inline-foto,
.cg-column figure {
    margin: 0 0 35px;
}

/* Quote: a testimonial on black. */
.cg-quote {
    margin: 0;
}

.cg-quote__text {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 300;
}

.cg-quote__text p {
    margin: 0;
}

.cg-site .cg-quote__author {
    color: #ffffff;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 10px 0 0;
}

.cg-block--image .cg-block__image {
    display: block;
    margin: 0 auto;
}

.cg-separator {
    border: 0;
    border-top: 1px solid #ebebeb;
    margin: 0;
}

.cg-site hr {
    border: 0;
    border-top: 1px solid #ebebeb;
    margin: 20px 0 35px;
}

.cg-block--map {
    padding: 0;
}

.cg-block__map iframe,
.cg-block__map .vsi-map {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}

/* ---------------------------------------------------------------- buttons */

.cg-button-row {
    margin: 0 0 22px;
}

.cg-button-row--center {
    text-align: center;
}

.cg-button-row--right {
    text-align: right;
}

.cg-site .cg-button,
.cg-site a.cg-button {
    display: inline-block;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.4;
    padding: 15px 26px;
    border: 2px solid currentColor;
    text-transform: uppercase;
    transition: all 200ms ease-in-out;
}

.cg-site .cg-button--large {
    font-size: 13px;
    padding: 20px 30px;
}

.cg-site .cg-button--block {
    display: block;
    text-align: center;
}

.cg-site .cg-button--outline {
    background: transparent;
    color: var(--vsi-link, #8ea96f);
    border-color: var(--vsi-link, #8ea96f);
}

.cg-site .cg-button--outline:hover {
    background: var(--vsi-link, #8ea96f);
    color: #ffffff;
}

.cg-site .cg-block--hero .cg-button--outline,
.cg-site .cg-bg--black .cg-button--outline {
    color: #ffffff;
    border-color: #ffffff;
}

.cg-site .cg-block--hero .cg-button--outline:hover {
    background: #ffffff;
    color: #000000;
}

.cg-site .cg-bg--black .cg-button--outline:hover {
    background: #ffffff;
    color: #000000;
}

.cg-site .cg-block--hero .cg-button {
    font-size: 13px;
    padding: 20px 30px;
}

.cg-site .cg-button--solid {
    background: var(--vsi-primary, #8ea96f);
    border-color: var(--vsi-primary, #8ea96f);
    color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 5px 0 var(--vsi-primary-dark, #518b0f);
}

.cg-site .cg-button--solid:hover {
    background: var(--vsi-primary-dark, #518b0f);
    color: #ffffff;
}

.cg-site .cg-button--orange {
    background: #f7be68;
    border-color: #f7be68;
    color: #ffffff;
    border-radius: 5px;
}

.cg-site .cg-button--orange:hover {
    background: #f5b14b;
    border-color: #f5b14b;
    color: #ffffff;
}

/* ---------------------------------------------------------------- news */

.cg-news {
    padding-bottom: 40px;
}

.cg-post {
    margin-bottom: 45px;
    padding: 35px 50px;
    background: rgba(0, 0, 0, 0.025);
}

.cg-site .cg-post__title {
    font-weight: 400;
    font-size: 32px;
    line-height: 1.4;
    margin-bottom: 8px;
    color: var(--cg-heading);
}

.cg-site .cg-post__title a {
    color: var(--cg-heading);
}

.cg-site .cg-post__title a:hover {
    color: var(--vsi-link-hover, #518b0f);
}

.cg-post__meta {
    font-size: 12px;
    margin-bottom: 18px;
    color: #333333;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.cg-site .cg-post__meta a {
    color: #333333;
}

.cg-post__meta-item .cg-svg {
    margin-right: 3px;
    vertical-align: -1px;
}

.cg-post__text img {
    display: block;
}

/* A photo in a post stands at the left, as WordPress' image block did. */
.cg-site .cg-post__text .vsi-inline-foto {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.cg-post-nav,
.cg-pager {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 60px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cg-site .cg-post-nav__link,
.cg-site .cg-pager__link {
    border: 2px solid var(--vsi-link, #8ea96f);
    color: var(--vsi-link, #8ea96f);
    display: inline-block;
    padding: 18px 28px;
}

.cg-site .cg-post-nav__link:hover,
.cg-site .cg-pager__link:hover {
    color: #ffffff;
    background: var(--vsi-link, #8ea96f);
}

.cg-post-nav__link--next {
    margin-left: auto;
}

/* ---------------------------------------------------------------- forms of the CMS (the Contact Form 7 look) */

/* The honeypot of the package stays out of sight (the input rules below would otherwise draw it). */
.cg-site .vsi-form .vsi-form-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cg-site .vsi-form__field {
    margin: 0 0 18px;
}

.cg-site .vsi-form input.vsi-form__input,
.cg-site .vsi-form textarea.vsi-form__input {
    border-radius: 0;
    background: #ffffff;
    padding: 14px 16px;
    border: 2px solid #dddddd;
    width: 50%;
    font-size: 16px;
    font-family: inherit;
    color: var(--cg-heading);
}

.cg-site .vsi-form textarea.vsi-form__input {
    width: 80%;
    min-height: 140px;
}

.cg-site .vsi-form .vsi-form__input:focus {
    border-color: var(--vsi-link, #8ea96f);
    outline: none;
}

.cg-site .vsi-form button.vsi-form__button {
    border: 0;
    background: #000000;
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 15px 20px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    transition: background 200ms ease-in-out;
}

.cg-site .vsi-form button.vsi-form__button:hover {
    background: var(--vsi-link, #8ea96f);
}

@media (max-width: 767px) {
    .cg-site .vsi-form input.vsi-form__input,
    .cg-site .vsi-form textarea.vsi-form__input {
        width: 100%;
    }
}

/* A tap target of at least 44px high on a phone or tablet (the desktop button is 43px, as on the old site). */
@media (max-width: 1024px), (pointer: coarse) {
    .cg-site .vsi-form button.vsi-form__button {
        min-height: 44px;
    }
}

/* ---------------------------------------------------------------- galleries */

/* The row of sponsor logos (gallery layout "logos" of the CMS): one line with six logos in view that moves
   slowly from side to side, as the WPBakery carousel of the old home page did. Without motion (the visitor
   asked for less motion) the logos wrap into rows instead. */
.cg-block--gallery .cg-block__component {
    overflow: hidden;
}

.cg-block--gallery .vsi-logo-wall {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    margin: 0;
    animation: cg-logo-wall 140s linear infinite alternate;
}

.cg-block--gallery .vsi-logo-wall:hover {
    animation-play-state: paused;
}

.cg-block--gallery .vsi-logo-wall__item {
    flex: 0 0 calc(min(var(--cg-container), 92vw) / 6);
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
}

.cg-site .cg-block--gallery .vsi-logo-wall__img {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@keyframes cg-logo-wall {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% + min(var(--cg-container), 92vw)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .cg-block--gallery .vsi-logo-wall {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .cg-block--gallery .vsi-logo-wall__item {
        flex-basis: calc(92vw / 3);
    }

    @keyframes cg-logo-wall {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(calc(-100% + 92vw));
        }
    }
}

/* ---------------------------------------------------------------- footer */

.cg-footer {
    position: relative;
    overflow: hidden;
    background-color: var(--vsi-footer-bg, #020202);
    color: var(--vsi-footer-text, #ffffff);
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-align: center;
}

.cg-footer__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

.cg-footer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 2, 2, 0);
}

.cg-footer__content {
    position: relative;
    padding: 70px 0 0;
}

.cg-site .cg-footer__title {
    color: var(--vsi-footer-heading, #ffffff);
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 20px;
}

.cg-footer__lines {
    color: var(--vsi-footer-text, #ffffff);
    font-size: 15px;
    margin: 0 0 20px;
}

.cg-site .cg-footer a {
    color: var(--vsi-footer-link, #6d6d6d);
}

.cg-site .cg-footer a:hover {
    color: var(--vsi-footer-link-hover, #ffffff);
}

/* The telephone number is white text on the old site; on a phone it can be tapped all the same. */
.cg-site .cg-footer a.cg-footer__phone {
    color: inherit;
}

.cg-footer__social {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 0 70px;
    padding: 0;
}

.cg-site .cg-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.cg-site .cg-footer__social a:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* On touch screens the icons keep their 30px circle but get a 44px tap area (transparent padding). */
@media (max-width: 1024px), (pointer: coarse) {
    .cg-footer__social {
        gap: 0;
    }

    .cg-site .cg-footer__social a {
        width: 44px;
        height: 44px;
        padding: 7px;
        background-clip: content-box;
    }
}

.cg-footer__copyright {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 20px 0;
    margin: 0;
}

/* ---------------------------------------------------------------- WhatsApp button */

.cg-whatsapp {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cg-whatsapp__label {
    max-width: 156px;
    background: #ffffff;
    color: #333333;
    font-size: 11px;
    line-height: 1.5;
    padding: 6px 10px;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

.cg-site .cg-whatsapp__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #2db742;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    /* As the WhatsApp plugin of the old site: the button lifts 3px with a shadow, in 0.4s. */
    transition: all 400ms ease;
}

.cg-site .cg-whatsapp__button:hover,
.cg-site .cg-whatsapp__button:focus {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px 1px rgba(32, 32, 37, 0.19);
}

/* The label of the test version while SiteNoIndex is on: small, bottom left (the WhatsApp button is bottom right,
   the menu at the top), and it never takes a click (SiteConventionTests.TheTestVersionLabel_IsSmallAndBlocksNothing). */
.cg-hidden-badge {
    position: fixed;
    left: 12px;
    bottom: var(--cg-hidden-badge-bottom, 12px);
    z-index: 1000;
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.4;
    pointer-events: none;
}

/* On a phone the WhatsApp button and its text bubble fill the bottom row: the label goes just above them. */
@media (max-width: 767px) {
    :root {
        --cg-hidden-badge-bottom: 80px;
    }
}

.cg-hidden-badge__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc3545;
    margin-right: 6px;
}

/* ---------------------------------------------------------------- the not found page */

.cg-not-found {
    min-height: 120px;
}

/* ---------------------------------------------------------------- tablet and phone */

/* WPBakery kept its columns side by side from 768px (vc_col-sm-*); below that they stack. */
@media (max-width: 767px) {
    /* One track: twelve tracks with eleven gaps of 30px need 330px and pushed the columns past a 320px window. */
    .cg-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .cg-column {
        grid-column: auto;
    }

    .cg-band {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .cg-block--band .cg-block__button {
        margin-bottom: 20px;
        flex-basis: auto;
    }
}

@media (max-width: 959px) {

    .cg-post {
        padding: 25px 30px;
    }
}

@media (max-width: 767px) {
    .cg-block--hero.cg-height--full .cg-hero__content {
        padding-top: 140px;
    }

    .cg-site .cg-page-title__text {
        font-size: 30px;
    }

    .cg-post {
        padding: 20px 25px;
    }

    .cg-site .cg-post__title {
        font-size: 26px;
    }

    .cg-band-photo {
        height: 160px;
    }

    .cg-whatsapp {
        right: 15px;
        bottom: 15px;
    }

    .cg-post-nav,
    .cg-pager {
        flex-direction: column;
    }

    .cg-post-nav__link--next {
        margin-left: 0;
    }
}