/**
 * Tayarut Conferences — front-end styles.
 *
 * Values are taken from the theme's :root tokens, with fallbacks so the plugin
 * still looks right if it's ever activated under a different theme.
 *
 * The date is the anchor of a conference card: it leads, it's set in the display
 * face, and it's the only place accent colour appears. Past conferences recede
 * rather than disappear — they stay listed, just visibly behind the upcoming ones.
 */

/* Clearing the theme's fixed header.
 *
 * .site-header is position:fixed, so it is out of flow and <main> starts at the
 * very top of the page — the header floats over it. The theme only offsets
 * .site-content by 48px, which is less than the header is tall, so our first
 * block ended up tucked under it.
 *
 * --conf-header-clearance is the header's real height (18px + --logo-h 66px + 18px);
 * --conf-page-top is the gap you actually see below it. Adjust the gap, not the
 * clearance — the clearance only changes if the theme's header does.
 */
:root {
  --conf-header-clearance: 102px;
  --conf-page-top: 40px;
  --conf-page-bottom: 64px;
}

@media (max-width: 720px) {
  :root {
    /* Mobile header: 12px + --logo-h-mobile 60px + 12px */
    --conf-header-clearance: 84px;
    --conf-page-top: 24px;
    --conf-page-bottom: 44px;
  }
}

/* The theme's own 48px offset would stack on top of our clearance and push the
   page too far down, so on our templates we own the spacing outright.
   `main.site-content` outranks the theme's `body:not(.home) .site-content`
   regardless of stylesheet order. */
body.single-conference main.site-content,
body.post-type-archive-conference main.site-content {
  padding-top: 0;
}

