/* ===========================================================================
   cleanup.css — final production polish (loaded LAST on every page).
   Additive only: refines the existing premium dark theme without rewriting it.
   Covers: long official brand name, mobile safety (768/480), compact
   recent-activity card, gentle desktop type toning, accessibility floor.
   =========================================================================== */

/* ---- Global overflow guard (reinforced) ---------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas, video, iframe { max-width: 100%; }
* { min-width: 0; }

/* ---- Official brand name: "ALLEANZA.SPERANZANIMALI E MILIEU." ------------- */
/* The name is long, so it must scale and wrap cleanly — never overflow,
   never crush the nav, never get cut. Desktop: premium and readable. */
.site-header .brand { max-width: min(56%, 540px); min-width: 0; align-items: center; }
.brand-word {
  font-size: clamp(.8rem, 1.05vw, 1.02rem);
  line-height: 1.08;
  letter-spacing: .01em;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
.brand-word small { overflow-wrap: anywhere; }

/* Home hero brand lock — keep the big name proportionate, allow clean wrap. */
.hero2-brand-copy strong {
  font-size: clamp(1.05rem, 2vw, 1.6rem) !important;
  line-height: 1.06;
  overflow-wrap: break-word;
}

/* Footer brand block stays tidy if the name wraps. */
.footer-brand > div > div > div:first-child { overflow-wrap: break-word; }

/* ---- Recent activity / observations card: compact (#8) ------------------- */
#activity-feed { max-height: 320px; overflow: auto; -webkit-overflow-scrolling: touch; }
#activity-feed .feed-row { padding: .5rem .15rem; align-items: center; }
#activity-feed .feed-title { font-size: .86rem; line-height: 1.25; }
#activity-feed .feed-sub { font-size: .72rem; line-height: 1.25; opacity: .8; }
#activity-feed .feed-time { font-size: .68rem; white-space: nowrap; }
.monster-activity .home-panel-foot, .scan-panel .home-panel-foot { margin-top: .4rem; }

/* ---- Gentle desktop typography toning (#5) ------------------------------- */
/* Only on wide screens: cap the largest display sizes so the look stays
   refined and premium rather than oversized. Mobile is untouched here. */
@media (min-width: 1100px) {
  .hero2-title.monster-title { font-size: clamp(2.4rem, 3.6vw, 3.5rem) !important; line-height: 1.05 !important; }
  .monster-head h2, .home-section-head h2 { font-size: clamp(1.45rem, 2vw, 2rem) !important; }
  .display-lg { font-size: clamp(2.2rem, 3.4vw, 3.4rem) !important; }
}

/* ---- Tablet / mobile: 768px --------------------------------------------- */
@media (max-width: 768px) {
  .site-header .container { gap: .55rem; }
  .site-header .brand { max-width: 64vw; }
  .brand-mark, .site-header .brand-mark { width: 38px !important; height: 38px !important; }
  .brand-word { font-size: .72rem !important; line-height: 1.12 !important; max-width: 100%; }
  .brand-word small { font-size: .48rem !important; }
  .nav-actions { gap: .4rem; margin-left: auto; }
  /* Forms one column, primary actions full width */
  .form-2col, .form-grid, .field-row, .filter-grid { grid-template-columns: 1fr !important; }
  main form .btn-gold, main form .btn-primary, main form [type="submit"] { width: 100% !important; justify-content: center; }
  /* Filters scroll horizontally instead of wrapping into a tall stack */
  #archive-filters .chip-row, .chip-row, .filter-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .5rem; padding-bottom: .3rem; }
  #archive-filters .chip-row::-webkit-scrollbar, .chip-row::-webkit-scrollbar { height: 0; }
  /* Hero actions: comfortable tap targets */
  .hero2-cta .hero2-cta-btn { flex: 1 1 calc(50% - .5rem); justify-content: center; }
  /* Modals / cards never exceed viewport */
  .modal, .modal-card, .lightbox-content { max-width: 94vw !important; }
}

/* ---- Phone: 480px ------------------------------------------------------- */
@media (max-width: 480px) {
  .site-header .brand { max-width: 62vw; }
  .brand-mark, .site-header .brand-mark { width: 34px !important; height: 34px !important; }
  .brand-word { font-size: .64rem !important; line-height: 1.1 !important; letter-spacing: 0 !important; }
  .brand-word small { display: none; } /* keep the header clean on the smallest screens */
  .hero2-cta .hero2-cta-btn { flex: 1 1 100%; }
  #activity-feed { max-height: 260px; }
  /* Lonely/last-child cards: remove dangling bottom gaps */
  .monster-section { margin-bottom: 1.1rem; }
  /* Keep language selector + admin button reachable, never overlapped */
  .lang-switch, .lang-btn { z-index: 60; }
  .lang-menu { right: 0; left: auto; }
}

/* ---- Accessibility / quality floor -------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ice, #00D4FF);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== Additional global mobile fixes ===== */
@media (max-width: 900px) {
  /* Collapse multi-column grids to a single column on small screens */
  .featured-grid,
  .project-grid,
  .gallery-grid,
  .doc-grid,
  .research-grid,
  .news-grid,
  .wildlife-grid,
  .observations-grid,
  .archive-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .stat-tiles {
    grid-template-columns: 1fr !important;
  }
  /* Ensure cards expand to full width */
  .card,
  .pcard,
  .doc-card,
  .res-card,
  .news-card,
  .wildlife-card,
  .obs-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Compact bottom navigation */
  .bottom-nav { height: 56px !important; }
  .bottom-nav a { font-size: .78rem !important; padding: .5rem .4rem !important; }
  body { padding-bottom: 64px !important; }
}

@media (max-width: 480px) {
  /* Extra compact bottom navigation on phones */
  .bottom-nav { height: 52px !important; }
  .bottom-nav a { font-size: .74rem !important; padding: .45rem .3rem !important; }
  body { padding-bottom: 60px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}