/* VILÁGNAPI TUDÓSÍTÓ – AZ ÖT ÁLLANDÓ ROVAT KÖZÖS STÍLUSA
   A bővítmény automatikusan betölti a rovatmintákhoz.
   A szabályok csak a .vtn-article elemen belül hatnak.
   Az Open Sans és a Berkshire Swash a honlap meglévő betűbeállításait használja.
*/

.vtn-article {
  --vtn-blue: #0F2F76;
  --vtn-coral: #FF6F61;
  --vtn-pale: #EEF3FA;
  --vtn-white: #FFFFFF;
  --vtn-text: #26334B;
  --vtn-muted: #53627B;
  --vtn-border: #D9E2EF;
  --vtn-radius: 16px;
  --vtn-anchor-offset: 110px;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  color: var(--vtn-text);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.75;
  text-align: left;
  overflow-wrap: break-word;
}

.vtn-article *,
.vtn-article *::before,
.vtn-article *::after { box-sizing: border-box; }

.vtn-article p { margin: 0 0 1.1em; }
.vtn-article h3 {
  margin: 0 0 16px;
  color: var(--vtn-blue);
  font-family: "Berkshire Swash", Georgia, serif;
  font-size: clamp(25px, 3.4vw, 32px);
  font-weight: 400;
  line-height: 1.3;
}
.vtn-article h4 {
  margin: 0 0 10px;
  color: var(--vtn-blue);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.vtn-article a { color: var(--vtn-blue); text-decoration: underline; text-underline-offset: 3px; }
.vtn-article a:hover { text-decoration-thickness: 2px; }
.vtn-article a:focus-visible { outline: 3px solid var(--vtn-blue); outline-offset: 4px; }
.vtn-article figure { margin: 0; }
.vtn-article img { display: block; max-width: 100%; height: auto; }

/* A cikk elején lévő ugrómenü. Minden rovat végig látható marad. */
.vtn-article .vtn-toc { margin: 0 0 42px; }
.vtn-article .vtn-toc-title {
  margin: 0 0 12px;
  color: var(--vtn-blue);
  font-size: 14px;
  font-weight: 700;
}
.vtn-article .vtn-toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vtn-article .vtn-toc-list li { margin: 0; padding: 0; max-width: 100%; }
.vtn-article .vtn-toc-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 17px;
  border: 1px solid var(--vtn-border);
  border-radius: 999px;
  background: var(--vtn-pale);
  color: var(--vtn-blue);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}
.vtn-article .vtn-toc-list a:hover { border-color: var(--vtn-coral); background: var(--vtn-coral); }

