:root{
  /* Alap stílusok és színváltozók
     A legtöbb szín CSS-változóként van definiálva a könnyű/sötét témaváltás
     támogatása miatt. A body-n alkalmazott .dark-mode osztály felülírja
     ezeket a változókat ahol szükséges.
  */
  --bg-color: #f0f8ff;
  --text-color: #003366;
  --card-bg: #ffffff;
  --nav-bg: rgba(0, 51, 102, 0.95);
  --accent-color: #003366;
  --primary-color: #0066cc;
  --button-text: #ffffff;
  --button-bg: #0066cc;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html{ scroll-behavior: smooth; }

/* Accessibility utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Responsive tokens: small collection of variables to tune spacing and breakpoints */
:root{
  --bp-sm: 600px;
  --bp-md: 900px;
  --container-padding: 80px;
  --container-padding-mobile: 20px;
}
/* Ensure anchored sections account for the sticky nav height so smooth scroll
   lands the visible content below the nav. Adjust the value if your nav is
   taller on some pages. */
section[id], .container[id], [role="main"] > [id] {
  scroll-margin-top: 84px;
}
body{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
}/* Világos mód: ikonok legyenek sötétek */
body:not(.dark-mode) .service i, body:not(.dark-mode) .info-card i, body:not(.dark-mode) .accordion-content i{
    color: var(--text-color);
}body:not(.dark-mode) footer{
    color: white;
}body:not(.dark-mode) footer .legal-links a{
    color: white !important;
}body:not(.dark-mode) footer .legal-links a:hover{
    color: #cccccc !important;
}body.dark-mode{
    /* Sötét mód változók */
    --bg-color: #0a192f;
    --text-color: #f0f8ff;
    --card-bg: #112240;
    --nav-bg: rgba(1, 22, 39, 0.95);
    --accent-color: #8892b0;
    --primary-color: #028090;
    --button-bg: #028090;
    --button-text: #ffffff;
}header{
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}header picture, header picture img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}header .header-overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0,51,102,0.9), rgba(0,102,204,0.8));
  z-index: 1;
}
header h1, header .hamburger, header .site-title{
  position: relative;
  z-index: 2;
  color: white;
}

/* SEO: header brand and post title parity - separate rules (no nesting) */
header .site-title{
  display: block;
  position: relative;
  z-index: 2; /* above overlay */
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.post-header h1,
.post-header h2,
header .site-title{
  color: var(--text-color);
  font-weight: 600;
  font-size: 2.5em;
  position: relative;
  text-align: center;
  margin: .25rem 0 1.5rem 0;
  line-height: 1.2;
}
@media (max-width: 600px){
  .post-header h1,
  header .site-title,
  .post-header h2 {
    font-size: 2em;
  }
}

/* ==============================
   Heading normalization (override)
   Ensure section titles render consistently across the site.
   Scoped and low-risk: placed at the end so it overrides prior rules.
   ============================== */
.container h2,
.container h1,
.latest-posts h2,
.cta h2 {
  font-size: 2.5em;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  text-align: center;
  position: relative;
  color: var(--text-color);
}
.container h2::after,
.cta h2::after {
  content: '';
  display: block;
  margin: 0.6rem auto 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  border-radius: 3px;
}

/* Homepage latest-posts: small spacing for CTA area */
.latest-posts .post-card p{ margin-top:12px; }

/* 3) Hero image spacing/fit */
.post-image-detail{
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  margin: 0 0 1rem 0;
}/* 4) Share label alignment — see consolidated rules below */

/* === Header brand typographic parity (light theme safe) === */
header .site-title {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 2.5em;
  line-height: 1.2;
  margin: 0;
  color: inherit; /* inherits from header rules; color already handled by existing theme styles */
}

:root:not([data-theme="dark"]) header .site-title {
  /* If light theme computes different color, ensure it follows the same var as headings */
  color: var(--text-color);
}

/* === Force header brand to white in all themes === */
/* Navigáció */
        nav{
            background: var(--nav-bg);
            backdrop-filter: blur(10px);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }nav ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
        }nav ul li{
            margin: 0 20px;
        }nav ul li a{
            color: var(--bg-color);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            padding: 5px 0;
        }nav ul li a::after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
    background: white;
            transition: width 0.3s ease;
        }nav ul li a:hover::after{
            width: 100%;
        }/* CĂ­mek */
        h1, h2, h3{
            color: var(--text-color);
        }h2{
            font-size: 2.5em;
            font-weight: 600;
            margin-bottom: 1.5em;
            position: relative;
            text-align: center;
            letter-spacing: 0.015em;
        }h2::after{
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: #003366;
        }/* Konténer */
        .container{
            max-width: 1200px;
            margin: 0 auto;
            padding: 80px 20px 40px 20px;
            scroll-margin-top: 70px;
}#bemutatkozas{
    background-color: var(--card-bg);
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,51,0.1);
    padding: 25px;
    transition: all 0.3s ease;
    transform: scale(1);
    margin-bottom: 30px;
}#bemutatkozas p{
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 15px;
}#bemutatkozas strong{
    color: var(--text-color);
    font-weight: 600;
}#karrier{
    background-color: var(--card-bg);
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,51,0.1);
    padding: 25px;
    transition: all 0.3s ease;
    transform: scale(1);
    margin-bottom: 30px;
}#karrier{
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 15px;
}#karrier strong{
    color: var(--text-color);
    font-weight: 600;
}/* Szolgáltatások */
        .services{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }

        .service{
            background-color: var(--card-bg);
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(0,0,51,0.06), 0 8px 24px rgba(0,0,51,0.04);
            padding: 25px;
            overflow: visible;
        }

        /* Ensure services and team cards are non-interactive visually */
        .service, .team-member{
          will-change: transform, box-shadow;
          cursor: default;
        }

        .service:focus-within, .service:focus, .service:active,
        .team-member:focus-within, .team-member:focus, .team-member:active{
          transform: none;
          box-shadow: 0 4px 6px rgba(0,0,51,0.1);
          outline: none;
          z-index: auto;
        }

        .team-member{
          width: 300px;
          text-align: center;
          margin: 20px;
          padding: 25px;
          background: white;
          border-radius: 15px;
          box-shadow: 0 4px 6px rgba(0,0,51,0.1);
          transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .team-member:hover{
          /* keep the base shadow on hover (no lift or pointer) so the card doesn't 'vanish' visually */
          transform: none;
          box-shadow: 0 4px 6px rgba(0,0,51,0.10);
          border: none;
        }

        .service img{
            width: 100%;
            aspect-ratio: 16/9;
            object-fit: cover;
            border-radius: 10px;
        }
        .service a.service-link{
            color: var(--primary-color);
        }
/* Csapattagok */
    .team-members{
              display: flex;
              justify-content: space-around;
              flex-wrap: wrap;
              margin: 40px 0;
          }

          .team-member{
              width: 300px;
              text-align: center;
              margin: 20px;
              padding: 25px;
              /* Alapértelmezésben világos téma: kártya háttere fehér. */
              background: white;
              border-radius: 15px;
              box-shadow: 0 4px 6px rgba(0,0,51,0.1);
              transition: none;
              display: flex;
              flex-direction: column;
              -webkit-user-select: text;
              user-select: text;
          }

          /* Ensure hovering advisors does not remove the base shadow or add lift; keep visual stable */
          .team-member:hover{
            transform: none !important;
            box-shadow: 0 4px 6px rgba(0,0,51,0.1) !important;
            border: none !important;
          }

          .team-member img{
            /* Force a consistent aspect ratio and visual size for team photos */
            width: 100%;
            max-width: 250px; /* team photo width */
            aspect-ratio: 5 / 6; /* 250x300 -> 5:6 */
            height: auto; /* height computed from width+aspect-ratio */
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 20px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        /* Ensure team cards align to the top so images of varying heights don't shift the layout */
        .team-members{
            align-items: stretch;
        }

        /* On very small screens scale the images down while keeping the same aspect ratio */
        @media (max-width: 420px){
          .team-member img{ max-width: 160px; }
        }

.motto{
            font-style: italic;
            color: var(--text-color);
            margin-top: auto;
            font-size: 0.9em;
            border-top: 1px solid var(--accent-color);
            padding-top: 15px;
        }
.team-member > p:not(.motto){
            flex: 1;
        }/* CTA szekciĂł */
.cta{
  position: relative;
  text-align: center;
  padding: 80px 20px;
  overflow: hidden;
}#kapcsolat{
  background-color: var(--card-bg);
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0,0,51,0.1);
  padding: 25px;
  transition: all 0.3s ease;
  transform: scale(1);
  margin-bottom: 30px;
}.form-wrapper.centered{ text-align:center; padding: 1.5rem 0; }.form-wrapper.centered .button{ display:inline-block; font-size:1.125rem; padding:.9rem 1.5rem; }.form-note{ margin-top:.5rem; font-size:.95rem; opacity:.8; }/*
 * Animáció: elemek megjelenése görgetéskor
 * A .fade-in osztályhoz alapértelmezett áttetszőség és eltolás tartozik, * míg az .appear osztály aktiválásakor a látványosság elhagyja ezeket a stílusokat.
 */
