/* Satsanga Responsive: mobile layout for the original "satsangaweb" theme.
   Loaded after the theme's own stylesheet by mu-plugins/satsanga-responsive.php.
   Everything is inside a max-width media query, so desktop looks exactly as before.
   It only rearranges the theme's own images, colours and fonts; nothing new is introduced. */

@media (max-width: 800px) {
  html { -webkit-text-size-adjust: 100%; }

  /* Page: the theme sets a 770px minimum width and 12px text */
  #background {
    position: static;
    height: auto;
    font-size: 100%;
    line-height: 1.55;
    background-attachment: scroll;
    background-size: 300px auto;
    overflow-x: hidden;
  }
  #container { min-width: 0; position: relative; }

  /* Left decorative strip: keep it, narrower */
  #topleft, #midleft, #lowleft { width: 18px; background-size: 18px auto; }
  #topleft { height: 32px; }
  #midleft { display: none; }
  #lowleft { top: 0; }

  /* Header: acharya pictures (centred and scaled), then the banner, both in the normal flow */
  #acharyabox { height: auto; padding: 10px 0 6px 22px; box-sizing: border-box; }
  #sribox {
    float: none;
    margin: 0 auto;
    transform-origin: left top;
    /* 435px wide artwork, scaled to the screen */
    transform: scale(var(--sri-scale, 1));
    /* artwork is 38px plus the 16px name row at top:40px = 58px; a transform doesn't change layout,
       so pull the following content up by the space the scaling saves */
    height: 58px;
    margin-bottom: calc(58px * (var(--sri-scale, 1) - 1));
  }
  #banner {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    aspect-ratio: 691 / 102;
    margin: 4px 8px 0 22px;
    background-size: 100% auto;
  }

  /* Menu tabs: the theme's own button images, wrapped onto several lines */
  #left-col { width: auto; padding: 8px 8px 0 24px; box-sizing: border-box; }
  #nav { float: none; width: auto; padding: 0 0 6px; }
  #nav ul { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; }
  #nav ul li { float: none; }
  #nav ul li a { padding: 9px 8px 7px 4px; }

  /* Posts take the full width; the sidebar follows below them */
  #mainmain, #main { float: none; width: auto; }
  #main { padding: 8px 12px 16px 24px; box-sizing: border-box; }
  #content { width: auto; }
  #content p, #content li { text-align: left !important; }
  #content img, #content iframe, #content video, #content embed, #content object, #content table {
    max-width: 100% !important;
    height: auto;
  }
  #content table { display: block; overflow-x: auto; }
  #content .wp-audio-shortcode, #content .mejs-container { max-width: 100%; }
  h2 { line-height: 1.25; }
  .post .title { padding-left: 52px; width: auto; box-sizing: border-box; }
  .postdata .category { float: none; }
  .post-nav { overflow: hidden; padding-bottom: 16px; }
  .post-nav .previous a, .post-nav .next a { float: none; display: block; padding-top: 4px; padding-bottom: 4px; }
  .post-nav .next a { text-align: left; padding-right: 0; padding-left: 20px; background-position: left center; }

  #sidemenu {
    float: none;
    width: auto;
    margin: 0;
    padding: 12px 12px 16px 24px;
    box-sizing: border-box;
  }
  #sidebar, .dbx-group { float: none !important; width: auto !important; }
  #search { width: auto; height: auto; display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
  #search form { display: flex; align-items: center; gap: 6px; width: 100%; }
  #search_input { flex: 1; float: none; width: auto; height: auto; }
  #search_input input { height: 36px; padding: 0 8px; box-sizing: border-box; font-size: 16px; }
  #search_submit { float: none; height: auto; }
  /* Category / archive lists: one readable size for the names and the post counts */
  #menu_box ul, #menu_box ul li, #menu_box ul li a,
  #menu_box ul li ul, #menu_box ul li ul li { font-size: 14px !important; line-height: 1.5; }
  #menu_box ul li { padding: 5px 0; }
  #menu_box ul, .dbx-handle ul { width: auto !important; }
  .dbx-content { padding-right: 10px; }
  .dbx-tooltip { display: none !important; }

  /* Comment form */
  #commentform textarea { width: 100%; box-sizing: border-box; }

  #footer { left: 0; padding: 8px 12px 16px 24px; }
}

/* Scale for the 435px acharya artwork (custom property read above) */
@media (max-width: 480px) { :root { --sri-scale: .76; } }
@media (max-width: 400px) { :root { --sri-scale: .72; } }
@media (max-width: 360px) { :root { --sri-scale: .66; } }