/*=====================================
  RESPONSIVE DESIGN SYSTEM
  Mobile-First Approach - JahanHandyman
  Created: 2025-01-01
  Purpose: Organized and maintainable responsive styles
=====================================*/

/*=====================================
  CSS CUSTOM PROPERTIES FOR BREAKPOINTS
=====================================*/
:root {
  /* Standard Bootstrap 5 Breakpoints */
  --breakpoint-xs: 0px; /* Extra Small: 0-575.98px */
  --breakpoint-sm: 576px; /* Small: 576px-767.98px */
  --breakpoint-md: 768px; /* Medium: 768px-991.98px */
  --breakpoint-lg: 992px; /* Large: 992px-1199.98px */
  --breakpoint-xl: 1200px; /* Extra Large: 1200px-1399.98px */
  --breakpoint-xxl: 1400px; /* Extra Extra Large: 1400px+ */

  /* Special Breakpoints for Edge Cases */
  --breakpoint-xs-max: 486px; /* Very Small Mobile - unified breakpoint */
  --breakpoint-tiny: 391px; /* Tiny Mobile */

  /* Tiny Screen Toolbar Custom Properties */
  --toolbar-tiny-btn-font-size: 10px;
  --toolbar-tiny-btn-padding: 5px 8px;
  --toolbar-tiny-btn-border-radius: 35px;
  --toolbar-tiny-btn-letter-spacing: 0.01em;

  /* Enhanced button sizing for primary actions */
  --toolbar-primary-btn-font-size: 13px;
  --toolbar-primary-btn-padding: 8px 14px;
  --toolbar-primary-btn-min-width: 80px;
  --toolbar-primary-btn-max-width: 110px;
  --toolbar-primary-btn-font-weight: 600;

  /* Toolbar Logo Responsive Sizing */
  --toolbar-logo-width: 100px;
  --toolbar-logo-height: 35px;

  /* Hero Section Responsive Padding - Mobile-First */
  --hero-padding-xs: 2px; /* Extra Small Mobile (≤575.98px) */
  --hero-padding-sm: 8px; /* Small Tablets (576px-767.98px) */
  --hero-padding-md: 18px; /* Tablets (768px-991.98px) */
  --hero-padding-lg: 20px; /* Desktop (992px-1199.98px) */
  --hero-padding-xl: 24px; /* Large Desktop (1200px-1399.98px) */
  --hero-padding-xxl: 28px; /* Ultra-Wide (≥1400px) */

  /* Postcode Form Responsive Padding */
  --form-padding-xs: 6px 4px; /* Extra Small Mobile */
  --form-padding-sm: 12px 8px; /* Small Tablets */
  --form-padding-md: 28px 24px; /* Tablets */
  --form-padding-lg: 30px 28px; /* Desktop */
  --form-padding-xl: 32px 30px; /* Large Desktop */
  --form-padding-xxl: 36px 32px; /* Ultra-Wide */

  /* Postcode Input Responsive Padding */
  --input-padding-xs: 0.4rem 0.3rem; /* Extra Small Mobile */
  --input-padding-sm: 0.5rem 0.4rem; /* Small Tablets */
  --input-padding-md: 0.75rem; /* Tablets */
  --input-padding-lg: 0.75rem; /* Desktop */
  --input-padding-xl: 0.75rem; /* Large Desktop */
  --input-padding-xxl: 0.75rem; /* Ultra-Wide */

  /* Responsive Width Percentages */
  --width-mobile: 96%; /* Mobile devices */
  --width-tablet: 95%; /* Small tablets */
  --width-desktop: auto; /* Desktop and larger */

  /* Sticky Call Button Variables */
  --sticky-btn-bottom-desktop: 25px;
  --sticky-btn-bottom-mobile: 15px;
  --sticky-btn-font-size-desktop: 20px;
  --sticky-btn-font-size-mobile: 16px;
}

/*=====================================
  MOBILE-FIRST RESPONSIVE STYLES
  Base styles are mobile-first, then enhanced for larger screens
=====================================*/

