/* Global responsive overrides for Kukola.fi */

/* Avoid long words and links breaking layout on narrow screens */
.category-list li,
.yhttied li,
.contact-card a,
.service-box p,
#heroText,
#fpTagline {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Improve nav behavior on small screens */
@media (max-width: 991.98px) {
  .navbar#main-nav {
    margin-left: 0;
    margin-right: 0;
  }

  .navbar#main-nav .navbar-brand img {
    max-height: 44px;
    width: auto;
  }

  .navbar#main-nav .navbar-collapse {
    padding: 0.5rem 0;
  }

  .navbar#main-nav .nav-link {
    padding: 0.7rem 0.9rem;
    font-size: 0.98rem;
  }
}

/* Tablet and down */
@media (max-width: 767.98px) {
  #page-sub-header {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  #page-sub-header h1,
  #fpTagline {
    font-size: 1.6rem !important;
    line-height: 1.2;
    margin-top: 0.5rem;
  }

  #heroText {
    margin-left: 0;
    margin-right: 0;
    font-size: 1.2rem;
    line-height: 1.35;
    padding: 0.6rem 0.5rem;
    border-radius: 0.35rem;
  }

  .page-section {
    padding: 3.25rem 0;
  }

  .front-categories .category-card {
    padding: 1rem;
  }

  .front-categories .category-list li {
    font-size: 0.92rem;
    line-height: 1.35;
  }

  /* Override legacy float-based contact list layout */
  .yhttied {
    width: 100% !important;
    margin-right: 0 !important;
    float: none !important;
  }

  #g-map {
    height: 300px;
  }

  /* Keep carousel controls from clipping viewport */
  .owl-prev,
  .owl-next {
    display: none !important;
  }
}

/* Small phones */
@media (max-width: 575.98px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  #page-sub-header h1,
  #fpTagline {
    font-size: 1.35rem !important;
  }

  .hah-header {
    padding: 5rem 0 2rem;
    min-height: auto;
  }

  .btn-xl {
    width: 100%;
    display: block;
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  .service-box,
  #services .service-card,
  #enquiryForm,
  .contact-card,
  .map-wrap,
  .front-categories .category-card {
    border-radius: 10px;
  }

  .front-categories .category-icon {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
    margin-right: 0.55rem;
  }

  .front-categories .category-card h3 {
    font-size: 1rem;
  }

  #g-map {
    height: 240px;
  }
}