:root {
    --site-formula-font: 'Times New Roman', Times, serif;
}

* { box-sizing: border-box; }
body {
    background-color: var(--site-bg, black);
    margin: 0;
    padding: 0;
    font-family: var(--site-font, sans-serif);
    overflow-x: hidden;
    font-size: var(--site-font-size, 80%); 
}

#bg-container {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-position: center; background-repeat: no-repeat; background-size: cover;
    z-index: -1;
    transition: background-image 0.5s ease-in-out, filter 0.5s ease-in-out; 
}

/* Full-viewport hit layer: slideshow / href below UI (z-index 10+). */
.bg-click-layer {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

#bg-content-layer,
.bg-content-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

#bg-content-layer .content-file-wrap,
.bg-content-layer .content-file-wrap {
    width: 100%;
    height: 100%;
}

#bg-content-layer a,
#bg-content-layer .content-swap-view,
.bg-content-layer a,
.bg-content-layer .content-swap-view {
    pointer-events: auto;
}

.bg-text-overlay {
    position: fixed;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    padding: 2rem;
    box-sizing: border-box;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.bg-text-overlay a,
.bg-text-overlay .content-swap-view {
    pointer-events: auto;
}

.page-header {
    position: static;
}

/* Logó wrapper: fix magasságú slot; a kép középre igazítva, ratio szerinti mérettel */
.logo-wrapper {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; 
    z-index: 12;
    transform-origin: top left;
    transition: transform 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, transform-origin 0.5s ease-in-out;
}

.logo {
    cursor: pointer;
    width: auto;
    height: auto;
    display: block;
}

.formula-text {
    font-family: var(--formula-font, "Times New Roman", Times, serif);
    color: var(--formula-color, #b0b0b0);
    font-size: 5.625rem; 
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    z-index: 10;
    display: inline-block;
    line-height: 0.72; 
    position: absolute;
    height: auto;
    transform-origin: top left;
    
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, left 0.5s ease-in-out, top 0.5s ease-in-out, height 0.5s ease-in-out;
}

.formula-text.formula-has-file {
    display: inline-block;
    overflow: visible;
    height: auto;
    vertical-align: bottom;
}

/* file only: size from fontSize (via --formula-visual-size) and optional width */
.formula-text.formula-file-only {
    overflow: hidden;
}
.formula-text.formula-file-only .formula-file-only-layer {
    display: block;
    height: 100%;
    width: 100%;
}

/* file + text: inner box sized by text-only measurement */
.formula-text.formula-has-text {
    font-size: 0;
    line-height: 0;
}
.formula-text.formula-has-text .formula-inner {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    box-sizing: border-box;
    line-height: 0.72;
    white-space: nowrap;
}
.formula-text.formula-has-text .formula-text-layer {
    position: relative;
    z-index: 1;
    display: inline-block;
    line-height: inherit;
    white-space: inherit;
}
.formula-text.formula-has-text .formula-file-layer {
    position: absolute;
    z-index: 0;
    display: block;
    overflow: hidden;
}

.popup-box {
    position: absolute;
    width: 20rem; 
    max-width: 90vw;
    line-height: 1.6;
    opacity: 0;
    z-index: 11;
    pointer-events: none;
    transform-origin: top left;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, left 0.5s ease-in-out, top 0.5s ease-in-out;
    margin: 0;
}

.popup-box img {
    display: block;
    margin: 0;
    padding: 0;
    max-width: 100%;
    height: auto;
}

/* file + text: text overlays the loaded file layer; slideshow swaps file slot only */
.content-file-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}
.content-file-slot {
    width: 100%;
    height: 100%;
}
.content-text-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    padding: 0.25em;
    box-sizing: border-box;
}

.content-text-overlay a,
.content-text-overlay .content-swap-view,
.popup-box.content-swap-active,
#formula.content-swap-active {
    pointer-events: auto;
}

.content-swap-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    text-align: left;
}

.content-swap-back {
    align-self: flex-start;
    margin-bottom: 0.5rem;
    cursor: pointer;
    text-decoration: underline;
    flex: 0 0 auto;
}

.content-swap-iframe {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
}

.popup-box.content-swap-active,
#formula.content-swap-active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
.normal .label-content[class*="label-image-fit-"] .content-file-wrap {
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
}

