/*
 * Forex Medical — publikus SSR-arculat (ssr.styleFile).
 *
 * A forexmedical.hu (Enfold-téma) MÉRT értékei, 2026-10-07:
 *   betű: Montserrat (saját tárhelyről, l. tools/download/fetch-public-fonts.mjs);
 *   fő szín: #12274c (sötétkék), másodlagos: #23385d;
 *   kártya: 30px sarok, 0 0 40px rgba(0,0,0,.4)-ből enyhítve, fehér;
 *   lábléc-sáv: sötétkék → világoskék átmenet.
 * A keret --ssr-* tokenjei adják az alapot; osztályra csak MEGJELENÉS kerül.
 */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/public/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/public/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fm-navy: #12274c;
  --fm-navy-2: #23385d;
  --fm-sky: #5bb8e0;
  --fm-text: #4e4e4e;
  --fm-radius: 30px;
  --fm-shadow: 0 0 30px rgba(18, 39, 76, 0.18);

  --ssr-bg: #ffffff;
  --ssr-surface: #ffffff;
  --ssr-fg: var(--fm-text);
  --ssr-fg-secondary: var(--fm-navy);
  --ssr-fg-muted: #6b7486;
  --ssr-fg-faint: #969696;
  --ssr-border: #ebebeb;
  --ssr-border-light: #f5f5f5;
  --fm-tab-border: #e1e1e1;
  --fm-tab-panel-bg: #f8f8f8;
  --ssr-accent: var(--fm-navy);
  --ssr-accent-hover: var(--fm-navy-2);
  --ssr-accent-contrast: #ffffff;
  --ssr-accent-soft: #e8eef8;
  /* A keret alap-váza (`ssr-base.css`) ezekre a tokenekre is épít; hiányukban
     a teljes deklaráció érvénytelen (pl. a beviteli mezőknek nem lett kerete). */
  --ssr-border-input: #c9d1d6;
  --ssr-danger: #b42318;
  --ssr-danger-bg: #fef3f2;
  --ssr-danger-border: #fecdca;
  --ssr-disabled-bg: #f5f7fa;
  --ssr-disabled-border: #dde3e6;
  --ssr-disabled-fg: #626b7c;
  --ssr-row-alt-bg: transparent;
  --ssr-row-hover: #f2f5fa;
  --ssr-row-selected: var(--ssr-accent-soft);
  --ssr-th-bg: #f5f7fa;
  --ssr-th-fg: #626b7c;
  --ssr-progress-track: #dbe4f0;
  --ssr-progress-value: var(--fm-navy);
  --ssr-banner-bg: var(--fm-navy);
  --ssr-banner-fg: #ffffff;
  --ssr-banner-link-fg: var(--fm-sky);
  --ssr-map-bg: var(--ssr-accent-soft);
  --ssr-nav-bg: #ffffff;
  --ssr-nav-fg: var(--fm-navy);
  --ssr-nav-item-fg: var(--fm-navy);
  --ssr-nav-item-hover-bg: #f2f5fa;
  --ssr-title-size: 2rem;
  --ssr-title-weight: 700;
  --ssr-container-width: 1100px;
  --ssr-container-gutter: 1.25rem;
  --ssr-layout-main-padding: 2rem 0 4rem;
}

body {
  font-family: "Montserrat", Arial, sans-serif;
  color: var(--fm-text);
}

/* A teljes szélességű szekciók (`fm-section--*`) a 100vw-ben a görgetősávot is
   számolják — a túllógó pár pixel ne adjon vízszintes görgetést. */
html {
  overflow-x: hidden;
}

