/* =============================================
   DESKTOP VARIABLES
   ============================================= */
:root {
  /* Layout */
  --content-width: 700px;
  --content-margin: 15px;

  /* Spacing */
  --spacing-sm: 15px;
  --spacing-lg: 45px;

  /* Font sizes */
  --font-h2: 3.2rem;
  --font-h3: 2.8rem;
  --font-h4: 2.4rem;
  --font-p:  1.7rem;

  /* Colors */
  --color-link:       #000;
  --color-link-hover: #e60026;
  --color-btn-bg:     #000;
  --color-btn-text:   #fff;
}

/* =============================================
   MOBILE VARIABLES (max-width: 478px)
   ============================================= */
@media (max-width: 478px) {
  :root {
    /* Layout */
    --content-width:  90%;
    --content-margin: 20px;

    /* Font sizes */
    --font-h2: 2.8rem;
    --font-h3: 2.4rem;
    --font-h4: 2.2rem;
    --font-p:  1.6rem;
  }
}

/* =============================================
   LAYOUT
   ============================================= */
.brxe-post-content h2,
.brxe-post-content h3,
.brxe-post-content h4,
.brxe-post-content p,
.brxe-post-content ul,
.brxe-post-content ol,
.brxe-post-content .wp-block-buttons {
  width: var(--content-width);
  max-width: 100%;
  margin: var(--content-margin) auto;
}

/* =============================================
   HEADINGS
   ============================================= */
.brxe-post-content h2 { font-size: var(--font-h2); margin-top: var(--spacing-lg) !important; }
.brxe-post-content h3 { font-size: var(--font-h3); margin-top: var(--spacing-lg) !important; }
.brxe-post-content h4 { font-size: var(--font-h4); margin-top: var(--spacing-lg) !important; }
.brxe-post-content p  { font-size: var(--font-p); }

/* =============================================
   LINKS
   ============================================= */
.brxe-post-content a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-link);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s ease;
}
.brxe-post-content a:hover {
  text-decoration-color: var(--color-link-hover);
}

/* =============================================
   IMAGES & FIGURES
   ============================================= */
.brxe-post-content figure:not(.wp-block-gallery figure):not(.wp-block-embed),
figure.wp-block-image,
figure.aligncenter.size-full.is-resized,
.wp-block-image figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--spacing-lg) auto !important;
}
.wp-block-image.alignright.size-full {
  margin-top: -15px !important;
  margin-bottom: -5px !important;
}
.wp-block-image:not(.wp-block-columns .wp-block-image) img {
  object-fit: cover;
}

/* Image captions */
:where(.brxe-image) .bricks-image-caption,
.brxe-post-content .wp-element-caption {
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: -2px !important;
}

/* =============================================
   GALLERY
   ============================================= */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  width: 100% !important;
}

/* =============================================
   EMBEDS (YouTube, Instagram, Twitter)
   ============================================= */
.wp-block-embed__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.brxe-post-content .instagram-media {
  display: block !important;
  margin: 35px auto !important;
}
.wp-block-embed__wrapper .twitter-tweet {
  margin: 0 !important;
}

/* =============================================
   BUTTONS
   ============================================= */
.brxe-post-content .wp-block-buttons {
  margin-bottom: var(--spacing-lg);
}
.brxe-post-content .wp-block-buttons a {
  text-decoration: none !important;
}
a.wp-block-button__link.has-white-color.has-black-background-color.wp-element-button {
  border: 1px solid var(--color-btn-bg);
  text-transform: uppercase !important;
  transition: color 0.3s ease, background 0.3s ease;
}
a.wp-block-button__link.has-white-color.has-black-background-color.wp-element-button:hover {
  background-color: var(--color-btn-text) !important;
  color: var(--color-btn-bg) !important;
}

/* =============================================
   SIDE BY SIDE IMAGES - Tablet (max-width: 980px)
   ============================================= */
@media (max-width: 980px) {
  :where(.wp-block-columns.is-layout-flex) { gap: 0 !important; }
  .wp-block-column.is-layout-flow {
    margin-top: -15px !important;
    margin-bottom: -15px !important;
  }
}
.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-9d6595d7 {
  margin-bottom: -15px !important;
}