/* Keszeg-specific overrides on top of the generated Mercury CSS.
   Written as plain CSS on purpose: the compiled build/main.min.css is a
   pre-built Tailwind bundle (no live build step in this project), so any
   Tailwind utility class we type into a Twig template that Mercury's own
   build never used simply does not exist in the shipped CSS. Everything
   below is hand-written so it always works regardless of what Tailwind
   happened to compile. */

/* Some migrated legacy article bodies contain content (long unbroken
   words/URLs, stray inline elements) that's wider than a mobile
   viewport. Because the navbar is `position: fixed` (sized against the
   viewport), letting that overflow actually widen the page's layout
   viewport also stretched the fixed navbar and pushed the hamburger
   button off-screen. Clipping horizontal overflow at the root keeps the
   viewport (and therefore the fixed navbar) locked to the real device
   width, regardless of what any one article's body HTML does. */
html,
body {
  overflow-x: hidden;
}

/* Page canvas background = the grey from the coat of arms' wavy band
   (#d5d7d9). Cards/panels (content card, latest-news cards, ticker,
   etc.) all set their own explicit white background already, so they're
   unaffected — only the space around/behind them picks this up. */
body {
  background: #d5d7d9;
}

/* --- Front page hero: the header region stacks navbar then hero in
   normal flow, which leaves the navbar's own box (and a gap) above the
   hero image instead of the image reaching the very top of the page.
   Fix: take the navbar out of flow (position it over the hero) on the
   front page only, so the hero naturally starts at y=0. The component's
   own "overlap_navbar" prop relies on Tailwind arbitrary-value classes
   that were never part of Mercury's original build and don't exist in
   the precompiled build/main.min.css, so this is done by hand instead. */
.path-frontpage header[role='banner'] {
  position: relative;
}

/* Sticky "frosted glass" header on every page: fixed to the viewport and
   spanning the full screen width, translucent white with a background
   blur so page content stays partially visible/blurred underneath it
   while scrolling.

   This is on the block wrapper (#block-keszeg-theme-navbar), NOT on
   .navbar itself — .navbar carries Tailwind's `container mx-auto`,
   which caps its own width and centers it. Positioning/backgrounding the
   wrapper instead lets the bar itself span edge-to-edge while .navbar
   keeps the nav content centered and readable inside it. */
#block-keszeg-theme-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

/* The frosted-glass blur is desktop-only. backdrop-filter (like
   transform/filter) makes the element it's on a new "containing block"
   for any position:fixed descendant — and the mobile hamburger menu
   panel (.navbar--menu, full-screen when open) is exactly such a
   descendant. With the blur active at mobile widths, that panel ends up
   sized to the ~80px-tall navbar bar instead of the full viewport,
   breaking the mobile menu entirely. Desktop has no such fixed-position
   descendant relying on true viewport sizing, so it's safe there. */
@media (min-width: 768px) {
  #block-keszeg-theme-navbar {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* Front page starts fully transparent over the hero image instead, with
   no blur (nothing behind it needs softening at the very top).
   Desktop-only, same as the rest of this block — on mobile the bar has
   no visible nav text to protect (menu items only exist inside the
   hamburger panel), so it just stays the plain solid white bar from the
   base rule above; simpler, and guarantees the logo/hamburger icon stay
   readable regardless of scroll position. */
@media (min-width: 768px) {
  .path-frontpage #block-keszeg-theme-navbar {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}

/* Scrolled state (lib/sticky-header.js toggles this once you scroll past
   the hero) — same frosted-glass look as interior pages, desktop only
   for the same fixed-positioning reason as above. */
@media (min-width: 768px) {
  .path-frontpage #block-keszeg-theme-navbar.navbar--solid {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  }
}

@media (min-width: 768px) {
  .path-frontpage #block-keszeg-theme-navbar.navbar--solid .keszeg-nav-item > a,
  .path-frontpage #block-keszeg-theme-navbar.navbar--solid .keszeg-nav-item__toggle,
  .path-frontpage #block-keszeg-theme-navbar.navbar--solid .keszeg-nav-caret {
    color: #1d1d1d;
  }
}

/* The hero's own content still needs clearing space so it doesn't render
   underneath the (now-absolutely-positioned) navbar. */
.keszeg-hero-overlap__content {
  padding-top: calc(var(--navbar-height) + 1.5rem);
}

@media (min-width: 768px) {
  .keszeg-hero-overlap__content {
    padding-top: calc(var(--navbar-height) + 2.5rem);
  }
}

/* Front-page hero background video: a YouTube iframe oversized 3x and
   centered so it always covers the hero regardless of its aspect ratio
   (no viewport units, since the hero isn't full-viewport height). Sits
   above the poster <img> (fallback for slow/blocked embeds) and below
   the existing dark overlay div. */
.keszeg-hero-video-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.keszeg-hero-video-bg__iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  border: 0;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .keszeg-hero-video-bg {
    display: none;
  }
}

