/* BRAND-TOKENS:BEGIN (generated by theme/_design-src/latvanyterv/palettak.py apply) */
:root {
  --brand-paper: #FBF6EA;
  --brand-header: #E8E2D4; /* page/post title band, Gyuri (card d605705a) */
  --brand-surface: #FFFFFF;
  --brand-sand: #F4E9D2;
  --brand-line: #E9DDC3;
  --brand-ink: #231910;
  --brand-inkSoft: #4B3D2C;
  --brand-muted: #6A5A45;
  --brand-faint: #A89579;
  --brand-sage: #8A5510;
  --brand-sageTint: #FBEFD8;
  --brand-sageBorder: #E6C88F;
  --brand-forest: #94590C;
  --brand-forestDark: #74450A;
  --brand-deep: #2E2013;
  --brand-night: #1E150C;
  --brand-terracotta: #B2560F;
  --brand-terracottaDark: #8F440B;
  --brand-gold: #F0B43C;
  --brand-onDeep: #F1E6D2;
  --brand-onDeepMuted: #C9B697;
  --brand-deepBorder: #55412A;
  --brand-footText: #D9CBB2;
  --brand-footFaint: #A8977C;
  --brand-footRule: #3A2C1D;
}
/* BRAND-TOKENS:END */

/* Custom Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--brand-sand); }
::-webkit-scrollbar-thumb { background: var(--brand-sageBorder); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-sage); }

/* Reveal on Scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Highlight underline effect */
.highlight-text {
  background: linear-gradient(120deg, var(--brand-sageTint) 0%, var(--brand-sageTint) 100%);
  background-repeat: no-repeat; background-size: 100% 0.4em; background-position: 0 88%;
  transition: background-size 0.25s ease-in;
}
.highlight-text:hover { background-size: 100% 88%; }

/* FAQ details animation helpers */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary ~ * { animation: sweep .5s ease-in-out; }
@keyframes sweep { 0% {opacity: 0; transform: translateY(-10px)} 100% {opacity: 1; transform: translateY(0)} }
.rotate-icon { transition: transform 0.3s ease; }
details[open] .rotate-icon { transform: rotate(180deg); }

/* FAQ accordion (hcms-faq — engine-generált GYIK blokk) */
/* FAQ block: a honey-tint card, set off from the page (card d605705a) */
.hcms-faq { background-color: var(--brand-sageTint); border: 1px solid var(--brand-sageBorder); border-radius: 10px; padding: 0 1.25rem; margin: 1.75rem 0; }
.hcms-faq details + details { border-top: 1px solid var(--brand-sageBorder); }
.hcms-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1rem 0; cursor: pointer; font-weight: 600; color: var(--brand-ink);
  transition: color 0.15s ease;
}
.hcms-faq__q:hover { color: var(--brand-inkSoft); }
.hcms-faq__icon {
  flex: 0 0 auto; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--brand-sage); border-bottom: 2px solid var(--brand-sage);
  transform: rotate(45deg); transition: transform 0.3s ease;
}
details[open] > .hcms-faq__q .hcms-faq__icon { transform: rotate(-135deg); }
.hcms-faq__a { padding: 0 0 1rem; color: var(--brand-muted); }
.hcms-faq__a p { margin: 0 0 0.75rem; }
.hcms-faq__a p:last-child { margin-bottom: 0; }

/* Blockquote styling */
.quote {
  border-left: 6px solid var(--brand-sage);
  background-color: var(--brand-sand);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--brand-inkSoft);
  line-height: 1.6;
}
.quote p { margin: 0; }

/* Code block styling */
pre {
  background-color: #1e1e1e;
  color: #d4d4d4;
  padding: 1.25rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}
pre code {
  background: none;
  padding: 0;
  color: inherit;
}
/* A sablonok prose-wrapperén lévő prose-code:* utility (sage-tint háttér + zöld szöveg)
   a <pre>-n belüli code-ra is rászivárog. Itt felülírjuk: a kódblokkban a code legyen
   átlátszó hátterű + világos (a pre öröklött színe). Az inline-kód pillek érintetlenek. */
.prose pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
}

/* Inline code */
code {
  background-color: var(--brand-sageTint);
  color: var(--brand-deep);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
}

