/* site.css — small additions for the new multi-page structure.
   Kept separate from the original styles.css so it's easy to see
   what we've added versus the original site's styling. */

body {
  background-color: #FBF7F2;
}

.nav-logo {
  height: 48px;
  width: auto;
  display: block;
}

@media (max-width: 550px) {
  .nav-logo {
    height: 36px;
  }
}

.page-content {
  max-width: 900px;
  margin: 50px auto 80px auto;
  padding: 0 24px;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  color: #25121B;
}

.page-content h1 {
  font-family: 'Afacad', sans-serif;
  font-weight: 700;
  font-size: 40px;
  margin-bottom: 16px;
}

.page-content p {
  font-size: 16px;
  line-height: 1.6;
}

/* Page title + subtitle only — the direct-child combinator keeps this from
   also centering body copy nested deeper in the page (article text, archive
   descriptions, etc.), which still uses the plain .page-content p rule above. */
.page-content > h1,
.page-content > p {
  text-align: center;
}

.page-placeholder-note {
  margin-top: 24px;
  padding: 16px;
  background: #FBF7F2;
  border: 1px dashed #CC4205;
  border-radius: 8px;
  font-size: 14px;
  color: #6b6b6b;
}

@media (max-width: 550px) {
  .page-content {
    margin-top: 74px;
  }

  /* Reserve room for the fixed-position bottom mobile toolbar (60px tall,
     see .mobile-toolbar in styles.css) so it doesn't cover page content. */
  body.has-mobile-toolbar {
    padding-bottom: 60px;
  }
}

/* Despre noi / Participă / Articole / Arhivă content, ported from the old
   single-page app, dropped into .page-content instead of the old fixed/
   absolute overlay wrappers. A few of the original desktop widths assumed
   a full-viewport modal wider than .page-content's 900px cap, so they need
   a max-width fix here. */

.article-photo,
.article-content-text,
.image-gallery-container {
  max-width: 100%;
}

/* Article galleries expand into the shared lightbox on click (same pattern
   as the map pin galleries on index.html). */
.image-gallery-container .main-image img,
.image-gallery-container .thumbnail-article img {
  cursor: zoom-in;
}

.engage-image {
  max-width: 100%;
  margin-left: auto;
  margin-right: 0;
}

.engage-image img {
  max-width: 100%;
  height: auto;
  /* styles.css's .engage-image img applies a 2deg tilt meant for the old
     "polaroid-style" photo — this graphic is a straight banner, not a photo. */
  transform: none;
}

/* On mobile, styles.css's .engage-image still carries a fixed height: 274px,
   which forces a 476:274 crop onto a ~330px-wide column and reads as
   oversized/cropped. Also, styles.css has a #engage-container-mobile-scoped
   fix for the old single-page app's mobile modal (image capped + full-width
   button) that never matches this page's plain .page-content structure, so
   Participă's two engage-buttons fall through to a separate, unscoped mobile
   rule meant for the footer's single CTA and get stretched to width: 100%.
   Re-scope both fixes to this page's actual markup. */
@media (max-width: 550px) {
  .engage-image {
    max-width: 340px;
    height: auto;
    /* Extra top margin compensates for the button's .engage-button-shadow,
       which overhangs 8px below the button (bottom: -8px, set in
       styles.css's mobile rules) and otherwise eats into the visual gap
       above the image without a matching effect below it, making the two
       gaps look uneven even though the margins match. */
    margin: 48px auto 24px auto;
  }

  .page-content .engage-button-container {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 0;
  }

  .page-content .engage-button {
    width: 265px;
    max-width: 100%;
    box-sizing: border-box;
  }
}

.articles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

/* Below 900px the cards fall back to a fixed 242px (styles.css) that
   doesn't divide evenly into the row width like the desktop 284px/4-per-row
   layout does, so the wrapped rows were left-aligned with empty space on
   the right. Center just at that range — at 900px+ the 4-per-row grid
   already fills the row exactly, so centering a partial last row there
   would pull it out of alignment with the row above it. */
@media (max-width: 899px) {
  .articles-grid {
    justify-content: center;
  }
}

/* Single stacked column of full-width cards on mobile (matching the
   Evenimente page's mobile card list). The image height used to be forced
   to 170px with object-fit: cover, which cropped it — let it size to its
   natural aspect ratio instead so nothing gets cut off, and shrink the
   card's own padding so the title/description bar underneath doesn't take
   up more room than it needs. */
@media (max-width: 550px) {
  .articles-grid {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .article-card {
    width: 100%;
    max-width: none;
    height: auto;
  }

  .article-card img {
    height: auto;
  }

  .article-card-content {
    padding: 12px 16px;
  }
}

/* Map sidebar (index.html): a single accordion replacing the old
   Obiective/Filtre icon-tab-toggle panels. All the underlying filter
   checkboxes/logic in app-part1.js are unchanged, this just relocates the
   existing markup into collapsible sections. */
#obiective-panel {
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}

