/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.1
*/

@font-face {
  font-family: "SofiaSans";
  src: url("fonts/SofiaSans-Variable.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

:root {
  --slate: #303441;
  --slate-deep: #272a35;
  --slate-card: #3b4050;
  --cta: #a85539;
  --terracotta: #c87056;
  --gold: #e8bd63;
  --blush: #efc3b5;
  --lavender: #e8eaef;
  --text: #303441;
  --muted: #5c6172;
  --on-dark: #dde0e8;
  --label-dark: #b3bbcc;
  --border: #dcdee5;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 30px;
}

html {
  scroll-behavior: smooth;
  font-feature-settings: "locl" 1;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
td,
th,
input,
select,
textarea,
.button,
a.button,
.mfn-menu-link,
.title,
.subtitle,
.desc {
  font-family: "SofiaSans", sans-serif !important;
}

@media (max-width: 768px) {
  /* h1,
  .title {
    font-size: 28px;
    line-height: 1.2;
  } */
  h2 {
    font-size: 26px;
    line-height: 1.25;
  }
  h3 {
    font-size: 20px;
  }
  body,
  p {
    font-size: 16px;
  }
}

#back_to_top,
.mfn-back-to-top {
  bottom: 150px !important;
  border: none !important;
}

#back_to_top:hover,
.mfn-back-to-top:hover {
  background: #8f4730 !important;
}

.nspark-hero .mcb-background-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(48, 52, 65, 0.96) 0%,
    rgba(48, 52, 65, 0.88) 45%,
    rgba(48, 52, 65, 0.5) 100%
  );
}

.nspark-pill-gold .mcb-item-plain_text-inner {
  display: inline-block;
}

.btn-hero-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.nspark-pain-cards .mcb-column-inner {
  display: flex;
}
.nspark-pain-cards .mfn-icon-box {
  width: 100%;
}

/* ---------------------------------------------------------
 * Novini (blog) section — match nspark-homepage-v7-BG mockup
 *
 * Applies to the "Blog" builder element in .grid style
 * (2-column news grid on the homepage). Requires Theme
 * Options -> Blog -> "Blog Meta" -> Date + Categories checked,
 * otherwise the theme doesn't output this markup at all.
 * ------------------------------------------------------- */

.posts_group.grid .post-item .image_frame .image_wrapper {
  border-radius: 14px;
}
.posts_group.grid .post-desc {
  display: flex;
  flex-direction: column;
  padding: 16px 0 0;
}
.home .posts_group.grid .post-title {
  order: 1;
}
.home .posts_group.grid .post-head {
  order: 2;
}
.posts_group.grid .post-title {
  order: 2;
}
.posts_group.grid .post-head {
  order: 1;
}
.posts_group.grid .post-excerpt {
  order: 3;
}
.posts_group.grid .post-footer {
  order: 4;
  margin: 0;
  padding: 0;
}
.posts_group.grid .post-footer .post-links {
  float: left;
  border: none;
  padding: 0;
  margin: 0;
}
.posts_group.grid .post-footer .post-links .post-more:hover {
  text-decoration: none;
}
.posts_group.grid .post-meta {
  display: flex;
  align-items: center;
}
.posts_group.grid .post-meta .category .cat-wrapper {
  position: static;
  display: block;
  z-index: auto;
}
.posts_group.grid .post-meta .category .cat-wrapper ul {
  padding: 0;
  background: none;
  display: inline;
}
.posts_group.grid .post-meta .category .cat-wrapper ul li {
  border-bottom: 0;
  display: inline;
}
.posts_group.grid .post-meta .category .cat-wrapper ul li a {
  padding: 0 4px 0 0;
}
.posts_group.grid .post-meta .author-date {
  order: 2;
  float: none;
}
.posts_group.grid .post-meta .author-date:before {
  content: "- ";
}
.posts_group.grid .post-meta .author-date .date .icon-clock {
  display: none;
}

.posts_group.grid .post-meta,
.posts_group.grid .post-meta .category .cat-wrapper ul li a,
.posts_group.grid .post-meta .author-date .date {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cta);
}

