/* responsive-fix.css
   Mobile-first responsive utility for SafeTec site.
   Add this file after your other CSS files.
*/

/* --- Theme variables --- */
:root{
  --primary: #0a4fb4;
  --accent: #007bff;
  --bg: #f5f7fa;
  --card-shadow: 0 6px 20px rgba(2,6,23,0.06);
  --rounded: 10px;
  --header-height-mobile: 112px; /* combined topbar + header on small screens */
  --header-height-desktop: 120px;
}

/* --- Base reset additions --- */
html,body{height:100%}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}

/* --- Ensure body content sits below fixed top bars (dynamic adjust done by JS too) --- */
body{
  background:var(--bg);
  margin:0;
  padding-top: calc(var(--header-height-desktop));
  -webkit-font-smoothing:antialiased;
}

/* For smaller screens, reduce top padding */
@media (max-width: 767.98px){
  body{ padding-top: calc(var(--header-height-mobile)); }
}

/* --- Topbar and header improvements (non-invasive) --- */
.top-bar{
  box-sizing: border-box;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #e9eef8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font-size: 14px;
}
.top-bar .contact-info{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.top-bar .social-icons{display:flex;gap:10px;align-items:center}

/* Make header use flex wrap on small screens */
#header, header {
  background:#fff;
  box-shadow: 0 2px 12px rgba(2,6,23,0.04);
  z-index: 1500;
}

/* navbar safe defaults */
#navbar ul, #navbar .nav { display:flex; gap: 10px; align-items:center; list-style:none; padding:0; margin:0 }
#navbar a.nav-link { color: #222; padding:8px 10px; border-radius:6px; transition:0.2s; display:flex; align-items:center; gap:8px }
#navbar a.nav-link:hover{ background: rgba(10,79,180,0.06); color:var(--primary) }

/* On small screens make nav wrap or collapse */
@media (max-width: 991.98px){
  #navbar ul{ flex-wrap:wrap; gap:8px; }
  #navbar .nav-link{ padding:8px; font-size:15px; }
}

/* --- Layout: services sidebar & main content --- */
.services-menu{
  background:#fff;
  border-radius:12px;
  padding:18px;
  box-shadow: var(--card-shadow);
  position: sticky;
  top: calc(var(--header-height-desktop) + 20px);
}

/* Sticky top for smaller screens: a little lower to avoid overlap */
@media (max-width: 991.98px){
  .services-menu{ position: static; top: auto; margin-bottom: 18px; }
}

/* sidebar links */
.services-menu a{
  display:block; padding:12px; margin-bottom:8px; border-radius:8px;
  border:1px solid #eef4ff; color:#112; background:transparent; font-weight:600;
}
.services-menu a:hover, .services-menu a.active{
  background:var(--accent); color:#fff; border-color:var(--accent);
}

/* service block — alternating layout handled by markup; ensure responsiveness */
.service-block{
  padding:20px; border-radius:12px; background:#fff; box-shadow:var(--card-shadow);
  margin-bottom: 28px;
}
.service-block .row{ align-items:center; gap: 12px; }
.service-block h3{ color:var(--primary); margin-bottom:0.6rem; }
.service-block p{ color:#333; line-height:1.6 }

/* medium sized images */
.service-block img{
  max-width: 350px; width:100%; height:auto; border-radius:10px; object-fit:cover;
}

/* On small screens, stack properly */
@media (max-width: 767.98px){
  .service-block .col-md-5, .service-block .col-md-7 { width:100%; display:block; }
  .service-block .col-md-5 { margin-bottom:12px; text-align:center; }
  .service-block { padding:18px; }
}

/* Request-for-Quote beautified button (applies to .more-btn or .btn-quote) */
.more-btn, .btn-quote {
  display:inline-block;
  background: var(--accent);
  color:#fff;
  padding:10px 18px;
  border-radius: 8px;
  font-weight:700;
  border: 2px solid var(--accent);
  transition: all 0.22s ease;
}
.more-btn:hover, .btn-quote:hover {
  background:#fff; color:var(--accent); box-shadow: none;
  transform: translateY(-2px);
}

/* Make the image area show button centered under image on mobile */
.service-block .text-center .btn-quote{ margin-top:12px; }

/* Forms and inputs */
input, select, textarea {
  width:100%; padding:12px 14px; border:1px solid #e6eef8; border-radius:8px; font-size:15px;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 6px 20px rgba(10,79,180,0.08); }

/* footer */
.footer, footer { background:#fff; padding:40px 20px; color:#333; border-top:1px solid #eef4ff; }

/* Utility classes */
.hide-mobile{ display:none; }
@media (min-width: 768px){ .hide-mobile{ display:block; } .show-mobile{ display:none; } }
@media (max-width: 767.98px){ .show-mobile{ display:block; } }

/* small tweaks for overflowing text */
.break-word{ word-break: break-word; }

/* clickable whole-card improvement for services list */
.services-menu a{ cursor:pointer; }

/* Accessibility: focus outlines */
a:focus, button:focus, input:focus{ box-shadow: 0 0 0 3px rgba(10,79,180,0.12); }

/* small print */
.small-muted{ color:#6b7280; font-size:14px; }