@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Mulish:wght@300;400;500;600;700&display=swap");
@import url("theme-frozen.css");

/*
 * Cartier World Travel, new site style.
 *
 * The palette, type and rhythm are the ones already proven on the Sam stop
 * template and the Slow Provence page. This file is not a replacement for the
 * compiled YOOtheme style, it is a layer on top of a frozen copy of it, so
 * every UIkit component keeps working and only its appearance changes.
 *
 * Why a file and not the Customizer. YOOtheme's styler covers colours and a
 * handful of variables, but not the type pairing, the square corners or the
 * letterspaced small caps this look is built on. Those would end up in the
 * Customizer's custom CSS box anyway, where they are hard to read and harder
 * to revert. Here they are one file that can be swapped in and out.
 *
 * Properties are alphabetised inside each rule, position first, then
 * bottom/left/right/top.
 */

:root {
  --cream: #FAF4E8;
  --gold: #C49A4A;
  --ink: #2C2820;
  --ink-soft: #5A5345;
  --line: rgba(44, 40, 32, .16);
  --olive: #7E7C4F;
  --paper: #F3EAD7;
  --terracotta: #B5572F;
  --terracotta-deep: #8F3F1E;
}

/* ---------- base ---------- */

body {
  -webkit-font-smoothing: antialiased;
  background: var(--cream);
  color: var(--ink);
  font-family: "Mulish", sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.75;
}

/*
 * Nothing in this template is rounded. The compiled style rounds in fifteen
 * places, so each one is named here rather than hoping a blanket rule wins.
 * The two id selectors and the two !important rules are matched in kind,
 * because that is what it takes to beat them.
 *
 * Deliberately left alone: radio buttons, dotnav, the icon buttons and
 * anything carrying uk-border-circle or uk-border-pill. Those are controls,
 * not containers, and a square radio button just looks broken.
 */
.uk-button,
.uk-card,
.uk-card-media-top,
.uk-card-media-bottom,
.uk-grid-stack > .uk-card-media-left,
.uk-grid-stack > .uk-card-media-right,
:not(.uk-grid-stack) > .uk-card-media-left,
:not(.uk-grid-stack) > .uk-card-media-right,
.uk-input,
.uk-overlay,
.uk-search-input,
.uk-search-navbar .uk-search-input,
.uk-section-overlap,
.uk-select,
.uk-textarea,
.uk-tile,
.uk-navbar-transparent ul li a,
.uk-border-rounded,
.r24k-cartier-destination-map,
.r24k-cartier-home-grid-overlay,
.r24k-cartier-home-grid .el-item img,
#ballan-cup-grid img,
#r24k-cartier-continent-grid .el-meta,
#r24k-cartier-home-grid .el-item img,
#r24k-cartier-home-inspiration img,
img {
  border-radius: 0;
}

/*
 * Unavoidable !important.
 *
 * The builder writes per element CSS into <style> blocks inside the page body,
 * such as #page\#5 .el-image { border-radius: 30px }. Those sit after this
 * file in document order and carry an id, and the id changes per element, so
 * there is nothing to match and nothing to out-weigh. The other two are the
 * compiled style's own !important rules.
 */
.el-image,
#footer-map,
.wpcf7 form .wpcf7-response-output,
textarea {
  border-radius: 0 !important;
}

/* ---------- type ---------- */

h1, h2, h3, h4,
.uk-h1, .uk-h2, .uk-h3, .uk-h4,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge,
.uk-card-title,
.uk-logo {
  color: inherit;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.06;
}

h5, h6,
.uk-h5, .uk-h6 {
  font-family: "Mulish", sans-serif;
  font-weight: 600;
}

h1, .uk-h1 { font-size: clamp(2.6rem, 5.2vw, 4.2rem); }
h2, .uk-h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h3, .uk-h3 { font-size: 1.9rem; }
h4, .uk-h4 { font-size: 1.5rem; }

.uk-heading-small { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.uk-heading-medium { font-size: clamp(2.4rem, 5vw, 4rem); }
.uk-heading-large { font-size: clamp(2.8rem, 6vw, 4.8rem); }
.uk-heading-xlarge { font-size: clamp(3.2rem, 7vw, 5.6rem); }
.uk-heading-2xlarge { font-size: clamp(3.6rem, 8.5vw, 7rem); }

/*
 * The home hero is a sticky video tile with three uk-parallax headings
 * (Traditional, Regional, Authentic) that fade out one at a time. That
 * timing is driven by the height of those headings, so inside the hero the
 * headings keep the exact metrics the compiled theme gave them. Change the
 * face here, never the size.
 */
#r24k-cartier-hero .uk-heading-xlarge {
  font-size: 4rem;
  line-height: 1;
}

