/* Minimal mobile responsive overrides for Blogger "Picture Window" template.
   Targets only the specific rules that force desktop widths. Does NOT
   restructure the layout — lets Blogger's normal flow work at narrow widths.
   Only applies at ≤ 768px; desktop rendering is untouched. */

@media (max-width: 768px) {

  /* 1. Stop forcing desktop widths on the root + main wrappers */
  html, body {
    overflow-x: hidden !important;
    min-width: 0 !important;
    max-width: 100vw !important;
  }

  body .content-outer,
  body .content-fauxcolumn-outer,
  body .region-inner,
  body #layout .content-outer {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
  }

  /* 2. Blogger reserves 260px on right of main .columns for sidebar — kill it */
  body .main-inner .columns {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* 3. Stack sidebar below main content, full-width */
  /* Hide only the DECORATIVE fauxcolumn backgrounds */
  body .main-inner .fauxcolumn-right-outer,
  body .main-inner .fauxcolumn-left-outer {
    display: none !important;
  }
  /* Real sidebar columns: un-park the negative margin and stack below */
  body .main-inner .column-right-outer,
  body .main-inner .column-left-outer {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
  body .main-inner .column-right-inner,
  body .main-inner .column-left-inner {
    width: 100% !important;
    padding: 0 !important;
  }

  body .main-inner .column-center-outer,
  body .main-inner .fauxcolumn-center-outer {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    float: none !important;
    position: static !important;
  }

  /* Clear floats so sidebar starts fresh below main content */
  body .main-inner .columns::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
  }

  /* Widgets in the sidebar (About Yarone, Follow, Recent, Popular Posts, etc.) */
  body .column-right-outer .widget,
  body .column-left-outer .widget {
    background: #fff !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
  }

  /* Hide utility widgets that have no heading (e.g. style-only HTML widgets
     that Blogger uses to inject CSS — they'd render as empty white cards). */
  body .column-right-outer .widget:not(:has(h2)):not(:has(h3)),
  body .column-left-outer .widget:not(:has(h2)):not(:has(h3)) {
    display: none !important;
  }
  body .widget h2,
  body .widget-content h2 {
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #71717a !important;
    margin: 0 0 10px !important;
    font-weight: 600 !important;
  }
  body .widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body .widget li {
    padding: 4px 0 !important;
    border-bottom: 1px solid #f4f4f5 !important;
  }
  body .widget li:last-child { border-bottom: none !important; }
  body .widget img {
    max-width: 100% !important;
    height: auto !important;
  }
  body .widget .profile-img {
    max-width: 120px !important;
  }

  /* 4. Post card: remove the -20px negative side margins, use border-box
     so padding doesn't push width past the viewport */
  body .post-outer,
  body .post,
  body .Blog,
  body .main-inner,
  body .content-inner,
  body .header-inner,
  body .columns-inner,
  body .column-center-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 5. Header title wraps instead of getting clipped */
  body .header h1,
  body .header h1 a {
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  /* 6. Images + embeds scale to column */
  body img,
  body iframe,
  body video,
  body embed,
  body object {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 7. Pre/code wrap instead of horizontal-scroll the page */
  body pre,
  body code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }

  /* 8. Tables in posts scroll horizontally within themselves */
  body .post-body table {
    max-width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
  }

  /* 9. Simplify background on mobile (remove fixed attachment lag) */
  body {
    background-attachment: scroll !important;
  }
}