h1, h2, h3, .ssr-record-title, .ssr-cards-title {
  color: var(--fm-navy);
  font-weight: 700;
  /* Keskeny kijelzőn a hosszú összetett szó („Röntgenberendezések") is törjön,
     ne tolja szét az oldalt; a `hyphens` a <html lang="hu">-ból tud elválasztani. */
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Fejléc: fehér sáv, logó balra, menü jobbra — mint a mostani oldalon. */
.ssr-nav-brand .ssr-image {
  height: 84px;
  width: auto;
}

.ssr-nav-item {
  font-weight: 500;
  font-size: 1.05rem;
}

/* Mobil menü (a fejléc `mobileBreakpoint: 768` alatt): a hamburger a LOGÓ
   magasságában marad — a keret a sáv közepére igazítja, ami nyitáskor a lista
   közepére csúszna —, a nyitott menü pedig teljes szélességű, függőleges lista
   a logó alatt, kényelmes koppintási felülettel. A koppinthatóságot (a lista a
   mellé-koppintást elkapó backdrop fölött) a keret adja. */
@media (max-width: 768px) {
  .ssr-nav-burger {
    /* a sáv felső paddingja (0.5rem) + a 84px-es logó fele */
    top: calc(0.5rem + 42px);
  }

  .ssr-nav-items {
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0.75rem;
    padding: 0.5rem 0 0.75rem;
    border-top: 1px solid var(--ssr-border);
  }

  .ssr-nav-items > li {
    width: 100%;
  }

  .ssr-nav-item {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0.8rem 0.75rem;
    border-radius: 10px;
    font-size: 1.1rem;
  }
}

/* A menü vonalas ikonjai sötétkékek (a fehér sávra); a kijelölt — sötétkék
   hátterű — menüponton fehérre fordulnak, a felirattal együtt. A keret a
   festést szándékosan a designra hagyja (`vanilla-menu.ssr.css`). */
.ssr-nav-item-active .ssr-nav-item-icon img {
  filter: brightness(0) invert(1);
}

/* Hős-sáv a főoldalon: a WP-főoldal szakaszképe (röntgenfelvétel balra,
   színátmenet jobbra; uploads/2021/06/2021-06-11-1.png), a cím a jobb 3/5-ben. */
.fm-hero {
  display: flex;
  align-items: center;
  min-height: 16rem;
  margin: 0 0 3rem;
  padding: 3.5rem 2.5rem 3.5rem 40%;
  border-radius: var(--fm-radius);
  background: var(--fm-navy) url("/public/fm-hero.png") left center / cover no-repeat;
  color: #ffffff;
}

@media (max-width: 768px) {
  .fm-hero {
    min-height: 0;
    padding-left: 2.5rem;
    background: linear-gradient(90deg, var(--fm-navy) 0%, #2d5a8c 55%, var(--fm-sky) 100%);
  }
}

.fm-hero h1 {
  max-width: 34rem;
  margin: 0;
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 480px) {
  .fm-hero h1 {
    font-size: 1.35rem;
  }
}

/* Kártyák: fehér, erősen lekerekített, puha árnyékkal. */
.ssr-cards-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2.5rem;
}

.ssr-cards-grid {
  gap: 2rem;
  /* Minden sor a legmagasabb kártyához igazodik — a hosszú szövegeket a
     `fieldPreviews` részlete tartja féken, így a rács egyenletes. */
  grid-auto-rows: 1fr;
}

.ssr-card {
  border: 0;
  border-radius: var(--fm-radius);
  box-shadow: var(--fm-shadow);
  padding: 1.25rem 1.25rem 1.5rem;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ssr-card:hover {
  box-shadow: 0 0 40px rgba(18, 39, 76, 0.3);
  transform: translateY(-2px);
}

/* A keret bélyegképe 64×64-es; a kártyán a teljes kép kell, 170px magasságig
   (a projekciók `thumbnailWidth: 400` variánsa — élesen, az eredeti fájl nélkül). */
.ssr-card .ssr-file-thumb,
.ssr-card img {
  max-height: 170px;
  max-width: 100%;
  width: auto;
  height: auto;
  border: 0;
  margin: 0 auto;
  object-fit: contain;
}

.ssr-card [data-field="title"] .ssr-card-value {
  color: var(--fm-navy);
  font-size: 1.05rem;
  font-weight: 700;
}

.ssr-card .ssr-toolbar {
  justify-content: center;
}

/* Egészoldalas kereső: a mező a lap címének vonalától indul és kitölti a sort
   (a keret alapja egy középre zárt, 780px-es sáv). */
.ssr-search-form-inner {
  max-width: none;
  margin-inline: 0;
}

/* Találatszám: sötétkék címke a lista fölött. */
.ssr-cards-count {
  display: inline-block;
  margin: 1.25rem 0 1.5rem;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  background: var(--fm-navy);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Találati lista: soronként egy találat, balra zárva (a leírások hossza erősen
   eltér — rácsban üres vagy egyenetlen kártyák lennének). */
#talalatok .ssr-cards-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 1rem;
}

#talalatok .ssr-card {
  padding: 1.25rem 1.75rem;
  border-radius: 18px;
  text-align: left;
}

#talalatok .ssr-card-heading {
  font-size: 1.15rem;
}

#talalatok .ssr-card .ssr-toolbar {
  justify-content: flex-start;
}

