/* ==========================================================
   Base settings
   ========================================================== */
:root {
  /* ----------------------------------------------------------
     The site's COLOUR SCHEME — the 3 given greens are the base:
       - 386641 (dark green)
       - 6a994e (medium green)
       - a7c957 (light, lime green)
     None of the given colours is light enough for a background, so the
     background and border colours are derived from a7c957 (mixed with
     white), and the text colour is a darker shade of 386641.
     Changing these variables recolours the whole site.
     ---------------------------------------------------------- */
  --color-primary: #386641;        /* dark green – buttons, links, headings, footer */
  --color-primary-dark: #2a4d31;   /* darker shade of dark green – hover state */
  --color-accent: #6a994e;         /* medium green – decorative lines, icons */
  --color-highlight: #a7c957;      /* light green – date labels, highlights */
  --color-text: #233f2a;           /* derived dark green – body text */
  --color-text-muted: rgba(35, 63, 42, 0.72);
  --color-bg: #f4f9eb;             /* derived – main background */
  --color-bg-alt: #e8f1d2;         /* derived – alternating section background */
  --color-border: #d3e4ab;         /* derived – borders */
  --color-alert: #b42318;          /* red – notice bar (top of the page) */

  --font-heading: 'Georgia', 'Times New Roman', serif;
  --font-body: 'Segoe UI', Arial, sans-serif;
  --max-width: 1100px;
}

* {
  box-sizing: border-box;
}

/* The hidden attribute hides an element even if it has its own display rule */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.25;
  margin-top: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 72px 0;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  text-align: center;
}

.section-lead {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
  color: var(--color-text-muted);
}

.btn {
  display: inline-block;
  padding: 12px 28px;
  border: none;
  border-radius: 30px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

/* Light button on a dark green background (e.g. in the Csapatunk section) */
.btn-light {
  background: #fff;
  color: var(--color-primary);
}

.btn-light:hover {
  background: var(--color-highlight);
}

/* ==========================================================
   Header / navigation
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 249, 235, 0.95);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(4px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-primary);
  line-height: 1.2;
}

/* The logo is a JPG with a white background: multiply blending makes the white
   transparent in front of the header's pale background, the black stays black */
.logo-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.main-nav a:hover {
  color: var(--color-accent);
}

.main-nav a[aria-current="page"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-highlight);
}

/* The "Támogass minket" menu item looks like a button */
.main-nav a.nav-cta {
  padding: 8px 18px;
  border-bottom: none;
  border-radius: 30px;
  background: var(--color-primary);
  color: #fff;
}

.main-nav a.nav-cta:hover {
  background: var(--color-primary-dark);
  color: #fff;
}

.main-nav a.nav-cta[aria-current="page"] {
  background: var(--color-primary-dark);
  color: #fff;
}

/* "Csatlakozom" is a button too, next to "Támogass minket", in a lighter green */
.main-nav a.nav-cta-join {
  background: var(--color-highlight);
  color: var(--color-text);
}

.main-nav a.nav-cta-join:hover {
  background: var(--color-accent);
  color: #fff;
}

.main-nav a.nav-cta-join[aria-current="page"] {
  background: var(--color-accent);
  color: #fff;
}

/* Dropdown menus (Események, Pénzügyek): open on click and – with a mouse – on hover */
.has-sub {
  position: relative;
}

.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* downward arrow, turns upward when open */
.nav-sub-toggle::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease, margin 0.2s ease;
}

.has-sub.open > .nav-sub-toggle::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.nav-sub-toggle:hover {
  color: var(--color-accent);
}

.has-sub.is-current > .nav-sub-toggle {
  color: var(--color-primary);
  border-bottom-color: var(--color-highlight);
}

.main-nav .sub-nav {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 110;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 150px;
  margin-top: 10px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(35, 63, 42, 0.16);
  transform: translateX(-50%);
}

/* invisible "bridge" between the menu item and the dropdown, so it does not close while hovering */
.main-nav .sub-nav::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.main-nav .sub-nav a {
  display: block;
  padding: 9px 14px;
  border-bottom: 0;
  border-radius: 8px;
}

