@charset "UTF-8";
/* ==========================================================================
   QUiCKIPEDIA — Zendesk Guide theme
   Visual language aligned to quick.es
   --------------------------------------------------------------------------
   Structure
     01  Design tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Icons (inline SVG masks — inherit currentColor)
     06  Buttons
     07  Forms & search
     08  Header / navigation
     09  Home: hero, category blocks, promoted articles
     10  Promo blocks (faqs-links) & CTA panels
     11  Section & article pages
     12  Comments
     13  Search results
     14  Community
     15  Requests, profile, subscriptions, contributions
     16  Breadcrumbs, pagination, dropdowns, tables, misc
     17  Footer
     18  Responsive
   --------------------------------------------------------------------------
   Zendesk theme settings (#2922E5, #101010, …) are substituted
   server-side and feed the token layer below, so the admin colour/font
   pickers keep working. Everything else derives from those tokens.
   ========================================================================== */

/* ============================================================ 01  TOKENS
   Values below are the ones extracted from the live QUiCK site's own design
   system (colours, type scale, spacing, radii, shadows, breakpoints), not
   approximations. Where the source defines a real token it is quoted in the
   comment. */
:root {
  /* -- brand, driven by the Guide theme settings ------------------------ */
  --brand: #2922E5;              /* --_colors---primary  #2922e5 */
  --brand-contrast: #FFFFFF;
  --link: #2922E5;
  --page-bg: #FFFFFF;

  /* Supporting blue from the source system, used for accents that should not
     compete with the primary action colour. */
  --brand-alt: #2168d1;               /* --_colors---blue */

  /* Derived brand shades. Static fallback first, color-mix second: a browser
     without color-mix() simply keeps the fallback. The static fallbacks are
     the source system's own values, so they stay correct even without
     color-mix support. */
  --brand-strong: #211bba;
  --brand-strong: color-mix(in srgb, var(--brand) 80%, #000);
  --brand-tint: #ebf0ff;              /* --_colors---secondary */
  --brand-tint: color-mix(in srgb, var(--brand) 8%, #fff);
  --brand-pale: #ebf0ff;
  --brand-border: #c7d8f6;

  /* -- neutrals --------------------------------------------------------- */
  --ink: #101010;                 /* --_colors---black  #101010 */
  --ink-2: #4d4d4d;
  --ink-3: #707070;                   /* --_colors---gray  #10101099 flattened */
  --surface: #ffffff;
  --surface-2: #f7f7f8;
  --surface-3: #efeff1;
  --dark: #1d1d1d;                    /* hero surface */
  --dark-2: #1c1c1c;                  /* nav surface */
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, .66);
  --border: #e6e6e8;
  --border-strong: #d2d2d6;

  /* -- status ----------------------------------------------------------- */
  --green: #0b7a3d;
  --green-bg: #e7f5ed;
  --amber: #8a5a00;
  --amber-bg: #fdf3e2;
  --red: #d3373c;
  --red-bg: #fdecec;

  /* -- typography -------------------------------------------------------
     The source runs on 400/500 almost exclusively — 600/700 barely appear.
     Section headings sit at 100% line-height, which is what gives the site
     its tight, confident headline block. */
  --font-body: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  --font-head: 'Helvetica Neue', Arial, Helvetica, sans-serif;

  --w-regular: 400;
  --w-medium: 500;

  --fs-display: 4rem;      /* 64 — hero */
  --fs-h1: 2.5rem;         /* 40 — section title */
  --fs-h2: 2rem;           /* 32 — compact section title */
  --fs-h3: 1.75rem;        /* 28 — feature title */
  --fs-h4: 1.375rem;       /* 22 — card / FAQ title */
  --fs-lg: 1.25rem;        /* 20 — subtitle */
  --fs-base: 1rem;         /* 16 — body, 150% */
  --fs-sm: 0.875rem;       /* 14 */
  --fs-xs: 0.8125rem;      /* 13 */

  --lh-tight: 1;           /* section headings */
  --lh-heading: 1.15;
  --lh-body: 1.5;

  /* -- spacing: the source's 4 / 8 / 16 / 24 / 40 / 48 / 80 / 96 rhythm -- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 24px;  --sp-8: 40px;  --sp-10: 48px;
  --sp-12: 48px; --sp-16: 80px; --sp-20: 80px; --sp-24: 96px;

  --section-y: 80px;
  --container: 1158px;     /* main content width */
  --container-wide: 1392px;/* footer / wide bands */
  --gutter: 24px;
  --control-h: 56px;
  --control-h-md: 48px;

  /* -- shape: the nested-radius system ---------------------------------- */
  --r-sm: 8px;             /* dropdown / list item */
  --r-inner-alt: 10px;     /* nested segmented control */
  --r-inner: 12px;         /* button inner face */
  --r-outer: 14px;         /* button / nav outer shell */
  --r-nav: 18px;           /* navigation shell */
  --r-card: 24px;          /* cards, FAQ rows, CTA panels */
  --r-section: 28px;       /* large section shells */
  --r-pill: 62px;

  /* Back-compat aliases so existing rules keep resolving. */
  --r-md: var(--r-inner);
  --r-lg: var(--r-card);
  --r-xl: var(--r-section);

  /* -- depth: the source tints its shadows blue ------------------------- */
  --shadow-sm: 0 2px 6px rgba(17, 69, 144, .24);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .12);
  --shadow-lg: 0 2px 16px rgba(17, 69, 144, .24);
  --shadow-dark: 0 2px 16px rgba(0, 0, 0, .20);

  /* Real QUiCK arrow, exposed as a token so the back link can reference it. */
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.3172 10.4423L11.6922 16.0673C11.5749 16.1846 11.4159 16.2505 11.25 16.2505C11.0841 16.2505 10.9251 16.1846 10.8078 16.0673C10.6905 15.95 10.6247 15.791 10.6247 15.6251C10.6247 15.4593 10.6905 15.3002 10.8078 15.1829L15.3664 10.6251H3.125C2.95924 10.6251 2.80027 10.5593 2.68306 10.442C2.56585 10.3248 2.5 10.1659 2.5 10.0001C2.5 9.83434 2.56585 9.67537 2.68306 9.55816C2.80027 9.44095 2.95924 9.3751 3.125 9.3751H15.3664L10.8078 4.81729C10.6905 4.70002 10.6247 4.54096 10.6247 4.3751C10.6247 4.20925 10.6905 4.05019 10.8078 3.93292C10.9251 3.81564 11.0841 3.74976 11.25 3.74976C11.4159 3.74976 11.5749 3.81564 11.6922 3.93292L17.3172 9.55792C17.3753 9.61596 17.4214 9.68489 17.4529 9.76077C17.4843 9.83664 17.5005 9.91797 17.5005 10.0001C17.5005 10.0822 17.4843 10.1636 17.4529 10.2394C17.4214 10.3153 17.3753 10.3842 17.3172 10.4423Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.68281 9.55795L8.30781 3.93295C8.42509 3.81568 8.58415 3.74979 8.75 3.74979C8.91585 3.74979 9.07491 3.81568 9.19219 3.93295C9.30946 4.05023 9.37535 4.20929 9.37535 4.37514C9.37535 4.54099 9.30946 4.70005 9.19219 4.81733L4.63359 9.37514L16.875 9.37514C17.0408 9.37514 17.1997 9.44099 17.3169 9.5582C17.4342 9.67541 17.5 9.83438 17.5 10.0001C17.5 10.1659 17.4342 10.3249 17.3169 10.4421C17.1997 10.5593 17.0408 10.6251 16.875 10.6251L4.63359 10.6251L9.19219 15.183C9.30946 15.3002 9.37535 15.4593 9.37535 15.6251C9.37535 15.791 9.30946 15.9501 9.19219 16.0673C9.07491 16.1846 8.91585 16.2505 8.75 16.2505C8.58415 16.2505 8.42509 16.1846 8.30781 16.0673L2.68281 10.4423C2.6247 10.3843 2.5786 10.3154 2.54715 10.2395C2.5157 10.1636 2.49951 10.0823 2.49951 10.0001C2.49951 9.91801 2.5157 9.83668 2.54715 9.7608C2.5786 9.68493 2.6247 9.616 2.68281 9.55795Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");

  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
  --dur-fast: .2s;
  --dur: .3s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ======================================================= 02  RESET & BASE */
*,
*::before,
*::after { box-sizing: border-box; }

/* A fenti reset specificitasa 0,0,0 — a leheto legalacsonyabb. Barmelyik
   stiluslap, amit a Zendesk maga fuz a laphoz (pl. az instant-search
   widgethez), mar egyetlen `input[type=search]` szaballyal (0,1,1) felulirja.
   Az urlapelemeknel ez nem kozmetikai kerdes: content-box mellett a padding
   HOZZAADODIK a 100%-os szeleshez, tehat a mezo kilog a sajat formjabol.
   Ezert itt megismeteljuk, valodi specificitassal. */
input,
select,
textarea,
button { box-sizing: border-box; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="submit"],
input[type="button"] { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  /* Hungarian compounds get long ("Számlanyilvántartás", "adófigyelő
     szolgáltatás") and regularly exceed a narrow column or footer cell.
     overflow-wrap inherits, so this one declaration lets any such word break
     instead of spilling out of its box. It only kicks in when the word cannot
     fit on a line of its own, so normal text is unaffected. */
  overflow-wrap: break-word;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-8) 0;
}

::selection {
  background: var(--brand-pale);
  color: var(--ink);
}

/* Screen-reader-only utility. Zendesk's own helpers emit visually-hidden
   labels (the search field's `<label for="query">` among them) and the theme
   had no rule for the class — which would have left the word "Keresés"
   sitting visibly next to every search box. */
.visually-hidden,
.sr-only,
.element-invisible {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Visible, consistent focus for keyboard users on every interactive thing. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================================= 03  TYPOGRAPHY
   Weight 500 for headings, not 600/700 — that is what the source uses, and it
   is a big part of why the site reads as calm rather than shouty. Section
   headings run at 100% line-height. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--ink);
  margin: 0 0 var(--sp-4);
  font-weight: var(--w-medium);
  letter-spacing: -0.015em;
  line-height: var(--lh-heading);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.018em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: -0.01em; }
h5, h6 { font-size: var(--fs-lg); font-weight: var(--w-medium); letter-spacing: 0; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color .15s var(--ease);
}
a:hover { color: var(--brand-strong); text-decoration: underline; }

strong, b { font-weight: var(--w-medium); }

small { font-size: var(--fs-sm); }

code, kbd, pre, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}
code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1em 0.35em;
}
pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  overflow: auto;
}
pre code { background: none; border: 0; padding: 0; }

blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-6);
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink);
}
blockquote p:last-child { margin-bottom: 0; }

/* ================================================= 04  LAYOUT PRIMITIVES */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { margin-block: var(--section-y); }

.panes {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
  margin-block: var(--sp-10);
}