.conferences-block,
.conferences-archive {
  --conf-surface: var(--warm-bg, #faf8f5);
  --conf-surface-deep: var(--warm-bg-deep, #f3efe9);
  --conf-line: var(--line, #e5e2dc);
  --conf-text: var(--text, #1a1a2e);
  --conf-muted: var(--muted, #6b7280);
  --conf-accent: var(--accent, #c4553a);
  --conf-accent-soft: var(--accent-light, #f0ddd7);
  --conf-primary: var(--primary, #1e4fd7);
  --conf-radius: var(--radius-md, 14px);
  --conf-display: var(--font-display, "Secular One", "Heebo", system-ui, sans-serif);
  --conf-body: var(--font-body, "Heebo", system-ui, sans-serif);

  direction: rtl;
  text-align: right;
  font-family: var(--conf-body);
}

/* ----------------------------------------------------------------- table
 *
 * Deliberately light: no outer box, no fills, hairline row rules only, so the
 * block reads as part of the surrounding page rather than an embedded widget.
 */

.conferences-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0;
  background: none;
  border: none;
}

.conferences-table thead th {
  font-family: var(--conf-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--conf-muted);
  text-align: right;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--conf-line);
  background: none;
}

.conferences-table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--conf-line);
  vertical-align: baseline;
  background: none;
}

/* Column widths: the date is fixed-ish, the name takes the slack. */
.conferences-table__col-date {
  width: 1%;
  white-space: nowrap;
  padding-inline-end: 22px !important;
}

.conferences-table__col-location,
.conferences-table__col-audience {
  width: 1%;
  white-space: nowrap;
  padding-inline-start: 22px !important;
  color: var(--conf-muted);
  font-size: 14px;
}

.conferences-table__col-location {
  color: var(--conf-text);
}

.conferences-table__date {
  font-weight: 600;
  color: var(--conf-accent);
  font-variant-numeric: tabular-nums;
}

.conferences-table__link {
  font-family: var(--conf-display);
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--conf-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.conferences-table__link:hover,
.conferences-table__link:focus-visible {
  color: var(--conf-accent);
  border-bottom-color: currentColor;
}

/* The teaser is rich text, so it arrives wrapped in <p> (and may contain lists
   or links). Neutralise the block margins so a table row stays compact. */
.conferences-table__text {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--conf-muted);
  white-space: normal;
}

.conferences-table__text > * { margin-block: 0; }
.conferences-table__text > * + * { margin-top: 6px; }

.conferences-table__text a { color: var(--conf-primary); }
.conferences-table__text strong { color: var(--conf-text); }

/* Headings in a teaser would tower over the conference name — hold them level. */
.conferences-table__text h1,
.conferences-table__text h2,
.conferences-table__text h3,
.conferences-table__text h4 {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--conf-text);
}

.conferences-table__text ul,
.conferences-table__text ol {
  padding-inline-start: 18px;
}

.conferences-table__text img { max-width: 100%; height: auto; }

.conferences-table__flag {
  margin-inline-start: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--conf-muted);
  background: var(--conf-surface-deep);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.conferences-table__empty {
  color: var(--conf-muted);
}

/* Past conferences stay listed, one step back. */
.conferences-table__row--past .conferences-table__date {
  color: var(--conf-muted);
  font-weight: 500;
}

.conferences-table__row--past .conferences-table__link {
  color: var(--conf-muted);
}

.conferences-table tbody tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------- archive */

.conferences-archive {
  padding-block: calc(var(--conf-header-clearance, 102px) + var(--conf-page-top, 40px)) var(--conf-page-bottom, 64px);
}

.conferences-archive__head {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--conf-line);
}

.conferences-archive__title {
  font-family: var(--conf-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  margin: 0;
  color: var(--conf-text);
}

.conferences-archive__count {
  margin: 8px 0 0;
  font-size: 14.5px;
  color: var(--conf-muted);
}

.conferences-archive__empty {
  margin: 0;
  padding: 40px 0;
  font-size: 16px;
  color: var(--conf-muted);
}

.conferences-archive .conferences-pagination {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.conferences-archive .conferences-pagination .page-numbers {
  min-width: 38px;
  padding: 8px 12px;
  border: 1px solid var(--conf-line);
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: var(--conf-text);
}

.conferences-archive .conferences-pagination .page-numbers.current {
  background: var(--conf-accent);
  border-color: var(--conf-accent);
  color: #fff;
}

/* ----------------------------------------------------------- single page */

.conference-single {
  --conf-surface: var(--warm-bg, #faf8f5);
  --conf-surface-deep: var(--warm-bg-deep, #f3efe9);
  --conf-line: var(--line, #e5e2dc);
  --conf-text: var(--text, #1a1a2e);
  --conf-muted: var(--muted, #6b7280);
  --conf-accent: var(--accent, #c4553a);
  --conf-accent-soft: var(--accent-light, #f0ddd7);
  --conf-primary: var(--primary, #1e4fd7);
  --conf-display: var(--font-display, "Secular One", "Heebo", system-ui, sans-serif);
  --conf-body: var(--font-body, "Heebo", system-ui, sans-serif);

  direction: rtl;
  text-align: right;
  font-family: var(--conf-body);
  padding-block: calc(var(--conf-header-clearance, 102px) + var(--conf-page-top, 40px)) var(--conf-page-bottom, 64px);
}

.conference-single__head {
  background: var(--conf-surface);
  border: 1px solid var(--conf-line);
  border-radius: var(--radius-lg, 18px);
  padding: 30px 32px;
}

/* Conference names are usually in English and the date is always Latin digits,
   so both are set left inside the otherwise RTL header. */
.conference-single__date {
  display: block;
  text-align: left;
  font-family: var(--conf-display);
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.1;
  color: var(--conf-accent);
}

.conference-single__title {
  text-align: left;
  font-family: var(--conf-display);
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.2;
  margin: 10px 0 0;
  color: var(--conf-text);
}

/* Pushed to the left edge to sit under the date and title. In an RTL flex row
   the main axis runs right-to-left, so flex-end is the left side — this moves
   the group without reversing the badges' reading order. */
.conference-single__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.conference-single__audience {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--conf-accent);
  background: var(--conf-accent-soft);
  border-radius: 999px;
  padding: 5px 13px;
}

/* The other service: an option, not the point of the page.
 *
 * It sits under the conference's own link, so it is read after the reason for
 * visiting rather than beside it. Outlined rather than filled, and a size down
 * from the body text — enough to read as something you can press, not enough to
 * compete with "לאתר הכנס" above it or the travel section below. */
.conference-single__cross-wrap {
  margin: 12px 0 0;
}

.conference-cross {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--conf-text);
  background: transparent;
  border: 1px solid var(--conf-line);
  border-radius: 999px;
  padding: 7px 14px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.conference-cross::after {
  content: "←";
  font-size: 13px;
  line-height: 1;
  opacity: .7;
  transition: transform .2s ease;
}

.conference-cross:hover,
.conference-cross:focus-visible {
  color: var(--conf-primary);
  border-color: var(--conf-primary);
  background: var(--conf-surface);
}

.conference-cross:hover::after,
.conference-cross:focus-visible::after { transform: translateX(-3px); }

@media (prefers-reduced-motion: reduce) {
  .conference-cross,
  .conference-cross::after { transition: none; }
  .conference-cross:hover::after { transform: none; }
}

.conference-single__location {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--conf-text);
  background: var(--conf-surface-deep);
  border-radius: 999px;
  padding: 5px 13px;
}

/* ------------------------------------------------- ended conference page
 *
 * An ended conference keeps its page, so the page has to say so immediately:
 * a badge above the date, and a drained header. The body text is left at full
 * contrast — the page is inactive, not unreadable.
 */

.conference-single__ended {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--conf-text);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.conference-single__ended::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff8f7a;
}

/* Drain the header so the page reads as an archive record at a glance. */
.conference-single--past .conference-single__head {
  background: var(--conf-surface-deep);
  border-color: #dcd8d1;
}

.conference-single--past .conference-single__date,
.conference-single--past .conference-single__title {
  color: var(--conf-muted);
}

.conference-single--past .conference-single__audience {
  color: var(--conf-muted);
  background: #e8e4dd;
}

.conference-single--past .conference-single__location {
  color: var(--conf-muted);
}

/* The short text is not printed on the conference page — the page shows the full
   content instead. It appears only in the conferences table. */

/* The conference body now lives inside the rounded block, under the tags. */
.conference-single__body {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--conf-line);
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--conf-text);
  max-width: 70ch;
}

.conference-single__body > :first-child { margin-top: 0; }
.conference-single__body h2,
.conference-single__body h3 {
  font-family: var(--conf-display);
  line-height: 1.3;
  margin: 1.6em 0 .5em;
}
.conference-single__body img { max-width: 100%; height: auto; border-radius: var(--radius-md, 14px); }
.conference-single__body a { color: var(--conf-primary); }

/* ----------------------------------------------- conference website link
 *
 * Deliberately a plain inline link, not a button. It sends the reader off the
 * blog, so it must stay quieter than the outro link below it — which is the
 * actual call to action.
 */

.conference-single__website-wrap {
  margin: 20px 0 0;
  font-size: 15px;
}

.conference-single__website {
  color: var(--conf-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.conference-single__website:hover,
.conference-single__website:focus-visible {
  color: var(--conf-text);
}

/* External link — the arrow points away from the reader in RTL, so up-left.
   inline-block keeps the link's underline from running under the arrow: text
   decoration does not propagate into an atomic inline-level box. */
.conference-single__website::after {
  content: "\2196"; /* ↖ as an escape, so the glyph can't be mangled by encoding */
  display: inline-block;
  margin-inline-start: 5px;
  font-size: .9em;
  text-decoration: none;
}

/* --------------------------------------------------------- travel content
 *
 * A second long-form body, sitting below the conference block — plain page
 * text, no surface or border, so it reads as the article after the fact card.
 */

/* The heading and the body set their own widths, so the section itself doesn't
   cap them. */
.conference-single__travel {
  margin-top: 34px;
}

/* The section heading — set apart from any headings inside the content itself. */
.conference-single__travel-title {
  max-width: 70ch;
  font-family: var(--conf-display);
  font-size: clamp(21px, 2.8vw, 27px);
  line-height: 1.3;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--conf-line);
  color: var(--conf-text);
}

.conference-single__travel-body {
  /* 100px wider than the usual 70ch reading measure. */
  max-width: calc(70ch + 100px);
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--conf-text);
}

.conference-single__travel-body > :first-child { margin-top: 0; }
.conference-single__travel-body > :last-child { margin-bottom: 0; }

.conference-single__travel-body h2,
.conference-single__travel-body h3 {
  font-family: var(--conf-display);
  font-size: 19px;
  line-height: 1.3;
  margin: 1.6em 0 .5em;
}

.conference-single__travel-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md, 14px);
}

.conference-single__travel-body a { color: var(--conf-primary); }

/* ------------------------------------------- standing text blocks (global) */

.conference-intro,
.conference-outro {
  font-size: 16px;
  line-height: 1.8;
  color: var(--conf-muted);
  max-width: 70ch;
}

.conference-intro {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--conf-line);
  padding-top: 110px;
}

.conference-outro {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--conf-line);
}

.conference-intro > :first-child,
.conference-outro > :first-child { margin-top: 0; }
.conference-intro > :last-child,
.conference-outro > :last-child { margin-bottom: 0; }

.conference-intro a,
.conference-outro a { color: var(--conf-primary); }

/* With an image the intro becomes a two-column band. The 70ch measure moves to
   the text column, since the shared cap above would otherwise size both columns
   together and leave the image tiny. */
/* space-between drives the image to the end of the line, which in RTL is the left
   edge of .container — the same edge .conference-single__head's border sits on, so
   the two line up. Without it the text column's 70ch cap leaves slack that collects
   on the left and holds the image away from that edge. */
.conference-intro--has-media {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: none;
}

.conference-intro--has-media .conference-intro__text {
  flex: 1 1 0;
  min-width: 0;
  max-width: 70ch;
}

/* The number is the image column's share of the block width — raise it to make the
   image bigger, lower it to make it smaller. Fixed rather than shrinkable so it
   holds that share at every width down to the stacking breakpoint. */
.conference-intro__media {
  flex: 0 0 28%;
  margin: 0;
}

.conference-intro__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--conf-radius, 14px);
}

/* The heading pair mirrors the theme's .entry-title / .entry-content h2 rules.
   Repeated here — scoped, and against the guarded tokens — because the block
   sits outside .entry-content, where the theme's heading rule does not reach. */
.conference-intro .entry-header { margin: 0; }

.conference-intro .confertrek-title {
  margin: 0 0 12px;
  font-family: var(--conf-display);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.15;
  letter-spacing: 0.3px;
  color: var(--conf-text);
}

/* Top margin dropped from the theme's 1.4em: this h2 follows its own h1 rather
   than a paragraph, and the inherited gap read as a break between them. */
.conference-intro .wp-block-heading {
  margin: 0 0 .5em;
  font-family: var(--conf-display);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: var(--conf-text);
}

.conference-intro .entry-content {
  font-size: 18px;
  line-height: 1.9;
  color: #0f172a;
}

/* The text is nested now, so the shared "> :last-child" reset above no longer
   reaches the closing paragraph — its 1em would show as slack above the rule. */
.conference-intro .entry-content > :last-child { margin-bottom: 0; }

/* The primary call to action on the page: keeps the reader on the blog, so it
   outweighs the outbound conference-site link above it. */
.conference-outro__link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--conf-display);
  font-size: 18px;
  color: var(--conf-accent);
  text-decoration: none;
  border-bottom: 2px solid var(--conf-accent-soft);
  padding-bottom: 2px;
  transition: border-color .18s ease;
}