#obiective-panel::-webkit-scrollbar {
  display: none; /* Chrome/Safari — scrolling itself stays enabled */
}

.sidebar-search-bar {
  margin-top: 20px;
}

.sidebar-accordion-section {
  border-bottom: 1px dashed #D9C9C0;
}

.sidebar-accordion-section:last-child {
  border-bottom: none;
}

.sidebar-accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #2A1115;
  text-align: left;
  padding: 16px 24px;
  box-sizing: border-box;
}

.sidebar-accordion-header:hover {
  background-color: #CC420512;
}

.sidebar-accordion-chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.sidebar-accordion-section.open .sidebar-accordion-chevron {
  transform: rotate(180deg);
}

.sidebar-accordion-content {
  display: none;
  padding: 0 24px 16px 24px;
  box-sizing: border-box;
}

.sidebar-accordion-section.open .sidebar-accordion-content {
  display: block;
}

.sidebar-accordion-content #gallery-container {
  max-height: 45vh;
  overflow-y: auto;
  margin-left: 0;
  margin-right: 0;
}

.sidebar-accordion-content #custom-bulleted-list {
  max-height: 40vh;
  overflow-y: auto;
}

/* #partners is a fixed 1200px in styles.css (sized for the old full-width
   modal), and styles.css's own mobile media query shrinks it further to a
   barely-legible 112px (also sized for the old modal's layout). Make it
   span the same width as the surrounding paragraph text instead. */
#partners {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.archive-gallery img,
.archive-main-image {
  max-width: 100%;
  height: auto;
}

/* Text overlay shown on top of the flat grey placeholder image (see
   buildNoPhotoPlaceholder() in app-part1.js) for locations/articles whose
   photos haven't been uploaded yet. .main-image/.main-image-article already
   have position: relative, so this centers over whatever's set as the img's
   src underneath it. */
.no-photo-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  color: #8A8078;
  text-align: center;
  pointer-events: none;
}

/* Arhitectură/Idei entries (arhitectura.html / idei.html) sometimes embed a
   list inside a description paragraph (see archive-description p innerHTML
   in styles.css). */
.archive-description ul {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #25121B;
  margin: 0 0 1em 0;
  padding-left: 20px;
}

.archive-description li {
  margin-bottom: 0.5em;
}

/* Evenimente reuses the old .events-container class (some shared JS in
   app-part2.js still looks it up via document.querySelector('.events-container')
   for the mobile calendar/category-panel scroll-lock behavior), but that
   class is position:absolute/fixed-height, sized for the old full-viewport
   modal. Override back to normal in-flow layout — an id selector always
   wins over the plain class rules in styles.css, including inside its
   mobile media queries. */
#events-container {
  position: static;
  height: auto;
  width: auto;
  top: auto;
  z-index: auto;
  background-color: transparent;
  -webkit-overflow-scrolling: auto;
}

/* styles.css only styles .archive-gallery-mobile inside its mobile media
   query — it never actually hides it on desktop, so without this it doubles
   up with .archive-gallery. */
.archive-gallery-mobile {
  display: none;
}

@media (max-width: 550px) {
  .archive-gallery-mobile {
    display: block;
  }
}

/* The CDRF article's footnote expand/collapse (see .footnotes / .expanded
   in styles.css) caps at 500px, too short for its actual footnote text. */
.expanded #footnotes-more-text {
  max-height: 4000px;
}

.back-to-articles-link {
  display: inline-block;
  margin-top: 32px;
}

/* Evenimente: widen .page-content just on this page so the title, filter
   bar, and card grid all share a 1232px content width — 1280px minus the
   .page-content 24px side padding (box-sizing: border-box). 1232px is
   exactly 4 cards at 284px plus 3 gaps at 32px (.recent-events-container's
   existing gap), so the grid lands on 4 cards/row with no leftover space. */
body.evenimente-page .page-content {
  max-width: 1280px;
}

.filter-bar {
  justify-content: center;
}

@media (min-width: 900px) {
  .recent-events-container .event-card {
    width: 284px;
    height: 388px;
  }
}

.event-card:hover .event-title {
  color: #CC4205;
}

/* Articole: same 1232px/4-cards-per-row layout as Evenimente. .articles-grid
   already uses a 32px gap, so 284px cards line up the same way. */
body.articles-page .page-content {
  max-width: 1280px;
}

@media (min-width: 900px) {
  .articles-grid .article-card {
    width: 284px;
    height: 300px;
  }
}

.article-card:hover .article-card-title {
  color: #CC4205;
}