.main-nav .sub-nav a:hover,
.main-nav .sub-nav a[aria-current="page"] {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.has-sub.open > .sub-nav {
  display: flex;
}

/* Wide screens used with a mouse: opens on hover only (clicking does nothing),
   without an arrow; with the keyboard (Tab) focus opens it. Touch screens keep click + arrow. */
@media (hover: hover) and (min-width: 1281px) {
  .has-sub:hover > .sub-nav,
  .has-sub:has(:focus-visible) > .sub-nav {
    display: flex;
  }

  .nav-sub-toggle {
    cursor: default;
  }

  .nav-sub-toggle::after {
    display: none;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* ==========================================================
   Hero (home page)
   The cover image is shown IN FULL, without cropping or distortion: the image
   fills the width keeping its own ratio, and its height follows from that
   (on a large screen it may be taller than the viewport; the bottom is then
   reached by scrolling). If the image is missing (script.js removes an image
   that fails to load), a green gradient shows.
   ========================================================== */
.hero {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 260px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.hero-img {
  display: block;
  width: 100%;
  height: auto;
}

/* The phone version of the image (the 802 aerial photo) is hidden on desktop */
.hero-img-mobile {
  display: none;
}

.hero h1 {
  position: absolute;
  /* 16% is left free at the bottom, so the title sits at about 42% of the image height
     (above the middle); a larger value moves it higher */
  inset: 0 0 16% 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px;
  text-align: center;
  color: #fff;
  font-size: 3rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* Title banner of the subpages */
.page-banner {
  padding: 56px 20px;
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.page-banner h1 {
  margin: 0;
  color: #fff;
  font-size: 2.4rem;
}

.page-banner p {
  margin: 10px auto 0;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================
   Csapatunk section: the image on the left (shown in full, without
   cropping), the text on the right on a plain green background
   ========================================================== */
.team-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-primary);
  color: #fff;
}

.team-split-image {
  display: flex;
  align-items: center;
}

.team-split-image img {
  display: block;
  width: 100%;
  height: auto;
}

.team-split-text {
  display: flex;
  align-items: center;
  padding: 48px clamp(24px, 5vw, 72px);
}

.team-split-text h2 {
  margin-bottom: 16px;
  color: #fff;
  font-size: 2rem;
}

.team-split-text p {
  margin: 0 0 14px;
  max-width: 560px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.team-split-text .btn {
  margin-top: 10px;
}

/* ==========================================================
   Kapcsolat – people's cards
   ========================================================== */
.contact {
  background: var(--color-bg-alt);
}

.people-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.person-card {
  flex: 0 1 190px;
  padding: 24px 12px;
  text-align: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.person-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(35, 63, 42, 0.12);
}

/* A monogram shows behind the photo while the image is not uploaded yet
   (script.js removes an image that fails to load) */
.person-photo {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-highlight);
  border: 3px solid var(--color-accent);
}

.person-photo::before {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-primary);
}

.person-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* for portrait photos the top of the image shows, so the head is not squeezed against the top of the circle */
  object-position: center top;
}

.person-card h3 {
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.person-role {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
}

.person-email {
  font-size: 0.82rem;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--color-highlight);
}

.person-email:hover {
  color: var(--color-accent);
}

/* phone number on the person card, below the e-mail */
.person-phone {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--color-highlight);
}

/* the e-mail on the card keeps its width while "Másolva!" is shown (script.js sets min-width) */
.person-card > .person-email {
  display: inline-block;
  max-width: 100%;
}

/* clicked on the card: copied, "Másolva!" for a moment (script.js) */
.person-card > .person-email.is-copied,
.person-card > .person-phone.is-copied {
  color: var(--color-primary);
  font-weight: bold;
}

a.person-phone:hover {
  color: var(--color-accent);
}

/* ==========================================================
   Social pages (Facebook, Instagram): link buttons only
   ========================================================== */
.social-section {
  margin-top: 56px;
  text-align: center;
}

.social-section > h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.social-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ==========================================================
   Rólunk – a longer text page with two sections
   ========================================================== */
/* The fixed header must not cover the section title when arriving through an anchor link */
section[id] {
  scroll-margin-top: 70px;
}

/* Anchor links in the green title banner, below the title (Rólunk) */
.page-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.page-jump a {
  padding: 8px 22px;
  border: 2px solid #fff;
  border-radius: 30px;
  font-weight: 600;
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease;
}

.page-jump a:hover,
.page-jump a:focus-visible {
  background: #fff;
  color: var(--color-primary);
}

.about-alt {
  background: var(--color-bg-alt);
}

.prose {
  max-width: 800px;
}

.prose h2 {
  margin-bottom: 24px;
}

.prose h3 {
  margin: 32px 0 10px;
  font-size: 1.3rem;
}

.prose p {
  margin: 0 0 14px;
}

.prose ul,
.prose ol {
  margin: 0 0 14px;
  padding-left: 1.5em;
}

.prose li {
  margin-bottom: 6px;
}

.prose a {
  font-weight: 600;
  border-bottom: 2px solid var(--color-highlight);
}

.prose a:hover {
  color: var(--color-accent);
}

.prose blockquote {
  margin: 0 0 14px;
  padding: 14px 20px;
  border-left: 4px solid var(--color-accent);
  background: rgba(167, 201, 87, 0.18);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

.prose-source {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ==========================================================
   Csatlakozom – grades and troop leaders
   ========================================================== */
.grades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.grade-card {
  padding: 24px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: 12px;
}

.grade-card h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.grade-note {
  margin: 0 0 12px;
}

.grade-squad {
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--color-accent);
}

.grade-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.grade-card li {
  padding: 8px 0;
  border-top: 1px solid var(--color-border);
}

.grade-card li:first-child {
  border-top: none;
}

.leader-name {
  display: block;
  font-weight: 600;
}

.leader-email {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--color-highlight);
}

.leader-email:hover {
  color: var(--color-accent);
}

/* ==========================================================
   Csapatotthonunk
   ========================================================== */
.home-text {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.home-contact-title {
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.3rem;
}

.home-contact {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

/* Visiting troops: info card on the left, the contact card on the right; stacked on phones.
   The contact wrapper is "display: contents", so its title takes the first row on the right and
   the two cards share the second row (= equally tall). */
.home-visit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px 32px;
  margin-bottom: 48px;
}

.home-visit-contact {
  display: contents;
}

.home-visit .home-contact-title {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
}

.home-visit .home-contact {
  grid-column: 2;
  grid-row: 2;
  margin-bottom: 0;
}

.home-visit-contact .person-card {
  flex-basis: 210px;
}

.home-visit-card {
  grid-column: 1;
  grid-row: 2;
  padding: 24px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: 12px;
}

.home-visit-card h3 {
  margin-bottom: 12px;
  font-size: 1.3rem;
}

.home-visit-card p {
  margin: 0 0 12px;
}

.home-visit-card .btn {
  margin-top: 4px;
}

@media (max-width: 768px) {
  .home-visit {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .home-visit-card,
  .home-visit .home-contact-title,
  .home-visit .home-contact {
    grid-column: 1;
    grid-row: auto;
  }

  .home-visit .home-contact-title {
    margin-top: 8px;
  }
}

/* Link inside text (e.g. a phone number) */
.inline-link {
  font-weight: 600;
  border-bottom: 2px solid var(--color-highlight);
}

.inline-link:hover {
  color: var(--color-accent);
}

.map-wrapper {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 30px rgba(35, 63, 42, 0.1);
}

.map-wrapper iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

.map-cta {
  margin-top: 24px;
  text-align: center;
}

/* ==========================================================
   Programs – news cards
   ========================================================== */
/* Steppable row: 3 cards are visible at a time, scrolled with the arrows */
.news-carousel {
  position: relative;
  /* strip reserved for the arrows on both sides of the cards */
  padding: 0 60px;
}

.news-grid {
  display: flex;
  gap: 24px;
  /* room above/below for the lifting card and its shadow (overflow would clip it) */
  padding: 12px 0 24px;
  margin: -12px 0 -24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.news-grid::-webkit-scrollbar {
  display: none;
}

.news-grid > .news-card {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(35, 63, 42, 0.3);
  transition: background 0.2s ease, opacity 0.2s ease;
}

.carousel-btn:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

/* If it cannot page further that way, the arrow fades */
.carousel-btn:disabled {
  opacity: 0.25;
  box-shadow: none;
  cursor: default;
}

.carousel-prev {
  left: 0;
}

.carousel-next {
  right: 0;
}

/* If every card fits, no arrows are needed */
.news-carousel.is-static .carousel-btn {
  display: none;
}

@media (max-width: 900px) {
  .news-grid > .news-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 640px) {
  /* On mobile the arrows sit on the card's edge so the card stays wide enough */
  .news-carousel {
    padding: 0;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }

  .carousel-prev {
    left: -12px;
  }

  .carousel-next {
    right: -12px;
  }

  .news-grid > .news-card {
    flex-basis: 100%;
  }
}

/* ==========================================================
   Programs – calendar
   ========================================================== */
/* Order on the page: upcoming (light) → calendar (alternate background) → Program Archívum (light),
   so the backgrounds alternate even while the archive is hidden */
.calendar-section {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

/* subscribing to the public Google Calendar, above the calendar */
.calendar-subscribe {
  max-width: 820px;
  margin: 0 auto 24px;
  text-align: center;
}

.calendar-subscribe p {
  margin: 0 0 14px;
  color: var(--color-text-muted);
}

.calendar-subscribe-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* outlined button (second choice next to a .btn-primary) */
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
}

/* the cards of the selected day would blend into the alternate background */
.calendar-section .news-card {
  background: var(--color-bg);
}

/* Program Archívum: past programs in their own strip, below the calendar */
.archive-section {
  border-top: 1px solid var(--color-border);
}

/* Program images at the bottom of the card: 2 images at a time, paged with arrows on both sides (script.js).
   The images show uncropped (in full) in a uniform 3:2 frame; clicking opens the lightbox. */
.news-gallery {
  position: relative;
  margin: auto 0 0;          /* at the bottom of the card, right above the buttons */
  padding-top: 12px;
}

.news-gallery + .news-actions {
  margin-top: 0;
}

.news-gallery-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.news-gallery-track::-webkit-scrollbar {
  display: none;
}

.news-gallery-track img {
  flex: 0 0 calc((100% - 8px) / 2);
  min-width: 0;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(35, 63, 42, 0.08);
  scroll-snap-align: start;
  cursor: zoom-in;
}

.news-gallery-track img:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: -3px;
}

.gallery-btn {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(35, 63, 42, 0.3);
  transition: background 0.2s ease, opacity 0.2s ease;
}

.gallery-btn:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.gallery-btn:disabled {
  opacity: 0.25;
  box-shadow: none;
  cursor: default;
}

.gallery-prev {
  left: -12px;
}

.gallery-next {
  right: -12px;
}

.calendar {
  max-width: 820px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.calendar-title {
  margin: 0;
  font-size: 1.35rem;
  text-transform: capitalize;
}

.calendar-nav {
  width: 38px;
  height: 38px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.calendar-nav:hover {
  background: var(--color-highlight);
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-weekdays {
  margin-bottom: 6px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-text-muted);
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  height: 84px;
  overflow: hidden;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  text-align: left;
}

/* Days of the neighbouring months are paler */
.cal-day.other-month {
  opacity: 0.55;
}

.cal-day.today {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.cal-num {
  font-size: 0.9rem;
  font-weight: bold;
}

/* on phones the short month name ("okt.") does not fit in the cell, only the day number shows */
@media (max-width: 600px) {
  .cal-mon {
    display: none;
  }
}

.cal-day.has-event {
  background: var(--color-bg-alt);
  cursor: pointer;
}

.cal-day.has-event:hover {
  border-color: var(--color-accent);
}

.cal-day.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.cal-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.cal-chip {
  display: block;
  max-width: 100%;
  padding: 1px 6px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-day.selected .cal-chip {
  background: #fff;
  color: var(--color-primary);
}

.calendar-detail {
  max-width: var(--max-width);
  margin: 32px auto 0;
}

.calendar-detail-title {
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.35rem;
}

.calendar-detail-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.calendar-hint {
  text-align: center;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .calendar {
    padding: 12px;
  }

  .calendar-days,
  .calendar-weekdays {
    gap: 3px;
  }

  .cal-day {
    height: 48px;
    padding: 4px;
    align-items: center;
  }

  /* On narrow screens a dot replaces the program name */
  .cal-chips {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .cal-chip {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }
}

.news-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(35, 63, 42, 0.12);
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.news-date {
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--color-highlight);
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-text);
}

/* Past event: "Elmúlt" label + paler look */
.news-past-label {
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: bold;
  color: #fff;
}

.news-card-past {
  opacity: 0.65;
}

.news-card-past:hover {
  transform: none;
  box-shadow: none;
}

.news-empty {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  color: var(--color-text-muted);
}

.news-card h3 {
  font-size: 1.25rem;
}

.news-card p {
  margin: 0 0 12px;
}

.news-card .news-detail {
  margin: 0 0 8px;
}

.news-card .news-link {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  border-bottom: 2px solid var(--color-highlight);
}

.news-card .news-link:hover {
  color: var(--color-accent);
}

/* ==========================================================
   Támogass minket
   ========================================================== */
.support-text {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.bank-card {
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 24px;
  text-align: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: 12px;
}

.bank-card h3 {
  font-size: 1.2rem;
}

.bank-label {
  margin: 14px 0 2px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

.bank-value {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

/* The association's and the bank details cards side by side, stacked on mobile */
.support-org-intro {
  margin-bottom: 20px;
}

.support-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.support-cards .bank-card {
  max-width: none;
  margin: 0;
}

/* Account number selectable with one click */
.bank-number {
  font-family: 'Courier New', monospace;
  font-size: clamp(0.85rem, 3.6vw, 1.3rem);
  user-select: all;
}

.bank-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.95rem;
}

/* The top of the page is more compact, so the 1% image shows without scrolling */
.support-page {
  padding-top: 40px;
}

.support-page .support-text {
  margin-bottom: 28px;
}

/* Image of the 1% tax offering, right after the introduction */
.support-banner {
  max-width: 900px;
  margin: 0 auto 48px;
}

.support-banner img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(35, 63, 42, 0.15);
}

/* ==========================================================
   Footer
   ========================================================== */
.site-footer {
  padding: 36px 0 28px;
  background: var(--color-primary);
  color: var(--color-bg);
  text-align: center;
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-bottom: 16px;
}

.footer-links a {
  font-weight: 600;
  border-bottom: 2px solid var(--color-highlight);
}

.footer-links a:hover {
  color: var(--color-highlight);
}

.site-footer p {
  margin: 4px 0;
}

/* "Ha problémát tapasztal…" line (tools/sync_footer.py), above the copyright */
.footer-report {
  font-size: 0.85rem;
  opacity: 0.9;
}

.footer-report a {
  color: inherit;
  text-decoration: underline;
}

/* ==========================================================
   Responsiveness
   ========================================================== */
/* The long team name + the menu (7 items, 2 of them dropdowns) no longer fit in one row below about 1250px,
   so the menu switches to the hamburger here (measure again when adding a menu item!) */
@media (max-width: 1280px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    transition: max-height 0.3s ease;
  }

  .main-nav.open {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-nav li {
    border-top: 1px solid var(--color-border);
  }

  .main-nav a {
    display: block;
    padding: 14px 20px;
    border-bottom: none;
  }

  .main-nav a[aria-current="page"] {
    background: var(--color-bg-alt);
  }

  .main-nav a.nav-cta {
    margin: 12px 20px;
    text-align: center;
  }

  /* on phones/tablets the dropdown opens inside the menu item, indented */
  .nav-sub-toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    border-bottom: 0;
    text-align: left;
  }

  .nav-sub-toggle::after {
    margin-right: 4px;
  }

  .has-sub.is-current > .nav-sub-toggle {
    border-bottom: 0;
  }

  .main-nav .sub-nav {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    transform: none;
  }

  .main-nav .sub-nav::before {
    display: none;
  }

  .main-nav .sub-nav a {
    padding: 12px 20px 12px 40px;
    border-radius: 0;
  }
}

@media (max-width: 768px) {
  .support-cards {
    grid-template-columns: 1fr;
  }

  .team-split {
    grid-template-columns: 1fr;
  }

  .team-split-text {
    padding: 40px 20px;
  }

  /* On phones the group photo disappears and the 802 aerial photo is the hero: the title at the bottom of the
     image, with a dark gradient (so the numbers stay visible). The image is left out of the Csapatunk section,
     because it is already at the top. */
  .hero {
    min-height: 0;
  }

  .hero-img {
    display: none;
  }

  .hero-img-mobile {
    display: block;
    width: 100%;
    height: auto;
  }

  .hero h1 {
    inset: auto 0 0 0;
    padding: 56px 20px 20px;
    background: linear-gradient(to top, rgba(10, 20, 12, 0.78), rgba(10, 20, 12, 0));
    font-size: 2rem;
  }

  .team-split-image {
    display: none;
  }

  .page-banner h1 {
    font-size: 1.9rem;
  }

  .section {
    padding: 56px 0;
  }

  .map-wrapper iframe {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .logo-text {
    font-size: 0.9rem;
  }

  .hero h1 {
    font-size: 1.6rem;
  }
}

/* ==========================================================
   Upcoming program tab (home page, slides in from the right)
   ========================================================== */
.upcoming-tab {
  position: fixed;
  right: 0;
  top: 90px;
  z-index: 150;                    /* above the sticky header (100), below the pop-ups (200+) */
  width: min(290px, calc(100vw - 24px));
  padding: 16px 40px 16px 18px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 8px 24px rgba(35, 63, 42, 0.3);
  transform: translateX(110%);
  transition: transform 0.5s ease;
}

.upcoming-tab.is-visible {
  transform: translateX(0);
}

/* with the mobile menu open the tab slides out, so it does not cover the menu */
body:has(.main-nav.open) .upcoming-tab {
  transform: translateX(110%);
}

.upcoming-title {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-highlight);
}

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

.upcoming-list li + li {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.upcoming-list a {
  display: block;
  color: #fff;
}

.upcoming-list a:hover .upcoming-name {
  text-decoration: underline;
}

.upcoming-name {
  display: block;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-weight: bold;
  line-height: 1.25;
}

.upcoming-date {
  display: block;
  margin-top: 2px;
  font-size: 0.88rem;
  opacity: 0.9;
}

.upcoming-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.upcoming-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .upcoming-tab {
    transition: none;
  }
}

/* On phones the tab is a card at the bottom of the screen instead of the top right, where it
   covered the hero title; long lists scroll inside it */
@media (max-width: 768px) {
  .upcoming-tab {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    border-radius: 12px;
    transform: translateY(calc(100% + 24px));
  }

  .upcoming-tab.is-visible {
    transform: none;
  }

  body:has(.main-nav.open) .upcoming-tab {
    transform: translateY(calc(100% + 24px));
  }

  .upcoming-list {
    max-height: 32vh;
    overflow-y: auto;
  }

  /* a white frame, so the dark green card does not blend into the dark green Csapatunk section */
  .upcoming-tab {
    border: 3px solid #fff;
    box-shadow: 0 10px 30px rgba(35, 63, 42, 0.45);
  }
}

/* Highlight of the card arriving from the tab on the Programok page */
.news-card {
  scroll-margin-top: 90px;
}

.news-card:target {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-highlight);
}


/* Copy button (Támogass minket: tax number, account number): a small icon next to the value */
.bank-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bank-copy .bank-number {
  font-size: clamp(0.8rem, 3.4vw, 1.2rem);
}

.copy-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.copy-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-highlight);
}

.copy-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.copy-btn .icon-check,
.copy-btn.is-copied .icon-copy {
  display: none;
}

.copy-btn.is-copied .icon-check {
  display: block;
}

.copy-btn.is-copied {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

/* E-mail address + copy button in one row (script.js adds the button next to mailto links) */
.email-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  vertical-align: middle;
}

.email-copy > a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.person-card .email-copy,
.bank-card .email-copy {
  justify-content: center;
}

/* On the narrow person cards the e-mail and the button do not fit in one row, so the button goes below */
.person-card .email-copy {
  flex-direction: column;
  gap: 6px;
}

/* Bottle return: text + QR code side by side, stacked on mobile */
.support-bottle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  max-width: 960px;
  margin: 24px auto 0;
  padding: 28px 24px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: 12px;
}

.support-bottle h3 {
  font-size: 1.3rem;
}

.support-bottle p {
  margin: 0 0 12px;
}

.support-bottle .btn {
  margin-top: 8px;
}

.support-bottle img {
  display: block;
  width: 240px;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
}

@media (max-width: 720px) {
  .support-bottle {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .support-bottle img {
    margin: 0 auto;
  }
}

/* The header uses the full width: logo on the left, menu on the right, not crammed into the middle */
.site-header .container {
  max-width: none;
  padding: 0 clamp(20px, 3vw, 48px);
}

/* ==========================================================
   Tábor
   ========================================================== */
/* Title banner together with the introduction */
.camp-banner {
  padding: 56px 20px 64px;
}

.camp-banner p {
  max-width: 760px;
  margin-top: 16px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.camp-banner p strong {
  color: #fff;
}

.camp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.camp-card {
  padding: 28px 24px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: 12px;
}

.camp-card h3 {
  font-size: 1.4rem;
}

.camp-card-lead {
  margin: 0 0 8px;
}

.camp-card-value {
  margin: 0 0 2px;
  font-weight: 600;
}

/* General information: image + text alternating left/right */
.camp-info {
  border-top: 1px solid var(--color-border);
}

.camp-block {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 48px;
  margin-bottom: 72px;
}

.camp-block:last-child {
  margin-bottom: 0;
}

.camp-block-reverse {
  grid-template-columns: 1fr 1.15fr;
}

.camp-block-reverse .camp-media {
  order: 2;
}

/* Composed image bunch: two columns of different width, slightly overlapping
   and shifted down. The images keep their own ratio
   (no cropping), with rounded corners; clicking opens them large. */
.camp-media {
  display: flex;
  align-items: flex-start;
}

.camp-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.camp-col:first-child {
  flex: 0 0 var(--col1, 58%);
}

.camp-col:nth-child(2) {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--col2, 50%);
  margin-left: var(--overlap, -8%);
  margin-top: 12%;
}

.camp-col img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(35, 63, 42, 0.25);
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.camp-col img:hover,
.camp-col img:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 10px 26px rgba(35, 63, 42, 0.35);
}

.camp-text h3 {
  font-size: 1.6rem;
}

.camp-text p {
  margin: 0 0 14px;
}

.camp-list {
  margin: 0 0 20px;
  padding-left: 20px;
}

.camp-list li {
  margin-bottom: 10px;
}

/* red warning card below the camp cards (same shape as the payment reference warning) */
.camp-alert {
  max-width: 960px;   /* as wide as the two camp cards together (.camp-cards) */
  margin: 32px auto 0;
  padding: 22px 24px;
  background: #fdecea;
  border: 1px solid #f3b4ad;
  border-left: 5px solid var(--color-alert);
  border-radius: 12px;
}

.camp-alert h3 {
  margin: 0 0 8px;
  color: var(--color-alert);
  font-size: 1.15rem;
}

.camp-alert p {
  margin: 0;
}

@media (max-width: 860px) {
  .camp-cards {
    grid-template-columns: 1fr;
  }

  .camp-block {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 56px;
  }

  /* on mobile the image always comes first, the text below */
  .camp-block-reverse .camp-media {
    order: 0;
  }
}

/* Lightbox: clicking shows the image at full size */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 20, 12, 0.9);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-figure {
  margin: 0;
  text-align: center;
}

.lightbox-img {
  display: block;
  max-width: min(92vw, 1400px);
  max-height: 82vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.34);
}

.lightbox-close {
  top: 16px;
  right: 16px;
}

.lightbox-prev {
  left: 16px;
  top: 50%;
  margin-top: -23px;
}

.lightbox-next {
  right: 16px;
  top: 50%;
  margin-top: -23px;
}

@media (max-width: 640px) {
  .lightbox {
    padding: 12px;
  }

  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: 16px;
    margin-top: 0;
  }
}