.fade-in{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}.fade-in.appear{
    opacity: 1;
    transform: translateY(0);
}

/* Section intro text styling */
.section-intro {
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto 3rem;
    color: var(--text-color);
    opacity: 0.9;
}

/* Process steps styling */
.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 28px;
    margin-top: 2rem;
    align-items: stretch;
    position: relative;
}

.process-step:nth-child(4) {
    grid-column: 2 / 3;
    border: 2px solid var(--primary-color);
    position: relative;
}

.process-step:nth-child(4)::after {
    content: "EXTRA";
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--primary-color);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.process-step {
    background-color: var(--card-bg);
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 51, 102, 0.1);
    padding: 30px 25px;
    padding-top: 40px;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
}

/* Horizontal arrow between steps 1→2 and 2→3 */
.process-step:nth-child(1)::after,
.process-step:nth-child(2)::after{
    content: '→';
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--primary-color);
    opacity: 0.5;
    z-index: 2;
}

/* Down arrow from row 1 to the EXTRA step */
.process-step:nth-child(2)::before{
    content: '↓';
    position: absolute;
    bottom: -38px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4rem;
    color: var(--primary-color);
    opacity: 0.5;
    z-index: 2;
}

.step-number {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
    z-index: 1;
}

.step-icon {
    margin: 20px 0 15px;
    flex-shrink: 0;
}

.step-icon i {
    font-size: 3rem;
    color: var(--primary-color);
}

.process-step h3 {
    margin: 15px 0 20px;
    font-size: 1.5rem;
    color: var(--text-color);
    flex-shrink: 0;
}

.step-list {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex: 1;
}

.step-list li {
    padding: 8px 0 8px 30px;
    position: relative;
    line-height: 1.6;
    color: var(--text-color);
}

.step-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.2rem;
}

.step-description {
    text-align: left;
    margin-top: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 51, 102, 0.1);
    line-height: 1.7;
    color: var(--text-color);
    opacity: 0.9;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Dark mode support for new elements */
[data-theme="dark"] .section-intro,
[data-theme="dark"] .step-description,
[data-theme="dark"] .step-list li {
    color: var(--text-color);
}

[data-theme="dark"] .step-icon i {
    color: var(--primary-color);
}

[data-theme="dark"] .step-list li:before {
    color: var(--primary-color);
}

/* Responsive styles for process steps */
@media (max-width: 968px) {
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 28px;
    }
    .process-step:nth-child(2)::after{ display: none; }
    .process-step:nth-child(2)::before{ display: none; }
    .process-step:nth-child(4) {
        grid-column: 1 / -1;
        max-width: 480px;
        margin: 0 auto;
    }
    .section-intro {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .process-steps {
        grid-template-columns: 1fr;
        gap: 44px;
        margin-bottom: 40px;
    }
    .process-step:nth-child(1)::after,
    .process-step:nth-child(2)::after,
    .process-step:nth-child(2)::before{ display: none; }
    .process-step:nth-child(4) {
        grid-column: auto;
        max-width: none;
    }
}

/* Sötét mód kapcsoló gomb stílusa */
.theme-toggle{
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    background: rgba(0,51,102,0.7);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    width: 48px;
    height: 48px;
    font-size: 1.1em;
    cursor: pointer;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover{
    transform: scale(1.08);
    background: rgba(0,51,102,0.85);
}
.theme-toggle .fa-sun{ display: none; }
.dark-mode .theme-toggle{
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
}
.dark-mode .theme-toggle:hover{
    background: rgba(255,255,255,0.2);
}
.dark-mode .theme-toggle .fa-moon{ display: none; }
.dark-mode .theme-toggle .fa-sun{ display: inline; }/* Megosztás gombok blogposzt oldalon */
.share-buttons{
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}.share-buttons a{
    text-decoration: none;
    color: var(--accent-color);
    font-size: 1.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--accent-color);
    transition: background-color 0.3s ease;
}.share-buttons a:hover{
    background-color: var(--accent-color);
    color: var(--bg-color);
}/* ----- Social feed section styles ----- */
/* This section displays embedded Facebook and Instagram feeds side by side on
   larger screens and stacked on smaller devices. Colours adapt via CSS variables
   defined on :root and .dark-mode. */