.news-page-head-post .post-item {
  width: 100% !important;
}

/* ------------------------------------------------------------
 * Numbered rows — Modules
 * ---------------------------------------------------------- */
.nspark-numbered {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: nspark-num;
}

.nspark-numbered > li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 4px 48px;
  padding: 28px 0;
  margin: 0;
}

.nspark-numbered > li::before {
  counter-increment: nspark-num;
  content: counter(nspark-num, decimal-leading-zero);
  /* grid-row: 1 / span 4; */
  grid-row: 1 / -1;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--border);
  font-variant-numeric: tabular-nums;
}

.nspark-numbered__title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.nspark-numbered__tagline {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cta);
  margin: 6px 0 0;
}

.nspark-numbered__body {
  margin: 14px 0 0;
  color: var(--slate);
}

/* Continue numbering across separate lists */
.nspark-numbered--from-03 {
  counter-reset: nspark-num 2;
}
.nspark-numbered--from-04 {
  counter-reset: nspark-num 3;
}
.nspark-numbered--from-09 {
  counter-reset: nspark-num 8;
}

/* ------------------------------------------------------------
 * Meta pill
 * ---------------------------------------------------------- */
.nspark-pill {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 7px;
  background: var(--lavender);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1em;
  color: var(--muted);
  margin-top: 18px;
}

/* Icon inside the pill — sized whichever way it's delivered (an
   inline <svg stroke="currentColor">, or BeTheme's [icon] shortcode
   <i>). Color isn't set here on purpose: both take it from the
   pill's own color (var(--muted)) via currentColor / inheritance. */
.nspark-pill svg,
.nspark-pill i {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 1;
}

/* ------------------------------------------------------------
 * Mobile
 * ---------------------------------------------------------- */
@media (max-width: 768px) {
  .nspark-numbered > li {
    grid-template-columns: 40px 1fr;
    gap: 4px 16px;
    padding: 22px 0;
  }

  .nspark-numbered > li::before {
    font-size: 30px;
  }

  .nspark-numbered--panel {
    padding: 6px 20px;
  }

  .nspark-numbered--cards > li {
    padding: 20px;
  }
}

/* Two columns */
.nspark-numbered--split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.nspark-numbered--split > li {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 48px 0px 28px 28px;
  margin: 0;
  overflow: hidden;
}

.nspark-numbered--split > li::before {
  position: absolute;
  top: 0;
  left: -5px;
  font-size: 108px;
  line-height: 1;
  color: var(--border);
  z-index: 0;
  pointer-events: none;
}

.nspark-numbered--split .nspark-numbered__title,
.nspark-numbered--split .nspark-numbered__tagline,
.nspark-numbered--split .nspark-numbered__body,
.nspark-numbered--split .nspark-pill {
  position: relative;
  z-index: 1;
}

.nspark-numbered--split .nspark-pill {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .nspark-numbered--split {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .nspark-numbered--split > li {
    padding: 40px 20px 24px;
  }

  .nspark-numbered--split > li::before {
    font-size: 62px;
  }
}

/* ------------------------------------------------------------
 * Callout — left-border notice box 
 * ---------------------------------------------------------- */
.nspark-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.nspark-callout > div {
  min-width: 0;
}

.nspark-callout > i {
  flex: 0 0 auto;
  font-size: 24px;
  color: var(--cta);
}

/* Same icon, delivered as an inline <svg class="nspark-callout__icon">
   instead of BeTheme's [icon] shortcode <i> — used on the apply page. */
.nspark-callout__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--cta);
}

.nspark-callout__title {
  font-size: 17px;
}

/* ============================================================
 * Eligibility page
 * ========================================================== */

.nspark-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cta);
  margin: 0 0 20px;
}

.nspark-eligibility .nspark-numbered {
  margin: 0;
}

.nspark-eligibility .nspark-numbered > li {
  border-bottom: 1px solid var(--border);
  gap: 4px 20px;
}

.nspark-eligibility .nspark-numbered > li::before {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lavender);
  font-size: 16px;
  line-height: 1;
  color: var(--cta);
}

.nspark-eligibility .nspark-numbered__body {
  margin: 0;
}