/* A találat típusa (Termék / Oldal) kis címke a kártya tetején. */
.ssr-card [data-field="tipus"] .ssr-card-value {
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: var(--fm-tab-panel-bg);
  color: var(--fm-navy);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Gombok: sötétkék, lekerekített sarok. */
.ssr-toolbar-btn {
  background: var(--fm-navy);
  border: 0;
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.55rem 1.6rem;
}

.ssr-toolbar-btn:hover {
  background: var(--fm-navy-2);
  color: #ffffff;
}

/* Kétoszlopos beágyazott layout (`left` / `main` régió) — a termékoldal és a
   Kapcsolat oldal. A sorrend a sémáé, a CSS csak oszlopot ad; mobilon egy
   oszlop, a `left` régió elöl.
   - Termékoldal (WP-termékoldal mintája): balra a kiemelt kép és a galéria,
     jobbra a cím, az ajánlatkérés gombja, a rövid leírás, a kategória és a fülek.
   - Kapcsolat: balra az üzenetküldő űrlap, jobbra az oldal tartalma
     (elérhetőség, térkép). */
:is(#termek-adatlap, #kapcsolat-oldal) > .ssr-layout-row {
  display: grid;
  grid-template-columns: var(--fm-split-columns, minmax(0, 1fr) minmax(0, 1fr));
  gap: 3rem;
  align-items: start;
}

#termek-adatlap {
  --fm-split-columns: minmax(0, 5fr) minmax(0, 7fr);
}

:is(#termek-adatlap, #kapcsolat-oldal) > .ssr-layout-row > :is(.ssr-layout-left, .ssr-layout-main) {
  padding: 0;
  background: none;
  border: 0;
}

/* Kapcsolat: az űrlap és az elérhetőség FÖLÖTT egy kártyasor — balra a
   hibabejelentő (statikus kártya, közvetlenül az űrlapra visz), mellette az
   aloldal-kártyák (`PublicContactSubpages`). A bal oszlop egy kártya széles. */
#kapcsolat-linkek {
  margin: 1.75rem 0 2.5rem;
}

#kapcsolat-linkek > .ssr-layout-row {
  display: grid;
  grid-template-columns: calc((100% - 3 * 2rem) / 4) minmax(0, 1fr);
  gap: 2rem;
}

#kapcsolat-linkek > .ssr-layout-row > :is(.ssr-layout-left, .ssr-layout-main) {
  padding: 0;
  background: none;
  border: 0;
}

.fm-link-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  height: 100%;
  box-sizing: border-box;
  padding: 1.25rem 1.25rem 1.5rem;
  border-radius: var(--fm-radius);
  box-shadow: var(--fm-shadow);
  background: #ffffff;
  text-align: center;
}

/* A kártya képe az oldal-kártyák képének méretezésével (`.ssr-card img`). */
.fm-link-card img {
  display: block;
  max-height: 170px;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.fm-link-card h4 {
  margin: 0;
  color: var(--fm-navy);
  font-size: 1.05rem;
  font-weight: 700;
}

/* A gomb a kártya-gombsor metrikájával (`.ssr-toolbar-btn` a kártyán). */
.fm-link-card .fm-button {
  margin-top: auto;
  font-size: 0.85rem;
  padding: 0.55rem 1.6rem;
}

@media (max-width: 768px) {
  #kapcsolat-linkek > .ssr-layout-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

#kapcsolat-oldal .ssr-form {
  margin-top: 0;
}

#termek-adatlap .ssr-record {
  padding: 0;
}

#termek-adatlap .ssr-record-title {
  margin-top: 0;
}

#termek-adatlap [data-field="summary"] {
  font-size: 1.05rem;
  line-height: 1.75;
}

/* A kategória a WP-n apró, egysoros „Kategóriák: …” sor volt: címke és érték
   egymás mellett, kettősponttal, normál vastagsággal — a rekord-sor fix
   címke-oszlopa helyett. */
#termek-adatlap [data-field="category"] {
  gap: 0.35em;
  font-size: 0.8rem;
}

#termek-adatlap [data-field="category"] .ssr-record-label {
  min-width: 0;
  width: auto;
  flex: none;
  font-size: inherit;
  font-weight: 400;
}

#termek-adatlap [data-field="category"] .ssr-record-label::after {
  content: ":";
}

#termek-adatlap [data-field="category"] .ssr-record-value {
  font-size: inherit;
}