/* --- "Dokumentumtár" page: a small grid of link panels, inline in the
   page's own body content (inside .keszeg-content-card__main, alongside
   the sidebar) — auto-fit/minmax rather than viewport-width breakpoints
   since the available width here is the content column's, not the
   viewport's (narrower than the viewport once the 240px sidebar and
   card padding are subtracted). Wraps to as many rows as needed. */
.keszeg-hero-panels__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.keszeg-hero-panels__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.keszeg-hero-panels__item:hover,
.keszeg-hero-panels__item:focus-visible {
  border-color: #005ca1;
  box-shadow: 0 10px 24px rgba(0, 92, 161, 0.2);
  transform: translateY(-2px);
}

.keszeg-hero-panels__item--category {
  text-align: center;
  color: #005ca1;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Hero entrance effect: title fades/slides up first, subtitle follows a
   beat later. Respects prefers-reduced-motion — no animation at all for
   anyone who's asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .keszeg-hero-overlap__content h1,
  .keszeg-hero-overlap__content p {
    opacity: 0;
    transform: translateY(24px);
    animation: keszeg-hero-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .keszeg-hero-overlap__content h1 {
    animation-delay: 0.15s;
  }

  .keszeg-hero-overlap__content p {
    animation-delay: 0.45s;
  }

  @keyframes keszeg-hero-reveal {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* White nav text only applies on desktop, where the navbar sits
   transparently over the hero image. On mobile the hamburger menu opens
   as its own opaque white full-screen panel (regardless of which page
   it's opened from), so forcing white text there made every top-level
   label unreadable (white on white). */
@media (min-width: 768px) {
  .path-frontpage .keszeg-nav-item > a,
  .path-frontpage .keszeg-nav-item__toggle {
    color: #fff;
  }
}

@media (min-width: 768px) {
  .path-frontpage .keszeg-nav-caret {
    color: #fff;
  }
}

/* Search field in the header: always a solid white box regardless of
   what's behind the navbar. */
.navbar--search input[type='search'] {
  background: #fff;
  color: #1d1d1d;
}

/* Navbar layout, desktop only: logo flush to the far left edge, menu
   centered, search flush to the far right edge — .navbar ships with
   Tailwind's `container` class, which caps it well short of the full bar
   width on large screens, leaving a visible gap before the logo/after
   the search reached the true edges. Drop the cap so the bar's content
   actually spans edge to edge (matching the #block-keszeg-theme-navbar
   background behind it, which is already full width).
   Scoped to desktop: on mobile .navbar holds the hamburger-menu layout,
   and this same width:100% override made it overflow its container,
   pushing the hamburger button off-screen entirely. */
@media (min-width: 768px) {
  .navbar {
    max-width: none;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .navbar--dropdown-menu {
    justify-content: center;
  }
}

/* Drupal's core "Label: Inline" field display option only sets a variable
   — it never actually lays the label and value out on one line without
   matching CSS, which no base theme here provides. */
.keszeg-field-inline {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.keszeg-field-inline > div:first-child {
  font-weight: 600;
}

.keszeg-field-inline > div:first-child::after {
  content: ':';
}

.keszeg-navbar-logo-img {
  height: 56px;
  width: auto;
  display: block;
}

/* Small publish date under a "hir" node's title — both on listing pages
   (node--hir--teaser.html.twig) and its own page (the H1 title band, via
   ThemeHooks::preprocessPage()'s keszeg_hir_date + page.html.twig). */
.keszeg-hir-date {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
  margin-bottom: 16px;
}

.keszeg-title-band .keszeg-hir-date {
  color: rgba(255, 255, 255, 0.75);
  margin-top: 8px;
}

/* --- Main menu dropdown (child links under a top-level nav item) --- */
.keszeg-nav-item__toggle {
  cursor: pointer;
}

.keszeg-nav-caret {
  font-size: 10px;
  margin-left: 2px;
}

.keszeg-nav-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* This markup (.keszeg-nav-item--has-children / .keszeg-nav-submenu) is
   shared by two different consumers of menu--main.html.twig: the top
   navbar (wants a hover flyout dropdown) and the sidebar "Menü" built by
   ThemeHooks::buildSectionMenu() (both render the "main" menu, just
   different subtrees) — which wants a plain always-visible indented list,
   NOT a floating box. The flyout rules below are scoped to `.navbar` so
   they never leak into `.keszeg-section-menu`. */
@media (min-width: 768px) {
  .navbar .keszeg-nav-item--has-children {
    position: relative;
  }

  .navbar .keszeg-nav-item--has-children > .keszeg-nav-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 220px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 6px;
  }

  .navbar .keszeg-nav-item--has-children:hover > .keszeg-nav-submenu,
  .navbar .keszeg-nav-item--has-children:focus-within > .keszeg-nav-submenu {
    display: block;
  }

  .navbar .keszeg-nav-submenu a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: #1d1d1d;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
  }

  .navbar .keszeg-nav-submenu a:hover {
    background: #f3f4f6;
  }

  /* Cascading mega-menu: a nested submenu (3rd nav level, e.g.
     "Történelmünk" > "A falu történelme" > "Deák Ferenc Keszegen") flies
     out to the *side* of its parent row instead of dropping below it —
     the parent dropdown box would otherwise have to grow to fit both
     lists stacked, cramped and confusing about which item owns which
     children. Matches the "Classic >" cascading panel pattern from the
     Assan template reference. */
  .navbar .keszeg-nav-submenu .keszeg-nav-submenu {
    top: -6px;
    left: 100%;
    margin-left: 4px;
  }

  /* If the item's own label already has a submenu-open caret (▾), swap
     it for a "opens sideways" chevron so the direction reads correctly. */
  .navbar .keszeg-nav-submenu .keszeg-nav-item--has-children > a .keszeg-nav-caret,
  .navbar .keszeg-nav-submenu .keszeg-nav-item--has-children > .keszeg-nav-item__toggle .keszeg-nav-caret {
    display: inline-block;
    transform: rotate(-90deg);
    margin-left: auto;
    padding-left: 12px;
  }

  .navbar .keszeg-nav-submenu .keszeg-nav-item--has-children > a,
  .navbar .keszeg-nav-submenu .keszeg-nav-item--has-children > .keszeg-nav-item__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* Mobile navbar: submenu is always expanded inline under its parent. */
@media (max-width: 767px) {
  .navbar .keszeg-nav-submenu {
    padding-left: 16px;
  }

  .navbar .keszeg-nav-submenu a {
    display: block;
    padding: 8px 12px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
  }

  /* Accordion: only top-level items show by default; a submenu only
     appears once its parent is tapped open (see lib/nav-accordion.js). */
  .navbar .keszeg-nav-item--has-children > .keszeg-nav-submenu {
    display: none;
  }

  .navbar .keszeg-nav-item--expanded > .keszeg-nav-submenu {
    display: block;
  }

  .navbar .keszeg-nav-caret {
    display: inline-flex;
    padding: 4px 8px;
    margin: -4px -8px;
    transition: transform 0.15s ease;
  }

  .navbar .keszeg-nav-item--expanded > a > .keszeg-nav-caret,
  .navbar .keszeg-nav-item--expanded > .keszeg-nav-item__toggle > .keszeg-nav-caret {
    transform: rotate(180deg);
  }
}

/* Sidebar "Menü": a plain, always-expanded, in-flow tree — no
   floating/hover flyout at any viewport width (that's the navbar's job,
   scoped to `.navbar` above). Top-level items are this section's direct
   children (e.g. "A falu történelme"); each may have its own nested
   `.keszeg-nav-submenu`, rendered via the same recursive macro. */
.keszeg-section-menu li[data-level='1'] {
  width: 100%;
}

.keszeg-section-menu > nav > ul[data-level='1'] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.keszeg-section-menu > nav > ul[data-level='1'] > li > a,
.keszeg-section-menu > nav > ul[data-level='1'] > li > .keszeg-nav-item__toggle {
  display: block;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1d;
  text-decoration: none;
}

.keszeg-section-menu a:hover,
.keszeg-section-menu .keszeg-nav-item__toggle:hover {
  background: #f3f4f6;
}

/* The whole branch leading to the current page — every ancestor plus the
   page itself — is highlighted in the accent color, so it's obvious which
   item(s) it belongs under even several levels deep. */
.keszeg-section-menu .keszeg-nav-item--active > a,
.keszeg-section-menu .keszeg-nav-item--active > .keszeg-nav-item__toggle {
  color: var(--primary, #005ca1);
}

/* The current page itself is the active item with no active children of
   its own — give just that one a solid "you are here" pill. */
.keszeg-section-menu .keszeg-nav-item--active:not(:has(.keszeg-nav-item--active)) > a {
  background: var(--primary, #005ca1);
  color: #fff;
}

/* The parent <li> lays its <a> and its <ul class="keszeg-nav-submenu">
   out as flex row siblings by default (same markup the navbar's hover
   flyout uses) — that put the submenu beside "Dokumentumtár" instead of
   nested underneath it. Stack them instead. */
.keszeg-section-menu li.keszeg-nav-item--has-children {
  flex-direction: column;
  align-items: stretch;
}

/* Accordion: a submenu only shows once its parent is clicked open (see
   lib/nav-accordion.js), except the branch leading to the current page,
   which stays open so it's always visible where you are. */
.keszeg-section-menu .keszeg-nav-submenu {
  display: none;
  padding-left: 18px;
  margin: 2px 0 2px 12px;
  border-left: 2px solid #e5e7eb;
}

.keszeg-section-menu .keszeg-nav-item--active > .keszeg-nav-submenu,
.keszeg-section-menu .keszeg-nav-item--expanded > .keszeg-nav-submenu {
  display: block;
}

.keszeg-section-menu .keszeg-nav-caret {
  display: inline-flex;
  padding: 4px 8px;
  margin: -4px -8px;
  transition: transform 0.15s ease;
}

.keszeg-section-menu .keszeg-nav-item--expanded > a > .keszeg-nav-caret {
  transform: rotate(180deg);
}

.keszeg-section-menu .keszeg-nav-item--active > .keszeg-nav-submenu {
  border-left-color: var(--primary, #005ca1);
}

.keszeg-section-menu .keszeg-nav-submenu a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  color: #4b5563;
  text-decoration: none;
  font-size: 13px;
}

.keszeg-section-menu .keszeg-nav-submenu a::before {
  content: '';
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9ca3af;
}

.keszeg-section-menu .keszeg-nav-item--active > .keszeg-nav-submenu a::before {
  background: var(--primary, #005ca1);
}


/* --- "Plakát" node page: show the poster at its original resolution,
   scaled down (never up) to fit — the field formatter is set to no image
   style so the <img> already ships the full-size file; a fixed CSS
   max-width here would just upscale a smaller style and blur it on
   desktop. Scoped to our own .keszeg-poszter class (core adds no BEM
   classes here) so it can't collide with .keszeg-gallery-grid thumbnails
   elsewhere, which also use an "a.glightbox img" selector but need to
   stay small. --- */
.keszeg-poszter a.glightbox img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Site footer: dark, 4 columns --- */
.keszeg-footer {
  background: #1a2332;
  color: #cbd3e1;
  margin-top: 48px;
}

.keszeg-footer__columns {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 1rem 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

@media (max-width: 900px) {
  .keszeg-footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .keszeg-footer__columns {
    grid-template-columns: 1fr;
  }
}

.keszeg-footer__col h3 {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 16px;
}

.keszeg-footer__col p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #9aa5b8;
}

.keszeg-footer__col p:last-child {
  margin-bottom: 0;
}

/* Columns are now free-form WYSIWYG (block_content "basic" blocks, see
   FooterBlock::buildColumn()) rather than hand-built markup with a
   dedicated .keszeg-footer__link wrapper — style any link the editor
   adds, wherever it ends up in the markup. */
.keszeg-footer__col a {
  color: #cbd3e1;
  text-decoration: none;
  font-size: 14px;
}

.keszeg-footer__col a:hover {
  color: #fff;
  text-decoration: underline;
}

.keszeg-footer__copyright {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 13px;
  color: #8b95a8;
}

/* --- Front page: latest 6 "Hír" cards, 3 columns x 2 rows --- */
.keszeg-latest-news {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 1rem;
}

.keszeg-latest-news__heading {
  font-size: 1.75rem;
  font-weight: 600;
  color: #222;
  margin: 0 0 24px;
  text-align: center;
}

/* --- Front page "Következő mérkőzések" ticker banner, sits between the
   hero and the news grid — a dark header bar + light body, echoing the
   old site's blue banner treatment for this block. */
#block-keszeg-theme-merkozes-ticker {
  max-width: 1080px;
  margin: 32px auto 0;
  padding: 0 1rem;
}

#block-keszeg-theme-merkozes-ticker h2 {
  margin: 0;
  padding: 10px 20px;
  background: var(--primary, #005ca1);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px 8px 0 0;
}

#block-keszeg-theme-merkozes-ticker .keszeg-news-ticker-wrapper {
  background: #ebf2f7;
  border-radius: 0 0 8px 8px;
  padding: 14px 20px;
  overflow: hidden;
}

#block-keszeg-theme-merkozes-ticker .keszeg-news-ticker {
  list-style: none;
  margin: 0;
  padding: 0;
}

#block-keszeg-theme-merkozes-ticker .keszeg-news-ticker li {
  font-family: 'Courier New', monospace;
  font-size: 1.05rem;
  line-height: 1.4;
  height: 1.4em;
  color: #1d1d1d;
  overflow-wrap: break-word;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.5s ease-in, opacity 0.5s ease-in;
}

/* Below the mobile breakpoint, news-ticker.js swaps the single typed line
   for one that cycles whole (date, then title on their own line) instead
   of typing character-by-character — still animated via the same slide
   transition as the desktop version's "line feed", just no typing. */
@media (max-width: 767px) {
  #block-keszeg-theme-merkozes-ticker .keszeg-news-ticker--mobile-cycle li {
    height: auto;
    font-weight: 700;
  }

  #block-keszeg-theme-merkozes-ticker .keszeg-news-ticker--mobile-cycle li > div {
    display: block;
  }
}

/* The "carriage return": the finished line slides up and fades out before
   the next one starts typing, like rolling an old typewriter's platen. */
#block-keszeg-theme-merkozes-ticker .keszeg-news-ticker li.keszeg-news-ticker__line-out {
  transform: translateY(-120%);
  opacity: 0;
}

#block-keszeg-theme-merkozes-ticker .date-display-single {
  color: var(--primary, #005ca1);
  font-weight: 700;
  margin-right: 6px;
}

.keszeg-latest-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .keszeg-latest-news__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .keszeg-latest-news__grid {
    grid-template-columns: 1fr;
  }
}