/* Menü gombok */
.gparent {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    z-index: 10;
    width: 25rem;
}
/* Vertical labels: stack from top so activeLabel:hidden collapse does not shift siblings. */
.gparent:not(.menu-tabs):not(.menu-horizontal) {
    justify-content: flex-start;
}
.parent {
    width: 100%;
    flex-shrink: 0;
}
.parent.collapsed {
    display: none;
}
.menu-horizontal.gparent {
    width: auto;
    justify-content: flex-start;
}
.menu-horizontal .parent {
    width: auto;
    flex-shrink: 0;
}
.normal { width: 100%; padding: 0; text-align: center; cursor: pointer; transition: background-color 0.2s ease; box-sizing: border-box; }
.normal.label-has-image { padding: 0; }
.normal.label-hard-disabled {
    pointer-events: none;
    cursor: default !important;
}
.normal .label-content { margin: 0; line-height: 1.4; flex: 0 1 auto; }
/* Non-image file (md, text, …): normal block flow inside the label cell */
.normal .label-content.label-content-block {
    width: 100%;
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 0;
    overflow: auto;
    text-align: left;
}
.normal .label-content.label-content-block p,
.normal .label-content.label-content-block h1,
.normal .label-content.label-content-block h2,
.normal .label-content.label-content-block h3,
.normal .label-content.label-content-block ul,
.normal .label-content.label-content-block ol,
.normal .label-content.label-content-block pre {
    margin: 0 0 0.35em;
}
.normal .label-content.label-content-block > :last-child {
    margin-bottom: 0;
}
/* Menu label image file — imageFit on host; cell size = label.height (padding nélkül) */
.normal .label-content[class*="label-image-fit-"] {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 1;
}
.normal .label-content.label-image-fit-icon img {
    max-width: 100%;
    max-height: 2.5em;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.normal .label-content.label-image-fit-contain img,
.normal .label-content.label-image-fit-cover img,
.normal .label-content.label-image-fit-fill img {
    width: 100%;
    height: 100%;
    display: block;
}
.normal .label-content.label-image-fit-contain img { object-fit: contain; }
.normal .label-content.label-image-fit-cover img { object-fit: cover; }
.normal .label-content.label-image-fit-fill img { object-fit: fill; }
.normal .label-content.label-image-fit-native img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: none;
    display: block;
}
/* gap: 0 + border — shared edges collapse to a single line (pseudosidebar / segmented bar). */
.menu-labels-touching:not(.menu-horizontal) .parent + .parent .normal { margin-top: -1px; }
.menu-labels-touching.menu-horizontal .parent + .parent .normal { margin-left: -1px; }
/* Horizontal row: equal-height cells, text wraps inside the box. */
.menu-horizontal .normal .label-content {
    width: 100%;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.menu-horizontal.menu-cells-auto .normal .label-content {
    width: auto;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

/* Tab bar — horizontal: top strip; vertical: left strip (see menu.js). */
.menu-tabs.menu-horizontal.gparent {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.menu-tabs:not(.menu-horizontal).gparent {
    justify-content: flex-start;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.menu-tabs.menu-tabs-anchor-right:not(.menu-horizontal).gparent {
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.menu-tabs.menu-horizontal .parent {
    width: auto;
    flex-shrink: 1;
    min-width: 0;
}
.menu-tabs:not(.menu-horizontal) .parent {
    width: 100%;
    flex-shrink: 0;
}
.menu-tabs.menu-horizontal .normal.tab {
    border: none;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
}
.menu-tabs:not(.menu-horizontal) .normal.tab {
    border: none;
    border-radius: 0;
    border-bottom: none;
    border-left: 2px solid transparent;
    padding: 0.75rem 1.25rem;
    margin-left: -1px;
}
.menu-tabs.menu-tabs-anchor-right:not(.menu-horizontal) .normal.tab {
    border-left: none;
    border-right: 2px solid transparent;
    margin-left: 0;
    margin-right: -1px;
}
.menu-tabs .normal.tab .label-content {
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
}
.menu-tabs .normal.tab .label-content[class*="label-image-fit-"] {
    width: 100%;
    white-space: normal;
    text-overflow: clip;
}
.menu-tabs .normal.tab .label-content.label-content-block {
    white-space: normal;
    text-overflow: clip;
    overflow: auto;
}
.menu-tabs .normal.tab-active {
    font-weight: 600;
}

/* Lap-gombok: vezető @ a feliratban → fájl (kép, svg, md, …) a gomb tartalmában */
#page-buttons-container button.page-button-file {
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#page-buttons-container button.page-button-file img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}
#page-buttons-container button .content-file-wrap,
#page-buttons-container button .content-text-overlay,
#page-buttons-container button .label-content-block {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
#page-buttons-container button .content-text-overlay {
    overflow: auto;
}

/* Vissza-gomb és lista-váltó (config.navButtons → CSS változók) */
.back-button, .list-toggle-button {
    position: fixed;
    top: calc(var(--nav-btn-tabs-offset-top, 0px) + var(--nav-btn-top, 10px));
    z-index: 1100;
    width: var(--nav-btn-size, 2.5rem);
    height: var(--nav-btn-size, 2.5rem);
    display: none;
    align-items: center; justify-content: center;
    padding: 0; border: none;
    border-radius: var(--nav-btn-radius, 50%);
    background: var(--nav-btn-bg, rgba(0, 0, 0, 0.45));
    color: var(--nav-btn-color, #fff);
    cursor: pointer;
    transition: background 0.2s ease;
}
.back-button { left: calc(var(--nav-btn-tabs-offset-left, 0px) + var(--nav-btn-back-left, 10px)); }
.list-toggle-button { right: calc(var(--nav-btn-tabs-offset-right, 0px) + var(--nav-btn-list-right, 10px)); }
.back-button.visible, .list-toggle-button.visible { display: flex; }
.back-button:hover, .list-toggle-button:hover { background: var(--nav-btn-hover-bg, rgba(0, 0, 0, 0.7)); }
.back-button svg, .list-toggle-button svg {
    width: var(--nav-btn-icon-size, 1.4rem);
    height: var(--nav-btn-icon-size, 1.4rem);
}

/* A mobil (@media max-width) blokkot a motor injektálja, hogy a töréspont
   egyetlen forrásból (config.mobileBreakpoint, default 768px) jöjjön, és a
   JS-logikával (window.innerWidth) konzisztens maradjon. Lásd theme.js
   (injectMobileStylesheet). */