/* ==========================================================================
   Komater Tools - 主样式表
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. 基础样式
   -------------------------------------------------------------------------- */
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--bs-background);
  color: var(--bs-text-dark);
  margin: 0;
  min-width: 320px; /* 防止在小屏幕上出现横向滚动条 */
}

/* 全宽区域通用类 */
/* 已迁移到utilities.css，无需保留 */

/* --------------------------------------------------------------------------
   3. 排版样式
   -------------------------------------------------------------------------- */
h1, h2 {
  font-weight: 600;
  color: var(--bs-text-dark);
}

.highlight {
  color: var(--bs-highlight);
}

/* --------------------------------------------------------------------------
   4. 按钮样式
   -------------------------------------------------------------------------- */

/* 联系信息板块样式 */
.contact-info-card {
  background: var(--bs-primary);
  /* border: 6px solid var(--bs-primary-light); */
  border-radius: 0;
  box-shadow: 0 4px 15px rgba(56, 151, 179, 0.1);
  padding: 32px 28px 28px 28px;
  height: 100%;
}
.contact-info-card h2,
.contact-info-label,
.contact-info-icon,
.contact-info-value {
  color: #fff;
}
.contact-info-card h2 {
  font-weight: 600;
  text-align: center;
  margin-bottom: 28px;
}
.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.08rem;
}
.contact-info-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 22px;
}
.contact-info-list li:last-child {
  margin-bottom: 0;
}
.contact-info-list li > div {
  display: flex;
  align-items: flex-start;
  flex-grow: 1;
}
.contact-info-icon {
  font-size: 1.4rem;
  margin-right: 12px;
  flex-shrink: 0;
}
.contact-info-label {
  width: 80px; /* Adjusted width for labels */
  margin-right: 12px;
  font-weight: 600;
  color: #fff;
  text-align: left; /* Align text to the left */
  word-break: break-word;
  white-space: normal;
  flex-shrink: 0; /* Prevent shrinking */
}
.contact-info-value {
  color: #fff;
  word-break: break-word;
  flex-grow: 1; /* Allow it to take remaining space */
  /* text-align is left by default */
}
@media (max-width: 991.98px) {
  .contact-info-card {
    margin-bottom: 32px;
  }
}

/* Map Section Styles */
.map-section {
  /* padding-top and padding-bottom are set by .py-5 class in HTML */
}

.map-section h2 {
  font-weight: 600;
  color: var(--bs-text-dark);
}

.map-responsive {
  overflow: hidden;
  padding-bottom: 56.25%; /* Aspect ratio 16:9 */
  position: relative;
  height: 0;
}

.map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  border-radius: 0; /* Ensure map has sharp corners */
}

/* Styles for the map content card to match Get in Touch card */
.map-content-card {
  background-color: var(--bs-primary); /* Use primary color for background */
  padding: 32px 28px 28px 28px; /* Match padding of .contact-info-card */
  border-radius: 0; /* No rounded corners for the card itself */
  box-shadow: 0 4px 15px rgba(56, 151, 179, 0.1); /* Similar shadow to .contact-info-card */
  height: 100%; /* Ensure it takes full height if needed in flex context */
}

.map-content-card h2 {
  color: #fff; /* White text for readability on dark background */
}