.left-pane { min-width: 0; }
.right-pane { min-width: 0; }

.container-divider {
  border-top: 1px solid var(--border);
  margin-block: var(--sp-10);
}

/* Generic muted meta rows used across article/comment/post/search markup. */
.meta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.meta-data {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}
.meta-group .meta-data + .meta-data::before {
  content: "·";
  margin-right: var(--sp-2);
  color: var(--border-strong);
}

/* =============================================================== 05  ICONS
   The original theme referenced a "copenhagen-icons" webfont that was never
   shipped, so every icon silently degraded to a raw emoji glyph. These are
   inline SVG masks instead: crisp at any size and they inherit currentColor. */
[class^="icon-"]::before,
[class*=" icon-"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  /* The fallback inside var() — rather than a `--icon:` declaration here —
     matters: declaring the custom property on ::before would shadow the value
     inherited from the element and blank out every icon. With the fallback, an
     icon class we ship no artwork for renders as nothing instead of a solid
     coloured square. */
  -webkit-mask: var(--icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3C/svg%3E")) center / contain no-repeat;
  mask: var(--icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3C/svg%3E")) center / contain no-repeat;
  vertical-align: -0.145em;
}

.icon-lock  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.icon-star  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); }
.icon-agent { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.icon-menu  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E"); }
.icon-close { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.icon-search { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); }
.icon-check { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.9422 6.06705L7.94217 16.067C7.88412 16.1252 7.81519 16.1713 7.73932 16.2027C7.66344 16.2342 7.58212 16.2504 7.49998 16.2504C7.41785 16.2504 7.33652 16.2342 7.26064 16.2027C7.18477 16.1713 7.11584 16.1252 7.05779 16.067L2.68279 11.692C2.56552 11.5748 2.49963 11.4157 2.49963 11.2499C2.49963 11.084 2.56552 10.9249 2.68279 10.8077C2.80007 10.6904 2.95913 10.6245 3.12498 10.6245C3.29083 10.6245 3.44989 10.6904 3.56717 10.8077L7.49998 14.7413L17.0578 5.18267C17.1751 5.0654 17.3341 4.99951 17.5 4.99951C17.6658 4.99951 17.8249 5.0654 17.9422 5.18267C18.0594 5.29995 18.1253 5.45901 18.1253 5.62486C18.1253 5.79071 18.0594 5.94977 17.9422 6.06705Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E"); }
.icon-arrow-up { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
.icon-arrow-down { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E"); }
.icon-comments { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E"); }
.icon-attachments { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E"); }
.icon-vote { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); }
.icon-handle { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.6922 7.94254L10.4422 14.1925C10.3841 14.2506 10.3152 14.2967 10.2393 14.3282C10.1634 14.3597 10.0821 14.3758 9.99998 14.3758C9.91785 14.3758 9.83652 14.3597 9.76064 14.3282C9.68477 14.2967 9.61584 14.2506 9.55779 14.1925L3.30779 7.94254C3.19052 7.82526 3.12463 7.6662 3.12463 7.50035C3.12463 7.3345 3.19052 7.17544 3.30779 7.05816C3.42507 6.94088 3.58413 6.875 3.74998 6.875C3.91583 6.875 4.07489 6.94088 4.19217 7.05816L9.99998 12.8668L15.8078 7.05816C15.8659 7.00009 15.9348 6.95403 16.0107 6.9226C16.0865 6.89117 16.1679 6.875 16.25 6.875C16.3321 6.875 16.4134 6.89117 16.4893 6.9226C16.5652 6.95403 16.6341 7.00009 16.6922 7.05816C16.7502 7.11623 16.7963 7.18517 16.8277 7.26104C16.8592 7.33691 16.8753 7.41823 16.8753 7.50035C16.8753 7.58247 16.8592 7.66379 16.8277 7.73966C16.7963 7.81553 16.7502 7.88447 16.6922 7.94254Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E"); }
.icon-gear { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); }
.icon-article { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"); }
.icon-post { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); }
.icon-notification-alert { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.icon-facebook { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); }
.icon-twitter { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.9 2H22l-7 8.1L23.3 22h-6.4l-5-6.6-5.8 6.6H3l7.5-8.6L2 2h6.6l4.6 6.1zm-1.1 18h1.7L7.3 3.8H5.4z'/%3E%3C/svg%3E"); }
.icon-linkedin { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6zM6 9H2v12h4z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E"); }
.icon-googleplus- { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }

/* ============================================================= 06  BUTTONS
   `.button` is the shared shape; `.button-secondary` / `.button-large` are the
   variants the Zendesk templates already reference. `.button1` / `.button2`
   are the theme's own CTA pair inside `.interested`. */
/* `.button-large` and `.button-secondary` also appear on their own (e.g.
   `{{link 'new_post' class='button-large'}}` in the community templates), so
   they have to carry the full button appearance, not just size/colour tweaks. */
/* The source builds every button from two layers: a translucent 14px outer
   shell with a solid 12px inner face. A single element reproduces that with a
   translucent border plus background-clip: padding-box — the fill stops at the
   padding edge, leaving the ring visible. Hover turns the inner face black,
   which is the site's signature button state. */
.button,
button.button,
a.button,
.button-large,
a.button-large,
.button-secondary,
a.button-secondary,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h-md);
  padding: 12px 24px;
  border: 3px solid color-mix(in srgb, var(--brand) 20%, transparent);
  border-radius: var(--r-outer);
  background: var(--brand);
  background-clip: padding-box;
  color: var(--brand-contrast);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--w-medium);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.button:hover,
a.button:hover,
.button-large:hover,
a.button-large:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.button:active,
input[type="submit"]:active,
button[type="submit"]:active { box-shadow: none; }

.button[disabled],
.button:disabled,
input[type="submit"]:disabled,
button:disabled {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--ink-3);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 1;
}

/* Secondary comes after the shared base rule above, and is qualified so it
   also wins when combined with .button-large (e.g. the "mark as solved"
   button, which ships as `button-large button-secondary mark-as-solved`). */
.button-secondary,
a.button-secondary,
.button.button-secondary,
.button-large.button-secondary {
  background: var(--brand-tint);
  border-color: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--ink);
}
.button-secondary:hover,
a.button-secondary:hover,
.button.button-secondary:hover,
.button-large.button-secondary:hover {
  background: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
  color: #fff;
}

.button-large,
a.button-large {
  min-height: var(--control-h);
  padding: 16px 32px;
}

/* ==================================================== 07  FORMS & SEARCH */
label,
.form-field > label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  color: var(--ink);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.5;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

textarea { min-height: 8rem; resize: vertical; }

input::placeholder,
textarea::placeholder { color: var(--ink-3); opacity: 1; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}

select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.6922 7.94254L10.4422 14.1925C10.3841 14.2506 10.3152 14.2967 10.2393 14.3282C10.1634 14.3597 10.0821 14.3758 9.99998 14.3758C9.91785 14.3758 9.83652 14.3597 9.76064 14.3282C9.68477 14.2967 9.61584 14.2506 9.55779 14.1925L3.30779 7.94254C3.19052 7.82526 3.12463 7.6662 3.12463 7.50035C3.12463 7.3345 3.19052 7.17544 3.30779 7.05816C3.42507 6.94088 3.58413 6.875 3.74998 6.875C3.91583 6.875 4.07489 6.94088 4.19217 7.05816L9.99998 12.8668L15.8078 7.05816C15.8659 7.00009 15.9348 6.95403 16.0107 6.9226C16.0865 6.89117 16.1679 6.875 16.25 6.875C16.3321 6.875 16.4134 6.89117 16.4893 6.9226C16.5652 6.95403 16.6341 7.00009 16.6922 7.05816C16.7502 7.11623 16.7963 7.18517 16.8277 7.26104C16.8592 7.33691 16.8753 7.41823 16.8753 7.50035C16.8753 7.58247 16.8592 7.66379 16.8277 7.73966C16.7963 7.81553 16.7502 7.88447 16.6922 7.94254Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
}

.form-field { margin-bottom: var(--sp-5); }

.form,
.form-header { max-width: 46rem; }

.form-header {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.follow-up-hint,
.ccs-input {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.notification {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.notification-error {
  border-color: color-mix(in srgb, var(--red) 35%, #fff);
  background: var(--red-bg);
  color: var(--red);
}
.notification-inline { display: inline-block; }

/* -- search ---------------------------------------------------------------
   Zendesk renders `{{search}}` as a form with an input and (optionally) a
   submit button. The pill field with an inset round submit is the quick.es
   search treatment. */
/* The form is a one-column grid. The field and the submit button share the
   first cell, so the button's right edge is ALWAYS the field's right edge —
   it can no longer drift, whatever else Zendesk renders inside the form
   (a hidden label, the instant-search container, a wrapper). Anything that is
   not an input drops to the second row and spans the full column width, which
   is what makes the instant-search dropdown match the field. */
.search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.search > * { grid-column: 1; min-width: 0; }
.search > input { grid-row: 1; }
.search > *:not(input) { grid-row: 2; }

/* The field is pinned to the container's width. The generic `width: 100%`
   further up only matches inputs with an explicit type attribute, so a field
   Zendesk renders without one would fall back to its intrinsic size and could
   end up wider (or narrower) than the blocks around it — this covers every
   variant, and max-width guarantees it can never exceed the column. */
.search input:not([type="submit"]):not([type="button"]):not([type="hidden"]) {
  /* Ez a szabaly (0,4,1) tartja a mezot pontosan a rácsoszlop szélességén.
     A box-sizing itt NEM dekoracio: content-box mellett a 84px padding es a
     keret a 100%-hoz ADODNA, a mezo kilogna a formbol, a submit gomb viszont
     — mert a rácsoszlophoz igazodik — a forma szélén maradna, azaz a látható
     mező belsejébe csúszna. Pontosan ez tortent elesben: a mezo 566px lett
     480 helyett, a gomb pedig 92px-re a mezo jobb szeletol. */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* The magnifier is painted as the INPUT's own background rather than as a
   pseudo-element on the surrounding <form>. That is the whole point: the icon
   position and the padding that reserves room for it are then two properties
   of the same element, so they cannot drift apart no matter what markup
   Zendesk wraps around the field. `text-overflow: ellipsis` is the last line
   of defence if a placeholder still can't fit. */
.search input:not([type="submit"]):not([type="button"]):not([type="hidden"]) {
  padding: 1rem 3.5rem 1rem 1.25rem;
  border-radius: var(--r-pill);
  border-color: var(--border-strong);
  font-size: var(--fs-base);
  box-shadow: var(--shadow-sm);
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.15rem center;
  background-size: 1.15rem;
}

/* When Zendesk renders its own submit button, that blue circle becomes the
   affordance and the background glyph would sit underneath it — drop it and
   widen the padding to clear the button instead. */
.search:has(input[type="submit"]) input:not([type="submit"]):not([type="button"]):not([type="hidden"]) {
  background-image: none;
  padding-right: 4rem;
}

.search input[type="submit"] {
  position: static;
  justify-self: end;
  align-self: center;
  margin-right: 6px;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.15rem;
}
.search input[type="submit"]:hover {
  background-color: var(--ink);
  box-shadow: none;
}

.search-full { max-width: 100%; }

/* -- instant-search dropdown --------------------------------------------
   Zendesk's instant search renders its own container inside the form; the
   grid above already gives it the field's full width and puts it directly
   underneath. These rules give it the theme's card treatment. The selector
   list is deliberately broad because the container's class name is not
   documented and has changed between Zendesk versions. */
.search > ul,
.search > div,
.search .suggestion-list,
.search [role="listbox"],
.search-suggestions {
  width: 100%;
  margin-top: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  list-style: none;
  padding: var(--sp-2);
  text-align: left;
  z-index: 40;
}

.search > ul li,
.search > div li,
.search .suggestion-list li,
.search [role="listbox"] li,
.search-suggestions li { list-style: none; margin: 0; }

/* Ha a Zendesk a talalati listat egy wrapper <div>-be teszi, a kartya-stilust
   a div kapja, a belso <ul> viszont megtartana a bongeszo alapertelmezett
   40px-es behuzasat es a bulleteket — a sorok igy beljebb kezdodnenek, mint a
   kartya paddingja. Nullazzuk. */
.search > div ul,
.search > div ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search > ul li a,
.search > div li a,
.search .suggestion-list li a,
.search [role="listbox"] li a,
.search [role="option"],
.search-suggestions li a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-inner);
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: var(--w-regular);
  line-height: 1.45;
  text-decoration: none;
}
.search > ul li a:hover,
.search > div li a:hover,
.search .suggestion-list li a:hover,
.search [role="listbox"] li a:hover,
.search [role="option"]:hover,
.search [role="option"][aria-selected="true"],
.search-suggestions li a:hover {
  background: var(--brand-tint);
  color: var(--brand-strong);
  text-decoration: none;
}

/* Zendesk bolds the matched substring inside each suggestion. */
.search > ul li a strong,
.search > div li a strong,
.search .suggestion-list li a strong,
.search [role="option"] strong,
.search-suggestions li a strong {
  font-weight: var(--w-medium);
  color: var(--brand-strong);
}
/* ================================================ 08  HEADER / NAVIGATION */
/* Three-column grid rather than flex: the middle column is what centres the
   menu on the page, independent of how wide the logo and the search field
   happen to be. With flex the menu would drift off-centre. */
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-8);
}

.header .logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.header .logo img {
  max-height: 40px;
  width: auto;
}

/* `.desktop-menu` also carries the `.header` class in the markup, so the
   layout properties above have to be neutralised here. min-width:0 lets it
   shrink instead of pushing the nav out of the container. */
/* `.desktop-menu` carries the `.header` class too, so it would inherit the
   three-column grid above and stretch to 650px, squeezing the search field.
   display:block makes it shrink-wrap its list again. */
.desktop-menu {
  display: block;
  min-width: 0;
  padding: 0;
  margin: 0;
  max-width: none;
  justify-self: center;
}

.menu-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list li a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--r-inner);
  color: var(--ink-2);
  font-size: var(--fs-base);
  font-weight: var(--w-regular);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.menu-list li a:hover {
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}

/* The header is now just the logo plus the search field. */
/* Narrower than before, right-aligned in the third grid column but held in
   from the edge so it does not sit flush against the page boundary. */
.header-search-wrapper {
  justify-self: end;
  width: 100%;
  max-width: 17rem;
  min-width: 0;
}
.header-search-wrapper .search,
.search.header-search { width: 100%; }

/* Direct hook on the form itself, so the field keeps its header appearance
   even if it is ever moved out of the wrapper. */
.search.header-search input {
  padding-block: 0.65rem;
  font-size: var(--fs-sm);
}
.header-search-wrapper .search input {
  padding-block: 0.65rem;
  font-size: var(--fs-sm);
  background-color: var(--surface-2);
  border-color: transparent;
  box-shadow: none;
}
.header-search-wrapper .search input:hover { background-color: var(--surface-3); }
.header-search-wrapper .search input:focus {
  background-color: var(--surface);
  border-color: var(--brand);
}

/* Kept for the (now unused) nav markup, so dropping a menu or a CTA back into
   header.hbs still renders correctly. */
.nav-wrapper {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
  min-width: 0;
}

.user-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Primary header CTA — the pill button in the quick.es nav. */
.user-nav .register,
.user-nav .submit-a-request {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  white-space: nowrap;
  transition: background-color .16s var(--ease), transform .16s var(--ease);
}
.user-nav .register:hover,
.user-nav .submit-a-request:hover {
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.nav-wrapper .icon-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.35rem;
}
.nav-wrapper .icon-menu:hover { background: var(--surface-2); }

.user-info { position: relative; }
.user-info .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--w-regular);
  cursor: pointer;
}
.user-info .dropdown-toggle:hover { background: var(--surface-2); }
.user-info .user-avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; }