.conference-outro__link:hover,
.conference-outro__link:focus-visible {
  border-bottom-color: var(--conf-accent);
}

/* In RTL the "onward" arrow points left. */
.conference-outro__link::after {
  content: "\2190"; /* ← */
  margin-inline-start: 8px;
}

/* ----------------------------------------------------------- responsive */

/* Side by side, neither the text measure nor the image has room left here, so
   the intro stacks — image below the text, keeping the reading order. */
@media (max-width: 720px) {
  .conference-intro--has-media {
    display: block;
  }

  .conference-intro__media {
    margin-top: 22px;
  }
}

/* Below this width the three columns stop fitting, so each row becomes a
   stacked block with its column name as the label. */
@media (max-width: 560px) {
  .conferences-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .conferences-table,
  .conferences-table tbody,
  .conferences-table tr,
  .conferences-table td {
    display: block;
    width: auto;
  }

  .conferences-table tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--conf-line);
  }

  .conferences-table tbody tr:last-child {
    border-bottom: none;
  }

  .conferences-table td {
    padding: 0 !important;
    border-bottom: none;
    white-space: normal;
  }

  .conferences-table__col-name { margin-top: 4px; }

  .conferences-table__col-location,
  .conferences-table__col-audience {
    margin-top: 6px;
    font-size: 13px;
  }

  .conferences-table__col-location::before,
  .conferences-table__col-audience::before {
    content: attr(data-label) ": ";
  }

  .conference-single__head { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .conference-single__website { transition: none; }
}

/* The way through to a service's past conferences, sitting under its table.
   A quiet trailing link rather than a button: it leads away from the list the
   page is actually about. Hidden entirely when that archive would be empty —
   see Tayarut_Conferences_Shortcode::past_link(). */
.conferences-past-link {
  margin: 14px 0 0;
  text-align: left;
  font-size: 14.5px;
}

.conferences-past-link__a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--conf-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.conferences-past-link__a:hover,
.conferences-past-link__a:focus-visible {
  color: var(--conf-accent);
  border-bottom-color: currentColor;
}

.conferences-past-link__arrow {
  transition: transform .18s ease;
}

.conferences-past-link__a:hover .conferences-past-link__arrow {
  transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .conferences-past-link__a,
  .conferences-past-link__arrow {
    transition: none;
  }
}