/* =============================================================
   Printer Theme
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; }

/* =============================================================
   PAGE BACKGROUND
   ============================================================= */
.printer-theme-body {
  margin: 0;
  padding: 4rem 1.5rem 8rem;
  min-height: 100vh;
  background-color: #d8d3c8;
  background-image: radial-gradient(circle, #bfbab0 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: 'Courier Prime', 'Courier New', monospace;
}

/* =============================================================
   CONTAINER — wraps frame + paper
   ============================================================= */
.printer-container {
  width: 100%;
  max-width: 900px;
  position: relative;
}

/* =============================================================
   PRINTER FRAME
   overflow:visible so the slot-assembly can hang below.
   ============================================================= */
.printer-frame {
  background: linear-gradient(175deg,
    #f8f4ec 0%, #f2ede3 30%, #ebe5db 65%, #e0dbd0 100%
  );
  border-radius: 18px 18px 0 0;
  padding: 2rem 2.5rem 1.8rem;
  position: relative;   /* stacking context for slot-assembly */
  overflow: visible;    /* allow slot-assembly to extend below */

  box-shadow:
    0 2px 0 rgba(255,255,255,0.9) inset,
    2px 0 0 rgba(255,255,255,0.55) inset,
    0 -4px 0 #b0aba0 inset,
    -2px 0 0 rgba(0,0,0,0.06) inset,
    0 14px 40px rgba(0,0,0,0.28),
    0 30px 80px rgba(0,0,0,0.10);
}

/* =============================================================
   SLOT ASSEMBLY — inside .printer-frame, absolutely positioned.

   Dimensions:
     slot-top-bar   : 8px  — dark top lip
     slot-middle    : 20px — [side-wall | transparent gap | side-wall]
     slot-bottom-bar: 8px  — dark bottom lip
   Total height: 36px

   Placement (bottom: -28px):
     slot-top-bar top    = frame_bottom - 36px + 8px  = inside frame ✓
     slot-middle         = frame_bottom - 28px .. frame_bottom - 8px
     slot-bottom-bar     = frame_bottom - 8px  .. frame_bottom + 0px
   Wait — let's use bottom: 0 so the assembly bottom edge is at
   the frame's bottom edge:
     slot-bottom-bar bottom = frame_bottom
     slot-bottom-bar top    = frame_bottom - 8px
     slot-middle bottom     = frame_bottom - 8px
     slot-middle top        = frame_bottom - 28px
     slot-top-bar bottom    = frame_bottom - 28px
     slot-top-bar top       = frame_bottom - 36px  (inside frame)

   The paper-output-area margin-top = -(slot-middle + slot-bottom-bar)
   = -(20 + 8) = -28px so the paper top starts at slot-middle top.
   ============================================================= */
.slot-assembly {
  position: absolute;
  bottom: 0;        /* assembly bottom = frame bottom */
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 10;      /* paints above frame background and above paper */
}

.slot-top-bar {
  height: 8px;
  background: #1a1714;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.55),
    0 1px 0 #0a0806 inset;
}

.slot-middle {
  display: flex;
  height: 20px;   /* the opening — paper shows through the gap */
}

.slot-side-left,
.slot-side-right {
  width: 28px;    /* beige-colored frame walls on each side */
  flex-shrink: 0;
  background: linear-gradient(to bottom, #d8d3c8 0%, #c8c3b8 100%);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), inset 0 -1px 3px rgba(0,0,0,0.2);
}

.slot-gap {
  flex: 1;
  background: transparent;  /* paper shows through here */
}

.slot-bottom-bar {
  height: 8px;
  background: #1a1714;
  box-shadow:
    0 3px 10px rgba(0,0,0,0.5),
    0 -1px 0 #0a0806 inset;
}

/* =============================================================
   PAPER OUTPUT AREA
   Sits in normal flow below .printer-frame.
   margin-top = -(slot-middle + slot-bottom-bar) = -(20+8) = -28px
   This pulls the paper top up to align with the slot-middle top,
   so paper emerges from inside the slot opening.

   NO overflow:hidden — the slot-assembly (z-index:10) acts as
   the visual mask. The paper starts hidden via translateY(-100%).
   ============================================================= */
.paper-output-area {
  /* Inset left/right to match the side-wall width (28px each),
     so paper is always within the slot's frame walls */
  margin-left: 28px;
  margin-right: 28px;
  margin-top: -28px;   /* pull up into the slot gap */
  /* No overflow:hidden, no z-index — stays below the frame's stacking context */
}

/* =============================================================
   PAPER SHEET — pure white
   ============================================================= */
.paper-sheet {
  width: 100%;
  background: #ffffff;
  border-radius: 0 0 6px 6px;
  padding: 2.5rem 3rem 3rem;
  box-shadow:
    0 12px 50px rgba(0,0,0,0.16),
    0 4px 12px rgba(0,0,0,0.1);
  min-height: 520px;

  /* Initial state: hidden above, ready to feed down */
  transform: translateY(-100%);
  opacity: 0;
}

/* =============================================================
   PAPER ANIMATION
   ============================================================= */
@keyframes paperFeedIn {
  0%   { transform: translateY(-100%); opacity: 0; }
  5%   { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.paper-sheet.feeding-in {
  animation: paperFeedIn 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* =============================================================
   HEADER
   ============================================================= */
.printer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1.4rem;
  gap: 1rem;
}

.printer-header-left {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.printer-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 3px #d5d0c5,
    0 0 0 5px #b8b3a8,
    0 4px 12px rgba(0,0,0,0.3);
}
.printer-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.printer-brand-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

/* Name — Courier Prime Bold */
.printer-brand {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-weight: 700;
  color: #1c1c1c;
  font-size: 1.3rem;
  line-height: 1.2;
}

/* Bio — Courier Prime */
.printer-tagline {
  font-family: 'Courier Prime', 'Courier New', monospace;
  color: #6a6560;
  font-size: 0.82rem;
  line-height: 1.4;
}

.printer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
  margin-top: 0.3rem;
}

.printer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 0.78rem;
  color: #6a6560;
  text-decoration: none;
  transition: color 0.15s ease;
}
.printer-link:hover { color: #1c1c1c; }
.printer-link svg { flex-shrink: 0; opacity: 0.65; }

/* =============================================================
   NAVIGATION — 3D keyboard keys
   ============================================================= */
.printer-nav {
  display: flex;
  gap: 0.65rem;
  padding-bottom: 0.5rem;
  flex-wrap: wrap;
}

.printer-nav-btn {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;

  background: linear-gradient(to bottom,
    #f4efe5 0%, #ebe6db 45%, #ddd8cc 85%, #d0cbbf 100%
  );
  color: #2a2520;

  border-top:    1.5px solid #f0ece2;
  border-left:   1.5px solid #e8e3d8;
  border-right:  1.5px solid #b5b0a5;
  border-bottom: 1.5px solid #a5a095;
  border-radius: 6px;
  padding: 0.55rem 1.4rem 0.7rem;
  line-height: 1;

  box-shadow:
    0 5px 0 #888078,
    0 7px 10px rgba(0,0,0,0.25),
    0 1px 0 rgba(255,255,255,0.85) inset,
    2px 0 0 rgba(255,255,255,0.4) inset;

  transition: transform 0.07s ease, box-shadow 0.07s ease, background 0.07s ease;
}

.printer-nav-btn:hover {
  background: linear-gradient(to bottom,
    #faf5eb 0%, #f0ebe0 45%, #e3ded2 85%, #d6d1c5 100%
  );
  box-shadow:
    0 5px 0 #888078,
    0 8px 12px rgba(0,0,0,0.28),
    0 1px 0 rgba(255,255,255,0.9) inset,
    2px 0 0 rgba(255,255,255,0.5) inset;
}

.printer-nav-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 #888078,
    0 2px 4px rgba(0,0,0,0.18),
    0 1px 0 rgba(255,255,255,0.3) inset;
  background: linear-gradient(to bottom, #ccc8bc 0%, #c4bfb3 100%);
  border-top-color: #bbb7ab;
  border-left-color: #b3afa3;
}

/* Active page — recessed, same key shape */
.printer-nav-btn.active {
  background: linear-gradient(to bottom,
    #c8c3b7 0%, #bdb8ac 50%, #b0ab9f 100%
  );
  color: #1a1510;
  border-top:    1.5px solid #d0cbbf;
  border-left:   1.5px solid #c8c3b7;
  border-right:  1.5px solid #8a8578;
  border-bottom: 1.5px solid #7a7568;
  transform: translateY(3px);
  box-shadow:
    0 2px 0 #6a6558,
    0 3px 8px rgba(0,0,0,0.2),
    0 1px 0 rgba(255,255,255,0.2) inset;
}

/* =============================================================
   PAPER CONTENT TYPOGRAPHY — all Courier Prime
   ============================================================= */
.paper-content {
  color: #1a1510;
  line-height: 1.85;
  font-size: 1rem;
  font-family: 'Courier Prime', 'Courier New', monospace;
}

.paper-content * {
  font-family: inherit;
}

.paper-content h1,
.paper-content h2,
.paper-content h3,
.paper-content h4,
.paper-content h5,
.paper-content h6 {
  color: #1a1510;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.paper-content h1 { font-size: 2rem; }
.paper-content h2 {
  font-size: 1.5rem;
  border-bottom: 1px solid #e0dbd0;
  padding-bottom: 0.4rem;
}
.paper-content h3 { font-size: 1.2rem; }

.paper-content p { margin-bottom: 1.1rem; }

.paper-content a {
  color: #1a5fa0;
  text-decoration: none;
  font-family: 'Courier Prime', 'Courier New', monospace;
}
.paper-content a:hover { text-decoration: underline; }

.paper-content ul, .paper-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1.1rem;
}
.paper-content li { margin-bottom: 0.4rem; }

.paper-content img { max-width: 100%; height: auto; border-radius: 4px; }

.paper-content blockquote {
  border-left: 3px solid #ccc8bc;
  margin: 1.5rem 0;
  padding: 0.5rem 1.5rem;
  color: #666;
  font-style: italic;
}

.paper-content code {
  background: #f0ece4;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'Courier Prime', 'Courier New', monospace;
}

.paper-content pre {
  background: #f0ece4;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  overflow-x: auto;
  margin-bottom: 1.1rem;
}
.paper-content pre code { background: none; padding: 0; }

/* =============================================================
   POLAROID EVENT CARDS — straight, wider frames
   top/left/right: 26px  |  bottom: 36px (for caption label)
   ============================================================= */
.events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1rem 0 2.5rem 0;
}

.event-card {
  background: #ffffff;
  /* 26px frame on top/sides, 36px on bottom for the caption label */
  padding: 26px 26px 0 26px;
  box-shadow:
    0 3px 12px rgba(0,0,0,0.15),
    0 1px 4px rgba(0,0,0,0.10);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.event-card:hover {
  box-shadow:
    0 8px 24px rgba(0,0,0,0.2),
    0 2px 8px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

.event-card img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}

.event-card .event-caption {
  padding: 0.65rem 0.4rem 0.75rem;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 0.78rem;
  color: #333;
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
  min-height: 36px;
}

.event-card .event-caption a {
  color: #1a5fa0;
  text-decoration: none;
  font-family: 'Courier Prime', monospace;
}
.event-card .event-caption a:hover { text-decoration: underline; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 640px) {
  .events-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .printer-theme-body { padding: 1.5rem 0.75rem 5rem; }
  .printer-frame { padding: 1.5rem 1.5rem 1.2rem; }
  .printer-avatar { width: 52px; height: 52px; }
  .printer-brand { font-size: 1.1rem; }
  .paper-output-area { margin-left: 16px; margin-right: 16px; }
  .slot-side-left, .slot-side-right { width: 16px; }
  .paper-sheet { padding: 2rem 1.5rem 2.5rem; min-height: 400px; }
}

@media (max-width: 480px) {
  .printer-theme-body { padding: 1rem 0.5rem 4rem; }
  .printer-frame { padding: 1.25rem 1.25rem 1rem; }
  .paper-output-area { margin-left: 10px; margin-right: 10px; }
  .slot-side-left, .slot-side-right { width: 10px; }
  .paper-sheet { padding: 1.5rem 1.25rem 2rem; }
  .paper-content { font-size: 0.93rem; }
}