/* =========================================================================
   OffPlan Insider - long-form article

   Treated as a printed research report: numbered sections, hairline rules
   instead of boxes, monospace for every figure and label, and one measured
   column with the data plates allowed to break wider.
   ========================================================================= */

/* Reading progress. Scroll-driven, no JavaScript, and absent where the
   browser cannot drive it rather than showing a misleading full bar. */
@supports (animation-timeline: scroll()) {
  .opi-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 60;
    animation: opiProgress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes opiProgress { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .opi-progress { display: none; } }

/* ---------------------------------------------------------------- masthead */
.opi-guide__masthead { padding-top: var(--space-16); padding-bottom: 0; }

.opi-guide__title {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: var(--text-1);
  text-wrap: balance;
  margin: 0;
}

/* The illustration is atmosphere, not information. A slim band reads as a
   masthead rule; the square it replaced pushed the argument below the fold. */
.opi-guide__figure { margin: var(--space-10) auto var(--space-12); max-width: 940px; }
.opi-guide__figure img { display: block; width: 100%; height: auto; object-fit: cover; object-position: 50% 46%; }

/* -------------------------------------------------------------- typography */
.entry-content { counter-reset: opi-section; }

.entry-content > p,
.entry-content > ul,
.entry-content > ol {
  font-size: var(--text-body);
  line-height: 1.72;
  color: var(--text-1);
  text-wrap: pretty;
  margin: 0 0 var(--space-6);
}

.entry-content > h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  line-height: 1.18;
  letter-spacing: var(--tracking-display);
  color: var(--text-1);
  text-wrap: balance;
  border-top: 1px solid var(--border-1);
  padding-top: var(--space-8);
  margin: var(--space-12) 0 var(--space-5);
}

/* Section numbers tie the body back to the contents list. */
.entry-content > h2::before {
  content: counter(opi-section, decimal-leading-zero);
  counter-increment: opi-section;
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.entry-content h3 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: var(--tracking-display);
  color: var(--text-1);
  text-wrap: balance;
  margin: var(--space-8) 0 var(--space-4);
}

.entry-content h2 + p,
.entry-content h3 + p { margin-top: 0; }

.entry-content strong { font-weight: var(--weight-semibold); color: var(--text-1); }

/* Figures inside prose get monospace so columns of numbers line up. */
.entry-content :is(p, li, td, th) :is(code, kbd),
.opi-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.entry-content a:not(.wp-element-button):not(.opi-btn) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.entry-content a:not(.wp-element-button):not(.opi-btn):hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ------------------------------------------------------------------- lists */
.entry-content > ul,
.entry-content > ol { padding-left: 0; list-style: none; }

.entry-content > ul > li,
.entry-content > ol > li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  line-height: 1.7;
}

.entry-content > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 14px;
  height: 1px;
  background: var(--accent);
}

.entry-content > ol { counter-reset: opi-ol; }
.entry-content > ol > li { counter-increment: opi-ol; }
.entry-content > ol > li::before {
  content: counter(opi-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .12em;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--accent);
}

.entry-content li > ul,
.entry-content li > ol { margin-top: var(--space-3); }

/* ------------------------------------------------------------------ tables */
/* Tables are the substance of these guides, so they are set as data, not as
   decorated boxes: hairline rules, tabular figures, no vertical borders. */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table { margin: var(--space-10) 0; max-width: none; }

.entry-content .wp-block-table > table,
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  line-height: 1.55;
  border: 0;
}

.entry-content table th {
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  vertical-align: bottom;
  padding: 0 var(--space-5) var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--ink-900);
  background: none;
}

.entry-content table td {
  padding: var(--space-4) var(--space-5) var(--space-4) 0;
  border: 0;
  border-bottom: 1px solid var(--border-1);
  vertical-align: top;
  color: var(--text-2);
}

.entry-content table tr > *:last-child { padding-right: 0; }

/* First column is the label: darker, tighter, never the one that wraps. */
.entry-content table td:first-child {
  color: var(--text-1);
  font-weight: var(--weight-medium);
  width: 26%;
  min-width: 9rem;
}

/* A two-column table is a definition list; give the value room. */
.entry-content table tr > td:nth-child(2) { font-variant-numeric: tabular-nums; }

/* Stop the notes column starving the amount column of width. */
.entry-content table td:nth-child(2):not(:last-child),
.entry-content table th:nth-child(2):not(:last-child) { min-width: 8.5rem; }
.entry-content table td:last-child:nth-child(3) { width: 46%; }
.entry-content table tr:last-child td { border-bottom: 1px solid var(--ink-900); }

.entry-content table tbody tr:hover td { background: var(--surface-sunken); }

/* Totals and summary rows carry their own weight. */
.entry-content table tr:last-child td strong,
.entry-content table td strong { color: var(--text-1); }

/* Wide tables scroll inside their own frame rather than breaking the page. */
.entry-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.entry-content .wp-block-table > table { min-width: 34rem; }

/* Table captions sat flush against the paragraph beneath them. */
.entry-content .wp-block-table figcaption,
.entry-content table + p.opi-caption {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--text-3);
  text-align: left;
}