/**
 * @file components.css
 * A tartalmi szekciók („komponensek”) stílusai. Minden blokk a demó
 * megfelelő szekciójához tartozik; a kommentek jelzik a párját.
 */

/* ============================================================= HERO */
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--mahogany);
  padding: 0;
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(30, 22, 16, .15) 0%, rgba(30, 22, 16, .75) 100%);
  z-index: 1;
}
.hero-img { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
.hero-arch {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 350px;
  border: 1.5px solid rgba(184, 145, 58, .2);
  border-bottom: none;
  border-radius: 350px 350px 0 0;
  z-index: 2; pointer-events: none;
}
.hero-arch2 {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 460px; height: 230px;
  border: 1px solid rgba(184, 145, 58, .12);
  border-bottom: none;
  border-radius: 230px 230px 0 0;
  z-index: 2; pointer-events: none;
}
.hero-content {
  position: relative; z-index: 3;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 2rem 8rem;
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 400; color: var(--gold-lt); margin-bottom: 1.5rem;
}
.hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold-lt); }
.hero-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.2rem, 7.5vw, 6.5rem);
  font-weight: 300; line-height: .95;
  color: var(--white); margin-bottom: .75rem; letter-spacing: -.01em;
}
.hero-content h1 em { font-style: italic; color: var(--gold-lt); }
.hero-content .hero-sub {
  font-size: 14px; font-weight: 300;
  color: rgba(255, 255, 255, .65);
  letter-spacing: .12em; margin-bottom: 2.5rem; text-transform: uppercase;
}
.hero-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 2rem; right: 2rem; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: rgba(255, 255, 255, .4);
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
}
.hero-scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .4), transparent);
  animation: scrollpulse 2s ease-in-out infinite;
}
@keyframes scrollpulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* ============================================================= MAI MISÉK SÁV */
.today-bar { background: var(--white); border-bottom: 3px solid var(--gold); padding: 1rem 2rem; }
.today-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.today-label { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); font-weight: 400; }
.today-mises { display: flex; gap: 2rem; flex-wrap: wrap; }
.today-mise { display: flex; align-items: baseline; gap: .5rem; }
.today-mise .day { font-size: 12px; color: var(--muted); }
.today-mise .time { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--mahogany); }
.today-iroda { font-size: 13px; color: var(--muted); }
.today-iroda strong { color: var(--mahogany); }

/* ============================================================= IDÉZET SÁV */
.quote-band { background: var(--gold); padding: 4rem 2rem; text-align: center; }
.quote-band blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 300; font-style: italic;
  color: var(--mahogany); max-width: 820px; margin: 0 auto; line-height: 1.45;
}
.quote-band cite {
  display: block; margin-top: .75rem;
  font-family: 'Jost', sans-serif; font-size: 11px; font-style: normal;
  letter-spacing: .18em; text-transform: uppercase; color: var(--walnut);
}

/* ============================================================= MISEREND */
.miserend { background: var(--white); }
.miserend-wrap {
  display: grid; grid-template-columns: 1fr 60px 1fr;
  margin-top: 2.5rem; border: 1px solid var(--parchment);
}
.ms-col { padding: 2.5rem; }
.ms-col:first-child { border-right: 1px solid var(--parchment); }
.ms-div { display: flex; align-items: center; justify-content: center; }
.ms-div-line { width: 1px; height: 80%; background: var(--parchment); }
.ms-head { margin-bottom: 1.5rem; }
.ms-title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; color: var(--mahogany); margin-bottom: .25rem; }
.ms-period { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ms-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--parchment); }
.ms-row:last-child { border-bottom: none; }
.ms-day { font-size: 14px; color: var(--muted); }
.ms-time { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: var(--mahogany); }
.ms-note { margin-top: 1.5rem; background: var(--parchment); padding: 1rem 1.25rem; font-size: 13px; color: var(--walnut); border-left: 2px solid var(--gold); }