/* Highlighted text (mark) */
mark {
  background-color: #fef08a;
  color: #000;
  padding: 0.1rem 0.2rem;
  border-radius: 2px;
}

/* Strikethrough */
del {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Imported WordPress captions carry an inline width (e.g. style="width: 615px");
   on a narrow screen that pushed the page wider than the viewport. */
.wp-caption {
  width: auto !important; /* beats the inline width, so the image can fill the column */
  max-width: 100%;
}

/* Markdown table styling — the same look as the comparison component on the tincture page
   (white card, light border, sand header row, thin row rules), card d605705a.
   display:block keeps the horizontal scroll on narrow screens; width:fit-content +
   auto margins center a table that is narrower than the column. */
.md-table,
.prose .md-table {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 1.75rem auto;
  overflow-x: auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  background-color: var(--brand-surface);
  font-size: 0.9rem;
  line-height: 1.5;
}
.md-table thead,
.prose .md-table thead {
  background-color: var(--brand-sand) !important;
  color: var(--brand-muted) !important;
}
.md-table th,
.prose .md-table th {
  padding: 0.6rem 1rem;
  text-align: left;
  vertical-align: bottom;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-muted) !important;
  border: 0;
  border-bottom: 1px solid var(--brand-line);
}
.md-table td,
.prose .md-table td {
  padding: 0.75rem 1rem;
  vertical-align: top;
  color: var(--brand-inkSoft);
  border: 0;
  border-top: 1px solid var(--brand-line);
}
.md-table tbody tr:first-child td {
  border-top: 0;
}
.md-table tbody tr:hover {
  background-color: var(--brand-paper);
}

/* The blockquote is the "in short" highlight box of the articles: no typographic quote
   marks around it, the text starts right away (card d605705a). */
.prose blockquote p:first-of-type::before,
.prose blockquote p:last-of-type::after {
  content: none;
}

