/* rcd-about.css -- the "O nas" (About) accordion.
 *
 * FULLY SCOPED to .about-section: every selector below starts there, so the
 * block can be dropped into any page (incl. the rabbi portfolio block) without
 * leaking a single rule. No copy, no layout assumptions about the host page.
 *
 * THEME: dark is the DEFAULT (the platform's identity, matching base.html which
 * is dark unless rlp-theme.js sets [data-theme]). Light is applied when an
 * explicit light theme is set -- [data-theme="dawn"] (this app) or
 * [data-theme="light"] (generic). Add the class `about-section--auto` to the
 * mount root to ALSO follow prefers-color-scheme when the host page has not
 * declared a theme -- for embedding into a light host.
 *
 * RTL: driven by [dir="rtl"] on the block or any ancestor. No physical
 * properties are used for the directional bits (padding-inline, border-inline).
 */

.about-section {
  --ab-ink: #e8edf4;
  --ab-ink-soft: #b9c6da;
  --ab-faint: #8798b1;
  --ab-gold: #d4a017;
  --ab-gold-soft: rgba(212, 160, 23, .22);
  --ab-card: rgba(255, 255, 255, .035);
  --ab-card-hi: rgba(255, 255, 255, .06);
  --ab-line: rgba(212, 160, 23, .18);
  --ab-line-soft: rgba(255, 255, 255, .09);
  --ab-tbd-bg: rgba(212, 160, 23, .09);
  --ab-focus: #7fb0e6;
  --ab-radius: 14px;

  color: var(--ab-ink);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
}

/* ---- light: explicit theme attribute (this app uses "dawn") -------------- */
:root[data-theme="dawn"] .about-section,
:root[data-theme="light"] .about-section,
.about-section[data-theme="light"] {
  --ab-ink: #16233a;
  --ab-ink-soft: #40536e;
  --ab-faint: #6b7d96;
  --ab-gold: #8f6410;
  --ab-gold-soft: rgba(143, 100, 16, .18);
  --ab-card: rgba(19, 35, 57, .035);
  --ab-card-hi: rgba(19, 35, 57, .06);
  --ab-line: rgba(143, 100, 16, .22);
  --ab-line-soft: rgba(19, 35, 57, .1);
  --ab-tbd-bg: rgba(143, 100, 16, .08);
  --ab-focus: #1f4e79;
}

/* ---- light: opt-in system preference (for light host pages) -------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .about-section--auto {
    --ab-ink: #16233a;
    --ab-ink-soft: #40536e;
    --ab-faint: #6b7d96;
    --ab-gold: #8f6410;
    --ab-gold-soft: rgba(143, 100, 16, .18);
    --ab-card: rgba(19, 35, 57, .035);
    --ab-card-hi: rgba(19, 35, 57, .06);
    --ab-line: rgba(143, 100, 16, .22);
    --ab-line-soft: rgba(19, 35, 57, .1);
    --ab-tbd-bg: rgba(143, 100, 16, .08);
    --ab-focus: #1f4e79;
  }
}

/* ---- header ------------------------------------------------------------- */
.about-section .ab-head { margin: 0 0 1.5rem; }

.about-section .ab-title {
  font-family: Cinzel, "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--ab-gold);
  margin: 0 0 .45rem;
  text-wrap: balance;
}

.about-section .ab-lead {
  margin: 0;
  color: var(--ab-ink-soft);
  font-size: 1.06rem;
  max-width: 62ch;
  text-wrap: pretty;
}

.about-section .ab-insert {
  margin: .9rem 0 0;
  padding: .7rem .95rem;
  border-inline-start: 3px solid var(--ab-gold);
  border-radius: 0 var(--ab-radius) var(--ab-radius) 0;
  background: var(--ab-card);
  color: var(--ab-ink-soft);
  font-size: .97rem;
}

.about-section[dir="rtl"] .ab-insert,
[dir="rtl"] .about-section .ab-insert {
  border-radius: var(--ab-radius) 0 0 var(--ab-radius);
}

/* ---- accordion ---------------------------------------------------------- */
.about-section .ab-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.about-section .ab-item {
  background: var(--ab-card);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  overflow: hidden;
  transition: border-color .25s ease, background-color .25s ease;
}

.about-section .ab-item:hover { border-color: var(--ab-gold-soft); }
.about-section .ab-item.is-open {
  background: var(--ab-card-hi);
  border-color: var(--ab-gold-soft);
}

