/* ...existing code... */
/* Center the Turnstile box horizontally with flexbox */
.cf-turnstile-parent {
  display: flex;
  justify-content: center;
}
.cf-turnstile {
  display: block;
  margin-left: 0;
  margin-right: 0;
  border-radius: 12px;
  overflow: hidden;
  max-width: 340px;
}
.cf-turnstile {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden;
}
/* Make the Turnstile widget appear on a white surface to match site theme */
.cf-turnstile {
  background-color: #ffffff; /* white container */
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
/* Center Cloudflare Turnstile box in forms */
.cf-turnstile {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Dr. Györkös Roland István - mobile-first theme */
:root{
  /* Györkös brand palette (deep blue + white) */
  --brand: #003d6f;
  --brand-600: #002f56;
  --brand-200: #e1e8f2;
  --brand-50: #f6f8fb;
  --hero-blue: #173d6b;
  --hero-blue-soft: color-mix(in srgb, #173d6b 68%, #ffffff);

  /* Flag base colors repainted to brand variations */
  --flag-red: var(--brand);
  --flag-green: color-mix(in srgb, var(--brand) 80%, white);

  /* Typography */
  --font-heading: "Cormorant Unicase", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Dynamic navbar height for offcanvas offset */
  --navbar-h: 0px;
  /* Overlap offcanvas by 1px to avoid hairline gap under the navbar */
  --offcanvas-gap: -1px;

  /* Neutral ink + muted text */
  --ink: #ffffff;
  --muted: #d5deee;

  /* Surfaces, radii, shadows */
  --surface: #ffffff;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
}

/* ========================================
   SCROLL-BASED LANDING PAGE
   ======================================== */

/* Force light color scheme to prevent browser dark mode from inverting colors */
:root {
  color-scheme: light only;
}

html, body {
  color-scheme: light only;
}

/* Fixed background with logo */
.scroll-hero-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Height set by JS to lock to initial viewport height */
  height: 100vh;
  /* No background-color - using SVG instead to prevent night mode color shift */
  color-scheme: light only;
  -webkit-filter: none;
  filter: none;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Background fill SVG - stretches to fill entire screen and beyond to cover UI changes */
.scroll-hero-bg-fill {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: calc(100% + 100px);
  object-fit: fill;
  z-index: 0;
  color-scheme: light only;
  -webkit-filter: none !important;
  filter: none !important;
}

.scroll-hero-logo {
  position: absolute;
  z-index: 1;
  /* Top position set by JS for stable centering */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Size to fit text fully on screen - scale based on viewport */
  /* Mobile: 25% larger than before (109vw * 1.25 = ~136vw) */
  width: 136vw;
  max-width: 1150px;
  height: auto;
  /* Prevent night mode from inverting SVG colors */
  color-scheme: light only;
  -webkit-filter: none !important;
  filter: none !important;
}

/* On larger screens, allow bigger logo */
@media (min-width: 768px) {
  .scroll-hero-logo {
    width: 103vw;
    max-width: 1932px;
  }
}

@media (min-width: 1200px) {
  .scroll-hero-logo {
    width: 96vw;
    max-width: 2484px;
  }
}

/* Frosted glass overlay - controlled by JS */
.scroll-hero-frost {
  position: absolute;
  inset: 0;
  background: rgba(23, 61, 107, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Darkening overlay - controlled by JS */
.scroll-hero-darken {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Scroll sections */
.scroll-section {
  position: relative;
  z-index: 1;
  min-height: var(--vh-initial, 100vh);
  display: flex;
  align-items: center;
  padding: 2rem 0;
}

/* Hero start section - full screen with scroll prompt */
.scroll-hero-start {
  min-height: var(--vh-initial, 100vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 3rem;
  position: relative;
  /* Ensure full width for centering */
  width: 100%;
}

.scroll-hero-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounce 2s infinite;
  /* Ensure centered positioning */
  text-align: center;
  /* Scroll-based fade transition */
  transition: opacity 0.2s ease-out;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* Content cards that float over the background */
.scroll-content-card {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 2rem;
  box-shadow: none;
  color: #fff;
}

@media (min-width: 768px) {
  .scroll-content-card {
    padding: 3rem;
  }
}

/* Introduction section */
.scroll-intro {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.scroll-portrait {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.scroll-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.scroll-subtitle {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
}

.scroll-lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.scroll-contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}

.scroll-contact-info a {
  color: #fff;
  text-decoration: none;
}

.scroll-contact-info a:hover {
  text-decoration: underline;
}

.scroll-contact-icon {
  margin-right: 0.5rem;
}

.scroll-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.scroll-tag {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Services section */
.scroll-services {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.scroll-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.scroll-section-lead {
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
}

/* Service blocks - zig-zag pattern */
.service-block {
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.service-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.service-title {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  text-transform: uppercase;
}

.service-lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.65rem;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  line-height: 1.5;
}

.service-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
}

/* Image placeholder for services */
.service-image-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 0.9rem;
  border: 2px dashed rgba(255,255,255,0.15);
}

/* Service image styling */
.service-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

@media (max-width: 991.98px) {
  .service-block {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
  }
  
  .service-image-placeholder,
  .service-image {
    max-width: 400px;
    margin: 0 auto;
  }
}

/* Contact section */
.scroll-contact {
  padding-top: 2rem;
  padding-bottom: 6rem;
}

.scroll-contact .card {
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
}

.scroll-contact .card-body h2 {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.scroll-contact .form-label {
  color: rgba(255,255,255,0.9);
}

.scroll-contact .form-control,
.scroll-contact .form-select {
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.3);
}

.scroll-contact .btn-primary {
  background: #fff;
  color: #173d6b;
  border: none;
  font-weight: 600;
}

.scroll-contact .btn-primary:hover {
  background: rgba(255,255,255,0.9);
}

/* Hide old page-fade hero styles but keep for reference */
.page-fade-hero-viewport,
.page-fade-hero {
  display: none;
}

/* Ensure main doesn't block scrolling */
main {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* ========================================
   END SCROLL-BASED LANDING PAGE
   ======================================== */

/* Page-level scroll fade hero (uses PDF artwork as background) - LEGACY */
.page-fade-hero-viewport{
  position: relative;
  z-index: 0;
  height: clamp(88vh, 94vh, 100vh);
  margin-top: 0;
  margin-bottom: clamp(2.5rem, 7vh, 4rem);
  overflow: hidden;
}
.page-fade-hero{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--hero-blue);
  background-image: var(--page-fade-img, url('/assets/img/gyorkos-roland.jpg')),
                    radial-gradient(circle at 35% 30%, rgba(0,61,111,0.12), transparent 50%),
                    radial-gradient(circle at 70% 60%, rgba(0,61,111,0.08), transparent 55%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: var(--page-fade-opacity, 1);
  transform: translateY(var(--page-fade-translate, 0));
  transition: opacity .12s linear, transform .12s ease-out;
  will-change: opacity, transform;
  z-index: -1;
  pointer-events: none;
}
.page-fade-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: transparent;
  opacity: 0;
  pointer-events:none;
}

@media (max-width: 767.98px){
  .page-fade-hero-viewport{ height: clamp(72vh, 84vh, 92vh); margin-bottom: 2rem; }
  .page-fade-hero{ height: 100vh; }
}

  /* Keep hero artwork behind page content while still visible */
  .legal-hero,
  .legal-hero .container,
  main{ position: relative; z-index: 1; }

.legal-portrait-hero{ --page-fade-img: url('/assets/img/gyorkos-roland.jpg'); }

html{ scroll-behavior:smooth; }
/* Prevent accidental horizontal scrollbars caused by full-bleed elements (safe, reversible) */
html, body { overflow-x: hidden; }
body{
  color:var(--ink);
  background-color:var(--hero-blue);
  font-family: var(--font-body);
  letter-spacing: .01em;
}
main{ background: var(--hero-blue); }
section{ background: transparent; }

.legal-hero .container{
  opacity: var(--page-fade-text, 1);
  transition: opacity .12s linear;
}
/* Keep page content below the fixed navbar by using the measured navbar height */
body { padding-top: var(--navbar-h, 0px); }
.text-secondary{ color: var(--muted) !important; }

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-heading);
  letter-spacing: .06em;
  font-weight: 700;
  color: #ffffff;
}

.display-5, .display-6{
  letter-spacing: .08em;
}

.nav-link, .navbar-brand{ 
  letter-spacing: .12em; 
  text-transform: uppercase; 
  font-weight: 700; 
  font-family: var(--font-heading);
}
.navbar-nav { 
  display: flex !important; 
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1.5rem !important; 
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar-nav .nav-item {
  white-space: nowrap;
}
.navbar-nav .nav-link {
  padding: 0.5rem 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Hero with soft brand tint */
.hero{
  background:
    radial-gradient(1200px 320px at 85% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, transparent), transparent 60%);
}

/* Legal main layout built from the ügyvéd overlay */
.legal-hero{
  background: linear-gradient(180deg, var(--hero-blue) 0%, var(--hero-blue) 100%);
}
.legal-hero .legal-tags .badge{ font-weight:600; letter-spacing:.02em; }
.legal-hero .legal-contact a{ text-decoration:none; color: #e5edfb; }
.legal-form-card{ display: none !important; }
.legal-services{ display: none !important; }
.legal-cta-band{ display: none !important; }
.legal-cta-band .btn{ box-shadow: var(--shadow-md); }

/* Theme variants (set class on <html> or <body>) */
html.theme-teal, body.theme-teal{
  --brand: #00c2a8;
  --brand-600: #00a08b;
}
html.theme-purple, body.theme-purple{
  --brand: #bf5af2;
  --brand-600: #9c3fe0;
}
html.theme-green, body.theme-green{
  --brand: #34c759;
  --brand-600: #2eb349;
}
html.theme-orange, body.theme-orange{
  --brand: #ff9f0a;
  --brand-600: #db8400;
}

/* Local submit button style: taller and less wide on larger screens, but full-width on small phones */
.btn-submit{
  padding: .9rem 1.2rem; /* taller */
  font-size: 1rem;
  font-weight: 700;
  border-radius: calc(var(--radius-md) - 2px);
  min-width: 220px;
  max-width: 660px;
  display: inline-block;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
@media (max-width: 575.98px){
  .btn-submit{ display: block; width: 100%; min-width: unset; }
}

/* Glassy, minimal navbar */
.navbar.sticky-top{
  /* Fixed to viewport top so navbar never moves */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #ffffff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  overflow: hidden; /* clip blur within rounded corners */
  /* Keep navbar above overlays and offcanvas panels */
  z-index: 1100;
}
/* While any content overlay is open, avoid navbar backdrop blur to prevent subtle redraw during fast scroll */
body.overlay-open .navbar.sticky-top{
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.navbar-brand{ letter-spacing:.2px; white-space: nowrap; font-family: var(--font-heading); }
.navbar-brand .brand-icon{ color: var(--brand); display:inline-block; width:36px; height:36px; object-fit:contain; object-position:center; border-radius:6px; overflow:hidden; }
/* Brand collapse animation: full → OHS on constrained space (mobile overlays) */
.navbar .brand-text{ position: relative; display:inline-flex; align-items:center; }
.navbar .brand-text-full, .navbar .brand-text-short{
  display: inline-flex; align-items: center; line-height: 1.2; white-space: nowrap;
}
/* Start with short hidden and width driven by full text */
.navbar .brand-text{
  --brandTextW: auto;
  width: var(--brandTextW);
  transition: width 420ms cubic-bezier(.2,.9,.2,1);
}
/* Disable brand width transition when overlay is open to prevent snapping */
body.overlay-open .navbar .brand-text{
  transition: none;
}
.navbar .brand-text-full{ opacity: 1; transition: opacity 1s ease; }
.navbar .brand-text-short{ opacity: 0; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: opacity 220ms linear; }
/* Collapsed state: show short, fade out full, animate width */
body.brand-collapsed .navbar .brand-text{ width: var(--brandTextShortW, 0px); }
body.brand-collapsed .navbar .brand-text-full{ opacity: 0; transition: opacity 220ms linear; }
body.brand-collapsed .navbar .brand-text-short{ opacity: 1; transition: opacity 220ms linear; }
/* Base hamburger size a touch smaller */
.navbar .navbar-toggler{
  padding: .35rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  align-self: center;
}
.navbar .navbar-toggler{ background-color: transparent; border-color: rgba(0,0,0,0.08); }
.navbar .navbar-toggler:hover{ background-color: rgba(0,0,0,0.04); }
.navbar .navbar-toggler[aria-expanded="true"]{ background-color: transparent; box-shadow: none; }
.navbar .navbar-toggler .navbar-toggler-icon{
  width: 1.25rem;
  height: 1.25rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Ensure navbar container never wraps its children */
.navbar > .container, .navbar > .container-fluid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

@media (max-width: 991.98px){
  /* Keep brand, CTA, and hamburger on a single row */
  .navbar{ flex-wrap: nowrap; }
  .navbar > .container, .navbar > .container-fluid{ flex-wrap: nowrap; }
  .navbar .navbar-brand{ margin-right: .5rem; font-size: 1.0625rem; }
  .navbar-brand .brand-icon{ width:42px; height:42px; object-fit:contain; object-position:center; border-radius:5px; overflow:hidden; }
  .navbar .navbar-toggler{ padding: .3rem; width: 42px; height: 36px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; align-self:center; }
  .navbar .navbar-toggler .navbar-toggler-icon{ width: 1.15rem; height: 1.15rem; background-position:center; background-size:100% 100%; }
  #navCtaSlot{ margin-left: .25rem; margin-right: .25rem; }
}

/* Symmetric, roomier padding on phones for visual balance */
@media (max-width: 575.98px){
  .container{ padding-left: 1.25rem; padding-right: 1.25rem; }
  .navbar .navbar-brand{ font-size: 1rem; }
  .navbar-brand .brand-icon{ width:30px; height:30px; object-fit:contain; object-position:center; border-radius:5px; overflow:hidden; }
  .navbar .navbar-toggler{ width: 38px; height: 34px; padding: .25rem; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; align-self:center; }
  .navbar .navbar-toggler .navbar-toggler-icon{ width: 1.05rem; height: 1.05rem; background-position:center; background-size:100% 100%; }
  /* Reduce sticky CTA size by ~10% on smaller phones */
  #navCtaSlot .btn{
    font-size: .86rem;
    padding: .405rem .81rem;
    border-radius: calc(var(--radius-md) - 1px);
  }
}

/* Mobile collapsed menu polish */
@media (max-width: 991.98px){
  .navbar .navbar-collapse{ padding: .25rem 0 .75rem; }
  .navbar .navbar-collapse .navbar-nav{ gap: .25rem; width: 100%; margin-left: 0 !important; align-items: stretch; }
  .navbar .navbar-collapse .nav-item{ width: 100%; }
  .navbar .navbar-collapse .nav-link{ padding: .6rem 0; font-size: 1.05rem; }
  .navbar .navbar-collapse .btn{ width: 100%; margin-top: .25rem; box-shadow: none; padding: .7rem 1rem; font-weight: 700; }
}

/* Sticky CTA (reusing original hero button in nav slot) */
#navCtaSlot{ display:flex; align-items:center; flex: 1 1 auto; min-width:0; overflow:visible; }
#navCtaSlot{ max-width: 45vw; }
#navCtaSlot .btn{ max-width: 100%; }
.navbar .navbar-brand{ min-width: 0; text-overflow: ellipsis; }
/* Ensure the brand icon remains visible and not clipped */
.navbar .navbar-brand .brand-icon{ flex: 0 0 auto; }
/* Compact spacing between back button and brand on mobile */
@media (max-width: 991.98px){
  #navbarBack{ margin-left: -0.25rem; }
  .navbar .navbar-brand{ margin-left: .25rem; }
}
#navCtaSlot .btn{
  --cta-scale: 1; /* dynamically updated via JS to ensure the button fits */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: .45rem .9rem; /* slightly smaller than hero */
  font-weight: 600;
  font-size: .95rem; /* scale text a touch */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(var(--cta-scale));
  transform-origin: left center;
  white-space: nowrap; /* keep label to one line */
  transition: opacity 1.1s ease, transform .25s ease, visibility 0s linear .2s; /* delay vis to avoid flicker */
}
#navCtaSlot.show .btn{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(var(--cta-scale));
  transition-delay: 0s, 0s, 0s;
}

/* Cards & features */
.card{ border-radius: var(--radius-lg); border-color: color-mix(in srgb, var(--brand) 10%, #dfe7f2 90%); box-shadow: var(--shadow-md); background-color: #ffffff; }
.feature{ border-radius: var(--radius-lg); transition: box-shadow .2s ease, transform .2s ease; border:1px solid color-mix(in srgb, var(--brand) 12%, #e3eaf3 88%); background: #fff; }

/* Frosted glass effect for calculator cards in illetékkalkulátor */
#overlay-illetekkalkulator .card {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.feature:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 18%, #dae3ef 82%); }

/* Buttons */
.btn{
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  letter-spacing: .06em;
}
.btn-primary{
  background-color:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.btn-primary:hover{
  background-color:var(--brand-600);
  border-color:var(--brand-600);
}
.btn-outline-primary{
  color:var(--brand);
  border-color:var(--brand);
}
.btn-outline-primary:hover{
  background-color:var(--brand);
  color:#fff;
}

/* Hero buttons as equal-size grid */
.hero-buttons{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .5rem;
}
.hero-buttons .btn{ width: 100%; }
@media (max-width: 575.98px){
  .hero-buttons{ grid-template-columns: 1fr; }
}

/* Bold, brand-forward buttons */
.btn-flag-red{
  background-color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 92%, black 8%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.btn-flag-red:hover{
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  transform: translateY(-1px);
}

.btn-flag-navy{
  background-color: var(--brand);
  border-color: var(--brand-600);
  color:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.btn-flag-navy:hover{
  background-color: var(--brand-600);
  border-color: color-mix(in srgb, var(--brand-600) 92%, black 8%);
  color:#fff;
  transform: translateY(-1px);
}

.btn-flag-white{
  background-color:#ffffff;
  border-color: color-mix(in srgb, var(--brand) 22%, #dbe4f0 78%);
  color:var(--ink);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.btn-flag-white:hover{
  background-color: var(--brand-200);
  border-color: color-mix(in srgb, var(--brand) 36%, #cdd9e8 64%);
}

.btn-flag-green{
  background-color: color-mix(in srgb, var(--brand) 82%, white);
  border-color: color-mix(in srgb, var(--brand) 88%, black 12%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.btn-flag-green:hover{
  background-color: color-mix(in srgb, var(--brand) 70%, black 30%);
  border-color: color-mix(in srgb, var(--brand) 78%, black 22%);
  transform: translateY(-1px);
}

/* Benefit section: evenly sized soft brand trio */
.benefit-cta-buttons{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .75rem;
}
.benefit-cta-buttons .btn{ width:100%; }
@media (max-width: 767.98px){ .benefit-cta-buttons{ grid-template-columns: 1fr; } }

.btn-flag-red-soft{
  background-color: color-mix(in srgb, var(--brand) 28%, white);
  border-color: color-mix(in srgb, var(--brand) 40%, white);
  color: var(--ink);
}
.btn-flag-red-soft:hover{
  background-color: color-mix(in srgb, var(--brand) 38%, white);
  border-color: color-mix(in srgb, var(--brand) 50%, white);
}

.btn-flag-white-soft{
  background-color:#ffffff;
  border-color:#e2e6ef;
  color:var(--ink);
}
.btn-flag-white-soft:hover{
  background-color:var(--brand-50);
  border-color:color-mix(in srgb, var(--brand) 24%, #d4dae7 76%);
}

.btn-flag-green-soft{
  background-color: color-mix(in srgb, var(--brand) 20%, white);
  border-color: color-mix(in srgb, var(--brand) 32%, white);
  color: var(--ink);
}
.btn-flag-green-soft:hover{
  background-color: color-mix(in srgb, var(--brand) 30%, white);
  border-color: color-mix(in srgb, var(--brand) 44%, white);
}

/* Collapse spacing when slot has no content */
#navCtaSlot:empty{ margin-left: 0 !important; margin-right: 0 !important; }

/* Badges */
.badge.text-bg-light{ background-color:color-mix(in srgb, var(--brand) 10%, white) !important; color:var(--brand-600); border:1px solid color-mix(in srgb, var(--brand) 18%, white); }

/* Form */
.form-control, .form-select{ border-radius: var(--radius-md); border-color:#e6e8ee; }
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(111,170,123,.20);
  border-color: var(--brand);
}

/* Utilities */
.py-md-6{ padding-top:4.5rem !important; padding-bottom:4.5rem !important; }

/* Small tweaks for very small screens */
@media (max-width: 360px){
  .display-5{ font-size:1.75rem; }
  .btn-lg{ padding:.6rem 1rem; font-size:1rem; }
  .navbar .navbar-brand{ font-size: .95rem; }
  .navbar-brand .brand-icon{ width:26px; height:26px; object-fit:contain; }
  .navbar .navbar-toggler{ width: 36px; height: 32px; padding: .2rem; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; align-self:center; }
  .navbar .navbar-toggler .navbar-toggler-icon{ width: 1rem; height: 1rem; background-position:center; background-size:100% 100%; }
}

/* Calculator overlay: make charts softer and scale typography responsively */
#overlay-calculator .amort-card h3,
#overlay-calculator .amort-card .h6,
#overlay-calculator .amort-card .h5 { font-size: clamp(0.9rem, 1.3vw, 1.05rem); }
#overlay-calculator #calcMonthly { font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
#overlay-calculator .amort-chart { min-height: clamp(160px, 22vh, 260px); }

/* Make stacked chart colors visually softer via CSS fallback (JS controls exact colors) */
#overlay-calculator .amort-card { --calc-area-alpha: 0.06; --calc-line-width: 3px; }

/* Prevent table cells from wrapping on small screens and scale text down so rows don't break */
#overlay-calculator .table td, #overlay-calculator .table th {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: clamp(0.72rem, 1vw, 0.92rem);
  line-height: 1.05;
}

/* Ensure the table container can scroll horizontally on very small screens rather than wrap */
#overlay-calculator .table-responsive{ overflow:auto; -webkit-overflow-scrolling: touch; }

/* Tweak form element sizes inside the overlay so elements fit comfortably */
#overlay-calculator .form-control, #overlay-calculator .form-select{ font-size: clamp(0.85rem, 1.1vw, 1rem); }

/* Make the calc result numbers less dominant on small screens */
@media (max-width: 767.98px){
  #overlay-calculator #calcMonthly { font-size: 1.05rem; }
  #overlay-calculator #calcTotal, #overlay-calculator #calcInterest { font-size: 0.95rem; }
}

/* Tap highlight and focus polish (reduces the gray ripple circle on mobile) */
a, button, .btn, .navbar-toggler{ -webkit-tap-highlight-color: rgba(0,0,0,0.04); }
.navbar .navbar-toggler:focus{ box-shadow: none; }
.navbar .navbar-toggler:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 30%, transparent);
}

/* Hide sticky CTA slot when JS toggles body.nav-open */
body.nav-open #navCtaSlot{ display: none !important; }

/* Mobile menu (#mobileMenu) theming – solid white background */
#mobileMenu.offcanvas{
  background: #ffffff !important;
}

/* General offcanvas settings */
.offcanvas{
  /* Ensure flex children (offcanvas-body) can actually scroll */
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow child to define its own scroll area */
}
/* While fully shown, drop Bootstrap's transform to avoid fixed-descendant repainting during scroll */
.offcanvas.offcanvas-stable{ transform: none !important; -webkit-transform: none !important; }
.offcanvas.offcanvas-start,
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-top,
.offcanvas.offcanvas-bottom{ top: calc(var(--navbar-h, 0px) + var(--offcanvas-gap, 0px)); height: calc(100% - var(--navbar-h, 0px) - var(--offcanvas-gap, 0px)); }
.offcanvas-backdrop{ top: calc(var(--navbar-h, 0px) + var(--offcanvas-gap, 0px)); height: calc(100% - var(--navbar-h, 0px) - var(--offcanvas-gap, 0px)); }
.offcanvas.offcanvas-end{
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
  overflow: hidden; /* clip gradient and content to rounded edge */
  border-left: 1px solid rgba(0,0,0,0.06);
}
.offcanvas .offcanvas-header{ display:none; }
.offcanvas .offcanvas-title{ display:none; }
#mobileMenu .nav-link{ font-size: 1.05rem; color: #1a1a1a !important; padding: .6rem 0; }
#mobileMenu .nav-link:hover{ color: var(--brand-600) !important; }
.offcanvas .btn{ border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
/* Ensure initial body content isn't tucked under the top edge */
.offcanvas .offcanvas-body{ padding-top: calc(1rem + var(--offcanvas-gap, 0px)); }

/* Make the panel body the scroll container with momentum scrolling on mobile */
.offcanvas .offcanvas-body{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  max-height: 100%;
  touch-action: pan-y;
  /* Complete scroll isolation - prevent scroll chaining to body */
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
}

/* Content overlay body needs full scroll isolation */
.content-overlay .offcanvas-body {
  height: 100%;
  overscroll-behavior: none;
}

/* Content overlays prefer solid background for maximum scroll stability (avoid backdrop-filter during scroll) */
.content-overlay{
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Ensure overlay is above all background elements */
  z-index: 1055 !important;
  /* Solid opaque background to completely block anything behind */
  isolation: isolate;
}

/* Ensure overlay is ALWAYS fully opaque - no transparency during transitions */
.content-overlay,
.content-overlay.show,
.content-overlay.showing,
.content-overlay.hiding {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* Exception: Illetékkalkulátor uses transparent overlay so frosted backdrop shows through */
#overlay-illetekkalkulator.content-overlay,
#overlay-illetekkalkulator.content-overlay.show,
#overlay-illetekkalkulator.content-overlay.showing,
#overlay-illetekkalkulator.content-overlay.hiding {
  background: transparent !important;
  background-color: transparent !important;
}

/* Confine paints inside the scroll container for overlays */
.content-overlay .offcanvas-body{ 
  contain: paint;
  /* Full scroll isolation */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
}

/* Exception: Illetékkalkulátor offcanvas body transparent */
#overlay-illetekkalkulator.content-overlay .offcanvas-body {
  background: transparent !important;
  contain: layout style;
}

/* Help Safari/Chromium compositors keep overlays stable while scrolling */
.content-overlay{ backface-visibility: hidden; transform-style: preserve-3d; }

/* When illetékkalkulátor is open, raise hero background above the page content but below the overlay */
body.overlay-illetekkalkulator-open .scroll-hero-bg {
  z-index: 1040 !important; /* Just below Bootstrap offcanvas (1045) */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hide the main page background completely when overlay is open to prevent flickering */
/* Exception: keep background visible for illetékkalkulátor transparency effect */
body.overlay-open:not(.overlay-illetekkalkulator-open) .scroll-hero-bg,
body.overlay-open:not(.overlay-illetekkalkulator-open) .scroll-hero-frost,
body.overlay-open:not(.overlay-illetekkalkulator-open) .scroll-hero-darken {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* Hide frost/darken effects when mobile menu is open to prevent blurry smear effect */
/* Using body class fallback for browsers without :has() support */
body.mobile-menu-open .scroll-hero-frost,
body.mobile-menu-open .scroll-hero-darken,
body:has(#mobileMenu.show) .scroll-hero-frost,
body:has(#mobileMenu.show) .scroll-hero-darken,
body:has(#mobileMenu.showing) .scroll-hero-frost,
body:has(#mobileMenu.showing) .scroll-hero-darken {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

/* Ensure mobile menu is above frost effects and has solid background */
#mobileMenu {
  z-index: 1060 !important;
  background: #ffffff !important;
}

#mobileMenu .offcanvas-body {
  background: #ffffff !important;
}

/* Ensure mobile menu links are visible and clickable */
#mobileMenu .nav-link,
#mobileMenu a.nav-link {
  color: #1a1a1a !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: block !important;
}

/* Also hide when offcanvas is showing (before overlay-open class is added) */
/* Exception: keep background visible for illetékkalkulátor */
body:has(.content-overlay.show:not(#overlay-illetekkalkulator)) .scroll-hero-bg,
body:has(.content-overlay.show:not(#overlay-illetekkalkulator)) .scroll-hero-frost,
body:has(.content-overlay.show:not(#overlay-illetekkalkulator)) .scroll-hero-darken,
body:has(.content-overlay.showing:not(#overlay-illetekkalkulator)) .scroll-hero-bg,
body:has(.content-overlay.showing:not(#overlay-illetekkalkulator)) .scroll-hero-frost,
body:has(.content-overlay.showing:not(#overlay-illetekkalkulator)) .scroll-hero-darken {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Ensure body scroll is completely locked when overlay is open */
/* Note: JS handles position:fixed with scroll position preservation */
body.overlay-open {
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* Lock html element as well to prevent any scrolling */
html:has(body.overlay-open) {
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
}

/* Block all interaction with content behind open overlays */
body.overlay-open > *:not(.offcanvas):not(.offcanvas-backdrop):not(.navbar),
body.overlay-open .scroll-hero-bg,
body.overlay-open .scroll-hero-frost,
body.overlay-open .scroll-hero-darken,
body.overlay-open main {
  pointer-events: none !important;
}

/* Keep main page content visible but non-interactive when illetékkalkulátor overlay is open (for blur effect) */
body.overlay-illetekkalkulator-open main,
body.overlay-illetekkalkulator-open > section:not(.offcanvas),
body.overlay-illetekkalkulator-open .scroll-contact {
  pointer-events: none !important;
}

/* Backdrop should be opaque when content overlay is open */
body.overlay-open:not(.overlay-illetekkalkulator-open) .offcanvas-backdrop.show,
body:has(.content-overlay.show:not(#overlay-illetekkalkulator)) .offcanvas-backdrop.show {
  background-color: rgba(255, 255, 255, 1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Illetékkalkulátor: frosted glass backdrop with blur */
body.overlay-illetekkalkulator-open .offcanvas-backdrop.show,
body:has(#overlay-illetekkalkulator.show) .offcanvas-backdrop.show,
body:has(#overlay-illetekkalkulator.showing) .offcanvas-backdrop.show {
  background-color: rgba(23, 61, 107, 0.56) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  opacity: 1 !important;
  z-index: 1050 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* Close button inside body */
.offcanvas .offcanvas-close{
  position: absolute;
  top: calc(.75rem + env(safe-area-inset-top, 0px));
  right: calc(env(safe-area-inset-right, 0px) + clamp(1rem, 4vw, 1.5rem));
  z-index: 10;
  opacity: .8;
}
.offcanvas .offcanvas-close:hover{ opacity: 1; }

/* In-overlay back arrow (top-left), complements navbar back */
.offcanvas .offcanvas-back{
  position: sticky;
  top: 0.75rem;
  left: clamp(.5rem, 2.5vw, 1rem);
  z-index: 1060;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
  color: inherit;
  cursor: pointer;
  margin-bottom: -36px; /* Negative margin so content flows under */
  flex-shrink: 0;
}
.offcanvas .offcanvas-back:hover{ background: rgba(0,0,0,0.15); }

/* Subtle tinted, blurred backdrop behind the offcanvas */
.offcanvas-backdrop.show{
  background-color: rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* When mobile menu is open, remove blur from backdrop to avoid frost effect */
body.mobile-menu-open .offcanvas-backdrop.show,
body:has(#mobileMenu.show) .offcanvas-backdrop.show,
body:has(#mobileMenu.showing) .offcanvas-backdrop.show {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
}
/* When a content overlay is open, drop backdrop blur to reduce composite cost */
body.overlay-open .offcanvas-backdrop.show{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Fullscreen content overlay variant */
.offcanvas.offcanvas-fullscreen{
  width: 100vw; /* take entire width for content panels */
  max-width: 100%;
}

/* Ensure backdrop covers entire screen and blocks all interaction */
.offcanvas-backdrop.show {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1050 !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

/* Ensure offcanvas overlay is above the backdrop */
.offcanvas.content-overlay {
  z-index: 1055 !important;
}
.content-overlay .offcanvas-body{ padding-top: calc(1rem + var(--offcanvas-gap, 0px)); }
.content-overlay ul{ padding-left: 1.15rem; margin-bottom: .75rem; }
.content-overlay li{ margin-bottom: .35rem; }
.content-overlay h3{ letter-spacing: .3px; }

/* Fix text colors for white background overlays */
.content-overlay .text-secondary { 
  color: #6c757d !important; /* Bootstrap's default text-secondary, readable on white */
}
.content-overlay .text-muted {
  color: #6c757d !important;
}
.content-overlay {
  color: #212529; /* Dark text for readability */
}

/* Subtle tables inside overlays */
.content-overlay .table{ font-size: .95rem; }
.content-overlay .table th{ background-color: rgba(0,0,0,0.03); font-weight: 600; }
.content-overlay .table td, .content-overlay .table th{ border-color: rgba(0,0,0,0.08); }

/* Simple figure styling inside overlays */
.content-overlay .overlay-figure {
  margin: 1rem 0 0.5rem 0;
}
.content-overlay .overlay-figure .figure-caption {
  color: rgba(0,0,0,0.55);
}

/* Make the supported-overlay buttons uniform and slightly larger on wide screens.
   Center the group and give each button a readable, fixed-ish width that scales.
   This keeps the visual weight similar to other large CTAs while avoiding full-width bars. */
@media (min-width: 992px){
  /* center the group and stack buttons vertically */
  #overlay-supported .d-grid{
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }

  /* each button: consistent responsive width, larger padding and type */
  #overlay-supported .d-grid .btn{
    width: clamp(320px, 38vw, 560px);
    min-height: 64px;
    padding: 0.9rem 2.2rem;
    font-size: 1.05rem;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: calc(var(--radius-md) + 6px);
    box-shadow: var(--shadow-md);
  }

  /* slightly increase prominence of the white variant to match visual size */
  #overlay-supported .d-grid .btn.btn-flag-white-soft{
    color: #0a0a0a;
    border-color: #e6e8ee;
  }
}
.content-overlay .table-responsive{ -webkit-overflow-scrolling: touch; }

/* Rounded outer corners for tables on explanation overlays */
.content-overlay .table-responsive,
.content-overlay .table{
  border-radius: .75rem; /* ~12px */
  overflow: hidden;      /* clip inner cell borders to the radius */
}

/* Back button look-alike link */
#navbarBack{
  color: inherit;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: width 150ms ease, opacity 150ms ease;
}
#navbarBack:hover{ background-color: rgba(0,0,0,0.05); }

/* Force navbar back button visible when overlay is open */
body.overlay-open #navbarBack,
body:has(.content-overlay.show) #navbarBack {
  width: 36px;
  visibility: visible;
  opacity: 1;
}

/* When an overlay is open, keep the navbar CTA visible but slightly smaller to fit alongside the back button */
body.overlay-open #navCtaSlot{ max-width: 60vw; }
@media (max-width: 575.98px){
  body.overlay-open #navCtaSlot .btn{
    font-size: .80rem;
    padding: .36rem .72rem;
    border-radius: calc(var(--radius-md) - 2px);
  }
}

/* Extra narrow screens (older Android devices) — be more aggressive so CTA fits reliably */
@media (max-width: 420px){
  /* Give nav slot more available width and reduce left-brand spacing */
  #navCtaSlot{ max-width: 68vw; margin-left: .1rem; }
  .navbar .navbar-brand{ margin-left: .125rem; }
  #navbarBack{ margin-left: 0; }

  /* Scale CTA down further, reduce padding and font-size so it rarely wraps */
  #navCtaSlot .btn{
    --cta-scale: 0.88;
    font-size: .78rem;
    padding: .32rem .6rem;
    line-height: 1;
    white-space: nowrap;
  }

  /* Ensure hero CTA in the nav slot isn't wider than available space */
  #navCtaSlot{ max-width: 72vw; }
}

/* Fallback for ultra narrow displays: allow the CTA to shrink text slightly */
@media (max-width: 360px){
  #navCtaSlot .btn{ font-size: .75rem; padding: .28rem .5rem; --cta-scale: 0.82; }
  .display-5{ font-size:1.6rem; }
}

/* Collapse brand text to "OHS" earlier to free up space for CTA */
@media (max-width: 400px) {
  body:not(.brand-collapsed) .navbar .brand-text-full { opacity: 0; }
  body:not(.brand-collapsed) .navbar .brand-text-short { opacity: 1; }
  body:not(.brand-collapsed) .navbar .brand-text { width: var(--brandTextShortW, 0px); }
}

/* Ensure short brand ("OHS") is visible at 360px */
@media (max-width: 360px) {
  body.brand-collapsed .navbar .brand-text-short { opacity: 1; display: inline-block; }
  body.brand-collapsed .navbar .brand-text-full { opacity: 0; display: none; }
  #brandTextShort { display: inline; }
  #brandTextFull { display: none; }
}

/* Reduce navbar/CTA horizontal padding for extra space */
@media (max-width: 370px) {
  .navbar { padding-left: 2px !important; padding-right: 2px !important; }
  #navCtaSlot { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Stack navbar elements vertically if still cramped */
@media (max-width: 340px) {
  .navbar { flex-direction: column !important; align-items: flex-start !important; }
  .navbar .navbar-brand,
  .navbar #navCtaSlot,
  .navbar .navbar-toggler {
    display: block !important;
    width: 100% !important;
    margin-bottom: 4px !important;
    text-align: left !important;
  }
}

/* Legal portrait sizing */
.legal-portrait{ max-width: 280px; }
@media (max-width: 575.98px){
  .legal-portrait{ max-width: 100%; float: none !important; margin: 0 0 .75rem 0 !important; }
}

/* Decorative watermark for legal overlay (subtle § sign) */
.overlay-legal .offcanvas-body{ position: relative; }
.overlay-legal .offcanvas-body::after{
  content: '§';
  position: fixed;
  top: var(--navbar-h, 0px);
  left: 0; right: 0; bottom: 0;
  display: block;
  pointer-events: none;
  font-size: clamp(200px, 60vw, 640px);
  line-height: 1;
  font-weight: 700;
  color: rgba(0,0,0,0.06);
  letter-spacing: -0.02em;
  /* Place it visually behind content */
  z-index: 0;
  /* Centered */
  display:flex; align-items:center; justify-content:center;
  /* Keep in its own layer to avoid flashes during fast scroll at edges */
  will-change: transform, opacity;
  transform: translateZ(0);
}
/* Ensure overlay content stays above watermark */
.overlay-legal .offcanvas-body > .container{ position: relative; z-index: 1; }

/* Decorative watermark for general overlay (subtle % sign) */
/* Exclude the special 'miertvelunk' overlay which uses its own watermark */
.overlay-general:not(.overlay-miertvelunk) .offcanvas-body{ position: relative; }
.overlay-general:not(.overlay-miertvelunk) .offcanvas-body::after{
  content: '%';
  position: fixed;
  top: var(--navbar-h, 0px);
  left: 0; right: 0; bottom: 0;
  display: block;
  pointer-events: none;
  font-size: clamp(200px, 60vw, 640px);
  line-height: 1;
  font-weight: 700;
  color: rgba(0,0,0,0.06);
  letter-spacing: -0.02em;
  z-index: 0;
  display:flex; align-items:center; justify-content:center;
  /* Promote to its own layer to prevent occasional repaint flicker */
  will-change: transform, opacity;
  transform: translateZ(0);
}
.overlay-general:not(.overlay-miertvelunk) .offcanvas-body > .container{ position: relative; z-index: 1; }

/* Decorative watermark for privacy overlay (subtle ! sign) */
.overlay-privacy .offcanvas-body{ position: relative; }
.overlay-privacy .offcanvas-body::after{
  content: '!';
  position: fixed;
  top: var(--navbar-h, 0px);
  left: 0; right: 0; bottom: 0;
  display: block;
  pointer-events: none;
  font-size: clamp(200px, 60vw, 640px);
  line-height: 1;
  font-weight: 700;
  color: rgba(0,0,0,0.06);
  letter-spacing: -0.02em;
  z-index: 0;
  display:flex; align-items:center; justify-content:center;
}
.overlay-privacy .offcanvas-body > .container{ position: relative; z-index: 1; }

/* No-select utility for overlays that should not allow copying */
.overlay-noselect, .overlay-noselect *{
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important; /* disable iOS long-press menu */
}

/* Privacy consent actions: tighter, consistent sizing */
.privacy-consent-actions .btn{
  padding: .625rem 1rem; /* slightly tighter than default .btn-lg */
  font-size: 1rem;       /* keep label readable without oversizing */
  line-height: 1.25;
  border-radius: 14px;   /* a touch rounder for CTA feel */
}
@media (min-width: 576px){
  .privacy-consent-actions .btn{ font-size: 1.05rem; }
}
@media (max-width: 360px){
  .privacy-consent-actions .btn{ font-size: .97rem; padding: .56rem .9rem; }
}

/* Amortization chart panel – force light (white) look */
.amort-card{
  background: linear-gradient(180deg, #ffffff, #fafafa);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow-md);
}
/* Note: OS dark scheme rules intentionally disabled for now – keeping for later use
@media (prefers-color-scheme: dark){
  .amort-card{
    background: linear-gradient(180deg, #0b1220, #0a0f1a);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.02);
  }
}
*/
.amort-card h2{ letter-spacing:.2px; }
/* Keep the chart compact and within the viewport height */
.amort-chart{ width: 100%; height: clamp(180px, 26vh, 240px); }
@media (min-width: 768px){ .amort-chart{ height: clamp(200px, 28vh, 280px); } }
@media (min-width: 1200px){ .amort-chart{ height: clamp(220px, 30vh, 320px); } }

/* Center hero graphic and title, and center/stack amort toggle on small screens */
@media (max-width: 575.98px){
  /* center the inline SVG graphic inside hero */
  .hero-graphic{ display:flex; justify-content:center; align-items:center; margin-left: auto; margin-right: auto; }
  .hero-graphic svg, .hero-graphic img{ max-width: 100%; height: auto; display:block; }
  /* slight upward nudge and rightward push to visually align the road/markers with the heading */
  .hero-graphic svg{ transform: translate(10px, 3px); }
  /* center the main hero heading(s) within the hero left column */
  .hero .col-12.col-lg-7 h1.display-5, .hero .col-12.col-lg-7 h1.display-5.fw-bold{ text-align: center; }
  /* stack and center the amortization header and mode switch */
  .amort-card > .d-flex{ flex-direction: column !important; align-items: center !important; gap: .5rem; }
  /* ensure the btn-group is centered and doesn't stretch full width */
  #amortModeSwitch{ display: inline-flex; justify-content: center; margin-left: 0 !important; }
  #amortModeSwitch .btn{ min-width: 110px; }
}

/* Add to your CSS file */
body.brand-collapsed #brandTextFull { display: none; }
body.brand-collapsed #brandTextShort { display: inline; }
#brandTextShort { display: none; }

/* While we compute measurements, hide the brand text to prevent flash from full -> short */
body.brand-measuring .navbar .brand-text-full,
body.brand-measuring .navbar .brand-text-short {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Add to your CSS file */
.navbar-tight {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.btn-tight {
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-size: 0.95rem !important;
}

/* Optional: Stack navbar elements vertically on ultra-narrow screens */
@media (max-width: 340px) {
  .navbar .navbar-brand,
  .navbar #navCtaSlot,
  .navbar .navbar-toggler {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    text-align: left;
  }
  .navbar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* Ultra-narrow screens: reduce navbar and CTA size, but keep proportions */
@media (max-width: 320px) {
  .navbar {
    font-size: 0.92rem !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .navbar .navbar-brand {
    font-size: 0.88rem !important;
    margin-right: 0.25rem !important;
  }
  .navbar-brand .brand-icon {
    width: 18px !important;
    height: 18px !important;
  }
  #navCtaSlot .btn {
    font-size: 0.72rem !important;
    padding: .22rem .44rem !important;
    border-radius: calc(var(--radius-md) - 3px) !important;
    min-width: 90px !important;
    min-height: 32px !important;
  }
  .navbar .navbar-toggler {
    width: 32px !important;
    height: 28px !important;
    padding: .15rem !important;
  }
}

/* Stack elements vertically only if absolutely necessary */
@media (max-width: 300px) {
  .navbar .navbar-brand,
  .navbar #navCtaSlot,
  .navbar .navbar-toggler {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2px !important;
    text-align: left !important;
  }
  .navbar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}
.navbar {
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  overflow: hidden;
  min-width: 0;
}

.navbar .navbar-brand {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

#navCtaSlot {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

#navCtaSlot .btn {
  flex-shrink: 1;
  min-width: 90px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.brand-icon-only .navbar .brand-text-full,
body.brand-icon-only .navbar .brand-text-short { display: none !important; }
body.brand-icon-only .navbar .brand-icon { display: inline-block !important; }

/* ------------------------------------------------------------------
   Additional safeguards to keep navbar ratios stable across devices
   - Use clamp() to keep font-size and paddings proportional
   - Explicit rules for the progressive collapse state added by JS
   - Force flex-shrink/min-width so items don't overflow/overlap
   ------------------------------------------------------------------ */

/* Make navbar typography fluid but constrained for consistent ratios */
.navbar .navbar-brand { font-size: clamp(0.95rem, 1.6vw, 1.12rem); }
#navCtaSlot .btn { font-size: clamp(0.78rem, 1.2vw, 1rem); padding: clamp(.28rem, .8vw, .45rem) clamp(.5rem, 1.6vw, .9rem); }

/* Ensure all primary navbar children can shrink and won't force overflow */
.navbar .navbar-brand, #navCtaSlot, .navbar .navbar-toggler, nav.d-lg-block { min-width: 0; flex-shrink: 1; }
.navbar { gap: 0.5rem; }

/* Explicit collapse state: hide nav items and ensure toggler visible */
body.nav-items-collapsed nav.d-lg-block { display: none !important; }
body.nav-items-collapsed .navbar-toggler { display: inline-flex !important; }

/* When nav items collapse, give CTA more room but keep it bounded */
body.nav-items-collapsed #navCtaSlot { max-width: 46vw; }

/* Prevent CTA from overflowing; allow it to ellipsize but remain usable */
#navCtaSlot .btn { text-overflow: ellipsis; overflow: hidden; }

/* Ensure SVG icons in navbar scale proportionally and don't distort */
.navbar .brand-icon, #navbarBack svg, .navbar .navbar-toggler-icon { width: auto; height: 1.6rem; max-height: 2.2rem; display: inline-block; }

/* Small screens: prefer collapsing the nav early to keep consistent visual ratio */
@media (max-width: 480px){
  body.nav-items-collapsed #navCtaSlot { max-width: 62vw; }
  .navbar .navbar-brand { font-size: clamp(.92rem, 2.6vw, 1.02rem); }
}

/* Careers section (karrier tartalom a főoldalon) */
.careers-section{
  background: linear-gradient(180deg, color-mix(in srgb, var(--hero-blue) 94%, transparent) 0%, color-mix(in srgb, var(--hero-blue) 98%, transparent) 100%);
  border-top: none;
  border-bottom: none;
}
.recruitment-hero{ --careers-img: url('/assets/img/címer.svg'); }
.recruitment-visual{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  background:
    radial-gradient(120% 120% at 20% 30%, rgba(0,61,111,0.10), transparent 60%),
    radial-gradient(120% 120% at 80% 70%, rgba(0,61,111,0.08), transparent 60%),
    var(--careers-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 28px 70px -48px rgba(0,0,0,0.55), 0 16px 40px -36px rgba(0,61,111,0.45);
  border: 1px solid rgba(0,61,111,0.08);
}
.recruitment-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: start;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.recruitment-text{
  display:flex;
  flex-direction:column;
  gap: clamp(1.5rem, 2.4vw, 2rem);
  min-width:0;
}
.recruitment-text p.lead{
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  color:#24324a;
}

.recruitment-card{
  background: #f8fafc;
  border-radius: 24px;
  padding: clamp(1.35rem, 2vw, 1.75rem);
  border: 1px solid rgba(36, 50, 74, 0.08);
  box-shadow: 0 30px 60px -40px rgba(18, 34, 68, 0.55);
}
.recruitment-card h3{
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  margin-bottom: .85rem;
  color:#1f2d4a;
}
.recruitment-card ul,
.recruitment-card ol{
  margin:0;
  padding-left: 1.1rem;
  color:#415067;
  font-size: 1rem;
  line-height: 1.6;
}
.recruitment-card li{ margin-bottom: .6rem; }
.recruitment-card li:last-child{ margin-bottom: 0; }
.recruitment-card strong{ color:#1c3462; }
.recruitment-card ol{ counter-reset:item; }
.recruitment-card ol li{ padding-left: .35rem; }

.recruitment-quote{
  margin: 0;
  padding: 1.5rem 1.75rem;
  border-radius: 20px;
  border-left: 4px solid var(--brand, #003d6f);
  background: linear-gradient(135deg, rgba(0,61,111,0.08) 0%, rgba(0,61,111,0.16) 100%);
  color:#1f2d4a;
  font-style: italic;
  box-shadow: 0 20px 50px -36px rgba(16, 36, 68, 0.55);
}
.recruitment-quote footer{ font-style: normal; }

.recruitment-sidebar{
  position: sticky;
  top: calc(var(--navbar-h, 72px) + 18px);
  display:flex;
  flex-direction:column;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}
.recruitment-sidebar-card{
  border-radius: 24px;
  padding: clamp(1.4rem, 2vw, 1.75rem);
  box-shadow: 0 24px 52px -38px rgba(15, 27, 51, 0.55);
}

.recruitment-sidebar-card--highlight{
  background: linear-gradient(135deg, #003d6f 0%, #002f56 100%);
  color:#f1f5ff;
}
.recruitment-sidebar-card--highlight h3{ color: #ffffff; margin-bottom: 1rem; }
.recruitment-facts{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.recruitment-facts li{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-weight: 500;
}
.recruitment-facts span{
  display:inline-flex;
  min-width: 3.4rem;
  justify-content:center;
  align-items:center;
  padding:.4rem .6rem;
  border-radius:999px;
  background: rgba(255,255,255,0.16);
  color:#fff;
  font-size: 1.05rem;
}

.recruitment-sidebar-card--roadmap{
  background: #ffffff;
  border: 1px solid rgba(43, 64, 101, 0.12);
}
.recruitment-roadmap{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative;
}
.recruitment-roadmap li{
  position:relative;
  padding-left:1.75rem;
  color:#334056;
  font-size: .98rem;
}
.recruitment-roadmap li::before{
  content:"";
  position:absolute;
  left:0;
  top:.3rem;
  width: 10px;
  height: 10px;
  border-radius:999px;
  background: var(--brand, #003d6f);
  box-shadow: 0 0 0 4px rgba(0,61,111,0.20);
}
.recruitment-roadmap li + li::after{
  content:"";
  position:absolute;
  left:4px;
  top:-1rem;
  bottom: calc(100% - .4rem);
  width:2px;
  background: linear-gradient(180deg, rgba(0,61,111,0.25) 0%, rgba(0,61,111,0.08) 100%);
}
.recruitment-roadmap strong{ color:#253763; }

.recruitment-sidebar-card--cta{
  background: linear-gradient(140deg, rgba(0,61,111,0.08) 0%, rgba(255,255,255,0.95) 100%);
  border: 1px solid rgba(0,61,111,0.22);
  color:#1f2d4a;
}
.recruitment-sidebar-card--cta h3{ color:#1f2d4a; }
.recruitment-sidebar-card--cta .btn{
  font-weight: 600;
  padding: .8rem 1.1rem;
}
.recruitment-sidebar-card--cta a{ color: inherit; }

@media (max-width: 991.98px){
  .recruitment-grid{ grid-template-columns: 1fr; }
  .recruitment-sidebar{ position: static; }
  .recruitment-visual{ aspect-ratio: 3 / 2; }
}

@media (max-width: 575.98px){
  .recruitment-card, .recruitment-sidebar-card{ border-radius: 18px; }
  .recruitment-card ul, .recruitment-card ol{ font-size: .97rem; }
  .recruitment-visual{ aspect-ratio: 16 / 11; }
}

/* Disclaimer Footer */
.disclaimer-footer {
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  margin-top: 3rem;
}

.disclaimer-text {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

.disclaimer-text a {
  color: var(--brand-600, #003d6f);
  text-decoration: none;
  transition: color 0.2s ease;
}

.disclaimer-text a:hover {
  color: var(--brand-700, #002a52);
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .disclaimer-footer {
    margin-top: 2rem;
  }
  
  .disclaimer-text {
    font-size: 0.8125rem;
  }
}