/* Rules Webflow adds on its own hosting but leaves out of the code export */
.w-dyn-hide, .w-dyn-bind-empty, .w-condition-invisible { display: none !important; }
.w-dyn-empty { background-color: #ddd; padding: 10px; }

.netlify-form { margin: 0 0 15px; }

/* Consistent page margins.
   Most content sits in .hero-slider-content at 80% width (a 10% margin each side),
   and 5% each side on phones. These bring the pieces that ran wider into line. */
@media screen and (min-width: 480px) {
  .hero-slider-content.contact.contatpage { width: 80%; }

  .free-plan-container > .products-list-wrapper,
  .course-list-heading { width: 80%; margin-left: auto; margin-right: auto; }
}

/* Course cards (src/_includes/course-cards.njk).
   Two or more show in a grid; a single card (on a course page) is centred at the same size.
   Every image is cropped to the same 4:3 shape. */
@media screen and (max-width: 479px) {
  .free-plan-container > .products-list-wrapper,
  .course-list-heading { width: 90%; margin-left: auto; margin-right: auto; }
}

.course-list-heading { align-self: center; margin-bottom: 24px; }

.product-list.course-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  justify-items: stretch;
  align-items: stretch;
  width: 100%;
  margin-top: 0;
}
.product-list.course-list--single { grid-template-columns: 1fr; }

.course-card-item { align-items: stretch; }

.product-card.course-card {
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  background-color: var(--white);
  border-radius: 16px;
  box-shadow: 0 1px 2px #0811580a, 0 8px 24px #0811580f;
  color: inherit;
  text-decoration: none;
  transition: transform .5s cubic-bezier(.23, 1, .32, 1), box-shadow .5s;
}
.product-card.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px #0811580d, 0 18px 40px #0811581a;
}

.course-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--white-smoke);
}
.course-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.23, 1, .32, 1);
}
.course-card:hover .course-card__image { transform: scale(1.04); }

.course-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 36px;
}

.course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0 0 16px;
}
.course-card__meta dt {
  color: var(--textgrey);
  margin-bottom: 4px;
  font-family: Arvo, serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 1.2;
  text-transform: uppercase;
}
.course-card__meta dd {
  color: #555;
  margin: 0;
  font-family: Arvo, serif;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1.3;
  text-transform: uppercase;
}

.course-card__title {
  color: var(--sage);
  margin: 0 0 12px;
  font-family: Arvo, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
}

.course-card__text {
  color: var(--textgrey);
  margin: 0 0 24px;
  font-family: Sato, sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

.course-card__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sage);
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #b2ac8859;
  font-family: Red Hat Display, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.course-card__cta::after {
  content: "\2192";
  font-size: 16px;
  transition: transform .5s cubic-bezier(.23, 1, .32, 1);
}
.course-card:hover .course-card__cta::after { transform: translateX(6px); }

@media screen and (min-width: 768px) {
  /* A single card is the same size as one card in a pair, so the image matches */
  .product-list.course-list--single { grid-template-columns: minmax(0, calc(50% - 16px)); justify-content: center; }
  .course-list-heading { text-align: center; }
}

@media screen and (max-width: 767px) {
  .product-list.course-list { grid-template-columns: 1fr; gap: 24px; }
}

@media screen and (max-width: 479px) {
  .product-card.course-card:hover { transform: none; }
  .course-card__body { padding: 24px; }
  .course-card__title { font-size: 24px; }
}

/* ------------------------------------------------------------------
   Type scale
   One set of sizes for the whole site. Sizes scale smoothly between
   phone and desktop, so they need no breakpoints.
     Arvo            headings, labels, buttons, navigation
     Red Hat Display everything you read
   Selectors match or beat the Webflow ones they replace, including the
   ones inside Webflow's media queries.
   ------------------------------------------------------------------ */
:root {
  --font-heading: Arvo, Georgia, serif;
  --font-body: "Red Hat Display", sans-serif;

  --fs-display: clamp(30px, 1.6vw + 22px, 44px); /* page titles */
  --fs-h2: clamp(24px, 0.9vw + 19px, 32px);      /* section headings */
  --fs-h3: clamp(20px, 0.45vw + 17px, 24px);     /* card titles, sub-headings */
  --fs-h4: 18px;                                 /* small headings in long text */
  --fs-lead: clamp(18px, 0.3vw + 16px, 21px);    /* intros under a title */
  --fs-body: 17px;                               /* long reading text */
  --fs-text: 16px;                               /* short text blocks */
  --fs-small: 15px;                              /* cards, footer links */
  --fs-label: 13px;                              /* eyebrows, buttons */
  --fs-tiny: 11px;                               /* fine print */

  --measure: 720px;                              /* comfortable reading width */
}

/* Display: one title per page */
.heading1specialabout,
.heading1specialabout.hptext,
.heading1specialabout.hptext.main,
h1.heading1specialabout.wellness,
.heading-2,
.paragraph-2.header.candle.mobile,
.utility-page-content h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}