@media (min-width: 960px) {
  #r24k-cartier-hero .uk-heading-xlarge { font-size: 6rem; }
}

@media (min-width: 1200px) {
  #r24k-cartier-hero .uk-heading-xlarge { font-size: 8rem; }
}

/*
 * An italic word inside a heading is the accent of this look. The builder
 * writes those as <em>, so they need no extra class.
 */
h1 em, h2 em, h3 em,
.uk-heading-small em,
.uk-heading-medium em,
.uk-heading-large em,
.uk-heading-xlarge em {
  color: var(--terracotta);
  font-style: italic;
}

p, li {
  color: var(--ink-soft);
}

.uk-text-lead {
  color: var(--ink-soft);
  font-family: "Mulish", sans-serif;
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.7;
}

.uk-text-meta {
  color: var(--ink-soft);
  font-size: .95rem;
}

strong, b {
  color: var(--ink);
  font-weight: 700;
}

blockquote,
.uk-blockquote {
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.7rem;
  font-style: italic;
  line-height: 1.35;
}

/*
 * The eyebrow. UIkit has no component for it, so the builder writes it as a
 * small subtitle or a text-meta element above a heading.
 */
.uk-subnav,
.uk-breadcrumb,
.uk-nav-header {
  font-family: "Mulish", sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
}

/* ---------- links ---------- */

a,
.uk-link {
  color: var(--terracotta-deep);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover,
.uk-link:hover {
  color: var(--terracotta);
  text-decoration: none;
}

hr,
.uk-hr,
.uk-divider-icon,
.uk-divider-small::after {
  border-color: var(--line);
}

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

.uk-button {
  border-radius: 0;
  font-family: "Mulish", sans-serif;
  font-size: .74rem;
  font-weight: 700;
  height: auto;
  letter-spacing: .18em;
  line-height: 1.2;
  padding: 15px 30px;
  text-transform: uppercase;
  transition: .2s ease;
}

/*
 * The compiled style puts a 4 to 5px glowing ring around every button on
 * hover and on click. Nothing else in this look glows, so it goes.
 */
.uk-button:hover,
.uk-button:focus,
.uk-button:active,
.uk-button.uk-active {
  box-shadow: none;
}

/*
 * Two button types are in use on the site, default and primary. Both are
 * solid. An outlined button over a photograph is unreadable at a glance, and
 * the whole point of these is that you can see them.
 */
.uk-button-default {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--cream);
}

.uk-button-default:hover,
.uk-button-default:focus {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--cream);
}

.uk-button-primary {
  background: var(--terracotta);
  border: 1px solid var(--terracotta);
  color: var(--cream);
}

.uk-button-primary:hover,
.uk-button-primary:focus {
  background: var(--terracotta-deep);
  border-color: var(--terracotta-deep);
  color: var(--cream);
}

.uk-button-secondary {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--cream);
}

.uk-button-secondary:hover,
.uk-button-secondary:focus {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--cream);
}

.uk-button-text {
  color: var(--terracotta-deep);
  font-size: .74rem;
  letter-spacing: .18em;
  padding: 0;
}

.uk-button-text::before {
  border-bottom: 1px solid var(--terracotta);
}

/*
 * A button on a dark panel or over a photograph.
 *
 * UIkit calls this the inverse context and gives it eleven selectors, each one
 * class heavier than the plain .uk-button-default above. That is why a single
 * rule up there does not reach these: on the home grid the compiled style was
 * still winning with a filled off-white button. The list is repeated verbatim
 * so the weights tie and the later file, this one, takes it.
 */
.tm-toolbar-default .uk-button-default,
.uk-card-primary.uk-card-body .uk-button-default,
.uk-card-primary > :not([class*=uk-card-media]) .uk-button-default,
.uk-card-secondary.uk-card-body .uk-button-default,
.uk-card-secondary > :not([class*=uk-card-media]) .uk-button-default,
.uk-light .uk-button-default,
.uk-offcanvas-bar .uk-button-default,
.uk-overlay-primary .uk-button-default,
.uk-section-primary:not(.uk-preserve-color) .uk-button-default,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-default,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default {
  background: var(--cream);
  border: 1px solid var(--cream);
  color: var(--ink);
}

.tm-toolbar-default .uk-button-default:hover,
.uk-card-primary.uk-card-body .uk-button-default:hover,
.uk-card-primary > :not([class*=uk-card-media]) .uk-button-default:hover,
.uk-card-secondary.uk-card-body .uk-button-default:hover,
.uk-card-secondary > :not([class*=uk-card-media]) .uk-button-default:hover,
.uk-light .uk-button-default:hover,
.uk-offcanvas-bar .uk-button-default:hover,
.uk-overlay-primary .uk-button-default:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-default:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-default:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  box-shadow: none;
  color: var(--cream);
}

