/* Base Typography & General */
body, h1, h2, h3, h4, h5, h6, .w3-button, .w3-bar-item {
  font-family: 'Anonymous Pro', 'Inconsolata', monospace;
}

body { font-size: 16px; }

/* Structural Utilities */
.custom-sidebar { width: 300px; z-index: 3; }
.custom-main { margin-left: 340px; margin-right: 40px; }
.cursor-pointer { cursor: pointer; }
.nav-link { margin-top: -0.4em; }

@media (max-width: 992px) {
  .custom-main { margin-left: 0; margin-right: 0; }
}

/* Responsive Video Wrapper */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  width: 100%;
  overflow: hidden;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Modal Specific Utilities */
.custom-modal {
  padding-top: 0 !important; /* Overrides W3.CSS default 100px top padding */
}
.modal-flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Takes up exactly the full height of the screen */
  width: 100%;
}
.modal-image {
  max-height: 85vh; /* Leaves exactly 15% of the screen height for the caption and visual breathing room */
  max-width: 90vw;  /* Keeps wide images from touching the left/right edges */
  width: auto;
  height: auto;
}

/* Bento Grid Engine */
.bento-image {
  width: 100%;
  margin-bottom: 16px;
}
.bento-grid {
  column-count: 2;
  column-gap: 16px;
  margin-bottom: 16px;
}
.bento-item {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 16px;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  position: relative;
  transition: margin 0.2s, border 0.2s;
}
.full-width-item {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  position: relative;
  transition: margin 0.2s, border 0.2s;
}

@media (max-width: 768px) {
  .bento-grid { 
    column-count: 2;
    column-gap: 8px; 
    margin-bottom: 8px;
  }
  .bento-item { 
    margin-bottom: 8px; 
  }
  .full-width-item {
    margin-bottom: 8px;
  }
}

/* EDITOR UX STYLES (filmdump_editor.html) */
body.editor { margin: 0; display: flex; height: 100vh; overflow: hidden; font-family: sans-serif; }
#canvas { flex: 1; overflow-y: auto; position: relative; }

.card-wrap { border: 2px solid transparent; cursor: grab; background: #fff;}
.card-wrap:active { cursor: grabbing; }
.card-wrap.drag-over { border-top: 4px solid #2196F3; margin-top: 24px; } 

.editor-img { background-color: #eee; min-height: 100px; display: block; width: 100%; height: auto; pointer-events: none; }

.card-tools { display: none; position: absolute; top: 8px; right: 8px; z-index: 5; gap: 6px; }
.card-wrap:hover .card-tools { display: flex; }