.mobile-menu { display: none; }

/* The header no longer carries a menu bar, so the hamburger has nothing to
   toggle: show the "Regisztrálok" button inline at every width instead of
   hiding it behind a menu button. (.desktop-menu / .menu-list styling above is
   kept intact so a menu can be dropped back into header.hbs at any time.) */
.nav-wrapper .icon-menu { display: none !important; }

/* ==================================== 09  HOME: HERO / BLOCKS / PROMOTED */

/* -- hero -----------------------------------------------------------------
   The signature quick.es move: a dark panel with a large, tightly-set
   headline and the search field as the primary action. */
/* NOTE: `hero2` is reused as a modifier on the inner title/description spans
   and on the illustration (`<img class="hero2 img">`), so the panel styling is
   scoped to the <section> element — otherwise the image gets the dark
   background painted over it. */
section.hero2 {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--sp-10);
  align-items: center;
  margin-block: var(--sp-8) var(--section-y);
  padding: var(--sp-12) var(--sp-12);
  border-radius: var(--r-xl);
  background: var(--dark);
  color: var(--on-dark);
  overflow: hidden;
  position: relative;
}

/* Soft brand glow, echoing the gradient washes on quick.es. */
section.hero2::before {
  content: "";
  position: absolute;
  left: 30%;
  right: -20%;
  top: -40%;
  bottom: -40%;
  background: radial-gradient(ellipse at center,
              color-mix(in srgb, var(--brand) 60%, transparent) 0%,
              transparent 62%);
  opacity: .55;
  pointer-events: none;
}

.hero21,
.hero22 { position: relative; z-index: 1; min-width: 0; }

span.hero2.title,
.hero2 .title {
  display: block;
  margin-bottom: var(--sp-6);
  font-family: var(--font-head);
  font-size: var(--fs-display);
  font-weight: var(--w-medium);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--on-dark);
  text-wrap: balance;
}

span.hero2.descr,
.hero2 .descr {
  display: block;
  margin-top: var(--sp-5);
  color: var(--on-dark-2);
  font-size: var(--fs-base);
  line-height: 1.6;
  max-width: 34rem;
}
section.hero2 .descr p { margin: 0; }
section.hero2 .descr a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, #fff 45%, transparent);
}
section.hero2 .descr a:hover { text-decoration-color: #fff; }

section.hero2 .search {
  max-width: 30rem;   /* was full-column width, which read as oversized */
}
section.hero2 .search input {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

/* The shipped hero illustration is dark line art (#191c1f), so on the dark
   panel it needs a light surface behind it — which also echoes the floating
   light cards in the quick.es hero. */
.hero22 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
img.hero2.img,
.hero2 .img { width: 100%; max-width: 22rem; height: auto; }

/* Copenhagen-style hero, kept so community/other templates don't regress.
   These templates place `.hero` outside any `.container`, so it carries the
   container constraints itself — otherwise it bleeds edge to edge and its
   rounded corners fall off-screen. */
.hero {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: var(--sp-8) auto;
  padding: var(--sp-12) var(--sp-8);
  /* Keeps the "homepage background image" theme setting working: it layers
     over the dark panel when one is uploaded, and is simply absent otherwise. */
  background-color: var(--dark);
  background-image: url(/hc/theming_assets/01KYJ2G8C92F9SBSMZS8TW7EDF);
  background-size: cover;
  background-position: center;
  color: var(--on-dark);
  border-radius: var(--r-xl);
  text-align: center;
}
.hero-inner { max-width: 44rem; margin-inline: auto; padding-inline: var(--gutter); }
.hero h1, .hero .page-header h1 { color: var(--on-dark); }

/* -- category / section blocks ------------------------------------------- */
.knowledge-base { margin-block: var(--section-y); }

.categories,
.blocks { margin-block: var(--sp-10); }

.blocks-list-title,
.faqs-list-title {
  margin-bottom: var(--sp-8);
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: var(--w-medium);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-transform: none;
  text-align: center;
}

/* "Milyen témájú kérdésed lenne?" — the whole block sits on a large grey
   section shell (28px, the source system's section radius). */
.categories.blocks {
  padding: var(--sp-16) var(--sp-8);
  border-radius: var(--r-section);
  background: var(--surface-2);
}
.categories.blocks > .pagination { margin-bottom: 0; }

.blocks-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.blocks-item {
  display: flex;
  margin: 0;
  border: 0;
  background: none;
}

.blocks-item-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-6);
  padding-right: var(--sp-10);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease),
              transform .18s var(--ease);
}
.blocks-item-link:hover {
  border-color: var(--brand-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Chevron affordance instead of the old ▸ pseudo-content. */
.blocks-item-link::after {
  content: "";
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-5);
  width: 1.15rem;
  height: 1.15rem;
  background-color: var(--border-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.3172 10.4423L11.6922 16.0673C11.5749 16.1846 11.4159 16.2505 11.25 16.2505C11.0841 16.2505 10.9251 16.1846 10.8078 16.0673C10.6905 15.95 10.6247 15.791 10.6247 15.6251C10.6247 15.4593 10.6905 15.3002 10.8078 15.1829L15.3664 10.6251H3.125C2.95924 10.6251 2.80027 10.5593 2.68306 10.442C2.56585 10.3248 2.5 10.1659 2.5 10.0001C2.5 9.83434 2.56585 9.67537 2.68306 9.55816C2.80027 9.44095 2.95924 9.3751 3.125 9.3751H15.3664L10.8078 4.81729C10.6905 4.70002 10.6247 4.54096 10.6247 4.3751C10.6247 4.20925 10.6905 4.05019 10.8078 3.93292C10.9251 3.81564 11.0841 3.74976 11.25 3.74976C11.4159 3.74976 11.5749 3.81564 11.6922 3.93292L17.3172 9.55792C17.3753 9.61596 17.4214 9.68489 17.4529 9.76077C17.4843 9.83664 17.5005 9.91797 17.5005 10.0001C17.5005 10.0822 17.4843 10.1636 17.4529 10.2394C17.4214 10.3153 17.3753 10.3842 17.3172 10.4423Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.3172 10.4423L11.6922 16.0673C11.5749 16.1846 11.4159 16.2505 11.25 16.2505C11.0841 16.2505 10.9251 16.1846 10.8078 16.0673C10.6905 15.95 10.6247 15.791 10.6247 15.6251C10.6247 15.4593 10.6905 15.3002 10.8078 15.1829L15.3664 10.6251H3.125C2.95924 10.6251 2.80027 10.5593 2.68306 10.442C2.56585 10.3248 2.5 10.1659 2.5 10.0001C2.5 9.83434 2.56585 9.67537 2.68306 9.55816C2.80027 9.44095 2.95924 9.3751 3.125 9.3751H15.3664L10.8078 4.81729C10.6905 4.70002 10.6247 4.54096 10.6247 4.3751C10.6247 4.20925 10.6905 4.05019 10.8078 3.93292C10.9251 3.81564 11.0841 3.74976 11.25 3.74976C11.4159 3.74976 11.5749 3.81564 11.6922 3.93292L17.3172 9.55792C17.3753 9.61596 17.4214 9.68489 17.4529 9.76077C17.4843 9.83664 17.5005 9.91797 17.5005 10.0001C17.5005 10.0822 17.4843 10.1636 17.4529 10.2394C17.4214 10.3153 17.3753 10.3842 17.3172 10.4423Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.blocks-item-link:hover::after {
  background-color: var(--brand);
  transform: translateX(3px);
}

.blocks-item-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--w-medium);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-align: left;
}

.blocks-item-description {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: left;
}

.blocks-item-internal .icon-lock { margin-left: var(--sp-2); color: var(--ink-3); }

/* -- promoted articles ---------------------------------------------------- */
.faqs { margin-block: var(--section-y); }

/* "Legnépszerűbb cikkek" — its own card, white rather than grey so the two
   home-page blocks read as a pair without competing. */
.faqs > .articles {
  margin-bottom: var(--sp-16);
  padding: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-section);
  background: var(--surface);
}