/*
 * The six cards on the home page.
 *
 * These buttons sit on top of a photograph and the style targets them by id,
 * with a hard black drop shadow and a 5px white ring on hover. An id beats any
 * number of classes, so this is the one place that has to be written the same
 * way to be corrected at all. Solid cream on the photo, terracotta on hover.
 */
#r24k-cartier-home-grid .el-link,
.r24k-cartier-home-grid .el-link,
#r24k-cartier-continent-grid .el-link {
  background: var(--cream);
  border: 1px solid var(--cream);
  box-shadow: none;
  color: var(--ink);
}

#r24k-cartier-home-grid .el-link:hover,
.r24k-cartier-home-grid .el-link:hover,
#r24k-cartier-continent-grid .el-link:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  box-shadow: none;
  color: var(--cream);
}

/* ---------- sections ---------- */

.uk-section-default,
.uk-background-default {
  background: var(--cream);
}

.uk-section-muted,
.uk-background-muted,
.uk-card-muted,
.uk-tile-muted {
  background: var(--paper);
}

.uk-section-primary,
.uk-section-secondary,
.uk-background-primary,
.uk-background-secondary,
.uk-tile-primary,
.uk-tile-secondary {
  background: var(--ink);
}

.uk-card-default {
  background: var(--paper);
  box-shadow: none;
}

.uk-card-default:hover {
  box-shadow: 0 30px 60px -25px rgba(44, 40, 32, .45);
}

/* ---------- navbar ---------- */

.uk-navbar-container:not(.uk-navbar-transparent) {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.uk-navbar-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle {
  color: var(--ink-soft);
  font-family: "Mulish", sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a:focus,
.uk-navbar-nav > li.uk-active > a {
  color: var(--terracotta);
}

.uk-navbar-dropdown {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 0;
}

.uk-navbar-dropdown-nav > li > a,
.uk-nav-default > li > a {
  color: var(--ink-soft);
  font-family: "Mulish", sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.uk-navbar-dropdown-nav > li > a:hover,
.uk-nav-default > li > a:hover {
  color: var(--terracotta);
}

/* ---------- forms ---------- */

.uk-input,
.uk-select,
.uk-textarea,
.wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.wpcf7 select,
.wpcf7 textarea {
  background: rgba(251, 246, 236, .96);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font-family: "Mulish", sans-serif;
  font-size: .95rem;
  height: auto;
  padding: 12px 14px;
  width: 100%;
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  background: #FFFDF8;
  border-color: var(--terracotta);
  outline: 0;
}

.uk-form-label,
.wpcf7 label {
  color: var(--ink);
  font-family: "Mulish", sans-serif;
  font-size: .9rem;
  font-weight: 600;
}

.wpcf7 input[type=submit],
.wpcf7 .wpcf7-submit {
  background: var(--terracotta);
  border: 1px solid var(--terracotta);
  border-radius: 0;
  color: var(--cream);
  cursor: pointer;
  font-family: "Mulish", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 16px 40px;
  text-transform: uppercase;
  transition: .2s ease;
  width: auto;
}

.wpcf7 input[type=submit]:hover,
.wpcf7 .wpcf7-submit:hover {
  background: transparent;
  color: var(--terracotta);
}

/* ---------- overlays and captions ---------- */

.uk-overlay-primary {
  background: rgba(20, 17, 11, .55);
}

.uk-overlay-default {
  background: rgba(250, 244, 232, .9);
}

.uk-label {
  background: var(--terracotta);
  border-radius: 0;
  font-family: "Mulish", sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------- focus ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}


/* -- Google Reviews -- */
.uk-container .ti-widget.ti-goog .ti-review-item>.ti-inner {
    border-radius: 0 !important;
    background: #e8e1ce !important;
}


.ti-widget.ti-goog .ti-review-item>.ti-inner, .ti-widget.ti-goog .ti-load-more-reviews-container .ti-load-more-reviews-button {
    box-shadow: 1px 1px 0 #654 !important;
}
.gt_float_switcher {
    border-radius: 0 !important;
}
.tm-header-overlay .uk-button-primary {
    background-color: var(--terracotta);
    border:none;
}


#mailpoet_form_1 form.mailpoet_form input{
    height: 36px;
    max-width: 300px;
}
#mailpoet_form_1 form.mailpoet_form input[type="submit"] {
    background-color: var(--terracotta);
    color: #fff;
}

/* ---------- tour pages, flat-skeu quotation viewer ---------- */

/*
 * The tour pages are rendered by r24k-tm-package-importer on top of
 * r24k-kit.css. The kit is built to be re-skinned by overriding its tokens on
 * the wrapper, so neither the kit nor the plugin is touched here. Only the
 * radius scale is set here. The accent is a plugin setting, which the plugin
 * writes into the page as #r24k-tmpi-flat-skeu { --color-accent }, so it is
 * changed there and never in this file.
 */
.r24k-fs-viewer {
  --radius-2xl: 0;
  --radius-3xl: 0;
  --radius-lg: 0;
  --radius-md: 0;
  --radius-pill: 0;
  --radius-sm: 0;
  --radius-xl: 0;
}

/*
 * These carry a hardcoded radius instead of a token, so each one has to be
 * named. The lightbox is appended to the body, outside the viewer, so its two
 * rules cannot be scoped to the wrapper.
 *
 * The two full circles in the viewer, the download button and the lightbox
 * arrows, are deliberately left alone: a circle reads as a control, not as a
 * rounded box.
 */
.r24k-fs-viewer .fs-cover__map,
.r24k-fs-viewer .fs-cover__map-card,
.r24k-fs-viewer .fs-cover__photo,
.r24k-fs-viewer .fs-cover__photo img,
.r24k-fs-viewer .fs-day-nav__chip,
.r24k-fs-viewer .fs-day-nav__nr,
.r24k-fs-viewer .fs-footer__logo-wrap--tinted,
.r24k-fs-viewer .fs-hotel-card__am-chip,
.r24k-fs-viewer .fs-operator__logo-wrap--tinted,
.r24k-fs-viewer .fs-pill,
.r24k-fs-lb__main,
.r24k-fs-lb__thumb {
  border-radius: 0;
}

/*
 * Four more sit in the style block the plugin prints into the body, on
 * #r24k-tmpi-flat-skeu, which is the <main> above the viewer. That block wins
 * on document order, so these have to carry both the id and the wrapper to
 * outweigh it. The round icon badges go square with the chips they sit in.
 */
#r24k-tmpi-flat-skeu .r24k-fs-viewer .fs-cover__facts i,
#r24k-tmpi-flat-skeu .r24k-fs-viewer .fs-cover__facts li,
#r24k-tmpi-flat-skeu .r24k-fs-viewer .fs-tmpi-highlights__list i,
#r24k-tmpi-flat-skeu .r24k-fs-viewer .fs-tmpi-highlights__list li {
  border-radius: 0;
}
.parsley-required, .parsley-custom-error-message {
    color: #faa;
}

