/* ==========================================================================
   Reusable component patterns. Each repeated visual pattern gets exactly
   one class here, reused everywhere it appears (Home, Category, Single).
   ========================================================================== */

/* ---- Buttons ---- */
/* A gradient is an image, and browsers do not interpolate one image into
   another — so transitioning `background` from the plum gradient to flat gold
   snapped instead of fading, which is the jump. Registering the two stops as
   real colour properties means the gradient itself never changes shape; only
   its two colours animate, and colours transition perfectly well.
   Where @property is unsupported the custom properties still resolve, the
   button still looks right, and only the fade is lost. */
@property --button-from {
  syntax: '<color>';
  inherits: false;
  initial-value: #7c2350;   /* must be a literal here; mirrors --color-plum-deep */
}

@property --button-to {
  syntax: '<color>';
  inherits: false;
  initial-value: #a84574;   /* mirrors --color-royal-mauve */
}

.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.9375rem 2rem;
  --button-from: var(--color-plum-deep);
  --button-to: var(--color-royal-mauve);
  background-image: linear-gradient(90deg, var(--button-from) 0%, var(--button-to) 100%);
  color: var(--color-white);
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: var(--text-button-size);
  line-height: var(--text-button-lh);
  font-weight: var(--text-button-weight);
  transition: --button-from var(--duration-base) var(--ease-standard),
              --button-to var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

/* Both stops travel to the same soft gold, so the gradient flattens as it
   warms rather than the colour arriving all at once. */
.button-primary:hover,
.button-primary:focus-visible {
  --button-from: var(--color-soft-gold);
  --button-to: var(--color-soft-gold);
  color: var(--color-white);
}

.button-primary .icon-arrow-right { color: var(--color-white); }

/* "Read More" text link, used on every article/category card. */
.link-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
  font-weight: var(--text-small-weight);
  color: var(--color-accent);
  transition: gap var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

/* Mauve at rest, soft gold on hover — the arrow shifts with it, so the whole
   link reads as one thing rather than a label and a stray glyph. */
.link-read-more:hover,
.link-read-more:focus-visible {
  gap: 0.625rem;
  color: var(--color-soft-gold);
}

.link-read-more .icon-arrow-right {
  color: currentColor;
  width: 0.875rem;
  height: 0.625rem;
}

.icon-arrow-right { flex-shrink: 0; }

/* ---- Category tag above a heading, links to the category archive ---- */
.category-tag {
  display: inline-block;
}

/* ---- Article card: with image (Featured / New Articles grids) ---- */
.card-article {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.card-article__image-link {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 540 / 326;
}

.card-article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-article__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card-article__title-link:hover .text-h3 { color: var(--color-accent); }

.card-article__excerpt {
  color: var(--color-body-muted);
}

/* ---- Text card: no image (the left/right cards flanking the testimonial) ---- */
.card-text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card-text__excerpt {
  color: var(--color-body-muted);
}

/* ---- Testimonial card (also reused as the 6th tile in the New Articles grid) ---- */
.card-testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
  padding: 3rem 2.5rem;
  border-radius: var(--radius-card);
  background: var(--gradient-soft-card);
}

.card-testimonial__quote {
  font-family: var(--font-editorial);
  font-size: var(--text-testimonial-size);
  line-height: var(--text-testimonial-lh);
  letter-spacing: var(--text-testimonial-ls);
  font-weight: var(--text-testimonial-weight);
  color: var(--color-body-on-light);
}

.card-testimonial__divider {
  width: 4rem;
  height: 1px;
  background: var(--color-accent);
  border: none;
}

.card-testimonial__attribution {
  font-family: var(--font-editorial);
  font-size: var(--text-attribution-size);
  line-height: var(--text-attribution-lh);
  font-weight: var(--text-attribution-weight);
  color: var(--color-accent);
}

/* ---- Slider dots (testimonial slider + New Articles / Martyrdom sliders) ---- */
.slider-dots {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.slider-dots__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-circle);
  background: var(--color-divider);
  padding: 0;
  transition: background var(--duration-fast) var(--ease-standard);
}

.slider-dots__dot.is-active {
  background: var(--color-accent);
}

/* ---- Numbered slider control (quotes slider — vertical 01/02/03 stack) ---- */
.slider-numbers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}

.slider-numbers__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: var(--radius-circle);
  border: 1px solid var(--color-dove-taupe);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  color: var(--color-body-muted);
  padding: 0;
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.slider-numbers__item.is-active {
  border-color: transparent;
  background: var(--gradient-accent-text);
  color: var(--color-white);
}

/* ---- Section eyebrow with flanking rules ("NEW ARTICLES" / "HER NAMES & TITLES") ---- */
.section-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.section-kicker__rule {
  flex: 1 1 auto;
  max-width: 10rem;
  height: 1px;
  background: var(--color-divider);
  border: none;
}

/* ---- Decorative divider used between name entries in the marquee ---- */
.name-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.name-divider__mark {
  width: 3rem;
  height: 3rem;
  color: var(--color-dove-taupe);
}

.name-divider__line {
  width: 1px;
  height: 4rem;
  background: var(--color-dove-taupe);
  border: none;
}

/* ---- Plain (non-Elementor) page shell ----
   An Elementor page prints its own canvas, so only the plain variant needs
   a prose column. */
.page-main--canvas { display: block; }

.page-header {
  padding-block: 4rem 1.5rem;
}

.page-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 52rem;
  padding-bottom: 5rem;
}

/* What the editor writes into a page arrives as plain h2s, paragraphs and
   lists. The article template styles its own; a page had nothing, so its
   headings were falling back to the parent theme's sans. */
.page-body h2,
.page-body h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-heading);
  margin-top: 1rem;
}

.page-body h2 { font-size: var(--page-h2-size); line-height: 1.25; }
.page-body h3 { font-size: var(--page-h3-size); line-height: 1.3; }

.page-body p,
.page-body li {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: 1.75;
  color: var(--color-body-on-light);
}

.page-body ul,
.page-body ol {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.25rem;
}

.page-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.page-body a:hover,
.page-body a:focus-visible { color: var(--color-plum-deep); }

/* The site map draws its own links, which are not prose and carry no rule. */
.page-body .fz-sitemap a { text-decoration: none; }