/* Inside the card the promoted list reads better as separated rows than as a
   loose grid of pills. */
.faqs > .articles .promoted-articles { gap: 0 var(--sp-8); }
.faqs > .articles .promoted-articles-item a { border-top: 1px solid var(--border); }
.faqs > .articles .promoted-articles-item:first-child a { border-top: 0; }
@media (min-width: 768px) {
  /* Two columns: the first row of the second column must not carry a rule. */
  .faqs > .articles .promoted-articles-item:nth-child(2) a { border-top: 0; }
}

.article-list,
.promoted-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.promoted-articles-item a,
.article-list-item .article-list-link,
.article-list-item > a {
  position: relative;
  display: block;
  padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-4);
  border-radius: var(--r-inner);
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: var(--w-medium);
  line-height: 1.45;
  text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
/* Arrow affordance on each row, sliding a little on hover. */
.promoted-articles-item a::after,
.article-list-item .article-list-link::after,
.article-list-item > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--sp-4);
  width: 1.05rem;
  height: 1.05rem;
  transform: translateY(-50%);
  background-color: var(--border-strong);
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
  mask: var(--icon-arrow-right) center / contain no-repeat;
  transition: background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.promoted-articles-item a:hover::after,
.article-list-item .article-list-link:hover::after,
.article-list-item > a:hover::after {
  background-color: var(--brand);
  transform: translateY(-50%) translateX(3px);
}

.promoted-articles-item a:hover,
.article-list-item .article-list-link:hover,
.article-list-item > a:hover {
  background: var(--brand-tint);
  color: var(--brand-strong);
  text-decoration: none;
}

.article-list-item {
  display: flex;
  align-items: center;
  margin: 0;
  border: 0;
  padding: 0;
}
.article-list-item .icon-star {
  flex: 0 0 auto;
  margin-left: var(--sp-3);
  color: var(--brand);
  font-size: 0.9rem;
}
.article-promoted .article-list-link { font-weight: var(--w-medium); }

.see-all-articles {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-weight: var(--w-medium);
  font-size: var(--fs-sm);
}

/* ======================================== 10  PROMO BLOCKS & CTA PANELS */

/* -- the three-card promo strip used on home / section / article --------- */
.faqs-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--sp-5);
  margin-block: var(--section-y);
}

/* IMPORTANT: in this theme's markup every child of a promo card *also* carries
   the `faqs-links-section` class (`<img class="faqs-links-section img">`,
   `<div class="faqs-links-section subtitle">`, …). The card styling must
   therefore be scoped to the direct child of `.faqs-links`, otherwise every
   inner element gets its own border and padding too. */
.faqs-links > .faqs-links-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.faqs-links > .faqs-links-section:hover {
  border-color: var(--brand-border);
  box-shadow: var(--shadow-md);
}

img.faqs-links-section.img,
.faqs-links-section .img {
  width: auto;
  max-width: 100%;
  max-height: 6.5rem;
  height: auto;
  margin: 0 0 var(--sp-2);
  align-self: flex-start;
}

.faqs-links-section.subtitle,
.faqs-links-section .subtitle {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--w-medium);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-transform: none;
}

.faqs-links-section.descr,
.faqs-links-section .descr {
  flex: 1 1 auto;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.faqs-links-section .descr ul {
  margin: 0;
  padding: 0;
  list-style: none !important;   /* the templates set an inline list-style */
  margin-left: 0 !important;
  display: grid;
  gap: var(--sp-2);
}
.faqs-links-section .descr li {
  position: relative;
  padding-left: 1.6rem;
}
.faqs-links-section .descr li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.95rem;
  height: 0.95rem;
  background-color: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.9422 6.06705L7.94217 16.067C7.88412 16.1252 7.81519 16.1713 7.73932 16.2027C7.66344 16.2342 7.58212 16.2504 7.49998 16.2504C7.41785 16.2504 7.33652 16.2342 7.26064 16.2027C7.18477 16.1713 7.11584 16.1252 7.05779 16.067L2.68279 11.692C2.56552 11.5748 2.49963 11.4157 2.49963 11.2499C2.49963 11.084 2.56552 10.9249 2.68279 10.8077C2.80007 10.6904 2.95913 10.6245 3.12498 10.6245C3.29083 10.6245 3.44989 10.6904 3.56717 10.8077L7.49998 14.7413L17.0578 5.18267C17.1751 5.0654 17.3341 4.99951 17.5 4.99951C17.6658 4.99951 17.8249 5.0654 17.9422 5.18267C18.0594 5.29995 18.1253 5.45901 18.1253 5.62486C18.1253 5.79071 18.0594 5.94977 17.9422 6.06705Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.9422 6.06705L7.94217 16.067C7.88412 16.1252 7.81519 16.1713 7.73932 16.2027C7.66344 16.2342 7.58212 16.2504 7.49998 16.2504C7.41785 16.2504 7.33652 16.2342 7.26064 16.2027C7.18477 16.1713 7.11584 16.1252 7.05779 16.067L2.68279 11.692C2.56552 11.5748 2.49963 11.4157 2.49963 11.2499C2.49963 11.084 2.56552 10.9249 2.68279 10.8077C2.80007 10.6904 2.95913 10.6245 3.12498 10.6245C3.29083 10.6245 3.44989 10.6904 3.56717 10.8077L7.49998 14.7413L17.0578 5.18267C17.1751 5.0654 17.3341 4.99951 17.5 4.99951C17.6658 4.99951 17.8249 5.0654 17.9422 5.18267C18.0594 5.29995 18.1253 5.45901 18.1253 5.62486C18.1253 5.79071 18.0594 5.94977 17.9422 6.06705Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}

/* The CTA inside each promo card is a <div class="…button"> wrapped in <a>. */
.faqs-links-section > a { margin-top: auto; text-decoration: none; }
.faqs-links-section.button,
.faqs-links-section .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--control-h-md);
  padding: 12px 20px;
  border: 3px solid color-mix(in srgb, var(--brand) 20%, transparent);
  border-radius: var(--r-outer);
  background-clip: padding-box;
  background: var(--brand);
  color: var(--brand-contrast);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  text-align: center;
  transition: background-color .16s var(--ease), transform .16s var(--ease);
}
.faqs-links-section > a:hover .button {
  background: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
}

/* -- "PÉNZÜGYI ÉS ADÓZÁSI MEGOLDÁSAINK" panel --------------------------- */
/* CTA panel — content centred, and the two buttons sit side by side whenever
   there is room (they only stack on the narrowest phones). */
.interested {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--brand-tint);
  text-align: center;
}
.interested > div:first-child {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.interested .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--sp-2);
  width: 100%;
}
.interested .buttons > a { text-decoration: none; }
/* Same nested 14/12 shape and black hover as every other button in the
   system — these were still fully rounded pills, which now looked out of
   place next to the rest. */
/* flex-basis 220px: two buttons share the row wherever the panel is wide
   enough for both, and where it is not they stack as equal full-width
   buttons rather than two differently-sized centred ones. */
.interested .buttons > a { display: flex; flex: 1 1 220px; min-width: 0; }
.interested .button1,
.interested .button2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--control-h-md);
  padding: 12px 20px;
  border: 3px solid transparent;
  border-radius: var(--r-outer);
  background-clip: padding-box;
  font-size: var(--fs-base);
  font-weight: var(--w-medium);
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.interested .button1 {
  background: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 20%, transparent);
  color: var(--brand-contrast);
}
.interested .button2 {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.interested .buttons > a:hover .button1,
.interested .buttons > a:hover .button2 {
  background: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
  color: #fff;
}

/* The article page places .votes and .interested side by side. */
.callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--sp-5);
  margin-block: var(--sp-10);
}
.callouts .votes { display: flex; }
/* ============================================ 11  SECTION & ARTICLE PAGES */

/* -- page header (section / category / topic) ---------------------------- */
.page-header {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.page-header h1 {
  margin: 0;
  font-size: var(--fs-h1);
  letter-spacing: -0.03em;
}
.page-header-description {
  margin: var(--sp-3) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-lg);
  line-height: 1.6;
  max-width: 46rem;
}
.page-header .icon-lock { margin-left: var(--sp-2); color: var(--ink-3); font-size: 0.8em; }
.page-header-item { margin-top: var(--sp-4); }

.section-empty,
.category-empty {
  display: block;
  padding: var(--sp-8);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--ink-3);
  font-style: normal;
  text-align: center;
}

