/*
Theme Name: CLRC Hello Child
Theme URI: https://clrc.libertymstudio.com/
Description: Child theme of Hello Elementor carrying the CLRC design system. Header and footer are ElementsKit templates; all page content stays editable in Elementor Free. Contains no Astra dependency.
Author: Site build
Template: hello-elementor
Version: 3.0.0
Text Domain: clrc-hello-child
*/

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
  /* Navy ladder, darkest to lightest */
  --cl-navy-900: #03102F;   /* utility bar, copyright strip        */
  --cl-navy-800: #06163D;   /* deep navy: tiles, prayer, overlays  */
  --cl-navy-700: #0A2350;   /* footer body                          */
  --cl-royal:    #0C3472;   /* royal blue: value strip, events      */
  --cl-royal-lt: #14418A;   /* raised card on a royal band          */

  /* Gold.
     gold      surfaces only (buttons, icons, rules) - 2.4:1 as text on white
     gold-lt   gold TEXT on navy            7.4-10.8:1
     gold-dk   gold TEXT on white/pale      5.2 / 4.8:1
     Navy labels sit on gold fills (7.22:1); white on gold is 2.44 and fails. */
  --cl-gold:    #D99A22;
  --cl-gold-lt: #F0C568;
  --cl-gold-dk: #92640F;

  --cl-pale:    #F3F7FF;    /* pale blue band            */
  --cl-pale-2:  #E9EFFC;    /* pale blue, one step down  */
  --cl-white:   #FFFFFF;
  --cl-ink:     #0A1738;    /* headings + body   16.4:1 on pale */
  --cl-muted:   #55628A;    /* secondary copy     5.6:1 on pale */
  --cl-on-dark: #C7D2EA;    /* body on navy      7.9-11.6:1     */

  --cl-line:      rgba(10, 23, 56, .10);
  --cl-line-dark: rgba(255, 255, 255, .16);
  --cl-line-gold: rgba(217, 154, 34, .38);

  /* Shape - the reference uses restrained rounding, not pills */
  --cl-r-sm:  4px;
  --cl-r:     10px;
  --cl-r-lg:  14px;
  --cl-r-btn: 5px;

  --cl-sh-1: 0 1px 2px rgba(10,23,56,.05), 0 4px 14px rgba(10,23,56,.07);
  --cl-sh-2: 0 2px 4px rgba(10,23,56,.06), 0 18px 40px rgba(10,23,56,.12);
  --cl-sh-panel: 0 4px 10px rgba(10,23,56,.05), 0 24px 60px rgba(10,23,56,.10);
  --cl-sh-gold: 0 8px 22px rgba(217,154,34,.32);

  --cl-container: 1240px;
  --cl-ease: cubic-bezier(.22,.61,.36,1);
  --cl-t: .28s;

  /* Type */
  --cl-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --cl-sans:  "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --cl-fs-hero:    clamp(2.5rem, 1.35rem + 3.9vw, 4.15rem);
  --cl-fs-h2:      clamp(1.95rem, 1.3rem + 2.2vw, 3rem);
  --cl-fs-h3:      clamp(1.05rem, .98rem + .35vw, 1.22rem);
  --cl-fs-lead:    clamp(1rem, .96rem + .25vw, 1.09rem);
  --cl-fs-body:    1rem;
  --cl-fs-sm:      .9rem;
  --cl-fs-xs:      .8rem;
  --cl-fs-eyebrow: .78rem;
}

/* =========================================================================
   2. BASE
   ========================================================================= */
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
@media (max-width: 921px) { html { scroll-padding-top: 84px; } }

body {
  font-family: var(--cl-sans);
  font-size: var(--cl-fs-body);
  line-height: 1.62;
  color: var(--cl-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

/* Section headings are the serif; the hero headline is a heavy sans. */
h1, h2, h3, h4, h5, h6, .elementor-heading-title {
  font-family: var(--cl-serif);
  color: var(--cl-ink);
  line-height: 1.12;
  letter-spacing: -.015em;
  font-weight: 600;
}
h2 { font-size: var(--cl-fs-h2); }
h3 { font-size: var(--cl-fs-h3); line-height: 1.3; }

/* Card titles and UI headings use the sans. */
body .cl-cardtitle .elementor-heading-title,
body .cl-tile .elementor-heading-title,
body .cl-value-title .elementor-heading-title,
body .cl-evt-title .elementor-heading-title {
  font-family: var(--cl-sans);
  font-weight: 700;
  letter-spacing: -.005em;
}

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--cl-navy-800); outline-offset: 3px; border-radius: 3px; }
.cl-band-royal :focus-visible, .cl-band-deep :focus-visible, .cl-hero :focus-visible,
.cl-footer :focus-visible, .cl-topbar :focus-visible, .cl-copyright :focus-visible, .cl-prayer :focus-visible,
.cl-tile :focus-visible { outline-color: var(--cl-gold-lt); }

.skip-link:focus {
  background: var(--cl-navy-800); color: #fff; padding: 14px 22px;
  border-radius: 0 0 var(--cl-r-sm) 0; font-weight: 600; z-index: 100000;
}

/* =========================================================================
   3. BANDS
   ========================================================================= */
.cl-band-white { background: var(--cl-white); }
.cl-band-pale  { background: var(--cl-pale); }
.cl-band-pale2 { background: var(--cl-pale-2); }

.cl-band-royal { background: var(--cl-royal); color: var(--cl-on-dark); position: relative; }
.cl-band-deep  { background: var(--cl-navy-800); color: var(--cl-on-dark); position: relative; }

/* A soft centre wash so large navy areas are not flat. */
.cl-band-royal::before, .cl-band-deep::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 0%, rgba(255,255,255,.07), transparent 65%);
}
.cl-band-royal > *, .cl-band-deep > * { position: relative; z-index: 1; }

body .cl-band-royal h2, body .cl-band-deep h2,
body .cl-band-royal .elementor-heading-title,
body .cl-band-deep .elementor-heading-title { color: #fff; }

/* =========================================================================
   4. EYEBROWS, RULES, HEADINGS
   ========================================================================= */
body .cl-eyebrow .elementor-heading-title {
  font-family: var(--cl-sans);
  font-size: var(--cl-fs-eyebrow);
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--cl-gold-dk);
  display: flex;
  align-items: center;
  gap: 12px;
}
/* rule to the left of the label (About section) */
body .cl-eyebrow-l .elementor-heading-title::before {
  content: ""; flex: 0 0 30px; height: 2px; background: var(--cl-gold); border-radius: 2px;
}
/* centred label with a short rule above it (Service Times, Ministries) */
body .cl-eyebrow-c .elementor-heading-title { justify-content: center; flex-direction: column; gap: 14px; }
body .cl-eyebrow-c .elementor-heading-title::before {
  content: ""; width: 42px; height: 2px; background: var(--cl-gold); border-radius: 2px;
}
/* gold text version for dark bands */
body .cl-band-royal .cl-eyebrow .elementor-heading-title,
body .cl-band-deep .cl-eyebrow .elementor-heading-title,
body .cl-hero .cl-eyebrow .elementor-heading-title { color: var(--cl-gold-lt); }

/* Short gold rule used under centred serif headings */
.cl-rule { width: 54px; height: 3px; border: 0; border-radius: 2px; background: var(--cl-gold); }