/* ============================================================= HÍREK */
.hirek { background: var(--cream); }
.hirek-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--stone);
  border: 1px solid var(--stone); margin-top: 2.5rem;
}
.hir-card { background: var(--white); display: flex; flex-direction: column; transition: background .2s; text-decoration: none; color: inherit; }
.hir-card:hover { background: var(--parchment); }
.hir-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--parchment); }
.hir-img--placeholder { display: flex; align-items: center; justify-content: center; }
.hir-body { padding: 1.75rem 2rem; flex: 1; display: flex; flex-direction: column; }
.hir-date { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .75rem; }
.hir-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--mahogany); margin-bottom: .5rem; line-height: 1.25; }
.hir-card p { font-size: 13.5px; color: var(--muted); line-height: 1.7; flex: 1; }
.hir-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 1rem; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 400; }
.hir-feat { grid-column: 1 / 3; }
.hir-feat .hir-img { aspect-ratio: 16 / 7; }
.hir-feat h3 { font-size: 1.5rem; }

/* Üres rács-cellák elkerülése: az utolsó kártya töltse ki a sor maradékát,
   ha a kártyák száma nem „jön ki" 3-mal (a kiemelt kártya 2 cellát foglal,
   ezért a rács gyakran elcsúszik). Az :nth-child automatikusan újraszámol
   az AJAX-os bővítés/szűkítés után is. */
.hir-card:last-child:nth-child(3n)                    { grid-column: 1 / -1; } /* utolsó az 1. oszlopban → teljes sor */
.hir-card:last-child:nth-child(3n + 1):not(.hir-feat) { grid-column: 2 / -1; } /* utolsó a 2. oszlopban → a sor végéig */
.hir-feat:last-child                                  { grid-column: 1 / -1; } /* ha csak a kiemelt hír van */
/* A kitöltő széles kártya képe ne legyen aránytalanul magas. */
.hir-card:last-child:nth-child(3n) .hir-img,
.hir-card:last-child:nth-child(3n + 1):not(.hir-feat) .hir-img { aspect-ratio: auto; height: 210px; }

/* Görgetési margó: az AJAX-szal betöltött kártya a fix fejléc alá kerüljön. */
.hir-card { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* „Még több hír" / „Kevesebb hír" diszkrét linkek. */
.hirek-loadmore { margin-top: 2rem; display: flex; gap: 1.75rem; justify-content: center; }
.hirek-loadmore a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s;
}
.hirek-loadmore a:hover { color: var(--mahogany); }
.hirek-loadmore a[hidden] { display: none; }

/* ============================================================= SZENTSÉGEK */
.szents { background: var(--mahogany); }
.szents .section-label { color: var(--gold-lt); }
.szents .section-label::before { background: var(--gold-lt); }
.szents h2 { color: var(--white); }
.szents .lead { color: var(--stone); }
.szents-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(201, 187, 168, .15);
  border: 1px solid rgba(201, 187, 168, .15); margin-top: 2.5rem;
}
.sz-item { background: var(--mahogany); padding: 2.5rem 1.75rem; text-decoration: none; display: block; transition: background .2s; position: relative; overflow: hidden; }
.sz-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .3s; }
.sz-item:hover { background: rgba(74, 46, 26, .7); }
.sz-item:hover::before { transform: scaleX(1); }
.sz-icon { width: 52px; height: 52px; margin-bottom: 1.5rem; border: 1px solid rgba(184, 145, 58, .35); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sz-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-lt); stroke-width: 1.5; stroke-linecap: round; }
.sz-item h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--white); margin-bottom: .5rem; }
.sz-item p { font-size: 13px; color: var(--stone); line-height: 1.65; }
.sz-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 1rem; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-lt); }

