/* ================================================
   TopCleanRado — Responsive Styles (responsive.css)
   Mobile and Tablet Layout Adjustments
   ================================================ */

/* ========================
   General Adjustments
   ======================== */
@media (max-width: 768px) {
  /* Hide the logo */
  .logo {
    display: none !important;
  }

  /* Stack header items vertically */
  .header-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Move header-top (profile) below nav */
  .header-top {
    order: 3; /* ensures it's after the nav */
    margin-top: 15px;
  }

  nav.main-nav {
    order: 2;
  }
}

/* ========================
   Tablets and Small Screens
   ======================== */
@media (max-width: 768px) {
  .top-bar {
    font-size: 0.85rem;
    padding: 10px;
  }

  .top-bar span {
    display: block;
    margin-bottom: 5px;
  }

  nav ul {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  main {
    margin: 20px 10px;
    padding: 25px 15px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  form, .contact-info {
    width: 100%;
  }

  h1 {
    font-size: 1.8rem;
  }

  p {
    font-size: 1rem;
  }

  .btn, button {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
  }

  footer {
    padding: 25px 10px;
  }

  footer a {
    display: inline-block;
    margin: 5px 10px;
  }
}

/* ========================
   Phones and Narrow Screens
   ======================== */
@media (max-width: 480px) {
  .top-bar {
    font-size: 0.8rem;
  }

  .logo img {
    height: 55px;
    padding: 8px;
  }

  nav ul {
    gap: 8px;
  }

  main {
    padding: 15px;
  }

  h1, h2 {
    font-size: 1.5rem;
  }

  p {
    font-size: 0.95rem;
  }

  input, textarea, select {
    font-size: 0.9rem;
  }

  button, .btn {
    font-size: 0.95rem;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .why-container {
    flex-direction: column;
    text-align: center;
  }

  .why-text {
    padding-top: 20px;
  }

  .why-image img {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hero-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
    margin: 0;
  }

  .hero-image {
    width: 100% !important;
  }

  .hero-image img {
    width: 100% !important;
    height: 400px !important; /* you can increase this for more height */
    object-fit: cover;
    object-position: center;
    border-radius: 0; /* optional: remove rounded corners for full-width look */
  }

  .hero-text {
    padding-top: 20px;
  }
}

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    align-items: center;
  }

  .logo img {
    height: 60px;
  }

  main {
    margin: 20px 10px;
    padding: 20px;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .subscribe-container {
    padding: 30px 20px;
  }
  .subscribe h2 {
    font-size: 1.7em;
  }
  .subscribe-form input[type="email"] {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .services-grid {
    gap: 30px;
  }
}

/* ======= Responsive Modal ======= */
@media (max-width: 768px) {
  .modal-content {
    width: 90% !important;     /* fills most of the screen */
    max-width: 90% !important; /* override desktop max-width */
    margin: 10% auto !important; /* vertically centered and spaced */
    padding: 20px !important;  /* reduce padding for small screens */
    box-sizing: border-box;    /* ensures padding doesn’t increase width */
  }

  .modal-content h2 {
    font-size: 1.4rem;         /* smaller title */
    text-align: center;
  }

  .modal-form-single input,
  .modal-form-single button {
    width: 100%;
    font-size: 1rem;
  }
}

/* ======= Google Map Responsive Fix ======= */
@media (max-width: 768px) {
  .google-map-reviews iframe {
    width: 100% !important;
    height: 300px !important; /* reduce height for better fit */
    border-radius: 10px; /* optional, keeps the modern rounded look */
  }

  .google-map-reviews {
    padding: 0 10px; /* adds small spacing on sides */
    box-sizing: border-box;
  }
}