/*=====================================
  EXTRA SMALL (0px - 575.98px)
  Base mobile styles
  Note: Bootstrap 5 standard breakpoint (xs)
  Uses 575.98px to prevent 1px gap with sm breakpoint (576px)
=====================================*/
@media screen and (max-width: 575.98px) {
  /* Typography adjustments for very small screens */
  body {
    font-size: 0.9rem;
  }

  /* Toolbar logo sizing for very small screens */
  :root {
    --toolbar-logo-width: 80px;
    --toolbar-logo-height: 28px;
  }

  /* Map section adjustments for very small screens */

  /* Navbar brand font size adjustment for mobile */
  .navbar-brand {
    font-size: 18px !important;
    white-space: nowrap;
  }

  .navbar-brand #header-title {
    white-space: nowrap;
  }

  /* Section titles font size adjustment for mobile */
  .process-section h2,
  .services-section h2 {
    font-size: 24px !important;
  }

  .section-small-title {
    font-size: 14px !important;
  }

  /* Footer titles font size adjustment for mobile */
  .site-footer h3 {
    font-size: 18px !important;
  }

  /* Process scroll container margins adjustment for mobile */
  .process-scroll-wrapper {
    padding: 0 15px !important;
  }

  .process-scroll-container {
    margin: 0 -10px !important;
  }

  /* Sticky call button adjustment for mobile */
  #sticky-call-btn {
    left: 20px !important;
    bottom: 20px !important;
    transform: none !important;
    padding: 12px 18px !important;
    font-size: 16px !important;
    border-radius: 50px !important;
    min-width: auto !important;
    width: auto !important;
    max-width: 200px !important;
  }

  #sticky-call-btn .bi {
    font-size: 20px !important;
    margin-right: 10px !important;
  }

  /* Toolbar stars positioning adjustment for mobile */
  .toolbar-compact-container .toolbar-stars {
    bottom: 2px !important;
    transform: translateX(-50%) !important;
  }

  .toolbar-compact-container {
    min-height: 45px !important;
  }

  /* Service cards width adjustment for mobile */
  .services-section .custom-block {
    width: 100% !important;
    max-width: 100% !important;
  }

  .services-section .col-lg-4.col-md-6.col-12 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .services-section .custom-block .d-flex {
    padding: 20px !important;
  }

  .services-section .custom-block h3 {
    font-size: 1.3rem !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  .services-section .custom-block p {
    font-size: 1.05rem !important;
    -webkit-line-clamp: 4 !important;
    min-height: 60px !important;
  }

  /* Emergency service container width adjustment for mobile */
  #emergency-service-container,
  .service-info-box {
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  /* Emergency phone display button size adjustment for mobile */
  .emergency-phone-display {
    padding: 8px 16px !important;
    font-size: 14px !important;
    border-radius: 40px !important;
  }

  .emergency-phone-display i {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.8rem !important;
  }

  .emergency-phone-display .call-now-text {
    font-size: 13px !important;
  }
}

/*=====================================
  SMALL (576px - 767.98px)
  Small tablets styles
=====================================*/
@media screen and (min-width: 576px) and (max-width: 767.98px) {
  /* Section titles font size adjustment for small tablets */
  .process-section h2,
  .services-section h2 {
    font-size: 28px !important;
  }

  .section-small-title {
    font-size: 15px !important;
  }

  /* Footer titles font size adjustment for small tablets */
  .site-footer h3 {
    font-size: 20px !important;
  }

  /* Navbar brand font size adjustment for small tablets */
  .navbar-brand {
    font-size: 20px !important;
  }

  /* Process scroll container margins adjustment for small tablets */
  .process-scroll-wrapper {
    padding: 0 20px !important;
  }

  .process-scroll-container {
    margin: 0 -15px !important;
  }

  /* Sticky call button adjustment for small tablets */
  #sticky-call-btn {
    left: 25px !important;
    bottom: 20px !important;
    transform: none !important;
    padding: 13px 20px !important;
    font-size: 17px !important;
    border-radius: 55px !important;
    min-width: auto !important;
    width: auto !important;
    max-width: 220px !important;
  }

  #sticky-call-btn .bi {
    font-size: 22px !important;
    margin-right: 11px !important;
  }

  /* Toolbar stars positioning adjustment for small tablets */
  .toolbar-compact-container .toolbar-stars {
    bottom: 0px !important;
    transform: translateX(-50%) !important;
  }

  .toolbar-compact-container {
    min-height: 48px !important;
  }

  /* Service cards width adjustment for small tablets */
  .services-section .custom-block {
    width: 100% !important;
    max-width: 100% !important;
  }

  .services-section .col-md-6.col-12 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .services-section .custom-block .d-flex {
    padding: 18px !important;
  }

  .services-section .custom-block h3 {
    font-size: 1.25rem !important;
    padding-right: 50px !important;
    max-width: calc(100% - 50px) !important;
  }

  .services-section .custom-block p {
    font-size: 1.08rem !important;
    -webkit-line-clamp: 3 !important;
    min-height: 50px !important;
  }

  /* Emergency service container width adjustment for small tablets */
  #emergency-service-container,
  .service-info-box {
    max-width: 400px !important;
    margin: 0 auto !important;
  }

  /* Emergency phone display button size adjustment for small tablets */
  .emergency-phone-display {
    padding: 9px 18px !important;
    font-size: 15px !important;
    border-radius: 45px !important;
  }

  .emergency-phone-display i {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.85rem !important;
  }

  .emergency-phone-display .call-now-text {
    font-size: 14px !important;
  }
}