/* ============================================================= KAPCSOLAT */
.kapcsolat { background: var(--parchment); }
.kapcsolat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 2.5rem; align-items: start; }
.k-block h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--mahogany); margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--stone); }
.k-row { display: flex; align-items: flex-start; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid rgba(201, 187, 168, .5); font-size: 14px; }
.k-row:last-child { border-bottom: none; }
.k-lbl { min-width: 110px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.k-val { color: var(--ink); min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.k-val a { color: var(--gold); text-decoration: none; }
.k-val a:hover { text-decoration: underline; }
.iroda-table { width: 100%; border-collapse: collapse; }
.iroda-table td { padding: 7px 0; font-size: 13.5px; vertical-align: top; }
.iroda-table td:first-child { color: var(--muted); width: 110px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; padding-top: 9px; }
/* A grid-oszlopok zsugorodhassanak (különben a beágyazott térkép kilóg mobilon). */
.kapcsolat-grid > div { min-width: 0; }
.map-box { margin-top: 3rem; border: 1px solid var(--stone); overflow: hidden; max-width: 100%; }
.map-box iframe { display: block; width: 100%; max-width: 100%; height: 300px; border: none; filter: grayscale(.3) sepia(.15); }

/* ============================================================= GALÉRIA TEASER (kezdőlap) */
.galeria { background: var(--white); }
.gal-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 260px 200px; gap: 4px; margin-top: 2.5rem; }
.gal-item { position: relative; overflow: hidden; background: var(--parchment); }
.gal-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gal-item:hover img { transform: scale(1.04); }
.gal-item:first-child { grid-row: 1 / 3; }
.gal-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: .75rem 1rem; background: linear-gradient(transparent, rgba(30, 22, 16, .65)); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.gal-more { margin-top: 2rem; text-align: center; }

/* ============================================================= GALÉRIA OLDAL */
.filter-bar { background: var(--white); border-bottom: 1px solid var(--parchment); position: sticky; top: var(--nav-h); z-index: 100; }
.filter-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 2rem; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.filter-inner::-webkit-scrollbar { display: none; }
.filter-inner button {
  display: block; padding: 1rem 1.5rem; border: none; background: none; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap;
}
.filter-inner button:hover { color: var(--mahogany); }
.filter-inner button.active { color: var(--gold); border-bottom-color: var(--gold); }
.gal-main { max-width: var(--maxw); margin: 0 auto; padding: 3rem 2rem 5rem; }
.album { margin-bottom: 4rem; }
.album-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--parchment); }
.album-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--mahogany); }
.album-date { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: .25rem; }
.album-desc { font-size: 14px; color: var(--muted); max-width: 600px; line-height: 1.7; margin-top: .5rem; }
.album-count { font-size: 12px; color: var(--stone); white-space: nowrap; }
.photo-grid { display: grid; gap: 6px; }
.pg-4 { grid-template-columns: repeat(4, 1fr); }
.pg-3 { grid-template-columns: repeat(3, 1fr); }
.pg-2 { grid-template-columns: 2fr 1fr; }
.ph { position: relative; overflow: hidden; background: var(--parchment); cursor: pointer; aspect-ratio: 4 / 3; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.ph:hover img { transform: scale(1.05); }
.ph-overlay { position: absolute; inset: 0; background: rgba(30, 22, 16, 0); transition: background .3s; display: flex; align-items: center; justify-content: center; }
.ph:hover .ph-overlay { background: rgba(30, 22, 16, .35); }
.ph-zoom { opacity: 0; transition: opacity .3s; color: var(--white); }
.ph:hover .ph-zoom { opacity: 1; }
.ph-zoom svg { width: 28px; height: 28px; }

/* Lightbox (nagyított kép). */
.szlp-lb { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(10, 6, 4, .94); align-items: center; justify-content: center; }
.szlp-lb.open { display: flex; }
.szlp-lb img { max-width: 90vw; max-height: 85vh; object-fit: contain; display: block; }
.lb-close { position: absolute; top: 1.5rem; right: 2rem; background: none; border: none; color: rgba(255, 255, 255, .6); cursor: pointer; font-size: 2rem; line-height: 1; transition: color .2s; }
.lb-close:hover { color: var(--white); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255, 255, 255, .5); cursor: pointer; font-size: 2.5rem; line-height: 1; padding: 1rem; transition: color .2s; }
.lb-prev:hover, .lb-next:hover { color: var(--white); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-caption { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .6); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-align: center; }

