/*
  Mobile-only fixes.
  Goal: prevent horizontal overflow on small screens and make common content (media, tables, code blocks)
  responsive without changing desktop layout.
*/

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  /* Slightly smaller gutters on mobile */
  .content,
  .footer .inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Header uses inline styles in header.php; override only on mobile */
  .header-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Prevent header text from forcing horizontal scroll */
  .logo-nocodebox {
    letter-spacing: 0.12em !important;
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-contact {
    max-width: 60vw;
  }

  .header-phone {
    font-size: 14px !important;
  }

  /* Make media responsive */
  img,
  video,
  iframe,
  svg,
  embed,
  object {
    max-width: 100% !important;
    height: auto;
  }

  /* Gutenberg/Content helpers */
  .wp-block-image img,
  figure img {
    height: auto !important;
  }

  .wp-block-embed iframe,
  .wp-block-video video {
    width: 100% !important;
    height: auto !important;
  }

  /* Wide/full alignments should not push outside viewport */
  .alignwide,
  .alignfull {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Tables: allow horizontal scroll instead of layout overflow */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Code/pre blocks: wrap long lines */
  pre,
  code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Long URLs/text should break */
  .content,
  .content * {
    overflow-wrap: anywhere;
  }

  /* Form elements: prevent overflow */
  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .header-phone,
  .header-subline {
    white-space: normal !important;
  }

  .header-contact {
    align-items: flex-start !important;
  }
}