/* montessori.fyi — custom styles */

/* HTMX loading indicator */
.htmx-indicator { opacity: 0; transition: opacity 0.2s; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Smooth page transitions for hx-boost */
.htmx-swapping { opacity: 0; transition: opacity 0.15s ease-out; }

/* Safe area padding for mobile sticky bar (iPhone notch/home indicator) */
.safe-area-pb {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* ─── View toggle ───────────────────────────────────────────────────────── */

/* Active button: terracotta fill */
.view-btn-active {
  background-color: var(--color-terracotta);
  color: white;
}

/* List-view container: stack cards vertically */
.lesson-cards.view-list {
  display: flex !important;
  flex-direction: column;
  gap: 0.375rem;
}

/* Card article/div: horizontal row */
.lesson-cards.view-list .lc-article {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  overflow: visible;
  transform: none !important;
}

/* Thumbnail: shrink to 48×48 square */
.lesson-cards.view-list .lc-thumb {
  aspect-ratio: auto;
  width: 3rem;
  height: 3rem;
  border-radius: 0.375rem;
  flex-shrink: 0;
}

/* Hide thumbnail overlays (area badge) in list mode */
.lesson-cards.view-list .lc-thumb-badge {
  display: none;
}

/* Card body: flex-1, no padding */
.lesson-cards.view-list .lc-body {
  flex: 1;
  min-width: 0;
  padding: 0;
}

/* Title: single line in list mode */
.lesson-cards.view-list .lc-body h3 {
  font-size: 0.9375rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Metadata row: no top margin in list mode */
.lesson-cards.view-list .lc-meta {
  margin-top: 0.125rem;
}

/* Curriculum badge: hidden in grid, visible in list */
.lesson-cards.view-list .lc-list-badge {
  display: inline-flex;
}

/* Heart: exits absolute positioning, becomes last flex item */
.lesson-cards.view-list .lc-heart {
  position: static;
  align-self: center;
  flex-shrink: 0;
}

/* Dashboard planner button: hide in list mode */
.lesson-cards.view-list .lc-actions {
  display: none;
}

/* Browse cards: hide rich grid layout, reveal compact list row */
.lesson-cards.view-list .lc-grid-content {
  display: none;
}
.lesson-cards.view-list .lc-list-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0.25rem 0;
}

/* Reduced-motion: disable all CSS animations/transitions */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ─── Print utilities ─────────────────────────────────────────────────────── */

/* Screen: hide print-only content */
.print-show { display: none; }

/* ─── Print styles ────────────────────────────────────────────────────────── */
@media print {
  /* Landscape + comfortable margins */
  @page { size: A4 landscape; margin: 1cm 1.5cm; }

  /* Utility: toggle visibility */
  .print-hide { display: none !important; }
  .print-show { display: block !important; }

  /* Global: clean slate */
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: white !important;
    color: #2c2c2c !important;
    font-size: 11px;
  }

  /* ── Site chrome ── */
  nav.sticky,                  /* site header nav (sticky top-0) */
  #coming-soon-banner,
  #htmx-indicator,
  footer,
  #dashboard-mobile-nav,       /* mobile bottom nav */
  aside { display: none !important; }   /* dashboard sidebar */

  /* ── Layout: expand content area ── */
  .max-w-screen-2xl { max-width: 100% !important; padding: 0 !important; }
  .flex-1 { flex: 1 1 auto !important; }
  main { padding: 0 !important; }

  /* ── Planner chrome ── */
  #planner-header,
  #modal-container,
  #mini-cal-container { display: none !important; }

  /* Week grid: give cells visible structure */
  .grid.grid-cols-7 { gap: 4px !important; }

  [id^="day-"] {
    border: 1px solid #d1d5db !important;
    border-radius: 0 !important;
    min-height: 70px !important;
    padding: 4px 6px !important;
    opacity: 1 !important;         /* override outside-window dimming */
    break-inside: avoid;
  }

  /* Lesson pills: remove background, keep dots + text */
  .planned-pill {
    background: transparent !important;
    border: 1px solid #d1d5db !important;
    border-radius: 2px !important;
    cursor: default !important;
    break-inside: avoid;
    margin-bottom: 2px;
  }

  /* Hide pill hover actions (×, ✓ buttons) */
  .planned-pill > div:last-child { display: none !important; }

  /* Curriculum balance bar: hide the segmented bar; keep chips and stats */
  .h-2.rounded-full.overflow-hidden { display: none !important; }

  /* Day cell + buttons: hide add and interactive controls */
  button[aria-label="Add lesson"],
  [id^="quick-add-"],
  .lc-heart { display: none !important; }

  /* Ensure week summary shows */
  .bg-charcoal\/5 { background-color: #f5f5f5 !important; }
}