@media (max-width: 768px) {
  :is(#termek-adatlap, #kapcsolat-oldal) > .ssr-layout-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* A kiemelt kép teljes méretben (a projekció `thumbnailWidth: 840` variánsa) —
   a keret 64×64-es cella-bélyegét oldja fel. */
.ssr-record [data-field="image"] img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid var(--ssr-border);
  border-radius: 12px;
  padding: 1rem;
}

/* Tartalmi oldalak (termék, oldal, kategória): a mezők keret és sor-elválasztó
   nélkül, a lap folyó szövegeként — a keret alapja adatlap-doboz. */
.ssr-record-fields {
  background: none;
  border: 0;
  border-radius: 0;
}

.ssr-record-row {
  border-bottom: 0;
  padding-inline: 0;
}

/* Termékfülek (`tabs` SSR-nézet) — a WP-termékoldal mintájára: keretes fülek,
   az aktív fül a keretes, halványszürke panellel egybeolvad. */
.ssr-tabs-list {
  gap: 0;
  border-bottom: 0;
}

.ssr-tabs-tab {
  border: 1px solid var(--fm-tab-border);
  border-radius: 0;
  background: #ffffff;
  margin: 0 -1px -1px 0;
}

.ssr-tabs-tab[aria-selected="true"] {
  position: relative;
  border-color: var(--fm-tab-border);
  border-bottom-color: var(--fm-tab-panel-bg);
  background: var(--fm-tab-panel-bg);
  color: var(--fm-navy);
  font-weight: 600;
}

.ssr-tabs-enhanced .ssr-tabs-panel {
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid var(--fm-tab-border);
  background: var(--fm-tab-panel-bg);
}

/* Keskeny kijelzőn a sorokba törő, egymásba csúszó keretes fülek szétesnek:
   helyette tördelődő, lekerekített „chip"-sor, az aktív fül sötétkék kitöltéssel,
   alatta a panel önálló, lekerekített dobozként. */
@media (max-width: 768px) {
  .ssr-tabs-list {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .ssr-tabs-tab {
    margin: 0;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-size: 0.95rem;
  }

  .ssr-tabs-tab[aria-selected="true"] {
    border-color: var(--fm-navy);
    background: var(--fm-navy);
    color: #ffffff;
  }

  .ssr-tabs-enhanced .ssr-tabs-panel {
    padding: 1rem 1.1rem 1.25rem;
    border-radius: var(--fm-radius);
  }
}

/* A WP-fültartalom saját címsorai a lap címénél kisebbek. */
.ssr-tabs-panel :is(h2, h3, h4) {
  font-size: 1.15rem;
}

/* Főoldal: Rólunk-blokk a kategóriakártyák alatt — a WP-szakasz mintájára
   színátmenetes háttér (uploads/2021/06/rolunk.jpg), fehér szöveg, jobbra kép. */
.fm-about {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
  margin-top: 4rem;
  padding: 3rem 2.5rem;
  border-radius: var(--fm-radius);
  background: var(--fm-navy) url("/public/fm-rolunk-hatter.jpg") center / cover no-repeat;
  color: #ffffff;
}

.fm-about-text {
  flex: 3 1 20rem;
}

.fm-about h2 {
  margin-top: 0;
  color: #ffffff;
}

.fm-about-image {
  flex: 2 1 14rem;
  /* Flex-elemként a kép min-width:auto-ja a saját szélessége (438px) lenne,
     ami keskeny kijelzőn kitolja a sávból; a 100% a sáv belső szélességéhez köti. */
  min-width: 0;
  max-width: min(22rem, 100%);
  height: auto;
  margin: 0 auto;
  border-radius: var(--fm-radius);
}

.fm-about .fm-button {
  background: #ffffff;
  color: var(--fm-navy);
}

.fm-about .fm-button:hover {
  background: #e6eef7;
  color: var(--fm-navy);
}

/* Tartalmi oldalak törzse: az Enfold-elrendezésből átvett szakasz → sor → oszlop. */
.fm-section + .fm-section {
  margin-top: 2.5rem;
}

.fm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.fm-col {
  flex: 1 1 100%;
  min-width: 0;
}

.fm-col--1-2 { flex-basis: calc(50% - 1rem); }
.fm-col--1-3 { flex-basis: calc(33.333% - 1.334rem); }
.fm-col--2-5 { flex-basis: calc(40% - 1rem); }
.fm-col--3-5 { flex-basis: calc(60% - 1rem); }
.fm-col--1-5 { flex-basis: calc(20% - 1.6rem); }

/* A harmad akkor is harmad, ha a sorban kevesebb oszlop áll (a WP-rács így
   viselkedett) — a hiányos utolsó sor kártyái ne nyúljanak szét. */
.fm-col--1-3 { flex-grow: 0; }

/* Képes kártya (WP-oszlop: cím + kép, pl. Kiállítások): fehér, lekerekített
   kártya árnyékkal, középre zárt cím, egyforma (4:3, kitöltött) kép. */
.fm-row:has(> .fm-col > h4 + .fm-image) {
  align-items: flex-start;
}

.fm-col:has(> h4 + .fm-image) {
  box-sizing: border-box;
  padding: 1.25rem 1.25rem 1.5rem;
  border-radius: var(--fm-radius);
  background: #ffffff;
  box-shadow: var(--fm-shadow);
  text-align: center;
}

.fm-col:has(> h4 + .fm-image) > h4 {
  margin: 0.25rem 0 1rem;
  color: var(--fm-navy);
  font-size: 1.15rem;
}

.fm-col:has(> h4 + .fm-image) > .fm-image {
  margin: 0;
}

.fm-col:has(> h4 + .fm-image) > .fm-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

/* A kártya fölötti felhívás (pl. „Nézzen körbe … 3D-ben!”): halványkék sáv a
   kártya tetején, a linkek a márka színével. */
.fm-col:has(> h4 + .fm-image) > :is(p, h5):not(h4 ~ *) {
  margin: 0;
  padding: 0.35rem 1rem;
  background: var(--fm-tab-panel-bg);
  color: var(--fm-navy);
}

.fm-col:has(> h4 + .fm-image) > :is(p, h5):not(h4 ~ *):first-child {
  padding-top: 1rem;
  border-radius: 16px 16px 0 0;
}

.fm-col:has(> h4 + .fm-image) > h5:not(h4 ~ *):has(+ h4) {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-radius: 0 0 16px 16px;
}

.fm-col:has(> h4 + .fm-image) a {
  color: var(--fm-navy);
}

/* A Kiállítások bevezető mondata: a kártyák fölötti, középre zárt alcím. */
.fm-row:has(+ .fm-row > .fm-col > h4 + .fm-image) h3 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .fm-col { flex-basis: 100%; }
}

.fm-col__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Oldalcím-sáv (WP: a tartalmi oldalak tetején fotós, kék sáv fehér címmel). A
   változatot a `Page.banner` mező adja (`OldalcimSav`), a lap `data-banner`
   attribútumán (`attributeFields`); a Kapcsolat saját nézete a kézfogásos sávot
   viseli. A sáv a fejléc alá simul (a fő régió felső térközét visszaveszi), és a
   képernyő teljes szélességét kitölti. Képek: `public/fm-cimsav-*.png` ←
   `uploads/2021/06/2021-06-11-*.png`. */
.ssr-record[data-banner="sztetoszkop"] { --fm-cimsav: url("/public/fm-cimsav-sztetoszkop.png"); }
.ssr-record[data-banner="orvos"] { --fm-cimsav: url("/public/fm-cimsav-orvos.png"); }
.ssr-record[data-banner="apolo"] { --fm-cimsav: url("/public/fm-cimsav-apolo.png"); }
.ssr-record[data-banner="rehabilitacio"] { --fm-cimsav: url("/public/fm-cimsav-rehabilitacio.png"); }
.ssr-record[data-banner="kezfogas"],
#kapcsolat-cim { --fm-cimsav: url("/public/fm-cimsav-kezfogas.png"); }

.ssr-record[data-banner] {
  padding-top: 0;
}

:is(.ssr-record[data-banner] > .ssr-record-title, #kapcsolat-cim .ssr-text-title) {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 18.5rem;
  margin: -2rem calc(50% - 50vw) 2.5rem;
  padding: 2rem max(var(--ssr-container-gutter), calc((100vw - var(--ssr-container-width)) / 2));
  background: var(--fm-navy) var(--fm-cimsav) center / cover no-repeat;
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  :is(.ssr-record[data-banner] > .ssr-record-title, #kapcsolat-cim .ssr-text-title) {
    min-height: 10rem;
    font-size: 1.9rem;
    background-position: left center;
  }
}

/* WP-szekció dekorációs hátterei (`SECTION_BACKGROUNDS`, `tools/wp/wp-pages.mjs`):
   a szekció a tartalom-sávból kilépve a képernyő teljes szélességét kitölti.
   - panel: balra szürke, lekerekített panel pöttyökkel (WP: Component-3-9.png);
   - sky: halványkék sáv (WP: Rectangle-50-2-1.png). */
:is(.fm-section--panel, .fm-section--sky) {
  margin-inline: calc(50% - 50vw);
  padding: 5rem max(var(--ssr-container-gutter), calc((100vw - var(--ssr-container-width)) / 2));
}

.fm-section--panel {
  background: url("/public/fm-section-panel.png") left center / auto 100% no-repeat;
}

.fm-section--sky {
  background: #b8dded url("/public/fm-section-sky.png") center / cover no-repeat;
}

/* Szekciócím: középre zárt, alatta vékony sötétkék vonal. */
:is(.fm-section--panel, .fm-section--sky) h2 {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--fm-navy);
  text-align: center;
  font-size: 2.2rem;
  font-weight: 500;
}