.keszeg-latest-news__card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.keszeg-latest-news__card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  margin: 0;
}

.keszeg-latest-news__card article {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Card title bar echoes the same blue banner treatment as the
   "Következő mérkőzések" ticker heading — negative margins break the
   h2 out of the article's own padding so the bar runs edge-to-edge. */
.keszeg-latest-news__card h2 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: -16px -16px 12px;
  padding: 10px 16px;
  background: var(--primary, #005ca1);
}

.keszeg-latest-news__card h2 a {
  color: #fff;
  text-decoration: none;
}

.keszeg-latest-news__card h2 a:hover {
  color: #d1e2ee;
}

.keszeg-latest-news__card .keszeg-body-field {
  font-size: 13px;
  color: #6f6f6f;
  line-height: 1.5;
  margin: 0 0 12px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.keszeg-latest-news__card ul.links {
  list-style: none;
  margin-top: auto;
  padding: 0;
}

.keszeg-latest-news__card ul.links li {
  list-style: none;
}

.keszeg-latest-news__card ul.links a {
  display: inline-block;
  padding: 6px 14px;
  background: #005ca1;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.keszeg-latest-news__card--plakat .keszeg-latest-news__card-body {
  padding: 10px 16px;
  background: var(--primary, #005ca1);
}

.keszeg-latest-news__card--plakat img {
  height: auto;
  object-fit: contain;
}

.keszeg-latest-news__card--plakat h2 {
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.3;
}

.keszeg-latest-news__card--plakat h2 a {
  color: #fff;
  text-decoration: none;
}

.keszeg-latest-news__card--plakat h2 a:hover {
  color: #d1e2ee;
}

.keszeg-latest-news__card ul.links a:hover {
  background: #003761;
}

/* --- Sub-page title band (photo + breadcrumb + title) --- */
.keszeg-title-band {
  position: relative;
  min-height: 290px;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Keep the title clear of the content card, which overlaps the bottom
     80px of this band (see .keszeg-content-wrap's negative margin). Long
     titles grow the band (min-height) instead of being clipped — the
     overflow:hidden here only clips the __bg's scale(1.1) overhang, not
     the title text, since the box now sizes itself to the content. */
  padding-top: 32px;
  padding-bottom: 90px;
}

.keszeg-title-band__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  transform: scale(1.1);
  z-index: 0;
}

.keszeg-title-band__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.keszeg-title-band__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  /* Extra top padding clears the fixed header (whose real height is
     --navbar-height) — the band's own background image still reaches
     y=0 behind it, only this text content gets pushed down. */
  padding: calc(var(--navbar-height) + 1.5rem) 1rem 0;
  color: #fff;
}

.keszeg-title-band__content h1 {
  font-size: 2rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .keszeg-title-band__content h1 {
    font-size: 2.75rem;
  }
}

@media (min-width: 1024px) {
  .keszeg-title-band__content h1 {
    font-size: 3.5rem;
  }
}

.keszeg-title-band__content a {
  color: rgba(255, 255, 255, 0.8);
}

.keszeg-title-band__content a:hover {
  color: #fff;
}

/* --- Content card: sidebar menu + main content, overlapping the band --- */
.keszeg-content-wrap {
  max-width: 1080px;
  margin: -80px auto 0;
  padding: 0 1rem 3rem;
  position: relative;
  z-index: 3;
}

.keszeg-content-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .keszeg-content-card {
    flex-direction: row;
    align-items: flex-start;
    padding: 40px;
  }

  .keszeg-content-card__sidebar {
    flex: 0 0 240px;
    width: 240px;
    /* Flex items default to min-width:auto, which lets a long unbroken
       menu label (e.g. "Szendehelyi KÖH/Polgármesteri Hivatal") force
       this column wider than its 240px basis and spill text over the
       main content column instead of wrapping. */
    min-width: 0;
  }

  /* This menu reuses the navbar's own recursive item markup — <li> and
     <ul> are Tailwind flex containers too, each defaulting to
     min-width:auto, so a long unbroken label (e.g. "Szendehelyi KÖH,
     Polgármesteri Hivatal") kept forcing every ancestor up to the <ul>
     wider than the 240px sidebar column and spilling past it, even
     after the link itself was fixed. */
  .keszeg-content-card__sidebar li,
  .keszeg-content-card__sidebar ul {
    min-width: 0;
  }

  .keszeg-content-card__sidebar a,
  .keszeg-content-card__sidebar .keszeg-nav-item__toggle {
    /* The <a> itself is also a flex container (Tailwind's "flex"
       utility) whose raw text content becomes an anonymous flex item —
       min-width:0 on the <a> doesn't reach that anonymous child, so
       overriding display:flex back to block sidesteps the rule
       entirely instead. */
    display: block;
    overflow-wrap: break-word;
  }

  .keszeg-content-card__main {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.keszeg-content-card__sidebar-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.keszeg-kiskep {
  margin-bottom: 20px;
}

/* Embedded remote video (YouTube etc. via <drupal-media>/oembed) — fill
   the content width at a proper 16:9 ratio instead of the tiny fixed
   200x150 default iframe size. */
.keszeg-content-card__main iframe.media-oembed-content {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 8px;
  margin: 1em 0;
}

/* --- Content typography, matched to godollo.hu's rendered styles --- */
.keszeg-content-card__main {
  color: #1d1d1d;
}

.keszeg-content-card__main h1,
.keszeg-content-card__main h2,
.keszeg-content-card__main h3,
.keszeg-content-card__main h4,
.keszeg-content-card__main h5,
.keszeg-content-card__main h6 {
  color: #222;
  line-height: 1.3;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
}

.keszeg-content-card__main h1 {
  font-size: 1.875rem;
}

.keszeg-content-card__main h2 {
  font-size: 1.625rem;
}

.keszeg-content-card__main h3 {
  font-size: 1.375rem;
}

.keszeg-content-card__main h4 {
  font-size: 1.15rem;
}

.keszeg-content-card__main h5 {
  font-size: 1.05rem;
}

.keszeg-content-card__main h6 {
  font-size: 1rem;
}

.keszeg-content-card__main p,
.keszeg-content-card__main .keszeg-body-field {
  font-size: 15px;
  line-height: 1.5;
}

.keszeg-content-card__main p {
  margin: 0 0 1em;
}

.keszeg-content-card__main p:last-child {
  margin-bottom: 0;
}

/* --- Teaser lists (e.g. taxonomy term pages): space rows apart, and
   turn the core "Tovább" (read more) link into a button instead of a
   bulleted <ul class="links"> item. --- */
.keszeg-content-card__main .views-row {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid #e5e7eb;
  /* Contain any floated inline image (.inline-left/.inline-right) from a
     teaser's trimmed body so it never bleeds into the next row. */
  overflow: hidden;
}

.keszeg-content-card__main .views-row:first-child {
  margin-top: 0;
}

.keszeg-content-card__main .views-row > article > h2 {
  /* The row's own padding/margin already separates it from the previous
     row — containing the float above (overflow:hidden) stops that
     heading margin from collapsing through like it used to, so without
     this the gap above the title doubles up. */
  margin-top: 0;
  /* Bottom margin removed too — spacing below the title down to the
     date/thumbnail is fully controlled by .keszeg-hir-date's own
     margins instead of also fighting the heading's default margin. */
  margin-bottom: 0;
}

.keszeg-content-card__main .views-row:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.keszeg-content-card__main ul.links {
  /* Tailwind's precompiled .inline utility (display:inline) also matches
     this element (class="links inline") and otherwise wins since we never
     set our own `display` — override it so clear:both actually works. */
  display: block;
  list-style: none;
  clear: both;
  margin: 20px 0 0;
  padding: 0;
}

.keszeg-content-card__main ul.links li {
  display: inline-block;
}

.keszeg-content-card__main ul.links a {
  display: inline-block;
  padding: 8px 18px;
  background: #005ca1;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.keszeg-content-card__main ul.links a:hover {
  background: #003761;
}

.keszeg-content-card__main blockquote {
  margin: 1.5em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid #dde3ea;
  font-style: italic;
  font-size: 15px;
  color: #1d1d1d;
}

.keszeg-content-card__main blockquote p {
  font-size: inherit;
  font-style: inherit;
  margin-bottom: 0.5em;
}

.keszeg-content-card__main blockquote p:last-child {
  margin-bottom: 0;
}

/* Plain (non-floated) inline images directly in body content — give them
   breathing room from the text that follows. */
.keszeg-content-card__main img {
  margin-bottom: 20px;
}

/* Inline images from migrated legacy body content (D6 "align left/right"
   thumbnails). Drupal's text-format filter converts the raw data-align
   attribute into an .align-left/.align-right class on output — that class
   carries no styling of its own, so float + spacing are added here. */
.keszeg-content-card__main img.align-left,
.keszeg-content-card__main .inline-left {
  float: left;
  margin: 4px 20px 12px 0;
}

.keszeg-content-card__main img.align-right,
.keszeg-content-card__main .inline-right {
  float: right;
  margin: 4px 0 12px 20px;
}

/* --- Tables in migrated body content: one unified look, regardless of
   whatever inline formatting the legacy HTML shipped with (attributes and
   classes like border="0"/.odd/.even are stripped on import). --- */
.keszeg-content-card__main table {
  width: 100%;
  max-width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  font-size: 14px;
}

.keszeg-content-card__main table td,
.keszeg-content-card__main table th {
  /* Tailwind's compiled bundle has bare "table,th,td{font-size:...}" rules
     (from text-lg/text-xl variants used elsewhere) that set font-size
     directly on td/th — our own table{font-size} rule never reaches these
     elements since it only matches the <table> itself, so it has to be
     repeated here explicitly. */
  font-size: 14px;
  padding: 8px 14px;
  border: 1px solid #e5e7eb;
  text-align: left;
}

.keszeg-content-card__main table th {
  background: #f5f7fa;
  font-weight: 600;
}

.keszeg-content-card__main table tr:nth-child(even) {
  background: #f9fafb;
}

.keszeg-content-card__main a {
  color: #005ca1;
}

.keszeg-content-card__main a:hover {
  color: #003761;
}

/* --- "Hír" attachments (field_csatolmany), styled like godollo.hu's
   downloadable-document buttons --- */
.keszeg-attachments {
  margin-top: 32px;
  padding-top: 4px;
}

/* field.html.twig wraps multi-value items in an unstyled <div> that comes
   right after the label div — that's the actual row of attachment items. */
.keszeg-attachments > div:last-child {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.keszeg-attachments__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6f6f6f;
}

.keszeg-attachments__label::before,
.keszeg-attachments__label::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #e5e7eb;
}

.keszeg-attachments__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 16px;
  background: #f5f7fa;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  color: #1d1d1d;
  font-size: 14px;
}

.keszeg-attachments__item:hover {
  background: #e0ebf4;
  border-color: #005ca1;
}

.keszeg-attachments__item::before {
  content: '';
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e73be' 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 2v6h6'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='m9 15 3 3 3-3'/%3E%3C/svg%3E") no-repeat center / contain;
}

.keszeg-attachments__item a {
  color: inherit;
  text-decoration: none;
}

.keszeg-attachments__item a::after {
  /* Make the whole box clickable, not just the filename text. */
  content: '';
  position: absolute;
  inset: 0;
}

/* --- "Hír" taxonomy terms (field_tartalom_tipus), tag-icon + chip row --- */
.keszeg-taxonomy-tags {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.keszeg-taxonomy-tags::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-right: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.keszeg-taxonomy-tags a {
  color: #005ca1;
  text-decoration: none;
  padding: 4px 10px;
  background: #ebf2f7;
  border-radius: 999px;
}

.keszeg-taxonomy-tags a:hover {
  background: #d1e2ee;
}

/* The login form's submit button sat right against the password field's
   underline with no breathing room. */
.user-login-form .form-actions {
  margin-top: 1.5rem;
}

/* Double-tap-to-zoom for GLightbox images on phones — see
   lib/glightbox-zoom.js, which toggles this class centered on the tap
   point. GLightbox's own built-in zoom only activates above 768px. */
.gslide-media img {
  transition: transform 0.25s ease;
}

.gslide-media img.keszeg-glightbox-zoomed {
  transform: scale(2.2);
}

/* Site name shown between the crest and the hamburger button on mobile —
   the mobile navbar bar is always solid white (see the backdrop-filter
   fix above), so this never needs the front-page transparent-overlay
   white-text treatment the desktop nav links get. */
.keszeg-navbar-mobile-title {
  color: #1d1d1d;
  font-size: 1rem;
  font-weight: 600;
}

/* --- "Dokumentumtár" overview page: per-category preview (kosd.hu
   /dokumentumtar structure) — see ThemeHooks::buildDokumentumtarOverview()
   for the markup this styles. --- */
.keszeg-dokumentumtar-overview {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.keszeg-dokumentumtar-overview__section h2 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #ebf2f7;
  font-size: 1.15rem;
  color: #003761;
}

.keszeg-dokumentumtar-overview__list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.keszeg-dokumentumtar-overview__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.keszeg-dokumentumtar-overview__item a {
  color: #1d1d1d;
  text-decoration: none;
}

.keszeg-dokumentumtar-overview__item a:hover {
  color: #005ca1;
  text-decoration: underline;
}

.keszeg-dokumentumtar-overview__date {
  flex: 0 0 auto;
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
}

.keszeg-dokumentumtar-overview__empty {
  color: #6b7280;
  font-size: 14px;
  margin: 0 0 10px;
}

.keszeg-dokumentumtar-overview__more {
  display: inline-block;
  color: #005ca1;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.keszeg-dokumentumtar-overview__more:hover {
  text-decoration: underline;
}

/* --- Dokumentumtár category table pages (views.view.dokumentumtar_kategoriak):
   search + sortable table + pager, styled to match the site instead of
   Views' bare default markup. --- */
.keszeg-content-card__main .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
}

.keszeg-content-card__main .views-exposed-form .form-item {
  margin: 0;
}

.keszeg-content-card__main .view-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.keszeg-content-card__main .view-content table th {
  text-align: left;
  padding: 10px 12px;
  background: #005ca1;
  color: #fff;
  font-weight: 600;
}

.keszeg-content-card__main .view-content table th a {
  color: #fff;
  text-decoration: none;
}

.keszeg-content-card__main .view-content table td {
  padding: 10px 12px;
  border-bottom: 1px solid #ebf2f7;
}

.keszeg-content-card__main .view-content table tbody tr:hover {
  background: #ebf2f7;
}

.keszeg-content-card__main .view-content table a {
  color: #005ca1;
  text-decoration: none;
}

.keszeg-content-card__main .view-content table a:hover {
  text-decoration: underline;
}

.keszeg-content-card__main .views-element-container .view-header {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 8px;
}

.keszeg-content-card__main .pager {
  margin-top: 20px;
}

.keszeg-dokumentumtar-back {
  display: inline-block;
  margin-top: 20px;
  color: #005ca1;
  font-weight: 600;
  text-decoration: none;
}

.keszeg-dokumentumtar-back:hover {
  text-decoration: underline;
}