/**
 * Gutenberg Blocks Stylesheet - Discover Your Italy 2 Theme
 * Custom CSS for WordPress Gutenberg Editor Blocks
 */

/* ==========================================================================
   1. Design System & CSS Variables
   ========================================================================== */
:root {
  --dyi-primary: #2D4F7B;
  --dyi-primary-hover: #1e3859;
  --dyi-primary-light: rgba(45, 79, 123, 0.08);
  --dyi-text-dark: #1a1a1a;
  --dyi-text-body: #2c2c2c;
  --dyi-text-muted: #6c757d;
  --dyi-bg-light: #f5f7fc;
  --dyi-bg-subtle: #f8f9fa;
  --dyi-border-color: #dcdee5;
  --dyi-font-heading: 'Marcellus', serif;
  --dyi-font-body: 'Crimson Pro', serif;
  --dyi-radius-sm: 4px;
  --dyi-radius-md: 8px;
  --dyi-radius-lg: 12px;
  --dyi-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --dyi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --dyi-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   2. Article Content & Typography Layout
   ========================================================================== */
.article-content {
  font-family: var(--dyi-font-body);
  font-size: 1.25rem; /* 20px */
  line-height: 1.65;
  color: var(--dyi-text-body);
}

.article-content p {
  font-family: var(--dyi-font-body);
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--dyi-text-body);
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Headings inside article-content & Gutenberg */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6,
.wp-block-heading {
  font-family: var(--dyi-font-heading);
  color: var(--dyi-text-dark);
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 400;
}

.article-content h1,
h1.wp-block-heading {
  font-size: 2.5rem;
  margin-top: 2.5rem;
}

.article-content h2,
h2.wp-block-heading {
  font-size: 2.125rem;
  margin-top: 2.25rem;
  padding-bottom: 0.5rem;
}

.article-content h3,
h3.wp-block-heading {
  font-size: 1.75rem;
  margin-top: 2rem;
}

.article-content h4,
h4.wp-block-heading {
  font-size: 1.375rem;
  margin-top: 1.75rem;
}

.article-content h5,
h5.wp-block-heading {
  font-size: 1.15rem;
  margin-top: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.article-content h6,
h6.wp-block-heading {
  font-size: 1rem;
  margin-top: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dyi-primary);
}

/* Links inside article-content */
.article-content a:not(.btn):not(.wp-block-button__link) {
  color: var(--dyi-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--dyi-transition);
}

.article-content a:not(.btn):not(.wp-block-button__link):hover {
  color: var(--dyi-primary-hover);
  text-decoration: none;
}

/* Drop Cap Styling */
.wp-block-paragraph.has-drop-cap:not(:focus)::first-letter,
.article-content p.has-drop-cap:not(:focus)::first-letter {
  font-family: var(--dyi-font-heading);
  font-size: 3.8rem;
  line-height: 0.8;
  float: left;
  margin: 0.15em 0.2em 0 0;
  color: var(--dyi-primary);
  font-weight: 700;
}

/* Inline text elements */
mark, .has-inline-color {
  padding: 0.1em 0.3em;
  border-radius: 2px;
}

/* ==========================================================================
   3. Alignments & Content Breakouts
   ========================================================================== */
.wp-block-image.aligncenter,
.wp-block-gallery.aligncenter,
.wp-block-embed.aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.wp-block-image.alignleft,
.alignleft {
  float: left;
  margin-right: 1.75rem;
  margin-bottom: 1.5rem;
  max-width: 50%;
}

.wp-block-image.alignright,
.alignright {
  float: right;
  margin-left: 1.75rem;
  margin-bottom: 1.5rem;
  max-width: 50%;
}

@media (max-width: 767.98px) {
  .wp-block-image.alignleft,
  .wp-block-image.alignright,
  .alignleft,
  .alignright {
    float: none;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
}

/* Align Wide & Full */
.article-content .alignwide {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.article-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* ==========================================================================
   4. Gutenberg Core Blocks Styling
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons Block (.wp-block-buttons & .wp-block-button)
   -------------------------------------------------------------------------- */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.wp-block-buttons.is-content-justification-center {
  justify-content: center;
}

.wp-block-buttons.is-content-justification-right {
  justify-content: flex-end;
}

.wp-block-buttons.is-content-justification-space-between {
  justify-content: space-between;
}

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dyi-font-heading);
  font-size: 1rem;
  letter-spacing: 0.5px;
  padding: 12px 28px;
  border-radius: var(--dyi-radius-sm);
  background-color: var(--dyi-primary);
  color: #ffffff !important;
  text-decoration: none !important;
  border: 2px solid var(--dyi-primary);
  box-shadow: var(--dyi-shadow-sm);
  transition: var(--dyi-transition);
  cursor: pointer;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background-color: var(--dyi-primary-hover);
  border-color: var(--dyi-primary-hover);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: var(--dyi-shadow-md);
}

/* Outline Style Button */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
  background-color: transparent !important;
  color: var(--dyi-primary) !important;
  border: 2px solid var(--dyi-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
  background-color: var(--dyi-primary) !important;
  color: #ffffff !important;
}

/* Rounded Style Button */
.wp-block-button.is-style-rounded .wp-block-button__link {
  border-radius: 50px;
}

/* --------------------------------------------------------------------------
   Quote & Pullquote Blocks
   -------------------------------------------------------------------------- */
.wp-block-quote {
  position: relative;
  margin: 2rem 0;
  padding: 1.5rem 1.75rem 1.5rem 2rem;
  border-left: 4px solid var(--dyi-primary);
  background-color: var(--dyi-bg-light);
  border-radius: 0 var(--dyi-radius-md) var(--dyi-radius-md) 0;
}

.wp-block-quote p {
  font-family: var(--dyi-font-body);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.6;
  color: var(--dyi-text-dark);
  margin-bottom: 0.75rem;
}

.wp-block-quote cite,
.wp-block-quote footer {
  display: block;
  font-family: var(--dyi-font-heading);
  font-style: normal;
  font-size: 0.95rem;
  color: var(--dyi-primary);
  letter-spacing: 0.5px;
}

.wp-block-quote cite::before {
  content: "— ";
}

/* Pullquote Block */
.wp-block-pullquote {
  margin: 2.5rem 0;
  padding: 2rem 1.5rem;
  text-align: center;
  border-top: 3px solid var(--dyi-primary);
  border-bottom: 3px solid var(--dyi-primary);
  background-color: var(--dyi-bg-subtle);
  border-radius: var(--dyi-radius-sm);
}

.wp-block-pullquote p {
  font-family: var(--dyi-font-heading);
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--dyi-text-dark);
  margin-bottom: 1rem;
}