.category-content { margin-block: var(--sp-10); }
.category-container { display: grid; gap: var(--sp-10); }
.section-tree { margin-block: var(--sp-8); }
.section-tree-title { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.section-tree .icon-lock { color: var(--ink-3); }

/* -- left pane section navigation ---------------------------------------- */
.left-pane-sections {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.left-pane .items {
  display: block;
  border-bottom: 1px solid var(--border);
}
.left-pane-sections > li:last-child { border-bottom: 0; }
.left-pane .items::after { content: none; }   /* replaced by the chevron below */

.left-pane .items > a {
  position: relative;
  display: block;
  padding: 0.85rem 2.25rem 0.85rem var(--sp-4);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: var(--w-regular);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.left-pane .items > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--sp-4);
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  background-color: var(--border-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.3172 10.4423L11.6922 16.0673C11.5749 16.1846 11.4159 16.2505 11.25 16.2505C11.0841 16.2505 10.9251 16.1846 10.8078 16.0673C10.6905 15.95 10.6247 15.791 10.6247 15.6251C10.6247 15.4593 10.6905 15.3002 10.8078 15.1829L15.3664 10.6251H3.125C2.95924 10.6251 2.80027 10.5593 2.68306 10.442C2.56585 10.3248 2.5 10.1659 2.5 10.0001C2.5 9.83434 2.56585 9.67537 2.68306 9.55816C2.80027 9.44095 2.95924 9.3751 3.125 9.3751H15.3664L10.8078 4.81729C10.6905 4.70002 10.6247 4.54096 10.6247 4.3751C10.6247 4.20925 10.6905 4.05019 10.8078 3.93292C10.9251 3.81564 11.0841 3.74976 11.25 3.74976C11.4159 3.74976 11.5749 3.81564 11.6922 3.93292L17.3172 9.55792C17.3753 9.61596 17.4214 9.68489 17.4529 9.76077C17.4843 9.83664 17.5005 9.91797 17.5005 10.0001C17.5005 10.0822 17.4843 10.1636 17.4529 10.2394C17.4214 10.3153 17.3753 10.3842 17.3172 10.4423Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.3172 10.4423L11.6922 16.0673C11.5749 16.1846 11.4159 16.2505 11.25 16.2505C11.0841 16.2505 10.9251 16.1846 10.8078 16.0673C10.6905 15.95 10.6247 15.791 10.6247 15.6251C10.6247 15.4593 10.6905 15.3002 10.8078 15.1829L15.3664 10.6251H3.125C2.95924 10.6251 2.80027 10.5593 2.68306 10.442C2.56585 10.3248 2.5 10.1659 2.5 10.0001C2.5 9.83434 2.56585 9.67537 2.68306 9.55816C2.80027 9.44095 2.95924 9.3751 3.125 9.3751H15.3664L10.8078 4.81729C10.6905 4.70002 10.6247 4.54096 10.6247 4.3751C10.6247 4.20925 10.6905 4.05019 10.8078 3.93292C10.9251 3.81564 11.0841 3.74976 11.25 3.74976C11.4159 3.74976 11.5749 3.81564 11.6922 3.93292L17.3172 9.55792C17.3753 9.61596 17.4214 9.68489 17.4529 9.76077C17.4843 9.83664 17.5005 9.91797 17.5005 10.0001C17.5005 10.0822 17.4843 10.1636 17.4529 10.2394C17.4214 10.3153 17.3753 10.3842 17.3172 10.4423Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color .15s var(--ease);
}
.left-pane .items > a:hover {
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}
.left-pane .items > a:hover::after { background-color: var(--ink-3); }

/* Current section — set by script.js on both section and article pages. */
.left-pane .section-current-li,
.left-pane .article-current-li {
  background: var(--brand-tint);
}
.left-pane .items.section-current-li > a,
.left-pane .items.article-current-li > a,
.left-pane a.section-current-li,
.left-pane a.article-current-a {
  color: var(--brand-strong);
  font-weight: var(--w-medium);
  cursor: default;
  text-decoration: none;
}
.left-pane .items.section-current-li > a::after,
.left-pane .items.article-current-li > a::after {
  background-color: var(--brand);
}
/* A lefele fordulo nyil azt igeri, hogy alatta kinyilik valami — ez csak a
   cikkoldalon igaz, ott kerul a szekcio ala a cikkeinek listaja. A szekcio
   oldalon nem nyilik ki semmi, ott maradjon a nyil a helyen. */
.left-pane .items.article-current-li > a::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Article list injected under the current section on article pages. */
.left-pane .section-articles-hidden { display: none; }

.left-pane .section-articles {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) var(--sp-4) var(--sp-4) var(--sp-6);
  background: var(--brand-tint);
  border-bottom: 1px solid var(--border);
}
.left-pane .section-articles li { margin: 0; }

.left-pane .section-articles-links {
  display: block;
  padding: 0.4rem 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: var(--w-regular);
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}
.left-pane .section-articles-links:hover { color: var(--brand-strong); text-decoration: underline; }
.left-pane .section-articles-links.more { font-weight: var(--w-medium); color: var(--brand); }

.left-pane .search { margin-bottom: var(--sp-6); }
/* Sidebar variant: only the vertical padding and the type size change — the
   right-hand padding and the icon stay locked together in the base rule. */
.left-pane .search input:not([type="submit"]):not([type="button"]):not([type="hidden"]) {
  padding-block: 0.7rem;
  font-size: var(--fs-sm);
}

/* Collapsible sidebar / nav (used by some Zendesk-rendered lists). */
.collapsible-nav,
.collapsible-sidebar { position: relative; }
.collapsible-nav-list { list-style: none; margin: 0; padding: 0; }
.collapsible-sidebar-title { cursor: pointer; }

/* -- article page -------------------------------------------------------- */
.article { min-width: 0; }

.article-header { margin-bottom: var(--sp-8); }

.article-title,
h1.article-title {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-h1);
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.article-title .icon-lock { margin-left: var(--sp-2); color: var(--ink-3); font-size: 0.65em; }

.article-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.avatar { position: relative; flex: 0 0 auto; }
.user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
}
.article-avatar .user-avatar,
.comment-avatar .user-avatar { width: 2.5rem; height: 2.5rem; }

.avatar .icon-agent {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.65rem;
  border: 2px solid var(--surface);
}

.article-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.article-meta > a { color: var(--ink); font-weight: var(--w-medium); font-size: var(--fs-sm); }
.article-meta > a:hover { color: var(--brand); }

.article-info { margin-bottom: var(--sp-8); }
.article-content { min-width: 0; }

/* -- article body typography ---------------------------------------------
   This is the reading surface; everything here is tuned for long-form text. */
.article-body {
  font-size: var(--fs-lg);
  line-height: 1.75;
  color: var(--ink);
  max-width: 46rem;
}
.article-body > *:first-child { margin-top: 0; }
.article-body > *:last-child { margin-bottom: 0; }

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 { margin-top: var(--sp-10); margin-bottom: var(--sp-4); }
.article-body h2 { font-size: var(--fs-h3); }
.article-body h3 { font-size: var(--fs-h4); }
.article-body h4 { font-size: var(--fs-base); }

.article-body p { margin-bottom: var(--sp-5); }

.article-body a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--brand-border);
}
.article-body a:hover { color: var(--brand-strong); text-decoration-color: currentColor; }

.article-body ul,
.article-body ol { margin: 0 0 var(--sp-5); padding-left: 1.5rem; }
.article-body li { margin-bottom: var(--sp-2); }
.article-body li::marker { color: var(--brand); }

.article-body img { border-radius: var(--r-md); margin-block: var(--sp-6); }

.article-body table,
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-block: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: var(--fs-base);
}
.article-body th,
table th {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-weight: var(--w-medium);
  text-align: left;
  font-size: var(--fs-sm);
}
.article-body td,
table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.article-body tr:last-child td,
table tr:last-child td { border-bottom: 0; }

/* -- attachments ---------------------------------------------------------- */
.article-attachments,
.request-attachments,
.comment-attachments { margin-top: var(--sp-8); }

.attachments { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

.attachments .attachment-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.attachments .attachment-item::before {
  content: "";
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  transform: translateY(-50%);
  background-color: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
}
.attachments .attachment-item > a { font-weight: var(--w-regular); color: var(--ink); }
.attachments .attachment-item > a:hover { color: var(--brand); }
.attachment-meta { margin-left: auto; }
.attachment-meta-item { color: var(--ink-3); font-size: var(--fs-sm); }
a.attachment-meta-item { color: var(--brand); font-weight: var(--w-regular); }

/* -- vote widget ---------------------------------------------------------- */
/* Centred to match the CTA panel it sits beside in the .callouts row. */
.article-votes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  text-align: center;
}

.article-votes-question {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--w-medium);
  letter-spacing: -0.015em;
  color: var(--ink);
}

.article-votes-controls { display: flex; gap: var(--sp-3); }

.article-vote,
.button.article-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: auto;
  min-width: 5.5rem;
  min-height: var(--control-h-md);
  padding: 12px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-outer);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease),
              color .16s var(--ease);
}
.article-vote::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  background-color: currentColor;
  -webkit-mask: var(--icon, none) center / contain no-repeat;
  mask: var(--icon, none) center / contain no-repeat;
}
/* Zendesk renders its own <span class="icon-…"> inside the vote control; the
   ::before above is the single source of truth, so suppress the nested one
   instead of showing two glyphs. */
.article-vote > [class^="icon-"],
.article-vote > [class*=" icon-"] { display: none; }
.article-vote-up { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); }
.article-vote-down { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17'/%3E%3C/svg%3E"); }

.article-vote:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-strong);
  transform: none;
  box-shadow: none;
}
.article-vote[aria-checked="true"],
.article-vote.vote-voted {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-contrast);
}

.article-votes-count,
small.article-votes-count {
  display: block;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}
.article-votes-count b { color: var(--ink); font-weight: var(--w-medium); }

/* -- article footer / disclaimer ----------------------------------------- */
.article-footer__c {
  margin-block: var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-2);
}
.article-footer__c p { margin-bottom: var(--sp-3); }
.article-footer__c p:last-child { margin-bottom: 0; }
.article-footer__c i { color: var(--ink-3); font-size: var(--fs-xs); }

/* -- share --------------------------------------------------------------- */
.article-share,
.post-share { margin-block: var(--sp-6); }
.share {
  display: flex;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.share a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink-2);
  font-size: 0.9rem;
}
.share a:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }

/* -- related / recent articles ------------------------------------------- */
/* "További releváns cikkek" — its own card, matching the home page's
   promoted-articles box so the two article lists read as one component. */
.article-relatives {
  margin-block: var(--sp-10);
  padding: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-section);
  background: var(--surface);
}
.article-relatives:empty { display: none; }

.related-articles,
.recent-articles { margin-bottom: 0; }
.related-articles + .recent-articles { margin-top: var(--sp-8); }

.recent-articles h3,
.related-articles h3,
.related-articles-title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--w-medium);
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
}

.recent-articles ul,
.related-articles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }

.recent-articles li,
.related-articles li { margin: 0; }

.recent-articles li a,
.related-articles li a {
  position: relative;
  display: block;
  padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border);
  border-radius: var(--r-inner);
  color: var(--ink);
  font-weight: var(--w-regular);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.recent-articles li:first-child a,
