/* Cross-browser hanging punctuation class */
.hanging-punctuation {
  /* Fallback for non-Safari browsers using negative text-indent */
  text-indent: -0.45em;
  padding-left: 0.45em; /* Prevent text from being cut off */

  /* Progressive enhancement for Safari (only browser with partial support) */
  hanging-punctuation: first last;
}

/* Feature detection fallback - remove text-indent if hanging-punctuation is supported */
@supports (hanging-punctuation: first) {
  .hanging-punctuation {
    text-indent: 0;
    padding-left: 0;
  }
}

/* Specific class for quotes/blockquotes */
.hanging-quote {
  text-indent: -0.45em;
  padding-left: 0.45em;
  hanging-punctuation: first;
}

@supports (hanging-punctuation: first) {
  .hanging-quote {
    text-indent: 0;
    padding-left: 0;
  }
}

/* Alternative approach using pseudo-elements for better control */
.hanging-punctuation-alt {
  position: relative;
  text-indent: 0;
  hanging-punctuation: first last;
}

/* Fallback for browsers without hanging-punctuation support */
@supports not (hanging-punctuation: first) {
  .hanging-punctuation-alt::before {
    content: "";
    position: absolute;
    left: -0.45em;
    width: 0.45em;
  }

  /* Target common punctuation marks */
  .hanging-punctuation-alt[data-starts-with='"']::before,
  .hanging-punctuation-alt[data-starts-with="'"]::before,
  .hanging-punctuation-alt[data-starts-with="„"]::before,
  .hanging-punctuation-alt[data-starts-with="""]::before {
    content: attr(data-starts-with);
    position: absolute;
    left: -0.45em;
  }
  
  .hanging-punctuation-alt[data-starts-with='"'],
  .hanging-punctuation-alt[data-starts-with="'"],
  .hanging-punctuation-alt[data-starts-with="„"],
  .hanging-punctuation-alt[data-starts-with="""] {
    text-indent: 0.45em;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hanging-punctuation,
  .hanging-quote {
    text-indent: -0.3em;
    padding-left: 0.3em;
  }

  @supports (hanging-punctuation: first) {
    .hanging-punctuation,
    .hanging-quote {
      text-indent: 0;
      padding-left: 0;
    }
  }
}