/* ============================================================= GYIK OLDAL */
.tab-nav { background: var(--white); border-bottom: 1px solid var(--parchment); position: sticky; top: var(--nav-h); z-index: 100; }
.tab-nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 2rem; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.tab-nav-inner::-webkit-scrollbar { display: none; }
.tab-nav a { display: block; padding: 1rem 1.5rem; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; }
.tab-nav a:hover { color: var(--mahogany); }
.tab-nav a.active { color: var(--gold); border-bottom-color: var(--gold); }
.gyik-page { max-width: var(--maxw); margin: 0 auto; padding: 4rem 2rem; }
.gyik-sec { margin-bottom: 5rem; scroll-margin-top: calc(var(--nav-h) + 56px); }
.gs-label { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 400; }
.gs-label::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); }
.gyik-sec h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.intro { font-size: 15px; color: var(--muted); max-width: 660px; margin-bottom: 2.5rem; line-height: 1.8; }
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
.info-card { background: var(--white); border: 1px solid var(--parchment); padding: 2rem; border-top: 3px solid var(--gold); }
.info-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--mahogany); margin-bottom: 1rem; }
.info-card ul { list-style: none; }
.info-card li { padding: 5px 0; font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; border-bottom: 1px solid var(--parchment); }
.info-card li:last-child { border-bottom: none; }
.info-card li::before { content: '\25B8'; color: var(--gold); font-size: 10px; margin-top: 6px; flex-shrink: 0; }
.faq-list { border-top: 1px solid var(--parchment); }
.faq-list details { border-bottom: 1px solid var(--parchment); }
.faq-list summary {
  padding: 1.25rem 0; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600;
  color: var(--mahogany); cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; list-style: none; user-select: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; font-family: 'Jost', sans-serif; font-weight: 300; font-size: 1.6rem; color: var(--gold); flex-shrink: 0; transition: transform .25s; line-height: 1; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-ans { padding: .25rem 0 1.5rem; font-size: 14.5px; color: var(--muted); max-width: 720px; line-height: 1.8; }
.faq-ans strong { color: var(--mahogany); font-weight: 500; }
.faq-ans a { color: var(--gold); text-decoration: none; }
.kereszt-cta {
  display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--mahogany);
  padding: 13px 26px; text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 2rem; transition: background .2s;
}
.kereszt-cta:hover { background: var(--gold-lt); }

/* ============================================================= WEBFORM (jelentkezési űrlapok) */
.webform-submission-form {
  max-width: 820px;
  margin: 0 auto;
  /* A fix fejléc alól induljon, és legyen levegős a lábléc felett. */
  padding: calc(var(--nav-h) + 3rem) 2rem 5rem;
}

/* Saját fejléc (webform_markup elem). */
.szlp-form-head { margin-bottom: 2.5rem; }
.szlp-form-head h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--mahogany);
  line-height: 1.1;
}
.szlp-form-head h1 em { font-style: italic; color: var(--gold); }
.szlp-form-head p { color: var(--muted); font-size: 14px; margin-top: .5rem; max-width: 560px; }

/* Szekciók (fieldset). */
.webform-submission-form fieldset {
  border: 1px solid var(--parchment);
  border-top: 3px solid var(--gold);
  background: var(--white);
  padding: 1.25rem 1.75rem 1.75rem;
  margin: 0 0 1.5rem;
}
/* Beágyazott szekció (pl. Első/Második tanú) világosabb. */
.webform-submission-form fieldset fieldset {
  border-top-width: 1px;
  background: var(--cream);
  margin-top: 1.25rem;
}
.webform-submission-form legend {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--mahogany);
  padding: 0;
  margin-bottom: .75rem;
  width: auto;
}
.webform-submission-form fieldset fieldset legend { font-size: 1.05rem; color: var(--walnut); }

