/* lap/ SEO lapoldalak stílusa — a style.css vizuális nyelvét tükrözi,
   de önálló fájl (a SPA stílusát nem érinti). CSP: nincs inline stílus. */
html { scroll-behavior: smooth; }
body { font-family: system-ui, -apple-system, sans-serif; margin: 0; background: #f2f4f4; }
header { display: flex; align-items: center; gap: 12px; padding: 9px 14px;
         background: #2c3e50; color: #fff; flex-wrap: wrap; }
header h1 { font-size: 1rem; margin: 0; flex: 1; min-width: 220px; }
.hbtn { background: #46627f; color: #fff; border: 0; padding: 7px 10px;
        border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
.hidden { display: none !important; }

/* --- billentyűzet-fókusz (a11y) --- */
:focus-visible { outline: 3px solid #14603a; outline-offset: 2px; }
#maincontent:focus { outline: none; }
.hs:focus-visible { outline: 3px solid #b02a1c; outline-offset: -1px; }
.skiplink { position: absolute; left: -9999px; top: 0; z-index: 50;
            background: #2c3e50; color: #fff; padding: 8px 12px;
            border-radius: 0 0 6px 0; }
.skiplink:focus { left: 0; }

/* --- ábra --- */
main { padding: 10px; }
.abwrap { position: relative; }
#imgpane { overflow: auto; background: #ddd; border-radius: 6px; }
#imgbox { position: relative; display: inline-block; margin: 0 auto; width: 100%; }
#pageimg { display: block; width: 100%; height: auto; }
#hotspotbox { position: absolute; inset: 0; }
a.hs { position: absolute; display: block; text-decoration: none;
       transform: translate(-50%, -50%);
       border: 1px solid rgba(30,132,73,.9);
       background: rgba(232,245,238,.22); border-radius: 2px; cursor: pointer; }
a.hs:hover { background: rgba(30,132,73,.30); }
a.hs.selected { border-color: #c0392b; background: rgba(192,57,43,.3); }
/* MEGJEGYZÉS: az inset:-10px-es ::after tapfelület-bővítést eltávolítottuk,
   mert átfedő hotspotoknál (pl. hs-25 hs-1 felett) rossz elemet vett célba.
   A WCAG 2.5.8-mitigáció a kattintható listasoron (a.tetel-link) keresztül él. */

/* --- popup (a tartalma a látható alkatrészlistából épül) --- */
#details { position: fixed; top: 60px; right: 14px;
           width: min(330px, calc(100vw - 28px)); background: #fff;
           border: 1px solid #ccc; border-radius: 6px; padding: 14px;
           box-shadow: 0 4px 16px rgba(0,0,0,.18); z-index: 10;
           max-height: calc(100vh - 80px); overflow: auto; }
@media (max-width: 600px) {
  #details { top: auto; bottom: 68px; left: 10px; right: 10px; width: auto;
             max-height: 45vh; padding: 10px; }
}
#details h3 { margin: 0 0 10px; color: #1e8449; padding-right: 30px; }
#details table { width: 100%; border-collapse: collapse; }
#details td { padding: 5px 4px; border-bottom: 1px solid #eee;
              font-size: .9rem; vertical-align: top; }
#details td:first-child { color: #666; width: 45%; }
.xclose { position: absolute; top: 8px; right: 10px; border: 0; background: none;
          font-size: 1rem; color: #767676; cursor: pointer; padding: 2px 6px; }
.xclose:hover { color: #c0392b; }

/* --- eszközsáv: lapozás + zoom, folyam elrendezésben (nem fedi az ábrát) --- */
.lapbar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
          flex-wrap: wrap; }
.navbtn { background: #46627f; color: #fff; padding: 8px 12px;
          border-radius: 4px; text-decoration: none; font-size: .9rem; }
.navbtn:hover { background: #547493; }
#zoombar { display: flex; gap: 2px; align-items: center; background: #fff;
           border: 1px solid #ccc; border-radius: 8px; padding: 4px 6px;
           margin-inline: auto; }
#zoombar[hidden] { display: none; }
#zoombar button { border: 0; background: none; cursor: pointer; padding: 4px 7px;
                  border-radius: 5px; color: #2c3e50; display: flex;
                  align-items: center; font-size: 15px; }
#zoombar button:hover { background: #eef2f5; }
#zoombar button:disabled { opacity: .3; cursor: default; background: none; }
#zoombar svg { display: block; }
#zoomslider { width: 130px; accent-color: #2c3e50; cursor: pointer; }
#zoomlab { min-width: 40px; text-align: center; font-size: .8rem; color: #555; }
#imgpane.pannable { cursor: grab; }
#imgpane.grabbing { cursor: grabbing; }

/* (a lapozás a .lapbar sávban történik — fix pozíciójú nyilak nincsenek) */

/* --- alkatrészlista (ez a popup tartalma is — láthatóan, a HTML-ben) --- */
.tetelek { max-width: 900px; margin: 14px auto 20px; background: #fff;
           border: 1px solid #ddd; border-radius: 6px; padding: 12px 16px 14px; }
.tetelek h2 { font-size: 1rem; color: #2c3e50; margin: 4px 0 10px; }
.tetellista { margin: 0; padding: 0; list-style: none; }
.tetellista li { padding: 7px 6px; border-bottom: 1px solid #eee;
                 font-size: .95rem; }
.tetellista li:last-child { border-bottom: 0; }
/* a listasor maga is kattintható cél (ugyanaz a művelet, mint a hotspot):
   nagy tapfelület + ugyanaz a hozzáférhető név => WCAG 2.5.8 kivétel a hotspotoknak.
   A padding a 24x24 CSS px-es tapcél-minimumot biztosítja. */
a.tetel-link { display: block; color: inherit; text-decoration: none;
               padding: 5px 0; min-height: 24px; box-sizing: border-box; }
a.tetel-link:hover .tnev { text-decoration: underline; }
a.tetel-link:focus-visible { outline: 3px solid #14603a; outline-offset: 2px; }
.tsz { color: #1e8449; font-weight: 700; min-width: 2.2em; }
.tgyari { color: #555; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
          font-size: .88rem; }

footer { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
         padding: 12px 16px 20px; color: #555; font-size: .85rem; }
footer a { color: #14603a; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}