.social-feed{
    padding: 3rem 1rem;
    background-color: var(--card-bg);
    text-align: center;
}.social-feed h2{
    margin-bottom: 1rem;
    color: var(--text-color);
}.feed-container{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}.feed-container > div{
    flex: 1 1 45%;
    min-width: 280px;
    /* Ne állítsuk be a display-t itt, hogy az egyes alosztályok
     * (pl. .insta-feed) megőrizhessék saját layoutját (grid). */
}.feed-container iframe{
    width: 100%;
    max-width: 500px;
    height: 400px;
    margin: 0 auto;
    display: block;
}/* A Facebook beágyazás elhelyezéséhez rugalmas dobozt használunk, * így a plugin a rendelkezésre álló helyen középre igazodik. */
.fb-feed{
    width:100%;
}/* Style for Instagram placeholder when embed is not available */
.instagram-placeholder{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 2rem;
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}.instagram-placeholder a{
    font-size: 1.1rem;
    color: var(--accent-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}.instagram-placeholder a:hover{
    text-decoration: underline;
}/* --------------------------------------------------------------
 * További stílusok és sötét mód felülírások
 *
 * Az alábbi szakasz olyan stílusokat definiál, amelyek a korábbi
 * fejlesztések során kimaradt elemeket harmonizálják a sötét témával, * illetve statikus Instagram-gridet biztosítanak, ha az embed nem
 * elérhető. Ezek a szabályok nem befolyásolják a világos témát, * mivel a .dark-mode osztály használatával célzottan csak sötét
 * módban érvényesülnek.
 */

/* Statikus Instagram feed rácsos elrendezéssel. A szülő konténeren
 * belül a képek automatikusan törnek sorba és azonos szélességet
 * kapnak. */
.insta-feed{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 0 10px;
    max-width: 800px;
    margin: 0 auto;
}.insta-feed img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    /* Finom árnyék a kártyákhoz hasonlóan */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}/* Sötét mód felülírás a csapattag kártyákhoz. Amikor a felhasználó
 * sötét témát választ, a kártyák háttérszíne és szövegszíne
 * alkalmazkodik a sötétebb árnyalatokhoz. */
.dark-mode .service{
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.06);
}
.dark-mode .team-member{
    background: var(--card-bg);
    color: var(--text-color);
}.dark-mode .team-member h3, .dark-mode .team-member p{
    color: var(--text-color);
}/* Sötét mód felülírás az értékelések (testimonial) kártyáinál, * modaloknál és információs dobozoknál. Ezek a blokkok eredetileg
 * fehér háttérrel rendelkeznek, ami sötét témában túl világos. */
.dark-mode .reviews-carousel, .dark-mode .info-card, .dark-mode .modal-content, .dark-mode .toc, .dark-mode .accordion-header, .dark-mode .accordion-content, .dark-mode .accordion-item{
    background-color: var(--card-bg);
    color: var(--text-color);
}/* A sötét módú értékelések határvonalát hangsúlyozzuk az akcentus
 * színnel, így jobban elkülönülnek a háttértől. */
.dark-mode .accordion-item{
    border-color: var(--accent-color);
}/* A hivatkozások és kiemelések a sötét módban az akcentus
 * szĂ­nnel jelenjenek meg, ezzel biztosĂ­tva a kontrasztot. */
.dark-mode .toc a, .dark-mode .accordion-header, .dark-mode .reviewer{
    color: var(--accent-color);
}/* A cikk navigációs gombok (carousel gombok) sötét témában az
 * akcentus színnel és világos szöveggel jelenjenek meg. */
.dark-mode .carousel-button{
    background-color: var(--accent-color);
    color: var(--bg-color);
}/* Menü hivatkozások sötét módban: a szöveg színét és az aláhúzást
 * biztosító csíkot az általános szövegszínre állítjuk, hogy
 * elég kontraszt legyen a sötét háttéren. */
.dark-mode nav ul li a{
    color: var(--text-color);
}.dark-mode nav ul li a::after{
    background: var(--text-color);
}/* Az ikonok színe az információs kártyákban és az adatvédelmi
 * tájékoztató szakaszokban sötét témában alkalmazkodjon az
 * akcentusszĂ­nhez. */
.dark-mode .accordion-content i, .dark-mode .info-card i{
    color: var(--accent-color);
}/*
 * Dark mode overrides for contact forms and select elements.
 * Ensure the background, text and border colours harmonise with the dark theme.
 */
.dark-mode .contact-form input, .dark-mode .contact-form textarea, .dark-mode .contact-form select{
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--accent-color);
}.dark-mode .contact-form select option{
    background-color: var(--card-bg);
    color: var(--text-color);
}/* Cookie sáv finom módosítása: teljes szélességű alsó sáv. A sáv a képernyő alján fut végig, * és a méretét, pozícióját a cookies.css határozza meg. */
.cookie-widget{
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto;
    max-width: none;
    /* Inherit width from cookies.css (például 90%); ne kényszerítsük teljes szélességre itt */
    width: auto;
    border-radius: 0;
}/* Fejléc mérete a cookie sávban: az alapértelmezett értékre állítjuk vissza */
.cookie-widget .widget-header{
    font-size: 1rem;
}/* A gombok színe a cookie sávban: visszaállítjuk az eredeti háttér- és szövegszínt.
 * A padding és méret a cookies.css-ben definiált értékeket örökli. */
.cookie-widget .widget-actions button{
    background: var(--button-bg);
    color: var(--button-text);
}.cta picture, .cta picture img, .cta-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}.cta-overlay{
  background: linear-gradient(45deg, rgba(0,51,102,0.9), rgba(0,102,204,0.8));
  z-index: 1;
}.cta-content h2, .cta-content p{
  color: white;
  z-index: 2;
  position: relative;
}.cta-content{
  position: relative;
  z-index: 2;
}.cta-content .button{
  position: relative;
  z-index: 2;
  color: white;
}/* Gombok */
        .button{
            display: inline-block;
            background: var(--button-bg);
            color: var(--button-text);
            padding: 15px 30px;
            text-decoration: none;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 0.01em;
            box-shadow: 0 4px 15px rgba(0,51,102,0.15);
            transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
            border: none;
            cursor: pointer;
        }.button:hover{
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,51,102,0.25);
            filter: brightness(1.1);
        }.button:active{
            transform: scale(0.97);
            box-shadow: 0 2px 8px rgba(0,51,102,0.2);
        }/* Lábléc */
        footer{
            background-color: var(--nav-bg);
            color: var(--text-color);
            text-align: center;
            padding: 40px 20px;
        }.social-icons{
            margin: 20px 0;
        }.social-icons a{
            color: var(--text-color);
            margin: 0 10px;
            font-size: 24px;
            transition: transform 0.3s ease;
        }.social-icons a:hover{
            transform: scale(1.1);
        }.social-icons a:hover{
            transform: translateY(-3px);
        }/* Scroll to top gomb */
