/* =================================
   DECORATIVE ELEMENTS (Keep in CSS)
   ================================= */

/* Quote marks - theme.json doesn't support pseudo-elements */
.wp-block-quote::before {
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.1em;
  vertical-align: -0.4em;
  color: var(--wp--preset--color--primary);
  font-family: Georgia, serif;
  position: static;
  left: var(--wp--preset--spacing--20);
  top: var(--wp--preset--spacing--20);
  opacity: 0.7;
}

/* Citation prefix */
.wp-block-quote > cite {
  margin-block-start: var(--wp--preset--spacing--20);
  padding-block-end: var(--wp--preset--spacing--60);
}
.wp-block-quote cite::before,
.wp-block-quote footer::before {
  content: "— ";
  color: var(--wp--preset--color--primary);
}

/* =================================
   COMPLEX POSITIONING (Keep in CSS)
   ================================= */

/* Float alignments */
.wp-block-quote.alignleft {
  float: left;
  margin-right: var(--wp--preset--spacing--40);
}

.wp-block-quote.alignright {
  float: right;
  margin-left: var(--wp--preset--spacing--40);
}

/* Full-width calculations */
.wp-block-quote.alignfull {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* =================================
   INTERACTIVE STATES (Keep in CSS)
   ================================= */

.wp-block-quote:focus-within {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* =================================
   MEDIA QUERIES (Keep in CSS)
   ================================= */

@media (max-width: 768px) {
  .wp-block-quote::before {
    font-size: 3em;
    left: var(--wp--preset--spacing--10);
    top: var(--wp--preset--spacing--10);
  }
}

@media (prefers-color-scheme: dark) {
  .wp-block-quote {
    background: rgba(255, 255, 255, 0.05);
  }
}

@media print {
  .wp-block-quote {
    break-inside: avoid;
    background: transparent !important;
    border-left: 3px solid #000;
  }
}