/*=====================================
  MEDIUM (768px - 991.98px)
  Tablet styles
=====================================*/
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  /* Toolbar logo sizing for tablets */
  :root {
    --toolbar-logo-width: 90px;
    --toolbar-logo-height: 32px;
  }

  /* Section titles font size adjustment for medium tablets */
  .process-section h2,
  .services-section h2 {
    font-size: 32px !important;
  }

  .section-small-title {
    font-size: 16px !important;
  }

  /* Footer titles font size adjustment for medium tablets */
  .site-footer h3 {
    font-size: 22px !important;
  }

  /* Navbar brand font size adjustment for medium tablets */
  .navbar-brand {
    font-size: 22px !important;
  }

  /* Process scroll container margins adjustment for medium tablets */
  .process-scroll-wrapper {
    padding: 0 25px !important;
  }

  .process-scroll-container {
    margin: 0 -20px !important;
  }

  /* Sticky call button adjustment for medium tablets */
  #sticky-call-btn {
    left: 30px !important;
    bottom: 20px !important;
    transform: none !important;
    padding: 14px 22px !important;
    font-size: 18px !important;
    border-radius: 60px !important;
    min-width: auto !important;
    width: auto !important;
    max-width: 240px !important;
  }

  #sticky-call-btn .bi {
    font-size: 23px !important;
    margin-right: 12px !important;
  }

  /* Toolbar stars positioning adjustment for medium tablets */
  .toolbar-compact-container .toolbar-stars {
    bottom: -1px !important;
    transform: translateX(-50%) !important;
  }

  .toolbar-compact-container {
    min-height: 50px !important;
  }

  /* Service cards width adjustment for medium tablets (2-column layout) */
  .services-section .custom-block {
    width: 100% !important;
    margin-bottom: 25px !important;
  }

  .services-section .custom-block .d-flex {
    padding: 16px !important;
  }

  .services-section .custom-block h3 {
    font-size: 1.2rem !important;
    padding-right: 60px !important;
    max-width: calc(100% - 60px) !important;
  }

  .services-section .custom-block p {
    font-size: 1rem !important;
    -webkit-line-clamp: 3 !important;
    min-height: 45px !important;
  }

  /* Emergency service container width adjustment for medium tablets */
  #emergency-service-container,
  .service-info-box {
    max-width: 500px !important;
    margin: 0 auto !important;
  }

  /* Emergency phone display button size adjustment for medium tablets */
  .emergency-phone-display {
    padding: 10px 20px !important;
    font-size: 16px !important;
    border-radius: 48px !important;
  }

  .emergency-phone-display i {
    width: 27px !important;
    height: 27px !important;
    font-size: 0.9rem !important;
  }

  .emergency-phone-display .call-now-text {
    font-size: 15px !important;
  }
}

/*=====================================
  LARGE (992px - 1199.98px)
  Desktop styles
=====================================*/
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  /* Toolbar logo sizing for desktop */
  :root {
    --toolbar-logo-width: 100px;
    --toolbar-logo-height: 35px;
  }
}

/*=====================================
  EXTRA LARGE (1200px - 1399.98px)
  Large desktop styles
=====================================*/
@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
  /* Toolbar logo sizing for large desktop */
  :root {
    --toolbar-logo-width: 110px;
    --toolbar-logo-height: 38px;
  }
}

/*=====================================
  EXTRA EXTRA LARGE (1400px+)
  Ultra-wide desktop styles
=====================================*/
@media screen and (min-width: 1400px) {
  /* Toolbar logo sizing for ultra-wide desktop */
  :root {
    --toolbar-logo-width: 120px;
    --toolbar-logo-height: 40px;
  }
}