/* AWT shared styles: components/awt-ui.css
   Moved from awt-common.css; values and selector scope preserved, 2026-09-22. */

.awt-summary {
  margin: 0 0 34px;
  padding: 20px 22px;
  background: var(--awt-green-soft);
  border: 1px solid #d6e9e1;
  border-radius: var(--awt-radius-md);
}

.awt-summary__label {
  display: block;
  margin-bottom: 7px;
  color: var(--awt-green-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.awt-summary__title {
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--awt-navy) !important;
  background: none !important;
  border: 0 !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
}

.awt-summary__title::before,
.awt-summary__title::after {
  content: none !important;
  display: none !important;
}

.awt-summary p:last-child {
  margin-bottom: 0;
}

.awt-box {
  --awt-box-accent: var(--awt-green);
  --awt-box-bg: var(--awt-green-soft);

  margin: 1.5em 0;
  padding: 18px 20px;
  background: var(--awt-box-bg);
  border: 1px solid color-mix(in srgb, var(--awt-box-accent) 25%, white);
  border-radius: var(--awt-radius-md);
}

.awt-box--info {
  --awt-box-accent: var(--awt-blue);
  --awt-box-bg: var(--awt-blue-soft);
}

.awt-box--important {
  --awt-box-accent: var(--awt-red);
  --awt-box-bg: var(--awt-red-soft);
}

.awt-box--note {
  --awt-box-accent: var(--awt-yellow);
  --awt-box-bg: var(--awt-yellow-soft);
}

.awt-box__label {
  display: block;
  margin-bottom: 6px;
  color: var(--awt-box-accent);
  font-size: 13px;
  font-weight: 800;
}

.awt-box__title {
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: var(--awt-navy) !important;
  background: none !important;
  border: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.awt-box__title::before,
.awt-box__title::after {
  content: none !important;
  display: none !important;
}

.awt-box > :last-child {
  margin-bottom: 0;
}

.awt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  color: #fff !important;
  background: var(--awt-guide-accent, var(--awt-green));
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none !important;
  transition:
    transform var(--awt-transition),
    background var(--awt-transition),
    box-shadow var(--awt-transition);
}

.awt-btn:hover {
  transform: translateY(-1px);
  background: var(--awt-green-dark);
  box-shadow: var(--awt-shadow-sm);
}

.awt-btn--secondary {
  color: var(--awt-navy) !important;
  background: #fff;
  border-color: var(--awt-border);
}

.awt-btn--secondary:hover {
  background: var(--awt-bg-soft);
}

.awt-link-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 64px;
  padding: 14px 16px;
  color: var(--awt-navy) !important;
  background: #fff;
  border: 1px solid var(--awt-border);
  border-radius: var(--awt-radius-md);
  box-shadow: none;
  text-decoration: none !important;
  transition:
    border-color var(--awt-transition),
    box-shadow var(--awt-transition),
    transform var(--awt-transition);
}

.awt-link-card:hover {
  transform: translateY(-1px);
  border-color: #b9d3c9;
  box-shadow: var(--awt-shadow-sm);
}

.awt-link-card strong {
  display: block;
  color: var(--awt-navy);
  font-size: 16px;
  line-height: 1.45;
}

.awt-link-card small {
  display: block;
  margin-top: 3px;
  color: var(--awt-muted);
  font-size: 13px;
  line-height: 1.5;
}

.awt-link-card__arrow {
  color: var(--awt-guide-accent, var(--awt-green));
  font-size: 20px;
}

.awt-link-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
}

.awt-official {
  margin-top: 34px;
  padding: 18px 20px;
  background: #f6f8f9;
  border: 1px solid var(--awt-border);
  border-radius: var(--awt-radius-md);
}

.awt-official__label {
  display: block;
  margin-bottom: 6px;
  color: var(--awt-muted);
  font-size: 12px;
  font-weight: 800;
}

.awt-official p {
  margin-bottom: .7em;
}

.awt-official > :last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
.awt-summary,
  .awt-box {
    padding: 16px;
  }
}

@media (max-width: 600px) {
.awt-summary__title {
    font-size: 19px !important;
  }
}

@media (max-width: 600px) {
.awt-link-card {
    min-height: 60px;
    padding: 13px 14px;
  }
}

@media (max-width: 600px) {
.awt-link-card strong {
    font-size: 15px;
  }
}

/* 次のごみ収集：トップ・ごみガイド共通の簡略表示 */
.awt-page.awt-waste .awt-waste-next {
  margin: 24px 0 32px;
  color: #16394d;
}
.awt-page.awt-waste .awt-waste-next__title {
  margin: 0 0 16px;
  padding: 0 !important;
  border: 0 !important;
  background: none;
  color: #16394d;
  font-size: 24px;
  font-weight: 800;
  text-align: left;
}
.awt-page.awt-waste .awt-waste-next__title::before,
.awt-page.awt-waste .awt-waste-next__title::after,
.awt-page.awt-waste .awt-waste-next__kind::before,
.awt-page.awt-waste .awt-waste-next__kind::after { content: none; }
.awt-page.awt-waste .awt-waste-next__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.awt-page.awt-waste .awt-waste-next__card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--next-border);
  border-radius: 16px;
  background: var(--next-bg);
}
.awt-page.awt-waste .awt-waste-next__card--burnable {
  --next-bg: #fff2ef; --next-border: #efd1c8; --next-ink: #9d422e;
}
.awt-page.awt-waste .awt-waste-next__card--nonburnable {
  --next-bg: #edf5fc; --next-border: #c9deed; --next-ink: #2c6289;
}
.awt-page.awt-waste .awt-waste-next__card--recycle {
  --next-bg: #eff7ef; --next-border: #cfe3d1; --next-ink: #386c46;
}
.awt-page.awt-waste .awt-waste-next__illustration {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 0 12px;
  object-fit: contain;
}
.awt-page.awt-waste .awt-waste-next__kind {
  margin: 0 0 16px;
  padding: 0 !important;
  border: 0 !important;
  background: none;
  font-size: 20px;
  font-weight: 800;
  color: var(--next-ink);
}
.awt-page.awt-waste .awt-waste-next__dates { margin: 0; padding: 0; }
.awt-page.awt-waste .awt-waste-next__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 10px;
}
.awt-page.awt-waste .awt-waste-next__row dt {
  margin: 0; padding: 0; font-size: 14px; font-weight: 500;
}
.awt-page.awt-waste .awt-waste-next__row dd {
  margin: 0; padding: 0; font-size: 18px; font-weight: 800;
}
.awt-page.awt-waste .awt-waste-next__footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 24px; margin-top: 16px;
}
.awt-page.awt-waste .awt-waste-next__footer p { margin: 0; font-size: 14px; }
.awt-page.awt-waste .awt-waste-next a.awt-waste-next__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 18px; border-radius: 8px;
  background: #11753c; color: #fff; font-size: 14px; font-weight: 700;
  text-decoration: none;
}
.awt-page.awt-waste .awt-waste-next a.awt-waste-next__link:hover { background: #0c5c2e; }
.awt-page.awt-waste .awt-waste-next a.awt-waste-next__link:focus-visible { outline: 3px solid #16394d; outline-offset: 3px; }
@media (max-width: 767px) {
  .awt-page.awt-waste .awt-waste-next__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .awt-page.awt-waste .awt-waste-next__card { padding: 18px; }
  .awt-page.awt-waste .awt-waste-next__title { font-size: 22px; }
  .awt-page.awt-waste .awt-waste-next__kind { margin-bottom: 12px; }
  .awt-page.awt-waste .awt-waste-next a.awt-waste-next__link { width: 100%; }
}