/* ==============================================
   GLOBAL-CUSTOM.CSS — YorickBlom.nl (minimal)
   Only what WordPress Block Editor CANNOT do.
   ============================================== */

/* ----- 1. WRAPPER: overflow clip for blobs ----- */
/* Add class "yb-wrapper" to your template's outer Group */
.yb-wrapper {
  overflow: hidden;
  position: relative;
}

/* ----- 2. STICKY HEADER CLASS ----- */
/* Add class "yb-sticky" to the header Group in your template */
.yb-sticky {
  position: sticky;
  top: 0;
  z-index: 9999;
}

.overflow-visible {
  overflow: visible;
}

.image-detail {
  max-width: fit-content;
  position: relative;
  z-index: 2;
  margin-left: 50px;
}

.position-relative {
  position: relative;
}

/* ----- 3. BLOB z-index (content above blobs) ----- */
.yb-wrapper > .wp-block-columns,
.yb-wrapper > .wp-block-heading,
.yb-wrapper > .wp-block-paragraph,
.yb-wrapper > .wp-block-buttons,
.yb-wrapper > .wp-block-list,
.yb-wrapper > .wp-block-separator,
.yb-wrapper > .wp-block-group,
.yb-wrapper > .wp-block-social-links,
.yb-wrapper > .wp-block-image {
  position: relative;
  z-index: 1;
}

/* ----- 4. SQUARE SOCIAL ICONS ----- */
/* Add class "is-style-yb-square" to the Social Links block */
.is-style-yb-square .wp-social-link {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border: 1px solid var(--wp--preset--color--primary, #d9c9b5);
  border-radius: 2px !important;
  background: transparent !important;
  padding: 0 !important;
  transition: border-color 0.2s ease;
}

.is-style-yb-square .wp-social-link:hover {
  border-color: var(--wp--preset--color--foreground, #555);
}

.is-style-yb-square .wp-social-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 !important;
}

.is-style-yb-square .wp-social-link svg {
  width: 1rem;
  height: 1rem;
  fill: var(--wp--preset--color--muted, #888);
  transition: fill 0.2s ease;
}

.is-style-yb-square .wp-social-link:hover svg {
  fill: var(--wp--preset--color--foreground, #555);
}

/* ----- 5. CHECKMARK LIST ----- */
.is-style-checkmark-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.is-style-checkmark-list li {
  padding-left: 1.75rem;
  position: relative;
}

.is-style-checkmark-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 600;
}

/* ----- 6. PLAIN LIST ----- */
.is-style-plain-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.is-style-plain-list li {
  padding-left: 0;
}

/* ----- 7. HOVER: card lift + shadow ----- */
.wp-block-column.has-border-color {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-column.has-border-color:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 4px 20px rgba(85, 85, 85, 0.12);
}

/* ----- 7. PILL TAGS (tech stack, no pointer) ----- */
.is-style-pill .wp-block-button__link {
  cursor: default;
  transition: box-shadow 0.2s ease;
}

.is-style-pill .wp-block-button__link:hover {
  box-shadow: 0 2px 8px rgba(85, 85, 85, 0.08);
}

/* ----- 8. SEPARATOR opacity fix ----- */
.wp-block-separator {
  opacity: 1;
}