@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

body {
  font-family: 'Inter', sans-serif;
  background-color: #ffffff;
  color: #2a2a2a;
  scroll-behavior: smooth;
  margin: 0;
}

h1, h2, h3 {
  color: #004b6e;
}

/* Specific to Omeka S + Lively theme */
.page-title {
  margin-bottom: 0.5rem;
  color: #004b6e;
}

body .block-html:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

section {
  margin-bottom: 5rem;
}

img.rounded-profile {
  width: 96px;
  height: 96px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin-bottom: 1rem;
}

.zoom-in-profile {
  object-position: center 20%;
}

.profile-card {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s;
}

.profile-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Style the overall audio container with left alignment */
.media-render.file {
  background-color: #e5e1dc; 
  max-width: 500px;
  margin: 11px 0; 
  padding: 12px; 
  border-radius: 15px;
  font-family: "Jura", sans-serif;
  position: relative;
  box-shadow: 
    3px 3px 6px rgba(0,0,0,0.07), 
    -3px -3px 6px rgba(255,255,255,0.8),
    inset 1px 1px 2px rgba(255,255,255,0.6),
    inset -1px -1px 2px rgba(0,0,0,0.05);
}

/* Remove the "Audio" label by setting empty content */
.media-render.file::before {
  content: none;
}

/* Remove the indicator dot */
.media-render.file::after {
  content: none;
}

/* Style the audio element */
.media-render.file audio {
  width: 100%;
  border-radius: 10px;
  background-color: #e5e1dc;
  outline: none;
  box-shadow: 
    inset 1px 1px 3px rgba(0,0,0,0.08), 
    inset -1px -1px 3px rgba(255,255,255,0.8);
}

/* Style the control panel to match background */
.media-render.file audio::-webkit-media-controls-panel {
  background-color: #e5e1dc;
  border-radius: 10px;
  padding: 8px; /* Reduced padding */
}

/* Style the play button with refined shadow */
.media-render.file audio::-webkit-media-controls-play-button {
  background-color: #e5e1dc;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  box-shadow: 
    1.5px 1.5px 3px rgba(0,0,0,0.08), 
    -1.5px -1.5px 3px rgba(255,255,255,0.8),
    inset 0 0 0 rgba(0,0,0,0);
  transition: box-shadow 0.15s ease;
}

/* Style the timeline/progress bar with consistent thickness */
.media-render.file audio::-webkit-media-controls-timeline {
  background-color: rgba(122, 122, 120, 0.2);
  border-radius: 6px;
  height: 6px;
  margin: 0 10px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.08);
}

/* Style the timeline progress to match consistent thickness */
.media-render.file audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
  height: 6px;
  width: 6px;
  border-radius: 6px;
}

/* Fix volume control vertical alignment */
.media-render.file audio::-webkit-media-controls-volume-control-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Style the volume slider */
.media-render.file audio::-webkit-media-controls-volume-slider {
  background-color: rgba(122, 122, 120, 0.2);
  border-radius: 6px;
  height: 6px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.08);
}

/* Style the mute button with refined shadow */
.media-render.file audio::-webkit-media-controls-mute-button {
  background-color: #e5e1dc;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  box-shadow: 
    1.5px 1.5px 3px rgba(0,0,0,0.08), 
    -1.5px -1.5px 3px rgba(255,255,255,0.8),
    inset 0 0 0 rgba(0,0,0,0);
  transition: box-shadow 0.15s ease;
}

/* Add a refined pressed effect for buttons when active */
.media-render.file audio::-webkit-media-controls-play-button:active,
.media-render.file audio::-webkit-media-controls-mute-button:active {
  box-shadow: 
    0 0 0 rgba(0,0,0,0), 
    0 0 0 rgba(255,255,255,0),
    inset 1px 1px 2px rgba(0,0,0,0.12),
    inset -1px -1px 2px rgba(255,255,255,0.5);
}

/* Style the three-dot menu button */
.media-render.file audio::-webkit-media-controls-toggle-closed-captions-button,
.media-render.file audio::-webkit-media-controls-settings-button,
.media-render.file audio::-webkit-media-controls-fullscreen-button,
.media-render.file audio::-webkit-media-controls-overflow-button {
  background-color: #e5e1dc;
  border-radius: 50%;
  box-shadow: 
    1.5px 1.5px 3px rgba(0,0,0,0.08), 
    -1.5px -1.5px 3px rgba(255,255,255,0.8),
    inset 0 0 0 rgba(0,0,0,0);
  transition: box-shadow 0.15s ease;
}

/* Firefox-specific styling */
@-moz-document url-prefix() {
  .media-render.file audio {
    background-color: #e5e1dc;
    border-radius: 10px;
    padding: 8px;
  }
}

/* Add responsive adjustments */
@media screen and (max-width: 600px) {
  .media-render.file {
    width: 90%;
    padding: 12px;
  }
}