/* the trigger IS a button -- keyboard operable for free */
.about-section .ab-q {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  margin: 0;
  padding: .95rem 1.1rem;
  background: none;
  border: 0;
  border-radius: inherit;
  color: inherit;
  font: inherit;
  font-family: Cinzel, "Iowan Old Style", Georgia, serif;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.about-section .ab-q:hover { color: var(--ab-gold); }

.about-section .ab-q:focus-visible {
  outline: 2px solid var(--ab-focus);
  outline-offset: -3px;
}

.about-section .ab-q-text { flex: 1 1 auto; min-width: 0; }

.about-section .ab-chev {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--ab-line);
  border-radius: 50%;
  color: var(--ab-gold);
  font-size: .78rem;
  line-height: 1;
  transition: transform .28s ease, border-color .25s ease;
}

.about-section .ab-q[aria-expanded="true"] .ab-chev { transform: rotate(90deg); }

.about-section[dir="rtl"] .ab-q[aria-expanded="true"] .ab-chev,
[dir="rtl"] .about-section .ab-q[aria-expanded="true"] .ab-chev {
  transform: rotate(-90deg);
}

/* the panel: plain [hidden] so no-JS / no-CSS keeps it readable */
.about-section .ab-panel {
  padding: 0 1.1rem 1.15rem;
  border-top: 1px solid var(--ab-line-soft);
  margin-top: -1px;
}

.about-section .ab-panel[hidden] { display: none; }

.about-section .ab-panel > p {
  margin: .85rem 0 0;
  color: var(--ab-ink-soft);
  max-width: 68ch;
  text-wrap: pretty;
}

/* ---- key/value + bullet rows ------------------------------------------- */
.about-section .ab-facts {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.about-section .ab-fact {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: .2rem 1rem;
  padding: .55rem 0;
  border-top: 1px solid var(--ab-line-soft);
}

.about-section .ab-fact:first-child { border-top: 0; }

.about-section .ab-fact.is-bullet {
  grid-template-columns: 1fr;
  padding-inline-start: 1.1rem;
  position: relative;
  color: var(--ab-ink-soft);
}

.about-section .ab-fact.is-bullet::before {
  content: "\2022";
  position: absolute;
  inset-inline-start: 0;
  color: var(--ab-gold);
}

.about-section .ab-k {
  color: var(--ab-faint);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding-top: .18rem;
}

.about-section .ab-v {
  color: var(--ab-ink-soft);
  overflow-wrap: anywhere;
}

/* a deliberately unfinished fact -- must LOOK unfinished, never like a claim */
.about-section .ab-fact.is-tbd {
  background: var(--ab-tbd-bg);
  border-radius: 8px;
  padding-inline: .6rem;
}

.about-section .ab-tbd-tag {
  display: inline-block;
  margin-inline-end: .4rem;
  padding: .05rem .4rem;
  border: 1px dashed var(--ab-gold);
  border-radius: 5px;
  color: var(--ab-gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: .08em;
}

/* ---- language switch (component-local; the page also has ?lang=) -------- */
.about-section .ab-langs {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 1.1rem 0 0;
}

.about-section .ab-lang {
  padding: .25rem .6rem;
  background: none;
  border: 1px solid var(--ab-line);
  border-radius: 8px;
  color: var(--ab-faint);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.about-section .ab-lang:hover { color: var(--ab-gold); }
.about-section .ab-lang:focus-visible {
  outline: 2px solid var(--ab-focus);
  outline-offset: 2px;
}
.about-section .ab-lang[aria-current="true"] {
  background: var(--ab-gold-soft);
  border-color: var(--ab-gold);
  color: var(--ab-gold);
}

/* ---- narrow screens ---------------------------------------------------- */
@media (max-width: 33rem) {
  .about-section .ab-fact { grid-template-columns: 1fr; }
  .about-section .ab-q { padding: .85rem .85rem; font-size: 1rem; }
  .about-section .ab-panel { padding: 0 .85rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .about-section .ab-item,
  .about-section .ab-chev { transition: none; }
}

/* ---- print: everything open, ink on paper ------------------------------ */
@media print {
  .about-section { color: #000; }
  .about-section .ab-langs { display: none; }
  .about-section .ab-panel[hidden] { display: block !important; }
  .about-section .ab-chev { display: none; }
  .about-section .ab-item { border-color: #999; background: none; }
}