.related-articles li:first-child a { border-top: 0; }

.recent-articles li a::after,
.related-articles li a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--sp-4);
  width: 1.05rem;
  height: 1.05rem;
  transform: translateY(-50%);
  background-color: var(--border-strong);
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
  mask: var(--icon-arrow-right) center / contain no-repeat;
  transition: background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.recent-articles li a:hover::after,
.related-articles li a:hover::after {
  background-color: var(--brand);
  transform: translateY(-50%) translateX(3px);
}
.recent-articles li a:hover,
.related-articles li a:hover {
  background: var(--brand-tint);
  color: var(--brand-strong);
  text-decoration: none;
}

/* ============================================================ 12  COMMENTS */
.article-comments,
.post-comments { margin-top: var(--sp-12); }

.comments { border-top: 1px solid var(--border); padding-top: var(--sp-8); }

.comment-overview {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.comment-heading {
  margin: 0;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  text-transform: none;
}
.comment-callout { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
.comment-sorter { margin-left: auto; }

.comment-list { list-style: none; margin: 0 0 var(--sp-8); padding: 0; display: grid; gap: var(--sp-4); }

.comment {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.comment-official { border-color: var(--brand-border); background: var(--brand-tint); }

.comment-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: start;
}
.comment-info { min-width: 0; }

.comment-author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.comment-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.comment-meta > span { font-weight: var(--w-medium); font-size: var(--fs-sm); }
.comment-meta > span a { color: var(--ink); }
.comment-meta > span a:hover { color: var(--brand); }
.comment-labels { display: flex; gap: var(--sp-2); margin-left: auto; }

.comment-body {
  color: var(--ink);
  line-height: 1.7;
}
.comment-body > *:last-child { margin-bottom: 0; }

.comment-actions-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}

/* -- comment vote (up / sum / down) --------------------------------------- */
.vote,
.comment-vote,
.post-vote {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.vote-up,
.vote-down {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.vote-up::before,
.vote-down::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: var(--icon, none) center / contain no-repeat;
  mask: var(--icon, none) center / contain no-repeat;
}
.vote-up { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
.vote-down { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E"); }
/* Same as the article vote: keep exactly one glyph per control. */
.vote-up > [class^="icon-"],
.vote-up > [class*=" icon-"],
.vote-down > [class^="icon-"],
.vote-down > [class*=" icon-"] { display: none; }
.vote-up:hover,
.vote-down:hover { background: var(--surface-2); color: var(--ink); }
.vote-voted { background: var(--brand-tint); color: var(--brand); }
.vote-sum {
  min-width: 1.75rem;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  color: var(--ink);
}

/* -- comment form --------------------------------------------------------- */
.comment-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.comment-container { min-width: 0; }
.comment-container textarea { min-height: 6rem; }
.comment-form-controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.comment-fields { margin-top: var(--sp-3); }
.comment-ccs { margin-top: var(--sp-3); }

.comment-show-container,
.comment-show-container-content {
  cursor: pointer;
  color: var(--ink-3);
}

/* -- status labels -------------------------------------------------------- */
.status-label {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: var(--w-medium);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.status-label-pending { background: var(--amber-bg); color: var(--amber); }
.status-label-official { background: var(--brand-tint); color: var(--brand-strong); }
.status-label-featured { background: var(--green-bg); color: var(--green); }
.status-label-pinned { background: var(--surface-3); color: var(--ink-2); }
.escalation-badge { background: var(--brand-tint); color: var(--brand-strong); }
a.status-label:hover { text-decoration: none; filter: brightness(.97); }
/* ====================================================== 13  SEARCH RESULTS */

/* A talalati oldal cim alatt nem kell elvalaszto vonal: a talalatok maguk is
   kartyak, sajat kerettel, tehat a vonal csak zaj lenne. Csak ide szol —
   a kategoria-, szekcio- es kozossegi oldalakon a page-header vonala marad,
   ott ugyanis vonal nelkuli tartalom kovetkezik. */
.search-page {
  /* A felso levegot eddig a container-divider margoja adta. A vonal kikerult,
     a levego kell: igy a cim ugyanannyira all a fejlectol, mint a tobbi
     oldalon (48px). */
  padding-top: var(--sp-10);
}

.search-page > .page-header {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: var(--sp-6);
}

.search-results { margin-block: var(--sp-10); }

.search-results-column { min-width: 0; }

.search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.search-result {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search-result:hover { border-color: var(--brand-border); box-shadow: var(--shadow-md); }

.search-result-link {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--w-medium);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.search-result-link:hover { color: var(--brand); text-decoration: none; }

.search-result-description {
  margin: 0 0 var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.search-result-description em,
.search-results em {
  background: var(--brand-tint);
  color: var(--brand-strong);
  font-style: normal;
  font-weight: var(--w-medium);
  padding: 0 2px;
  border-radius: 3px;
}

/* The meta row mixes a nested breadcrumb <ol> with plain <li> items. Without
   an explicit baseline the breadcrumb list stretched and the author link sat
   visibly lower than everything beside it. */
.search-result > .meta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.search-result > .meta-group > li {
  display: flex;
  align-items: center;
  margin: 0;
}
.search-result > .meta-group > li.meta-data {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}
.search-result > .meta-group > li.meta-data a {
  color: var(--ink-3);
  font-weight: var(--w-regular);
  text-transform: none;
}
.search-result > .meta-group > li.meta-data a:hover { color: var(--brand); }
.search-result > .meta-group .meta-data + .meta-data::before {
  content: "·";
  margin-right: var(--sp-2);
  color: var(--border-strong);
}

.search-result-breadcrumbs,
.search-result-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}
/* The element carries BOTH `breadcrumbs` and `search-result-breadcrumbs`.
   The generic `.breadcrumbs` rule (same specificity, but later in the file)
   was winning and applying a 24px bottom margin, which made this list item
   taller than its neighbours — with align-items:center that is exactly what
   pushed the author name below the breadcrumb line. Qualifying the selector
   settles the tie. */
.search-result ol.breadcrumbs,
ol.search-result-breadcrumbs {
  margin: 0;
  font-size: var(--fs-xs);
}
.search-result ol.breadcrumbs li:last-child,
ol.search-result-breadcrumbs li:last-child {
  color: var(--ink-3);
  font-weight: var(--w-regular);
}
.search-result-breadcrumbs li { margin: 0; }
.search-result-breadcrumbs a { color: var(--ink-3); }
.search-result-breadcrumbs a:hover { color: var(--brand); }

.search-result-votes,
.search-result-meta-count,
.meta-count {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

/* ============================================================ 14  COMMUNITY */
.community-hero,
.community-header {
  padding: var(--sp-12) var(--sp-8);
  border-radius: var(--r-xl);
  background-color: var(--dark);
  color: var(--on-dark);
  margin-block: var(--sp-8);
  text-align: center;
}
/* Same as .hero: honour the community background/image theme settings. */
.community-hero {
  background-image: url(/hc/theming_assets/01KYJ2G8S21W4E9XG69720QPVR);
  background-size: cover;
  background-position: center;
}
.community-image {
  min-height: 18rem;
  border-radius: var(--r-lg);
  background-image: url(/hc/theming_assets/01KYJ2G94689T69R3CGK9WSHEJ);
  background-size: cover;
  background-position: center;
}
.community-hero h1,
.community-header h1 { color: var(--on-dark); }
.community-hero p,
.community-header p { color: var(--on-dark-2); }

.community-activity,
.community-featured-posts { margin-block: var(--section-y); }
.community-footer { margin-block: var(--sp-10); }
.community-follow { display: flex; gap: var(--sp-3); }

.topics,
.topics-list,
.posts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.topics-item,
.topic-header {
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.topics-item:hover { border-color: var(--brand-border); box-shadow: var(--shadow-md); }

.topic-filters,
.request-table-filter,
.requests-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-block: var(--sp-6);
}

/* -- striped list (post lists) ------------------------------------------- */
.striped-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.striped-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.striped-list-item:last-child { border-bottom: 0; }
.striped-list-item:hover { background: var(--surface-2); }

.striped-list-info { flex: 1 1 20rem; min-width: 0; }
.striped-list-title {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.striped-list-title:hover { color: var(--brand); text-decoration: none; }

.striped-list-count,
.post-overview-count {
  display: flex;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.striped-list-count-item,
.post-overview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  text-align: center;
}
.striped-list-number {
  font-size: var(--fs-lg);
  font-weight: var(--w-medium);
  color: var(--ink);
  line-height: 1.2;
}
.striped-list-status { margin-left: auto; }

.no-posts-with-filter,
.no-activities,
.no-activity,
.private-activity {
  padding: var(--sp-8);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--ink-3);
  text-align: center;
}

/* -- single post ---------------------------------------------------------- */
.post-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: var(--sp-10);
  align-items: start;
  margin-block: var(--sp-10);
}
.post { min-width: 0; }
.post-header { margin-bottom: var(--sp-6); }
.post-title { margin: 0 0 var(--sp-4); font-size: var(--fs-h1); letter-spacing: -0.03em; }
.post-info-container,
.post-info { display: flex; align-items: center; gap: var(--sp-3); }
.post-author { display: flex; align-items: center; gap: var(--sp-3); }
.post-meta { display: flex; flex-direction: column; gap: 2px; }
.post-avatar .user-avatar { width: 2.5rem; height: 2.5rem; }
.post-body { font-size: var(--fs-lg); line-height: 1.75; margin-block: var(--sp-6); }
.post-content { min-width: 0; }
.post-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.post-actions-wrapper,
.post-actions { display: flex; align-items: center; gap: var(--sp-3); }
.post-comment-count { color: var(--ink-3); font-size: var(--fs-sm); }
.post-sidebar { min-width: 0; }
.sidebar-title {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: var(--w-medium);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-3);
}
.post-to-community { margin-block: var(--sp-6); }
.new_community_post { margin-block: var(--sp-8); }

/* ================== 15  REQUESTS / PROFILE / SUBSCRIPTIONS / ACTIVITY ==== */
.requests,
.my-activities-header,
.my-activities-following-header { margin-block: var(--sp-8); }

.my-activities-nav,
.my-activities-sub-nav,
.sub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  border-bottom: 1px solid var(--border);
}
.my-activities-nav a,
.my-activities-sub-nav a,
.sub-nav a {
  display: inline-block;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  margin-bottom: -1px;
}
.my-activities-nav a:hover,
.my-activities-sub-nav a:hover,
.sub-nav a:hover { color: var(--ink); text-decoration: none; }
.my-activities-nav a[aria-selected="true"],
.my-activities-sub-nav a[aria-selected="true"],
.sub-nav a[aria-selected="true"] {
  color: var(--brand-strong);
  border-bottom-color: var(--brand);
}

.requests-search { max-width: 26rem; }
.requests-search-info,
.requests-table-info,
.requests-table-meta,
.request-info { color: var(--ink-3); font-size: var(--fs-sm); }

.requests-table,
.my-activities-table,
.subscriptions-table,
.contributions-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  font-size: var(--fs-sm);
}
.requests-table th,
.my-activities-table th,
.subscriptions-table th,
.contributions-table th {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-weight: var(--w-medium);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
}
.requests-table td,
.my-activities-table td,
.subscriptions-table td,
.contributions-table td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.requests-table tr:last-child td,
.my-activities-table tr:last-child td,
.subscriptions-table tr:last-child td,
.contributions-table tr:last-child td { border-bottom: 0; }
.requests-table tbody tr:hover,
.my-activities-table tbody tr:hover { background: var(--surface-2); }
.request-closed { color: var(--ink-3); }
.requests-table-status { white-space: nowrap; }
.subscriptions-unsubscribe { white-space: nowrap; }

.request-filter,
.request-filter-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.request-filter select { width: auto; min-width: 12rem; }

/* -- single request ------------------------------------------------------- */
.request-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--sp-10);
  align-items: start;
  margin-block: var(--sp-10);
}
.request-main { min-width: 0; }
.request-title { font-size: var(--fs-h1); letter-spacing: -0.03em; margin-bottom: var(--sp-4); }
.request-breadcrumbs { margin-bottom: var(--sp-4); }
.request-sidebar {
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.request-details { display: grid; gap: var(--sp-4); margin: 0; }
.request-details dt { font-size: var(--fs-xs); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-3); }
.request-details dd { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--ink); }
.request-collaborators { margin-top: var(--sp-4); }
.request-follow-up { margin-block: var(--sp-4); }
.request-submit-comment { margin-top: var(--sp-3); }
.mark-as-solved {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-md);
  padding: 12px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-outer);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  cursor: pointer;
}
.mark-as-solved:hover { border-color: var(--green); background: var(--green-bg); color: var(--green); text-decoration: none; }

