/* ==========================================================================
   Fatima Zahra — the homepage sections below the hero, plus the article and
   category page furniture the theme templates share with them.

   Same rules as fz-widgets.css: every value is a custom property declared once
   here or inherited from the theme's tokens, layout is flexbox throughout,
   nothing is absolutely positioned, and decorative marks are real elements.
   ========================================================================== */

:root {
  /* ---- Section furniture ---- */
  --fz-kicker-size: clamp(1.125rem, 1.7vw, 1.67rem);
  --fz-kicker-rule: clamp(4rem, 9.6vw, 11.5rem);
  --fz-section-heading-size: clamp(2rem, 2.6vw, 3rem);

  /* ---- Testimonial ---- */
  --fz-testimonial-quote-size: clamp(1.5rem, 3vw, 3.65rem);
  --fz-testimonial-mark-width: clamp(7rem, 12vw, 16.8rem);
  --fz-testimonial-author-size: clamp(1.125rem, 1.45vw, 1.75rem);
  /* A phone gives the quote the whole width, so it can carry more size than
     the fluid desktop step would hand it at 390px. */
  --fz-testimonial-quote-mobile: 1.875rem;
  --fz-testimonial-author-mobile: 1.1875rem;
  --fz-number-size: clamp(3rem, 3.75vw, 4.5rem);
  --fz-ring-width: 1.5px;
  --fz-ring-face: var(--color-surface, #fff);
  /* The change of quote: out, then in with a slight rise. The fade-out is the
     shorter of the two so the next quote arrives without a lull in between. */
  --fz-testimonial-fade-out: 450ms;
  --fz-testimonial-fade-in: 650ms;
  --fz-testimonial-rise: 0.5rem;

  /* ---- Article cards ---- */
  --fz-cards-columns: 3;
  /* 35px on the 1920 canvas — five under the original 40. Shared by the
     featured row, the new-articles grid, the article slider and the related
     row on an article page, so they all step together. */
  --fz-card-title-size: clamp(1.1875rem, 1.83vw, 2.1875rem);
  /* 28px on a phone for the homepage's featured row and new-articles grid,
     where each card has the full width and 19px read as a caption. The slider
     and the article page's related row keep the shared scale. */
  --fz-card-title-size-mobile: 1.75rem;
  --fz-card-media-ratio: 540 / 326;

  /* ---- Names marquee ---- */
  --fz-marquee-duration: 60s;
  /* 33px on the 1920 canvas — five under the original 38 — so the longest of
     her names still sets on one line at the width below. */
  --fz-name-size: clamp(1.25rem, 1.72vw, 2.0625rem);
  --fz-name-width: clamp(11rem, 13.5vw, 16.25rem);
  --fz-name-gap: clamp(1.5rem, 3vw, 3.75rem);

  /* ---- Banner ---- */
  --fz-banner-heading-size: clamp(1.875rem, 2.9vw, 3.5rem);
  --fz-banner-pad: 36.7708%;
  --fz-banner-pad-mobile: 125%;
  --fz-banner-height: 530px;
  --fz-banner-scrim: linear-gradient(180deg, rgba(24, 12, 20, 0.18) 0%, rgba(24, 12, 20, 0.72) 52%, rgba(24, 12, 20, 0.92) 100%);

  /* ---- Article slider ---- */
  --fz-slide-basis: 68%;
  --fz-slide-media-max: 26rem;

  /* ---- "Read next" box ---- */
  --fz-readnext-card: 430px;
  --fz-readnext-avatar: 100px;
  --fz-readnext-title: 22px;
  --fz-readnext-radius: 20px;
  --fz-readnext-bg: #fffaf5;
  --fz-readnext-shadow: 0 3px 12px 0 rgba(228, 142, 82, 0.10);
  --fz-readnext-gap: clamp(1rem, 1.6vw, 1.5rem);

  /* ---- Pre-footer and footer ----
     Two washes, not one: the deeper of the pair carries the links and portal
     cards, and the lighter sits under the brand block below it, so the foot of
     the page reads as two bands rather than one long field of colour. */
  --gradient-prefooter: linear-gradient(90deg, #fbdde6 0%, #ffdcc2 100%);
  --gradient-footer: linear-gradient(90deg, #fdecef 0%, #ffe6d2 100%);
  --fz-site-card-radius: 1.25rem;
  --fz-footer-logo-height: 4.375rem;
  --fz-footer-email-size: clamp(1.125rem, 1.35vw, 1.5rem);
  --fz-footer-post-size: 0.9375rem;
  /* On a phone the column headings, the portal cards' titles and the featured
     posts' titles all sit on their floors — 18px, 16px and 15px, barely above
     the links under them — so each goes up by 30% there. */
  --fz-footer-title-size-mobile: 1.4625rem;
  --fz-site-card-title-mobile: 1.3rem;
  --fz-footer-post-size-mobile: 1.21875rem;
  --fz-footer-thumb: 4rem;
  --fz-optin-radius: 1.25rem;
  --fz-optin-border: #f3c9d6;

  /* ---- Shared cloud backdrop, used on the article and category pages ---- */
  --fz-clouds-image: var(--gradient-sky, none);
}

@media (prefers-reduced-motion: reduce) {
  :root { --fz-marquee-duration: 0s; }
}

/* ==========================================================================
   SHARED SECTION FURNITURE
   ========================================================================== */

.fz-kicker {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.2vw, 1.5rem);
  margin-bottom: clamp(1.75rem, 3vw, 3.5rem);
}

.fz-kicker__text {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fz-kicker-size);
  line-height: var(--text-eyebrow-lh, 1.3);
  letter-spacing: var(--text-eyebrow-ls, 0.1em);
  font-weight: var(--text-eyebrow-weight, 400);
  text-transform: uppercase;
  color: var(--color-body-on-dark, #aa9da7);
  white-space: nowrap;
}

/* The rule graphic carries its diamond at the left end, so the run on the
   left of the label is the same image turned around — one asset, two sides. */
.fz-kicker__rule {
  width: var(--fz-kicker-rule);
  height: auto;
  flex-shrink: 1;
  min-width: 0;
}

.fz-kicker__rule--start { transform: scaleX(-1); }

.fz-section-heading {
  margin-bottom: clamp(1.75rem, 3vw, 3.25rem);
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fz-section-heading-size);
  line-height: var(--text-h2-lh, 1.2);
  letter-spacing: var(--text-h2-ls, -0.01em);
  font-weight: var(--text-h2-weight, 400);
  color: var(--color-heading, #3c1a33);
  text-align: center;
}

/* Round icon button, shared by the article slider's arrows. */
.fz-round-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fz-number-size);
  height: var(--fz-number-size);
  padding: 0;
  border: 1px solid var(--color-dove-taupe, #fddcc6);
  border-radius: var(--radius-circle, 9999px);
  background: transparent;
  color: var(--color-accent, #a84574);
  transition: border-color var(--duration-fast, 200ms) var(--ease-standard, ease),
              color var(--duration-fast, 200ms) var(--ease-standard, ease),
              opacity var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-round-btn:hover { border-color: var(--color-accent, #a84574); }
.fz-round-btn[disabled] { opacity: 0.35; cursor: default; }

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */

.fz-testimonial {
  padding-block: clamp(1.75rem, 2.8vw, 3.25rem);
  background: var(--color-surface, #fff);
}

.fz-testimonial__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 4.5rem);
}

.fz-testimonial__mark {
  width: var(--fz-testimonial-mark-width);
  height: auto;
  flex-shrink: 0;
}

/* `justify-content: center` because the script reserves the height of the
   tallest quote (see fz-widgets.js): a shorter one then sits in the middle of
   that space instead of leaving a gap under it, and nothing below the section
   jumps each time the quote changes. */
.fz-testimonial__track {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* The change of quote is a fade: the old one fades out, then the new one fades
   in with a slight rise. One after the other rather than crossfading on top of
   each other, which would need the two stacked — and nothing here is
   absolutely positioned. The script only adds and removes the two classes;
   every timing lives here. */
.fz-testimonial__slide {
  margin: 0;
  transition: opacity var(--fz-testimonial-fade-in, 650ms) var(--ease-standard, ease),
              transform var(--fz-testimonial-fade-in, 650ms) var(--ease-standard, ease);
}

.fz-testimonial__slide.is-leaving {
  opacity: 0;
  transition-duration: var(--fz-testimonial-fade-out, 450ms);
}

/* The starting point of the fade-in. Removed a frame after the slide is shown,
   so the browser has a "before" to transition from. */
.fz-testimonial__slide.is-entering {
  opacity: 0;
  transform: translateY(var(--fz-testimonial-rise, 0.5rem));
  transition: none;
}

/* A display of its own outranks the browser's `[hidden] { display: none }`,
   so a slide that is out of view has to be told again. */
.fz-testimonial__slide[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fz-testimonial__slide { transition: none; }
}

.fz-testimonial__quote {
  margin: 0;
  border: 0;
  padding: 0;
  font-family: var(--font-editorial, Georgia, serif);
  font-size: var(--fz-testimonial-quote-size);
  line-height: 1.4;
  letter-spacing: var(--text-quote-ls, -0.01em);
  font-weight: 500;
  color: var(--color-heading, #3c1a33);
}

.fz-testimonial__author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.25rem, 2vw, 2.25rem);
  font-family: var(--font-editorial, Georgia, serif);
  font-size: var(--fz-testimonial-author-size);
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-accent, #a84574);
}

.fz-testimonial__rule {
  width: clamp(3rem, 7vw, 8.5rem);
  height: 1px;
  background: var(--color-dove-taupe, #fddcc6);
}

.fz-numbers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 1vw, 1.25rem);
  flex-shrink: 0;
}

/* The countdown ring.
   A registered angle property lets a conic gradient be animated, which a
   plain custom property cannot be. The button's background is that gradient
   and its padding is the ring's thickness; the face inside covers everything
   but that edge. Real elements only — no overlay, nothing positioned. */
@property --fz-sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.fz-numbers__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fz-number-size);
  height: var(--fz-number-size);
  padding: var(--fz-ring-width);
  border: 0;
  border-radius: var(--radius-circle, 9999px);
  background: var(--color-dove-taupe, #fddcc6);
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(0.8125rem, 0.85vw, 1.0625rem);
  letter-spacing: 0.06em;
  color: var(--color-body-on-dark, #aa9da7);
  /* Colour only. The active ring is a conic gradient and the resting one is a
     flat colour, and a gradient cannot be interpolated into a colour — asking
     for it left the ring transparent for the length of the transition, so a
     control blinked out of existence every time the quote changed. */
  transition: color var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-numbers__face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-circle, 9999px);
  background: var(--fz-ring-face);
}

.fz-numbers__item:hover { color: var(--color-accent, #a84574); }

.fz-numbers__item.is-active {
  background: var(--color-accent, #a84574);
  color: var(--color-accent, #a84574);
}

/* Only the running slider counts down. A static slider keeps a plain ring,
   because a timer that never moves is a lie about what is going to happen. */
.fz-testimonial--timed .fz-numbers__item.is-active {
  background: conic-gradient(
    var(--color-accent, #a84574) var(--fz-sweep),
    var(--color-dove-taupe, #fddcc6) 0
  );
  animation: fz-sweep var(--fz-timer-duration, 8s) linear forwards;
}

@keyframes fz-sweep {
  from { --fz-sweep: 0deg; }
  to   { --fz-sweep: 360deg; }
}

/* Reduced motion: the ring is drawn whole and simply sits there, so the active
   control still reads as active without anything sweeping. */
@media (prefers-reduced-motion: reduce) {
  .fz-testimonial--timed .fz-numbers__item.is-active {
    background: var(--color-accent, #a84574);
    animation: none;
  }
}

/* ==========================================================================
   SITE MAP — the [fz_sitemap] page: chapters, their articles, then the pages
   ========================================================================== */

.fz-sitemap {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

.fz-sitemap__group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fz-sitemap__heading {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.375rem, 1.8vw, 2rem);
  line-height: 1.25;
  font-weight: 400;
  color: var(--color-heading, #3c1a33);
}

.fz-sitemap__tag {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-tag-size, 0.688rem);
  letter-spacing: var(--text-tag-ls, 0.04em);
  font-weight: var(--text-tag-weight, 500);
  text-transform: uppercase;
  color: var(--color-eyebrow, #e48e52);
}

.fz-sitemap__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The chapter's own articles sit in from its heading, so the page reads as a
   set of chapters rather than one long column of links. */
.fz-sitemap__group .fz-sitemap__list { padding-left: clamp(0.75rem, 1.4vw, 1.5rem); }

.fz-sitemap__list a {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-body-size, 1.0625rem);
  line-height: var(--text-body-lh, 1.6);
  color: var(--color-body-on-light, #302e2f);
  transition: color var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-sitemap__list a:hover,
.fz-sitemap__list a:focus-visible { color: var(--color-accent, #a84574); }

.fz-sitemap__empty {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-small-size, 0.875rem);
  color: var(--color-body-muted, #5c545a);
}

/* ==========================================================================
   ARTICLE CARDS
   ========================================================================== */

.fz-cards-section {
  padding-block: clamp(3rem, 4.2vw, 5rem);
  background: var(--color-surface, #fff);
}

.fz-cards-section--clouds {
  background-image: var(--fz-clouds-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fz-cards-section--blush { background: var(--gradient-soft-card); }

.fz-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--gap-card, 1.875rem);
}

/* Columns by percentage basis rather than a grid: the row has to stay
   flexbox-only, and a percentage keeps every card the same width whatever
   padding it carries. */
.fz-cards > * {
  flex: 1 1 calc((100% - (var(--fz-cards-columns) - 1) * var(--gap-card, 1.875rem)) / var(--fz-cards-columns));
  max-width: calc((100% - (var(--fz-cards-columns) - 1) * var(--gap-card, 1.875rem)) / var(--fz-cards-columns));
  min-width: 0;
}

/* The hairline where one row of cards ends and the next begins. A real
   full-width flex item rather than a border on the cards themselves, so the
   line runs the whole width instead of breaking at every gutter — and its own
   margin is where the extra breathing room between rows comes from.

   Rows only mean anything at the desktop column count; once the grid reflows
   the tile it follows is no longer the end of a row, so it steps out of the
   way rather than cutting the stack in an arbitrary place. */
.fz-cards > .fz-cards__rule {
  flex: 0 0 100%;
  max-width: 100%;
  height: 1px;
  margin-block: clamp(0.5rem, 1.4vw, 1.75rem);
  background: var(--color-divider, #f8ece1);
}

.fz-card-article {
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 1.2vw, 1.25rem);
}

.fz-card-article__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card, 2rem);
  aspect-ratio: var(--fz-card-media-ratio);
}

/* Elementor's frontend.min.css ships `.elementor img { height: auto }` at the
   same specificity as a single class and loads after this file, so a plain
   rule here would silently lose and every cover image would collapse to its
   own ratio. Doubling the class outranks it without reaching for !important. */
.fz-card-article__media.fz-card-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base, 400ms) var(--ease-standard, ease);
}

.fz-card-article__media:hover img { transform: scale(1.04); }

.fz-card-article__body {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.8vw, 0.875rem);
  align-items: flex-start;
}

.fz-card-article__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fz-card-title-size);
  line-height: var(--text-h3-lh, 1.25);
  letter-spacing: var(--text-h3-ls, 0);
  font-weight: var(--text-h3-weight, 400);
  color: var(--color-heading, #3c1a33);
}

/* A card headline picks up the same mauve the "Read More" beneath it already
   uses, so hovering anywhere on a card reads as one gesture. It replaces the
   plain fade `.heading-link` gives every other linked heading — the accent
   phrase keeps its gradient, since that is a background rather than a colour
   and there is nothing to shift. */
.fz-card-article__title .heading-plain,
.fz-col__heading .heading-plain {
  transition: color var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-card-article__title .heading-link:hover,
.fz-card-article__title .heading-link:focus-visible,
.fz-col__heading .heading-link:hover,
.fz-col__heading .heading-link:focus-visible {
  opacity: 1;
}

.fz-card-article__title .heading-link:hover .heading-plain,
.fz-card-article__title .heading-link:focus-visible .heading-plain,
.fz-col__heading .heading-link:hover .heading-plain,
.fz-col__heading .heading-link:focus-visible .heading-plain {
  color: var(--color-accent, #a84574);
}

.fz-card-article__text {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-body-size, 1.0625rem);
  line-height: var(--text-body-lh, 1.6);
  color: var(--color-body-muted, #5c545a);
}

/* The quote tile that fills the last slot of the New Articles grid. */
.fz-quote-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 2vw, 2rem);
  margin: 0;
  padding: clamp(1.75rem, 3vw, 3.5rem);
  border-radius: var(--radius-card, 2rem);
  background: var(--gradient-soft-card);
  text-align: center;
}

.fz-quote-tile__text {
  margin: 0;
  border: 0;
  padding: 0;
  font-family: var(--font-editorial, Georgia, serif);
  font-size: clamp(1.375rem, 1.95vw, 2.34rem);
  line-height: var(--text-testimonial-lh, 1.3);
  font-weight: var(--text-testimonial-weight, 600);
  color: var(--color-heading, #3c1a33);
}

.fz-quote-tile__ornament {
  width: 9.75rem;
  height: auto;
}

.fz-quote-tile__author {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: var(--text-category-size, 1.15rem);
  font-weight: 500;
  color: var(--color-accent, #a84574);
}

/* ==========================================================================
   HER NAMES & TITLES
   ========================================================================== */

.fz-names {
  padding-block: clamp(2.5rem, 3.75vw, 4.5rem);
  background: var(--color-surface, #fff);
}

.fz-names__viewport { overflow: hidden; }

.fz-names__belt {
  display: flex;
  flex-direction: row;
  width: max-content;
  animation: fz-marquee var(--fz-marquee-duration) linear infinite;
}

/* Two identical runs shifted by exactly half the pair's width: the loop meets
   itself with nothing to measure in JavaScript. */
@keyframes fz-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.fz-names__viewport:hover .fz-names__belt,
.fz-names__viewport.is-offscreen .fz-names__belt {
  animation-play-state: paused;
}

.fz-names__run {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--fz-name-gap);
  padding-right: var(--fz-name-gap);
}

.fz-names__divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.fz-names__divider img {
  width: clamp(2rem, 2.4vw, 2.875rem);
  height: auto;
}

.fz-names__stem {
  width: 1px;
  height: clamp(2.5rem, 4.6vw, 5.5rem);
  background: var(--color-dove-taupe, #fddcc6);
}

.fz-names__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: var(--fz-name-width);
  flex-shrink: 0;
}

/* dir="rtl" keeps the Arabic glyphs in the right order, but its default
   alignment would push the word to the far edge of the column, away from the
   name it belongs to. The two share a left edge in the design. */
.fz-names__arabic {
  font-family: var(--font-arabic, serif);
  font-size: var(--text-arabic-size, 1.5rem);
  line-height: var(--text-arabic-lh, 1.2);
  text-align: left;
  color: var(--color-body-on-light, #302e2f);
}

/* Never broken across two lines: a name split mid-word ("Al-" / "Muhaddathah")
   reads as two entries. The column is sized to hold the longest of them, and
   nowrap makes that a guarantee rather than a hope — only the meaning below
   is allowed to wrap. */
.fz-names__name {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fz-name-size);
  line-height: 1.2;
  font-weight: 400;
  white-space: nowrap;
}

.fz-names__meaning {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-small-size, 0.875rem);
  line-height: 1.5;
  color: var(--color-body-muted, #5c545a);
}

/* ==========================================================================
   FEATURE BANNER
   ========================================================================== */

.fz-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-image: var(--fz-banner-image, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: var(--color-surface, #fff);
}

/* The same zero-width spacer the hero uses: a percentage top padding resolves
   against the section's own width, giving it the exact height of the picture
   while still letting it grow when the copy needs more room. */
.fz-banner__ratio {
  flex: 0 0 0px;
  width: 0;
  padding-top: var(--fz-banner-pad);
}

.fz-banner--fixed { min-height: var(--fz-banner-height); }

.fz-banner__body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding-block: clamp(2.5rem, 4vw, 5rem);
}

.fz-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
  min-width: 0;
}

.fz-banner__heading {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fz-banner-heading-size);
  line-height: 1.2;
  letter-spacing: var(--text-h2-ls, -0.01em);
  font-weight: var(--text-h2-weight, 400);
  color: var(--color-heading, #3c1a33);
}

.fz-banner__text {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-body-size, 1.0625rem);
  line-height: var(--text-body-lh, 1.6);
  color: var(--color-body-muted, #5c545a);
}

.fz-banner__button { margin-top: 0.75rem; }

.fz-banner--light .fz-banner__heading,
.fz-banner--light .fz-banner__heading .heading-plain { color: var(--color-white, #fff); }
.fz-banner--light .fz-banner__text { color: var(--color-dove-taupe, #fddcc6); }
.fz-banner--light .fz-col__category { color: var(--color-royal-mauve, #a84574); }

/* ==========================================================================
   ARTICLE SLIDER
   ========================================================================== */

.fz-aslider {
  padding-block: clamp(3rem, 4.2vw, 5rem);
  background: var(--color-surface, #fff);
}

.fz-aslider__viewport { overflow: hidden; }

.fz-aslider__track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--gap-card, 1.875rem);
  transition: transform var(--duration-base, 400ms) var(--ease-standard, ease);
}

.fz-aslide {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 3rem);
  flex: 0 0 var(--fz-slide-basis);
  min-width: 0;
}

.fz-aslide__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.5rem, 0.9vw, 1rem);
  flex: 1 1 auto;
  min-width: 0;
}

.fz-aslide__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fz-card-title-size);
  line-height: var(--text-h3-lh, 1.25);
  font-weight: var(--text-h3-weight, 400);
  color: var(--color-heading, #3c1a33);
}

.fz-aslide__text {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-body-size, 1.0625rem);
  line-height: var(--text-body-lh, 1.6);
  color: var(--color-body-muted, #5c545a);
}

/* A true circle, not an oval: the radius alone would only round a box that is
   already square, so the square is set here and the picture cropped to fill
   it. `max-width` keeps a wide slide from blowing the circle up past the
   height of the words beside it. */
.fz-aslide__media {
  display: block;
  flex: 0 0 48%;
  max-width: var(--fz-slide-media-max);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-circle, 9999px);
}

.fz-aslide__media.fz-aslide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fz-aslider__controls {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
}

/* ==========================================================================
   "READ NEXT" BOX
   Sits between two paragraphs of an article, so it is deliberately quieter
   than a card row: no excerpt, no category, no read-more — a picture and a
   headline, and the whole card is the link.
   ========================================================================== */

.fz-readnext {
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 1.4vw, 1.25rem);
  margin-block: clamp(1.75rem, 3vw, 2.75rem);
}

.fz-readnext__heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-body-size, 1.0625rem);
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-heading, #3c1a33);
}

.fz-readnext__mark {
  width: 1.5rem;
  height: auto;
  flex-shrink: 0;
}

.fz-readnext__grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--fz-readnext-gap);
}

/* A set width rather than a share of the row: the card is 430px and stays 430px
   however many are in the box, so two of them read identically whether they sit
   beside a third or on their own. As many fit per row as the column has space
   for, and the rest wrap.

   `flex: 0 1` — it may never grow past 430, but it must still be allowed to
   shrink, or on a phone a 430px card would push the article sideways. */
.fz-readnext__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--fz-readnext-gap);
  flex: 0 1 var(--fz-readnext-card);
  max-width: var(--fz-readnext-card);
  min-width: 0;
  padding: clamp(0.875rem, 1.3vw, 1.25rem);
  border-radius: var(--fz-readnext-radius);
  border: 1px solid var(--color-dove-taupe, #fddcc6);
  background: var(--fz-readnext-bg);
  box-shadow: var(--fz-readnext-shadow);
  transition: border-color var(--duration-fast, 200ms) var(--ease-standard, ease),
              box-shadow var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-readnext__card:hover {
  border-color: var(--color-soft-gold, #e48e52);
  box-shadow: 0 6px 20px 0 rgba(228, 142, 82, 0.18);
}

.fz-readnext__media {
  display: block;
  flex: 0 0 var(--fz-readnext-avatar);
  width: var(--fz-readnext-avatar);
  height: var(--fz-readnext-avatar);
  overflow: hidden;
  border-radius: var(--radius-circle, 9999px);
  background: var(--color-gray-4, #f8ece1);
}

/* Doubled class for the same reason the article cards double theirs: Elementor
   ships `.elementor img { height: auto }` at single-class weight and loads
   after this file, which would collapse the circle to the picture's own ratio. */
.fz-readnext__media.fz-readnext__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fz-readnext__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fz-readnext-title);
  line-height: var(--text-h3-lh, 1.25);
  font-weight: var(--text-h3-weight, 400);
  color: var(--color-heading, #3c1a33);
  min-width: 0;
  transition: color var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-readnext__card:hover .fz-readnext__title { color: var(--color-accent, #a84574); }

/* ==========================================================================
   PRE-FOOTER
   ========================================================================== */

.fz-prefooter {
  padding-block: clamp(3rem, 4.6vw, 5.5rem);
  background: var(--gradient-prefooter);
}

.fz-prefooter__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(2rem, 5vw, 6rem);
}

.fz-prefooter__links {
  flex: 1 1 38%;
  min-width: 0;
}

.fz-prefooter__sites {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1 1 60%;
  min-width: 0;
}

.fz-linkcol {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.fz-linkcol__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.125rem, 1.35vw, 1.625rem);
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-heading, #3c1a33);
}

/* The hairline under the one heading the chapter links now share. A real
   element rather than a border, so the rule spans the list rather than the
   heading's own text width. */
.fz-linkcol__rule {
  width: 100%;
  height: 1px;
  margin-top: -0.25rem;
  background: var(--color-divider, #f8ece1);
}

.fz-linkcol__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Two columns under the single heading. Rows rather than a column-count so
   the list stays flexbox like everything else here, and so an odd number of
   links leaves the gap at the end instead of unbalancing the columns. */
.fz-linkcol__list--split {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: clamp(1rem, 2vw, 2.5rem);
}

.fz-linkcol__list--split > li {
  flex: 0 0 calc(50% - clamp(0.5rem, 1vw, 1.25rem));
  min-width: 0;
}

.fz-linkcol__link {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-body-size, 1.0625rem);
  line-height: 1.5;
  color: var(--color-body-muted, #5c545a);
  transition: color var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-linkcol__link:hover { color: var(--color-accent, #a84574); }

.fz-sites {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
}

.fz-site-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 0;
  min-width: 0;
  padding: clamp(1rem, 1.6vw, 1.75rem);
  border-radius: var(--fz-site-card-radius);
  background: var(--color-white, #fff);
  box-shadow: 0 18px 40px 0 rgba(142, 66, 103, 0.08);
  transition: transform var(--duration-fast, 200ms) var(--ease-standard, ease),
              box-shadow var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-site-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 54px 0 rgba(142, 66, 103, 0.14);
}

.fz-site-card__logo {
  width: auto;
  max-height: 2.75rem;
  align-self: flex-start;
}

.fz-site-card__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1rem, 1.15vw, 1.375rem);
  line-height: 1.3;
  color: var(--color-heading, #3c1a33);
}

.fz-site-card__text {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-small-size, 0.875rem);
  line-height: 1.5;
  color: var(--color-body-muted, #5c545a);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.fz-footer {
  padding-block: clamp(3rem, 4.6vw, 5.5rem);
  background: var(--gradient-footer);
  border-top: 1px solid rgba(255, 255, 255, 0.65);
}

.fz-footer__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(2rem, 5vw, 6rem);
}

.fz-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  flex: 1 1 34%;
  min-width: 0;
}

.fz-footer__logo img {
  width: auto;
  height: var(--fz-footer-logo-height);
}

/* The address is set in the display serif rather than the body sans: it reads
   as part of the brand block under the mark, not as another line of small
   print alongside the copyright. */
.fz-footer__email {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fz-footer-email-size);
  line-height: 1.3;
  color: var(--color-accent, #a84574);
  transition: opacity var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-footer__email:hover { opacity: 0.78; }

.fz-footer__copy,
.fz-footer__subtext {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-small-size, 0.875rem);
  line-height: 1.6;
  color: var(--color-body-muted, #5c545a);
}

.fz-footer__legal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-small-size, 0.875rem);
  color: var(--color-body-muted, #5c545a);
}

.fz-footer__legal a { transition: color var(--duration-fast, 200ms) var(--ease-standard, ease); }
.fz-footer__legal a:hover { color: var(--color-accent, #a84574); }

.fz-footer__posts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1 1 30%;
  min-width: 0;
}

/* One article per row, picture and headline side by side, with a hairline
   between them — a reading list, not a card grid. */
.fz-minilist {
  display: flex;
  flex-direction: column;
}

.fz-minilist__item + .fz-minilist__item {
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

.fz-minilist__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.875rem;
  padding-block: 0.75rem;
}

.fz-minilist__media {
  display: block;
  flex: 0 0 var(--fz-footer-thumb);
  width: var(--fz-footer-thumb);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-circle, 9999px);
}

.fz-minilist__media.fz-minilist__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fz-minilist__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fz-footer-post-size);
  line-height: 1.35;
  color: var(--color-heading, #3c1a33);
  transition: color var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-minilist__link:hover .fz-minilist__title { color: var(--color-accent, #a84574); }

.fz-footer__subscribe {
  display: flex;
  flex-direction: column;
  flex: 1 1 30%;
  min-width: 0;
}

/* ---- Newsletter opt-in box ---- */

.fz-optin {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: clamp(1.25rem, 2vw, 2rem);
  border-radius: var(--fz-optin-radius);
  background: var(--color-white, #fff);
  box-shadow: 0 18px 40px 0 rgba(142, 66, 103, 0.08);
}

.fz-optin__title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.125rem, 1.35vw, 1.625rem);
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-heading, #3c1a33);
}

.fz-optin__text {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-small-size, 0.875rem);
  line-height: 1.6;
  color: var(--color-body-muted, #5c545a);
}

.fz-optin__form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* The field takes the button's own asymmetric shape and a soft pink edge, so
   the two read as a pair rather than a rounded box above a shaped one.

   Scoped under .fz-optin because Hello Elementor's reset styles inputs by
   attribute —  outranks a single class whatever the load
   order, and was putting a grey 3px-rounded box here instead. */
.fz-optin .fz-optin__input {
  width: 100%;
  min-width: 0;
  padding: 0.875rem 1.375rem;
  border: 1px solid var(--fz-optin-border);
  border-radius: var(--radius-button, 20px 30px 30px 20px);
  background: var(--color-white, #fff);
  color: var(--color-body-on-light, #302e2f);
  transition: border-color var(--duration-fast, 200ms) var(--ease-standard, ease);
}

.fz-optin .fz-optin__input:focus {
  outline: none;
  border-color: var(--color-accent, #a84574);
}

.fz-optin .fz-optin__input::placeholder { color: var(--color-gray-3, #aa9da7); }

.fz-optin__button {
  justify-content: center;
  width: 100%;
}

.fz-optin__note,
.fz-optin__done {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-small-size, 0.875rem);
  line-height: 1.5;
  color: var(--color-body-muted, #5c545a);
}

.fz-optin__done { color: var(--color-accent, #a84574); }

/* ==========================================================================
   RESPONSIVE
   Breakpoints match Elementor's own, so the widgets' responsive controls and
   this file always step down together.
   ========================================================================== */

@media (max-width: 1024px) {
  .fz-cards > .fz-cards__rule { display: none; }

  .fz-testimonial__inner { gap: 1.5rem; }
  .fz-testimonial__mark { display: none; }

  .fz-prefooter__inner,
  .fz-footer__inner { flex-direction: column; }

  .fz-aslide { flex-direction: column; align-items: flex-start; }
  .fz-aslide__media { flex: 0 0 auto; width: 100%; }
}

@media (max-width: 767px) {
  /* A phone crops the picture hard, so the words land wherever the crop puts
     them. A scrim under the copy makes that safe whatever the image, and the
     type goes light to match — this is the "dark mode" the banners need at
     this width, not a different picture. */
  .fz-banner {
    background-image: var(--fz-banner-scrim), var(--fz-banner-image-mobile, var(--fz-banner-image, none));
    align-items: flex-end;
  }

  .fz-banner__ratio { padding-top: var(--fz-banner-pad-mobile); }

  .fz-banner .fz-banner__heading,
  .fz-banner .fz-banner__heading .heading-plain { color: var(--color-white, #fff); }
  .fz-banner .fz-banner__text { color: var(--color-dove-taupe, #fddcc6); }
  .fz-banner .fz-col__category { color: var(--color-soft-gold, #e48e52); }

  .fz-kicker__rule { display: none; }
  .fz-kicker__text { white-space: normal; text-align: center; }

  /* A phone is narrower than the card, so it shrinks to the column and the set
     width becomes a ceiling rather than a measurement. */
  .fz-readnext__card { max-width: 100%; }

  .fz-sites { flex-direction: column; }

  /* Scoped to the two homepage widgets by the wrapper Elementor gives each;
     the token is redefined rather than the rule, so the title keeps one
     font-size declaration. */
  .elementor-widget-fz_article_cards .fz-cards,
  .elementor-widget-fz_new_articles .fz-cards { --fz-card-title-size: var(--fz-card-title-size-mobile); }

  .fz-linkcol__title,
  .fz-optin__title { font-size: var(--fz-footer-title-size-mobile); }
  .fz-site-card__title { font-size: var(--fz-site-card-title-mobile); }
  .fz-minilist__title { font-size: var(--fz-footer-post-size-mobile); }

  /* Nothing sits beside the arrows at this width, so they centre under the
     slide rather than hugging an edge that is no longer there. */
  .fz-aslider__controls { justify-content: center; }

  /* The testimonial is the one thing on the page with nothing beside it, so
     on a phone it takes the full width and centres rather than sitting in a
     narrow left-aligned column. */
  .fz-testimonial__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .fz-testimonial__quote { font-size: var(--fz-testimonial-quote-mobile); }
  .fz-testimonial__author {
    flex-wrap: wrap;
    justify-content: center;
    font-size: var(--fz-testimonial-author-mobile);
  }
  .fz-testimonial__rule { display: none; }
  .fz-numbers { flex-direction: row; justify-content: center; }
}