.scroll-top{
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0,51,102,0.7);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.2s ease, background 0.2s ease;
    z-index: 20000;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 1.1em;
}
.scroll-top.visible{
    opacity: 1;
}.scroll-top:hover{
    transform: translateY(-3px) scale(1.05);
    background: rgba(0,51,102,0.85);
}
.dark-mode .scroll-top{
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
}
.dark-mode .scroll-top:hover{
    background: rgba(255,255,255,0.2);
}/* Kapcsolat űrlap */
		.contact-form select{
			width: 100%;
			padding: 10px;
			margin: 10px 0;
			border: 1px solid #ddd;
			border-radius: 5px;
			font-family: 'Poppins', sans-serif;
			background-color: white;
			color: #666;
		}.contact-form select:focus{
			outline: none;
			border-color: #003366;
		}.contact-form input, .contact-form textarea{
			width: 100%;
			padding: 10px;
			margin: 10px 0;
			border: 1px solid #ddd;
			border-radius: 5px;
			font-family: 'Poppins', sans-serif;
		}.contact-form textarea{
			height: 150px;
		}/* ReszponzĂ­v design */
        @media (max-width: 768px){
            .services {
                grid-template-columns: 1fr;
            }.team-member{
                width: 100%;
                max-width: 300px;
            }nav ul{
                flex-direction: column;
                align-items: center;
            }nav ul li{
                margin: 10px 0;
            }
}

			/* Jogi linkek */
