/* Finest Coffee & Tea — Legal/info page template (Terms, Delivery, Refund & Returns, Privacy).
   Shared "fct-legal" design: espresso hero band + carded, readable on-brand layout.
   Typography matches the site: Montserrat throughout. Decorative photos dropped; consistent box padding.
   Enqueued from functions.php on the 4 legal pages only; hero band injected by JS in wp_footer. (AFB) */

/* Finest Coffee & Tea — legal/info page template (Direction B: Branded Hero + Card) */

body.fct-legal {
  background: #f7f1e8 !important;
  color: #3a2f26 !important;
  font-family: "Montserrat", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

body.fct-legal main {
  display: block;
  background: #f7f1e8 !important;
  padding: 0 !important;
}

/* ---------- Full-bleed espresso hero (injected) ---------- */
body.fct-legal .fct-legal-hero {
  width: 100%;
  box-sizing: border-box;
  background: #2b231c;
  color: #fbf8f3;
  text-align: center;
  padding: 76px 24px 66px;
  position: relative;
}

body.fct-legal .fct-legal-hero::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 22px auto 0;
  background: #c8a35a;
  border-radius: 2px;
}

body.fct-legal .fct-legal-hero__title {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 700;
  color: #fbf8f3;
  font-size: clamp(1.9rem, 4.2vw, 2.85rem);
  line-height: 1.18;
  letter-spacing: 0;
  margin: 0;
}

body.fct-legal .fct-legal-hero__crumb {
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #c8a35a;
  margin: 0 0 18px;
}

body.fct-legal .fct-legal-hero__crumb span {
  color: #a99274;
}

/* Hide only the page-title h1 in the first row once the hero is injected;
   section h1s in later rows stay as headings */
body.fct-legal.fct-hero-active .cms-rows > div:first-child h1:first-of-type {
  display: none !important;
}

/* ---------- The floating white card ---------- */
body.fct-legal .cms-rows {
  max-width: 900px;
  margin: -34px auto 72px !important;
  padding: 0 24px !important;
  position: relative;
  z-index: 2;
}

body.fct-legal .cms-rows > div {
  background: #fffdf9 !important;
  border: 1px solid #e9dfd0 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 44px rgba(43, 35, 28, 0.12) !important;
  overflow: hidden;
  margin-bottom: 26px !important;
}

body.fct-legal .cms-rows .container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Beat the .text-center on the container: reading copy is left-aligned */
body.fct-legal .cms-rows .container.text-center,
body.fct-legal .cms-rows .text-center {
  text-align: left !important;
}

body.fct-legal .cms-rows .row {
  margin: 0 !important;
}

body.fct-legal .cms-rows .col-12 {
  padding: 44px 52px 48px !important;
  background: transparent !important;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Reset scoped/inline background + colour ---------- */
body.fct-legal .cms-rows [class*="cms-text-center"],
body.fct-legal .cms-rows [class*="cms-text-with-image"] {
  background: #fffdf9 !important;
}

/* ---------- Page title (any subsequent h1 demoted to a section heading) ---------- */
body.fct-legal .cms-rows .col-12 h1 {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #2b231c !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  line-height: 1.3 !important;
  text-align: left !important;
  margin: 40px 0 14px !important;
  padding-left: 16px !important;
  border-left: 3px solid #c8a35a !important;
}

/* First content h1 (when no hero is present) reads as the page masthead */
body.fct-legal:not(.fct-hero-active) .cms-rows .col-12 h1:first-of-type {
  font-size: clamp(1.7rem, 4vw, 2.4rem) !important;
  text-align: center !important;
  border-left: 0 !important;
  padding-left: 0 !important;
  margin: 8px 0 6px !important;
}

body.fct-legal:not(.fct-hero-active) .cms-rows .col-12 h1:first-of-type::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 20px auto 8px;
  background: #c8a35a;
  border-radius: 2px;
}

/* ---------- Unified section headings: h2, h3, h4 (and demoted h1s) ---------- */
body.fct-legal .cms-rows .col-12 h2,
body.fct-legal .cms-rows .col-12 h3,
body.fct-legal .cms-rows .col-12 h4 {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #2b231c !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  margin: 38px 0 14px !important;
  padding-left: 16px !important;
  border-left: 3px solid #c8a35a !important;
}

body.fct-legal .cms-rows .col-12 h2:first-child,
body.fct-legal .cms-rows .col-12 h3:first-child,
body.fct-legal .cms-rows .col-12 h4:first-child {
  margin-top: 6px !important;
}

/* ---------- Body copy ---------- */
body.fct-legal .cms-rows .col-12 p {
  font-family: "Montserrat", sans-serif !important;
  color: #3a2f26 !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  text-align: left !important;
  margin: 0 0 18px !important;
}

body.fct-legal .cms-rows .col-12 strong,
body.fct-legal .cms-rows .col-12 b {
  color: #2b231c !important;
  font-weight: 700 !important;
}

body.fct-legal .cms-rows .col-12 small {
  color: #6b5d4f !important;
  font-size: 0.85rem !important;
}

/* ---------- Links ---------- */
body.fct-legal .cms-rows a,
body.fct-legal .cms-rows .col-12 a {
  color: #9a6a2f !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(200, 163, 90, 0.6) !important;
  transition: color 0.18s ease;
}