/* Imported raw HTML tables (not .md-table): never wider than the column, scroll inside. */
.prose table:not(.md-table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* List styling with visible bullets */
ul {
  list-style-type: disc !important;
  padding-left: 2rem !important;
  margin: 1rem 0 !important;
}
ul li {
  display: list-item !important;
  margin: 0.5rem 0 !important;
  line-height: 1.6 !important;
}

/* Ordered list styling */
ol {
  list-style-type: decimal !important;
  padding-left: 2rem !important;
  margin: 1rem 0 !important;
}
ol li {
  display: list-item !important;
  margin: 0.5rem 0 !important;
  line-height: 1.6 !important;
}

/* Learning-path component renders its own number badges and uses a flex/grid
   layout — opt it out of the global markdown list styling above (decimal
   markers, indent, list-item display) which would otherwise duplicate the
   numbering and break the badge-beside-text layout. */
.learning-path ol,
.learning-path ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.learning-path li {
  display: flex !important;
  margin: 0 !important;
}

/* Plain list opt-out: hardcoded theme lists (pl. nyitóoldali hírek-ticker), amelyek
   ki akarnak lépni a fenti globális markdown ul/li stílus (disc marker, behúzás,
   li-margó, list-item display) alól. A saját Tailwind-osztályaikkal formázódnak. */
ul.list-plain {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
ul.list-plain li {
  display: block !important;
  margin: 0 !important;
  line-height: normal !important;
}

/* Image figure with caption */
.img-figure {
  margin: 1.5rem 0;
  text-align: center;
}
.img-figure img {
  display: block;
  width: 100%;          /* fill the article column, like the inline SVG figures */
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.img-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #6b7280;
  font-style: italic;
}

/* Global anchor offset so fixed nav won't cover targets */
:target {
  scroll-margin-top: 96px;
}

/* Content links styling - for internal auto-linked and regular links */
.prose a,
.prose-lg a,
.prose-slate a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-decoration-color: var(--brand-sageBorder);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all 0.2s ease;
  background-color: var(--brand-sageTint);
  padding: 0 2px;
  border-radius: 2px;
}

.prose a:hover,
.prose-lg a:hover,
.prose-slate a:hover {
  background-color: var(--brand-sageBorder);
  text-decoration-color: var(--brand-sage);
  text-decoration-thickness: 2px;
}
/* Callout styling (Obsidian-style) */
.callout {
  border-left: 4px solid;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  background-color: #f8fafc;
}

.callout-title {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.callout-icon {
  font-size: 1.2rem;
}

.callout-content {
  margin-top: 0.75rem;
}

.callout-content p:first-child {
  margin-top: 0;
}

.callout-content p:last-child {
  margin-bottom: 0;
}

/* Callout type specific colors */
.callout-note {
  border-left-color: #3b82f6;
  background-color: #eff6ff;
}

.callout-tip {
  border-left-color: #10b981;
  background-color: #f0fdf4;
}

.callout-info {
  border-left-color: #06b6d4;
  background-color: #ecfeff;
}

.callout-todo {
  border-left-color: #8b5cf6;
  background-color: #f5f3ff;
}

.callout-success {
  border-left-color: #22c55e;
  background-color: #f0fdf4;
}

.callout-question {
  border-left-color: #f59e0b;
  background-color: #fffbeb;
}

.callout-warning {
  border-left-color: #f59e0b;
  background-color: #fffbeb;
}

.callout-failure {
  border-left-color: #ef4444;
  background-color: #fef2f2;
}

.callout-danger {
  border-left-color: #dc2626;
  background-color: #fef2f2;
}

.callout-bug {
  border-left-color: #ec4899;
  background-color: #fdf2f8;
}

.callout-example {
  border-left-color: #6366f1;
  background-color: #eef2ff;
}

.callout-quote {
  border-left-color: #64748b;
  background-color: #f8fafc;
  font-style: italic;
}

/* Task list styling */
.task-list-item {
  list-style: none;
  position: relative;
  padding-left: 0;
}

.task-list-item input[type="checkbox"] {
  margin-right: 0.5rem;
  cursor: default;
  width: 1rem;
  height: 1rem;
  accent-color: #22c55e;
}

/* ── CTA — [cta url="..." label="..." style="button|box" text="..."] shortcode ──
   A gomb színét/hátterét a Tailwind bg-brand-terracotta / text-white osztályok adják
   (tailwind.css utoljára tölt → nyer). Itt csak a prose-aláhúzást ütjük ki és a
   layout/box-panel stílust adjuk meg saját osztályokkal (nem purge-öl a Tailwind). */
.hcms-cta {
  margin: 2rem 0;
  text-align: center;
}
/* Kétosztályos szelektor (0,2,0) — felülírja a .prose a sárga highlighter szabályt (0,1,1),
   így a CTA gomb a márka-terracotta lesz (mint a Hírlevél gomb), a site link-kiemelő érintetlen. */
.hcms-cta .hcms-cta__btn {
  display: inline-block;
  background-color: var(--brand-terracotta); /* brand terracotta */
  color: #ffffff;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.85rem 1.75rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(31, 29, 26, 0.08);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.hcms-cta .hcms-cta__btn:hover {
  background-color: #8F4128; /* brand terracottaDark */
  color: #ffffff;
  transform: translateY(-1px);
}
.hcms-cta .hcms-cta__btn:focus-visible {
  outline: 2px solid var(--brand-terracotta);
  outline-offset: 2px;
}
/* Box variáns — keretezett panel rövid szöveggel + gombbal */
.hcms-cta--box {
  background-color: var(--brand-sand); /* brand sand */
  border: 1px solid var(--brand-line); /* brand line */
  border-radius: 12px;
  padding: 1.75rem;
}
.hcms-cta__text {
  margin: 0 0 1.1rem;
  color: var(--brand-inkSoft); /* brand inkSoft */
  font-size: 1.05rem;
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce){ .reveal{ transition:none; opacity:1; transform:none; } }
/* Partnerlink CTA gomb (propolisz, 0c008228). A fenti .prose a szabály (sárgás
   kiemelés, aláhúzás) a leszármazott-szelektor miatt a not-prose bekezdésben is hatna,
   ezért a gomb itt, erősebb szelektorral kapja a saját színeit. */
.prose .affiliate-cta a.affiliate-cta-btn,
.affiliate-cta a.affiliate-cta-btn {
  background-color: var(--brand-terracotta);
  color: #ffffff;
  text-decoration: none;
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
}
.prose .affiliate-cta a.affiliate-cta-btn:hover,
.affiliate-cta a.affiliate-cta-btn:hover {
  background-color: var(--brand-terracottaDark);
  color: #ffffff;
}