/*
 * Gutenberg Rich Content Styles
 * Full fidelity rendering of WordPress Gutenberg blocks
 * Covers: prose container, all heading levels, paragraphs, lists,
 *         blockquotes, separators/dividers, images, galleries,
 *         columns, tables, code, and all wp-block-* classes.
 */

/* ============================================================
   CSS Variables (match project palette)
   ============================================================ */
:root {
  --gb-color-primary:   #3e573e;
  --gb-color-secondary: #4d614d;
  --gb-color-gray-main: #8a9485;
  --gb-color-gray-light:#cfd0d2;
  --gb-color-bg:        #f9faf9;
  --gb-font-heading:    "Marcellus", serif;
  --gb-font-body:       "Inter", ui-sans-serif, system-ui, sans-serif;
  --gb-prose-width:     65ch;
  --gb-radius:          0.5rem;
}

/* ============================================================
   PROSE CONTAINER — base reset + spacing
   ============================================================ */
.prose {
  font-family:    var(--gb-font-body);
  font-size:      1.0625rem;       /* ~17px */
  line-height:    1.75;
  color:          #374151;         /* gray-700 */
  max-width:      100%;
  word-break:     break-word;
  overflow-wrap:  break-word;
}

/* ============================================================
   HEADINGS
   ============================================================ */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family:  var(--gb-font-heading);
  color:        var(--gb-color-primary);
  line-height:  1.25;
  margin-top:   2em;
  margin-bottom:.75em;
  font-weight:  400; /* Marcellus is naturally bold */
}

.prose h1 { font-size: 2.25rem;  margin-top: 0; }
.prose h2 { font-size: 1.75rem;  padding-bottom: 0.4em; border-bottom: 2px solid var(--gb-color-gray-light); }
.prose h3 { font-size: 1.375rem; }
.prose h4 { font-size: 1.125rem; color: var(--gb-color-secondary); }
.prose h5 { font-size: 1rem;     color: var(--gb-color-secondary); text-transform: uppercase; letter-spacing: 0.08em; }
.prose h6 { font-size: 0.875rem; color: var(--gb-color-gray-main); text-transform: uppercase; letter-spacing: 0.08em; }

/* First heading after another heading — tighten gap */
.prose h1 + h2,
.prose h2 + h3,
.prose h3 + h4,
.prose h4 + h5 {
  margin-top: 1em;
}

/* ============================================================
   PARAGRAPHS
   ============================================================ */
