/* ==================================================
   MOBILE SMALL SCREEN TUNING (≤480px)
   Complements mobile.css without changing design
   ================================================== */

@media only screen and (max-width: 480px) {

  html, body {
    font-size: 90%;
    line-height: 1.65;
    overflow-x: hidden;
  }

  .container {
    padding: 0 10px !important;
  }

  .logo img {
    max-width: 130px;
  }

  .top-menu span.menu {
    font-size: 16px;
    padding: 8px;
  }

  .top-menu ul li a {
    font-size: 14px;
    padding: 8px 10px;
  }

  .search form input[type="text"] {
    font-size: 14px;
    padding: 8px;
  }

  .single-main h2 {
    font-size: 1.2em;
  }

  .single-main p,
  .single-main blockquote {
    font-size: 0.93em;
    line-height: 1.65;
    text-align: justify;
  }

  .single-main img {
    margin-bottom: 10px;
    border-radius: 4px;
  }

  blockquote {
    padding: 8px 12px;
    border-left-width: 3px;
  }

  .side-content h3 {
    font-size: 1.1em;
    margin-top: 1em;
  }

  .footer {
    padding: 16px 0;
  }

  .footer p {
    font-size: 0.85em;
    line-height: 1.5;
  }

  /* Ensure no float-based overlap remains */
  .col-md-8,
  .col-md-4,
  .col-sm-12,
  .side-content,
  .single-main {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
  }

  /* Add a little spacing between main and sidebar */
  .side-content {
    margin-top: 20px;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
  }
}