/* -- user profile ---------------------------------------------------------
   A latogato ide a cikk szerzojenek nevere kattintva erkezik, tehat egyetlen
   kerdese van: ki ez, es mit irt meg. Ezert a lap ket blokk — egy szerzo-
   kartya es egy cikklista —, es semmi mas. */
.profile-page { padding-block: var(--sp-10) var(--sp-16); }

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-10) var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-section);
  background: var(--surface-2);
  text-align: center;
}

.profile-card-avatar { position: relative; line-height: 0; }
.profile-card-avatar .user-avatar {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

.profile-card-name {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--w-medium);
  letter-spacing: -0.03em;
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.profile-card-description {
  margin: 0;
  max-width: 42rem;
  color: var(--ink-2);
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.profile-card-actions:empty { display: none; }
.profile-private-badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

/* -- the author's articles ------------------------------------------------
   Sajat keretes doboz, ugyanaz a kartya-kezeles, mint a fooldal
   "Legnepszerubb cikkek" blokkjanal, hogy a ket lista egy nyelvet beszeljen. */
.profile-articles {
  margin-top: var(--sp-10);
  padding: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-section);
  background: var(--surface);
}

.profile-articles-title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--w-medium);
  letter-spacing: -0.02em;
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.profile-articles-note {
  margin: var(--sp-2) 0 0;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.profile-articles-list {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  counter-reset: profile-article;
}
.profile-articles-list:empty { display: none; }

.profile-article {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  border-top: 1px solid var(--border);
}
.profile-article:first-child { border-top: 0; }

/* A sorszam a rangsort teszi olvashatova — ez a lista rendezett, nem
   veletlenszeru, es ez latszodjon is. */
.profile-article::before {
  counter-increment: profile-article;
  content: counter(profile-article);
  flex: 0 0 1.75rem;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.profile-article-link {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-inner);
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: var(--w-medium);
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
/* A nyil a sor vegen all, a szavazatszam UTAN — a nyil a "tovabb" jelzes,
   annak a sor legjobb szelen a helye. Ezert a soron ul, nem a linken. */
.profile-article::after {
  content: "";
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-right: var(--sp-2);
  background-color: var(--border-strong);
  -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
  mask: var(--icon-arrow-right) center / contain no-repeat;
  transition: background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.profile-article:hover .profile-article-link { color: var(--brand-strong); }
.profile-article-link:hover { text-decoration: none; }
.profile-article:hover { background: var(--brand-tint); border-radius: var(--r-inner); }
.profile-article:hover::after {
  background-color: var(--brand);
  transform: translateX(3px);
}

/* Csak akkor jelenik meg, ha van szavazat — igy nem ul ott tizenot darab
   "0" a lista mellett. */
.profile-article-votes {
  flex: 0 0 auto;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand-strong);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.comment-link { color: var(--brand); font-weight: var(--w-regular); }

/* -- error page ----------------------------------------------------------- */
.error-page {
  max-width: 36rem;
  margin: var(--sp-24) auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.error-page h1 { font-size: var(--fs-h1); }
.error-page p { color: var(--ink-2); font-size: var(--fs-lg); }

/* ============ 16  BREADCRUMBS / PAGINATION / DROPDOWNS / MISC =========== */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.breadcrumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs li + li::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  flex: 0 0 auto;
  background-color: var(--border-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.3172 10.4423L11.6922 16.0673C11.5749 16.1846 11.4159 16.2505 11.25 16.2505C11.0841 16.2505 10.9251 16.1846 10.8078 16.0673C10.6905 15.95 10.6247 15.791 10.6247 15.6251C10.6247 15.4593 10.6905 15.3002 10.8078 15.1829L15.3664 10.6251H3.125C2.95924 10.6251 2.80027 10.5593 2.68306 10.442C2.56585 10.3248 2.5 10.1659 2.5 10.0001C2.5 9.83434 2.56585 9.67537 2.68306 9.55816C2.80027 9.44095 2.95924 9.3751 3.125 9.3751H15.3664L10.8078 4.81729C10.6905 4.70002 10.6247 4.54096 10.6247 4.3751C10.6247 4.20925 10.6905 4.05019 10.8078 3.93292C10.9251 3.81564 11.0841 3.74976 11.25 3.74976C11.4159 3.74976 11.5749 3.81564 11.6922 3.93292L17.3172 9.55792C17.3753 9.61596 17.4214 9.68489 17.4529 9.76077C17.4843 9.83664 17.5005 9.91797 17.5005 10.0001C17.5005 10.0822 17.4843 10.1636 17.4529 10.2394C17.4214 10.3153 17.3753 10.3842 17.3172 10.4423Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.3172 10.4423L11.6922 16.0673C11.5749 16.1846 11.4159 16.2505 11.25 16.2505C11.0841 16.2505 10.9251 16.1846 10.8078 16.0673C10.6905 15.95 10.6247 15.791 10.6247 15.6251C10.6247 15.4593 10.6905 15.3002 10.8078 15.1829L15.3664 10.6251H3.125C2.95924 10.6251 2.80027 10.5593 2.68306 10.442C2.56585 10.3248 2.5 10.1659 2.5 10.0001C2.5 9.83434 2.56585 9.67537 2.68306 9.55816C2.80027 9.44095 2.95924 9.3751 3.125 9.3751H15.3664L10.8078 4.81729C10.6905 4.70002 10.6247 4.54096 10.6247 4.3751C10.6247 4.20925 10.6905 4.05019 10.8078 3.93292C10.9251 3.81564 11.0841 3.74976 11.25 3.74976C11.4159 3.74976 11.5749 3.81564 11.6922 3.93292L17.3172 9.55792C17.3753 9.61596 17.4214 9.68489 17.4529 9.76077C17.4843 9.83664 17.5005 9.91797 17.5005 10.0001C17.5005 10.0822 17.4843 10.1636 17.4529 10.2394C17.4214 10.3153 17.3753 10.3842 17.3172 10.4423Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumbs a { color: var(--ink-3); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs li:last-child { color: var(--ink); font-weight: var(--w-regular); }

/* -- pagination -----------------------------------------------------------
   The Zendesk {{pagination}} helper emits a real list — `<li>` cells with the
   link or the current-page `<span>` inside, and the state classes
   (.pagination-current / -first / -prev / -next / -last) sitting on the LI,
   not on the anchor. The previous rules styled the anchors directly and
   assumed a flat structure, so the list rendered with its default bullets and
   stacked vertically. These rules cover both `<ul class="pagination">` and
   `<nav class="pagination"><ul>…`, which is why the flex/list resets are
   repeated for a nested list. */
.pagination,
.pagination ul,
.pagination ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination { margin-block: var(--sp-8); }

.pagination li {
  display: flex;
  list-style: none;
  margin: 0;
  float: none;          /* the original theme floated these */
  width: auto;
  height: auto;
}

/* The cell itself is the anchor/span, so the whole box is clickable. */
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-inner);
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-weight: var(--w-regular);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pagination a:hover {
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}

/* Current page — the class can be on the li or, in older output, on the cell. */
.pagination .pagination-current > a,
.pagination .pagination-current > span,
.pagination a.pagination-current,
.pagination span.pagination-current,
.pagination .pagination-current-page,
.pagination .current {
  background: var(--brand);
  color: var(--brand-contrast);
  font-weight: var(--w-medium);
}
.pagination .pagination-current > a:hover,
.pagination .pagination-current > span:hover { background: var(--brand); color: var(--brand-contrast); }

.dropdown { position: relative; display: inline-block; }
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--w-regular);
  cursor: pointer;
}
.dropdown-toggle::after {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.6922 7.94254L10.4422 14.1925C10.3841 14.2506 10.3152 14.2967 10.2393 14.3282C10.1634 14.3597 10.0821 14.3758 9.99998 14.3758C9.91785 14.3758 9.83652 14.3597 9.76064 14.3282C9.68477 14.2967 9.61584 14.2506 9.55779 14.1925L3.30779 7.94254C3.19052 7.82526 3.12463 7.6662 3.12463 7.50035C3.12463 7.3345 3.19052 7.17544 3.30779 7.05816C3.42507 6.94088 3.58413 6.875 3.74998 6.875C3.91583 6.875 4.07489 6.94088 4.19217 7.05816L9.99998 12.8668L15.8078 7.05816C15.8659 7.00009 15.9348 6.95403 16.0107 6.9226C16.0865 6.89117 16.1679 6.875 16.25 6.875C16.3321 6.875 16.4134 6.89117 16.4893 6.9226C16.5652 6.95403 16.6341 7.00009 16.6922 7.05816C16.7502 7.11623 16.7963 7.18517 16.8277 7.26104C16.8592 7.33691 16.8753 7.41823 16.8753 7.50035C16.8753 7.58247 16.8592 7.66379 16.8277 7.73966C16.7963 7.81553 16.7502 7.88447 16.6922 7.94254Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.6922 7.94254L10.4422 14.1925C10.3841 14.2506 10.3152 14.2967 10.2393 14.3282C10.1634 14.3597 10.0821 14.3758 9.99998 14.3758C9.91785 14.3758 9.83652 14.3597 9.76064 14.3282C9.68477 14.2967 9.61584 14.2506 9.55779 14.1925L3.30779 7.94254C3.19052 7.82526 3.12463 7.6662 3.12463 7.50035C3.12463 7.3345 3.19052 7.17544 3.30779 7.05816C3.42507 6.94088 3.58413 6.875 3.74998 6.875C3.91583 6.875 4.07489 6.94088 4.19217 7.05816L9.99998 12.8668L15.8078 7.05816C15.8659 7.00009 15.9348 6.95403 16.0107 6.9226C16.0865 6.89117 16.1679 6.875 16.25 6.875C16.3321 6.875 16.4134 6.89117 16.4893 6.9226C16.5652 6.95403 16.6341 7.00009 16.6922 7.05816C16.7502 7.11623 16.7963 7.18517 16.8277 7.26104C16.8592 7.33691 16.8753 7.41823 16.8753 7.50035C16.8753 7.58247 16.8592 7.66379 16.8277 7.73966C16.7963 7.81553 16.7502 7.88447 16.6922 7.94254Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}
.dropdown-toggle:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }

.dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  display: none;
  min-width: 12rem;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.dropdown-menu[aria-expanded="true"],
.dropdown[aria-expanded="true"] .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.dropdown-menu a:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-menu a[aria-selected="true"] { color: var(--brand-strong); font-weight: var(--w-medium); }

.actions .dropdown-toggle { border: 0; padding: 0.4rem; }

/* Comment/post action links Zendesk renders as bare anchors. */
.comment-actions a,
.post-actions a {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-weight: var(--w-regular);
}
.comment-actions a:hover,
.post-actions a:hover { color: var(--brand); }

/* ============================================================== 17  FOOTER */
footer.lablec,
.lablec {
  margin-top: var(--section-y);
  background: var(--dark);
  color: var(--on-dark-2);
  font-size: var(--fs-sm);
}

.footer-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-16) var(--gutter) var(--sp-8);
}

