/* =====================================================
   SIDEBAR MOBILE — toggle collapsible (≤600px only)
   Shared by: Projects/*.html, Diario/2026/*.html
   ===================================================== */

/* Desktop: hide mobile-only elements */
.mobile-header { display: none; }
.sidebar-toggle { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 600px) {

  /* ══════════════════════════════════════════════════
     MOBILE HEADER BAR
     Visual strip at top — the logo-link stays in its
     original DOM position, CSS repositions it to appear
     inside this bar (so logo randomisation keeps working).
  ══════════════════════════════════════════════════ */
  .mobile-header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    background: rgba(14, 14, 14, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 75; /* below toggle(110) and sidebar(100), above content */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Logo repositioned to sit inside the header bar */
  .logo-link {
    top: 9px !important;
    right: 12px !important;
    z-index: 85 !important; /* above header bar, below toggle */
  }

  .logo-img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain;
  }

  /* ══════════════════════════════════════════════════
     SIDEBAR — off-screen by default, slides in on open
  ══════════════════════════════════════════════════ */
  .months-sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 100;
    width: 170px !important;
    padding-top: 62px !important; /* gap below toggle button */
  }

  body.sidebar-open .months-sidebar {
    transform: translateX(0);
  }

  /* ══════════════════════════════════════════════════
     OVERLAY — darkens content when sidebar is open
  ══════════════════════════════════════════════════ */
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  body.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: all;
  }

  /* ══════════════════════════════════════════════════
     TOGGLE BUTTON — ☰ / ✕ — top-left, inside header
  ══════════════════════════════════════════════════ */
  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 8px;
    left: 10px;
    z-index: 110;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    padding: 0;
  }

  .sidebar-toggle:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.08);
  }

  /* ══════════════════════════════════════════════════
     CONTENT — pushed below the fixed header bar
  ══════════════════════════════════════════════════ */
  .topbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: calc(54px + 18px) !important; /* header height + breathing room */
  }

  .diary-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 28px !important;
    padding-bottom: 80px !important;
    max-width: 100% !important;
  }

  /* ══════════════════════════════════════════════════
     TYPOGRAPHY
  ══════════════════════════════════════════════════ */
  .page-title   { font-size: 20px !important; line-height: 1.4 !important; }
  .entry-title  { font-size: 18px !important; }
  .entry-date   { font-size: 13px !important; }

  .entry-content p {
    font-size: 17px !important;
    line-height: 1.85 !important;
    text-indent: 24px !important;
  }
}