.modal{
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}.modal-content{
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}.toc{
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}.toc ul{
  list-style-type: none;
  padding-left: 0;
}.toc a{
  color: #333;
  text-decoration: none;
}.accordion-item{
  border: 1px solid #e0e0e0;
  margin-bottom: 10px;
  border-radius: 5px;
}.accordion-header{
  background-color: #f8f9fa;
  padding: 10px 15px;
  cursor: pointer;
  margin: 0;
}.accordion-content{
  padding: 15px;
  display: none;
}.info-card{
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}.last-updated{
  font-style: italic;
  text-align: right;
  margin-top: 20px;
}.close{
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}.close:focus{
  color: black;
  text-decoration: none;
  cursor: pointer;
}footer .legal-links a{
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}footer .legal-links a:hover{
  color: #cccccc;
  text-decoration: underline;
}
/* Hamburger / mobile nav: accessible slide-in menu + overlay */
.hamburger{
  display: none; /* hidden on desktop */
}
@media (max-width: 768px){
  .hamburger {
    display: block;
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    font-size: 1.35rem;
    background-color: #003366;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 10px;
    z-index: 1205;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  }

  .mobile-nav-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease;
    pointer-events: none;
  }
  .mobile-nav-overlay.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .compact-nav{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px; /* slightly narrower when open */
    max-width: 86%;
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(.2,.9,.2,1);
    background-color: #003366;
    padding: 64px 16px 24px 16px;
    z-index: 1205;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .compact-nav.open{
    transform: translateX(0);
  }

  .compact-nav ul{
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .compact-nav li{ margin: 0; }
  .compact-nav a{
    color: white;
    text-decoration: none;
    font-size: 1.05rem;
    padding: 12px 8px;
    display: block;
    border-radius: 6px;
  }
  .compact-nav a:focus,
  .compact-nav a:hover{
    background: rgba(255,255,255,0.06);
    outline: none;
  }
  .compact-nav a:active{ transform: none; }
}

/* Safe global responsive image rule */
img{ max-width:100%; height:auto; display:block; }
.accordion-content i, .info-card i{
    color: #003366;
}/* Világos témában fehérek a lábléc ikonok */
body:not(.dark-mode) footer .social-icons a i{
  color: white !important;
}
body:not(.dark-mode) footer .social-icons a:hover i{
  color: #cccccc !important;
}

/* === OVERRIDE: Cikkoldali H1 stílus egyezzen a korábbi H2-vel === */
.post-header .site-title{
  color: var(--text-color);
  font-weight: 600;
  font-size: 2.5em;
  position: relative;
  text-align: center;
  margin: 0.25rem 0 1.5rem 0;
  line-height: 1.2;
}/* Ugyanaz a dĂ­szcsĂ­k a cĂ­m alatt
*/
@media (max-width: 600px){
  .post-header h1, header .site-title,
  .post-header h2 {
    font-size: 2em;
  }
}


/* Share buttons (consolidated — single source of truth) */


/* === Header brand typographic parity (light theme safe) === */
header .site-title {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 2.5em;
  line-height: 1.2;
  margin: 0;
  color: inherit; /* inherits from header rules; color already handled by existing theme styles */
}

:root:not([data-theme="dark"]) header .site-title {
  /* If light theme computes different color, ensure it follows the same var as headings */
  color: var(--text-color);
}



/* === Force header brand to white in all themes === */
/* header brand parity - no dangling selectors */
/* BLOG: Megosztás gombok fix – ne legyen 40x40-re kényszerítve, és szépen törjön */
.post-wrapper .share-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 18px;
}
.post-wrapper .share-bottom a {
  width: auto !important;
  height: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .4rem .8rem;
  border: 1px solid var(--accent-color, #1e3a8a);
  border-radius: 20px;
  text-decoration: none;
  color: var(--accent-color, #1e3a8a);
  background: var(--card-bg, #fff);
  line-height: 1;
}
.post-wrapper .share-bottom a:hover {
  background: var(--accent-color, #1e3a8a);
  color: #fff;
}
.post-wrapper .share-bottom i {
  margin-right: 2px;
}


/* Ugyanaz a díszcsík a cím alatt, mint a H2-nél */
.share-bottom {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}
.share-bottom .share-label { font-weight: 600; margin-right: 4px; }

/* Alapértelmezett: szöveges „pill” stílus */
.share-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .4rem .8rem;
  border: 1px solid var(--accent-color, #1e3a8a);
  color: var(--accent-color, #1e3a8a);
  text-decoration: none;
  border-radius: 20px;
  width: auto;
  height: auto;
  line-height: 1;
}
.share-bottom a:hover {
  background: var(--accent-color, #1e3a8a);
  color: #fff;
}

/* Opcionális ikon-only használat (pl. fejléc): tedd a szülőre .share-compact-ot */
.share-compact .share-bottom a {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  gap: 0;
}



/* LAST-RESORT: biztos felülírás a cikkoldalakon */
.post-header + .share-bottom a,
.post-wrapper .share-bottom a {
  width: auto !important;
  height: auto !important;
  padding: .4rem .8rem !important;
  gap: 8px !important;
  justify-content: flex-start !important;
}



/* SEO/CSS fix: the header brand must not have underline decoration */
header .site-title { text-decoration: none; }
header .site-title::after { content: none !important; display: none !important; }

/* Ensure the header/site-title anchor does not use browser default link styling
   (visited/unused purple underline). Force inheritance and remove decoration. */
header .site-title a,
header .site-title a:link,
header .site-title a:visited {
  color: inherit !important;
  text-decoration: none !important;
}

/* Ensure compact mobile nav links are always visible and not using default colors */
nav.compact-nav a,
nav.compact-nav a:link,
nav.compact-nav a:visited {
  color: white !important;
  text-decoration: none !important;
}


/* Post title/subtitle underline (article only) */
.post-header h1::after,
.post-header h2::after,
.post-header .site-title::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 60px;
  height: 3px;
  background: #003366;
}



/* === Blog layout & underline fixes === */

/* Szellősebb szöveg a cikkekben */
.post-content {
  line-height: 1.6;
  font-size: 1.05rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}
.post-content p {
  margin-bottom: 1.2em;
}

/* BlogcĂ­m alatti dĂ­szcsĂ­k fix */
.post-header h1 {
  margin-bottom: 2rem;
  position: relative;
}
.post-header h1::after {
  bottom: -14px;
}
/* Blogcikkek H2–H3 egységes hierarchia */
.post-content h2 {
  font-size: 1.25rem;      /* picit nagyobb mint H3 */
  font-weight: 600;        /* félkövér */
  margin: 2rem 0 1rem;     /* térköz */
  text-align: left;        /* balra igazĂ­tva */
  position: static;        /* ne örököljön csíkot */
}

.post-content h2::after {
  content: none !important;  /* aláhúzás tiltása */
}

.post-content h3 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 1.5rem 0 0.75rem;
  text-align: left;
}
.post-wrapper { max-width: 980px; margin: 0 auto; padding: 24px 16px; }
.post-header h1 { color: var(--text-color); margin-bottom: .25rem; }
.post-date { color: var(--text-color); opacity: .8; font-size: .9rem; margin-bottom: 1rem; }
.post-image-detail { width: 100%; max-height: 350px; border-radius: 8px; margin-bottom: 1rem; object-fit: cover; }
.post-content { color: var(--text-color); line-height: 1.7; margin-top: 1rem; }

.related { margin-top: 2rem; background: var(--card-bg); border-radius: 8px; padding: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.related h3 { margin-top: 0; color: var(--text-color); }
.related-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; }
.related-item { display:flex; gap:10px; align-items:center; text-decoration:none; color: var(--text-color); background: var(--card-bg); border:1px solid #e8e8ef; border-radius:10px; padding:8px; }
.related-item:hover { border-color: var(--accent-color); }
.related-item img { width:64px; height:64px; object-fit:cover; border-radius:8px; flex:0 0 64px; }
.related-item span { font-weight:600; }

.share-bottom { margin-top: 18px; display:flex; gap:10px; flex-wrap:wrap; }
.share-bottom a { display:inline-flex; align-items:center; gap:6px; text-decoration:none; border:1px solid var(--accent-color);
  color:var(--accent-color); background: var(--card-bg); padding:.4rem .8rem; border-radius:20px; font-weight:500; }
.share-bottom a:hover { background:var(--accent-color); color:#fff; }
.share-bottom .fa-x-twitter { font-weight:900; } /* FA 6 X icon */
.back-to-blog { display:inline-block; margin-top: 1.2rem; color: var(--accent-color); }

/* ============================================
   INLINE STYLES MOVED TO STYLESHEET
   ============================================ */

/* Header site-title always white (previously inline in adatkezeles.html & impresszum.html) */
header .site-title {
  color: #ffffff !important;
}

/* Blog intro section */
.blog-intro {
  text-align: center;
  margin-top: 40px;
}

/* Blog filters section */
.blog-filters {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Blog search input */
#blog-search {
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  width: 100%;
  max-width: 500px;
}

/* Korfa card styling */
.korfa-card {
  border: 1px solid #0C3B5E;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 12px;
}

/* Korfa iframe */
.korfa-card iframe {
  width: 100%;
  min-height: 70%;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
}

/* Content images in blog posts */
.content-image {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 12px 0;
}

/* Special styling for pension chart image */
img[alt*="nyugdíj"],
img[alt*="chart"] {
  display: block;
  margin: 0 auto;
  max-width: 900px;
  border-radius: 8px;
  height: auto;
}

/* Homepage hero: match the contact/card style so it aligns with other sections */
#start{
  /* match the contact block spacing exactly; add extra top space so hero isn't too close to the sticky nav */
  margin-top: 48px;
  background-color: var(--card-bg);
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0,0,51,0.1);
  padding: 25px; /* same as #kapcsolat */
  margin-bottom: 30px;
}
@media (max-width: 768px){
  /* reduce the top margin on small screens so content stays visible above the fold */
  #start{ margin-top: 20px; }
  /* Mobile: smaller sticky nav height, reduce scroll offset */
  section[id], .container[id], [role="main"] > [id] { scroll-margin-top: 64px; }
}
#start h2{
  text-align: center;
  /* match the larger gap used by #kapcsolat */
  margin-bottom: 1.5rem;
  color: var(--text-color);
  position: relative;
}
#start h2::after{
  /* place the decorative stripe as a normal block after the H2 so it doesn't overlap following text */
  content: '';
  display: block;
  margin: 0.6rem auto 0;
  width: 60px;
  height: 4px;
  background: var(--accent-color, #003366);
}
#start p{
  color: var(--text-color);
  max-width: 720px;
  margin: 0 auto 0.75rem auto;
  line-height: 1.6;
}

/* Latest posts block styles moved from inline to stylesheet */
.latest-posts .latest-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:12px;
}
@media(max-width:900px){
  .latest-posts .latest-grid{grid-template-columns:1fr}
}
.latest-posts .post-card{
  background:var(--card-bg,#fff);
  border-radius:8px;
  padding:12px;
  box-shadow:0 6px 14px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
}
.latest-posts .post-card > a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.latest-posts .post-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.latest-posts .post-card a:hover {
  text-decoration: none;
}
.latest-posts .post-card h3{margin:0.5rem 0 0.4rem}
.latest-posts .post-image{width:100%;height:160px;object-fit:cover;border-radius:6px;margin-bottom:8px}
.latest-posts .excerpt{color:var(--muted,#666);font-size:0.95rem}
.latest-posts .read-more{display:inline-block;margin-top:8px;color:var(--accent-color,#0b66c3);text-decoration:none;font-weight:600}
.latest-posts .view-all{margin-top:1rem; text-align:center}

/* Hover effect for homepage post previews to match blog list cards */
.latest-posts .post-card:hover{
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0,0,51,0.1);
}

/* Blog list page styling */
#blog-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 30px;
}
#blog-list .post-card {
  background: var(--card-bg, #fff);
  color: var(--text-color);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  margin-bottom: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
#blog-list .post-card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0,0,51,0.15);
}
#blog-list .post-card h2 {
  margin-top: 0;
  color: var(--text-color);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
#blog-list .post-card p.meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
#blog-list .post-card .excerpt {
  margin: 0.5rem 0 1rem;
  color: var(--text-color);
  opacity: 0.8;
  font-size: 0.95rem;
  line-height: 1.5;
}
#blog-list .post-card .post-image {
  width: 100%;
  max-height: 200px;
  border-radius: 8px;
  margin-bottom: 1rem;
  object-fit: cover;
  display: block;
}
#blog-list .post-card .author-avatar {
  width: 32px !important;
  height: 32px !important;
}
#blog-list .post-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  outline-offset: 3px;
}
#blog-list .post-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
#blog-list .post-card .meta,
#blog-list .post-card .excerpt,
#blog-list .post-card .category-badges {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
#blog-list .post-card-link:focus-visible {
  outline: 3px solid var(--accent-color, #1a73e8);
  border-radius: 8px;
}
/* Category badges on blog cards */
.category-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.category-badge {
  display: inline-block;
  padding: 3px 10px;
  color: white;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
/* Read more link */
#blog-list .post-card .read-more {
  display: inline-block;
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}
#blog-list .post-card .read-more:hover {
  text-decoration: underline;
  color: var(--button-bg);
}
@media (max-width: 768px) {
  #blog-list {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px auto;
  }
  #blog-list .post-card .post-image {
    max-height: 200px;
  }
}

