/* TC-WO-13 WPBakery layer: the stock elements Total's were converted to (lean templates in inc/wpbakery/templates)
   and the Coffee dropdowns' classes (inc/wpbakery/params.php). Breakpoints follow Total's: 1024 tablet landscape,
   959 tablet portrait / mobile menu, 767 phone landscape, 479 phone portrait. Colours are tokens. */

/* ---- WPBakery rows and columns: Total's spacing (no extra bottom margin on rows and elements) ------------- */
/* WPBakery rows run 15px past the 95% container on each side; on phones that is wider than the screen. Clip
   sideways only (no scroll container, so nothing sticky or vertical changes). */
.tc-main,
.wpb-content--blank { /* WPBakery's own "blank" layout (posts 780, 816) has no theme wrapper */
  overflow-x: clip;
}
.tc-entry__content .wpb_row,
.tc-entry__content .vc_row.wpb_row {
  margin-bottom: 0;
}
.tc-entry__content .vc_row.vc_row-has-fill:not(.vc_inner):not([data-vc-full-width]) {
  margin-right: 0;
  margin-left: 0; /* Total: rows with a background sit flush with the container */
}
.tc-entry__content .wpb_content_element,
.tc-entry__content .wpb_text_column {
  margin-bottom: 20px;
}
.tc-entry__content .wpb_wrapper > :last-child,
.tc-entry__content .wpb_text_column :last-child {
  margin-bottom: 0;
}
.tc-cols-reverse {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .tc-cols-reverse {
    flex-direction: row-reverse;
  }
}
.tc-hidden {
  display: none !important;
}
@media (max-width: 959px) {
  .tc-show-desktop {
    display: none !important;
  }
}
@media (min-width: 960px) {
  .tc-show-phone,
  .tc-hide-desktop {
    display: none !important;
  }
}
.tc-minh-500 > .vc_column-inner { min-height: 500px; }
.tc-minh-600 > .vc_column-inner { min-height: 600px; }

/* Row photo: the page's featured image, and the Coffee "Photo overlay". */
.tc-bg-featured,
.tc-bg-featured > .vc_column-inner {
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat;
}
.vc_row.tc-bg-left-center { background-position: left center !important; }
.vc_row.tc-bg-center-bottom { background-position: center bottom !important; }
.wpb_column.tc-bg-center > .vc_column-inner { background-position: center center !important; }
.tc-shade {
  position: relative;
  isolation: isolate;
}
.tc-shade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--c-black) 45%, transparent);
}
.tc-shade--dark-10::before {
  background: color-mix(in srgb, var(--c-black) 10%, transparent);
}
.tc-text-white,
.tc-text-white :is(h1, h2, h3, h4, h5, h6, p, li, a:not(.tc-button)) {
  color: var(--c-white);
}

/* ---- Heading (vc_custom_heading → .tc-heading) ----------------------------------------------------------- */
.tc-heading {
  margin: 0;
  color: var(--color-text-1);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1875rem + 1vw, 1.75rem);
  line-height: 1.2;
}
.tc-heading--center { text-align: center; }
.tc-heading--right { text-align: right; }
.tc-heading a { color: inherit; }
.tc-heading.tc-condensed { font-family: var(--font-condensed); font-weight: 900; line-height: 1; }
.tc-heading.tc-condensed-light { font-family: var(--font-condensed); font-weight: 400; line-height: 0.9; }
.tc-heading.tc-extended { font-family: var(--font-extended); font-weight: 700; line-height: 1.1; }
.tc-heading.tc-obviously { font-family: var(--font-heading); font-weight: 700; }
.tc-heading.tc-elza { font-family: var(--font-body); font-weight: 400; line-height: 1; }
.tc-heading.tc-myriad { font-family: var(--font-myriad); font-weight: 700; line-height: 1.2; }
.tc-caps { text-transform: uppercase; }
.tc-heading.tc-tight { line-height: 0.9; }
.tc-heading.tc-lh-auto { line-height: 1.2; } /* Total headings with no line height of their own */
.tc-italic { font-style: italic; }
.tc-font-myriad { font-family: var(--font-myriad); }