/* Mezők. */
.webform-submission-form .form-item,
.webform-submission-form .js-form-item { margin: 0 0 1.1rem; }
.webform-submission-form label { display: block; font-size: 13px; color: var(--walnut); margin-bottom: .35rem; font-weight: 500; }
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="date"],
.webform-submission-form input[type="number"],
.webform-submission-form select,
.webform-submission-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--stone);
  background: var(--cream);
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: var(--ink);
  border-radius: 0;
  transition: border-color .2s, box-shadow .2s;
}
.webform-submission-form input:focus,
.webform-submission-form select:focus,
.webform-submission-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 145, 58, .15);
}
/* Kötelező mező csillaga. */
.webform-submission-form .form-required::after { color: var(--gold); }

/* Jelölőnégyzetek. */
.webform-submission-form input[type="checkbox"],
.webform-submission-form input[type="radio"] { width: auto; margin-right: .5rem; accent-color: var(--gold); }
.webform-submission-form .form-type-checkbox label,
.webform-submission-form .form-item--type-checkbox label,
.webform-submission-form .form-type-radio label { display: inline; font-weight: 400; color: var(--ink); }

/* Beküldés gomb – arculati gomb. */
.webform-submission-form .form-actions,
.webform-submission-form .webform-actions { margin-top: 1.75rem; }
.webform-submission-form .webform-button--submit,
.webform-submission-form input[type="submit"],
.webform-submission-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--gold);
  color: var(--mahogany);
  border: none;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .2s;
}
.webform-submission-form .webform-button--submit:hover,
.webform-submission-form input[type="submit"]:hover,
.webform-submission-form button[type="submit"]:hover { background: var(--gold-lt); }

/* Hibaüzenetek olvashatóbban. */
.webform-submission-form .form-item--error-message,
.webform-submission-form .error-message { color: #9a3412; font-size: 12px; margin-top: .25rem; }

@media (max-width: 600px) {
  .webform-submission-form { padding: calc(var(--nav-h) + 2rem) 1.25rem 3rem; }
  .webform-submission-form fieldset { padding: 1rem 1.25rem 1.25rem; }
}

/* ============================================================= HÍR / OLDAL RÉSZLET (node) */
.article-body { max-width: 760px; margin: 0 auto; padding: 3.5rem 2rem 5rem; }
.article-body p { margin-bottom: 1.25rem; color: var(--walnut); }
.article-body h2, .article-body h3 { margin: 2rem 0 1rem; }
.article-lead { font-size: 1.15rem; color: var(--mahogany); font-style: italic; margin-bottom: 2rem; line-height: 1.7; }
.article-hero-img { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.article-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 2.5rem; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.article-back:hover { color: var(--mahogany); }

/* ============================================================= RENDSZER UI: FÜLEK + ÜZENETEK
   Csak bejelentkezett szerkesztőknek látszanak (a highlighted régióban).
   A stable9 nyers markupját stílusozzuk az arculathoz. */

/* Helyi fülek (Megtekintés / Szerkesztés / Beküldések ...) – vízszintes fülsáv.
   Osztálynévtől FÜGGETLENÜL a highlighted régió listáit célozzuk (+ .tabs fallback),
   csak az üzenet-listát (.messages__list) hagyjuk ki. */
.szlp-highlighted nav { margin: 0 0 1rem; }
.szlp-highlighted ul:not(.messages__list):not(.contextual-links),
ul.tabs {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  border-bottom: 1px solid var(--stone);
}
.szlp-highlighted ul:not(.messages__list):not(.contextual-links) > li,
ul.tabs > li { margin: 0; list-style: none; }
.szlp-highlighted ul:not(.messages__list):not(.contextual-links) > li > a,
ul.tabs > li > a {
  display: block;
  padding: .5rem 1.1rem;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--parchment);
  border: 1px solid transparent;
  border-bottom: none;
  transition: background .2s, color .2s;
}
.szlp-highlighted ul:not(.messages__list):not(.contextual-links) > li > a:hover,
ul.tabs > li > a:hover { color: var(--mahogany); background: var(--stone); }
.szlp-highlighted ul:not(.messages__list):not(.contextual-links) > li > a.is-active,
.szlp-highlighted ul:not(.messages__list):not(.contextual-links) > li.is-active > a,
ul.tabs > li > a.is-active,
ul.tabs > li.is-active > a {
  color: var(--mahogany);
  background: var(--white);
  border-color: var(--stone);
}

/* Morzsamenü (Breadcrumbs) – a „1. Home" számozott lista helyett vízszintes sor. */
.szlp-highlighted ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .75rem;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
}
.szlp-highlighted ol > li { margin: 0; list-style: none; }
.szlp-highlighted ol > li > a { color: var(--gold); text-decoration: none; }
.szlp-highlighted ol > li > a:hover { color: var(--mahogany); text-decoration: underline; }
.szlp-highlighted ol > li + li::before { content: "›"; margin-right: .4rem; color: var(--stone); }