:is(.fm-section--panel, .fm-section--sky) h2 strong {
  font-weight: inherit;
}

/* Munkatárs-kártya (kép + név + beosztás): középre zárva, a sor középre igazítva. */
.fm-row:has(> .fm-col > .fm-subheading) {
  justify-content: center;
  gap: 2rem 3rem;
}

.fm-col:has(> .fm-subheading) {
  flex: 0 1 175px;
  text-align: center;
}

.fm-col:has(> .fm-subheading) .fm-image img {
  width: 175px;
  border-radius: var(--fm-radius);
}

.fm-col:has(> .fm-subheading) h4 {
  margin: 0.5rem 0 0.25rem;
  color: var(--fm-navy);
  font-size: 1.1rem;
}

.fm-col:has(> .fm-subheading) h4 b {
  font-weight: 600;
}

.fm-subheading p {
  margin: 0;
  font-size: 0.95rem;
  color: #444444;
}

@media (max-width: 768px) {
  :is(.fm-section--panel, .fm-section--sky) {
    padding-block: 3rem;
  }

  /* Keskeny kijelzőn a pöttyös panelkép a tartalom alá csúszna és zavarna:
     helyette a panel szürkéje, egyszínű sávként. */
  .fm-section--panel {
    background: #f0f2f1;
  }
}