/* Adatkezeles label alignment */
.ep-consent-row label {
  align-items: center;
  gap: 1rem;
}

/* Korfa legend swatches */
.swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Kalkulator specific inline styles - keeping these as they're functional/JS-driven */
/* These are intentionally left inline as they're dynamically controlled */



/* Share button icon colors (light/dark mode) */
.share-bottom a i {
  color: var(--accent-color);
}

body.dark-mode .share-bottom a i,
html[data-theme="dark"] .share-bottom a i {
  color: #ffffff;
}

.share-bottom a:hover i {
  color: inherit; /* inherit from hover state */
}

/* Small note text styling */
body.dark-mode .small-note,
html[data-theme="dark"] .small-note {
  color: #ffffff;
}

/* Small note text - dark mode fix */
.small-note {
  font-size: 0.9rem;
  line-height: 1.6;
}

body.dark-mode .small-note,
html[data-theme="dark"] .small-note {
  color: #f0f8ff !important;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--accent-color);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 9999;
  max-width: 300px;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Smooth scroll handled once at top; duplicate toast block removed to avoid conflicts */

/* Reading time */
.reading-time {
  font-size: 0.9rem;
  color: var(--text-secondary, #666);
  margin-bottom: 1rem;
}

body.dark-mode .reading-time,
html[data-theme="dark"] .reading-time {
  color: #aaa;
}

/* ===== 404 page specific fixes (scoped, low-risk) ===== */
.hero{
  text-align: center;
  padding: 40px 20px;
  background: transparent;
}
.hero .lead{ max-width:760px; margin: 0.5rem auto 1.25rem; color: var(--text-color); line-height:1.6 }
.hero .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:1rem }
.hero .actions .button{ min-width:180px }
.hero .actions .button.outline{ background: transparent; color: var(--accent-color); box-shadow:none; border:1px solid var(--accent-color) }

.help-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin: 36px 0 }
.help-cards .card{ background: var(--card-bg); border-radius:12px; padding:18px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); text-align:left }
.help-cards .card h2{ margin-top: 0; font-size:1.25rem }
.help-cards .card p{ margin-bottom: 0.75rem; color: var(--text-color) }
.help-cards .button.small{ padding:8px 14px; border-radius:8px }

