/* ============================================================
   Hikari Skript — Article prose & house component library
   ------------------------------------------------------------
   Everything inside `.hs-prose` is author content that has been
   normalised by App\Services\ArticleRenderer. Authors never set
   fonts, sizes or colours: the house scale below does, so every
   post reads the same and dark mode works without effort.

   Tokens are scoped so this file can be dropped into the admin
   preview and the /style-guide page unchanged.
   ============================================================ */

.hs-prose {
  --hs-display: "Playfair Display", Georgia, "Times New Roman", serif;
  /* Helvetica Neue is used as-installed on macOS/iOS (no download);
     Arimo is the metric-compatible self-hosted fallback for everyone
     else. Declared in fonts-article.css. */
  --hs-body: "Helvetica Neue", "Arimo", Helvetica, Arial, "Mulish", system-ui, sans-serif;
  --hs-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --hs-text: #1b1d22;
  --hs-text-2: #5d6470;
  --hs-text-3: #8a919c;
  --hs-surface: #ffffff;
  --hs-surface-2: #f6f5f1;
  --hs-surface-3: #edece6;
  --hs-border: #e5e3dd;
  --hs-accent: var(--bd-category-color, #c9a84c);
  --hs-accent-soft: color-mix(in srgb, var(--hs-accent) 12%, transparent);
  --hs-accent-line: color-mix(in srgb, var(--hs-accent) 55%, transparent);
  --hs-radius: 12px;

  --hs-size: 1.125rem;      /* 18px */
  --hs-leading: 1.8;
  --hs-measure: 100%;

  font-family: var(--hs-body);
  font-size: var(--hs-size);
  line-height: var(--hs-leading);
  color: var(--hs-text);
  max-width: var(--hs-measure);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga", "calt";
}

body.dark .hs-prose {
  --hs-text: #e9e9ec;
  --hs-text-2: #a3a9b3;
  --hs-text-3: #7c828c;
  --hs-surface: #191a1f;
  --hs-surface-2: #20222a;
  --hs-surface-3: #2a2d36;
  --hs-border: #2e313a;
  --hs-accent-soft: color-mix(in srgb, var(--hs-accent) 18%, transparent);
}

@media (max-width: 767.98px) {
  .hs-prose {
    --hs-size: 1.0625rem; /* 17px */
    --hs-leading: 1.75;
  }
}

/* ---------- Flow rhythm ---------- */
.hs-prose > * + * { margin-top: 1.35em; }
.hs-prose > * { margin-bottom: 0; }

.hs-prose p { margin: 0; }
.hs-prose > p + p { margin-top: 1.35em; }

/* Opening paragraph gets a touch more presence */
.hs-prose > p:first-child {
  font-size: 1.08em;
  color: var(--hs-text);
}

/* ---------- Headings: a deliberate scale ---------- */
.hs-prose h2,
.hs-prose h3,
.hs-prose h4,
.hs-prose h5,
.hs-prose h6 {
  color: var(--hs-text);
  font-weight: 700;
  scroll-margin-top: 96px;
  text-wrap: balance;
}

.hs-prose > h2 { margin-top: 2.6em; }
.hs-prose > h3 { margin-top: 2em; }
.hs-prose > h4 { margin-top: 1.7em; }

.hs-prose h2 + *,
.hs-prose h3 + *,
.hs-prose h4 + * { margin-top: 0.75em; }

.hs-prose h2 {
  font-family: var(--hs-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  padding-top: 0.9em;
  border-top: 1px solid var(--hs-border);
}

.hs-prose h3 {
  font-family: var(--hs-body);
  font-size: 1.3em;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.hs-prose h4 {
  font-family: var(--hs-body);
  font-size: 1.05em;
  line-height: 1.35;
  font-weight: 800;
}

.hs-prose h5,
.hs-prose h6 {
  font-family: var(--hs-body);
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-text-2);
}

/* Heading anchors (added by article.js on hover) */
.hs-prose .hs-anchor {
  margin-left: 0.35em;
  color: var(--hs-text-3);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
  transition: opacity 0.2s ease;
}
.hs-prose h2:hover .hs-anchor,
.hs-prose h3:hover .hs-anchor,
.hs-prose .hs-anchor:focus-visible { opacity: 1; }

/* ---------- Inline ---------- */
.hs-prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--hs-accent-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.hs-prose a:hover { text-decoration-color: var(--hs-accent); }

.hs-prose strong { font-weight: 700; color: var(--hs-text); }
.hs-prose em { font-style: italic; }
.hs-prose mark {
  background: var(--hs-accent-soft);
  color: inherit;
  padding: 0 0.2em;
  border-radius: 3px;
}
.hs-prose code {
  color: inherit;
  font-family: var(--hs-mono);
  font-size: 0.86em;
  background: var(--hs-surface-3);
  padding: 0.15em 0.4em;
  border-radius: 5px;
}
.hs-prose sub, .hs-prose sup { font-size: 0.7em; line-height: 0; }

/* Inline colours/backgrounds that survive normalisation never override the theme */
.hs-prose [style*="color"] { color: inherit !important; }
.hs-prose [style*="background"] { background: transparent !important; }
.hs-prose [style*="font-family"] { font-family: inherit !important; }
.hs-prose [style*="font-size"] { font-size: inherit !important; }

/* ---------- Lists ---------- */
.hs-prose ul,
.hs-prose ol {
  padding-left: 1.4em;
  margin-bottom: 0;
}
.hs-prose li { padding-left: 0.25em; }
.hs-prose li + li { margin-top: 0.45em; }
.hs-prose li > ul,
.hs-prose li > ol { margin-top: 0.45em; }
.hs-prose ul > li::marker { color: var(--hs-accent); }
.hs-prose ol > li::marker {
  color: var(--hs-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hs-prose li p { margin: 0; }

/* ---------- Blockquote / pull quote ---------- */
.hs-prose blockquote {
  margin: 0;
  padding: 0.2em 0 0.2em 1.4em;
  border-left: 3px solid var(--hs-accent);
  font-family: var(--hs-display);
  font-size: 1.15em;
  line-height: 1.55;
  color: var(--hs-text);
  font-style: italic;
}
.hs-prose blockquote p + p { margin-top: 0.6em; }
.hs-prose blockquote cite,
.hs-prose blockquote footer {
  display: block;
  margin-top: 0.6em;
  font-family: var(--hs-body);
  font-size: 0.78em;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hs-text-2);
}

/* ---------- Figures & images ---------- */
.hs-prose img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--hs-radius);
}
.hs-prose p > img { margin: 0 auto; }

.hs-prose .hs-figure {
  margin: 2.2em 0;
}
.hs-prose .hs-figure img {
  width: 100%;
  background: var(--hs-surface-2);
}
.hs-prose .hs-figure > a { display: block; }
.hs-prose figcaption {
  margin-top: 0.7em;
  font-size: 0.82em;
  line-height: 1.5;
  color: var(--hs-text-2);
  text-align: center;
}
.hs-prose figcaption em { font-style: normal; }

/* ---------- Embeds ---------- */
.hs-prose .hs-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--hs-radius);
  overflow: hidden;
  background: #000;
  margin: 2.2em 0;
}
.hs-prose .hs-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Tables ---------- */
.hs-prose .hs-table {
  margin: 2em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  background: var(--hs-surface);
}
.hs-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  line-height: 1.5;
}
.hs-prose th,
.hs-prose td {
  padding: 0.75em 1em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hs-border);
}
.hs-prose th {
  background: var(--hs-surface-2);
  font-weight: 700;
  font-size: 0.82em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hs-text-2);
  white-space: nowrap;
}
.hs-prose th strong { font-weight: inherit; color: inherit; }
.hs-prose tbody tr:last-child td { border-bottom: 0; }
.hs-prose tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--hs-surface-2) 55%, transparent); }
.hs-prose td p,
.hs-prose th p { margin: 0; }
.hs-prose td p + p { margin-top: 0.4em; }
.hs-prose td:first-child { font-weight: 600; }