body.fct-legal .cms-rows a:hover,
body.fct-legal .cms-rows .col-12 a:hover {
  color: #2b231c !important;
  text-decoration-color: #2b231c !important;
}

/* ---------- Lists: gold tick, clean spacing ---------- */
body.fct-legal .cms-rows .col-12 ul {
  list-style: none !important;
  margin: 6px 0 22px !important;
  padding: 0 !important;
  text-align: left !important;
}

body.fct-legal .cms-rows .col-12 ul li {
  list-style: none !important;
  position: relative !important;
  padding-left: 30px !important;
  margin: 0 0 12px !important;
  font-family: "Montserrat", sans-serif !important;
  color: #3a2f26 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  text-align: left !important;
}

body.fct-legal .cms-rows .col-12 ul li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.05em !important;
  color: #c8a35a !important;
  font-weight: 700 !important;
  font-size: 0.95em !important;
  line-height: 1.7 !important;
}

/* Ordered lists keep numbers but in gold */
body.fct-legal .cms-rows .col-12 ol {
  margin: 6px 0 22px !important;
  padding-left: 22px !important;
  text-align: left !important;
}

body.fct-legal .cms-rows .col-12 ol li {
  color: #3a2f26 !important;
  font-family: "Montserrat", sans-serif !important;
  line-height: 1.7 !important;
  margin: 0 0 12px !important;
  padding-left: 6px !important;
  text-align: left !important;
}

body.fct-legal .cms-rows .col-12 ol li::marker {
  color: #9a6a2f !important;
  font-weight: 700 !important;
}

/* ---------- Neutralise AI-paste junk article ---------- */
body.fct-legal .cms-rows article.text-token-text-primary,
body.fct-legal .cms-rows article[class*="text-token"] {
  all: unset !important;
  display: block !important;
  font-family: "Montserrat", sans-serif !important;
  color: #3a2f26 !important;
  width: auto !important;
  max-width: 100% !important;
}

body.fct-legal .cms-rows article[class*="text-token"] p,
body.fct-legal .cms-rows article[class*="text-token"] li {
  font-family: "Montserrat", sans-serif !important;
  color: #3a2f26 !important;
  line-height: 1.75 !important;
  text-align: left !important;
}

/* ---------- Text + image rows: stack into one clean column ----------
   The legal copy is far taller than the image, so a 50/50 split leaves a
   dead half-column. Stack instead: image as a contained banner on top,
   full-width reading copy below. */
body.fct-legal .cms-rows [class*="cms-text-with-image"] .row {
  display: block !important;
  padding: 0 !important;
}

/* Scrap the decorative coffee photos on the legal pages: drop the image column
   and any image, leaving a single clean text column. */
body.fct-legal .cms-rows [class*="cms-text-with-image"] .col-md-6:has(img),
body.fct-legal .cms-rows [class*="cms-text-with-image"] img {
  display: none !important;
}

/* Remaining text column uses the exact same inner padding as every other row */
body.fct-legal .cms-rows [class*="cms-text-with-image"] .col-md-6 {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 44px 52px 48px !important;
}

body.fct-legal .cms-rows [class*="cms-text-with-image"] .col-md-6 h1,
body.fct-legal .cms-rows [class*="cms-text-with-image"] .col-md-6 h2,
body.fct-legal .cms-rows [class*="cms-text-with-image"] .col-md-6 h3,
body.fct-legal .cms-rows [class*="cms-text-with-image"] .col-md-6 h4,
body.fct-legal .cms-rows [class*="cms-text-with-image"] .col-md-6 p {
  text-align: left !important;
}

body.fct-legal .cms-rows [class*="cms-text-with-image"] .col-md-6 h1 {
  margin-top: 0 !important;
}

/* ---------- Horizontal rules / dividers ---------- */
body.fct-legal .cms-rows hr {
  border: 0 !important;
  height: 1px !important;
  background: #e9dfd0 !important;
  margin: 32px 0 !important;
}

/* ---------- Tables (occasional in policies) ---------- */
body.fct-legal .cms-rows table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 8px 0 24px !important;
  font-family: "Montserrat", sans-serif !important;
}

body.fct-legal .cms-rows table th,
body.fct-legal .cms-rows table td {
  border: 1px solid #e9dfd0 !important;
  padding: 10px 14px !important;
  text-align: left !important;
  color: #3a2f26 !important;
  font-size: 0.95rem !important;
}

body.fct-legal .cms-rows table th {
  background: #f7f1e8 !important;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #2b231c !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  body.fct-legal .cms-rows .col-12,
  body.fct-legal .cms-rows [class*="cms-text-with-image"] .col-md-6 {
    padding: 40px 40px 44px !important;
  }
}

@media (max-width: 767px) {
  body.fct-legal .fct-legal-hero {
    padding: 54px 22px 46px;
  }
  body.fct-legal .cms-rows {
    padding: 0 16px !important;
    margin: -26px auto 52px !important;
  }
  body.fct-legal .cms-rows .col-12 {
    padding: 30px 22px 34px !important;
  }
  body.fct-legal .cms-rows [class*="cms-text-with-image"] .col-md-6 {
    padding: 30px 22px 34px !important;
  }
  body.fct-legal .cms-rows .col-12 h1,
  body.fct-legal .cms-rows .col-12 h2,
  body.fct-legal .cms-rows .col-12 h3,
  body.fct-legal .cms-rows .col-12 h4 {
    font-size: 1.15rem !important;
  }
}