/*
 * ÉDIMODUL – responsive theme on top of Bootstrap 5.
 * Keeps the look of the legacy main.css (colours, background images),
 * the layout itself comes from the Bootstrap grid.
 */

/* Inter (https://rsms.me/inter/, SIL Open Font License 1.1), self-hosted from static/vendor/inter/. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/vendor/inter/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/vendor/inter/inter-latin-wght-normal.woff2) format('woff2-variations');
  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 {
    --em-bg: #1e1916;
    --em-dark: #110d0c;
    --em-panel: #191313;
    --em-panel-light: #251f1f;
    --em-border: #0d1214;
    --em-text: #eee;
    --em-muted: #695b58;
    --em-beige: #bdb39f;
    --em-brown: #332b25;
    --em-accent: #f92b03;
    --em-orange: #e68743;
    /* Menu gradients, matched to the old 1px background images (max. deviation 5/255). */
    --em-grad-dark: linear-gradient(#2d2b29, #262321 25%, #201b19 50%, #191311 75%, #130b0a);
    --em-grad-light: linear-gradient(#e6e0d3, #cfc7ba 25%, #b6aa9d 50%, #9c8e80 75%, #857466);
    --em-grad-topmenu-hover: linear-gradient(#e7dec6, #d3c8b2 25%, #b3a693 50%, #948373 75%, #827061);
    --em-grad-footer: linear-gradient(#2e2a29, #282322 25%, #211b19 50%, #191210 75%, #130b09);
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.5;
    --bs-link-color: #f92b03;
    --bs-link-color-rgb: 249, 43, 3;
    --bs-link-hover-color: #fff;
    --bs-link-hover-color-rgb: 255, 255, 255;
}

body {
    background: var(--em-bg) url('/images/bodybg.jpg') center top repeat;
    /* Vector version (tools/trace-background.py); the JPEG above remains as fallback. */
    background-image: url('/images/bodybg.svg');
    color: var(--em-text);
}

a { text-decoration: none; }
a:hover, a:focus { color: #fff; }

/* At most the width of the original 950px design plus some room on big screens. */
.site { max-width: 1140px; padding-left: 0; padding-right: 0; }

/* --- Széchenyi Terv banner (grant publicity, must stay visible) --------- */
.szechenyi-plusz { padding: 9px 12px 18px; text-align: center; }
.szechenyi-plusz img { width: 700px; }

/* --- Phone logo strip (replaces the banner below 576px) ----------------- */
.logobar { padding: 12px; }
.logobar img { display: block; width: 100%; height: auto; }

/* --- Top menu ------------------------------------------------------------ */
.topmenu {
    background: var(--em-grad-dark);
    padding: 0;
    min-height: 42px;
}
.topmenu .navbar-toggler { margin-right: 12px; border-color: rgba(189, 179, 159, .4); }
.topmenu .nav-link {
    color: var(--em-beige);
    font-size: 13px;
    line-height: 42px;
    padding: 0 8px;
    border-right: 1px solid var(--em-border);
}
.topmenu .nav-item:last-child .nav-link { border-right: 0; }
.topmenu .nav-link:hover,
.topmenu .nav-link:focus,
.topmenu .nav-link.active {
    background: var(--em-grad-topmenu-hover);
    color: #17100f;
}
.topmenu > span { color: var(--em-muted); font-size: 13px; }
.topmenu > span a { color: var(--em-accent); }
.topmenu > span a:hover { color: #fff; }

@media (max-width: 991.98px) {
    .topmenu .navbar-collapse { background: var(--em-dark); }
    .topmenu .nav-link { border-right: 0; border-top: 1px solid var(--em-border); padding: 0 16px; text-align: left; }
}

/* --- Header: logo + slider, both scale with the same aspect ratio -------- */
.header { background: var(--em-dark); overflow: hidden; }
.header .logo { flex: 0 0 24.37%; /* 232 / (232 + 720) */ }
.header .logo picture { display: block; height: 100%; }
.header .logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.header .carousel { min-width: 0; position: relative; }
.header .carousel-item img { height: auto; aspect-ratio: 720 / 298; object-fit: cover; }
.carousel-fade .carousel-item { transition-duration: .25s; }

.slider-caption {
    position: absolute;
    right: 0;
    bottom: 22%;
    z-index: 5;
    max-width: 70%;
    padding: 10px 20px 10px 15px;
    background: rgba(0, 0, 0, .83);
    color: #fff;
    text-align: right;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000;
    font-size: clamp(18px, 2.6vw, 32px);
    line-height: 1.2;
}
.slider-caption span { font-size: .6em; color: #a39481; text-transform: lowercase; }

/* --- Product menu (4 boxes, 2x2 on phones) -------------------------------- */
.productmenu {
    background: var(--em-beige);
    border: 1px solid #1e1917;
}
.productmenu a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 112px;
    padding: 15px 5px;
    text-align: center;
    font-size: 1.35rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--em-brown);
    border-right: 1px solid #1e1917;
    border-bottom: 1px solid #1e1917;
    background: var(--em-grad-light);
}
.productmenu a span { display: block; margin-top: 4px; font-weight: 400; font-size: .65em; line-height: 1.7; }
.productmenu a:hover,
.productmenu a:focus,
.productmenu a.active {
    background: var(--em-grad-dark);
    color: var(--em-beige);
}
@media (max-width: 575.98px) {
    .productmenu a { min-height: 0; font-size: 1.05rem; padding: 10px 4px; }
    .productmenu a span { display: none; }
}

/* --- Content area ------------------------------------------------------- */
.contentarea { background: var(--em-panel); }
.contentareaInner { padding: 24px 18px; color: var(--em-text); background: var(--em-panel); }
@media (min-width: 992px) { .contentareaInner { padding: 24px 28px; } }

.contentareaInner h1, .contentareaInner h2, .contentareaInner h3,
.contentareaInner h4, .contentareaInner h5, .contentareaInner h6 { clear: both; color: #fff; }
.contentareaInner h1 { font-size: 1.75rem; text-transform: uppercase; margin-bottom: 1em; overflow-wrap: anywhere; }
.contentareaInner h2 { font-size: 1.5rem; }
.contentareaInner h3 { font-size: 1.3rem; }
.contentareaInner h4 { font-size: 1.15rem; }
.contentareaInner h5, .contentareaInner h6 { font-size: 1rem; }
.contentareaInner .introduction { font-size: 1.05em; margin: 12px 0; }
.contentareaInner .body { color: #fff; }

/* HTML from the old editor: never wider than the screen. */
.body img { max-width: 100%; height: auto; }
.body iframe { max-width: 100%; }
.body table { max-width: 100%; }
.clear { clear: both; }

img.productimage { border: 2px solid var(--em-dark); margin: 0 6px 8px 0; }
/* Vector drawings keep their own aspect ratio inside the 267x200 white box. */
.productimage-vector img.productimage { object-fit: contain; background: #fff; padding: 4px; }
.gslide-image img[src$=".svg"] { background: #fff; }

/* Specification tables float next to the drawings on wide screens and
   scroll horizontally on narrow ones. */
table.specifications {
    background: var(--em-panel-light);
    width: 58%;
    float: right;
    margin: 0 0 18px 12px;
    border-color: var(--em-dark);
    border-style: solid;
    border-width: 2px 1px 1px 2px;
    border-collapse: collapse;
}
table.specifications th, table.specifications td {
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid var(--em-dark);
    border-bottom: 1px solid var(--em-dark);
    padding: 1px 4px;
}
table.specifications th { font-weight: 700; }
table.specifications td { color: #000; background: #a39481; font-size: .9em; }
table.specifications tr:nth-child(2n) td, table.specifications tr.even td { background: #ccb9a1; }
/* Phones: specification tables and product images use the full content width
   (!important beats the inline width/align attributes from the old editor). */
@media (max-width: 767.98px) {
    table.specifications { float: none !important; width: 100% !important; margin: 0 0 18px; }
    .body table:not(.specifications) { display: block; overflow-x: auto; }
    .body a.glightbox { display: block; }
    img.productimage { display: block; width: 100%; height: auto; margin: 0 0 12px; }
}

/* Category listing tiles */
ul.articlelist { list-style: none; padding: 0; margin-top: 0; }
ul.articlelist a { display: block; text-align: center; font-size: 1.1em; }
ul.articlelist img { display: block; margin: 0 auto 6px; border: 2px solid var(--em-dark); }

/* --- Left column: language selector + contact block ---------------------- */
.leftmenu { background: var(--em-dark); }
.leftmenu .languageselect { text-align: center; line-height: 28px; color: var(--em-muted); }
.leftmenu .partners { background: var(--em-panel-light); color: var(--em-text); padding: 24px 18px; }
.leftmenu h2 { color: var(--em-orange); font-size: 1.75rem; margin: 0 0 .5em; }
.leftmenu h3 { color: #fff; font-size: 1.15rem; line-height: 1.5; }
.leftmenu p { margin: 0; }
.leftmenu ul { margin: 0; padding: 0; }
.leftmenu ul li { list-style: none; margin: 0 0 12px; }
.leftmenu a { font-weight: 700; }
.leftmenu img { max-width: 100%; height: auto; }

/* --- Footer -------------------------------------------------------------- */
.footer {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: 10px;
    background: var(--em-grad-footer);
    color: var(--em-muted);
    margin-bottom: 20px;
    padding: 14px 16px;
    text-align: center;
}
.footer-logo img { display: block; width: auto; height: 36px; }
.footer .nav-link { color: var(--em-accent); padding: 0 10px; line-height: 18px; border-right: 1px solid var(--em-border); }
.footer .nav-item:last-child .nav-link { border-right: 0; }
.footer .copyright { font-size: .875rem; white-space: nowrap; }
/* Wide screens: logo left, menu centred, copyright right on one row. */
@media (min-width: 1200px) {
    .footer { grid-template-columns: 1fr auto 1fr; padding: 12px 24px; }
    .footer-logo { justify-self: start; }
    .footer .copyright { justify-self: end; }
}

/* --- Lightbox ------------------------------------------------------------ */
.glightbox-clean .gslide-description { background: var(--em-panel); }
.glightbox-clean .gslide-title { color: var(--em-text); font-family: var(--bs-body-font-family); margin: 0; }

@media print {
    .szechenyi-plusz, .topmenu, .header, .productmenu, .footer { display: none !important; }
    body { background: #fff; color: #000; }
    .contentareaInner, .contentareaInner .body, .contentareaInner h1 { color: #000; background: #fff; }
}