.wp-block-pullquote cite {
  font-family: var(--dyi-font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--dyi-text-muted);
}

/* --------------------------------------------------------------------------
   Lists Block (.wp-block-list)
   -------------------------------------------------------------------------- */
.article-content ul,
.article-content ol,
.wp-block-list {
  margin-top: 0;
  margin-bottom: 1.75rem;
  padding-left: 1.75rem;
}

.article-content ul li,
.article-content ol li,
.wp-block-list li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.article-content ul li::marker {
  color: var(--dyi-primary);
  font-size: 1.1em;
}

.article-content ol li::marker {
  color: var(--dyi-primary);
  font-family: var(--dyi-font-heading);
  font-weight: bold;
}

/* Nested lists */
.article-content ul ul,
.article-content ol ol,
.article-content ul ol,
.article-content ol ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   Image & Figcaption Blocks (.wp-block-image)
   -------------------------------------------------------------------------- */
/* Reset layout-breaking img overrides from theme main.css (excluding cover background images) */
.article-content .wp-block-image img,
.article-content .wp-block-gallery img,
.article-content .wp-block-columns img,
.article-content .wp-block-media-text img,
.article-content figure:not(.wp-block-cover) img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  z-index: auto !important;
}

.wp-block-image {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--dyi-radius-md);
  box-shadow: var(--dyi-shadow-sm);
  transition: var(--dyi-transition);
}

.wp-block-image figcaption {
  font-family: var(--dyi-font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--dyi-text-muted);
  text-align: center;
  margin-top: 0.6rem;
}