body .cl-h2 .elementor-heading-title { font-size: var(--cl-fs-h2); font-weight: 600; }
body .cl-lead, body .cl-lead p { font-size: var(--cl-fs-lead); color: var(--cl-muted); line-height: 1.6; }
body .cl-band-royal .cl-lead p, body .cl-band-deep .cl-lead p { color: var(--cl-on-dark); }
body .cl-muted, body .cl-muted p { color: var(--cl-muted); }
body .cl-ondark, body .cl-ondark p { color: var(--cl-on-dark); }
.cl-center { text-align: center; }
.cl-balance .elementor-heading-title { text-wrap: balance; }
.cl-maxw-md { max-width: 640px; }
.cl-sr-only { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* =========================================================================
   5. BUTTONS - rounded rectangles, as in the reference
   ========================================================================= */
body .cl-btn .elementor-button, a.cl-btn {
  font-family: var(--cl-sans);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: var(--cl-r-btn);
  padding: 15px 28px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid transparent;
  line-height: 1.2;
  transition: background-color var(--cl-t) var(--cl-ease), color var(--cl-t) var(--cl-ease),
              border-color var(--cl-t) var(--cl-ease), transform var(--cl-t) var(--cl-ease),
              box-shadow var(--cl-t) var(--cl-ease);
}
/* Primary: gold fill, navy label (7.22:1) */
body .cl-btn-gold .elementor-button, a.cl-btn-gold {
  background: linear-gradient(180deg, #E3A62D 0%, var(--cl-gold) 100%);
  color: var(--cl-navy-800);
  box-shadow: var(--cl-sh-gold);
}
body .cl-btn-gold .elementor-button:hover, a.cl-btn-gold:hover {
  background: linear-gradient(180deg, var(--cl-gold-lt) 0%, #E3A62D 100%);
  color: var(--cl-navy-900);
  transform: translateY(-2px);
}
/* Outline on dark */
body .cl-btn-ghost .elementor-button, a.cl-btn-ghost {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-color: rgba(255,255,255,.42);
}
body .cl-btn-ghost .elementor-button:hover, a.cl-btn-ghost:hover {
  background: #fff; color: var(--cl-navy-800); border-color: #fff; transform: translateY(-2px);
}
/* Outline on light */
body .cl-btn-outline .elementor-button, a.cl-btn-outline {
  background: transparent; color: var(--cl-navy-800); border-color: rgba(10,23,56,.28);
}
body .cl-btn-outline .elementor-button:hover, a.cl-btn-outline:hover {
  background: var(--cl-navy-800); color: #fff; border-color: var(--cl-navy-800); transform: translateY(-2px);
}
/* Small gold text link with arrow */
body .cl-link .elementor-button, a.cl-link {
  background: none; border: 0; box-shadow: none; padding: 0;
  min-height: 40px;
  color: var(--cl-gold-dk);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .74rem;
  font-weight: 700;
}
body .cl-link .elementor-button .elementor-button-icon { transition: transform var(--cl-t) var(--cl-ease); }
body .cl-link .elementor-button:hover { color: var(--cl-navy-800); background: none; }
body .cl-link .elementor-button:hover .elementor-button-icon { transform: translateX(5px); }
body .cl-btn .elementor-button:hover .elementor-button-icon { transform: translateX(3px); }
body .cl-btn .elementor-button-icon { transition: transform var(--cl-t) var(--cl-ease); }

@media (max-width: 767px) {
  body .cl-btn-block { width: 100%; }
  body .cl-btn-block .elementor-button { width: 100%; }
}

/* =========================================================================
   6. HERO
   ========================================================================= */
.cl-hero { color: var(--cl-on-dark); }
body .cl-hero .elementor-heading-title { color: #fff; }

/* Gold italic "Welcome To" with a trailing rule */
body .cl-welcome .elementor-heading-title {
  font-family: var(--cl-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.35rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cl-gold-lt);
  display: flex; align-items: center; gap: 14px;
}
body .cl-welcome .elementor-heading-title::after {
  content: ""; flex: 0 0 54px; height: 1px; background: rgba(240,197,104,.75);
}

/* Two-line headline: white line, gold line */
body .cl-hero-l1 .elementor-heading-title,
body .cl-hero-l2 .elementor-heading-title {
  font-family: var(--cl-sans);
  font-weight: 800;
  font-size: var(--cl-fs-hero);
  line-height: 1.03;
  letter-spacing: -.025em;
}
body .cl-hero-l2 .elementor-heading-title { color: var(--cl-gold); }
body .cl-hero-sub .elementor-heading-title {
  font-family: var(--cl-sans);
  font-weight: 700;
  font-size: clamp(1rem, .92rem + .45vw, 1.28rem);
  letter-spacing: -.005em;
  color: #fff;
}
.cl-dot { color: var(--cl-gold); padding: 0 .35em; }
body .cl-hero-intro p { color: #E4EAF7; font-size: 1.02rem; max-width: 44ch; }

/* Scripture card */
.cl-quotecard {
  background: rgba(3,16,47,.68);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--cl-r);
  backdrop-filter: blur(5px);
  max-width: 400px;
  position: relative;
}
body .cl-quotecard .cl-quote p {
  color: #fff; font-size: 1.02rem; line-height: 1.55; margin: 0; font-style: normal;
}
body .cl-quotecard .cl-quote p::before {
  content: "\201C";
  font-family: var(--cl-serif);
  color: var(--cl-gold);
  font-size: 2.6rem;
  line-height: 0;
  vertical-align: -.34em;
  margin-right: .12em;
}
body .cl-quotecite p { color: var(--cl-gold-lt); font-size: var(--cl-fs-sm); margin: 0; }
.cl-sc { font-variant: small-caps; letter-spacing: .04em; }
@media (max-width: 1024px) { .cl-quotecard { max-width: 100%; } }

/* Play icon inside the Watch Online button */
body .cl-btn-play .elementor-button-icon {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--cl-gold);
  color: var(--cl-gold);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .55rem;
}
body .cl-btn-play .elementor-button:hover .elementor-button-icon {
  transform: none; border-color: var(--cl-navy-800); color: var(--cl-navy-800);
}

/* =========================================================================
   7. FOUR-VALUE STRIP
   ========================================================================= */
.cl-valuestrip { border-bottom: 1px solid rgba(255,255,255,.10); }
.cl-value { text-align: center; position: relative; }
/* thin vertical dividers between the four columns */
.cl-value + .cl-value::before {
  content: ""; position: absolute; left: calc(-1 * var(--cl-vgap, 28px) / 2 - 1px); top: 12%;
  width: 1px; height: 76%; background: rgba(255,255,255,.15);
}
@media (max-width: 767px) { .cl-value + .cl-value::before { display: none; } }
body .cl-value-title .elementor-heading-title { color: #fff; font-size: 1.06rem; }
body .cl-value-sub p { color: var(--cl-on-dark); font-size: var(--cl-fs-xs); margin: 0; }
body .cl-valueicon .elementor-icon { color: var(--cl-gold); font-size: 30px; }
body .cl-valueicon .elementor-icon svg { width: 30px; height: 30px; fill: currentColor; }

/* =========================================================================
   8. SERVICE SCHEDULE PANEL
   ========================================================================= */
.cl-panel {
  background: #fff;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-lg);
  box-shadow: var(--cl-sh-panel);
}
ul.cl-sched {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px;
}
ul.cl-sched > li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 0;
}
/* divider between the two schedule columns */
ul.cl-sched > li:nth-child(odd) { border-right: 1px solid var(--cl-line); padding-right: 26px; }
.cl-sched-ico {
  flex: 0 0 38px; width: 38px; height: 38px;
  border: 1.5px solid var(--cl-line-gold);
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cl-gold); font-size: 17px;
}
.cl-sched-name { display: block; font-weight: 700; color: var(--cl-ink); font-size: .95rem; line-height: 1.35; }
.cl-sched-when { display: block; color: var(--cl-muted); font-size: var(--cl-fs-sm); margin-top: 3px; font-variant-numeric: tabular-nums; }
body .cl-sched-wrap p { margin: 0; }
@media (max-width: 900px) {
  ul.cl-sched { grid-template-columns: 1fr; }
  ul.cl-sched > li:nth-child(odd) { border-right: 0; padding-right: 0; }
  ul.cl-sched > li + li { border-top: 1px solid var(--cl-line); }
}

/* =========================================================================
   9. ABOUT FEATURE PILLS
   ========================================================================= */
ul.cl-pills {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
ul.cl-pills > li {
  display: flex; align-items: center; gap: 11px;
  background: var(--cl-pale);
  border: 1px solid rgba(12,52,114,.10);
  border-radius: var(--cl-r-sm);
  padding: 13px 16px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--cl-ink);
}
ul.cl-pills .cl-pill-ico { color: var(--cl-gold); font-size: 17px; flex: 0 0 auto; }
body .cl-pills-wrap p { margin: 0; }
@media (max-width: 480px) { ul.cl-pills { grid-template-columns: 1fr; } }

.cl-photo img { border-radius: var(--cl-r); display: block; width: 100%; object-fit: cover; }

/* =========================================================================
   10. MINISTRY CARDS (five across)
   ========================================================================= */
.cl-card {
  background: #fff;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-r-lg);
  box-shadow: var(--cl-sh-1);
  overflow: visible;
  transition: transform var(--cl-t) var(--cl-ease), box-shadow var(--cl-t) var(--cl-ease);
}
.cl-card:hover, .cl-card:focus-within { transform: translateY(-6px); box-shadow: var(--cl-sh-2); }

.cl-mincard-media { position: relative; overflow: visible; }
.cl-mincard-media .elementor-widget-image { overflow: hidden; border-radius: var(--cl-r-lg) var(--cl-r-lg) 0 0; display: block; }
body .cl-mincard-media img {
  aspect-ratio: 5 / 4; object-fit: cover; width: 100%; display: block;
  border-radius: var(--cl-r-lg) var(--cl-r-lg) 0 0;
  transition: transform .6s var(--cl-ease);
}
.cl-card:hover .cl-mincard-media img { transform: scale(1.06); }

/* circular gold badge straddling the image / content edge */
body .cl-mincard-badge {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  z-index: 3;
}
body .cl-mincard-badge .elementor-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(160deg, var(--cl-gold-lt), var(--cl-gold));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(217,154,34,.42);
}
body .cl-mincard-badge .elementor-icon svg { width: 20px; height: 20px; fill: currentColor; }
.cl-mincard-body { text-align: center; }
body .cl-cardtitle .elementor-heading-title { font-size: 1.02rem; color: var(--cl-ink); }
body .cl-cardtext p { font-size: var(--cl-fs-sm); color: var(--cl-muted); }

/* =========================================================================
   11. EVENTS (one featured + two secondary)
   ========================================================================= */
.cl-evtcard {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--cl-r-lg);
  overflow: hidden;
  transition: transform var(--cl-t) var(--cl-ease), border-color var(--cl-t) var(--cl-ease);
}
.cl-evtcard:hover, .cl-evtcard:focus-within { transform: translateY(-5px); border-color: rgba(240,197,104,.55); }
.cl-evt-media { overflow: hidden; }
body .cl-evt-media img { width: 100%; display: block; object-fit: cover; transition: transform .6s var(--cl-ease); }
body .cl-evt-feat .cl-evt-media img { aspect-ratio: 16 / 8; }
body .cl-evt-sm .cl-evt-media img { aspect-ratio: 16 / 9; }
.cl-evtcard:hover .cl-evt-media img { transform: scale(1.05); }