.nspark-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0 !important;
  padding: 0;
}

.nspark-eligibility--from-01 {
  counter-reset: nspark-num 0;
}

.nspark-eligibility--from-04 {
  counter-reset: nspark-num 3;
}

.nspark-eligibility--from-09 {
  counter-reset: nspark-num 8;
}

.nspark-eligibility .nspark-numbered {
  counter-reset: none;
}

.nspark-chips li {
  list-style: none;
  background: var(--lavender);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 2px 18px;
  font-size: 15px;
}

@media (max-width: 768px) {
  .nspark-eligibility .nspark-numbered > li::before {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .nspark-chips li {
    padding: 2px 14px;
    font-size: 14px;
  }
}

/* ============================================================
 * FAQ page — native <details>/<summary> accordion
 * ========================================================== */

.nspark-faq .nspark-eyebrow {
  margin: 45px 0 20px 0;
}

.nspark-faq__item {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}

.nspark-faq__item:last-child {
  border-bottom: 0;
}

.nspark-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none; /* removes the marker in browsers that key off display:list-item */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
}

.nspark-faq__q::-webkit-details-marker {
  display: none; /* Chrome/Safari draw the triangle from this even with list-style:none above */
}

.nspark-faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: var(--muted);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>')
    no-repeat center / 100%;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>')
    no-repeat center / 100%;
  transition: transform 0.2s ease;
}

.nspark-faq__item[open] > .nspark-faq__q::after {
  transform: rotate(180deg);
}

.nspark-faq__a {
  margin-top: 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.nspark-faq__a p {
  margin: 0;
}

.nspark-faq__a p + p {
  margin-top: 10px;
}

.nspark-faq__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cta);
  font-weight: 700;
  text-decoration: none;
}

.nspark-faq__link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .nspark-faq__item {
    padding: 18px 0;
  }

  .nspark-faq__q {
    font-size: 16px;
  }

  .nspark-faq__a {
    font-size: 15px;
  }
}

/* ============================================================
 * Contact page — info cards
 * ========================================================== */

.nspark-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0;
}

.nspark-info-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  min-width: 0; /* lets the long ИАНМСП email wrap instead of stretching its column */
}

.nspark-info-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--lavender);
  color: var(--cta);
  margin-bottom: 20px;
}

.nspark-info-card__icon i {
  font-size: 22px;
  line-height: 1;
}

.nspark-info-card__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.nspark-info-card__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  overflow-wrap: break-word;
}

.nspark-info-card__value a {
  color: inherit;
  text-decoration: none;
}

.nspark-info-card__value a:hover {
  text-decoration: underline;
}

.nspark-info-card__note {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 900px) {
  .nspark-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * Apply page — numbered timeline
 * ========================================================== */

.nspark-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: nspark-step;
}

.nspark-timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 6px 24px;
  padding-bottom: 32px;
}

.nspark-timeline > li:last-child {
  padding-bottom: 0;
}

.nspark-timeline > li::before {
  counter-increment: nspark-step;
  content: counter(nspark-step, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cta);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nspark-timeline > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: -32px;
  width: 2px;
  background: var(--border);
}

.nspark-timeline__title {
  grid-column: 2;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.nspark-timeline__body {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.nspark-timeline .nspark-pill {
  grid-column: 2;
  margin-top: 0; /* the grid's own row-gap handles this spacing here */
}

@media (max-width: 768px) {
  .nspark-timeline > li {
    grid-template-columns: 44px 1fr;
    gap: 4px 16px;
    padding-bottom: 24px;
  }

  .nspark-timeline > li::before {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }

  .nspark-timeline > li:not(:last-child)::after {
    left: 21px;
    top: 44px;
    bottom: -24px;
  }

  .nspark-timeline__title {
    font-size: 17px;
  }

  .nspark-timeline__body {
    font-size: 15px;
  }
}

.nspark-footer-links a {
  text-decoration: none !important;
}

/* ============================================================
 * Further information page — document library
 * ========================================================== */

.nspark-doc-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 20px;
}

.nspark-doc-section__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none; /* see .nspark-faq__q above re: this + the -webkit rule below */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  cursor: pointer;
}