.uk-select[multiple], .uk-select[size], .uk-textarea {
    border-radius: 0;
}
.fs-day-nav {
    padding-left: 10px;
    padding-right: 10px;
}

#r24k-cartier-continent-title {
  font-family: "Cormorant Garamond", serif;
}
.uk-breadcrumb>*>* {
    color:var(--ink-soft);
}
.uk-breadcrumb>:last-child>a:not([href]), .uk-breadcrumb>:last-child>span {
    color: var(--terracotta-deep);
}
#r24k-cartier-destination-when:before,
.r24k-cartier-destination-type,
#r24k-cartier-single-destination-cities:before {
    background-color: #8F3F1E15 !important;
    color: var(--terracotta-deep);
}
.r24k-at-image-caption,
.r24k-at-slider li img {
    border-radius: 0 !important;
}
.uk-subnav>*>a:hover,
.uk-subnav>.uk-active>a {
    color: var(--terracotta-deep);
}
footer .uk-icon-button {
    background-color: var(--terracotta);
    border-radius: 0;
}
.uk-dropbar {
    background-color: var(--terracotta-deep);
}
.uk-navbar-toggle:hover, .uk-navbar-toggle[aria-expanded=true] {
    color: var(--terracotta-deep);
    padding-top: 20px;
}
.uk-navbar-right .uk-navbar-toggle {
    padding-top: 20px;
}
.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    background-color: var(--terracotta-deep) !important;
}
@media screen and (min-width: 800px) and (max-width: 1900px) {
  .uk-navbar-transparent .uk-navbar-center {
    margin-top: 132px !important;
  }
}

@media screen and (max-width: 1360px) {
  .uk-navbar-center {
    display: none !important;
  }
}
.uk-navbar-item .uk-subnav>*>:first-child {
    font-size: 13px;
    position: relative;
    top: -13px;
}
@media (max-width: 1360px) {
    .uk-navbar-toggle {
        display: inline-block;
    }
}
h3 .fa-fw {
    position: relative;
    top: 5px;
}