/*
 Theme Name:   Blocksy Child
 Template:     blocksy
*/
@font-face {
    font-family: 'Mont';
    src: url('/wp-content/fonts/mont/MontForAnker-Light.woff2') format('woff2'),
         url('/wp-content/fonts/mont/MontForAnker-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Mont';
    src: url('/wp-content/fonts/mont/MontForAnker-Regular.woff2') format('woff2'),
         url('/wp-content/fonts/mont/MontForAnker-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Mont';
    src: url('/wp-content/fonts/mont/MontForAnker-SemiBold.woff2') format('woff2'),
         url('/wp-content/fonts/mont/MontForAnker-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Mont';
    src: url('/wp-content/fonts/mont/MontForAnker-Bold.woff2') format('woff2'),
         url('/wp-content/fonts/mont/MontForAnker-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

body, body * {
    font-family: 'Mont', sans-serif !important;
}

.editor-styles-wrapper, 
.editor-styles-wrapper * {
    font-family: 'Mont', sans-serif !important;
}

.entry-card .entry-content {
  position: relative; /* keeps fade pseudo-element positioned correctly */
}

.entry-card .entry-content:not(.expanded) {
  padding-bottom: 0; /* Remove bottom padding when collapsed */
  margin-bottom: 0; /* Remove bottom margin when collapsed */
}

.read-more-btn {
  width: 100%;            /* full width of the post */
  color: #55BBF4;
  font-weight: 700;
  background: #fff;
  padding: 1rem;  /* bigger clickable area */
  margin: calc(-1 * var(--fade-height, 40px)) 0 0; /* align with fade */
  text-align: center;
  outline: none;           /* remove default outline */
  cursor: pointer;
  display: block;
  border: none; /* Remove any default border */
}

/* Ensure no extra spacing after the button when in collapsed state */
.entry-card .entry-content:not(.expanded) ~ .read-more-btn {
  margin-bottom: 0;
}

/* Hide any elements that come after the content when collapsed */
.entry-card .entry-content:not(.expanded) ~ *:not(.read-more-btn) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.entry-card .entry-content:not(.expanded)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--fade-height, 200px); /* dynamic fade height */
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
}