/* Rounded image style */
.wp-block-image.is-style-rounded img {
  border-radius: 50%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Gallery Block (.wp-block-gallery)
   -------------------------------------------------------------------------- */
.wp-block-gallery {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.25rem !important;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 0;
}

/* Gallery column widths */
.wp-block-gallery > .wp-block-image,
.wp-block-gallery.columns-2 > .wp-block-image {
  flex: 1 1 calc(50% - 0.65rem) !important;
  max-width: calc(50% - 0.65rem) !important;
  margin: 0 !important;
}

.wp-block-gallery.columns-1 > .wp-block-image {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.wp-block-gallery.columns-3 > .wp-block-image {
  flex: 1 1 calc(33.333% - 0.85rem) !important;
  max-width: calc(33.333% - 0.85rem) !important;
  margin: 0 !important;
}

.wp-block-gallery.columns-4 > .wp-block-image {
  flex: 1 1 calc(25% - 0.95rem) !important;
  max-width: calc(25% - 0.95rem) !important;
  margin: 0 !important;
}

.wp-block-gallery .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  border-radius: var(--dyi-radius-md);
  box-shadow: var(--dyi-shadow-sm);
  transition: var(--dyi-transition);
}

.wp-block-gallery .wp-block-image img:hover {
  transform: scale(1.015);
  box-shadow: var(--dyi-shadow-md);
}

@media (max-width: 575.98px) {
  .wp-block-gallery > .wp-block-image,
  .wp-block-gallery.columns-2 > .wp-block-image,
  .wp-block-gallery.columns-3 > .wp-block-image,
  .wp-block-gallery.columns-4 > .wp-block-image {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Columns Block (.wp-block-columns & .wp-block-column)
   -------------------------------------------------------------------------- */
.wp-block-columns {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1.75rem !important;
  margin-top: 2rem;
  margin-bottom: 2rem;
  align-items: stretch;
  width: 100%;
}

.wp-block-column {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  word-break: break-word;
}

.wp-block-column .wp-block-image {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.wp-block-column .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: cover;
  border-radius: var(--dyi-radius-md);
}

/* Specific column width inline styles from WordPress */
.wp-block-column[style*="flex-basis"] {
  flex-grow: 0 !important;
}

@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Media & Text Block (.wp-block-media-text)
   -------------------------------------------------------------------------- */
.wp-block-media-text {
  display: grid !important;
  grid-template-columns: 50% 1fr !important;
  gap: 2rem !important;
  align-items: center !important;
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
  background-color: var(--dyi-bg-light);
  padding: 1.5rem;
  border-radius: var(--dyi-radius-lg);
}

.wp-block-media-text.has-media-on-the-right {
  grid-template-columns: 1fr 50% !important;
}

.wp-block-media-text__media {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  height: 100%;
}

.wp-block-media-text__content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding: 0.5rem;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.wp-block-media-text__media img,
.wp-block-media-text__media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: var(--dyi-radius-md);
}

@media (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
  }
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media,
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Group & Cover Blocks
   -------------------------------------------------------------------------- */
.wp-block-group {
  padding: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-radius: var(--dyi-radius-md);
}

.wp-block-group.has-background {
  border-radius: var(--dyi-radius-lg);
}

/* Cover Block */
.wp-block-cover,
.wp-block-cover-image {
  position: relative !important;
  min-height: 380px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3rem 2rem !important;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  border-radius: var(--dyi-radius-lg);
  overflow: hidden !important;
  color: #ffffff;
  text-align: center;
  box-sizing: border-box;
}

.wp-block-cover img.wp-block-cover__image-background,
.wp-block-cover__image-background,
.wp-block-cover__video-background {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  z-index: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.wp-block-cover__background,
.wp-block-cover__gradient-background,
.wp-block-cover__overlay,
.has-background-dim {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

.wp-block-cover__inner-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 800px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.wp-block-cover:not(.is-light) .wp-block-cover__inner-container,
.wp-block-cover:not(.is-light) .wp-block-cover__inner-container p,
.wp-block-cover:not(.is-light) .wp-block-cover__inner-container h1,
.wp-block-cover:not(.is-light) .wp-block-cover__inner-container h2,
.wp-block-cover:not(.is-light) .wp-block-cover__inner-container h3,
.wp-block-cover:not(.is-light) .wp-block-cover__inner-container h4 {
  color: #ffffff !important;
}

.wp-block-cover.is-light .wp-block-cover__inner-container,
.wp-block-cover.is-light .wp-block-cover__inner-container p,
.wp-block-cover.is-light .wp-block-cover__inner-container h1,
.wp-block-cover.is-light .wp-block-cover__inner-container h2,
.wp-block-cover.is-light .wp-block-cover__inner-container h3,
.wp-block-cover.is-light .wp-block-cover__inner-container h4 {
  color: var(--dyi-text-dark) !important;
}

/* --------------------------------------------------------------------------
   Table Block (.wp-block-table)
   -------------------------------------------------------------------------- */
.wp-block-table {
  margin-top: 2rem;
  margin-bottom: 2.25rem;
  overflow-x: auto;
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
}

.wp-block-table th,
.wp-block-table td {
  padding: 14px 18px;
  border: 1px solid var(--dyi-border-color);
  text-align: left;
}

.wp-block-table th {
  background-color: var(--dyi-bg-light);
  font-family: var(--dyi-font-heading);
  font-weight: bold;
  color: var(--dyi-text-dark);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: var(--dyi-bg-subtle);
}

.wp-block-table figcaption {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--dyi-text-muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Separator & Spacer Blocks (.wp-block-separator, .wp-block-spacer)
   -------------------------------------------------------------------------- */
.wp-block-separator,
hr.wp-block-separator {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dyi-primary), transparent);
  margin: 2.5rem auto;
  width: 60%;
  opacity: 0.85;
}

.wp-block-separator.is-style-wide,
.wp-block-separator.is-style-dots {
  width: 100%;
}

.wp-block-separator.is-style-dots {
  background: none;
  height: auto;
  text-align: center;
}

.wp-block-separator.is-style-dots::before {
  content: "• • •";
  color: var(--dyi-primary);
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
}

/* --------------------------------------------------------------------------
   Accordion / Details Block (.wp-block-details)
   -------------------------------------------------------------------------- */
.wp-block-details {
  border: 1px solid var(--dyi-border-color);
  border-radius: var(--dyi-radius-md);
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  background-color: #ffffff;
  box-shadow: var(--dyi-shadow-sm);
  transition: var(--dyi-transition);
}

.wp-block-details summary {
  font-family: var(--dyi-font-heading);
  font-size: 1.2rem;
  color: var(--dyi-text-dark);
  cursor: pointer;
  padding: 0.25rem 0;
  outline: none;
}

.wp-block-details summary:hover {
  color: var(--dyi-primary);
}

.wp-block-details[open] summary {
  border-bottom: 1px solid var(--dyi-border-color);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   Search & File Blocks (.wp-block-search, .wp-block-file)
   -------------------------------------------------------------------------- */
.wp-block-search {
  margin: 1.75rem 0;
}

.wp-block-search__label {
  font-family: var(--dyi-font-heading);
  display: block;
  margin-bottom: 0.5rem;
}

.wp-block-search__input {
  padding: 10px 16px;
  border: 1px solid var(--dyi-border-color);
  border-radius: var(--dyi-radius-sm);
  font-family: var(--dyi-font-body);
  font-size: 1.05rem;
  background-color: var(--dyi-bg-light);
}

.wp-block-search__button {
  font-family: var(--dyi-font-heading);
  padding: 10px 22px;
  background-color: var(--dyi-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--dyi-radius-sm);
  cursor: pointer;
  transition: var(--dyi-transition);
}

.wp-block-search__button:hover {
  background-color: var(--dyi-primary-hover);
}

/* File Download Block */
.wp-block-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background-color: var(--dyi-bg-light);
  border: 1px solid var(--dyi-border-color);
  border-radius: var(--dyi-radius-md);
  margin: 1.5rem 0;
}

.wp-block-file a:not(.wp-block-file__button) {
  font-family: var(--dyi-font-heading);
  font-size: 1.1rem;
  color: var(--dyi-text-dark);
}

.wp-block-file__button {
  font-family: var(--dyi-font-heading);
  font-size: 0.9rem;
  padding: 8px 18px;
  background-color: var(--dyi-primary);
  color: #ffffff !important;
  border-radius: var(--dyi-radius-sm);
  text-decoration: none !important;
  transition: var(--dyi-transition);
}

.wp-block-file__button:hover {
  background-color: var(--dyi-primary-hover);
}

/* --------------------------------------------------------------------------
   Latest Posts, Categories & Widgets Blocks
   -------------------------------------------------------------------------- */
.wp-block-latest-posts,
.wp-block-categories,
.wp-block-archives {
  list-style: none;
  padding-left: 0;
  margin: 1.75rem 0;
}

.wp-block-latest-posts li,
.wp-block-categories li,
.wp-block-archives li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--dyi-border-color);
}

.wp-block-latest-posts li a,
.wp-block-categories li a,
.wp-block-archives li a {
  font-family: var(--dyi-font-heading);
  font-size: 1.1rem;
  color: var(--dyi-text-dark);
  text-decoration: none;
  transition: var(--dyi-transition);
}

.wp-block-latest-posts li a:hover,
.wp-block-categories li a:hover,
.wp-block-archives li a:hover {
  color: var(--dyi-primary);
  padding-left: 4px;
}

/* --------------------------------------------------------------------------
   Code, Preformatted & Verse Blocks
   -------------------------------------------------------------------------- */
.wp-block-code,
.wp-block-preformatted {
  font-family: SFMono-Regular, Consolas, Monaco, 'Courier New', monospace;
  font-size: 0.95rem;
  background-color: #1e293b;
  color: #f8fafc;
  padding: 1.25rem;
  border-radius: var(--dyi-radius-md);
  overflow-x: auto;
  margin: 1.75rem 0;
}

.wp-block-verse {
  font-family: var(--dyi-font-body);
  font-style: italic;
  font-size: 1.2rem;
  background-color: var(--dyi-bg-light);
  padding: 1.5rem;
  border-radius: var(--dyi-radius-md);
  border-left: 3px solid var(--dyi-primary);
  margin: 1.75rem 0;
}

/* --------------------------------------------------------------------------
   Embed, Video & Audio Blocks
   -------------------------------------------------------------------------- */
.wp-block-embed,
.wp-block-video {
  margin: 2rem 0;
  border-radius: var(--dyi-radius-md);
  overflow: hidden;
  box-shadow: var(--dyi-shadow-sm);
}

.wp-block-embed iframe,
.wp-block-video video {
  width: 100%;
  border-radius: var(--dyi-radius-md);
}

.wp-block-embed figcaption,
.wp-block-video figcaption {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--dyi-text-muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* ==========================================================================
   5. Background & Color Preset Utilities
   ========================================================================== */
.has-primary-color { color: var(--dyi-primary) !important; }
.has-primary-background-color { background-color: var(--dyi-primary) !important; }

.has-light-gray-background-color { background-color: var(--dyi-bg-light) !important; }
.has-white-background-color { background-color: #ffffff !important; }
.has-dark-background-color { background-color: var(--dyi-text-dark) !important; color: #ffffff !important; }

.has-small-font-size { font-size: 0.9rem !important; }
.has-normal-font-size { font-size: 1.15rem !important; }
.has-medium-font-size { font-size: 1.35rem !important; }
.has-large-font-size { font-size: 1.75rem !important; }
.has-huge-font-size { font-size: 2.25rem !important; }

/* ==========================================================================
   6. Screen Reader Text & Social Links Block
   ========================================================================== */
.screen-reader-text,
.screen-reader-text span,
.wp-block-social-links:not(.has-visible-labels) .wp-block-social-link-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.wp-block-social-links {
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin: 1.5rem 0 !important;
  gap: 0.75rem !important;
  align-items: center !important;
}

.wp-block-social-link {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
}

.wp-block-social-link a,
.wp-block-social-link-anchor {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
  border-radius: 50% !important;
  color: var(--dyi-primary) !important;
  background-color: var(--dyi-bg-light) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: var(--dyi-transition) !important;
}

.wp-block-social-link a:hover,
.wp-block-social-link-anchor:hover {
  background-color: var(--dyi-primary) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.wp-block-social-link svg,
.wp-block-social-link-icon {
  width: 1.25em !important;
  height: 1.25em !important;
  fill: currentColor !important;
  display: block !important;
}

.wp-block-social-links.has-visible-labels .wp-block-social-link a {
  border-radius: var(--dyi-radius-sm) !important;
  padding: 0.5rem 1rem !important;
  gap: 0.5rem !important;
}

.wp-block-social-links.has-visible-labels .wp-block-social-link-label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  white-space: normal !important;
  font-family: var(--dyi-font-heading);
  font-size: 0.95rem;
}
