/* ==========================================================================
   Pest Doctor — UI/UX Refinements
   --------------------------------------------------------------------------
   Purpose : Responsiveness, alignment, spacing, consistency & a11y polish.
   Scope   : Additive overrides ONLY. No redesign, no colour/brand changes.
   Loading : Must be linked LAST, after main.css, on every page.
   Tokens  : Reuses existing :root vars (--theme, --header, --text, etc.).
   Method  : Mobile-first within each concern; matches theme breakpoints
             (1399 / 1199 / 991 / 767 / 575 / 470 / 320).
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL — box model, overflow guard, fluid media
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Kill horizontal scrolling everywhere. Decorative absolute shapes and
   parallax transforms in this theme can push content past the viewport. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.page-wrapper,
#smooth-wrapper,
#smooth-content,
section,
footer {
  max-width: 100%;
}

/* Media should never break the layout or force overflow. */
img,
svg,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

/* Slider / object-fit images deliberately fill their box — opt them back in. */
.slide img,
.hero-slider img,
.blog-image img,
.project-image img,
.testimonial-img img,
img[style*="object-fit"],
.thumb img[data-speed] {
  height: 100%;
}

/* Decorative background shapes must never create horizontal scroll. */
.service-bg-shape,
.work-shape-1,
.work-shape-2,
.project-bg-shape,
.pricing-shape,
.hero-shape,
.blog-hero-shape,
[class*="-bg-shape"],
[class*="-shape-"] {
  pointer-events: none;
  max-width: 100%;
}

/* ==========================================================================
   2. CONTAINER & SECTION RHYTHM — consistent gutters and vertical spacing
   ========================================================================== */

