/**
 * Memorial Quotes — Responsive / Mobile CSS
 */

/* ── Prevent horizontal overflow ─────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── Navbar mobile (≤ 900px) ──────────────────────────────── */
@media (max-width: 900px) {
  .logo-tagline { font-size: .55rem; white-space: nowrap; }


  /* Show hamburger */
  .navbar__hamburger {
    display: flex !important;
    flex-shrink: 0;
    order: 10;
  }

  /* Hide nav links — higher specificity beats main.css */
  .navbar .navbar__links {
    display: none !important;
    list-style: none;
    position: fixed;
    top: var(--navbar-h);
    left: 0;
    right: 0;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    flex-direction: column;
    padding: var(--space-4) var(--space-5) var(--space-5);
    gap: var(--space-1);
    z-index: 195;
    margin: 0;
  }

  .navbar .navbar__links li {
    list-style: none;
  }

  .navbar .navbar__links.open {
    display: flex !important;
  }

  .navbar__links .nav-link {
    padding: 10px 14px;
    font-size: 1rem;
    border-radius: var(--radius-sm);
    display: block;
    width: 100%;
  }

  /* Language dropdown z-index above nav panel */
  .lang-dropdown__menu {
    z-index: 300;
  }

  .navbar__inner {
    gap: var(--space-2);
    flex-wrap: nowrap;
  }

  .navbar__actions {
    gap: var(--space-2);
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Logo can shrink if needed */
  .navbar__logo {
    flex-shrink: 1;
    min-width: 0;
  }
}

/* ── Hide auth buttons on small screens (≤ 640px) ───────────── */
@media (max-width: 640px) {
  /* Hide ALL auth action buttons — only keep lang dropdown + hamburger */
  .navbar__actions .btn {
    display: none !important;
  }
}

/* ── Very small screens (≤ 400px) ───────────────────────────── */
@media (max-width: 400px) {
  .navbar__logo .logo-text {
    font-size: 1rem;
  }
}

/* ── Prevent content overflow (all screens) ──────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent long words / URLs from overflowing their container */
.card,
.quote-card,
.memorial-main,
.memorial-sidebar,
.memorial-body,
.tribute-panel {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* Avatar must keep fixed square dimensions for border-radius: 50% to work */
.memorial-hero__avatar {
  width: 200px !important;
  height: 200px !important;
  object-fit: cover !important;
}

/* ── General content responsive ─────────────────────────────── */
@media (max-width: 768px) {

  .container {
    padding: 0 var(--space-3); /* 24px → 12px */
  }

  .memorial-layout {
    flex-direction: column;
  }

  .memorial-sidebar {
    width: 100% !important;
  }

  .memorial-hero__name {
    font-size: clamp(1.4rem, 7vw, 2rem);
  }

  .memorial-grid,
  .memorials-grid {
    grid-template-columns: 1fr;
  }

  .cover-picker {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .admin-layout {
    flex-direction: column;
  }

  .admin-sidebar {
    width: 100% !important;
    height: auto !important;
  }
}