/* Csatlakozom: introduction and download of the membership forms */
.join-lead {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: 1.05rem;
}

.join-downloads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}

/* 404: button row */
.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* "Üzenet másolása" (copy message) button on the program cards */
.news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

.share-btn,
.calendar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--color-accent);
  border-radius: 20px;
  background: #fff;
  color: var(--color-primary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.share-btn:hover,
.calendar-btn:hover {
  background: var(--color-highlight);
}

.share-btn.is-copied {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.share-btn svg,
.calendar-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dokumentumok page */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.doc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: 12px;
}

.doc-card h3 {
  font-size: 1.2rem;
}

.doc-card p {
  margin: 0 0 8px;
}

.doc-card .doc-meta {
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.doc-card .btn {
  margin-top: auto;
}

/* The "Google Naptárba" button is green so it stands out next to "Üzenet másolása" */
.calendar-btn {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.calendar-btn:hover {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-dark);
  color: #fff;
}

/* Csapatunk section on desktop: the image is a rounded card with a shadow on the green background,
   the text next to it. Not applied on phones (below 768 px), the earlier layout stays there. */
@media (min-width: 769px) {
  .team-split {
    align-items: center;
    column-gap: clamp(32px, 5vw, 72px);
    padding: 64px max(24px, calc((100% - 1200px) / 2));
  }

  .team-split-image img {
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .team-split-image img:hover,
  .team-split-image img:focus-visible {
    transform: scale(1.02);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  }

  .team-split-text {
    padding: 0;
  }
}

/* Csapatotthon: the history of the Bezsilla villa and of the scouts, longer text */
.home-story {
  max-width: none;
  text-align: left;
}

.home-story h3 {
  margin: 32px 0 10px;
  font-size: 1.35rem;
}

.home-story h3:first-child {
  margin-top: 0;
}

.home-story p {
  margin: 0 0 14px;
}

.home-story a {
  font-weight: 600;
  border-bottom: 2px solid var(--color-highlight);
}

.home-story a:hover {
  color: var(--color-accent);
}

.home-story .home-source {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.home-map-address {
  margin: 0 0 12px;
  text-align: center;
}

/* Several contact details for one person (e-mail and phone on separate lines) */
.leader-line {
  margin-top: 2px;
}

.camp-person {
  margin-bottom: 10px;
}

/* On phones the contact cards are in 2 columns, smaller; the last, odd card is centred */
@media (max-width: 640px) {
  .people-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .people-grid .person-card {
    flex: none;
    padding: 14px 8px 12px;
  }

  .people-grid .person-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 6px);
  }

  .people-grid .person-photo {
    width: 84px;
    height: 84px;
    margin-bottom: 8px;
    border-width: 2px;
  }

  .people-grid .person-card h3 {
    font-size: 0.95rem;
    line-height: 1.25;
  }

  .people-grid .person-role {
    margin-bottom: 6px;
    font-size: 0.75rem;
  }

  .people-grid .person-email,
  .people-grid .person-phone {
    font-size: 0.72rem;
  }

  .people-grid .copy-btn {
    width: 24px;
    height: 24px;
  }
}

/* People: clickable card + introduction pop-up */
.person-card.has-bio {
  cursor: pointer;
}

.person-card.has-bio:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 2px;
}

.person-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 20, 12, 0.7);
}

