/**
 * Sticky Content Module
 *
 * Styles for template-parts/modules/sticky_content_module.php
**/

/* Override the global `section { overflow-x: hidden }` rule (base.css) —
   setting only overflow-x makes browsers compute overflow-y as `auto`,
   which turns this <section> into its own scroll container. That traps
   position:sticky below to that (non-scrolling) box instead of the
   viewport, so it never actually sticks. */
.sticky_content_module { padding: 70px 0 90px; overflow: visible; background-color: var(--farani-offwhite, #fffcfb); }

/* Deliberately NOT align-items: flex-start here — the row must keep
   Bootstrap's default `stretch`, so the shorter side columns are
   stretched to the height of the tallest (content) column. That extra
   height is exactly what gives position:sticky below "room" to travel
   within as the page scrolls; without it, a short column has nowhere
   to stick to and just scrolls away normally. Both columns already
   start flush with the top of the row regardless (stretch doesn't add
   top offset), so this doesn't affect top-alignment either. */

/* Sticky offset — clears the fixed header (see .hidden-height in header.css) */
.sticky-content__aside,
.sticky-content__form-wrap {
  position: sticky;
  top: 150px;
}

/* Scroll-triggered fade-in, aside from the left and the form column from
   the right — driven by an IntersectionObserver in main.js. The transform
   lives on the sticky element itself (not an ancestor), so it doesn't
   disturb the sticky positioning set above. Hidden state is gated on
   html.js-sticky-reveal-ready (added by main.js only once the observer is
   actually watching), so content never gets stuck invisible if JS fails
   to load. */
html.js-sticky-reveal-ready .sticky-content__aside {
  opacity: 0;
  transform: translateX(-56px);
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
}
html.js-sticky-reveal-ready .sticky-content__form-wrap {
  opacity: 0;
  transform: translateX(56px);
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
}
html.js-sticky-reveal-ready .sticky-content__aside.is-inview,
html.js-sticky-reveal-ready .sticky-content__form-wrap.is-inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js-sticky-reveal-ready .sticky-content__aside,
  html.js-sticky-reveal-ready .sticky-content__form-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Left nav */
.sticky-content__nav-label {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--farani-orange, #e95a3a);
  margin-bottom: 16px;
}

.sticky-content__nav ul {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.sticky-content__nav-link {
  display: block;
  font-family: var(--farani-body-font);
  font-size: 15px;
  color: var(--black);
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--farani-salmon-grey, #fff2ef);
  transition: var(--transition);
}
.sticky-content__nav-link:hover { color: var(--farani-burgundy, #401115); }
.sticky-content__nav-link.active {
  color: var(--farani-burgundy, #401115);
  font-weight: 500;
  border-left-color: var(--farani-orange, #e95a3a);
}

/* Callback CTA */
.sticky-content__callback {
  background: var(--farani-salmon-grey, #fff2ef);
  padding: 24px;
  margin-bottom: 50px;
}
.sticky-content__callback-heading {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 15px;
  color: var(--farani-burgundy, #401115);
  margin: 0 0 10px;
}
.sticky-content__callback-text {
  font-family: var(--farani-body-font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--farani-text-grey, #585858);
  margin: 0 0 18px;
}
.sticky-content__callback-btn {
  position: relative;
  z-index: 0;
  display: block;
  text-align: center;
  background: var(--farani-orange, #e95a3a);
  color: var(--white, #fff);
  border: 1px solid var(--farani-orange, #e95a3a);
  font-family: var(--farani-body-font);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 16px;
  overflow: hidden;
  transition: var(--transition);
}
/* Colour slide rollover — burgundy sweeps in from the left at a 45deg angle on hover */
.sticky-content__callback-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--farani-burgundy, #401115);
  transform: skewX(-45deg);
  transform-origin: top left;
  transition: width .4s ease;
  z-index: -1;
}
.sticky-content__callback-btn:hover::before { width: calc(100% + 50px); }

/* Content column */
.sticky-content__block {
  margin-bottom: 48px;
  /* Clears the fixed header on direct/native anchor-fragment navigation
     (e.g. a URL already containing #anchor on load). The "In This
     Article" nav's own click-to-scroll offset is handled in JS —
     see assets/js/main.js — since scroll-margin doesn't apply there. */
  scroll-margin-top: 150px;
}
.sticky-content__block:last-child { margin-bottom: 0; }

/* Optional bottom border break line — "Bottom Border" tick box per block (ACF) */
.sticky-content__block--border {
  padding-bottom: 48px;
  border-bottom: 1px solid var(--farani-salmon-dark, #F0C7BE);
}
.sticky-content__block--border:last-child { padding-bottom: 0; border-bottom: none; }

.sticky-content__block p {
  font-family: var(--farani-body-font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--black);
  margin-bottom: 20px;
}
.sticky-content__block p:last-child { margin-bottom: 0; }

.sticky-content__block-header {
  font-family: var(--farani-heading-font);
  font-weight: 400;
  font-size: 36px;
  letter-spacing:-0.72px;
  color: var(--farani-burgundy, #401115);
  margin-bottom: 16px;
}
.sticky-content__block h3 {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 22px;
  letter-spacing:-0.22px;
  color: var(--farani-burgundy, #401115);
  margin-bottom: 16px;
}

/* Blockquote — applies both to a manually-inserted <blockquote> inside a
   Standard Text WYSIWYG block, and the dedicated Quote block type. */
.sticky-content__block blockquote, .sticky-content__quote {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
  margin: 0;
  padding: 0 0 30px 0;
  border-bottom: 1px solid #DADADA;
}
.sticky-content__block blockquote::before, .sticky-content__quote::before {
  content: "\201C";
  order: 1;
  font-family: var(--farani-body-font);
  font-weight: 900;
  font-size: 65px;
  line-height: 1;
  color: var(--farani-orange, #e95a3a);
  position: relative;
  top: 13px;
}
.sticky-content__block blockquote::after,
.sticky-content__quote::after {
  content: "";
  order: 2;
  flex: 1 1 auto;
  height: 1px;
  background: var(--farani-orange, #e95a3a);
}
.sticky-content__block blockquote p,
.sticky-content__quote p {
  order: 3;
  flex: 1 1 100%;
  margin-top: 5px;
  font-family: var(--farani-body-font);
  font-style: italic;
  font-weight:500;
  font-size: 20px;
  line-height: 28px;
  color: var(--farani-burgundy, #401115);
}
.sticky-content__block blockquote cite,
.sticky-content__quote cite {
  order: 4;
  flex: 1 1 100%;
  display: block;
  margin-top: 16px;
  font-style: normal;
}
.sticky-content__quote-name {
  display: block;
  font-family: var(--farani-body-font);
  font-weight: 600;
  font-size: 16px;
  color: var(--farani-burgundy, #401115);
}
.sticky-content__quote-role {
  display: block;
  font-family: var(--farani-body-font);
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--farani-text-grey, #585858);
}

/* Two Boxes */
.sticky-content__boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.sticky-content__box {
  border: 1px solid #f0d9d4;
  padding: 24px;
}
p.sticky-content__box-eyebrow {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--farani-orange, #e95a3a);
  margin-bottom: 10px;
}
p.sticky-content__box-title {
  font-family: var(--farani-body-font);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: var(--farani-burgundy, #401115);
  margin-bottom: 12px;
  letter-spacing:-0.22px;
}
p.sticky-content__box-text {
  font-family: var(--farani-body-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--farani-text-grey, #585858);
  margin-bottom: 20px;
}
.sticky-content__box-link {
  position: relative;
  display: inline-block;
  font-family: var(--farani-body-font);
  font-weight: 700;
  font-size: 12px;
  color: var(--farani-burgundy, #401115);
  transition: var(--transition);
}
.sticky-content__box-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .3s ease;
}
.sticky-content__box-link:hover { color: var(--farani-orange, #e95a3a); }
.sticky-content__box-link:hover::after { width: 100%; }

/* Call Out Box */
.sticky-content__callout {
  background: var(--farani-salmon-grey, #fff2ef);
  padding: 40px;
}
p.sticky-content__callout-heading {
  font-family: var(--farani-heading-font);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: var(--farani-burgundy, #401115);
  margin-bottom: 16px;
}
.sticky-content__callout-text p {
  color: var(--farani-text-grey, #585858);
}

/* Video */
.sticky-content__video { margin: 0; background: #000; }
.sticky-content__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Image */
.sticky-content__image { margin: 0; }
.sticky-content__image img { width: 100%; height: auto; }
.sticky-content__image figcaption {
  font-family: var(--farani-body-font);
  font-size: 13px;
  color: var(--farani-text-grey, #585858);
  margin-top: 10px;
}

/* Offer Box */
.sticky-content__offer {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--farani-orange, #e95a3a);
}
.sticky-content__offer-left {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--farani-salmon-grey, #fff2ef);
}
.sticky-content__offer-left img { width: 100%; height: 100%; object-fit: cover; }
.sticky-content__offer-text {
  font-family: var(--farani-heading-font);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  color: var(--farani-orange, #e95a3a);
  text-align: center;
  margin: 0;
}
.sticky-content__offer-right {
  flex: 1 1 auto;
  padding: 32px;
}
.sticky-content__offer-right p {
  font-family: var(--farani-body-font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--farani-text-grey, #585858);
  margin: 0 0 16px;
}
.sticky-content__offer-right p:last-child { margin-bottom: 0; }
.sticky-content__offer-right strong { color: var(--farani-burgundy, #401115); }

/* Author box */
.sticky-content__author { margin-top: 48px; }
.sticky-content__author-line {
  font-family: var(--farani-body-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--black);
  margin: 0 0 24px;
}
.sticky-content__author-line a {
  color: var(--farani-burgundy, #401115);
  text-decoration: underline;
}
.sticky-content__author-line a:hover { color: var(--farani-orange, #e95a3a); }

.sticky-content__author-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(64, 17, 21, .12);
}
.sticky-content__author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sticky-content__author-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d9d9d9;
  color: #a3a3a3;
}
.sticky-content__author-details { display: flex; flex-direction: column; }
.sticky-content__author-name {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 15px;
  color: var(--farani-burgundy, #401115);
}
.sticky-content__author-role {
  font-family: var(--farani-body-font);
  font-size: 13px;
  color: var(--farani-orange, #e95a3a);
}

/* Sticky contact form column */
.sticky-content__form-wrap {
  border: 1px solid var(--farani-salmon-dark, #F0C7BE);
  background:transparent;
  padding: 32px;
}
.sticky-content__form-heading {
  font-family: var(--farani-heading-font);
  font-family: var(--farani-body-font);
  font-weight: 400;
  font-size: 22px;
  color: var(--farani-orange, #e95a3a);
  margin-bottom: 12px;
}
.sticky-content__form-intro {
  font-family: var(--farani-body-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--farani-text-grey, #585858);
  margin-bottom: 24px;
}
.sticky-content__form-notice {
  font-family: var(--farani-body-font);
  font-size: 13px;
  color: var(--farani-text-grey, #585858);
}

/* Generic styling for the embedded CF7 form */
.sticky-content__form input[type="text"],
.sticky-content__form input[type="email"],
.sticky-content__form input[type="tel"],
.sticky-content__form textarea,
.sticky-content__form select {
  width: 100%;
  background: var(--farani-salmon-grey, #fff2ef);
  border: none;
  padding: 14px 16px;
  font-family: var(--farani-body-font);
  font-size: 13px;
  color: var(--farani-text-grey, #585858);
  margin-bottom: 16px;
}
.sticky-content__form textarea { min-height: 110px; resize: vertical; }
.sticky-content__form label {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--farani-text-grey, #585858);
}
.sticky-content__form button[type="submit"],
.sticky-content__form input[type="submit"] {
  position: relative;
  z-index: 0;
  width: 100%;
  background: var(--farani-orange, #e95a3a);
  color: var(--white, #fff);
  border: none;
  padding: 15px 16px;
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 14px;
  transition: var(--transition);
  border:0px;
  text-transform:none;
  overflow: hidden;
}
/* Colour slide rollover — sweeps in from the right at a 45deg angle on hover */
.sticky-content__form button[type="submit"]::before,
.sticky-content__form input[type="submit"]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: var(--farani-burgundy, #401115);
  transform: skewX(45deg);
  transform-origin: top right;
  transition: width .4s ease;
  z-index: -1;
}
.sticky-content__form button[type="submit"]:hover::before,
.sticky-content__form input[type="submit"]:hover::before { width: calc(100% + 56px); }
.sticky-content__form .wpcf7-not-valid-tip { font-size: 12px; }

@media (max-width: 1536px) {

}

@media (max-width: 1366px) {

}

@media (max-width: 1280px) {

}

@media (max-width: 992px) {
  .sticky-content__aside,
  .sticky-content__form-wrap { position: static; }
  .sticky-content__nav { margin-bottom: 32px; }
  .sticky-content__form-wrap { margin-top: 60px;}
}

@media (max-width: 768px) {
  .sticky_content_module { padding: 48px 0 56px; }
  .sticky-content__block blockquote::before,
  .sticky-content__quote::before { font-size: 40px; }
  .sticky-content__boxes { grid-template-columns: 1fr; }
  .sticky-content__callout { padding: 28px; }
  .sticky-content__offer { flex-direction: column; }
  .sticky-content__offer-left { padding: 24px; }
  .sticky-content__offer-right { padding: 24px; }
}

@media (max-width: 600px) {
  .sticky-content__form-wrap { padding: 24px; }
}