.prose p {
  margin-top:    0;
  margin-bottom: 1.4em;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* Drop-cap (Gutenberg has-drop-cap) */
.prose p.has-drop-cap:first-letter {
  float:         left;
  font-family:   var(--gb-font-heading);
  font-size:     4.5em;
  line-height:   0.75;
  margin-right:  0.15em;
  margin-top:    0.1em;
  color:         var(--gb-color-primary);
}

/* ============================================================
   INLINE TEXT FORMATTING
   ============================================================ */
.prose strong, .prose b { font-weight: 700; color: #1f2937; }
.prose em, .prose i      { font-style: italic; }
.prose u                 { text-decoration-color: var(--gb-color-primary); }
.prose s                 { text-decoration-line: line-through; color: var(--gb-color-gray-main); }
.prose mark              { background: #fef9c3; color: #713f12; padding: 0.1em 0.25em; border-radius: 0.2em; }
.prose abbr[title]       { text-decoration: underline dotted; cursor: help; }
.prose sub               { font-size: 75%; vertical-align: sub; }
.prose sup               { font-size: 75%; vertical-align: super; }

.prose a {
  color:           var(--gb-color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition:      color 0.2s, text-decoration-color 0.2s;
}
.prose a:hover {
  color:           var(--gb-color-secondary);
  text-decoration-color: var(--gb-color-secondary);
}

/* ============================================================
   UNORDERED LISTS
   ============================================================ */
.prose ul {
  margin:      1.25em 0;
  padding-left: 1.625em;
  list-style:  disc;
}

.prose ul ul  { list-style: circle; margin: 0.5em 0; }
.prose ul ul ul { list-style: square; }

.prose li {
  margin:      0.4em 0;
  padding-left: 0.375em;
  line-height: 1.7;
}

/* ============================================================
   ORDERED LISTS
   ============================================================ */
.prose ol {
  margin:       1.25em 0;
  padding-left: 1.625em;
  list-style:   decimal;
}

.prose ol ol  { list-style: lower-alpha; margin: 0.5em 0; }
.prose ol ol ol { list-style: lower-roman; }

/* ============================================================
   DESCRIPTION LISTS
   ============================================================ */
.prose dl { margin: 1.25em 0; }
.prose dt {
  font-weight: 700;
  color:       var(--gb-color-secondary);
  margin-top:  0.75em;
}
.prose dd {
  margin-left: 1.5em;
  color:       #4b5563;
}

/* ============================================================
   BLOCKQUOTES
   ============================================================ */
.prose blockquote {
  position:     relative;
  margin:       2em 0;
  padding:      1.5em 1.75em 1.5em 4rem;
  background:   #f0f4f0;
  border-left:  5px solid var(--gb-color-primary);
  border-radius: 0 var(--gb-radius) var(--gb-radius) 0;
  font-style:   italic;
  color:        var(--gb-color-secondary);
}

.prose blockquote::before {
  content:     "\201C";
  position:    absolute;
  left:        1rem;
  top:         0.5rem;
  font-family: var(--gb-font-heading);
  font-size:   4rem;
  line-height: 1;
  color:       var(--gb-color-primary);
  opacity:     0.35;
}

.prose blockquote p {
  margin-bottom: 0;
  font-size:     1.05em;
  line-height:   1.6;
}

.prose blockquote cite {
  display:    block;
  margin-top: 0.75em;
  font-size:  0.875em;
  font-style: normal;
  font-weight: 600;
  color:      var(--gb-color-primary);
}

/* Gutenberg "large" and "regular" quote variations */
.prose .wp-block-quote.is-style-large {
  padding:     2em 2.5em 2em 5rem;
  font-size:   1.2em;
}

.prose .wp-block-quote.is-style-plain {
  border:      none;
  padding:     0;
  background:  transparent;
  font-style:  italic;
  font-size:   1.1em;
}

/* Pull Quote block */
.prose .wp-block-pullquote {
  border-top:    4px solid var(--gb-color-primary);
  border-bottom: 4px solid var(--gb-color-primary);
  padding:       2em 1.5em;
  text-align:    center;
  margin:        2.5em 0;
  background:    transparent;
}

.prose .wp-block-pullquote blockquote {
  background:   transparent;
  border:       none;
  padding:      0;
  font-size:    1.35em;
  color:        var(--gb-color-primary);
}

.prose .wp-block-pullquote blockquote::before { display: none; }
.prose .wp-block-pullquote cite {
  font-size:    0.8em;
  color:        var(--gb-color-gray-main);
}

/* ============================================================
   HORIZONTAL RULES / SEPARATORS
   ============================================================ */
.prose hr,
.prose .wp-block-separator {
  border:         none;
  height:         2px;
  background:     linear-gradient(
                    90deg,
                    transparent 0%,
                    var(--gb-color-gray-light) 20%,
                    var(--gb-color-gray-light) 80%,
                    transparent 100%
                  );
  margin:         3em auto;
  max-width:      80%;
}

/* Separator variations */
.prose .wp-block-separator.is-style-wide {
  max-width: 100%;
}

.prose .wp-block-separator.is-style-dots {
  height:     auto;
  background: transparent;
  border:     none;
  text-align: center;
  font-size:  1.5em;
  letter-spacing: 0.5em;
  color:      var(--gb-color-gray-light);
}
.prose .wp-block-separator.is-style-dots::before {
  content: "···";
}

/* ============================================================
   IMAGES & FIGURES
   ============================================================ */
.prose img {
  max-width:     100%;
  height:        auto;
  border-radius: var(--gb-radius);
  display:       block;
}

.prose figure {
  margin:  1.75em 0;
  display: block;
}

.prose figure img { margin: 0 auto; }

.prose figcaption {
  margin-top:  0.6em;
  font-size:   0.85em;
  color:       var(--gb-color-gray-main);
  text-align:  center;
  font-style:  italic;
}

/* Image alignment */
.prose .alignleft  { float: left;  margin: 0 1.5em 1em 0; max-width: 50%; }
.prose .alignright { float: right; margin: 0 0 1em 1.5em; max-width: 50%; }
.prose .aligncenter,
.prose .alignfull   { display: block; margin-left: auto; margin-right: auto; }
.prose .alignfull   { max-width: none; width: 100%; }
.prose .alignwide   { max-width: none; width: 100%; }

/* ============================================================
   WP IMAGE BLOCK
   ============================================================ */
.prose .wp-block-image {
  margin:   1.75em 0;
  position: relative;
}

.prose .wp-block-image img {
  width:  100%;
  height: auto;
}

.prose .wp-block-image figcaption { color: var(--gb-color-gray-main); }

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

/* ============================================================
   GALLERY BLOCK
   ============================================================ */
.prose .wp-block-gallery {
  display: grid;
  gap:     0.75rem;
  margin:  1.75em 0;
}

/* Auto-detect columns via Gutenberg classes */
.prose .wp-block-gallery.columns-1 { grid-template-columns: 1fr; }
.prose .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.prose .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.prose .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.prose .wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }

.prose .wp-block-gallery .blocks-gallery-item {
  margin:   0;
  overflow: hidden;
  border-radius: var(--gb-radius);
}

.prose .wp-block-gallery .blocks-gallery-item img {
  width:   100%;
  height:  100%;
  object-fit: cover;
  border-radius: 0;
}

@media (max-width: 640px) {
  .prose .wp-block-gallery.columns-3,
  .prose .wp-block-gallery.columns-4,
  .prose .wp-block-gallery.columns-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   COLUMNS BLOCK
   ============================================================ */
.prose .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap:     1.5rem;
  margin:  1.75em 0;
  align-items: flex-start;
}

.prose .wp-block-column {
  flex:     1 1 0;
  min-width: 0;
}

@media (max-width: 600px) {
  .prose .wp-block-columns { flex-direction: column; }
  .prose .wp-block-column  { min-width: 100%; }
}

/* ============================================================
   GROUP & COVER BLOCKS
   ============================================================ */
.prose .wp-block-group {
  margin:  1.75em 0;
  padding: 1.5em;
  background: var(--gb-color-bg);
  border-radius: var(--gb-radius);
}

.prose .wp-block-cover {
  position: relative;
  overflow: hidden;
  border-radius: var(--gb-radius);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.75em 0;
  color: #fff;
}

.prose .wp-block-cover .wp-block-cover__inner-container { position: relative; z-index: 1; text-align: center; }
.prose .wp-block-cover .wp-block-cover__background {
  position: absolute; inset: 0;
  background-color: rgba(0,0,0,0.5);
}

/* ============================================================
   BUTTON BLOCK
   ============================================================ */
.prose .wp-block-buttons {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.75rem;
  margin:     1.5em 0;
}

.prose .wp-block-button__link {
  display:          inline-block;
  background:       var(--gb-color-primary);
  color:            #fff;
  padding:          0.6em 1.5em;
  border-radius:    9999px;
  font-weight:      600;
  font-size:        0.9em;
  text-decoration:  none;
  transition:       background 0.2s;
}

.prose .wp-block-button__link:hover {
  background: var(--gb-color-secondary);
  color:      #fff;
}

.prose .wp-block-button.is-style-outline .wp-block-button__link {
  background:   transparent;
  border:       2px solid var(--gb-color-primary);
  color:        var(--gb-color-primary);
}

/* ============================================================
   TABLE BLOCK
   ============================================================ */
.prose table,
.prose .wp-block-table table {
  width:           100%;
  border-collapse: collapse;
  margin:          1.75em 0;
  font-size:       0.9375em;
}

.prose th,
.prose .wp-block-table th {
  background:    #f0f4f0;
  color:         var(--gb-color-primary);
  font-weight:   700;
  padding:       0.7em 1em;
  border:        1px solid var(--gb-color-gray-light);
  text-align:    left;
  font-family:   var(--gb-font-heading);
}

.prose td,
.prose .wp-block-table td {
  padding:   0.65em 1em;
  border:    1px solid var(--gb-color-gray-light);
  vertical-align: top;
}

.prose tr:nth-child(even) td {
  background: #f9faf9;
}

.prose .wp-block-table.is-style-stripes tr:nth-child(odd) td {
  background: #f0f4f0;
}

/* ============================================================
   CODE & PRE
   ============================================================ */
.prose code,
.prose kbd {
  font-family:      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:        0.875em;
  background:       #f0f4f0;
  color:            #1e3a1e;
  padding:          0.15em 0.4em;
  border-radius:    0.3em;
  border:           1px solid var(--gb-color-gray-light);
}

.prose pre,
.prose .wp-block-code {
  font-family:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:      0.875em;
  background:     #1a2e1a;
  color:          #d4f0d4;
  padding:        1.5em;
  border-radius:  var(--gb-radius);
  overflow-x:     auto;
  line-height:    1.6;
  margin:         1.75em 0;
  white-space:    pre;
}

.prose pre code {
  background:    transparent;
  color:         inherit;
  padding:       0;
  border:        none;
  border-radius: 0;
  font-size:     1em;
}

/* ============================================================
   VERSE BLOCK (poetry)
   ============================================================ */
.prose .wp-block-verse {
  font-family:   var(--gb-font-body);
  font-style:    italic;
  font-size:     1.05em;
  color:         var(--gb-color-secondary);
  background:    #f0f4f0;
  border-left:   4px solid var(--gb-color-primary);
  padding:       1.25em 1.5em;
  border-radius: 0 var(--gb-radius) var(--gb-radius) 0;
  white-space:   pre-wrap;
  margin:        1.75em 0;
}

/* ============================================================
   MEDIA & TEXT BLOCK
   ============================================================ */
.prose .wp-block-media-text {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  gap:            2rem;
  align-items:    center;
  margin:         1.75em 0;
}

.prose .wp-block-media-text.has-media-on-the-right {
  direction: rtl;
}
.prose .wp-block-media-text.has-media-on-the-right > * {
  direction: ltr;
}

.prose .wp-block-media-text__media img {
  width:  100%;
  height: auto;
  border-radius: var(--gb-radius);
}

@media (max-width: 600px) {
  .prose .wp-block-media-text {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   EMBED BLOCKS (video, audio, etc.)
   ============================================================ */
.prose .wp-block-embed {
  margin:  1.75em 0;
}

.prose .wp-block-embed__wrapper {
  position:      relative;
  padding-bottom: 56.25%; /* 16:9 */
  height:        0;
  overflow:      hidden;
  border-radius: var(--gb-radius);
}

.prose .wp-block-embed__wrapper iframe,
.prose .wp-block-embed__wrapper embed,
.prose .wp-block-embed__wrapper object {
  position: absolute;
  top:      0;
  left:     0;
  width:    100%;
  height:   100%;
}

/* Audio block */
.prose .wp-block-audio audio {
  width:   100%;
  margin:  1em 0;
}

/* ============================================================
   FILE BLOCK
   ============================================================ */
.prose .wp-block-file {
  display:          flex;
  align-items:      center;
  gap:              1rem;
  padding:          1rem 1.25rem;
  background:       #f0f4f0;
  border-radius:    var(--gb-radius);
  border:           1px solid var(--gb-color-gray-light);
  margin:           1.5em 0;
}

.prose .wp-block-file__button {
  background:      var(--gb-color-primary);
  color:           #fff;
  padding:         0.4em 1em;
  border-radius:   9999px;
  font-size:       0.85em;
  font-weight:     600;
  text-decoration: none;
  white-space:     nowrap;
}

/* ============================================================
   NOTICE / CALLOUT BLOCKS
   ============================================================ */
.prose .wp-block-notice,
.prose .notice {
  padding:       1.25em 1.5em 1.25em 4em;
  border-left:   4px solid var(--gb-color-primary);
  background:    #f0f4f0;
  border-radius: 0 var(--gb-radius) var(--gb-radius) 0;
  position:      relative;
  margin:        1.75em 0;
}

/* ============================================================
   TAG CLOUD & CATEGORIES
   ============================================================ */
.prose .wp-block-tag-cloud a,
.prose .wp-block-categories a {
  display:          inline-block;
  background:       var(--gb-color-bg);
  border:           1px solid var(--gb-color-gray-light);
  color:            var(--gb-color-primary);
  padding:          0.25em 0.75em;
  border-radius:    9999px;
  font-size:        0.85em;
  margin:           0.25em;
  text-decoration:  none;
  transition:       background 0.2s;
}

.prose .wp-block-tag-cloud a:hover,
.prose .wp-block-categories a:hover {
  background: var(--gb-color-primary);
  color:      #fff;
  border-color: var(--gb-color-primary);
}

/* ============================================================
   SPACER BLOCK
   ============================================================ */
.prose .wp-block-spacer { display: block; }

/* ============================================================
   SOCIAL LINKS
   ============================================================ */
.prose .wp-block-social-links {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
  margin:    1.5em 0;
  padding:   0;
  list-style: none;
}

.prose .wp-block-social-links .wp-social-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           2.25rem;
  height:          2.25rem;
  border-radius:   50%;
  background:      var(--gb-color-primary);
  color:           #fff;
  transition:      background 0.2s;
}

.prose .wp-block-social-links .wp-social-link:hover {
  background: var(--gb-color-secondary);
}

/* ============================================================
   TEXT ALIGNMENT UTILITIES (Gutenberg)
   ============================================================ */
.prose .has-text-align-left   { text-align: left; }
.prose .has-text-align-center { text-align: center; }
.prose .has-text-align-right  { text-align: right; }

/* ============================================================
   FONT SIZE UTILITIES (Gutenberg presets)
   ============================================================ */
.prose .has-small-font-size   { font-size: 0.8125em; }
.prose .has-medium-font-size  { font-size: 1em; }
.prose .has-large-font-size   { font-size: 1.25em; }
.prose .has-x-large-font-size { font-size: 1.5em; }
.prose .has-huge-font-size    { font-size: 1.875em; }

/* ============================================================
   GUTENBERG BACKGROUND COLOR UTILITIES
   ============================================================ */
.prose .has-background {
  padding:       1.25em 1.5em;
  border-radius: var(--gb-radius);
  margin:        1.5em 0;
}

/* ============================================================
   CLEARFIX — for floated images
   ============================================================ */
.prose::after {
  content: "";
  display: table;
  clear:   both;
}

.prose p::after {
  content: "";
  display: table;
  clear:   both;
}

/* ============================================================
   FIRST CHILD RESET (no top margin on first element)
   ============================================================ */
.prose > *:first-child { margin-top: 0 !important; }
.prose > *:last-child  { margin-bottom: 0 !important; }

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 640px) {
  .prose h1 { font-size: 1.75rem; }
  .prose h2 { font-size: 1.4rem; }
  .prose h3 { font-size: 1.2rem; }
  .prose h4 { font-size: 1rem; }

  .prose blockquote { padding: 1.25em 1.25em 1.25em 3rem; }
  .prose blockquote::before { font-size: 3rem; }

  .prose .alignleft,
  .prose .alignright {
    float:     none;
    max-width: 100%;
    margin:    1em 0;
  }
}