.person-modal[hidden] {
  display: none;
}

.person-modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 32px 28px 28px;
  background: var(--color-bg);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.person-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.person-modal-close:hover {
  background: var(--color-highlight);
}

.person-modal-head {
  text-align: center;
}

.person-modal-head .person-photo {
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
}

.person-modal-head h3 {
  margin: 0 0 4px;
  font-size: 1.5rem;
}

.person-modal-role {
  margin: 0 0 18px;
  font-weight: 700;
  color: var(--color-accent);
}

.person-bio-text {
  margin: 0 0 18px;
  line-height: 1.6;
  text-align: center;
}

.person-modal-body ul {
  margin: 0 0 16px;
  padding-left: 1.3em;
}

.person-modal-body li {
  margin-bottom: 6px;
}

.person-modal-body .person-bio-contact {
  padding-left: 0;
  list-style: none;
  text-align: center;
}

.person-modal-body .person-bio-contact li {
  margin-bottom: 8px;
}

.person-modal-body .person-bio-contact .email-copy {
  justify-content: center;
}

.person-modal-body .person-email {
  font-size: 1rem;
}

.person-modal-body li {
  overflow-wrap: anywhere;
}

/* Rólunk / Csapatotthonunk: the text and the photos in alternating blocks, as on the Tábor page (.camp-block).
   script.js builds the blocks from the .side-photos photos and the text sections; without JS the photos
   show below the text, in a two-column grid. */
