/*
Theme Name: zeeBusiness Responsive (child)
Description: Responsive child theme of zeeBusiness. Widens main column on large screens (sidebar stays 280px fixed) and collapses cleanly on mobile. Preserves the original appearance at typical desktop widths.
Author: bikinginla
Template: zeebusiness
Version: 1.0.0
*/

/* ============================================================
   ZEEBUSINESS CHILD — responsive overrides
   Layered on top of the parent stylesheet.
   Strategy:
     - >=900px (desktop): grid layout, content flexes, sidebar fixed 280px
     - <900px (mobile/tablet): single-column stack
     - Always: media stays inside its container
   ============================================================ */

/* --- DESKTOP: widen the layout while keeping current min appearance --- */
@media (min-width: 900px) {

  #wrapper {
    width: auto !important;
    min-width: 900px;
    max-width: 1400px;
    box-sizing: border-box;
  }

  #wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 30px;
    padding: 0 20px;
  }

  #content {
    width: auto !important;
    float: none !important;
    min-width: 0; /* prevents grid blowout from long lines */
  }

  #sidebar {
    width: 280px !important;
    float: none !important;
  }

  /* Full-width / sitemap templates: take the whole content area */
  .page-template-template-full #content,
  .page-template-template-sitemap #content {
    width: 100% !important;
  }

  /* Top-level chrome inherits new wrapper width */
  #header, #navi, #bottombar, #footer {
    width: auto !important;
  }
}

/* --- MOBILE: single column, no horizontal scroll --- */
@media (max-width: 899px) {

  #wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 10px 0 !important;
    border-left: 0;
    border-right: 0;
  }

  #wrap {
    display: block;
    padding: 0 10px;
  }

  #content {
    width: 100% !important;
    float: none !important;
  }

  #sidebar {
    width: 100% !important;
    float: none !important;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
  }

  /* Header */
  #header   { padding: 10px !important; }
  #head     { display: flex; flex-wrap: wrap; align-items: center; }
  #logo     { flex: 1; min-width: 0; }
  #logo img { max-width: 100% !important; height: auto !important; }
  #topnavi  { width: 100%; margin-top: 10px; }

  /* Main nav: allow horizontal scroll rather than break layout */
  #navi {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #nav { white-space: nowrap; }

  /* Footer widgets stack instead of floating */
  #bottombar_left,
  #bottombar_center,
  #bottombar_right {
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px;
    padding: 10px;
  }

  /* Footer */
  #footer { padding: 15px !important; text-align: center; }
}

/* --- ALWAYS: keep media inside its container --- */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Tables and code blocks shouldn't force horizontal page scroll */
table   { max-width: 100% !important; display: block; overflow-x: auto; }
pre, code { white-space: pre-wrap; word-wrap: break-word; }

/* WordPress alignment helpers for embedded media */
.alignleft, .alignright, .aligncenter { max-width: 100%; }

/* === Defensive: override anything in parent that might keep sidebar out of grid cell === */
@media (min-width: 900px) {
  #wrap > #content,
  #wrap > #sidebar {
    clear: none !important;
    display: block !important;
  }
  #wrap::after { display: none !important; }  /* kill any clearfix that disrupts grid */
}

/* === Critical: parent has margin-left:570px on #sidebar (legacy float layout)
       which pushes sidebar contents off-screen inside the grid cell. Reset it. === */
#sidebar {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  clear: none !important;
}
#content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  clear: none !important;
}