/* ==========================================================================
   Centerly — Section Library front-end styles
   --------------------------------------------------------------------------
   Enqueued by the Centerly plugin on the PUBLIC front end, on every theme.
   Sections are built from NATIVE Divi 5 modules (heading / text / image /
   button / blurb / team-member / testimonial / cta / accordion / contact-form)
   carrying a `cly-*` class hook through module.advanced.htmlAttributes — the
   same mechanism Stillpoint uses, verified rendering on Divi 5.10.1. This sheet
   styles Divi's real OUTPUT DOM (the retained `.et_pb_*` classes) under those
   hooks. Data-driven blocks (the events feed) author their own `cly-*` HTML in
   a Text module and are marked as such.

   Every value is a shared `--sc-*` token with an inline fallback:
     - a theme that defines the tokens (Stillpoint) restyles every section,
     - a theme that defines none still renders an accessible neutral design.
   Never a Stillpoint `.sc-*` class. Never a bare hex outside a token fallback.
   Every rule is scoped under a `.cly-*` ancestor so it can never touch
   non-Centerly Divi content on the page.

   Divi output DOM authority: Stillpoint theme.css (confirmed rendering on
   saccsl-dev) + the divi5-dev skill's retained-class list. See
   docs/SECTION-TOKEN-CONTRACT.md for the token list.
   ========================================================================== */

/* ------------------------------------------------------------- primitives - */
.cly-sec, .cly-sec *, .cly-sec *::before, .cly-sec *::after { box-sizing: border-box; }