.side-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 800px;
  margin: 32px auto 0;
  padding: 0 20px;
}

.side-photos img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(35, 63, 42, 0.25);
}

.home-center {
  max-width: 800px;
}

.split-layout {
  max-width: 1100px;
}

.split-layout > h2 {
  margin-bottom: 36px;
}

.split-layout .camp-block {
  margin-bottom: 56px;
}

.split-layout .camp-text h3 {
  margin: 26px 0 10px;
  font-size: 1.3rem;
}

.split-layout .camp-text h3:first-child {
  margin-top: 0;
}

.home-center.split-layout {
  max-width: 1100px;
}

/* The other elements of the Csapatotthon page (contact, map) stay in a narrow, centred column */
.home-center.split-layout > :not(.home-story) {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* 3-image block: staggered, slightly overlapping images in one column (left - right - left);
   mirrored in the right-hand (reversed) blocks. */
.camp-media-3 {
  display: block;
  position: relative;
}

.camp-media-3 img {
  display: block;
  position: relative;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(35, 63, 42, 0.28);
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.camp-media-3 img:hover,
.camp-media-3 img:focus-visible {
  transform: scale(1.02);
  box-shadow: 0 10px 26px rgba(35, 63, 42, 0.38);
}

.camp-media-3 img:nth-child(1) {
  z-index: 1;
  width: 62%;
}

.camp-media-3 img:nth-child(2) {
  z-index: 2;
  width: 56%;
  margin-left: auto;
  margin-top: -12%;
}

.camp-media-3 img:nth-child(3) {
  z-index: 3;
  width: 60%;
  margin-left: 6%;
  margin-top: -10%;
}

.camp-block-reverse .camp-media-3 img:nth-child(1) {
  margin-left: auto;
}

.camp-block-reverse .camp-media-3 img:nth-child(2) {
  margin-left: 0;
  margin-right: auto;
}

.camp-block-reverse .camp-media-3 img:nth-child(3) {
  margin-left: auto;
  margin-right: 6%;
}

/* ==========================================================
   Notice bar (top of every page, from the "Értesítők" sheet of the Google Sheet)
   Notices are hidden by default; script.js (updateNotices) shows
   the currently valid ones. Several notices appear below each other.
   ========================================================== */
.notice {
  background: var(--color-alert);
  color: #fff;
}

.notice + .notice {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.notice .container {
  max-width: none;
  padding-left: clamp(20px, 3vw, 48px);
  padding-right: clamp(20px, 3vw, 48px);
}

.notice-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.notice-text {
  flex: 1;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.notice-title {
  margin-right: 6px;
}

.notice-deadline {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-alert);
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
}

.notice-close {
  flex: none;
  width: 32px;
  height: 32px;
  margin-top: -4px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 50%;
  background: #fff;                  /* white circle with a red ×: stands out well from the red bar */
  color: var(--color-alert);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, background 0.15s ease;
}

.notice-close:hover,
.notice-close:focus-visible {
  background: #ffe9e6;
  transform: scale(1.08);
}

@media (max-width: 600px) {
  .notice-text {
    font-size: 0.875rem;
  }

  /* on phones the message starts on a new line after the deadline */
  .notice-message {
    display: block;
    margin-top: 6px;
  }
}

/* ==========================================================
   Counters (home page "Csapatunk" section and Rólunk page;
   from the "Számlálók" sheet of the Google Sheet, rolled up by script.js)
   ========================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 14px;
  max-width: 560px;
  margin: 22px 0 14px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 10px 16px;
  border-radius: 14px;
  background: #fff;
  color: var(--color-primary);
  text-align: center;
  box-shadow: 0 8px 22px rgba(35, 63, 42, 0.18);
}

.stat-number {
  /* equal-height (lining) digits: Georgia's "old-style" figures would jump while rolling */
  font-family: 'Times New Roman', 'Noto Serif', serif;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.3;
  --odo-h: 1.3em;                  /* height of one digit cell (script.js shifts by this too) */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-label {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* "Odometer" digits: script.js replaces the number with rolling strips */
.odo-digit {
  display: inline-block;
  height: var(--odo-h);
  overflow: hidden;
  vertical-align: top;
}

.odo-strip {
  display: flex;
  flex-direction: column;
  transition: transform 1.8s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.odo-strip span,
.odo-sep {
  height: var(--odo-h);
  line-height: var(--odo-h);
}

.odo-sep {
  display: inline-block;
  vertical-align: top;
}

/* Rólunk: below the "Csapatunkról" heading */
.stats-band {
  padding: 4px 0 28px;
}

.stats-band .stats {
  max-width: 720px;
  margin: 0 auto;
}

.stats-band .stat-card {
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 18px rgba(35, 63, 42, 0.08);
}

@media (max-width: 600px) {
  .stats {
    gap: 10px;
  }

  .stat-card {
    padding: 14px 6px 12px;
  }

  .stat-number {
    font-size: 2rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }
}

/* ==========================================================
   Eszközbérlés (eszkozok.html; the list and the contact come from the
   "Eszközök" and "Eszközök kapcsolattartója" sheets of the Google Sheet)
   ========================================================== */
.gear-intro {
  margin-bottom: 36px;
}

.gear-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
}

.gear-card {
  padding: 28px 28px 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: 12px;
}

.gear-card h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
}

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

.gear-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.gear-item:last-child {
  border-bottom: 0;
}

.gear-name {
  font-weight: bold;
}

.gear-note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.gear-count {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
}

.gear-contact {
  text-align: center;
}

.gear-contact > h3 {
  margin: 4px 0 16px;
  font-size: 1.3rem;
}

/* the contact(s) on a person card like on the home page (click for the introduction pop-up) */
.gear-contact-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.gear-contact-cards .person-card {
  flex: 0 1 240px;
  background: #fff;
}

@media (max-width: 768px) {
  .gear-layout {
    grid-template-columns: 1fr;
  }

  .gear-card {
    padding: 22px 20px 14px;
  }
}

/* ==========================================================
   Program card enlarged (pop-up, script.js: initProgramModal)
   The card's texts on the left, the images in the main area in a multi-column,
   vertically scrolling gallery, uncropped; stacked on phones.
   ========================================================== */
#newsGrid .news-card,
#archiveGrid .news-card,
#calendarDetail .news-card {
  cursor: pointer;
}

.program-modal {
  position: fixed;
  inset: 0;
  z-index: 180;                /* above the header and the upcoming-programs tab, below the lightbox (200) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 20, 12, 0.75);
}

.program-modal[hidden] {
  display: none;
}

.program-modal-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  width: min(1180px, 100%);
  height: min(860px, calc(100vh - 48px));
  overflow: hidden;
  background: var(--color-bg);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* without images only the text, in a narrower window */
.program-modal-card.no-images {
  grid-template-columns: 1fr;
  width: min(560px, 100%);
  height: auto;
  max-height: calc(100vh - 48px);
}

.program-modal-card.no-images .program-modal-gallery {
  display: none;
}

.program-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);   /* dark green, white ×: clearly visible on the light background too */
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(35, 63, 42, 0.35);
}

.program-modal-close:hover,
.program-modal-close:focus-visible {
  background: var(--color-primary-dark);
}

/* the text part uses the card's elements, but without border and hover effect */
.program-modal .program-modal-text {
  overflow-y: auto;
  padding: 28px 24px;
  background: var(--color-bg-alt);
  border: 0;
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  cursor: auto;
}

.program-modal-card.no-images .program-modal-text {
  border-right: 0;
  padding-right: 56px;
}

.program-modal-gallery {
  overflow-y: auto;
  padding: 16px 16px 4px;
  columns: 3 220px;
  column-gap: 12px;
}

/* on desktop the close button gets its own strip above the images, so it does not overlap them:
   the gallery scrolls inside a frame, the button strip above it stays fixed */
@media (min-width: 769px) {
  .program-modal-card:not(.no-images) {
    grid-template-rows: 100%;
  }

  .program-modal-gallery {
    align-self: end;
    height: calc(100% - 58px);
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
  }
}

.program-modal-gallery img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  border-radius: 10px;
  break-inside: avoid;
  background: var(--color-bg-alt);
  cursor: zoom-in;
}