.fm-image {
  margin: 0 0 1rem;
  text-align: center;
}

.fm-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.fm-video,
.fm-map {
  margin: 1rem 0;
}

.fm-video iframe,
.fm-map iframe,
.ssr-record [data-field="videos"] iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 12px;
}

/* Pipás lista (WP „ikonlista”, Minőségpolitika): sötétkék körben fehér pipa, a
   körök között halvány függőleges vonal, a tétel nagybetűs, sötétkék. */
.fm-iconlist {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
}

.fm-iconlist li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 5rem;
  margin-bottom: 2rem;
  padding-left: 7rem;
  color: var(--fm-navy);
  font-size: 1.2rem;
  text-transform: uppercase;
  line-height: 1.3;
}

.fm-iconlist li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--fm-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 2.2rem no-repeat;
}

.fm-iconlist li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 5rem;
  bottom: -2rem;
  left: 2.5rem;
  border-left: 1px solid var(--ssr-border);
}

.fm-iconlist li strong {
  font-weight: 500;
}

@media (max-width: 768px) {
  .fm-iconlist li {
    min-height: 3.5rem;
    padding-left: 4.5rem;
    font-size: 1rem;
  }

  .fm-iconlist li::before {
    width: 3.5rem;
    height: 3.5rem;
    background-size: 1.6rem;
  }

  .fm-iconlist li:not(:last-child)::after {
    top: 3.5rem;
    left: 1.75rem;
  }
}

/* Partnerkártya (linkelt WP-oszlop: logó + leírás, Partnereink): fehér, erősen
   lekerekített kártya puha árnyékkal, a logó és a leírás között sötétkék vonal. */
.fm-col__link {
  height: 100%;
  box-sizing: border-box;
  padding: 2rem 2.5rem;
  border-radius: var(--fm-radius);
  background: #ffffff;
  box-shadow: var(--fm-shadow);
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fm-col__link:hover {
  box-shadow: 0 0 40px rgba(18, 39, 76, 0.3);
  transform: translateY(-2px);
}

.fm-col__link .fm-image img {
  max-height: 170px;
  width: auto;
}

.fm-col__link .fm-image + p {
  margin: 1.5rem 0.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fm-navy);
  text-align: center;
}

/* Letölthető dokumentumok (a fájlmező `documents`-je, minden tartalmi lapon, a
   leírás alatt): a keret gombsor-gombként rajzolja (`icon` kulcs, könyv-ikon),
   a gomb-festés a lap közös `.ssr-toolbar-btn` szabálya; itt csak a tördelés. */
.ssr-record [data-field="documents"] .ssr-file-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fm-button {
  display: inline-block;
  background: var(--fm-navy);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.55rem 1.6rem;
  text-decoration: none;
}