/* ---------- Code blocks ---------- */
.hs-prose pre {
  margin: 2em 0;
  padding: 1.1em 1.3em;
  border-radius: var(--hs-radius);
  background: #15171c;
  color: #e6e9ef;
  font-family: var(--hs-mono);
  font-size: 0.84em;
  line-height: 1.6;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.hs-prose pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}

/* ---------- Rules ---------- */
.hs-prose hr {
  border: 0;
  height: 1px;
  width: 72px;
  margin: 3em auto;
  background: var(--hs-border);
}

/* ============================================================
   House components — authors use these classes in HTML source.
   See /style-guide and docs/content-standards.md
   ============================================================ */

/* Highlight — coloured+bold terms from the editor, in the accent colour */
.hs-prose .hs-hl {
  color: var(--hs-accent);
  font-weight: 700;
}

/* Listicle entry — produced automatically from "23 **Title**" paragraphs
   or numbered headings; can also be hand-written. */
.hs-prose h2.hs-entry__title {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  margin-top: 3em;
  padding-top: 1.1em;
  border-top: 1px solid var(--hs-border);
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 1.85rem);
  line-height: 1.2;
}
.hs-prose h2.hs-entry__title + .hs-figure { margin-top: 1em; }
.hs-prose .hs-entry__rank {
  flex-shrink: 0;
  font-family: var(--hs-display);
  font-weight: 700;
  font-size: 1.55em;
  line-height: 1;
  color: var(--hs-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  position: relative;
  top: 0.06em;
}
.hs-prose .hs-entry__rank::after {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  margin-top: 0.18em;
  background: var(--hs-accent);
  border-radius: 2px;
}
.hs-prose .hs-entry__name { min-width: 0; }

/* Tagline under an entry image: "[ Tiny Worlds, Big Adventures ]" */
.hs-prose .hs-tagline {
  font-family: var(--hs-display);
  font-style: italic;
  font-size: 1.1em;
  color: var(--hs-accent);
  margin-top: 0.9em;
}
.hs-prose .hs-tagline + p { margin-top: 0.6em; }

/* Kicker / eyebrow label */
.hs-prose .hs-kicker {
  font-family: var(--hs-body);
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-accent);
  margin: 0 0 0.5em;
}