/* video in the gallery: preview with a play icon; clicking opens the lightbox (it can be started there) */
.program-modal-video {
  position: relative;
  margin: 0 0 12px;
  border-radius: 10px;
  overflow: hidden;
  break-inside: avoid;
}

.program-modal-gallery .program-modal-video img {
  margin: 0;
  border-radius: 0;
  cursor: pointer;
}

.program-modal-video::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(20, 35, 24, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='white'/%3E%3C/svg%3E") center / 34px no-repeat;
  pointer-events: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.program-modal-video:hover::after {
  transform: scale(1.08);
  background-color: rgba(56, 102, 65, 0.9);
}

/* video in the lightbox: preview + play button, on click the Drive player (16:9) */
.lightbox-video {
  position: relative;
  width: min(1100px, 88vw);
  aspect-ratio: 16 / 9;
  max-height: 85vh;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.lightbox-video[hidden] {
  display: none;
}

.lightbox-video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 35, 24, 0.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='white'/%3E%3C/svg%3E") center / 46px no-repeat;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.lightbox-play:hover,
.lightbox-play:focus-visible {
  transform: scale(1.08);
  background-color: rgba(56, 102, 65, 0.95);
}

.program-modal-gallery img:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .program-modal {
    padding: 0;
  }

  /* on phones the whole window scrolls: the text on top, the images below in two columns */
  .program-modal-card,
  .program-modal-card.no-images {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    border-radius: 0;
  }

  .program-modal .program-modal-text {
    overflow: visible;
    padding: 24px 20px 20px;
    padding-right: 56px;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .program-modal-gallery {
    overflow: visible;
    padding: 12px 12px 4px;
    columns: 2;
    column-gap: 8px;
  }

  .program-modal-gallery img {
    margin-bottom: 8px;
  }

  .program-modal-close {
    position: fixed;
  }
}

/* ==========================================================
   Galéria (galeria.html; built by tools/sync_gallery.py)
   A multi-column, uncropped image grid per section; clicking opens the lightbox,
   which pages through the whole gallery. Video previews have a play icon.
   ========================================================== */
.gallery-section + .gallery-section {
  margin-top: 56px;
}

.gallery-section h2 {
  margin-bottom: 20px;
}

.gallery-subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 28px 0 12px;
  font-size: 1.2rem;
}

.gallery-section h2 + .gallery-subtitle {
  margin-top: 0;
}

.gallery-date {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: normal;
  color: var(--color-text-muted);
}

.site-gallery {
  columns: 4 220px;
  column-gap: 12px;
}

.site-gallery img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  border-radius: 10px;
  break-inside: avoid;
  background: var(--color-bg-alt);
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-gallery img:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(35, 63, 42, 0.18);
}

