/*
 * Custom CSS for blocks
*/

/* 
* Default border for Icons
* Match font color
* Match border thickness with font weight 
*/

.material-symbols-outlined {
  border-radius: 50%;
  padding: 0.3em;
  display: inline-block;
  transition: all 0.3s ease;
}

.material-symbols-outlined[style*='"wght" 100'] { border: 1px solid currentColor; }
.material-symbols-outlined[style*='"wght" 200'] { border: 2px solid currentColor; }
.material-symbols-outlined[style*='"wght" 300'] { border: 2.5px solid currentColor; }
.material-symbols-outlined[style*='"wght" 400'] { border: 3px solid currentColor; }
.material-symbols-outlined[style*='"wght" 500'] { border: 3.5px solid currentColor; }
.material-symbols-outlined[style*='"wght" 600'] { border: 4px solid currentColor; }
.material-symbols-outlined[style*='"wght" 700'] { border: 4.5px solid currentColor; }

.material-symbols-outlined.no-border {
  border: none;
  padding: 0;
}

/* Icon with no border
* ClassName: no-border 
* Icon buttons
*/

.no-border .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.no-border .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-size: calc(2.5 * 1em); 
  display: inline-flex;
  vertical-align: middle;
  border: none;
  margin-right: -0.2em;
  margin-left: -0.3em;
}

/* Image Overlay */

.card-top::after {
  content: '';
  position: absolute;
  width: 625px;
  height: 625px;
  border-radius: 50%;
  background-color: rgba(245, 108, 102, 1);
  opacity: 80%;
  bottom: -540px; /* move it down inside the top row */
  left: -300px;   /* move it left inside the top row */
  z-index: 0;
}

.card-top .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .card-top-alt::after {
    content: '';
    position: absolute;
    width: 800px;
    height: 630px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--primary);
    opacity: 80%;
    bottom: -500px;
    left: -350px;
    z-index: 0; /* behind content */
  }

  .card-top-alt .wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
  }
}
@media (max-width: 768px) {
  .card-top-alt::after {
    content: '';
    position: absolute;
    width: 720px;
    height: 600px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--primary);
    opacity: 80%;
    bottom: -500px;
    left: -350px;
    z-index: 0; /* behind content */
  }

  .card-top-alt .wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
  }
}

/* Reverse stack CSS for the Logo Display */

@media (min-width: 768px) {
  .reverse-stack {
    flex-direction: column;
  }
}

/* Equal heights columns */

.wp-block-column {
  display: flex;
  flex-direction: column;
}

.content-group {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Device responsiviness in column borders for Our project pattern */

@media (min-width: 768px) {
  .column-border:not(:last-child) {
    border-right: 1px solid #ccc;
    border-bottom: none;
    padding-right: 4rem;
  }
}

@media (max-width: 767px) {
  .column-border:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #ccc;
    padding-bottom: 3rem;
  }
}

/* Rounded borders on core Video block */

.rounded-video {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden;
}