/* white date badge */
.cl-datebadge {
  background: #fff;
  border-radius: var(--cl-r);
  box-shadow: 0 10px 26px rgba(3,16,47,.34);
  padding: 12px 8px 10px;
  text-align: center;
  min-width: 86px;
  line-height: 1.05;
}
.cl-db-m { display: block; font-family: var(--cl-sans); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--cl-royal); }
.cl-db-d { display: block; font-family: var(--cl-serif); font-size: 1.6rem; font-weight: 700; color: var(--cl-ink); margin: 3px 0 2px; }
.cl-db-y { display: block; font-size: .72rem; color: var(--cl-muted); }
body .cl-datebadge-wrap p { margin: 0; }
/* featured: badge lifts over the image from inside the content row */
.cl-evt-badge-feat { margin-top: -56px; z-index: 2; position: relative; }
/* small cards: badge sits over the top-left of the image */
.cl-evt-badge-sm { position: absolute; top: 16px; left: 16px; z-index: 2; }
.cl-evt-sm .cl-evt-media { position: relative; }

body .cl-evt-title .elementor-heading-title { color: #fff; font-size: 1.15rem; line-height: 1.25; }
body .cl-evt-feat .cl-evt-title .elementor-heading-title { font-size: 1.42rem; }
body .cl-evt-desc p { color: var(--cl-on-dark); font-size: var(--cl-fs-sm); }
ul.cl-evt-meta { list-style: none; margin: 0; padding: 0; }
ul.cl-evt-meta li { display: flex; align-items: center; gap: 9px; color: var(--cl-on-dark); font-size: var(--cl-fs-sm); margin-bottom: 7px; }
ul.cl-evt-meta .cl-meta-ico {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(217,154,34,.16); border: 1px solid var(--cl-line-gold);
  color: var(--cl-gold-lt); display: inline-flex; align-items: center; justify-content: center; font-size: .62rem;
}
body .cl-evt-meta-wrap p { margin: 0; }

/* decorative carousel controls (static - the grid is the real layout) */
.cl-carousel { position: relative; }
.cl-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--cl-line-gold); background: rgba(217,154,34,.10);
  color: var(--cl-gold-lt);
  display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.cl-carousel-arrow.is-prev { left: -46px; }
.cl-carousel-arrow.is-next { right: -46px; }
@media (max-width: 1400px) { .cl-carousel-arrow { display: none; } }
.cl-dots { display: flex; justify-content: center; gap: 9px; }
.cl-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.30); display: block; }
.cl-dots span.is-on { background: var(--cl-gold); width: 22px; border-radius: 5px; }
body .cl-dots-wrap p { margin: 0; }

/* =========================================================================
   12. WATCH / LIVE / GIVE TILES
   ========================================================================= */