/* Section headings */
.heading-14 {
  text-wrap: balance;
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.25;
}

/* Sub-headings */
.heading-8.scentheader,
.w-richtext h2,
.w-richtext h3,
.w-richtext h4 {
  color: var(--sage);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.3;
}
.w-richtext h2, .w-richtext h3, .w-richtext h4 { margin: 48px 0 16px; }

.w-richtext h5,
.w-richtext h6,
.w-richtext h5 strong,
.w-richtext h6 strong {
  color: #555;
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.35;
}
.w-richtext h5, .w-richtext h6 { margin: 28px 0 8px; }

.contact-link {
  font-size: var(--fs-h3);
  line-height: 1.5;
}

/* Lead: the intro under a title */
.big-paragraph,
.big-paragraph.max-500,
.big-paragraph.max-500.right,
.big-paragraph.max-500.below,
.big-paragraph.max-500.toppara.yogamob,
.big-paragraph.max-500.mobdesc1,
.big-paragraph.max-350 {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.6;
}
p.heading1specialabout.wellness,
.slidertestimonial {
  font-family: var(--font-heading);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.6;
}

/* Candle price */
.big-paragraph.max-500 strong { font-size: var(--fs-h3); }

/* Long reading text (About, Studio and course pages) */
.big-paragraph.max-800.no-margin,
.w-richtext p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
}
.big-paragraph.max-800.no-margin { max-width: var(--measure); }
.w-richtext p { margin-bottom: 16px; }

/* Short text blocks */
.paragraph-2,
.paragraph-2.candledesc,
.paragraph-3,
.paragraph.candlehowtouse {
  font-family: var(--font-body);
  font-size: var(--fs-text);
  line-height: 1.75;
}
.list-item {
  font-family: var(--font-body);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: 1.9;
}

.course-card__text { font-family: var(--font-body); font-size: var(--fs-small); }
.course-card__title { font-size: var(--fs-h3); }

/* Labels and buttons */
.label._30-margin,
.label._15-margin,
.course-card__cta {
  font-family: var(--font-heading);
  font-size: var(--fs-label);
  letter-spacing: 2px;
}
.button.w-button {
  font-family: var(--font-heading);
  font-size: var(--fs-label);
  letter-spacing: 2px;
}
.course-card__meta dt { font-size: var(--fs-tiny); }


/* ------------------------------------------------------------------
   Course pages: keep the reading column narrow and centred
   ------------------------------------------------------------------ */