/* Közös rovatfejléc: ikon, felirat, rövid korall vonal. */
.vtn-article .vtn-section { margin: 0 0 52px; scroll-margin-top: var(--vtn-anchor-offset); }
.vtn-article .vtn-section-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 26px;
  padding: 0 0 15px;
}
.vtn-article .vtn-section-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: var(--vtn-coral);
}
.vtn-article .vtn-section-heading h2 {
  margin: 0;
  padding: 0;
  color: var(--vtn-blue);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* CSS-ből rajzolt díszítő ikonok: külső ikoncsomag és JavaScript nélkül. */
.vtn-article .vtn-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--vtn-pale);
  color: var(--vtn-blue);
  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 42px;
  text-align: center;
}
.vtn-article .vtn-icon-calendar::before {
  content: "";
  position: absolute;
  inset: 11px 10px 9px;
  border: 2px solid var(--vtn-blue);
  border-radius: 4px;
  background: linear-gradient(var(--vtn-blue), var(--vtn-blue)) 0 6px / 100% 2px no-repeat;
}
.vtn-article .vtn-icon-calendar::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 15px;
  width: 3px;
  height: 8px;
  border-radius: 3px;
  background: var(--vtn-blue);
  box-shadow: 9px 0 0 var(--vtn-blue);
}
.vtn-article .vtn-icon-calendar span { position: absolute; top: 24px; left: 16px; width: 9px; height: 3px; border-radius: 2px; background: var(--vtn-coral); }
.vtn-article .vtn-icon-search::before { content: ""; position: absolute; top: 9px; left: 9px; width: 19px; height: 19px; border: 2px solid var(--vtn-blue); border-radius: 50%; }
.vtn-article .vtn-icon-search::after { content: ""; position: absolute; top: 25px; left: 26px; width: 12px; height: 4px; border-radius: 3px; background: var(--vtn-coral); transform: rotate(45deg); }
.vtn-article .vtn-icon-try::before { content: ""; position: absolute; top: 8px; left: 11px; width: 10px; height: 14px; border: 2px solid var(--vtn-blue); border-radius: 50%; }
.vtn-article .vtn-icon-try::after { content: ""; position: absolute; top: 20px; left: 14px; width: 4px; height: 15px; border-radius: 3px; background: var(--vtn-coral); }
.vtn-article .vtn-icon-try span::before { content: ""; position: absolute; top: 9px; left: 27px; width: 3px; height: 26px; border-radius: 2px; background: var(--vtn-blue); }
.vtn-article .vtn-icon-try span::after { content: ""; position: absolute; top: 9px; left: 24px; width: 9px; height: 11px; border: 2px solid var(--vtn-blue); border-top: 0; border-radius: 0 0 4px 4px; }
.vtn-article .vtn-icon-help::before { content: ""; position: absolute; inset: 7px; border: 2px solid var(--vtn-blue); border-radius: 50%; }
.vtn-article .vtn-icon-help { color: var(--vtn-blue); font-size: 23px; }
.vtn-article .vtn-icon-bookmark::before { content: ""; position: absolute; inset: 8px 12px 7px; background: var(--vtn-blue); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
.vtn-article .vtn-icon-bookmark::after { content: ""; position: absolute; top: 14px; left: 18px; width: 7px; height: 10px; border: solid var(--vtn-coral); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* A nap névjegye. */
.vtn-article .vtn-profile {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px;
  padding: 28px;
  border-radius: var(--vtn-radius);
  background: var(--vtn-pale);
}
.vtn-article .vtn-date { margin: 0 0 10px; color: var(--vtn-blue); font-size: 16px; font-weight: 800; }
.vtn-article .vtn-facts { display: grid; gap: 17px; margin: 22px 0 0; }
.vtn-article .vtn-facts dt { margin: 0 0 3px; color: var(--vtn-muted); font-size: 12px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.vtn-article .vtn-facts dd { margin: 0; color: var(--vtn-blue); font-size: 16px; line-height: 1.6; }
.vtn-article .vtn-photo { min-width: 0; align-self: center; }
.vtn-article .vtn-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
.vtn-article figcaption { margin-top: 10px; color: var(--vtn-muted); font-size: 12px; line-height: 1.6; }
.vtn-article .vtn-image-placeholder { display: grid; place-content: center; gap: 6px; width: 100%; aspect-ratio: 1 / 1; padding: 22px; border: 1px dashed #9BAAC1; border-radius: 12px; background: var(--vtn-white); color: var(--vtn-muted); font-size: 14px; line-height: 1.6; text-align: center; }
.vtn-article .vtn-source { margin: 13px 0 25px; color: var(--vtn-muted); font-size: 12px; line-height: 1.7; }
.vtn-article .vtn-origin { margin-top: 26px; }

/* Érdekességek: a hosszabb szöveg fehér alapon marad. */
.vtn-article .vtn-story + .vtn-story { margin-top: 27px; padding-top: 27px; border-top: 1px solid var(--vtn-border); }
.vtn-article .vtn-story p:last-child { margin-bottom: 0; }

/* Recept vagy kísérlet. */
.vtn-article .vtn-recipe { padding: 28px; border-radius: var(--vtn-radius); background: var(--vtn-pale); }
.vtn-article .vtn-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 24px; color: var(--vtn-blue); font-size: 14px; }
.vtn-article .vtn-recipe-columns { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: 30px; }
.vtn-article .vtn-ingredients { margin: 0; padding-left: 22px; font-size: 16px; }
.vtn-article .vtn-ingredients li { margin: 0 0 7px; padding: 0; }
.vtn-article .vtn-steps { counter-reset: vtn-step; margin: 0; padding: 0; list-style: none; font-size: 16px; }
.vtn-article .vtn-steps li { position: relative; counter-increment: vtn-step; margin: 0 0 20px; padding-left: 38px; }
.vtn-article .vtn-steps li::before { content: counter(vtn-step); position: absolute; top: 2px; left: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vtn-coral); color: var(--vtn-blue); font-size: 13px; font-weight: 800; line-height: 1; }
.vtn-article .vtn-tip { margin: 22px 0 0; color: var(--vtn-blue); font-size: 15px; }

/* Egyetlen kiemelt érdekesség. */
.vtn-article .vtn-did-you-know { padding: 27px 30px; border-left: 4px solid var(--vtn-coral); border-radius: 0 var(--vtn-radius) var(--vtn-radius) 0; background: var(--vtn-pale); }
.vtn-article .vtn-did-you-know p:last-child { margin-bottom: 0; }

/* A Vidd magaddal! képe kitölti a rovatot, az eredeti képarányával. */
.vtn-article .vtn-pin { width: 100%; max-width: none; margin: 0 auto; }
.vtn-article .vtn-pin img { width: 100%; height: auto; border-radius: var(--vtn-radius); }
.vtn-article .vtn-pin .vtn-image-placeholder { aspect-ratio: 2 / 3; padding: 30px; border: 0; border-radius: var(--vtn-radius); background: var(--vtn-pale); }
.vtn-article .vtn-placeholder-title { color: var(--vtn-blue); font-family: "Berkshire Swash", Georgia, serif; font-size: 31px; line-height: 1.3; }
.vtn-article .vtn-placeholder-label { color: var(--vtn-muted); font-size: 13px; }
.vtn-article .vtn-placeholder-domain { justify-self: center; margin-top: 20px; padding-top: 12px; border-top: 3px solid var(--vtn-coral); color: var(--vtn-blue); font-size: 14px; font-weight: 700; }
.vtn-article .vtn-back { margin: 25px 0 0; font-size: 13px; }

/* Mobil: az adatlap, a kép és a recept oszlopai egymás alá kerülnek. */
@media (max-width: 640px) {
  .vtn-article { font-size: 17px; line-height: 1.75; }
  .vtn-article .vtn-profile,
  .vtn-article .vtn-recipe-columns { grid-template-columns: minmax(0, 1fr); }
  .vtn-article .vtn-profile,
  .vtn-article .vtn-recipe { padding: 22px; gap: 24px; }
  .vtn-article .vtn-did-you-know { padding: 22px; }
  .vtn-article .vtn-section { margin-bottom: 42px; }
  .vtn-article .vtn-toc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vtn-article .vtn-toc-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .vtn-article .vtn-toc-list a { height: 100%; padding: 10px 12px; border-radius: 15px; }
}
@media (max-width: 380px) {
  .vtn-article .vtn-toc-list { grid-template-columns: minmax(0, 1fr); }
  .vtn-article .vtn-section-heading { gap: 10px; }
  .vtn-article .vtn-section-heading h2 { font-size: 13px; letter-spacing: .035em; }
  .vtn-article .vtn-profile,
  .vtn-article .vtn-recipe,
  .vtn-article .vtn-did-you-know { padding: 18px; }
}
@media print {
  .vtn-article { max-width: none; font-size: 11pt; }
  .vtn-article .vtn-toc,
  .vtn-article .vtn-back { display: none; }
  .vtn-article .vtn-section-heading { break-after: avoid; }
  .vtn-article .vtn-profile,
  .vtn-article .vtn-did-you-know,
  .vtn-article .vtn-pin { break-inside: avoid; }
}

/* Native WordPress blocks keep article text, lists and images editable. */
.vtn-article > .vtn-section { margin-top: 0; }
.vtn-article .wp-block-group { min-width: 0; }
.vtn-article h2.vtn-section-heading {
  display:flex; align-items:center; gap:13px; position:relative;
  margin:0 0 26px; padding:0 0 15px;
  color:var(--vtn-blue); font-family:"Open Sans",Arial,sans-serif;
  font-size:15px; font-weight:800; line-height:1.5;
  letter-spacing:.06em; text-transform:uppercase;
}
.vtn-article h2.vtn-section-heading::before {
  content:""; display:block; flex:0 0 42px; width:42px; height:42px;
  border-radius:12px; background-color:var(--vtn-pale);
  background-repeat:no-repeat; background-position:center; background-size:23px 23px;
}
.vtn-article .vtn-facts .vtn-fact { margin:0; }
.vtn-article .vtn-fact-label {
  margin:0 0 3px; color:var(--vtn-muted); font-size:12px;
  font-weight:700; letter-spacing:.035em; text-transform:uppercase;
}
.vtn-article .vtn-fact-value { margin:0; color:var(--vtn-blue); font-size:16px; line-height:1.6; }
.vtn-article .vtn-photo { width:100%; }
.vtn-article .vtn-photo img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.vtn-article .vtn-recipe .vtn-meta p { margin:0; }
.vtn-article .vtn-pin img { aspect-ratio:auto; }
.vtn-article .vtn-section h4 { font-weight:700; }
.vtn-article .vtn-menu-empty { font-size:14px; color:var(--vtn-muted); }
.vtn-article .vtn-closing { margin-top:32px; }
.vtn-article .vtn-placeholder-figure {
  display:grid; place-content:center; aspect-ratio:1/1; padding:24px;
  border:1px dashed #9BAAC1; border-radius:12px; background:#fff;
  font-size:15px; color:var(--vtn-muted); text-align:center;
}
.vtn-article .vtn-pin .vtn-placeholder-figure { aspect-ratio:2/3; background:var(--vtn-pale); }
@media(max-width:640px){
 .vtn-article h2.vtn-section-heading { font-size:14px; }
 .vtn-article .vtn-recipe-columns > .wp-block-group { margin-top:0; }
}
@media(max-width:380px){.vtn-article h2.vtn-section-heading{font-size:13px;letter-spacing:.035em;}}

.vtn-article .vtn-section-heading--profile::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230F2F76%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%2216%22%20height%3D%2215%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203v6m8-6v6M4%2011h16m-12%204h2m4%200h2m-8%203h2m4%200h2%22%2F%3E%3C%2Fsvg%3E"); }

.vtn-article .vtn-section-heading--stories::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230F2F76%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22m16%2016%205%205%22%2F%3E%3C%2Fsvg%3E"); }

.vtn-article .vtn-section-heading--try::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230F2F76%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203v6m3-6v6m-6-6v6c0%203%206%203%206%200m-3%203v9m12%200V3c-4%202-4%208%200%2010%22%2F%3E%3C%2Fsvg%3E"); }

.vtn-article .vtn-section-heading--fact::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230F2F76%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M9.5%209a2.5%202.5%200%200%201%205%200c0%202-2.5%202-2.5%204m0%204h.01%22%2F%3E%3C%2Fsvg%3E"); }

.vtn-article .vtn-section-heading--takeaway::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230F2F76%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12a1%201%200%200%201%201%201v17l-7-5-7%205V4a1%201%200%200%201%201-1Z%22%2F%3E%3Cpath%20d%3D%22m9%209%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }

.vtn-section.vtn-article { margin-top:0; margin-bottom:52px; scroll-margin-top:var(--vtn-anchor-offset); }

@media(max-width:640px){.vtn-section.vtn-article{margin-bottom:42px;}}

.vtn-toc.vtn-article { margin:0 auto 42px; }

.vtn-article .vtn-profile > *, .vtn-article .vtn-recipe-columns > * { margin-top:0; margin-bottom:0; }

/* Classic themes may keep an extra Group inner wrapper. Flatten its box so
   the native editable children still form the intended grid/flex columns. */
.vtn-article .wp-block-group__inner-container { display:contents; }
.vtn-article .vtn-profile > .wp-block-group__inner-container > *,
.vtn-article .vtn-recipe-columns > .wp-block-group__inner-container > * { margin-top:0; margin-bottom:0; }