/* Sizes: desktop / tablet (≤959) / phone (≤479), Total's responsive values rounded to one scale. */
.tc-size-sm { font-size: 34px; }
.tc-size-md { font-size: 48px; }
.tc-size-lg { font-size: 60px; }
.tc-size-xl { font-size: 80px; }
.tc-size-xxl { font-size: 90px; }
.tc-size-xxxl { font-size: 120px; }
.tc-size-huge { font-size: 150px; }
.tc-size-giant { font-size: 200px; }
@media (max-width: 959px) {
  .tc-size-md { font-size: 40px; }
  .tc-size-lg { font-size: 45px; }
  .tc-size-xl { font-size: 60px; }
  .tc-size-xxl { font-size: 65px; }
  .tc-size-xxxl { font-size: 100px; }
  .tc-size-huge { font-size: 110px; }
  .tc-size-giant { font-size: 120px; }
}
@media (max-width: 479px) {
  .tc-size-sm { font-size: 26px; }
  .tc-size-md { font-size: 28px; }
  .tc-size-lg { font-size: 32px; }
  .tc-size-xl { font-size: 42px; }
  .tc-size-xxl { font-size: 50px; }
  .tc-size-xxxl { font-size: 64px; }
  .tc-size-huge { font-size: 80px; }
  .tc-size-giant { font-size: 80px; }
}
.tc-heading.tc-color-white,
.tc-color-white,
.tc-color-white :is(p, li, h1, h2, h3, h4) { color: var(--c-white); }
.tc-heading.tc-color-ink,
.tc-color-ink,
.tc-color-ink :is(p, li, h1, h2, h3, h4) { color: var(--c-black); }
.tc-heading.tc-color-orange,
.tc-color-orange { color: var(--tc-orange); }
.tc-color-red { color: var(--c-hue-d62e0a); }

/* Narrower headings and the side rule (was Total's "side border" heading). */
.tc-w-half { max-width: 50%; }
.tc-w-500 { max-width: 500px; }
.tc-w-850 { max-width: 850px; }
@media (max-width: 767px) {
  .tc-w-half { max-width: 100%; }
}
.tc-heading.tc-side-line {
  display: flex;
  align-items: center;
}
.tc-heading__line {
  flex: 1 1 auto;
  height: 0;
  margin-left: 15px;
  border-bottom: 3px solid currentColor;
}

/* Text Block sizes and alignment. */
.tc-text-sm { font-size: 13px; }
.tc-text-md { font-size: 17px; }
.tc-text-lg { font-size: clamp(1.125rem, 0.9688rem + 0.5vw, 1.25rem); }
.tc-text-xl { font-size: 24px; }
@media (max-width: 959px) {
  .tc-text-lg { font-size: 17px; }
}
.tc-align-center { text-align: center; }
.tc-align-right { text-align: right; }

/* ---- Buttons (vc_btn → a.tc-button; base look in chrome.css, pills in tuneup.css) ------------------------- */
.tc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.tc-button__inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
span.tc-btn-wrap { display: inline-block; } /* inline button with Design Options spacing */
.tc-btn-wrap--center { text-align: center; }
.tc-btn-wrap--right { text-align: right; }
.tc-btn-wrap--center + .tc-btn-wrap--center { margin-top: 10px; }
.tc-button.tc-button-ink {
  background: var(--c-black);
  color: var(--c-white);
}
.tc-button.tc-button-ink:hover { background: var(--tc-orange); }
.tc-button.tc-button-wide {
  width: 350px;
  max-width: 100%;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}