.cly-sec {
  padding-block: clamp(48px, 7vw, 96px);
  background: var(--sc-bg, #FFFFFF);
  color: var(--sc-ink, #1A1C22);
  font-family: var(--sc-font-body, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  line-height: 1.6;
  position: relative;
  /* The section is a size container so its fluid HEADING sizes track the
     section's own width (cqi below), not the viewport. A section dropped into a
     narrow Divi column then scales its text to the column instead of blowing up
     to page scale; the clamp() rem bounds still cap both ends. Inline-size only
     — block size still grows with content. */
  container-type: inline-size;
}
.cly-sec--band   { background: var(--sc-bg-2, #F1F2F5); }
.cly-sec--invert { background: var(--sc-invert-bg, #1E2430); color: var(--sc-invert-ink, #F6F7FA); }

/* Row = our max-width container + flex layout. Columns are flex children sized
   by Divi's fractional column classes (present on 5.10.1). Not Divi's own
   layout CSS — ours, deterministically, so it holds if Divi's changes. */
.cly-sec .et_pb_row {
  width: min(var(--sc-wrap, 1120px), 100% - 2 * clamp(16px, 5vw, 40px));
  max-width: none; margin-inline: auto; padding: 0 !important;
  display: flex; flex-wrap: wrap; gap: var(--sc-sp-6, 24px); align-items: stretch;
}
.cly-sec .et_pb_column {
  float: none !important; margin: 0 !important; width: auto !important; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sc-sp-4, 16px);
}
.cly-sec .et_pb_column_4_4 { flex: 1 1 100%; }
.cly-sec .et_pb_column_1_2 { flex: 1 1 calc(50% - var(--sc-sp-6, 24px) / 2); }
.cly-sec .et_pb_column_1_3 { flex: 1 1 calc(33.333% - var(--sc-sp-6, 24px) * 2 / 3); }
.cly-sec .et_pb_column_2_3 { flex: 1 1 calc(66.666% - var(--sc-sp-6, 24px) / 3); }
.cly-sec .et_pb_column_1_4 { flex: 1 1 calc(25% - var(--sc-sp-6, 24px) * 3 / 4); }
@media (max-width: 980px) { .cly-sec .et_pb_column_1_4, .cly-sec .et_pb_column_1_3 { flex: 1 1 calc(50% - var(--sc-sp-6, 24px) / 2); } }
@media (max-width: 640px) { .cly-sec .et_pb_column_1_2, .cly-sec .et_pb_column_1_3, .cly-sec .et_pb_column_1_4, .cly-sec .et_pb_column_2_3 { flex: 1 1 100%; } }
.cly-sec .et_pb_module { margin-bottom: 0 !important; }
.cly-sec img { max-width: 100%; height: auto; display: block; }

/* headings + text (heading module emits the tag; text module emits paragraphs) */
.cly-sec :where(h1, h2, h3, h4) {
  font-family: var(--sc-font-display, var(--sc-font-body, system-ui, sans-serif));
  color: inherit; margin: 0; line-height: 1.12; text-wrap: balance;
}
.cly-sec h1 { font-size: clamp(2rem, 5.2cqi, 3.4rem); letter-spacing: -0.02em; }
.cly-sec h2 { font-size: clamp(1.6rem, 3.6cqi, 2.5rem); letter-spacing: -0.015em; }
.cly-sec h3 { font-size: clamp(1.2rem, 2cqi, 1.5rem); }
.cly-sec .et_pb_text, .cly-sec .et_pb_text_inner { color: inherit; }
.cly-sec .et_pb_text p { margin: 0 0 0.8em; }
.cly-sec .et_pb_text p:last-child { margin-bottom: 0; }

.cly-eyebrow {
  font-family: var(--sc-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-mute, #565C68); margin: 0 !important;
}
.cly-sec--invert .cly-eyebrow { color: var(--sc-invert-mute, #C2C8D4); }
.cly-lede { font-size: clamp(1.05rem, 1.6cqi, 1.25rem); line-height: 1.6; color: var(--sc-ink-2, #3B404A); }
.cly-sec--invert .cly-lede { color: var(--sc-invert-mute, #C2C8D4); }
.cly-sec .et_pb_text.cly-body p, .cly-body { color: var(--sc-ink-2, #3B404A); line-height: 1.7; }
.cly-sec--invert .et_pb_text.cly-body p { color: var(--sc-invert-mute, #C2C8D4); }

/* ------------------------------------------------------------------ button */
/* Divi colors .et_pb_button with !important and appends an arrow; override the
   same way Stillpoint does. The htmlAttributes class lands on the wrapper, so
   match both wrapper>anchor and anchor-with-class. */
.cly-sec .et_pb_button_module_wrapper { display: flex; margin: 0 !important; }
.cly-sec .cly-btn > .et_pb_button,
.cly-sec a.et_pb_button.cly-btn,
.cly-sec .cly-btn.et_pb_button {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font-family: var(--sc-font-body, system-ui, sans-serif) !important;
  font-size: 0.95rem !important; font-weight: 600 !important; line-height: 1.1 !important; letter-spacing: 0 !important;
  padding: 14px 26px !important; min-height: 44px;
  border-radius: var(--sc-btn-radius, 12px) !important;
  background-color: var(--sc-primary, #6D4AE0) !important;
  color: var(--sc-on-primary, #FFFFFF) !important;
  border: 1px solid var(--sc-primary, #6D4AE0) !important;
  text-decoration: none !important;
  transition: transform var(--sc-t-base, 220ms) var(--sc-ease, cubic-bezier(.2,.7,.2,1)), filter var(--sc-t-base, 220ms);
}
.cly-sec .cly-btn > .et_pb_button::after, .cly-sec .cly-btn > .et_pb_button::before,
.cly-sec a.et_pb_button.cly-btn::after, .cly-sec a.et_pb_button.cly-btn::before { display: none !important; content: none !important; }
.cly-sec .cly-btn > .et_pb_button:hover, .cly-sec a.et_pb_button.cly-btn:hover { transform: translateY(calc(-1px * var(--sc-motion, 1))); filter: brightness(1.06); }
.cly-sec .cly-btn--ghost > .et_pb_button, .cly-sec a.et_pb_button.cly-btn--ghost {
  background-color: transparent !important; color: var(--sc-ink, #1A1C22) !important; border-color: var(--sc-line, #E2E4E9) !important;
}
.cly-sec--invert .cly-btn--ghost > .et_pb_button, .cly-sec--invert a.et_pb_button.cly-btn--ghost {
  color: var(--sc-invert-ink, #F6F7FA) !important; border-color: var(--sc-invert-mute, #C2C8D4) !important;
}

/* ============================ 1. HERO ==================================== */
.cly-hero .et_pb_column { gap: var(--sc-sp-4, 16px); }
.cly-hero--centered .et_pb_row { justify-content: center; text-align: center; }
.cly-hero--centered .et_pb_column { align-items: center; max-width: 46rem; margin-inline: auto; }
.cly-hero--centered .et_pb_button_module_wrapper { justify-content: center; }
.cly-hero .et_pb_row { align-items: center; }
.cly-hero__media .et_pb_image, .cly-hero__media { width: 100%; }
.cly-hero__media img { width: 100%; object-fit: cover; border-radius: var(--sc-card-radius, 18px); aspect-ratio: 4 / 3; background: var(--sc-surface-2, #F1F2F5); }
.cly-hero .cly-lede { max-width: var(--sc-measure, 65ch); }

/* ============================ 2. WELCOME / INTRO ======================== */
.cly-welcome .et_pb_column { align-items: center; text-align: center; max-width: 52rem; margin-inline: auto; gap: var(--sc-sp-4, 16px); }
.cly-welcome h2 { font-size: clamp(1.7rem, 3.2cqi, 2.4rem); }
.cly-welcome .et_pb_text { max-width: var(--sc-measure, 65ch); }

/* ============================ 3. SERVICE TIMES (blurb cards) ============ */
/* card = divi/blurb: header = time, description = name + note. */
.cly-times .et_pb_blurb {
  background: var(--sc-surface, #FFFFFF); border: 1px solid var(--sc-line, #E2E4E9);
  border-radius: var(--sc-card-radius, 18px); padding: var(--sc-sp-8, 32px); height: 100%; text-align: center;
}
.cly-times .et_pb_blurb_content { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.cly-times .et_pb_main_blurb_image { display: none; }
.cly-times .et_pb_blurb .et_pb_module_header { font-family: var(--sc-font-mono, monospace); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-mute, #565C68); margin: 0; }
.cly-times .et_pb_blurb_description { color: var(--sc-ink, #1A1C22); }
.cly-times .et_pb_blurb_description p { margin: 0; }
.cly-times .et_pb_blurb_description p:first-child { font-family: var(--sc-font-display, var(--sc-font-body, sans-serif)); font-size: 1.3rem; font-weight: 600; color: var(--sc-ink, #1A1C22); }
.cly-times .et_pb_blurb_description p + p { font-size: 0.95rem; color: var(--sc-ink-mute, #565C68); margin-top: 4px; }

/* ============================ 4. EVENTS (data-driven HTML) ============== */
.cly-events .cly-head { text-align: center; margin-bottom: var(--sc-sp-8, 32px); }
.cly-events__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-sp-6, 24px); }
.cly-event { background: var(--sc-surface, #FFFFFF); border: 1px solid var(--sc-line, #E2E4E9); border-radius: var(--sc-card-radius, 18px); overflow: hidden; display: flex; flex-direction: column; }
.cly-event__media { aspect-ratio: 16 / 9; background: var(--sc-surface-2, #F1F2F5); object-fit: cover; width: 100%; }
.cly-event__body { padding: var(--sc-sp-6, 24px); display: flex; flex-direction: column; gap: 8px; }
.cly-event__date { font-family: var(--sc-font-mono, monospace); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-mute, #565C68); }
.cly-event__title { font-family: var(--sc-font-display, var(--sc-font-body, sans-serif)); font-size: 1.2rem; font-weight: 600; color: var(--sc-ink, #1A1C22); }
.cly-event__meta { font-size: 0.9rem; color: var(--sc-ink-mute, #565C68); }
.cly-events__empty { text-align: center; border: 1px dashed var(--sc-line, #E2E4E9); border-radius: var(--sc-card-radius, 18px); padding: clamp(32px, 6vw, 56px); color: var(--sc-ink-mute, #565C68); background: var(--sc-surface, #FFFFFF); display: flex; flex-direction: column; gap: var(--sc-sp-3, 12px); align-items: center; max-width: 720px; margin-inline: auto; }
.cly-events__empty strong { color: var(--sc-ink, #1A1C22); font-family: var(--sc-font-display, var(--sc-font-body, sans-serif)); font-size: 1.25rem; font-weight: 600; }
@media (max-width: 980px) { .cly-events__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cly-events__grid { grid-template-columns: 1fr; } }

/* ============================ 5. STAFF (team-member) =================== */
.cly-staff .et_pb_team_member { display: flex; flex-direction: column; gap: 4px; height: 100%; }
.cly-staff .et_pb_team_member_image { margin: 0 0 var(--sc-sp-3, 12px); width: 100%; }
.cly-staff .et_pb_team_member_image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--sc-r-md, 12px); background: var(--sc-surface-2, #F1F2F5); }
.cly-staff .et_pb_team_member .et_pb_module_header { font-family: var(--sc-font-display, var(--sc-font-body, sans-serif)); font-size: 1.1rem; font-weight: 600; color: var(--sc-ink, #1A1C22); margin: 0; }
.cly-staff .et_pb_member_position { font-family: var(--sc-font-mono, monospace); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-mute, #565C68); margin: 2px 0 0; }
.cly-staff .et_pb_team_member_description p:not(.et_pb_member_position) { font-size: 0.92rem; color: var(--sc-ink-mute, #565C68); margin: 6px 0 0; }

/* ============================ 6. VOICES (testimonial) ================== */
.cly-voices .et_pb_testimonial { background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; text-align: center; max-width: 44rem; margin-inline: auto; }
.cly-voices .et_pb_testimonial::before, .cly-voices .et_pb_testimonial::after { display: none !important; content: none !important; }
.cly-voices .et_pb_testimonial_portrait { display: none !important; }
.cly-voices .et_pb_testimonial_description_inner p { font-family: var(--sc-font-display, var(--sc-font-body, sans-serif)); font-size: clamp(1.4rem, 3cqi, 2.1rem); line-height: 1.32; color: var(--sc-ink, #1A1C22) !important; margin: 0 0 var(--sc-sp-4, 16px); }
.cly-voices .et_pb_testimonial_author { font-family: var(--sc-font-mono, monospace); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-mute, #565C68) !important; font-style: normal; display: block; }
.cly-voices .et_pb_testimonial_meta { font-family: var(--sc-font-mono, monospace); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-mute, #565C68) !important; margin-top: 4px; }
.cly-sec--band.cly-voices .et_pb_testimonial_description_inner p { color: var(--sc-ink, #1A1C22) !important; }

/* ============================ 7. CTA BAND (cta/promo) ================== */
.cly-cta { background: var(--sc-primary, #6D4AE0); color: var(--sc-on-primary, #FFFFFF); }
.cly-cta .et_pb_promo { background: transparent !important; background-image: none !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; text-align: center; }
.cly-cta .et_pb_promo_description { display: flex; flex-direction: column; gap: var(--sc-sp-3, 12px); align-items: center; max-width: 44rem; margin-inline: auto; }
.cly-cta .et_pb_promo .et_pb_module_header, .cly-cta .et_pb_promo h2 { color: var(--sc-on-primary, #FFFFFF) !important; font-size: clamp(1.7rem, 3.4cqi, 2.5rem); }
.cly-cta .et_pb_promo p { color: var(--sc-on-primary, #FFFFFF) !important; font-size: 1.05rem; line-height: 1.6; }
/* button inverts: on-primary surface, brand label — a guaranteed-contrasting pair on any theme */
.cly-cta .et_pb_promo .et_pb_button, .cly-cta .cly-btn > .et_pb_button, .cly-cta a.et_pb_button.cly-btn {
  background-color: var(--sc-on-primary, #FFFFFF) !important; color: var(--sc-primary, #6D4AE0) !important; border-color: var(--sc-on-primary, #FFFFFF) !important; margin-top: var(--sc-sp-4, 16px);
}

/* ============================ 8. SPLIT (columns) ====================== */
.cly-split .et_pb_row { align-items: center; }
.cly-split .et_pb_column { gap: var(--sc-sp-4, 16px); }
.cly-split__media .et_pb_image, .cly-split__media { width: 100%; }
.cly-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sc-card-radius, 18px); background: var(--sc-surface-2, #F1F2F5); }

/* ============================ 9. FEATURES (blurb) ===================== */
.cly-features .cly-head { text-align: center; margin-bottom: var(--sc-sp-8, 32px); }
.cly-features .et_pb_blurb { background: var(--sc-surface, #FFFFFF); border: 1px solid var(--sc-line, #E2E4E9); border-radius: var(--sc-card-radius, 18px); padding: var(--sc-sp-8, 32px); height: 100%; }
.cly-features .et_pb_blurb_content { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.cly-features .et_pb_main_blurb_image { margin: 0; }
.cly-features .et_pb_main_blurb_image img { width: 44px; height: 44px; border-radius: var(--sc-r-md, 12px); object-fit: cover; }
.cly-features .et_pb_main_blurb_image .et-pb-icon { width: 44px; height: 44px; border-radius: var(--sc-r-md, 12px); background: var(--sc-primary, #6D4AE0); color: var(--sc-on-primary, #FFFFFF); display: grid; place-items: center; }
.cly-features .et_pb_blurb .et_pb_module_header { font-family: var(--sc-font-display, var(--sc-font-body, sans-serif)); font-size: 1.2rem; font-weight: 600; color: var(--sc-ink, #1A1C22); margin: 0; }
.cly-features .et_pb_blurb_description, .cly-features .et_pb_blurb_description p { font-size: 0.95rem; color: var(--sc-ink-mute, #565C68); }

/* ============================ 10. FAQ (accordion) ===================== */
.cly-faq .et_pb_accordion { max-width: 52rem; margin-inline: auto; }
.cly-faq .et_pb_toggle, .cly-faq .et_pb_accordion_item { border: 0 !important; border-bottom: 1px solid var(--sc-line, #E2E4E9) !important; background: transparent !important; padding: 0 !important; }
.cly-faq .et_pb_toggle_title { font-family: var(--sc-font-display, var(--sc-font-body, sans-serif)); font-size: 1.1rem; font-weight: 600; color: var(--sc-ink, #1A1C22) !important; cursor: pointer; margin: 0; padding: var(--sc-sp-4, 16px) 40px var(--sc-sp-4, 16px) 0; position: relative; }
.cly-faq .et_pb_toggle_title::before, .cly-faq .et_pb_toggle_title::after { font-family: inherit !important; }
.cly-faq .et_pb_toggle_title::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--sc-ink-2, #3B404A); line-height: 1; }
.cly-faq .et_pb_toggle_open .et_pb_toggle_title::after { content: "\2013"; }
.cly-faq .et_pb_toggle_content { color: var(--sc-ink-2, #3B404A); font-size: 0.98rem; line-height: 1.6; padding: 0 40px var(--sc-sp-4, 16px) 0; }

/* ============================ 11. CONTACT (contact-form) ============== */
.cly-contact .et_pb_column { gap: var(--sc-sp-4, 16px); }
.cly-contact .cly-contact__line { display: flex; gap: 10px; font-size: 1rem; color: var(--sc-ink-2, #3B404A); }
.cly-contact .cly-contact__line b { color: var(--sc-ink, #1A1C22); font-weight: 600; min-width: 5.5rem; display: inline-block; }
.cly-contact .cly-map { width: 100%; min-height: 300px; border: 0; border-radius: var(--sc-card-radius, 18px); background: var(--sc-surface-2, #F1F2F5); display: grid; place-items: center; color: var(--sc-ink-mute, #565C68); text-align: center; padding: 24px; }
.cly-contact .et_pb_contact_form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-sp-4, 16px); }
.cly-contact .et_pb_contact_field { padding: 0 !important; }
.cly-contact .et_pb_contact_field.et_pb_contact_field_last, .cly-contact .et_pb_contact_message { grid-column: 1 / -1; }
.cly-contact .et_pb_contact_form_label { font-family: var(--sc-font-mono, monospace); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-mute, #565C68); display: block; margin-bottom: 6px; }
.cly-contact input[type="text"], .cly-contact input[type="email"], .cly-contact textarea {
  width: 100%; min-height: 46px; padding: 12px 14px; font-family: var(--sc-font-body, sans-serif); font-size: 1rem;
  color: var(--sc-ink, #1A1C22); background: var(--sc-surface, #FFFFFF); border: 1px solid var(--sc-line, #E2E4E9); border-radius: var(--sc-r-md, 12px);
}
.cly-contact input::placeholder, .cly-contact textarea::placeholder { color: var(--sc-ink-mute, #565C68); }
.cly-contact .et_pb_contact_submit { background-color: var(--sc-primary, #6D4AE0) !important; color: var(--sc-on-primary, #FFFFFF) !important; border: 1px solid var(--sc-primary, #6D4AE0) !important; border-radius: var(--sc-btn-radius, 12px) !important; padding: 13px 26px !important; font-weight: 600 !important; }
@media (max-width: 640px) { .cly-contact .et_pb_contact_form { grid-template-columns: 1fr; } }

/* ============================ 12. FOOTER BAND ========================= */
.cly-footer { background: var(--sc-bg-2, #F1F2F5); border-top: 1px solid var(--sc-line, #E2E4E9); padding-block: clamp(40px, 6vw, 72px); }
.cly-footer .et_pb_column { gap: var(--sc-sp-2, 8px); }
.cly-footer h4 { font-family: var(--sc-font-mono, monospace); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-mute, #565C68); margin: 0 0 var(--sc-sp-3, 12px); font-weight: 600; }
.cly-footer .et_pb_text p, .cly-footer .et_pb_text a { font-size: 0.94rem; line-height: 1.8; color: var(--sc-ink-2, #3B404A); text-decoration: none; }
.cly-footer .et_pb_text a:hover { color: var(--sc-ink, #1A1C22); text-decoration: underline; }
.cly-footer .cly-footer__brand p, .cly-footer__brand { font-family: var(--sc-font-display, var(--sc-font-body, sans-serif)); font-size: 1.2rem; font-weight: 600; color: var(--sc-ink, #1A1C22); }

/* ------------------------------------------------- shared section header - */
.cly-head { text-align: center; margin-bottom: var(--sc-sp-8, 32px); }

/* ------------------------------------------------------- focus + motion -- */
.cly-sec :where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sc-primary, #6D4AE0); outline-offset: 3px; border-radius: var(--sc-r-sm, 8px);
}
@media (prefers-reduced-motion: reduce) { .cly-sec * { transition-duration: 1ms !important; animation-duration: 1ms !important; } }