.fm-button:hover {
  background: var(--fm-navy-2);
  color: #ffffff;
}

/* A szövegblokkokba (adat) írt gombok is ikont kapnak, mint a lap gombsor-gombjai
   (a keret `detail` gombjának előre mutató nyila); a `.fm-button` a projekt
   SAJÁT osztálya. */
.fm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* A nyíl a felirat ELŐTT áll, mint a keret `detail` gombján („→ Bővebben"). */
.fm-button::before {
  content: "";
  flex: none;
  width: 1.05em;
  height: 1.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m0 0-6.5-6.5M19 12l-6.5 6.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m0 0-6.5-6.5M19 12l-6.5 6.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Főoldali carousel (WP LayerSlider): balra cím + szöveg + gomb, jobbra a dia
   kártyás képe teljes egészében — a WP-diák képe álló kompozíció, kitöltve levágódna. */
.ssr-hero {
  --ssr-hero-min-height: 30rem;
  border-radius: var(--fm-radius);
  background: #ffffff;
}

.ssr-hero-image {
  left: auto;
  width: 50%;
  object-fit: contain;
  object-position: right center;
}

.ssr-hero-caption {
  max-width: 45%;
  margin: 2rem 0 4rem 1rem;
  padding: 0;
  background: transparent;
}

.ssr-hero-title {
  color: var(--fm-navy);
}

.ssr-hero-text {
  white-space: pre-line;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Mobilon a kép a szöveg fölött, a folyamban (nem háttérként) — különben a
   szöveg rácsúszna. */
@media (max-width: 768px) {
  .ssr-hero-image {
    position: relative;
    inset: auto;
    width: 100%;
    height: 16rem;
    object-position: center;
  }

  .ssr-hero-caption {
    max-width: none;
    margin: 1rem 0 3.5rem;
  }

  /* A WP-diák kézi sortörései asztali szélességre készültek. */
  .ssr-hero-text {
    white-space: normal;
  }
}

/* Lábléc: logó, elérhetőség, információk, majd színátmenetes copyright-sáv.
   A gyökér-layout lábléc-régiója a keret alapján keretezett sáv (padding,
   felső vonal); itt a tartalom maga a lábléc, a copyright-sáv a képernyő
   teljes szélességéig és a lap aljáig ér. */
body > .ssr-layout > .ssr-layout-bottom {
  padding: 0;
  border-top: 0;
  background: none;
}

.fm-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  max-width: var(--ssr-container-width);
  margin: 3rem auto 0;
  padding: 0 var(--ssr-container-gutter) 2.5rem;
}

.fm-footer__brand p {
  margin-top: 1rem;
  color: var(--fm-navy);
  line-height: 1.6;
}

.fm-footer h2 {
  font-size: 1.05rem;
  font-weight: 600;
}

.fm-footer address {
  font-style: normal;
  line-height: 1.8;
}

.fm-footer a {
  color: var(--fm-navy);
}

.fm-footer__info ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.8;
}

.fm-copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin: 0;
  padding: 1.75rem max(var(--ssr-container-gutter), calc((100% - var(--ssr-container-width)) / 2));
  /* Alul hely a lap sarkában álló chat-gombnak (`chat` `presentation: "popup"`:
     fix, 1.25rem-re az aljától, min. 3rem magas): a lap legalján a sáv tartalma
     — a jobb szélen a Szirio-címke — a gomb FÖLÖTT áll meg, bármilyen széles a
     kijelző (keskenyebb monitoron a címke épp a gomb alá esett). */
  padding-bottom: 5.25rem;
  background: linear-gradient(90deg, var(--fm-navy) 0%, #2d5a8c 55%, var(--fm-sky) 100%);
  color: #ffffff;
  font-size: 0.9rem;
}

/* „Szirio platform” címke a copyright-sáv jobb szélén (a gennaroiskola mintája). */
.fm-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.fm-platform-badge:is(:hover, :focus-visible) {
  background: #ffffff;
  color: var(--fm-navy);
}

/* Űrlapok: a tartalom-hasáb teljes szélessége (a keret alapja 420px); a mezők a
   projekció `fieldGroups[].columnMinWidth`-je szerint két oszlopba tördelnek. */
.ssr-form {
  max-width: none;
  margin: 1.5rem 0;
  padding: 1.75rem 2rem;
  border-radius: 16px;
  box-shadow: var(--fm-shadow);
  border: 0;
}

.ssr-form-group + .ssr-form-group {
  margin-top: 1.25rem;
}


/* Ajánlatkérő lista (kosár-oldal, `grid` a `#ajanlatkero-lista` horgonyon): az
   űrlapok kártya-nyelvén — fehér, lekerekített, puha árnyékú doboz, mint az
   alatta álló ajánlatkérő űrlap. A sorok középre igazítottak (kis termékkép), a
   sor-végi gombok a site gombjai kisebb méretben: „Adatlap" kitöltött, a
   mennyiség −/+ körvonalas négyzet, a „Törlés" visszafogott szöveg-gomb. A
   keret alapja a sor-végi gombokat szöveg-linkként rajzolja — itt csak a
   megjelenést írjuk felül, akciónkénti osztályon (`.ssr-toolbar-btn-<akció>`). */
#ajanlatkero-lista {
  --ssr-grid-cell-padding-y: 0.85rem;
  --ssr-grid-cell-padding-x: 0.75rem;
  margin: 1.5rem 0;
  padding: 1.75rem 2rem;
  border-radius: 16px;
  box-shadow: var(--fm-shadow);
  background: var(--ssr-surface);
}

