/*
 * ERA funnel pages — what eraapp's own stylesheet (era.css) does not carry (ERA-2491).
 *
 * 1. The FAQ accordion. The Challenge pages use era-react's FAQ markup, which the
 *    editor's FAQ tools and the page's FAQ runtime (`page_faq_runtime`) drive by
 *    toggling `.open`; this is only the open/closed behaviour from www.erafit.com
 *    program.css ("FAQ"), not its grey look — the cards keep their ERA classes.
 *
 * 2. The classes the editor writes. Add Web Elements inserts era-react's own markup
 *    (core_web_editor.js `fn_add_new_text_element`): `text-size.24px`,
 *    `text-align-center`, `ul_list ul_style_check`, `blockquote`, `button`. eraapp's
 *    Tailwind knows none of them, so an inserted heading would arrive as plain text.
 *    Values from www.erafit.com program.css. Every selector is wrapped in :where(),
 *    so none of this outranks a Tailwind class on the copied markup — only elements
 *    the editor inserted carry these names (checked: no template uses them) —
 *    except the size classes, which the element bar's Size also writes (below).
 *
 * Linked from every template after era.css (`#page_funnel_css`).
 */

/* ---- 1. FAQ accordion ---------------------------------------------------- */

:where(.faq_heading) {
  cursor: pointer;
}

:where(.faq_heading):hover {
  opacity: 0.8;
}

:where(.faq_item) :where(.faq_content) {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.3s linear, opacity 0.3s ease, visibility 0s linear 0.3s;
}

:where(.faq_item.open) :where(.faq_content) {
  max-height: 800px;
  opacity: 1;
  visibility: visible;
  transition: max-height 0.3s linear, opacity 0.3s ease, visibility 0s linear 0s;
}

/* ---- 2. What the editor's Add Web Elements writes ------------------------ */

:where(.text-align-left) { text-align: left; }
:where(.text-align-right) { text-align: right; }
:where(.text-align-center) { text-align: center; }
:where(.text-align-justify) { text-align: justify; }

/*
 * The one exception to :where(): a size class is also what the element bar's
 * Style → Size writes onto an EXISTING element, the user's explicit choice, so
 * it must beat the page's own size — workshop.css sets its sizes on plain
 * classes, which outrank a :where() rule (era-react's pages carry no such
 * sheet). No copied markup carries these classes until someone picks a size.
 */
.text-size\.48px { font-size: clamp(1.5rem, 5vw, 48px) !important; }
.text-size\.36px { font-size: clamp(1.5rem, 4vw, 36px) !important; }
.text-size\.24px { font-size: clamp(1.125rem, 3vw, 24px) !important; }
.text-size\.20px { font-size: clamp(18px, 2.5vw, 20px) !important; }
.text-size\.18px { font-size: clamp(16px, 2vw, 18px) !important; }
.text-size\.16px { font-size: 16px !important; }
.text-size\.15px { font-size: 15px !important; }
.text-size\.14px { font-size: 14px !important; }
.text-size\.13px { font-size: 13px !important; }
.text-size\.12px { font-size: 12px !important; }
.text-size\.11px { font-size: 11px !important; }
.text-size\.10px { font-size: 10px !important; }
.text-size\.9px { font-size: 9px !important; }
.text-size\.8px { font-size: 8px !important; }

/* Tailwind's preflight leaves headings at the body's weight; an inserted one is a heading. */
:where(h2, h3, h4, h5)[class*="text-size."] {
  font-weight: 700;
  line-height: 1.25;
  margin: 0.5rem 0;
}

:where(p)[class*="text-size."] {
  line-height: 1.5;
  margin: 0.5rem 0;
}

:where(.text-style-italic) { font-style: italic; }
:where(.text-weight-bold) { font-weight: bold; }
:where(.text-decoration-underline) { text-decoration: underline; }
:where(.text-transform-upper) { text-transform: uppercase; }

:where(.blockquote) {
  position: relative;
  font-weight: 300;
  margin: 0.75rem 0;
  border-left: 3px solid var(--border, #e5e5e5);
}
:where(.blockquote_content) { padding: 4px 16px; }
:where(.blockquote_footer) { padding: 0 17px; opacity: 0.7; }

:where(.ul_list) {
  padding: 0 8px;
  list-style-position: inside;
}
:where(.ul_list) li {
  list-style-position: inside;
  font-size: inherit;
}
:where(.ul_list.ul_style_check) li {
  list-style: none;
  display: table-row;
}
:where(.ul_list.ul_style_check) > li::before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="12px" height="12px"><g fill="green"><path d="M48.54,15.35,22.16,41.73a5,5,0,0,1-7.08,0L1.47,28.11A5,5,0,0,1,8.54,21L18.62,31.11,41.46,8.27a5,5,0,0,1,7.08,7.08Z"/></g></svg>');
  display: table-cell;
  text-align: right;
  padding-right: 9px;
  pointer-events: none;
  user-select: none;
}

/* The inserted Register button, in ERA's primary button look (eraapp's black CTA). */
:where(button.button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.75rem auto;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  background: #0a0a0a;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}
:where(button.button) > span {
  width: 100%;
}