.flex-container {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-6);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.flex-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  min-width: 0;
}

/* Brand column: logo, one-line description, contact. Scoped under .lablec so
   a page-level rule such as `.error-page p` can never out-specify it. */
.lablec .footer-about {
  margin: var(--sp-2) 0 0;
  max-width: 20rem;
  color: var(--on-dark-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.footer-brand,
.w-inline-block { display: inline-block; }
.footer-brand img { max-width: 120px; height: auto; }

.title-small {
  margin-bottom: var(--sp-2);
  color: var(--on-dark);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  letter-spacing: -0.005em;
}

.footer-link {
  color: var(--on-dark-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
  transition: color .15s var(--ease);
}
.footer-link:hover { color: var(--on-dark); text-decoration: none; }

.flex-container-copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-top: var(--sp-6);
  color: var(--on-dark-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
}
.flex-container-copyright .flex-item { align-items: flex-start; }
.emailkuldes { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.emailkuldes:hover { color: #fff; }

.kozossegi { display: flex; gap: var(--sp-3); }
.kozossegi a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.kozossegi a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.kozossegi img { width: 20px; height: 20px; filter: brightness(0) invert(1); opacity: .8; }
.kozossegi a:hover img { opacity: 1; }

/* -- very bottom bar: sign-in, as a quiet right-aligned text link --------- */
.footer-bottom-bar {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* {{user_info}} renders either a plain "sign in" link or a dropdown with the
   signed-in user's menu — strip both back to a text link down here. */
.footer-bottom-bar a,
.footer-bottom-bar .dropdown-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-dark-2);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--w-regular);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .25);
  cursor: pointer;
}
.footer-bottom-bar a:hover,
.footer-bottom-bar .dropdown-toggle:hover {
  background: none;
  color: #fff;
  text-decoration-color: #fff;
}
.footer-bottom-bar .user-avatar { width: 1.1rem; height: 1.1rem; }
.footer-bottom-bar .dropdown-menu {
  right: 0;
  bottom: calc(100% + 6px);
  top: auto;
}
.footer-bottom-bar .dropdown-menu a { text-decoration: none; color: var(--ink); font-size: var(--fs-sm); }
.footer-bottom-bar .dropdown-menu a:hover { color: var(--brand-strong); }

/* ========================================================== 18  RESPONSIVE */

/* -- large desktop -------------------------------------------------------- */
@media (max-width: 991px) {
  :root { --fs-display: 3rem; --fs-h1: 2.25rem; --fs-h2: 1.75rem; --section-y: 4rem; }
  .panes { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--sp-8); }
  .post-container,
  .request-container { grid-template-columns: minmax(0, 1fr); }
}

/* -- tablet --------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --fs-display: 2.5rem; --fs-h1: 2rem; --fs-h2: 1.5rem; --fs-h3: 1.3rem; --section-y: 3.5rem; }

  .header { flex-wrap: wrap; gap: var(--sp-4); padding-block: var(--sp-4); }

  /* Profiloldal: telefonon a cimeknek kell a hely. A kartya belso margoja,
     a sorszam-oszlop es a nyil is szukebb lesz, kulonben a hosszu magyar
     cimek 3-4 sorba torn(ek). */
  .profile-card { padding: var(--sp-8) var(--sp-5); }
  .profile-card-avatar .user-avatar { width: 6rem; height: 6rem; }
  .profile-articles { padding: var(--sp-5) var(--sp-4); }
  .profile-article::before { flex-basis: 1.25rem; font-size: var(--fs-xs); }
  .profile-article { gap: var(--sp-2); }
  .profile-article-link { padding-inline: var(--sp-2); }
  .profile-article::after { margin-right: 0; }

  /* The header is a grid, so it restacks rather than wraps: logo and search
     share the top row, the nav drops onto a full-width row beneath them and
     stays centred. */
  header.header {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--sp-4);
    padding-inline: var(--gutter);
  }
  .desktop-menu {
    grid-column: 1 / -1;
    order: 2;
    justify-self: center;
  }
  .header-search-wrapper { max-width: 15rem; }

  section.hero2 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
    padding: var(--sp-10) var(--sp-6);
    text-align: left;
  }
  section.hero2::before { left: 0; right: -30%; top: -20%; bottom: -40%; }
  .hero22 { order: -1; }
  img.hero2.img, .hero2 .img { max-width: 16rem; }

  .panes { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }

  /* On narrow screens the section list is secondary — put it after the
     article/section content rather than above it. */
  .left-pane { order: 2; }
  .right-pane { order: 1; }

  .comment-wrapper { grid-template-columns: minmax(0, 1fr); }
  .comment-actions-container { flex-direction: row; align-items: center; justify-content: space-between; }

  .comment-form { grid-template-columns: minmax(0, 1fr); }
  .comment-form > .comment-avatar { display: none; }

  .flex-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
  .flex-container > .flex-item-1 { grid-column: 1 / -1; }
}

/* -- phone ---------------------------------------------------------------- */
@media (max-width: 479px) {
  header.header {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .header-search-wrapper { max-width: 100%; justify-self: stretch; }

  :root {
    --fs-display: 2.125rem;
    --fs-h1: 1.75rem;
    --fs-h2: 1.375rem;
    --fs-lg: 1.0625rem;
    --section-y: 3rem;
    --gutter: 1.25rem;
  }

  section.hero2 { border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-5); }
  .hero, .community-hero, .community-header { border-radius: var(--r-lg); padding: var(--sp-10) var(--sp-5); }

  .blocks-list { grid-template-columns: minmax(0, 1fr); }
  .article-list, .promoted-articles { grid-template-columns: minmax(0, 1fr); }
  .faqs-links { grid-template-columns: minmax(0, 1fr); }
  .callouts { grid-template-columns: minmax(0, 1fr); }

  .article-body { font-size: var(--fs-base); }

  .flex-container { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .flex-container-copyright { flex-direction: column; align-items: flex-start; }

  .interested .buttons { flex-direction: column; align-items: stretch; }
  .interested .button1, .interested .button2 { width: 100%; }

  /* Tables reflow to stacked rows rather than overflowing the viewport. */
  .requests-table,
  .my-activities-table,
  .subscriptions-table,
  .contributions-table { display: block; border: 0; }
  .requests-table thead,
  .my-activities-table thead,
  .subscriptions-table thead,
  .contributions-table thead { display: none; }
  .requests-table tr,
  .my-activities-table tr,
  .subscriptions-table tr,
  .contributions-table tr {
    display: block;
    margin-bottom: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: var(--sp-2);
  }
  .requests-table td,
  .my-activities-table td,
  .subscriptions-table td,
  .contributions-table td { display: block; border-bottom: 0; padding: var(--sp-2) var(--sp-3); }

  .striped-list-item { flex-direction: column; align-items: flex-start; }
  .striped-list-count, .post-overview-count { gap: var(--sp-5); }
  .striped-list-status { margin-left: 0; }
}

/* -- print ---------------------------------------------------------------- */
@media print {
  .header, .mobile-menu, .lablec, .faqs-links, .interested, .callouts,
  .left-pane, .article-comments, .article-relatives, .pagination { display: none !important; }
  .panes { grid-template-columns: minmax(0, 1fr); }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ================================================ 19  REMAINING SELECTORS
   Small classes the templates use that aren't covered by the blocks above. */

/* The original theme swapped two menu items at 1160px via .long / .short.
   Those items ("QUiCK" and "Chatbot") have since been removed from the header,
   so the swap no longer applies — but the rules are kept, scoped and inert, in
   case a .long/.short item is reintroduced later. */
@media (max-width: 1160px) {
  .menu-list .long { display: none; }
}
@media (min-width: 1160px) {
  .menu-list .short { display: none; }
}

/* Generic `table` class sits alongside the specific ones on activity tables. */
.table { width: 100%; }

/* The vote label is rendered inside .article-votes-count; give it its own
   hook too, since script.js rewrites its contents. */
.article-vote-label { color: inherit; font-size: inherit; }

/* `.comment-pending` always ships together with .status-label-pending, but
   style it directly as well so it degrades sanely on its own. */
.comment-pending { white-space: nowrap; }

/* Footer column modifiers — layout comes from the grid, these only need to
   not fight it. */
.flex-item-1,
.flex-item-2,
.flex-item-3,
.flex-item-4,
.flex-item-5 { min-width: 0; }

/* Links on the dark surfaces must not use the brand blue — #3D4EE0 on #0F1115
   is only 3.03:1, below the WCAG AA 4.5:1 minimum for body text. */
.hero a:not(.button):not([class*="button"]),
.community-hero a:not(.button):not([class*="button"]),
.community-header a:not(.button):not([class*="button"]) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .45);
}
.hero a:not(.button):hover,
.community-hero a:not(.button):hover,
.community-header a:not(.button):hover { text-decoration-color: #fff; }