.cl-tile {
  position: relative;
  border-radius: var(--cl-r);
  overflow: hidden;
  min-height: 300px;
  transition: transform var(--cl-t) var(--cl-ease), box-shadow var(--cl-t) var(--cl-ease);
}
.cl-tile:hover, .cl-tile:focus-within { transform: translateY(-5px); box-shadow: var(--cl-sh-2); }
body .cl-tile .elementor-heading-title { color: #fff; font-size: 1.3rem; }
body .cl-tile .cl-ondark p { color: #E4EAF7; font-size: var(--cl-fs-sm); }
body .cl-tileicon .elementor-icon {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--cl-gold); color: var(--cl-gold);
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
}
/* the Give tile keeps the reference's warmer gold wash */
body .cl-tile-gold .cl-tileicon .elementor-icon { border-color: #fff; color: #fff; }

/* =========================================================================
   13. LEADERSHIP
   ========================================================================= */
.cl-leader {
  background: #fff; border: 1px solid var(--cl-line);
  border-radius: var(--cl-r); box-shadow: var(--cl-sh-1);
  text-align: center; overflow: hidden;
  transition: transform var(--cl-t) var(--cl-ease), box-shadow var(--cl-t) var(--cl-ease);
}
.cl-leader:hover { transform: translateY(-5px); box-shadow: var(--cl-sh-2); }
.cl-leader-media { overflow: hidden; border-radius: var(--cl-r-sm); }
body .cl-leader img {
  aspect-ratio: 1 / 1; object-fit: cover; width: 100%; display: block;
  border-radius: var(--cl-r-sm);
  transition: transform .6s var(--cl-ease);
}
.cl-leader:hover img { transform: scale(1.05); }
body .cl-leader-name .elementor-heading-title { font-family: var(--cl-sans); font-weight: 700; font-size: .98rem; color: var(--cl-ink); }
body .cl-leader-role p { font-size: var(--cl-fs-xs); color: var(--cl-muted); margin: 0; }

/* =========================================================================
   14. PRAYER BANNER
   ========================================================================= */
.cl-prayer { position: relative; overflow: hidden; }
.cl-prayer > * { position: relative; z-index: 1; }
body .cl-prayer .elementor-heading-title { color: #fff; }

/* =========================================================================
   16. NEWSLETTER STRIP
   ========================================================================= */
.cl-news { background: var(--cl-pale-2); }
body .cl-news-title .elementor-heading-title { font-family: var(--cl-sans); font-weight: 700; font-size: 1.32rem; color: var(--cl-ink); }
body .cl-news-sub p { color: var(--cl-muted); font-size: var(--cl-fs-sm); margin: 0; }
body .cl-newsicon .elementor-icon {
  width: 52px; height: 52px; border-radius: var(--cl-r-sm);
  border: 2px solid rgba(10,23,56,.22); color: var(--cl-navy-800);
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
}

/* =========================================================================
   17. HEADER (ElementsKit template on Hello Elementor)
   No Astra selectors remain: the header is an Elementor container tree and the
   navigation is the ElementsKit nav-menu widget.
   ========================================================================= */
.cl-site-header {
  position: sticky; top: 0; z-index: 500;
  background: #fff;
  border-bottom: 1px solid var(--cl-line);
  transition: box-shadow var(--cl-t) var(--cl-ease);
}
.cl-site-header.cl-stuck { box-shadow: 0 6px 24px rgba(3,16,47,.10); }
.admin-bar .cl-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .cl-site-header { top: 46px; } }

/* Brand lockup */
body .cl-brand .elementor-heading-title,
body .cl-brand .elementor-heading-title a {
  font-family: var(--cl-serif);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--cl-ink);
  display: block;
  max-width: 15ch;
  text-decoration: none;
}
body .cl-brand .elementor-heading-title a:hover { color: var(--cl-gold-dk); }
body .cl-brand .elementor-heading-title::after {
  content: ""; display: block; width: 36px; height: 3px;
  margin-top: 7px; background: var(--cl-gold); border-radius: 2px;
}
.cl-brandcol, .cl-navcol, .cl-ctacol { flex-shrink: 0; }
.cl-navcol { flex: 1 1 auto; }

/* ElementsKit desktop navigation */
body .cl-mainnav .elementskit-navbar-nav > li > a {
  font-family: var(--cl-sans);
  font-weight: 600;
  font-size: .94rem;
  color: var(--cl-ink);
  padding: 10px 15px;
  position: relative;
  text-transform: none;
  letter-spacing: 0;
}
body .cl-mainnav .elementskit-navbar-nav > li > a:hover { color: var(--cl-gold-dk); }
/* animated gold underline */
body .cl-mainnav .elementskit-navbar-nav > li > a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 2px;
  background: var(--cl-gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s var(--cl-ease);
}
body .cl-mainnav .elementskit-navbar-nav > li > a:hover::after { transform: scaleX(1); }
body .cl-mainnav .elementskit-navbar-nav > li.current-menu-item > a,
body .cl-mainnav .elementskit-navbar-nav > li.current-menu-ancestor > a { color: var(--cl-gold-dk); }
body .cl-mainnav .elementskit-navbar-nav > li.current-menu-item > a::after,
body .cl-mainnav .elementskit-navbar-nav > li.current-menu-ancestor > a::after { transform: scaleX(1); }

/* Dropdowns */
body .cl-mainnav .elementskit-navbar-nav .elementskit-dropdown {
  border-radius: var(--cl-r);
  box-shadow: var(--cl-sh-2);
  border: 1px solid var(--cl-line);
  padding: 6px;
  background: #fff;
  min-width: 232px;
}
body .cl-mainnav .elementskit-navbar-nav .elementskit-dropdown > li > a {
  font-family: var(--cl-sans); font-size: .9rem; font-weight: 500;
  color: var(--cl-ink); border-radius: var(--cl-r-sm); padding: 9px 12px;
}
body .cl-mainnav .elementskit-navbar-nav .elementskit-dropdown > li > a:hover {
  background: var(--cl-pale); color: var(--cl-gold-dk);
}
body .cl-mainnav .elementskit-submenu-indicator { color: currentColor; font-size: .7rem; }

/* Hamburger + off-canvas panel */
body .cl-mainnav .elementskit-menu-hamburger {
  border: 1px solid var(--cl-line); border-radius: var(--cl-r-sm);
  padding: 9px 11px; background: #fff;
}
body .cl-mainnav .elementskit-menu-hamburger .elementskit-menu-hamburger-icon { background-color: var(--cl-ink); }
body .cl-mainnav .elementskit-menu-offcanvas-elements,
body .cl-mainnav .elementskit-menu-container.elementskit-menu-offcanvas-elements { background: #fff; }
/* ElementsKit garde la classe offcanvas meme sur bureau : ces regles ne doivent
   s appliquer qu au panneau mobile, sinon un filet gris apparait sous le menu. */
@media (max-width: 1024px) {
  body .cl-mainnav .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a {
    padding: 14px 18px; min-height: 48px; border-bottom: 1px solid var(--cl-line);
  }
  body .cl-mainnav .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a::after { display: none; }
}
/* Aucun filet sous le menu de bureau */
@media (min-width: 1025px) {
  body .cl-mainnav .ekit-menu-nav-link,
  body .cl-mainnav .elementskit-navbar-nav > li > a { border: 0 !important; }
}
/* ElementsKit ecrit ses couleurs de menu dans le CSS du template (post-85.css),
   avec une portee ID qui bat toute regle de theme : !important est ici le seul
   moyen propre de garder la charte. */
body .cl-mainnav .elementskit-navbar-nav > li > a { color: var(--cl-ink) !important; }
body .cl-mainnav .elementskit-navbar-nav > li > a:hover,
body .cl-mainnav .elementskit-navbar-nav > li.current-menu-item > a,
body .cl-mainnav .elementskit-navbar-nav > li.current-menu-ancestor > a,
body .cl-mainnav .elementskit-navbar-nav > li.active > a { color: var(--cl-gold-dk) !important; }
body .cl-mainnav .elementskit-nav-identity-panel .elementskit-menu-close {
  color: var(--cl-ink); border: 1px solid var(--cl-line); border-radius: var(--cl-r-sm); padding: 6px 10px;
}

/* Header CTA keeps the gold button treatment */
body .cl-headercta .elementor-button { padding: 14px 24px; font-size: .8rem; }
@media (max-width: 1024px) { body .cl-headercta .elementor-button { padding: 12px 18px; font-size: .74rem; } }
/* Sur telephone le CTA dore reste visible (conversion) mais devient compact,
   plutot que masque. */
@media (max-width: 600px) {
  body .cl-headercta .elementor-button { padding: 10px 12px; font-size: .66rem; letter-spacing: .05em; gap: 6px; min-height: 42px; }
  body .cl-headercta .elementor-button .elementor-button-icon { display: none; }
  body .cl-brand .elementor-heading-title { font-size: .88rem; max-width: 12ch; }
}
@media (max-width: 400px) {
  body .cl-headercta .elementor-button { padding: 9px 10px; font-size: .6rem; }
}

/* Utility bar */
.cl-topbar { font-size: .8rem; }
body .cl-topbar, body .cl-topbar p, body .cl-topbar span { color: #DCE4F5; }
body .cl-topbar a { color: #DCE4F5; text-decoration: none; }
body .cl-topbar a:hover { color: var(--cl-gold-lt); text-decoration: underline; }
.cl-util-line { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cl-util-line .cl-uico { color: var(--cl-gold); font-size: .78rem; }
.cl-util-dot { opacity: .38; }
.cl-usocial { display: inline-flex; align-items: center; gap: 8px; }
.cl-usocial .cl-soc {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(240,197,104,.42);
  color: var(--cl-gold-lt);
  display: inline-flex; align-items: center; justify-content: center; font-size: .72rem;
}
body .cl-util-right .elementor-widget-container { text-align: right; }
@media (max-width: 767px) {
  .cl-topbar { text-align: center; }
  body .cl-util-right .elementor-widget-container { text-align: center; }
  .cl-util-line { justify-content: center; }
}

/* =========================================================================
   18. FOOTER (ElementsKit template)
   ========================================================================= */
.cl-footer { color: var(--cl-on-dark); }
.cl-footer p, .cl-footer li, .cl-footer span { color: var(--cl-on-dark); }
.cl-footer a { color: var(--cl-on-dark); text-decoration: none; }
.cl-footer a:hover { color: var(--cl-gold-lt); text-decoration: underline; }

body .cl-foot-title .elementor-heading-title {
  color: #fff; font-family: var(--cl-sans); font-size: .98rem; font-weight: 700;
  letter-spacing: 0; text-transform: none; margin-bottom: 14px;
}

/* Footer nav columns are the ElementsKit menu widget forced vertical. */
body .cl-footnav .elementskit-navbar-nav,
body .cl-footnav .elementskit-navbar-nav-default .elementskit-navbar-nav {
  flex-direction: column !important; align-items: flex-start; width: 100%;
}
body .cl-footnav .elementskit-navbar-nav > li { width: 100%; }
body .cl-footnav .elementskit-navbar-nav > li > a {
  color: var(--cl-on-dark) !important;
  font-family: var(--cl-sans); font-weight: 400; font-size: .9rem;
  padding: 6px 0 !important; min-height: 28px; background: none !important;
}
body .cl-footnav .elementskit-navbar-nav > li > a:hover { color: var(--cl-gold-lt) !important; text-decoration: underline; }
/* the footer menus are plain lists: no hamburger, no dropdown furniture */
body .cl-footnav .elementskit-menu-hamburger,
body .cl-footnav .elementskit-nav-identity-panel,
body .cl-footnav .elementskit-submenu-indicator { display: none !important; }
body .cl-footnav .elementskit-menu-container { position: static !important; background: none !important; box-shadow: none !important; width: 100% !important; transform: none !important; }
body .cl-footnav .elementskit-navbar-nav-default { padding: 0; }

/* Brand block */
.cl-foot-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cl-foot-seal {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  border: 2px solid var(--cl-gold); position: relative; background: rgba(217,154,34,.10);
}
.cl-foot-seal::after {
  content: ""; position: absolute; left: 50%; top: 11px; transform: translateX(-50%);
  width: 2px; height: 22px; background: var(--cl-gold);
  box-shadow: -7px 7px 0 0 var(--cl-gold), 7px 7px 0 0 var(--cl-gold);
}
.cl-foot-name { display: flex; flex-direction: column; line-height: 1.1; }
.cl-foot-name strong { font-family: var(--cl-sans); font-size: 1.24rem; font-weight: 800; color: #fff; letter-spacing: .01em; text-transform: uppercase; }
.cl-foot-name em { font-style: normal; font-size: .74rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--cl-gold-lt); margin-top: 3px; }
.cl-foot-blurb { font-size: .88rem; max-width: 32ch; margin-bottom: 16px; }
.cl-fsocial { display: flex; gap: 10px; }
.cl-fsocial .cl-soc {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.26); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: .82rem;
  transition: background-color var(--cl-t) var(--cl-ease), border-color var(--cl-t) var(--cl-ease);
}
.cl-fsocial .cl-soc:hover { background: var(--cl-gold); border-color: var(--cl-gold); color: var(--cl-navy-800); }

ul.cl-foot-contact { list-style: none; margin: 0; padding: 0; }
ul.cl-foot-contact li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; font-size: .88rem; line-height: 1.5; }
ul.cl-foot-contact .cl-fico { color: var(--cl-gold); font-size: .95rem; flex: 0 0 auto; margin-top: 2px; }
ul.cl-foot-contact a { display: inline-block; padding-block: 3px; }
body .cl-footcta .elementor-button { font-size: .78rem; padding: 13px 22px; min-height: 44px; }

/* Copyright strip */
.cl-copyright { font-size: .84rem; }
.cl-copyright, .cl-copyright p, .cl-copyright span { color: var(--cl-on-dark); }
.cl-copyright a { color: var(--cl-on-dark); text-decoration: underline; display: inline-block; padding-block: 5px; min-height: 24px; }
.cl-copyright a:hover { color: var(--cl-gold-lt); }
.cl-copy-r { display: inline-flex; align-items: center; gap: 4px; }
.cl-copy-sep { padding: 0 8px; opacity: .35; }
body .cl-copyright-links .elementor-widget-container { text-align: right; }
@media (max-width: 767px) {
  .cl-copyright { text-align: center; }
  body .cl-copyright-links .elementor-widget-container { text-align: center; }
}

/* Hello Elementor ships almost no chrome, but make sure nothing it does print
   fights the Elementor header/footer templates. */
.site-header:not(.cl-site-header), .site-footer:not(.cl-footer) { display: none; }


/* =========================================================================
   19. ENTRANCE ANIMATION
   Content is only hidden while JS is proven to be driving the reveal.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .cl-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--cl-ease), transform .55s var(--cl-ease); }
  .js-reveal .cl-reveal.is-in { opacity: 1; transform: none; }
  .js-reveal .cl-reveal-d1 { transition-delay: .07s; }
  .js-reveal .cl-reveal-d2 { transition-delay: .14s; }
  .js-reveal .cl-reveal-d3 { transition-delay: .21s; }
  .js-reveal .cl-reveal-d4 { transition-delay: .28s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms!important; transition-duration: .001ms!important; scroll-behavior: auto!important; }
}

/* =========================================================================
   20. RESPONSIVE GUARDS
   ========================================================================= */
img, video, iframe, table, pre { max-width: 100%; }
.elementor-section, .e-con, .e-con-inner { max-width: 100%; }

/* =========================================================================
   21. CONTACT FORM (WPForms Lite, modern markup)
   ========================================================================= */
body .wpforms-container.cl-form {
  --wpforms-field-border-radius: 6px;
  --wpforms-field-border-size: 1px;
  --wpforms-field-border-color: rgba(10,23,56,.22);
  --wpforms-field-border-color-spare: rgba(10,23,56,.22);
  --wpforms-field-background-color: #ffffff;
  --wpforms-field-text-color: #0A1738;
  --wpforms-field-size-input-height: 50px;
  --wpforms-field-size-padding-h: 15px;
  --wpforms-field-size-font-size: 16px;
  --wpforms-field-size-line-height: 24px;
  --wpforms-field-size-checkbox-size: 20px;
  --wpforms-field-size-input-spacing: 18px;
  --wpforms-label-color: #0A1738;
  --wpforms-label-sublabel-color: #55628A;
  --wpforms-label-error-color: #B3261E;
  --wpforms-label-size-font-size: 15px;
  --wpforms-label-size-line-height: 22px;
  --wpforms-button-background-color: #D99A22;
  --wpforms-button-border-color: #D99A22;
  --wpforms-button-text-color: #06163D;
  --wpforms-button-border-radius: 5px;
  --wpforms-button-size-height: 52px;
  --wpforms-button-size-padding-h: 30px;
  --wpforms-button-size-font-size: 14px;
  --wpforms-container-padding: 0px;
  --wpforms-container-border-width: 0px;
  margin: 0;
}
body .cl-formwrap .wpforms-field-label { font-family: var(--cl-sans); font-weight: 600; }
body .cl-formwrap .wpforms-required-label { color: var(--cl-gold-dk); }
body .cl-formwrap .wpforms-field-description { color: var(--cl-muted); }
body .cl-formwrap .wpforms-form input:focus,
body .cl-formwrap .wpforms-form textarea:focus {
  border-color: var(--cl-navy-800); box-shadow: 0 0 0 3px rgba(10,23,56,.14); outline: none;
}
body .cl-formwrap .wpforms-form input:focus-visible,
body .cl-formwrap .wpforms-form textarea:focus-visible,
body .cl-formwrap .wpforms-form button:focus-visible { outline: 3px solid var(--cl-navy-800); outline-offset: 2px; }
body .cl-formwrap .wpforms-form input::placeholder,
body .cl-formwrap .wpforms-form textarea::placeholder { color: #6B7280; }
body .cl-formwrap .wpforms-form textarea { min-height: 148px; }
body .cl-formwrap .wpforms-field-gdpr-checkbox ul { list-style: none; margin: 0; padding: 0; }
body .cl-formwrap .wpforms-field-gdpr-checkbox li { display: flex; align-items: flex-start; gap: 10px; }
body .cl-formwrap .wpforms-field-gdpr-checkbox input[type=checkbox] { margin-top: 2px; accent-color: var(--cl-navy-800); }
body .cl-formwrap .wpforms-field-gdpr-checkbox label { font-size: .9rem; line-height: 1.5; color: var(--cl-muted); font-weight: 400; }
body .cl-formwrap .wpforms-form button.wpforms-submit {
  font-family: var(--cl-sans); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  box-shadow: var(--cl-sh-gold); transition: background-color var(--cl-t) var(--cl-ease), transform var(--cl-t) var(--cl-ease);
}
body .cl-formwrap .wpforms-form button.wpforms-submit:hover { background-color: var(--cl-gold-lt)!important; transform: translateY(-2px); }
@media (max-width: 767px) { body .cl-formwrap .wpforms-form button.wpforms-submit { width: 100%; } }
body .cl-formwrap .wpforms-form label.wpforms-error,
body .cl-formwrap .wpforms-form em.wpforms-error { color: #B3261E; font-size: .86rem; font-style: normal; font-weight: 600; margin-top: 6px; display: block; }
body .cl-formslot .wpforms-confirmation-container-full,
body .cl-formslot .wpforms-confirmation-container {
  background: #F3F8F1; border: 1px solid rgba(10,23,56,.14); border-left: 3px solid #2E7D32;
  border-radius: var(--cl-r); padding: 20px 22px; color: var(--cl-ink); margin: 0;
}
body .cl-formslot .wpforms-confirmation-container p:last-child { margin-bottom: 0; }

/* Newsletter form sits inline on one row */
body .cl-newsform .wpforms-container.cl-form { --wpforms-field-size-input-spacing: 0px; }
body .cl-newsform .wpforms-form .wpforms-field { padding: 0; }
body .cl-newsform .wpforms-form .wpforms-field-label { display: none; }
body .cl-newsform .wpforms-form { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
body .cl-newsform .wpforms-form .wpforms-field-container { flex: 1 1 240px; }
body .cl-newsform .wpforms-form .wpforms-submit-container { flex: 0 0 auto; margin: 0; }
body .cl-newsform .wpforms-form input[type=email] { min-width: 220px; }
@media (max-width: 600px) {
  body .cl-newsform .wpforms-form { flex-direction: column; }
  body .cl-newsform .wpforms-form button.wpforms-submit { width: 100%; }
}

/* =========================================================================
   22. SPECIFICITY CORRECTIONS
   Elementor's per-page CSS emits icon colours at (0,3,0) via
   `.elementor-widget-icon.elementor-view-default .elementor-icon`, and loads
   after the theme. Matching the widget wrapper's own class lifts these to
   (0,3,1) so they win on merit rather than with !important.
   ========================================================================= */
body .elementor-widget-icon.cl-valueicon .elementor-icon { color: var(--cl-gold); font-size: 30px; }
body .elementor-widget-icon.cl-valueicon .elementor-icon svg { fill: var(--cl-gold); width: 30px; height: 30px; }

body .elementor-widget-icon.cl-mincard-badge .elementor-icon {
  color: #fff;
  background: linear-gradient(160deg, var(--cl-gold-lt), var(--cl-gold));
  border: 3px solid #fff;
}
body .elementor-widget-icon.cl-mincard-badge .elementor-icon svg { fill: #fff; }

body .elementor-widget-icon.cl-tileicon .elementor-icon { color: var(--cl-gold); border-color: var(--cl-gold); }
body .elementor-widget-icon.cl-tileicon .elementor-icon svg { fill: var(--cl-gold); }
body .cl-tile-gold .elementor-widget-icon.cl-tileicon .elementor-icon { color: #fff; border-color: #fff; }
body .cl-tile-gold .elementor-widget-icon.cl-tileicon .elementor-icon svg { fill: #fff; }

body .elementor-widget-icon.cl-newsicon .elementor-icon { color: var(--cl-navy-800); }
body .elementor-widget-icon.cl-newsicon .elementor-icon svg { fill: var(--cl-navy-800); }

/* Date badges were inline, so padding and min-width collapsed to a sliver. */
.cl-datebadge { display: inline-block; }
.cl-evt-badge-sm { display: block; }

/* Ministry card images must fill the card edge to edge. */
body .cl-mincard-media .elementor-widget-image,
body .cl-mincard-media .elementor-widget-image .elementor-widget-container { width: 100%; }
body .cl-mincard-media .elementor-widget-image img {
  width: 100%; display: block; aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: var(--cl-r-lg) var(--cl-r-lg) 0 0;
}
/* About portrait: taller crop, as in the reference */
body .cl-photo .elementor-widget-image img { width: 100%; display: block; aspect-ratio: 1 / 1.12; object-fit: cover; border-radius: var(--cl-r); }
/* Event imagery */
body .cl-evt-media .elementor-widget-image img { width: 100%; display: block; }
body .cl-evt-feat .cl-evt-media .elementor-widget-image img { aspect-ratio: 16 / 8; object-fit: cover; }
body .cl-evt-sm .cl-evt-media .elementor-widget-image img { aspect-ratio: 16 / 9; object-fit: cover; }
/* Leadership portraits */
body .cl-leader .elementor-widget-image img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--cl-r-sm); }

/* Centre the short gold rules under section headings. */
body .cl-rule-wrap .elementor-divider { justify-content: center; }
body .cl-rule-wrap .elementor-divider-separator { margin: 0 auto; }

/* Prayer banner: keep the wash behind the content. */
.cl-prayer > .e-con-inner, .cl-prayer > * { position: relative; z-index: 2; }

/* Gallery frames are wider than tall in the reference. */
.cl-gal img { aspect-ratio: 16 / 10; }



/* Elementor gives every widget `position:relative`, so an absolutely placed
   element inside a Text Editor anchors to that widget rather than the card.
   Position the widget itself instead. */
body .cl-evt-sm .cl-evt-media .cl-datebadge-wrap {
  position: absolute; top: 14px; left: 14px; z-index: 3; width: auto;
}
body .cl-evt-sm .cl-evt-media { position: relative; }
.cl-evt-badge-sm { position: static; }

/* Carousel arrows are decorative furniture, not widgets in flow. */
body .cl-arrows-wrap { position: static; }

/* Copyright strip: statement left, legal links right, as in the reference. */
.cl-copyright p { margin: 0; }
.cl-copy-r { display: inline-flex; align-items: center; gap: 4px; }
.cl-copy-sep { padding: 0 8px; opacity: .35; }
@media (max-width: 767px) {
  .cl-copyright p { text-align: center; }
}

/* Footer columns keep a comfortable rhythm on tablet. */
@media (max-width: 921px) and (min-width: 545px) {
  .cl-footer .e-con-inner > .e-con { margin-bottom: 8px; }
}


/* Newsletter: email + Subscribe share row one, consent sits beneath.
   `display:contents` lets the WPForms field wrapper drop out of the grid so
   its children can be placed directly. */
body .cl-newsform .wpforms-form {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px 10px;
  align-items: start;
}
body .cl-newsform .wpforms-form .wpforms-field-container { display: contents; }
body .cl-newsform .wpforms-form .wpforms-field-email { grid-column: 1; grid-row: 1; padding: 0; }
body .cl-newsform .wpforms-form .wpforms-submit-container { grid-column: 2; grid-row: 1; margin: 0; }
body .cl-newsform .wpforms-form .wpforms-field-gdpr-checkbox { grid-column: 1 / -1; grid-row: 2; padding: 0; }
body .cl-newsform .wpforms-form .wpforms-field-gdpr-checkbox label { font-size: .76rem; line-height: 1.4; }
body .cl-newsform .wpforms-form .wpforms-field-label { display: none; }
body .cl-newsform .wpforms-form input[type=email] { min-width: 200px; }
@media (max-width: 600px) {
  body .cl-newsform .wpforms-form { grid-template-columns: minmax(0,1fr); }
  body .cl-newsform .wpforms-form .wpforms-submit-container { grid-column: 1; grid-row: 2; }
  body .cl-newsform .wpforms-form .wpforms-field-gdpr-checkbox { grid-row: 3; }
  body .cl-newsform .wpforms-form button.wpforms-submit { width: 100%; }
}

/* Elementor containers default to 10px padding. On card and media wrappers that
   left a white gutter around every photograph; the reference runs them edge to
   edge. Explicit padding set in the page data is untouched. */
body .cl-card,
body .cl-card .cl-mincard-media,
body .cl-evtcard,
body .cl-evtcard .cl-evt-media,
body .cl-leader .cl-leader-media,
body .cl-photo,
body .cl-gal-wrap { padding: 0; }

/* =========================================================================
   23. RESPONSIVE CORRECTIONS
   ========================================================================= */
@media (max-width: 921px) {
  /* 15ch was forcing the brand to break mid-word on phones. */
  body .cl-brand .elementor-heading-title { max-width: none; font-size: .98rem; }
  body .cl-brand .elementor-heading-title a { white-space: nowrap; }
  body .cl-brand .elementor-heading-title::after { width: 30px; }
}

/* The hero wash runs left-to-right on desktop, which is what the reference
   shows. On narrow screens that leaves the headline over bright sky, so the
   gradient is re-aimed vertically. Elementor prints its overlay from generated
   per-page CSS at higher specificity, hence !important here. */
@media (max-width: 1024px) {
  body .cl-hero::before {
    background-image: linear-gradient(180deg, rgba(3,16,47,.93) 0%, rgba(3,16,47,.82) 45%, rgba(3,16,47,.94) 100%) !important;
  }
}

/* Hero headline should not out-run the column on small phones. */
@media (max-width: 420px) {
  :root { --cl-fs-hero: clamp(2.1rem, 1.2rem + 4.2vw, 2.6rem); }
}

/* ElementsKit fixe une hauteur de 80px sur sa barre de navigation. En colonne
   avec flex-wrap:wrap, les liens du footer repartaient donc en colonnes
   successives vers la droite et creaient un debordement horizontal du document
   (1978px pour un viewport de 1440px). */
body .cl-footnav .elementskit-navbar-nav,
body .cl-footnav .elementskit-menu-container,
body .cl-footnav .ekit-wid-con,
body .cl-footnav .elementskit-navbar-nav-default {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex-wrap: nowrap !important;
}
body .cl-footnav .elementskit-navbar-nav > li { flex: 0 0 auto; }

/* =========================================================================
   23. BLOC EVENEMENT VEDETTE (section Upcoming Events)
   Reference visuelle adaptee a la charte navy/or du site : la maquette source
   etait violette, ce qui aurait jure avec la bande royale existante.
   ========================================================================= */
.cl-feat {
  border-radius: var(--cl-r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 60px rgba(3,16,47,.38);
}
body .cl-feat-kicker .elementor-heading-title {
  font-family: var(--cl-sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--cl-gold-lt);
}
body .cl-feat-title .elementor-heading-title {
  font-family: var(--cl-serif); font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  color: #fff; line-height: 1.14;
}
body .cl-feat-desc p { color: #DCE4F5; font-size: 1rem; max-width: 46ch; }

ul.cl-feat-info { list-style: none; margin: 6px 0 0; padding: 0; }
ul.cl-feat-info li {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 13px; color: #DCE4F5; font-size: .96rem; line-height: 1.45;
}
ul.cl-feat-info li strong { color: #fff; font-weight: 700; }
ul.cl-feat-info .cl-fi-ico {
  flex: 0 0 20px; color: var(--cl-gold); font-size: .95rem; margin-top: 2px;
}
body .cl-feat-info-wrap p { margin: 0; }

/* Panneau lateral */
.cl-feat-panel { text-align: center; }
body .cl-cd-eyebrow .elementor-heading-title,
body .cl-share-eyebrow .elementor-heading-title {
  font-family: var(--cl-sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cl-gold-lt);
  justify-content: center;
}
.cl-cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.cl-cd-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-top: 2px solid var(--cl-gold);
  border-radius: var(--cl-r-sm);
  padding: 16px 4px 12px;
}
.cl-cd-num { font-family: var(--cl-serif); font-size: 1.75rem; font-weight: 600; color: #fff; line-height: 1; letter-spacing: .04em; }
.cl-cd-lab { font-family: var(--cl-sans); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cl-on-dark); margin-top: 7px; }
body .cl-cd-wrap p { margin: 0; }
/* etat inactif assume : le bloc ne pretend pas decompter */
body .cl-cd-note p { color: var(--cl-on-dark); font-size: .82rem; font-style: italic; margin: 0; }
body .cl-addcal .elementor-button { padding: 13px 22px; font-size: .78rem; }

.cl-share { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.cl-share-l {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--cl-on-dark); font-family: var(--cl-sans);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding-block: 6px; min-height: 26px;
  transition: color var(--cl-t) var(--cl-ease);
}
.cl-share-l:hover { color: var(--cl-gold-lt); text-decoration: underline; }
.cl-share-l i { color: var(--cl-gold); font-size: .85rem; }
body .cl-share-wrap p { margin: 0; }

@media (max-width: 1024px) {
  .cl-feat-media { min-height: 0 !important; }
  .cl-cd-num { font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .cl-cd { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   24. DIAPORAMA PHOTO - GRAND FORMAT (autonome, sans dependance)
   Piste en scroll-snap : sans JS elle reste defilable a la main, donc rien
   n'est jamais masque. Le JS ajoute fleches, puces et defilement auto.
   ========================================================================= */
.cl-slideshow { position: relative; }
body .cl-ss-wrap p { margin: 0; }

/* Debordement maitrise : la galerie s'etend au-dela du conteneur boxe (1240px)
   pour occuper 96vw, tout en restant centree. Le titre, lui, reste dans l'axe
   du reste de la page. Plafonne a 1560px pour ne pas se disloquer sur tres
   grand ecran. */
/* Le debordement est porte par .cl-slideshow, un div qui m appartient :
   applique sur le widget Elementor, la largeur etait ecrasee par ses regles. */
.cl-slideshow {
  width: min(96vw, 1560px);
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: none;
}

.cl-ss-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.cl-ss-track::-webkit-scrollbar { display: none; }

/* Grand format : 2 photos par vue sur bureau au lieu de 3 */
.cl-ss-slide {
  flex: 0 0 calc(50% - 10px);
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--cl-r);
}
@media (max-width: 1024px) { .cl-ss-slide { flex: 0 0 calc(64% - 10px); } }
@media (max-width: 600px)  { .cl-ss-slide { flex: 0 0 88%; } }

.cl-ss-slide img {
  width: 100%; display: block;
  aspect-ratio: 3 / 2;            /* plus haut donc plus present que le 16/10 */
  object-fit: cover;
  border-radius: var(--cl-r);
  transition: transform .6s var(--cl-ease);
}
.cl-ss-slide:hover img { transform: scale(1.04); }

/* Fleches : masquees tant que le JS n'a pas pris la main */
.cl-ss-arrow { display: none; }
.cl-slideshow.is-live .cl-ss-arrow {
  position: absolute; top: calc(50% - 14px); transform: translateY(-50%); z-index: 5;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--cl-line);
  box-shadow: var(--cl-sh-2);
  color: var(--cl-navy-800); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  transition: background-color var(--cl-t) var(--cl-ease), color var(--cl-t) var(--cl-ease), opacity var(--cl-t) var(--cl-ease);
}
.cl-slideshow.is-live .cl-ss-arrow:hover:not(:disabled) { background: var(--cl-gold); color: var(--cl-navy-800); }
.cl-slideshow.is-live .cl-ss-arrow:disabled { opacity: .28; cursor: default; }
.cl-ss-prev { left: 16px; }
.cl-ss-next { right: 16px; }
@media (max-width: 600px) { .cl-slideshow.is-live .cl-ss-arrow { width: 42px; height: 42px; left: 8px; } .cl-ss-next { left: auto; right: 8px; } }

/* Puces */
.cl-ss-dots { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.cl-ss-dot {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(10,23,56,.22); cursor: pointer;
  transition: width var(--cl-t) var(--cl-ease), background-color var(--cl-t) var(--cl-ease);
}
.cl-ss-dot.is-on { background: var(--cl-gold); width: 28px; border-radius: 5px; }
.cl-ss-dot:focus-visible { outline: 3px solid var(--cl-navy-800); outline-offset: 3px; }

/* =========================================================================
   25. PAGE BANNERS + INNER-PAGE CLASS COMPATIBILITY
   Les pages internes ont ete ecrites avant la migration vers Hello Elementor
   et portent encore l'ancien vocabulaire de classes. Ces regles retablissent
   ce vocabulaire et fournissent la banniere partagee en tete de page interne.
   ========================================================================= */
.cl-pagehero { position: relative; }
body .cl-pagehero .elementor-heading-title { color: #fff; }
body .cl-pagehero h1.elementor-heading-title {
  font-family: var(--cl-serif);
  font-size: clamp(2.15rem, 1.35rem + 2.7vw, 3.35rem);
  line-height: 1.08;
}
body .cl-pagehero p,
body .cl-pagehero .cl-lead p { color: var(--cl-on-dark); }
body .cl-pagehero .cl-eyebrow .elementor-heading-title { color: var(--cl-gold-lt); }
.cl-pagehero :focus-visible { outline-color: var(--cl-gold-lt); }

/* Fil d'Ariane */
.cl-crumb { font-size: .84rem; font-weight: 600; letter-spacing: .03em; }
.cl-crumb a { color: var(--cl-on-dark); text-decoration: none; }
.cl-crumb a:hover { color: var(--cl-gold-lt); text-decoration: underline; }
.cl-crumb .cl-crumb-sep { padding: 0 9px; opacity: .38; }
.cl-crumb [aria-current="page"] { color: var(--cl-gold-lt); }
body .cl-crumb-wrap p { margin: 0; }

/* --- alias de l'ancien vocabulaire --- */
.cl-band-light { background: var(--cl-white); }
.cl-band-mist  { background: var(--cl-pale); }
.cl-band-navy  { background: var(--cl-navy-800); color: var(--cl-on-dark); position: relative; }
.cl-band-navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 0%, rgba(255,255,255,.07), transparent 65%);
}
.cl-band-navy > * { position: relative; z-index: 1; }
body .cl-band-navy h2,
body .cl-band-navy .elementor-heading-title { color: #fff; }
body .cl-band-navy .cl-eyebrow .elementor-heading-title { color: var(--cl-gold-lt); }
body .cl-band-navy .cl-lead p,
body .cl-on-dark-muted,
body .cl-on-dark-muted p { color: var(--cl-on-dark); }
.cl-band-navy :focus-visible { outline-color: var(--cl-gold-lt); }

body .cl-eyebrow-center .elementor-heading-title { justify-content: center; flex-direction: column; gap: 14px; }
body .cl-eyebrow-center .elementor-heading-title::before {
  content: ""; width: 42px; height: 2px; background: var(--cl-gold); border-radius: 2px;
}
.cl-maxw-lg { max-width: 860px; }

body .cl-arch img { border-radius: var(--cl-r); display: block; width: 100%; }
body .cl-arch-sm img { border-radius: var(--cl-r-sm); display: block; width: 100%; }
.cl-zoom { overflow: hidden; border-radius: var(--cl-r); }
.cl-zoom img { transition: transform .6s var(--cl-ease); }
.cl-zoom:hover img { transform: scale(1.04); }

body .cl-btn-primary .elementor-button {
  background: linear-gradient(180deg, #E3A62D 0%, var(--cl-gold) 100%);
  color: var(--cl-navy-800); box-shadow: var(--cl-sh-gold);
}
body .cl-btn-primary .elementor-button:hover {
  background: linear-gradient(180deg, var(--cl-gold-lt) 0%, #E3A62D 100%);
  color: var(--cl-navy-900); transform: translateY(-2px);
}
body .cl-btn-secondary .elementor-button {
  background: transparent; color: var(--cl-navy-800); border-color: rgba(10,23,56,.28);
}
body .cl-btn-secondary .elementor-button:hover {
  background: var(--cl-navy-800); color: #fff; border-color: var(--cl-navy-800); transform: translateY(-2px);
}
body .cl-btn-onDark .elementor-button {
  background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.42);
}
body .cl-btn-onDark .elementor-button:hover {
  background: #fff; color: var(--cl-navy-800); border-color: #fff; transform: translateY(-2px);
}

/* =========================================================================
   26. PAGE MINISTERE DES FEMMES
   ========================================================================= */
/* Emplacement du portrait. Aucune photographie de la presidente du ministere
   n'a ete fournie : la case reste un marqueur explicite plutot qu'un visage
   d'illustration sans rapport. */
.cl-wm-portrait {
  border: 2px dashed var(--cl-line-gold);
  border-radius: var(--cl-r-lg);
  background: var(--cl-pale);
  aspect-ratio: 1 / 1.12;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 13px; text-align: center; padding: 26px;
}
.cl-wm-portrait .cl-wm-ico { font-size: 38px; color: var(--cl-gold); line-height: 1; }
.cl-wm-portrait strong {
  font-family: var(--cl-sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--cl-gold-dk);
}
.cl-wm-portrait span { font-size: .87rem; color: var(--cl-muted); max-width: 27ch; line-height: 1.55; }
body .cl-wm-portrait-wrap p { margin: 0; }
/* Une fois la colonne empilee, la case ne doit pas s'etirer sur toute la largeur. */
@media (max-width: 1024px) {
  .cl-wm-portrait { max-width: 380px; margin-inline: auto; }
}

/* Panneaux Vision / Mission */
body .cl-vm-title .elementor-heading-title {
  font-family: var(--cl-sans); font-weight: 700; font-size: .8rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--cl-gold-dk);
  display: flex; align-items: center; gap: 11px;
}
body .cl-vm-title .elementor-heading-title::before {
  content: ""; flex: 0 0 26px; height: 2px; background: var(--cl-gold); border-radius: 2px;
}
body .cl-vm-body p { font-size: .97rem; color: var(--cl-muted); line-height: 1.68; }
body .cl-vm-body p:last-child { margin-bottom: 0; }
body .cl-vm-body blockquote {
  margin: 0 0 1.05em; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--cl-line-gold);
  color: var(--cl-ink); font-style: normal;
}
body .cl-vm-body blockquote p { color: var(--cl-ink); }
.cl-vm-ref {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cl-gold-dk);
}

/* =========================================================================
   27. DEGRADES RESISTANTS AU LAZY-LOAD D'ARRIERE-PLAN D'ELEMENTOR
   Elementor imprime en ligne :
     .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) *
       { background-image: none !important; }
   La regle vise TOUS les descendants, pas seulement le conteneur. Tant qu'une
   section n'est pas entree dans le viewport, chaque degrade a l'interieur est
   supprime : un bouton or devient transparent, et son libelle bleu nuit
   disparait sur fond bleu nuit.
   Seul background-image est neutralise, jamais background-color. On declare
   donc une couleur de repli apres coup : le degrade reste visible une fois la
   section chargee, et avant cela le bouton est or plein plutot qu'invisible.
   ========================================================================= */
body .cl-btn-gold .elementor-button, a.cl-btn-gold,
body .cl-btn-primary .elementor-button { background-color: var(--cl-gold); }
body .cl-btn-gold .elementor-button:hover, a.cl-btn-gold:hover,
body .cl-btn-primary .elementor-button:hover { background-color: var(--cl-gold-lt); }
body .cl-mincard-badge .elementor-icon,
body .elementor-widget-icon.cl-mincard-badge .elementor-icon { background-color: var(--cl-gold); }

/* =========================================================================
   28. LARGEURS MAXIMALES DE LECTURE
   Elementor applique max-width:100% a chaque widget (.e-con .elementor-widget,
   specificite 0-2-0), ce qui annulait .cl-maxw-md / .cl-maxw-lg (0-1-0).
   On repasse devant avec 0-2-1 sans !important.
   ========================================================================= */
/* Elementor double sa propre classe (.elementor.elementor .e-con > .elementor-widget,
   soit 0-4-0) precisement pour etre difficile a depasser. On monte a 0-4-1. */
body .elementor.elementor .e-con > .cl-maxw-md,
body .e-con.e-con > .e-con-inner > .cl-maxw-md { max-width: 640px; }
body .elementor.elementor .e-con > .cl-maxw-lg,
body .e-con.e-con > .e-con-inner > .cl-maxw-lg { max-width: 860px; }