@media (max-width: 767px) {
  .tc-button.tc-button-wide { width: 100%; }
}
/* Two wide buttons in a row sit side by side when the column has room (was Total's Multi-Buttons). */
.wpb_wrapper:has(> .tc-btn-wrap--center > .tc-button-wide) {
  container-type: inline-size;
}
@container (min-width: 720px) {
  .tc-btn-wrap--center:has(> .tc-button-wide):has(+ .tc-btn-wrap--center > .tc-button-wide) {
    display: inline-block;
    width: 50%;
    padding-right: 5px;
    text-align: right;
  }
  .tc-btn-wrap--center:has(> .tc-button-wide) + .tc-btn-wrap--center:has(> .tc-button-wide) {
    display: inline-block;
    width: 50%;
    margin-top: 0;
    padding-left: 5px;
    text-align: left;
  }
}
.tc-button.tc-block,
.tc-button.tc-block-yellow {
  display: flex;
  width: 100%;
  padding: 0.5em 1em;
  font-size: 22px;
}
.tc-button.tc-block-yellow {
  border-radius: 0;
  background: var(--c-yellow);
  color: var(--c-black);
  font-family: var(--font-myriad);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tc-button.tc-text-link {
  padding: 0 25px;
  background: none;
  color: var(--c-white);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tc-button.tc-text-link:hover { background: none; text-decoration: underline; }
.tc-button__icon .tc-icon svg { vertical-align: middle; }

/* ---- Spacing, images, dividers ---------------------------------------------------------------------------- */
@media (max-width: 959px) {
  .tc-space-250 { height: 150px !important; }
}
@media (max-width: 479px) {
  .tc-space-250 { height: 75px !important; }
  .tc-space-50-0 { height: 0 !important; }
}
.wpb_single_image.tc-rounded img,
.tc-gallery.tc-rounded img { border-radius: 10px; }
.wpb_single_image.tc-w-400 .vc_single_image-wrapper { max-width: 400px; }
.wpb_single_image.tc-img-h-283 img { height: 283px; width: auto; object-fit: cover; }
.wpb_single_image.tc-img-h-500 img { height: 500px; width: auto; object-fit: scale-down; }
.vc_separator.tc-dots .vc_sep_line { border: 0 !important; }
.vc_separator.tc-dots::before {
  content: "\2022\00a0\00a0\2022\00a0\00a0\2022";
  display: block;
  width: 100%;
  color: var(--color-text-1);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
}

/* ---- Gallery grid (vc_gallery "Image grid", lean template): masonry by CSS columns; "tc-gallery--rows" = even
   rows of square crops (Total's default grid); gap 20px, "tc-gallery--gap-1" = 1px ------------------------------ */
.tc-gallery {
  --tc-gallery-gap: 20px;
}
.tc-gallery--gap-1 {
  --tc-gallery-gap: 1px;
}
.tc-gallery__grid {
  columns: 3;
  column-gap: var(--tc-gallery-gap);
}
.tc-gallery--cols-2 .tc-gallery__grid { columns: 2; }
.tc-gallery--cols-4 .tc-gallery__grid { columns: 4; }
.tc-gallery--cols-5 .tc-gallery__grid { columns: 5; }
.tc-gallery--cols-6 .tc-gallery__grid { columns: 6; }
@media (max-width: 767px) {
  .tc-gallery .tc-gallery__grid { columns: 2; }
  .tc-gallery--rows[class] .tc-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tc-gallery__item {
  margin: 0 0 var(--tc-gallery-gap);
  break-inside: avoid;
}
.tc-gallery--rows .tc-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tc-gallery-gap);
}
.tc-gallery--rows.tc-gallery--cols-2 .tc-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tc-gallery--rows.tc-gallery--cols-4 .tc-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tc-gallery--rows.tc-gallery--cols-5 .tc-gallery__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tc-gallery--rows.tc-gallery--cols-6 .tc-gallery__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tc-gallery--rows .tc-gallery__item { margin: 0; }
.tc-gallery--rows .tc-gallery__img {
  aspect-ratio: 1;
  object-fit: cover;
}
.tc-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
}
.tc-gallery .wpb_gallery_heading { margin-bottom: 15px; }

/* ---- Video -------------------------------------------------------------------------------------------------- */
.tc-video__player {
  display: block;
  width: 100%;
  height: auto;
  background: var(--c-black);
}
.tc-video-portrait { max-width: 40%; margin-right: auto; margin-left: auto; }
@media (max-width: 767px) {
  .tc-video-portrait { max-width: 100%; }
}

/* ---- Accordion (vc_tta_accordion, Coffee style "Coffee questions"; was Total's toggles) ---------------------- */
.tc-toggles .vc_tta-panel-heading {
  border: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  background: none !important;
}
.tc-toggles .vc_tta-panel-title > a {
  padding: 14px 0 14px 28px !important;
  color: var(--c-hue-33332f) !important;
  font-family: var(--font-myriad);
  font-weight: 600;
  font-size: 16px;
}
.tc-toggles .vc_tta-panel-body {
  padding: 15px 0 !important;
  border: 0 !important;
  background: none !important;
}
.tc-toggles .vc_tta-controls-icon { left: 0 !important; right: auto !important; }

/* ---- Latest updates (tc_updates) ------------------------------------------------------------------------- */
.tc-updates { margin-bottom: 20px; }

/* ---- Lightbox (assets/lightbox.js) --------------------------------------------------------------------------- */
html.tc-lightbox-open { overflow: hidden; }
.tc-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.tc-lightbox::backdrop {
  background: color-mix(in srgb, var(--c-black) 88%, transparent);
}
.tc-lightbox__body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60px 16px;
  pointer-events: none;
}
.tc-lightbox__body > * { pointer-events: auto; }
.tc-lightbox__body img,
.tc-lightbox__body video {
  max-width: 100%;
  max-height: 100%;
}
.tc-lightbox--video .tc-lightbox__body iframe {
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
.tc-lightbox--inline .tc-lightbox__body > * {
  max-width: 900px;
  max-height: 100%;
  overflow: auto;
  padding: 30px;
  background: var(--c-white);
}
.tc-lightbox__close,
.tc-lightbox__nav {
  position: fixed;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  color: var(--c-white);
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}
.tc-lightbox__close { top: 8px; right: 8px; }
.tc-lightbox__nav { top: 50%; display: none; transform: translateY(-50%); }
.tc-lightbox--group .tc-lightbox__nav { display: block; }
.tc-lightbox__nav--prev { left: 8px; }
.tc-lightbox__nav--next { right: 8px; }