.column.coursepage > p,
.column.coursepage > .label,
.column.coursepage > .big-paragraph.max-500.toppara.yogamob,
.column.coursepage > .big-paragraph.max-500.mobdesc1 {
  width: 100%;
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.longdecdiv .big-paragraph.max-800.no-margin {
  width: 90%;
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

/* Candles page intro: same reading column */
.column.candles > p {
  width: 100%;
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 479px) {
  .column.candles > p { width: 90%; }
}

/* ------------------------------------------------------------------
   Footer (src/_includes/footer.njk)
   A deeper shade of the brand sage, so light text reads clearly.
   ------------------------------------------------------------------ */
.section.footer-section.site-footer {
  --footer-bg: #5f5c48;
  --footer-text: #f4f1e4;
  --footer-muted: #d9d5c0;
  --footer-line: #f4f1e426;

  background-color: var(--footer-bg);
  color: var(--footer-text);
  padding: 72px 0 0;
}

.site-footer__inner { width: 80%; margin: 0 auto; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 56px;
}

.site-footer a { color: var(--footer-text); text-decoration: none; transition: color .3s, opacity .3s; }
.site-footer a:hover { color: #fff; }

.site-footer__logo { display: inline-block; margin-bottom: 20px; }
.site-footer__logo img { display: block; width: 116px; height: auto; }

.site-footer__tagline {
  color: var(--footer-muted);
  max-width: 300px;
  margin: 0 0 24px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
}
.site-footer__social img {
  width: 20px;
  height: 20px;
  padding: 8px;
  box-sizing: content-box;
  border: 1px solid var(--footer-line);
  border-radius: 50%;
  transition: border-color .3s;
}
.site-footer__social:hover img { border-color: var(--footer-text); }

.site-footer__heading {
  color: var(--footer-muted);
  margin: 6px 0 20px;
  font-family: var(--font-heading);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1.4;
  text-transform: uppercase;
}

.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: 10px; }
.site-footer__list a,
.site-footer__address {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.site-footer__list a { overflow-wrap: anywhere; }

.site-footer__address {
  color: var(--footer-muted);
  margin: 16px 0 24px;
  font-style: normal;
}

.site-footer a.site-footer__button {
  display: inline-block;
  color: var(--footer-bg);
  background-color: var(--footer-text);
  border-radius: 4px;
  padding: 12px 22px;
  font-family: var(--font-heading);
  font-size: var(--fs-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background-color .3s;
}
.site-footer a.site-footer__button:hover { background-color: #fff; color: var(--footer-bg); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid var(--footer-line);
  padding: 24px 0 28px;
}
.site-footer__bottom p {
  color: var(--footer-muted);
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
}
.site-footer__bottom a { color: var(--footer-muted); }

@media screen and (max-width: 991px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
}

@media screen and (max-width: 479px) {
  .section.footer-section.site-footer { padding-top: 48px; }
  .site-footer__inner { width: 90%; }
  .site-footer__grid { gap: 36px 24px; padding-bottom: 40px; }
  .site-footer__brand, .site-footer__contact { grid-column: 1 / -1; }
  .site-footer__bottom { flex-direction: column; }
}

/* ------------------------------------------------------------------
   Testimonials slider (home page)
   The Webflow slider still drives it; this only restyles it.
   ------------------------------------------------------------------ */
.toplandingsection.mid.testimonials-section {
  background-image: linear-gradient(#2a241c73, #2a241c8c), url('../images/_R6B0271-1-1.jpg');
  background-position: 50%;
  background-size: cover;
  height: auto;
  max-height: none;
  padding: 104px 0;
}

.landingpagetopdiv.testimonials-card {
  width: 90%;
  max-width: 760px;
  background-color: #faf8f2f5;
  border-radius: 16px;
  box-shadow: 0 24px 60px #0000002e;
  padding: 48px 72px 36px;
  text-align: center;
}

.testimonials-card__mark {
  display: block;
  width: 40px;
  height: auto;
  margin: 0 auto 16px;
}
.testimonials-card__eyebrow {
  color: var(--sage);
  margin-bottom: 28px;
  font-family: var(--font-heading);
  font-size: var(--fs-label);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Size the slider to its tallest quote, so nothing overlaps and the card does not jump */
.testimonials-card .slider-4.w-slider {
  height: auto;
  background: none;
}
.testimonials-card .w-slide { vertical-align: middle; }

.testimonials-card .slidertestimonialdiv { display: block; height: auto; }
.testimonials-card .slidertestimonial {
  display: block;
  width: 100%;
  max-width: 560px;
  color: #5a5a5a;
  margin: 0 auto;
  padding: 0;
  font-family: var(--font-heading);
  font-size: clamp(18px, 0.35vw + 16px, 21px);
  font-weight: 400;
  line-height: 1.65;
  text-wrap: pretty;
}

/* Dots */
.testimonials-card .w-slider-nav {
  position: static;
  height: auto;
  padding-top: 32px;
  font-size: 8px;
  line-height: 1;
}
.testimonials-card .w-slider-dot {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--sage);
  transition: background-color .3s, transform .3s;
}
.testimonials-card .w-slider-dot.w-active { background-color: var(--sage); transform: scale(1.15); }
.testimonials-card .w-slider-dot:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

/* Arrows: a thin chevron at each side of the quote */
.testimonials-card .w-slider-arrow-left,
.testimonials-card .w-slider-arrow-right {
  width: 44px;
  bottom: 40px;
  opacity: .55;
  transition: opacity .3s;
}
.testimonials-card .w-slider-arrow-left { left: -56px; }
.testimonials-card .w-slider-arrow-right { right: -56px; }
.testimonials-card .w-slider-arrow-left:hover,
.testimonials-card .w-slider-arrow-right:hover { opacity: 1; }
.testimonials-card .w-slider-arrow-left::before,
.testimonials-card .w-slider-arrow-right::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 1.5px solid var(--sage);
  border-left: 1.5px solid var(--sage);
}
.testimonials-card .w-slider-arrow-left::before { transform: translate(-30%, -50%) rotate(-45deg); }
.testimonials-card .w-slider-arrow-right::before { transform: translate(-70%, -50%) rotate(135deg); }

@media screen and (max-width: 767px) {
  .toplandingsection.mid.testimonials-section { padding: 64px 0; background-attachment: scroll; }
  .landingpagetopdiv.testimonials-card { padding: 40px 28px 28px; }
  .testimonials-card .w-slider-arrow-left,
  .testimonials-card .w-slider-arrow-right { display: none; }
}

/* Course pages with `imageRatio` set: every photo at one width and crop */
.course-uniform-images .main-prod-image,
.course-uniform-images .second-image,
.course-uniform-images .course-inline-image {
  display: block;
  width: min(560px, 90%);
  height: auto;
  aspect-ratio: var(--course-image-ratio);
  object-fit: cover;
  border-radius: 12px;
  margin-left: auto;
  margin-right: auto;
}
.w-richtext img.course-inline-image {
  width: min(560px, 100%);
  margin-top: 48px;
  margin-bottom: 8px;
}
/* The hero sits in a column that is already inset on phones */
.course-uniform-images .column.coursepage .main-prod-image { width: min(560px, 100%); }