/* Consolidated styles for Bernavigator pages */

/* CSS variables (color palette) */
:root {
  --primary:#2C0453;
  --danger:#d32f2f;
  --bubble:#F0EDE4;
  --border:#dcdfe6;
  --bg:#fff;
  --card:#f5f6f8;
}

/* Reset and base typography */
* { box-sizing:border-box; }
html, body {
  margin:0;
  background:var(--bg);
  color:#111;
  font-family:system-ui,Arial,sans-serif;
}
[hidden] { display:none !important; }

/* Generic button styling. Applies to both anchors and button elements */
.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:9999px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:.15s;
  line-height:1;
  font-weight:700;
}
button.btn {
  background:transparent;
  border:1px solid transparent;
  font:inherit;
  color:inherit;
  -webkit-appearance:none;
  appearance:none;
}

/* Button variants */
.btn-ghost,
button.btn-ghost {
  background:var(--bubble);
  color:#111;
  border-color:var(--bubble);
}
.btn-ghost:hover,
button.btn-ghost:hover {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.btn-primary,
button.btn-primary {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.btn-primary:hover,
button.btn-primary:hover {
  filter:brightness(1.1);
}
.btn-danger,
button.btn-danger {
  background:var(--danger);
  color:#fff;
  border-color:var(--danger);
}
.btn-danger:hover,
button.btn-danger:hover {
  filter:brightness(1.08);
}

/* Header and top navigation */
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid #eee;
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  max-width:1400px;
  margin:0 auto;
  padding:10px 16px;
}
.logo {
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#111;
}
.logo-box {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:120px;
  height:40px;
  border-radius:10px;
  background:#eee;
  font-weight:800;
}
.top-actions {
  display:flex;
  align-items:center;
  gap:10px;
}

/* Inline search bar */
.search-inline {
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:9999px;
  padding:4px 6px;
}
.search-inline input {
  border:0;
  outline:none;
  padding:6px 8px;
  border-radius:9999px;
  min-width:220px;
}
.search-inline .search-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:9999px;
  background:var(--bubble);
  border:1px solid var(--bubble);
  cursor:pointer;
  color:#111;
}
.search-inline .search-btn:hover {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.search-inline .search-btn svg {
  display:block;
}

/* Hamburger for mobile */
.hamburger {
  display:none;
  flex-direction:column;
  gap:4px;
  background:transparent;
  border:0;
  cursor:pointer;
}
.hamburger span {
  width:22px;
  height:2px;
  background:#111;
  display:block;
}

/* Primary navigation */
.navbar {
  border-top:1px solid #eee;
  background:#fff;
}
.navbar .navbar-inner {
  max-width:1400px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.navbar .menu {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:0;
  flex:1;
}
.navbar .menu .nav-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:9999px;
  line-height:1;
  font-weight:700;
  background:var(--bubble);
  color:#111;
  border:1px solid var(--bubble);
}
.navbar .menu .nav-btn:hover {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.navbar .menu button.nav-btn {
  -webkit-appearance:none;
  appearance:none;
  border:1px solid var(--bubble);
}

/* Dropdown submenu */
.has-sub { position:relative; }
.submenu {
  position:absolute;
  left:0;
  top:100%;
  display:none;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.submenu .sub-btn {
  display:block;
  margin:4px 0;
  background:var(--bubble);
  color:#111;
  border-color:var(--bubble);
  font-weight:700;
}
.submenu .sub-btn:hover {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.has-sub:hover .submenu {
  display:block;
}

/* Right side actions in the top bar */
.right-actions {
  display:flex;
  gap:10px;
  margin-left:auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Mobile menu and overlays */
.mobile-menu { display:none; }
.mobile-menu.open { display:block; }
.mm-title {
  padding:12px 16px;
  font-weight:700;
  border-bottom:1px solid #f0f0f0;
}
.mm-sub {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:8px 16px;
  border-bottom:1px solid #f0f0f0;
}
.mm-sub a {
  background:var(--bubble);
  padding:8px 12px;
  border-radius:9999px;
  text-decoration:none;
  color:#111;
  border:1px solid var(--bubble);
  font-weight:700;
}
.mm-sub a:hover {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.mm-btn {
  display:block;
  margin:10px 16px 0 16px;
  background:var(--bubble);
  color:#111;
  border-radius:9999px;
  padding:10px 14px;
  text-decoration:none;
  border:1px solid var(--bubble);
  text-align:center;
  font-weight:700;
}
.mm-btn:hover {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.mm-actions {
  display:flex;
  gap:10px;
  padding:12px 16px;
}
.mm-actions .full {
  flex:1;
  justify-content:center;
}
.search-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  align-items:flex-start;
  justify-content:center;
  padding-top:14vh;
}
.search-overlay.open {
  display:flex;
}
.search-panel {
  background:#fff;
  border-radius:14px;
  padding:16px;
  display:flex;
  gap:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.search-panel input {
  flex:1;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
}
.search-panel .close-x {
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  cursor:pointer;
}

/* Page layout */
.main {
  max-width:1400px;
  margin:18px auto;
  padding:0 16px;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
}
.main.single {
  grid-template-columns:1fr;
}
.col {
  background:var(--card);
  border-radius:14px;
  padding:16px;
}

/* Page title and description styles */
.page-title {
  margin:0 0 8px;
  font-size:26px;
  line-height:1.2;
}
.page-desc {
  margin:0 0 14px;
  color:#444;
  line-height:1.45;
}

/* Post listings */
.posts {
  column-count:2;
  column-gap:16px;
}
.post {
  display:block;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  margin:0 0 16px;
  break-inside:avoid;
}
.post h2 {
  margin:0 0 8px;
  font-size:22px;
  line-height:1.25;
}
.post h2 a {
  color:#111;
  text-decoration:none;
}
.post h2 a:hover {
  text-decoration:underline;
}
.badges {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:4px 0 10px;
}
.badge {
  background:var(--bubble);
  border:1px solid var(--bubble);
  padding:4px 10px;
  border-radius:9999px;
  font-size:12px;
}
.badge-date {
  opacity:.8;
}
.post img {
  width:100%;
  height:auto;
  border-radius:10px;
  margin:8px 0;
}

/* Sidebar boxes */
.box {
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  margin-bottom:14px;
}
.box h3 {
  margin:0 0 10px;
  font-size:16px;
}
.box .ad-img {
  width:100%;
  height:auto;
  border-radius:10px;
}
.box .video {
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  border-radius:10px;
}
.box .video iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Footer */
.footer {
  border-top:1px solid #eee;
  margin-top:24px;
  background:#fff;
}
.footer-inner {
  max-width:1400px;
  margin:0 auto;
  padding:16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.footer a {
  color:#111;
  text-decoration:none;
}
.footer a:hover {
  text-decoration:underline;
}

/* Pagination */
.pagination {
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
}
.pagination .btn {
  min-width:44px;
  justify-content:center;
}
.pagination .btn[aria-current="page"] {
  cursor:default;
}

/* Responsive adjustments */
@media (max-width:1024px) {
  .hamburger {
    display:flex;
  }
  .logo {
    order:2;
  }
  .top-actions {
    order:3;
  }
  .search-inline input {
    display:none;
  }
  .navbar {
    display:none;
  }
  .mobile-menu {
    background:#fff;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
  }
  .main {
    grid-template-columns:1fr;
  }
  .posts {
    column-count:1;
  }
}
@media (max-width:480px) {
  .post h2 {
    font-size:20px;
  }
}

/* Article/post specifics */
.article-wrap {
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  padding:16px;
}
.article-cover {
  width:100%;
  max-height:520px;
  object-fit:cover;
  border-radius:12px;
  margin:8px 0 14px;
}
.article-meta {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:6px 0 10px;
  color:#555;
  font-size:14px;
}
/* Override badges within article metadata to use card-border colour */
.article-meta .badge {
  display:inline-block;
  padding:6px 10px;
  background:var(--bubble);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
}
.article-meta .badge-date {
  background:#eef6ff;
  border-color:#d2e8ff;
}
.article-content {
  line-height:1.75;
  font-size:18px;
  color:#222;
  overflow-wrap:anywhere;
  word-wrap:break-word;
  word-break:break-word;
}
.article-content img {
  max-width:100%;
  height:auto;
  border-radius:8px;
}
.article-content table {
  width:100%;
  border-collapse:collapse;
  margin:18px 0;
}
.article-content th,
.article-content td {
  border:1px solid var(--border);
  padding:8px 10px;
}
.paywall-callout {
  margin:16px 0;
  padding:12px 14px;
  border-radius:12px;
  background:var(--bubble);
  border:1px solid var(--border);
  text-align:center;
  font-weight:600;
}

/* Ensure the two columns collapse cleanly on narrower screens */
@media (max-width:1024px) {
  .main {
    grid-template-columns:1fr !important;
  }
  .col {
    margin-bottom:16px;
  }
}


.ask-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:10px 0 6px;
}
.qa-filter-form {
  flex:1 1 340px;
  display:flex;
  justify-content:flex-end;
}
.qa-search-input {
  width:min(420px, 100%);
  padding:11px 16px;
  border:1px solid var(--border);
  border-radius:9999px;
  background:#fff;
  color:#111;
  outline:none;
}
.qa-search-input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(44,4,83,.12);
}
.qa-list-meta {
  margin:0 0 14px;
  color:#555;
  font-size:14px;
}
.posts.is-loading {
  opacity:.55;
  transition:opacity .15s ease;
}
.qa-filter-form.is-loading .qa-search-input {
  background:#f8f8fb;
}

/* Q&A listing extras */
.ask-row {
  display:flex;
  justify-content:center;
  margin:10px 0 6px;
}
.ask-row .btn {
  padding:10px 18px;
}
.section-sep {
  border:0;
  border-top:1px solid var(--border);
  margin:8px 0 16px;
}
.badge-asker {
  font-weight:600;
}

/* Login modal for Q&A pages */
.login-modal-backdrop {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:16px;
}
.login-modal {
  width:min(450px, 100%);
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding:16px 16px 14px;
}
.login-modal h3 {
  margin:0 0 8px;
  font-size:18px;
}
.login-modal p {
  margin:0 0 12px;
  line-height:1.45;
  color:#222;
}
.login-modal .actions {
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.login-modal .btn {
  padding:10px 14px;
}
.login-modal .btn-secondary {
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  color:#111;
}
.login-modal .btn-secondary:hover {
  background:rgba(0,0,0,.03);
}

/* Authentication card (signup/login/forgot/reset) */
.auth-wrap {
  display:grid;
  place-items:center;
  min-height:52vh;
  padding:24px 0;
}
.auth-card {
  width:min(520px,100%);
  background:var(--bg,#fff);
  border:1px solid var(--border,#dcdfe6);
  border-radius:14px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.auth-card h2 {
  text-align:center;
  margin:0 0 4px 0;
}
.input-wrap {
  position:relative;
  display:block;
}
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  width:100%;
  padding:14px 44px 14px 14px;
  border-radius:12px;
  border:1px solid var(--border,#dcdfe6);
  background:#fff;
  color:#111;
  outline:none;
  line-height:1.2;
}
.auth-card input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(44,4,83,.12);
}
.toggle-visibility {
  position:absolute;
  inset-inline-end:10px;
  inset-block:0;
  margin-block:auto;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:transparent;
  border:0;
  cursor:pointer;
  color:#111;
  padding:0;
}
.toggle-visibility:hover {
  filter:brightness(1.1);
}
.toggle-visibility svg {
  width:20px;
  height:20px;
  display:block;
  fill:currentColor;
}
.btn-lg {
  padding:14px 18px;
  font-size:16px;
  border-radius:12px;
}
.helper-links {
  display:grid;
  gap:6px;
  margin-top:6px;
  text-align:center;
}
.helper-links .small {
  font-size:.95em;
  opacity:.9;
}
.link-primary {
  color:var(--primary);
  text-decoration:underline;
}
.form-error {
  color:#d32f2f;
  text-align:center;
  margin-top:6px;
}
.cf-turnstile {
  margin:2px 0 8px 0;
}
.auth-card button.btn {
  width:auto;
  align-self:flex-start;
}

/* Shared form styling and alerts used by adatkezeles.php and aszf.php */
.form-group {
  margin:10px 0 14px;
}
.form-group label {
  display:block;
  font-weight:700;
  margin:0 0 6px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  font:inherit;
  resize:vertical;
  min-height:42px;
  background:#fff;
  color:#111;
}
.form-group textarea {
  min-height:160px;
  line-height:1.5;
}
.form-actions {
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.alert {
  display:none;
  margin:8px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
}
.alert-ok {
  background:#f0fff4;
  border-color:#a7f3d0;
  color:#065f46;
}
.alert-err {
  background:#fff5f5;
  border-color:#fecaca;
  color:#991b1b;
}

/* Generic modal component */
.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:16px;
}
.modal-card {
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  max-width:480px;
  width:100%;
  padding:18px;
}
.modal-card h3 {
  margin:0 0 8px;
  font-size:20px;
}
.modal-card p {
  margin:0 0 14px;
}
.modal-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* Search results page header */
.results-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.results-head h1 {
  margin:0;
  font-size:22px;
}

/* Utility classes for inline styles converted from PHP markup */
/* Row for checkbox and label inputs within auth forms */
.input-row {
  display:flex;
  align-items:center;
  gap:8px;
}
.input-row input[type="checkbox"] {
  width:auto;
}
.input-row label {
  margin:0;
}

/* Pagination variation used on kereses page (smaller top margin) */
.pagination-inline {
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

/* Button row for call-to-action sections on post pages */
.cta-row {
  margin-top:10px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Hide elements by default (used for messages and answer wraps) */
.hidden {
  display:none;
}

/* Answer wrapper in question submission page (initially hidden) */
.answer-wrap {
  display:none;
}

/* Margin top utility for paywall callout in question submission page */
.mt-16 {
  margin-top:16px;
}

/* Alert box for filtering information on question listing page */
.alert-inline {
  margin-bottom:1rem;
  padding:10px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--border);
}

/* Hide login modal backdrop by default */
.login-modal-backdrop {
  display:none;
}

/* Generic list with no margin and custom left padding, used in modals */
.list-plain {
  margin:0;
  padding-left:18px;
}

/* Text color utility for error messages */
.text-danger {
  color:#d32f2f;
}
/* === iOS Safari input-zoom fix (mobile) ===
   iOS Safari automatikusan ránagyít, ha az input betűmérete 16px alatt van.
   Ez a szabály csak érintős (coarse pointer) eszközökön lép életbe. */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) {
    /* Keresőmezők */
    .search-panel input[type="search"],
    .search-panel input[type="text"],
    .search-inline input[type="search"],
    .search-inline input[type="text"],

    /* Auth / űrlap mezők (belépés, regisztráció, elfelejtett jelszó) */
    .auth-card input[type="email"],
    .auth-card input[type="password"],
    .auth-card input[type="text"],
    .auth-card input[type="search"],
    .auth-card textarea,
    .auth-card select,

    /* Biztonsági háló: általános form mezők */
    input[type="email"],
    input[type="password"],
    input[type="text"],
    input[type="search"],
    textarea,
    select {
      font-size: 16px !important;
    }

    /* Flex stabilitás: a mező ne tolja le / ne lógjon rá a gombra */
    .search-panel {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
    }
    .search-panel input[type="search"],
    .search-panel input[type="text"] {
      flex: 1 1 auto;
      min-width: 0;
    }
    .search-panel button {
      flex: 0 0 auto;
      white-space: nowrap;
    }
  }
}

/* Asztali nézetben (és nem-iOS mobilon) maradhat a kisebb kereső betűméret,
   hogy ne változzon a desktop kinézet. */
@media (min-width: 900px) {
  .search-panel input[type="search"],
  .search-panel input[type="text"] {
    font-size: 14px;
  }
}