/* Callout — default, tip, note, warn */
.hs-prose .hs-callout {
  position: relative;
  margin: 2em 0;
  padding: 1.15em 1.4em 1.15em 1.6em;
  border-radius: var(--hs-radius);
  background: var(--hs-surface-2);
  border: 1px solid var(--hs-border);
  font-size: 0.95em;
  line-height: 1.65;
}
.hs-prose .hs-callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--hs-accent);
}
.hs-prose .hs-callout > * + * { margin-top: 0.6em; }
.hs-prose .hs-callout__title,
.hs-prose .hs-callout > p:first-child > strong:only-child {
  display: block;
  font-weight: 800;
  font-size: 0.95em;
  color: var(--hs-text);
  margin: 0;
}
.hs-prose .hs-callout__title strong { font-weight: inherit; }
.hs-prose .hs-callout--tip  { --hs-accent: #2f9e6a; }
.hs-prose .hs-callout--note { --hs-accent: #3b7dd8; }
.hs-prose .hs-callout--warn { --hs-accent: #d6792a; }

/* Key takeaways box — put near the top of long posts */
.hs-prose .hs-key-takeaways {
  margin: 2em 0;
  padding: 1.4em 1.6em;
  border-radius: var(--hs-radius);
  background: var(--hs-accent-soft);
  border: 1px solid color-mix(in srgb, var(--hs-accent) 30%, transparent);
  font-size: 0.95em;
}
.hs-prose .hs-key-takeaways .hs-kicker { margin-bottom: 0.8em; }
.hs-prose .hs-key-takeaways ul { padding-left: 1.2em; }
.hs-prose .hs-key-takeaways li + li { margin-top: 0.55em; }

/* Stats strip — 2–4 numbers with labels */
.hs-prose .hs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 2em 0;
  background: var(--hs-border);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  overflow: hidden;
}
.hs-prose .hs-stat {
  background: var(--hs-surface);
  padding: 1.1em 1.2em;
}
.hs-prose .hs-stat__value {
  display: block;
  font-family: var(--hs-display);
  font-size: 1.9em;
  line-height: 1.1;
  font-weight: 700;
  color: var(--hs-text);
  font-variant-numeric: tabular-nums;
}
.hs-prose .hs-stat__label {
  display: block;
  margin-top: 0.35em;
  font-size: 0.72em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-text-2);
}

/* Verdict / rating bar for reviews */
.hs-prose .hs-verdict {
  display: flex;
  align-items: center;
  gap: 1.2em;
  margin: 2em 0;
  padding: 1.2em 1.4em;
  border-radius: var(--hs-radius);
  border: 1px solid var(--hs-border);
  background: var(--hs-surface-2);
}
.hs-prose .hs-verdict__score {
  font-family: var(--hs-display);
  font-size: 2.6em;
  font-weight: 700;
  line-height: 1;
  color: var(--hs-accent);
  flex-shrink: 0;
}
.hs-prose .hs-verdict__score small { font-size: 0.42em; color: var(--hs-text-3); }
.hs-prose .hs-verdict__text { font-size: 0.95em; }
.hs-prose .hs-verdict__text > * + * { margin-top: 0.3em; }

/* Pros / cons */
.hs-prose .hs-pros-cons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 2em 0;
  font-size: 0.95em;
}
.hs-prose .hs-pros-cons > div {
  padding: 1.1em 1.3em;
  border-radius: var(--hs-radius);
  border: 1px solid var(--hs-border);
  background: var(--hs-surface);
}
.hs-prose .hs-pros-cons .hs-kicker { margin-bottom: 0.6em; }
.hs-prose .hs-pros .hs-kicker { color: #2f9e6a; }
.hs-prose .hs-cons .hs-kicker { color: #d6792a; }
.hs-prose .hs-pros-cons ul { padding-left: 1.2em; }

/* FAQ — native <details>, indexable, keyboard-accessible */
.hs-prose .hs-faq { margin: 2em 0; border-top: 1px solid var(--hs-border); }
.hs-prose .hs-faq details {
  border-bottom: 1px solid var(--hs-border);
}
.hs-prose .hs-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1em 2.2em 1em 0;
  font-weight: 700;
  position: relative;
  color: var(--hs-text);
}
.hs-prose .hs-faq summary::-webkit-details-marker { display: none; }
.hs-prose .hs-faq summary::after {
  content: "+";
  position: absolute;
  right: 0.3em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  color: var(--hs-accent);
  transition: transform 0.2s ease;
}
.hs-prose .hs-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.hs-prose .hs-faq details > :not(summary) {
  padding: 0 0 1.1em;
  font-size: 0.95em;
  color: var(--hs-text-2);
}

/* Steps — numbered process where order matters */
.hs-prose .hs-steps {
  list-style: none;
  padding: 0;
  margin: 2em 0;
  counter-reset: hs-step;
}
.hs-prose .hs-steps > li {
  position: relative;
  padding-left: 3.2em;
  counter-increment: hs-step;
}
.hs-prose .hs-steps > li + li { margin-top: 1.4em; }
.hs-prose .hs-steps > li::before {
  content: counter(hs-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--hs-display);
  font-size: 1.3em;
  font-weight: 700;
  color: var(--hs-accent);
  font-variant-numeric: tabular-nums;
}
.hs-prose .hs-steps > li > strong:first-child { display: block; margin-bottom: 0.2em; }

/* CTA / affiliate box */
.hs-prose .hs-cta {
  margin: 2em 0;
  padding: 1.4em 1.6em;
  border-radius: var(--hs-radius);
  background: var(--hs-text);
  color: var(--hs-surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  font-size: 0.95em;
}
.hs-prose .hs-cta p { margin: 0; }
.hs-prose .hs-cta .hs-kicker { color: var(--hs-accent); margin-bottom: 0.2em; }
.hs-prose .hs-cta a.hs-button {
  text-decoration: none;
  background: var(--hs-accent);
  color: #fff;
  padding: 0.7em 1.3em;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.9em;
  white-space: nowrap;
}

/* Lead / standfirst inside content */
.hs-prose .hs-lead {
  font-size: 1.15em;
  line-height: 1.6;
  color: var(--hs-text-2);
}

/* Small print */
.hs-prose .hs-small {
  font-size: 0.82em;
  color: var(--hs-text-3);
}

/* ---------- Print ---------- */
@media print {
  .hs-prose { font-size: 11pt; color: #000; }
  .hs-prose a { text-decoration-color: #000; }
  .hs-prose .hs-embed { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-prose * { transition: none !important; }
}