/* Comfortable, consistent side gutters on phones/tablets. */
@media (max-width: 991px) {
  .container,
  .container-fluid {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 575px) {
  .container,
  .container-fluid {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* Standardise the theme's section rhythm so every block steps down evenly.
   Desktop spacing is left to the theme; we only tame the mid/small ranges. */
@media (max-width: 991px) {
  .section-padding {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .section-top-padding {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (max-width: 767px) {
  .section-padding {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .section-top-padding {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

@media (max-width: 575px) {
  .section-padding {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .section-top-padding {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

/* Keep centred section titles balanced on small screens. */
@media (max-width: 767px) {
  .section-title {
    margin-bottom: 8px;
  }
  .section-title br {
    display: none;
  }
}

/* ==========================================================================
   3. TYPOGRAPHY — fluid scaling for readability, hierarchy preserved
   --------------------------------------------------------------------------
   Same fonts/weights as the theme; only the size curve is smoothed so big
   display headings stay readable down to 320px without overflowing.
   ========================================================================== */

@media (max-width: 991px) {
  .blog-hero-title {
    font-size: clamp(30px, 5vw, 44px);
  }
  .head h1 {
    font-size: clamp(28px, 5vw, 40px);
  }
}

@media (max-width: 575px) {
  .section-title h2,
  .title.split-title,
  h1 {
    line-height: 1.2;
  }
  .blog-hero-title {
    font-size: clamp(26px, 7vw, 32px);
  }
  .blog-hero-text {
    font-size: 16px;
  }
}

/* Prevent long unbroken strings (emails, URLs, phone numbers) overflowing. */
p,
li,
a,
span,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ==========================================================================
   4. NAVIGATION / HEADER — sticky, logo scaling, mobile bar, offcanvas
   ========================================================================== */

/* Logo scales down gracefully instead of dominating small bars. */
.header-logo img,
.offcanvas__logo img,
.footer-logo img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 575px) {
  .header-logo img,
  .offcanvas__logo img {
    max-height: 40px;
  }
}

/* Comfortable header padding on small screens. */
@media (max-width: 991px) {
  #header-sticky .header-main,
  .header-1 .header-main {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Hamburger / header action icons get proper touch targets (>= 44px). */
.header__hamburger button,
.header-right .sidebar__toggle,
.sidebar-button,
button.navbar-toggler,
.offcanvas__close button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Offcanvas panel: never wider than the screen, comfortable inner spacing. */
.offcanvas__info {
  max-width: 100%;
}

@media (max-width: 575px) {
  .offcanvas__info {
    width: 300px;
    padding: 20px;
  }
  .offcanvas__wrapper {
    padding: 0;
  }
}

/* Mobile dropdown menu items: easier to tap, evenly spaced. */
@media (max-width: 991px) {
  .mean-container .mean-nav ul li a,
  .main-menu nav > ul > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Smooth, consistent submenu reveal animation. */
.main-menu .submenu,
.main-menu ul li .submenu {
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
}

/* ==========================================================================
   5. HERO SECTION — slider sizing, category grid, callback form
   --------------------------------------------------------------------------
   The slider had a fixed height:570px fighting an aspect-ratio rule, which
   distorted on laptops/tablets. Let aspect-ratio drive height for a clean,
   responsive image area at every width.
   ========================================================================== */

.hero-slider {
  height: auto;
  aspect-ratio: 19 / 10;
  min-height: 0;
}

@media (max-width: 1199px) {
  .hero-slider {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 991px) {
  .hero-slider {
    aspect-ratio: 16 / 9;
    min-height: 320px;
  }
}

@media (max-width: 575px) {
  .hero-slider {
    aspect-ratio: 4 / 3;
    min-height: 220px;
  }
}

/* Category grid: comfortable columns that step down, never cramped at 320px. */
@media (max-width: 767px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 400px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

/* Restore a sensible icon size on phones (theme shrinks to 42px at 991). */
@media (max-width: 575px) {
  .category-card img {
    width: 48px;
    height: 48px;
  }
}

/* Callback form: align nicely and give inputs room on small screens. */
@media (max-width: 575px) {
  .callback-form {
    padding: 18px;
    gap: 14px;
  }
}

/* ==========================================================================
   6. CARDS — equal height, consistent padding & radius
   --------------------------------------------------------------------------
   Equalising heights via the column flex so cards in a row line up cleanly.
   ========================================================================== */

.row.g-4 > [class*="col-"],
.row.g-3 > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* Make the common card wrappers fill their column for equal heights. */
.work-process-box-items,
.service-box-items,
.blog-card,
.pricing-box-items,
.team-box-items,
.project-box-items,
.choose-box-items,
.feature-box-items {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Push any trailing CTA/button to the bottom for a tidy baseline. */
.work-process-box-items > .theme-btn,
.service-box-items .theme-btn,
.pricing-box-items .theme-btn,
.blog-card .blog-content .theme-btn {
  margin-top: auto;
}

/* Card imagery keeps aspect ratio without stretching. */
.blog-image,
.project-image,
.service-image {
  overflow: hidden;
}

/* Some grids use the bare Bootstrap .card — guard it against overflow only. */
.section-top-padding .card {
  max-width: 100%;
}

/* ==========================================================================
   7. BUTTONS — standardised sizing, focus, disabled, touch targets
   ========================================================================== */

.theme-btn,
.callback-btn,
.book,
.view,
button.theme-btn,
a.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* The instant-booking buttons lacked a defined height. */
.book {
  height: 52px;
  border-radius: 12px;
}

/* Consistent disabled state. */
.theme-btn:disabled,
.callback-btn:disabled,
.book:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Full-width primary CTAs feel better on phones. */
@media (max-width: 575px) {
  .callback-btn,
  .book {
    width: 100%;
  }
}

/* ==========================================================================
   8. FORMS — input heights, label spacing, alignment, mobile width
   ========================================================================== */

.input-group input,
.callback-form input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  max-width: 100%;
}

/* Consistent control height across the booking filters and forms. */
.filters select,
.filters .view {
  height: 52px;
}

textarea {
  min-height: 120px;
}

/* Inputs already 58px in the callback form; keep contact-form inputs aligned. */
@media (max-width: 575px) {
  .input-group input,
  .callback-form input {
    height: 52px;
  }
}

/* Honour iOS: 16px+ font on inputs prevents zoom-on-focus. */
input,
select,
textarea {
  font-size: 16px;
}

/* ==========================================================================
   9. INSTANT BOOKING — keep the fixed agent badge from blocking content
   ========================================================================== */

@media (max-width: 575px) {
  .agent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* ==========================================================================
   10. FOOTER — mobile/tablet stacking, alignment, social/contact spacing
   ========================================================================== */

@media (max-width: 991px) {
  .footer-top-wrapper {
    flex-wrap: wrap;
    gap: 20px;
    text-align: center;
    justify-content: center;
  }
  .footer-top-wrapper .social-icon {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .footer-widget-wrapper .single-footer-widget {
    margin-bottom: 8px;
  }
  .footer-bottom-area {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer-bottom-area .footer-menu {
    justify-content: center;
  }
}

/* Footer social icons: consistent, tappable circles. */
.footer-section .social-icon a,
.offcanvas__info .social-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

/* ==========================================================================
   11. ACCESSIBILITY — visible focus, reduced motion, skip target
   ========================================================================== */

/* Keyboard focus ring (does not affect mouse users via :focus-visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--theme);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .float-bob-y,
  .float-bob-x {
    animation: none !important;
  }
}

/* ==========================================================================
   12. UTILITY GUARDS — tables, pre/code, and last-element spacing
   ========================================================================== */

table {
  max-width: 100%;
}

pre,
code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Remove stray bottom margin on the final paragraph inside content blocks. */
.section-title p:last-child,
.footer-content p:last-child {
  margin-bottom: 0;
}