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


/* Apply changes to header text */
.headerTitle {
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 600 !important;  /* Semi-bold */
  font-size: 20px !important;    /* Headline Medium */
  color: #2D2D4C !important;    /* on surface high */
}



/* Apply changes to Beamer changelog entries */
.feature {
  border-radius: 8px !important;
  border: 1px solid #DDE2ED !important;
  margin: 0 8px 18px 8px !important;
  box-shadow: 0px 4px 20px rgba(52, 52, 87, 0.08) !important;
  overflow: hidden !important;
}

/* Apply changes to the read more button */
.feature.hasReadMore .featureContent .readmoreButton,
.feature.hasReadMore .readmoreButton {
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  border: 1px solid #DDE2ED !important;
  background: #FFFFFF !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-decoration: none !important;       /* Removes the underline */
  color: #2D2D4C !important;
  box-shadow: 0px 2px 6px rgba(52, 52, 87, 0.06) !important;
}

/* Add hover effect to read more button */
.feature.hasReadMore .featureContent .readmoreButton:hover,
.feature.hasReadMore .readmoreButton:hover {
  color: #FF5252 !important;
}

/* Apply changes bottom feedback section */
.featureFeedback {
  background-color: #FAF8F7 !important;
}

/* Apply changes bottom text field */
.feedbackInput {
  border-radius: 8px !important;
  border: 1px solid #DDE2ED !important;
}

/* Customize the appearance of the post date */
.feature .featureDate span {
  color: #6E7691 !important;
}

/* Stand-alone page - feature card */
body.standalone .feature {
  border-radius: 8px !important;
  border: 1px solid #DDE2ED !important;
  margin: 18px 8px 18px 8px !important;
  box-shadow: 0px 4px 20px rgba(52, 52, 87, 0.08) !important;
  overflow: hidden !important;
}




.feedbackSend {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  background-image: url('https://raw.githubusercontent.com/feathericons/feather/3dc050d97405062eba78aa57115c0a15c63abdaa/icons/send.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;

  fill: none !important;
  stroke: none !important;
}

/* Hide the original SVG path visually */
.feedbackSend path {
  display: none !important;
}

/* Apply changes to the subscription field */
.emailSubscriptionInput {
  border-radius: 8px !important;
  border: 1px solid #DDE2ED !important;
}

/* Apply changes to the subscription section */
.feature.notificationsPrompt {
  background-color: #FAF8F7 !important;
}

/* Apply changes to the icon in subscription section */
.materialIcon.notificationsIcon {
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;

  background-image: url('https://raw.githubusercontent.com/feathericons/feather/3dc050d97405062eba78aa57115c0a15c63abdaa/icons/bell.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

/* Hide original SVG path for notification icon */
.materialIcon.notificationsIcon path {
  display: none !important;
}


/* Feedback emojis */
.featureFeedback .emojis img {
  opacity: 0 !important;         /* Hide original image */
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Custom icon wrapper */
.featureFeedback .emojis span {
  width: 32px !important;   /* Total size including padding */
  height: 32px !important;
  padding: 2px !important;  /* Space inside the circle */
  background-size: 22px 22px !important; /* Smaller icon inside */
  background-color: #FFFFFF !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  display: inline-block !important;
  border-radius: 50% !important;
  box-shadow: 0px 0px 5px 2px rgba(52, 52, 87, 0.08) !important;
  transition: all 0.25s ease !important;
  margin: 5px 4px 0px 4px !important;  /* Spacing between emojis */
}

/* Hover interaction */
.featureFeedback .emojis span:hover {
  cursor: pointer;
  opacity: 0.8;
}

/* Custom icon URLs */
.featureFeedback .emojis span:nth-of-type(1) {
  background-image: url('https://raw.githubusercontent.com/feathericons/feather/3dc050d97405062eba78aa57115c0a15c63abdaa/icons/frown.svg');
}

.featureFeedback .emojis span:nth-of-type(2) {
  background-image: url('https://raw.githubusercontent.com/feathericons/feather/3dc050d97405062eba78aa57115c0a15c63abdaa/icons/meh.svg');
}

.featureFeedback .emojis span:nth-of-type(3) {
  background-image: url('https://raw.githubusercontent.com/feathericons/feather/3dc050d97405062eba78aa57115c0a15c63abdaa/icons/smile.svg');
}

/* Visual feedback states */
.featureFeedback .emojis span.unselectedemoji {
  transform: scale(0.8);
  filter: grayscale(100%);
}

.featureFeedback .emojis span.selectedemoji {
  border: 2px solid #2D2D4C !important;
}

/* Subscribe link on the standalone page */
.actionLink {
  color: #2D2D4C !important;
  font-weight: bold !important;
}