/*
 * Mobile responsiveness fixes.
 * Loaded after assets/index-DEbgyuDH.css so it can correct the compiled bundle
 * without rebuilding it.
 */

:root {
  /* Height of the fixed navbar when it wraps to two rows (<=768px). */
  --navbar-height-mobile: 132px;
}

/* ---------------------------------------------------------------------------
 * 1. Vertical page padding under the fixed navbar
 * The bundle ends with `@media (max-width:768px){.container{padding:0 1.25rem}}`
 * which is a shorthand, so it also resets the padding-top that page wrappers
 * rely on to clear the fixed navbar. Restore the horizontal-only intent and
 * give each wrapper an offset large enough for the two-row mobile navbar.
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .container {
    padding: 0 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .contact-main.container {
    padding-top: calc(var(--navbar-height-mobile) + 1.5rem);
    padding-bottom: 3rem;
    align-items: flex-start;
    min-height: auto;
  }

  /* The article wrapper carries an inline padding-top:120px from the server
     render, which is shorter than the mobile navbar. */
  .blog-article.container {
    padding-top: calc(var(--navbar-height-mobile) + 1.5rem) !important;
    padding-bottom: 3rem;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Horizontal overflow inside article content
 * Core block styles are dequeued, so WordPress oEmbed markup keeps the raw
 * iframe width="560" and pushes the page wider than the viewport.
 * ------------------------------------------------------------------------ */
.article-content .wp-block-embed,
.article-content figure,
.article-content .wp-block-embed__wrapper {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.article-content .wp-block-embed.is-type-video .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.article-content .wp-block-embed.is-type-video .wp-block-embed__wrapper > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.article-content iframe,
.article-content video,
.article-content img {
  max-width: 100%;
}

.article-content pre,
.article-content code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* WordPress wraps tables in <figure class="wp-block-table">; make that figure the
   scroll container so the columns keep their natural width. */
.article-content figure.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-content figure.wp-block-table > table {
  display: table;
  width: 100%;
  max-width: none;
  min-width: 520px;
}

/* Bare tables keep the bundle's own block/scroll behaviour. */
.article-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-content {
  overflow-wrap: anywhere;
}

/* The full-bleed CTA is sized from 100vw, which ignores the scrollbar and
   overflows narrow screens. Keep it inside the content column on mobile. */
@media (max-width: 768px) {
  .article-cta {
    width: 100%;
    left: auto;
    transform: none;
    padding: 2rem 1.25rem;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Belt-and-braces: nothing may widen the document on small screens.
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  html {
    overflow-x: hidden;
  }
}