#ajanlatkero-lista .ssr-grid-title {
  margin: 0 0 1rem;
  color: var(--ssr-fg);
  font-size: 1.25rem;
}

#ajanlatkero-lista .ssr-grid-table {
  border: 0;
}

#ajanlatkero-lista .ssr-grid-table th {
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--fm-navy);
  background: none;
  color: var(--fm-navy);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#ajanlatkero-lista .ssr-grid-table td {
  border-bottom: 1px solid var(--ssr-border);
  font-size: 0.95rem;
  vertical-align: middle;
}

#ajanlatkero-lista .ssr-grid-table tbody tr:last-child td {
  border-bottom: 0;
}

#ajanlatkero-lista .ssr-grid-table tbody tr:hover td {
  background: var(--ssr-row-hover);
}

/* Termékkép: kis, lekerekített, a kép arányát tartva. */
#ajanlatkero-lista .ssr-file-thumb {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: contain;
  background: #ffffff;
}

/* Termék neve (és a mennyiség): a kártyák nagybetűs, ritkított írása,
   sötétkéken; a gombcella a saját feliratát tartja. */
#ajanlatkero-lista .ssr-grid-table tbody td {
  color: var(--fm-navy);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#ajanlatkero-lista .ssr-grid-table tbody td.ssr-grid-detail-cell {
  letter-spacing: normal;
  text-transform: none;
}

#ajanlatkero-lista .ssr-grid-table td.ssr-grid-align-center {
  color: var(--fm-navy);
  font-size: 1.05rem;
  font-weight: 700;
}

#ajanlatkero-lista .ssr-grid-detail-cell .ssr-toolbar {
  gap: 0.5rem;
}

#ajanlatkero-lista .ssr-grid-detail-cell .ssr-toolbar-btn {
  padding: 0.45rem 1rem;
  border: 1px solid var(--fm-navy);
  border-radius: 6px;
  background: var(--fm-navy);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
}

#ajanlatkero-lista .ssr-grid-detail-cell .ssr-toolbar-btn:hover {
  border-color: var(--fm-navy-2);
  background: var(--fm-navy-2);
  color: #ffffff;
  text-decoration: none;
}

#ajanlatkero-lista .ssr-grid-detail-cell :is(.ssr-toolbar-btn-ajanlatTetelCsokkentes, .ssr-toolbar-btn-ajanlatTetelNoveles) {
  width: 2.1rem;
  padding: 0.45rem 0;
  background: #ffffff;
  color: var(--fm-navy);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

#ajanlatkero-lista .ssr-grid-detail-cell :is(.ssr-toolbar-btn-ajanlatTetelCsokkentes, .ssr-toolbar-btn-ajanlatTetelNoveles):hover {
  background: var(--ssr-accent-soft);
  color: var(--fm-navy);
}

#ajanlatkero-lista .ssr-grid-detail-cell .ssr-toolbar-btn-ajanlatTetelTorles {
  border-color: transparent;
  background: none;
  color: var(--ssr-danger);
}

#ajanlatkero-lista .ssr-grid-detail-cell .ssr-toolbar-btn-ajanlatTetelTorles:hover {
  border-color: var(--ssr-danger-border);
  background: var(--ssr-danger-bg);
  color: var(--ssr-danger);
}

@media (max-width: 768px) {
  #ajanlatkero-lista {
    padding: 1.25rem 1rem;
  }

  #ajanlatkero-lista .ssr-file-thumb {
    width: 48px;
    height: 48px;
  }
}