.site-gallery img:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .site-gallery {
    columns: 2;
    column-gap: 8px;
  }

  .site-gallery img {
    margin-bottom: 8px;
  }
}

/* ==========================================================
   Pénzügyek (penzugyek.html): tabs, payment items, costs
   ========================================================== */
.finance-page {
  padding-top: 40px;
}

.fee-panel {
  max-width: 960px;
  margin: 0 auto;
}

.fee-intro {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}

/* the instalments (deadline + amount) below each other, as wide as the bank cards */
.fee-items {
  display: grid;
  gap: 16px;
  margin: 0 0 32px;
}

.fee-item {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 12px;
}

.fee-item h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  font-size: 1.2rem;
}

/* Csatlakozom: a troop card without leaders yet */
.leader-pending {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* passed deadline: red "Lejárt" label next to the title (the same shape as the programs' "Elmúlt") */
.fee-past-label {
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--color-alert);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: bold;
  color: #fff;
}

.fee-past-label[hidden] {
  display: none;
}

.fee-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0;
}

.fee-facts dt {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

.fee-facts dd {
  margin: 2px 0 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.fee-item-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 0.95rem;
}

/* bank details + ECSET code + support request */
.fee-pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.fee-pay .bank-card {
  max-width: none;
  margin: 0;
}

/* ECSET box below the two cards, full width: text on the left, button on the right */
.fee-ecset {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}

.fee-ecset p:last-child {
  margin-bottom: 0;
}

.fee-ecset .btn {
  flex-shrink: 0;
  margin-top: 0;
}

.fee-box {
  padding: 22px 24px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.fee-box h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.fee-box p {
  margin: 0 0 12px;
}

.fee-box-note {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.fee-box .btn {
  margin-top: 4px;
}

/* Mire fordítjuk? – proportional bars of the yearly expenses */
.fee-costs {
  max-width: 760px;
  margin: 0 auto;
}

.fee-costs h3 {
  text-align: center;
  font-size: 1.3rem;
}

.cost-list {
  display: grid;
  gap: 16px;
  margin: 24px 0 12px;
  padding: 0;
  list-style: none;
}

.cost-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  align-items: baseline;
}

.cost-amount {
  font-weight: 700;
  white-space: nowrap;
}

.cost-bar {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(var(--color-accent), var(--color-accent)) 0 0 / var(--share) 100% no-repeat,
    var(--color-bg-alt);
}

.cost-total {
  margin: 0 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  text-align: right;
}

.cost-note {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* Camp fees: the categories' fees */
/* the cards centred: looks right with one (membership fee) and four (camp fee) cards alike */
.price-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.price-grid li {
  flex: 1 1 180px;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 12px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: 12px;
}

.price-name {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

.price-amount {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-primary);
}

.price-split {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.fee-rules {
  max-width: 760px;
  margin: 0 auto 32px;
}

.fee-rules p {
  margin: 0 0 12px;
}

.fee-key {
  max-width: 760px;
  margin: 0 auto 28px;
  padding: 12px 16px;
  font-weight: 600;
  text-align: center;
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
}

/* warning about the payment reference */
.fee-warning {
  background: #fff6e5;
  border-color: #f0d49a;
}

.fee-warning .fee-example {
  padding: 8px 12px;
  background: #fff;
  border: 1px dashed #f0d49a;
  border-radius: 8px;
}

.fee-warning ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.fee-warning li {
  margin-bottom: 6px;
}

/* embedded Google Form */
.fee-form {
  max-width: 760px;
  margin: 0 auto 40px;
}

.fee-form h3 {
  text-align: center;
  font-size: 1.3rem;
}

.fee-form-frame {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.fee-form-frame iframe {
  display: block;
  width: 100%;
  height: 720px; /* increase for a longer form; it scrolls inside the frame */
  border: 0;
}

.fee-form-closed {
  padding: 20px 24px;
  text-align: center;
  font-weight: 600;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}

.fee-form-deadline {
  margin: -4px 0 14px;
  text-align: center;
}

.fee-form-deadline strong {
  display: inline-block;
  padding: 4px 12px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 30px;
}

.fee-form-link {
  margin-top: 10px;
  text-align: center;
  font-size: 0.92rem;
}

.fee-empty {
  max-width: 640px;
  margin: 0 auto;
  padding: 36px 24px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-primary);
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}

.fee-contact-title {
  margin: 56px 0 6px;
}

/* Kcs tábordíj (cub camp fee): the 4th-grade troop's leaders on person cards, centred */
.fee-troop-contact {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.fee-troop {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;   /* not sized by its content: a shorter text ("Másolva!") must not wrap the cards */
}

.fee-contact-lead {
  margin: 0 0 20px;
  text-align: center;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .fee-pay {
    grid-template-columns: 1fr;
  }

  .fee-ecset {
    flex-direction: column;
    align-items: flex-start;
  }

  .price-grid li {
    flex-basis: 140px;
  }
}