/* Legal Page Specific Styles */

/* Main content area adjustments to account for fixed header */
.legal-page-section {
  padding-top: 100px; /* Default for mobile, adjust if navbar height changes */
  padding-bottom: 60px;
  background-color: var(
    --light-color
  ); /* Light background for the page section */
}

/* Adjust padding for tablets and larger screens */
@media screen and (min-width: 576px) {
  .legal-page-section {
    padding-top: 120px;
  }
}

@media screen and (min-width: 1200px) {
  .legal-page-section {
    padding-top: 140px; /* Adjust for potentially taller header on desktop */
  }
}

.page-main-title {
  font-size: clamp(
    1.8rem,
    5vw,
    2.5rem
  ); /* Responsive title size, consistent with section-title */
  text-align: center;
  margin-bottom: 50px; /* Increased margin like section-title */
  position: relative;
  font-weight: 700;
  color: var(--dark-color);
}

.page-main-title::after {
  content: "";
  position: absolute;
  width: 60px; /* Consistent with section-title */
  height: 4px;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color)
  );
  bottom: -15px; /* Consistent with section-title */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
}

.legal-content-wrapper {
  background-color: var(--white);
  padding: 20px;
  border-radius: var(--border-radius-md);
  box-shadow: var(--box-shadow);
  margin-top: 0; /* page-main-title handles top spacing */
}

@media screen and (min-width: 768px) {
  .legal-content-wrapper {
    padding: 30px 40px;
  }
}

.legal-content-wrapper h2 {
  font-size: clamp(1.4rem, 4vw, 1.7rem);
  color: var(--primary-color);
  margin-top: 25px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--light-gray);
}

.legal-content-wrapper h2:first-child {
  margin-top: 0;
}

.legal-content-wrapper h3 {
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  color: var(--dark-color);
  margin-top: 20px;
  margin-bottom: 10px;
}

.legal-content-wrapper p,
.legal-content-wrapper li {
  font-size: 0.95rem; /* Slightly smaller for dense legal text */
  line-height: 1.8;
  color: var(--dark-color);
  margin-bottom: 12px;
}

@media screen and (min-width: 768px) {
  .legal-content-wrapper p,
  .legal-content-wrapper li {
    font-size: 1rem;
  }
}

.legal-content-wrapper ul {
  list-style: disc;
  padding-left: 25px;
  margin-bottom: 15px;
}

.legal-content-wrapper ul li {
  margin-bottom: 8px;
}

.legal-content-wrapper strong {
  font-weight: 500; /* Noto Sans JP 500 is a good bold */
  color: var(--dark-color);
}

.legal-content-wrapper .date-signature {
  margin-top: 30px;
  text-align: right;
  font-size: 0.9rem;
  color: var(--gray);
}

/* Table styles for SCTL page */
.sctl-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  margin-bottom: 20px;
}

.sctl-table th,
.sctl-table td {
  border: 1px solid #e0e0e0; /* Consistent with company-profile-table */
  padding: 12px 15px;
  text-align: left;
  vertical-align: top;
  font-size: 0.9rem; /* Match p, li */
}

.sctl-table th {
  background-color: var(--light-gray);
  font-weight: 500; /* Noto Sans JP 500 */
  width: 30%;
  white-space: nowrap;
}

.sctl-table td ul {
  margin-bottom: 0;
  padding-left: 20px;
}

/* Responsive adjustments for the SCTL table */
@media screen and (max-width: 768px) {
  .sctl-table th {
    white-space: normal;
    width: 35%;
  }
  .sctl-table th,
  .sctl-table td {
    padding: 10px 8px;
    font-size: 0.85rem;
  }
}

@media screen and (max-width: 576px) {
  /*
      Consider making the table display: block;
      with th, td display: block; and text-align: right; for td::before pseudo-elements
      if horizontal scrolling is not preferred.
      For now, using the existing company-profile approach with overflow.
    */
  .legal-content-wrapper {
    padding: 20px 15px; /* Match company-profile-content padding for smaller screens */
  }
  .sctl-table-container {
    /* Wrap table in this div for overflow */
    overflow-x: auto;
  }
}