/**
 * Gutenberg Bootstrap CSS
 * This file provides styles for Gutenberg blocks to ensure compatibility with Bootstrap's design system.
 * It includes styles for common blocks like paragraphs, headings, images, and more.
 */

/* Ensure each block clears floated images above it */
.post-content > * {
  clear: both;
  margin-bottom: 1.5rem; /* or whatever spacing you want */
}

/**
 * Image block styles
 */

/* Base image block styling */
.wp-block-image {
  margin-bottom: 1.5rem;
  display: block;
}

/* Responsive images */
.wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0.25rem !important;
}

/* Captions */
.wp-block-image figcaption {
  font-size: 0.95em;
  color: #6c757d; /* Bootstrap's $gray-600 */
  text-align: center;
  margin-top: 0.5rem;
}

/* Alignment: Center */
.wp-block-image.aligncenter,
.wp-block-image .aligncenter {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

/* Alignment: Left */
.wp-block-image.alignleft,
.wp-block-image .alignleft {
  float: left;
  margin-right: 1.5rem;
  margin-left: 0;
  margin-bottom: 1rem;
  clear: none;
}

/* Alignment: Right */
.wp-block-image.alignright,
.wp-block-image .alignright {
  float: right;
  margin-left: 1.5rem;
  margin-right: 0;
  margin-bottom: 1rem;
  clear: none;
}

/* No alignment */
.wp-block-image.alignnone,
.wp-block-image .alignnone {
  display: block;
  margin: 0 auto 1.5rem auto;
  float: none;
}

/* Wide/Full width */
.wp-block-image.alignwide {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 1140px; /* Adjust to match your container size */
}

.wp-block-image.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: block;
}

/* Remove floats for wide/full */
.wp-block-image.alignwide,
.wp-block-image.alignfull {
  float: none !important;
}