.nspark-doc-section__summary::-webkit-details-marker {
  display: none;
}

/* Chevron: two real [icon] shortcode <i>s in the HTML — fa-chevron-right
   and fa-chevron-down — instead of one CSS-drawn arrow rotated open.
   Only one shows at a time, picked by the [open] attribute; see the
   .nspark-doc-section__chevron markup wherever __summary is used. */
.nspark-doc-section__chevron {
  flex: 0 0 auto;
  display: inline-flex;
}

.nspark-doc-section__chevron i {
  font-size: 18px;
  color: var(--cta);
}

.nspark-doc-section__chevron i:last-child {
  display: none;
}

.nspark-doc-section[open]
  > .nspark-doc-section__summary
  .nspark-doc-section__chevron
  i:first-child {
  display: none;
}

.nspark-doc-section[open]
  > .nspark-doc-section__summary
  .nspark-doc-section__chevron
  i:last-child {
  display: inline-block;
}

.nspark-doc-section__intro {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.nspark-doc-group {
  margin-top: 28px;
}

.nspark-doc-group__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--cta);
}

.nspark-doc-group__intro {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.nspark-doc-item {
  padding: 24px 0;
  border-top: 1px solid var(--border);
}

.nspark-doc-item:first-child {
  border-top: 0;
}

.nspark-tag {
  display: inline-block;
  flex: 0 0 auto;
  background: var(--lavender);
  color: var(--cta);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
}

.nspark-file-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.nspark-file {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: inherit;
  text-decoration: none;
}

.nspark-file:hover {
  border-color: var(--cta);
}

.nspark-file__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--cta);
}

/* Same download icon, delivered as BeTheme's [icon] shortcode
   <i class="icon-download"> instead of an inline <svg>. No class
   hook to give it (the shortcode only takes type/color attrs), so
   this targets it positionally — it's always the file link's first
   child. Sized to match; color comes from the shortcode's own
   color="#a85539" attr this time (valid hex, unlike the unquoted
   ones elsewhere), so it isn't set here too. */
.nspark-file > i {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}

.nspark-file__type {
  flex: 0 0 auto;
  background: var(--lavender);
  color: var(--muted);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nspark-file__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.nspark-file__size {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 14px;
}

.nspark-doc-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--lavender);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.nspark-doc-note svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--muted);
}

/* Same info icon, delivered as a Font Awesome [icon type="fas
   fa-info-circle"] shortcode <i> instead of an inline <svg> — no
   color attr passed on these (unlike the download icons), so
   color is set here rather than fighting an inline style. */
.nspark-doc-note i {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
  color: var(--muted);
}

@media (max-width: 768px) {
  .nspark-doc-section {
    padding: 22px;
  }

  .nspark-doc-section__summary {
    font-size: 19px;
  }

  .nspark-file {
    flex-wrap: wrap;
  }

  .nspark-file__size {
    width: 100%;
    padding-left: 28px;
  }
}

/* ============================================================
 * Privacy policy page — data table
 * ========================================================== */

.nspark-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.nspark-table th {
  padding: 0 24px 12px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.nspark-table td {
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

.nspark-table tr:last-child td {
  border-bottom: 0;
}

.nspark-table th:first-child,
.nspark-table td:first-child {
  width: 220px;
}

@media (max-width: 600px) {
  .nspark-table,
  .nspark-table thead,
  .nspark-table tbody,
  .nspark-table th,
  .nspark-table td,
  .nspark-table tr {
    display: block;
  }

  .nspark-table thead {
    display: none;
  }

  .nspark-table td {
    width: auto;
    padding: 4px 0;
    border-bottom: 0;
  }

  .nspark-table td:first-child {
    padding-top: 18px;
    font-weight: 700;
  }

  .nspark-table tr {
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
  }

  .nspark-table tr:last-child {
    border-bottom: 0;
  }
}

/* Reset width Compliantz documnents */
#cmplz-document {
  max-width: none;
}

/* Hide the "(translated name)" half, keep the native one */
.wpml-ls-display {
  display: none;
}