/* Státusz-/hiba-/figyelmeztető üzenetek.
   Robusztus: a Drupal `data-drupal-messages` burkolójának belső dobozát is
   célozzuk (osztálynévtől függetlenül), nem csak a `.messages` osztályt. */
[data-drupal-messages] { margin: 0 0 1rem; }
.messages,
[data-drupal-messages] > div {
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
  border-left: 4px solid var(--gold);
  background: var(--parchment);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.messages a,
[data-drupal-messages] a { color: inherit; text-decoration: underline; }
.messages__list { margin: 0; padding-left: 1.1rem; }
/* Típus szerinti színek (ha a típus-osztály jelen van). */
.messages--status,
[data-drupal-messages] .messages--status { background: #eef6ec; border-color: #3f7e3f; color: #244d24; }
.messages--warning,
[data-drupal-messages] .messages--warning { background: #fdf6e3; border-color: var(--gold); color: #6b4f1a; }
.messages--error,
[data-drupal-messages] .messages--error { background: #fbeaea; border-color: #b03030; color: #6b1f1f; }

/* ============================================================= FRONT-END DRUPAL ŰRLAPOK
   Bejelentkezés, jelszó-visszaállítás, regisztráció, fiók, keresés – a publikus
   (szlp) oldalakon. Az admin (Claro) űrlapokat nem érinti. A Webform saját,
   részletesebb stílusát ez nem írja felül (azonos megjelenés). */

/* Konténer: középre, levegősen. */
.szlp-main .user-login-form,
.szlp-main .user-pass,
.szlp-main .user-register-form,
.szlp-main .user-form,
.szlp-main .search-form {
  max-width: 460px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

/* Mezők. */
.szlp-main .form-item,
.szlp-main .js-form-item { margin: 0 0 1.1rem; }
.szlp-main form label {
  display: block;
  font-size: 13px;
  color: var(--walnut);
  margin-bottom: .35rem;
  font-weight: 500;
}
.szlp-main input[type="text"],
.szlp-main input[type="password"],
.szlp-main input[type="email"],
.szlp-main input[type="search"],
.szlp-main input[type="tel"],
.szlp-main input[type="number"],
.szlp-main input[type="date"],
.szlp-main select,
.szlp-main textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--stone);
  background: var(--cream);
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: var(--ink);
  border-radius: 0;
  transition: border-color .2s, box-shadow .2s;
}
.szlp-main input:focus,
.szlp-main select:focus,
.szlp-main textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 145, 58, .15);
}
.szlp-main .description,
.szlp-main .form-item__description { font-size: 12px; color: var(--muted); margin-top: .3rem; }

/* Gombok – arculati arany gomb. */
.szlp-main .form-actions { margin-top: 1.5rem; }
.szlp-main input[type="submit"],
.szlp-main button[type="submit"],
.szlp-main .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  background: var(--gold);
  color: var(--mahogany);
  border: none;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s;
}
.szlp-main input[type="submit"]:hover,
.szlp-main button[type="submit"]:hover,
.szlp-main .button:hover { background: var(--gold-lt); }

/* ============================================================= HIBAOLDALAK (403 / 404) */
.szlp-error-body {
  max-width: 640px;
  margin: 0 auto;
  padding: 3.5rem 2rem 5rem;
  text-align: center;
  font-size: 16px;
  color: var(--walnut);
  line-height: 1.7;
}
.szlp-error-body .btn-gold { margin-top: 1.75rem; }