.muted{ color: var(--muted, #666); text-align:center; margin-top: 1.5rem }

@media (max-width: 900px){
  .help-cards{ grid-template-columns: 1fr }
  .hero .actions .button{ min-width: 140px }
}

/* End 404 fixes */

/* ==========================
   Tablet-scoped minimal fix
   Lower .services / #szolgaltatasok stacking priority on tablet widths so the
   cookie banner (position:fixed, very high z-index) remains visible.
   Low-risk: only applies between 600px and 1200px, doesn't change animations
   outside that range. If you prefer removing transforms (animation change)
   we can apply that instead, but this is the least intrusive approach.
   ========================== */
@media (min-width: 600px) and (max-width: 1200px) {
  /* keep it scoped so desktop layout / animations remain untouched */
  #szolgaltatasok,
  .services {
    position: relative !important;
    z-index: 1 !important; /* ensure it's below cookie which uses a very large z-index */
    /* don't modify transforms here to avoid changing fade-in animations */
  }

  /* also ensure individual service cards don't get elevated stacking within
     this range (defensive) */
  .service {
    z-index: 1 !important;
  }
}

/* ===== Stats strip (count-up) ===== */
.stats-strip{
  background: linear-gradient(135deg, #003366 0%, #0066cc 100%);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0,51,102,0.2);
  padding: 40px 20px;
  margin-bottom: 30px;
  color: #fff;
}
.dark-mode .stats-strip{
  background: linear-gradient(135deg, #0a192f 0%, #112240 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: center;
  justify-items: center;
  text-align: center;
}
.stat{ flex:1; min-width:120px; position:relative }
.stat-number{ font-size:2.2rem; font-weight:700; color:#fff; }
.stat-label{ margin-top:6px; font-size:0.95rem; color:rgba(255,255,255,0.8); }
.stat-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto 10px;
  border-radius:50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size:1.25rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Reset FontAwesome margin inside stat icons - critical fix */
.stat-icon i,
.stat-icon .fas,
.stat-icon .far,
.stat-icon .fab {
  margin: 0 !important;
}

/* Slightly different look in dark mode so icon badges remain visible */
.dark-mode .stat-icon{ background: rgba(255,255,255,0.1); color: #fff; }

/* Vertical separators between stat columns for larger screens */
.stats-grid .stat:not(:last-child)::after{
  content: '';
  position: absolute;
  right: -12px; /* sits between columns */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}
.dark-mode .stats-grid .stat:not(:last-child)::after{ background: rgba(255,255,255,0.1); }
@media (max-width: 900px) {
  .stats-grid .stat:not(:last-child)::after { display: none; }
  .stats-grid { display: grid !important; grid-template-columns: 1fr; gap: 16px; justify-items: center; align-items: center; }
  .stat-number { font-size: 1.8rem; color: #fff; }
}

/* FAQ styling: make the FAQ sit in the same boxed card as the contact section */
#faq, .faq{
  background-color: var(--card-bg);
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0,0,51,0.1);
  padding: 20px;
  margin-bottom: 30px;
}
.faq h2{ margin-top:0 }
.faq details{ padding: 10px 0; border-top: 1px solid rgba(0,0,0,0.06); }
.faq details:first-of-type{ border-top: none; }
.faq summary{
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  outline: none;
  padding: 12px 36px 12px 14px;
  border-radius: 8px;
  transition: background var(--transition-base), color var(--transition-base);
}
.faq summary:hover{
  background: rgba(0,102,204,0.06);
}
.dark-mode .faq summary:hover{
  background: rgba(255,255,255,0.04);
}
.faq details[open] summary{ color: var(--accent-color); }
.faq details p{
  margin: 0;
  padding: 4px 14px 12px;
  color: var(--text-color);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.3s ease;
}
.faq details[open] p{
  max-height: 500px;
  opacity: 1;
  padding: 8px 14px 16px;
}

/* small chevron on the FAQ summary (right side) */
.faq summary{
  position: relative;
  padding-right: 36px;
}
.faq summary::after{
  content: '\203A';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.25s ease, color 0.25s ease;
  color: var(--muted, rgba(0,0,0,0.35));
  font-size: 1.4rem;
}
.faq details[open] summary::after{
  transform: translateY(-50%) rotate(90deg);
  color: var(--accent-color);
}

/* Ensure the inline money-compare box adapts to theme variables
   and has sufficient contrast in both light and dark mode. Pages that
   previously hard-coded a light background (inline style) will now
   inherit the theme-aware card background and text color. */
.money-compare{
  margin: 12px 0;
  padding: 10px;
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
}
body.dark-mode .money-compare{
  /* slightly different border in dark mode so the box reads as a card */
  border-color: rgba(255,255,255,0.06);
  background: var(--card-bg);
  color: var(--text-color);
}

/* -------------------------
   Responsive overrides
   Added to improve stats/hero rendering on small screens
   ------------------------- */
@media (max-width: 900px){
  /* make stat strip stack nicely on smaller screens */
  .stats-strip{ padding: 18px; }
  .stats-grid{ display: grid !important; grid-template-columns: 1fr; gap: 16px; justify-items: center; align-items: center; }
  .stat{ min-width: auto; }
  .stat-number{ font-size: clamp(1.6rem, 6vw, 2rem) !important; }
  .stat-icon{ width: clamp(40px, 10vw, 48px); height: clamp(40px, 10vw, 48px); font-size: clamp(1rem, 3vw, 1.1rem); }
}

/* Hide hamburger only on larger desktop widths (>=1025px). Allow tablets up to 1024px
   to use the hamburger/menu system for a better mobile-like experience. */
@media (min-width: 1025px){
  .hamburger{ display: none !important; }
  .stat-number{ font-size: clamp(2rem, 2.4vw, 2.6rem); }
  .stat-icon{ width: 56px; height:56px; font-size:1.25rem; }
}

/* Tablet breakpoint: show hamburger and hide the desktop nav to avoid oversized
   desktop menu rendering on medium-width devices (tablets). */
@media (max-width: 1024px){
  .hamburger { display: block !important; position: fixed !important; top: 12px !important; left: 12px !important; z-index: 14005 !important; }
  /* Hide the desktop-centered nav links so the compact slide-in menu is used instead.
     But don't hide the UL inside the compact mobile nav itself. */
  nav:not(.compact-nav) ul { display: none; }
  /* Make the compact nav slightly sleeker on tablets */
  .compact-nav { width: clamp(220px, 72vw, 260px); max-width: 78%; padding: 48px 12px 20px 12px; }
}

/* Ensure the compact mobile nav behaviours are active up to tablet widths
   (so the slide-in menu and overlay work reliably on devices <=1024px). */
@media (max-width: 1024px) {
  .mobile-nav-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease;
    pointer-events: none;
  }
  .mobile-nav-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; }

  .compact-nav{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: clamp(220px, 72vw, 260px);
    max-width: 86%;
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(.2,.9,.2,1);
    /* Use the theme nav background variable for consistent branding. */
    background-color: var(--nav-bg, #003366) !important;
    padding: 56px 12px 20px 12px;
    z-index: 1205;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .compact-nav.open{ transform: translateX(0); }
  .compact-nav ul{ flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; }
  .compact-nav a{ color: white !important; text-decoration: none !important; font-size: 1.05rem; padding: 12px 8px; display:block; border-radius:6px; }
}

/* Phone-specific: make menu slimmer and denser so it doesn't cover whole screen */
@media (max-width: 420px){
  .compact-nav{ width: clamp(180px, 70vw, 220px); padding: 44px 10px 18px 10px; }
  .compact-nav a{ font-size: 0.95rem; padding: 10px 8px; }
  .hamburger{ top: 10px !important; left: 10px !important; padding: 6px 8px !important; font-size: 1.05rem !important; }
  /* Slightly stronger overlay on tiny screens so contrast feels consistent */
  .mobile-nav-overlay { background: rgba(0,0,0,0.55); }
}

/* Tablet tweak: reduce hamburger size a bit and ensure color matches nav */
@media (min-width: 601px) and (max-width: 1024px){
  .hamburger{ font-size: 1.15rem !important; padding: 7px 8px !important; }
  .hamburger, .compact-nav { background-color: var(--nav-bg, #003366) !important; }
  /* Ensure buttons on tablets keep a smooth, pill-like shape but slightly
     reduced compared to phones so they feel proportionate. */
  .button{ border-radius: 20px !important; padding: 12px 24px !important; }
}

/* ensure container uses smaller padding on small screens without touching original block */
@media (max-width: 768px){
  .container{ padding: var(--container-padding-mobile,20px) 16px 28px 16px; }
}

/* fluid scaling for stat-number and icon (safe override)
   the clamp() above avoids ultra-large or ultra-small sizes */
.stat-number{ font-weight:700; color:#fff; }
.stat-icon{ border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }

/* Header and hero responsive tweaks to ensure parity with desktop on mobile */
@media (max-width: 768px){
  header{ height: 120px; }
  header .site-title{ font-size: 1.6rem; line-height:1.1; }
  header picture, header picture img{ height: 120px; }
  .hamburger{ top: 12px !important; left: 12px !important; }
  /* make hero spacing tighter on small screens */
  .hero{ padding: 20px 12px; }
  .hero .lead{ max-width: 92%; margin-left: auto; margin-right: auto; }
  /* stats: center badges and keep labels concise */
  .stat-label{ font-size:0.95rem; }
}

@media (max-width: 420px){
  header{ height: 100px; }
  header .site-title{ font-size: 1.25rem; }
  .stat-number{ font-size: clamp(1.4rem, 7.5vw, 1.8rem) !important; }
  .stat-icon{ width: 40px; height:40px; }
}

/* Strong tablet-scoped override to ensure a body-level hamburger remains
   fixed and above any overlays or transformed ancestors. This only applies
   to tablet/phone widths so desktop header layout isn't affected. */
@media (max-width: 1024px) {
  .hamburger, .hamburger--moved, .hamburger--fallback {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 16000 !important; /* above overlays/toasts/theme controls */
    display: block !important;
    background-color: var(--nav-bg, #003366) !important;
    color: var(--button-text, #fff) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Explicitly target the body-level mobileMenuButton to ensure it's fixed
   on small phones where some pages have different header markup. This
   overrides any unexpected rules that might hide or reposition it. */
@media (max-width: 420px) {
  #mobileMenuButton {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 20000 !important;
    display: block !important;
    background-color: var(--nav-bg, #003366) !important;
    color: var(--button-text, #fff) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
  }
}

/* Related-server styles moved from blog.php inline rules */
.related-server {
  margin-top: 2rem;
}
.related-server h3 {
  margin-bottom: 0.75rem;
  color: var(--text-color);
}
.related-server .related-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.related-server .related-item {
  display: block;
  flex: 1 1 30%;
  text-decoration: none;
  padding: 8px;
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-color);
}
.related-server .related-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
}
.related-server .related-item span {
  display: block;
  font-weight: 600;
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .related-server .related-item { flex: 1 1 100%; }
}

/* ============================================
   MOBILE OPTIMIZATION - 600px BREAKPOINT
   ============================================ */

@media (max-width: 600px) {
  /* Force KPI cards to single column on phones */
  .kpi {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Stack input rows vertically */
  .row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
  }

  /* Full width inputs and buttons */
  .row input,
  .row select,
  .row button {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Input groups stack vertically */
  .input-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Reduce font sizes for better fit */
  .container h1 {
    font-size: 1.5rem !important;
  }

  .kpi .val {
    font-size: 1.2rem !important;
  }

  .kpi .muted {
    font-size: 0.85rem !important;
  }

  /* Touch targets - minimum 44px height */
  button,
  .btn,
  a.button {
    min-height: 44px !important;
    padding: 12px 16px !important;
  }

  button.primary {
    padding: 14px 20px !important;
  }

  /* Table improvements for mobile */
  .am-table {
    font-size: 0.85rem;
  }

  .am-table th,
  .am-table td {
    padding: 8px 4px !important;
  }

  /* Budget item grids - stack vertically */
  .budget-item-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* Quick preset buttons - single column on very small screens */
  .quick-presets {
    grid-template-columns: 1fr !important;
  }

  /* Rate slider rows - ensure full width */
  input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Card padding adjustment */
  .card {
    padding: 16px !important;
  }

  /* Contact form adjustments */
  .contact-form label {
    font-size: 0.9rem;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 1rem;
  }
}

/* Extra small phones - 400px breakpoint */
@media (max-width: 400px) {
  .container h1 {
    font-size: 1.3rem !important;
  }

  .kpi .val {
    font-size: 1.1rem !important;
  }

  /* Even more compact table */
  .am-table {
    font-size: 0.8rem;
  }

  .am-table th,
  .am-table td {
    padding: 6px 2px !important;
  }

  /* Compact buttons */
  button,
  .btn {
    font-size: 0.9rem;
    padding: 10px 12px !important;
  }
}

/* === EGYS�GES MEGOSZT�S GOMBOK - MINDEN OLDALON 40x40px === */
.share-bottom a {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  gap: 0 !important;
  border: 1px solid var(--accent-color, #1e3a8a);
  color: var(--accent-color, #1e3a8a);
  text-decoration: none;
}
.share-bottom a:hover {
  background: var(--accent-color, #1e3a8a) !important;
  color: #fff !important;
}

/* === BREADCRUMB NAVIGATION === */
.breadcrumb-nav {
  padding: 0;
  margin-top: 24px;
  margin-bottom: 24px;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 12px 20px;
  margin: 0;
  font-size: 0.9rem;
  background: var(--card-bg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.breadcrumb-item {
  display: flex;
  align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  padding: 0 10px;
  color: var(--text-color);
  opacity: 0.5;
  font-weight: 600;
  font-size: 1.1rem;
}
.breadcrumb-item a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 500;
}
.breadcrumb-item a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
.breadcrumb-item:last-child {
  color: var(--text-color);
  font-weight: 600;
}
@media (max-width: 600px) {
  .breadcrumb {
    font-size: 0.85rem;
    padding: 10px 16px;
  }
  .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 6px;
  }
}

/* ===== 2026 Design Modernization ===== */

/* --- Hero Section --- */
.hero{
  padding: 60px 20px 56px;
  text-align: center;
  background: linear-gradient(180deg, rgba(0,51,102,0.07) 0%, rgba(0,102,204,0.02) 100%);
  color: var(--text-color);
}
.hero .container{
  padding-top: 0;
  padding-bottom: 0;
}
.hero h1{
  font-size: 2.8em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #003366 0%, #0066cc 60%, #0088dd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero p{
  color: var(--text-color);
  font-size: 1.2rem;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 2rem;
  opacity: 0.8;
}
.dark-mode .hero{
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}
.dark-mode .hero h1{
  background: linear-gradient(135deg, #8892b0 0%, #64ffda 60%, #0088dd 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@media (max-width: 768px){
  .hero{ padding: 48px 16px 40px; }
  .hero h1{ font-size: 2.1em; }
  .hero p{ font-size: 1.05rem; }
}
@media (max-width: 420px){
  .hero h1{ font-size: 1.7em; }
  .hero p{ font-size: 1rem; }
}

/* --- Gradient Text for Main Headings --- */
.container h2,
.cta-content h2{
  letter-spacing: 0.015em;
}
.gradient-text{
  background: linear-gradient(135deg, #003366 0%, #0066cc 60%, #0088dd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dark-mode .gradient-text{
  background: linear-gradient(135deg, #8892b0 0%, #64ffda 60%, #0088dd 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- SVG Wave Section Dividers --- */
.wave-divider{
  display: block;
  width: 100%;
  line-height: 0;
  margin: 0;
  padding: 0;
}
.wave-divider svg{
  display: block;
  width: 100%;
  height: auto;
}
.wave-divider--flip{
  transform: scaleY(-1);
}

/* (vertical timeline removed – horizontal layout is in base rules) */

/* --- Typography Refinements --- */
.section-intro{
  max-width: 65ch;
}
.service p,
.process-step .step-description,
.faq details p{
  max-width: 75ch;
}