/* Responsive: Don't let floated images overflow container on small screens */
@media (max-width: 576px) {
  .wp-block-image.alignleft,
  .wp-block-image.alignright {
    float: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/**
 * Paragraph block styles
 */

.prost-content > p {
  font-size: 1.125rem;        /* Comfortable reading size (18px if root is 16px) */
  line-height: 1.7;           /* Good vertical rhythm for body text */
  color: #222;                /* Or use your theme's text color */
  margin-bottom: 1.5rem;      /* Consistent block spacing */
  margin-top: 0;              /* Remove any top margin for first/stacked paragraphs */
  word-break: break-word;     /* Prevents overflow on long URLs/strings */
  max-width: 65ch;            /* Optional: limit line length for readability */
}

.prost-content > p:last-child {
  margin-bottom: 0;           /* No extra gap after the last paragraph */
}

/* Optional: Responsive tweak for smaller screens */
@media (max-width: 600px) {
  .prost-content > p {
    font-size: 1rem;
    max-width: 100%;
  }
}

/**
 * Text block styles
 */

 /* Gutenberg heading alignment classes */
.has-text-align-center {
  text-align: center !important;
}
.has-text-align-right {
  text-align: right !important;
}
.has-text-align-left {
  text-align: left !important;
}

/**
 * Table block styles
 */

/* Center table block */
.post-content .wp-block-table.aligncenter {
  margin-left: auto;
  margin-right: auto;
  display: table;
}

/* Left align table block */
.post-content .wp-block-table.alignleft {
  margin-right: auto;
  margin-left: 0;
  display: table;
  float: left;
}

/* Right align table block */
.post-content .wp-block-table.alignright {
  margin-left: auto;
  margin-right: 0;
  display: table;
  float: right;
}

/* Remove float on small screens for responsive stacking */
@media (max-width: 600px) {
  .post-content .wp-block-table.alignleft,
  .post-content .wp-block-table.alignright {
    float: none;
    margin-left: auto;
    margin-right: auto;
    display: table;
  }
}

.post-content .wp-block-table table {
  border-collapse: collapse;
  width: 100%; /* or auto, for natural width */
}

.post-content .wp-block-table th,
.post-content .wp-block-table td {
  border: 1px solid #ccc;
  padding: 0.5em 0.75em;
}

.post-content .wp-block-table th {
  background: #f8f9fa; /* Light gray header */
  font-weight: bold;
}

/**
 * Other block styles
 */

/* Media & Text block layout */
.wp-block-media-text {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2rem;
}

.wp-block-media-text__media,
.wp-block-media-text__content {
  flex: 1 1 50%;
  min-width: 0;
}

.wp-block-media-text__media img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive: Stack on mobile */
@media (max-width: 800px) {
  .wp-block-media-text {
    flex-direction: column !important;
    gap: 1.5rem;
  }
  .wp-block-media-text__media,
  .wp-block-media-text__content {
    flex-basis: auto;
    width: 100%;
  }
}

/* Columns block */
.post-content .wp-block-columns {
  display: flex !important;
  gap: 2rem;
}
.post-content .wp-block-column {
  flex: 1 1 0% !important;
  min-width: 0;
}

/* Responsive stacking */
@media (max-width: 600px) {
  .post-content .wp-block-media-text.is-stacked-on-mobile,
  .post-content .wp-block-columns {
    flex-direction: column !important;
  }
}

/* Add spacing between button blocks */
.wp-block-buttons {
  margin-bottom: 1.5rem;
}

/* Make sure each button has padding and is inline-block */
.wp-block-button__link {
  display: inline-block;
  padding: 0.5em 1.5em;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  margin: 0.25em 0.25em 0.25em 0;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.2s, color 0.2s;
}
/* Default button color (like TwentyTwentyFive) */
.wp-block-button__link {
  background-color: #0d6efd; /* Bootstrap primary */
  color: #fff !important;    /* White text */
}

/* For outlined/secondary buttons, you can add: */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #0d6efd !important;
  border: 2px solid #0d6efd;
}

/* Youtube embed */
.wp-block-embed,
.wp-block-embed-youtube {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.wp-block-embed.alignleft,
.wp-block-embed-youtube.alignleft {
  float: left;
  margin-left: 0 !important;
  margin-right: 1.5em !important;
  width: 40%;
  max-width: 400px;
}

.wp-block-embed.alignright,
.wp-block-embed-youtube.alignright {
  float: right;
  margin-right: 0 !important;
  margin-left: 1.5em !important;
  width: 40%;
  max-width: 400px;
}

.wp-block-embed.aligncenter,
.wp-block-embed-youtube.aligncenter {
  margin-left: auto !important;
  margin-right: auto !important;
  float: none;
  width: 60%;
  max-width: 800px;
}

.wp-block-embed.alignwide,
.wp-block-embed-youtube.alignwide {
  width: 1200px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

.wp-block-embed.alignfull,
.wp-block-embed-youtube.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  float: none;
  border-radius: 0;
}

@media (max-width: 600px) {
  .wp-block-embed.alignleft,
  .wp-block-embed.alignright,
  .wp-block-embed.aligncenter,
  .wp-block-embed.alignwide,
  .wp-block-embed.alignfull,
  .wp-block-embed-youtube.alignleft,
  .wp-block-embed-youtube.alignright,
  .wp-block-embed-youtube.aligncenter,
  .wp-block-embed-youtube.alignwide,
  .wp-block-embed-youtube.alignfull {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Responsive YouTube video */
.wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: 0.25rem !important;
}
.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper embed,
.wp-block-embed__wrapper object {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.post-content ul,
.post-content ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

.post-content blockquote {
  border-left: 4px solid #0d6efd;
  margin: 1.5rem 0;
  padding-left: 1.5rem;
  color: #555;
  font-style: italic;
  background: #f8f9fa;
}

.post-content pre,
.post-content code {
  font-family: 'Fira Mono', 'Consolas', 'Monaco', monospace;
  background: #f5f5f5;
  border-radius: 4px;
}

.post-content pre {
  padding: 1em;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.post-content code {
  padding: 0.2em 0.4em;
}

.post-content > * + * {
  margin-top: 1.5rem;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background-color: #084298;
  color: #fff !important;
  text-decoration: none;
}

/* Gutenberg Gallery Block: Responsive grid layout */
.wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* adjust as needed */
}

.wp-block-gallery .wp-block-image {
  margin: 0;
  flex: 1 1 calc(33.333% - 16px); /* 3 columns */
  box-sizing: border-box;
}

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

.wp-block-gallery.is-cropped .wp-block-image {
  aspect-ratio: 1 / 1; /* square images — change to 4/3, 16/9 etc if needed */
  overflow: hidden;
}

.wp-block-gallery.is-cropped .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}